feat(ui): hide navbar after 3 minutes with no activity

ui/src/Components/NavBar/index.js

@@ -1,10 +1,13 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 
+import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 
 import ReactResizeDetector from "react-resize-detector";
 
+import IdleTimer from "react-idle-timer";
+
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
@@ -27,6 +30,22 @@ const NavBar = observer(
       silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired
     };
 
+    activityStatus = observable(
+      {
+        idle: false,
+        setIdle() {
+          this.idle = true;
+        },
+        setActive() {
+          this.idle = false;
+        }
+      },
+      {
+        setIdle: action.bound,
+        setActive: action.bound
+      }
+    );
+
     render() {
       const { alertStore, settingsStore, silenceFormStore } = this.props;
 
@@ -39,30 +58,40 @@ const NavBar = observer(
           : "flex-row";
 
       return (
-        <div className="container">
-          <nav className="navbar fixed-top navbar-expand navbar-dark p-1 bg-primary-transparent d-inline-block">
-            <ReactResizeDetector handleHeight onResize={NavbarOnResize} />
-            <span className="navbar-brand my-0 mx-2 h1 d-none d-sm-block float-left">
-              {alertStore.info.totalAlerts}
-              <FetchIndicator status={alertStore.status.value.toString()} />
-            </span>
-            <ul className={`navbar-nav float-right d-flex ${flexClass}`}>
-              <SilenceModal
-                alertStore={alertStore}
-                silenceFormStore={silenceFormStore}
-                settingsStore={settingsStore}
-              />
-              <MainModal
+        <IdleTimer
+          onActive={this.activityStatus.setActive}
+          onIdle={this.activityStatus.setIdle}
+          timeout={1000 * 60 * 3}
+        >
+          <div className="container">
+            <nav
+              className={`navbar fixed-top navbar-expand navbar-dark p-1 bg-primary-transparent ${
+                this.activityStatus.idle ? "d-none" : "d-inline-block"
+              }`}
+            >
+              <ReactResizeDetector handleHeight onResize={NavbarOnResize} />
+              <span className="navbar-brand my-0 mx-2 h1 d-none d-sm-block float-left">
+                {alertStore.info.totalAlerts}
+                <FetchIndicator status={alertStore.status.value.toString()} />
+              </span>
+              <ul className={`navbar-nav float-right d-flex ${flexClass}`}>
+                <SilenceModal
+                  alertStore={alertStore}
+                  silenceFormStore={silenceFormStore}
+                  settingsStore={settingsStore}
+                />
+                <MainModal
+                  alertStore={alertStore}
+                  settingsStore={settingsStore}
+                />
+              </ul>
+              <FilterInput
                 alertStore={alertStore}
                 settingsStore={settingsStore}
               />
-            </ul>
-            <FilterInput
-              alertStore={alertStore}
-              settingsStore={settingsStore}
-            />
-          </nav>
-        </div>
+            </nav>
+          </div>
+        </IdleTimer>
       );
     }
   }

ui/src/Components/NavBar/index.test.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { shallow } from "enzyme";
+import { shallow, mount } from "enzyme";
 
 import moment from "moment";
 
@@ -29,6 +29,16 @@ const RenderNavbar = () => {
       settingsStore={settingsStore}
       silenceFormStore={silenceFormStore}
     />
+  ).find(".container");
+};
+
+const MountedNavbar = () => {
+  return mount(
+    <NavBar
+      alertStore={alertStore}
+      settingsStore={settingsStore}
+      silenceFormStore={silenceFormStore}
+    />
   );
 };
 
@@ -94,3 +104,34 @@ describe("NavbarOnResize()", () => {
     ).toBe("40px");
   });
 });
+
+describe("<IdleTimer />", () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  it("hides navbar after 4 minutes", () => {
+    const tree = MountedNavbar();
+    expect(tree.find(".navbar").hasClass("d-inline-block")).toBe(true);
+    expect(tree.find(".navbar").hasClass("d-none")).toBe(false);
+
+    jest.runTimersToTime(1000 * 60 * 4);
+    tree.update();
+    expect(tree.find(".navbar").hasClass("d-inline-block")).toBe(false);
+    expect(tree.find(".navbar").hasClass("d-none")).toBe(true);
+  });
+
+  it("hidden navbar shows up again after activity", () => {
+    const tree = MountedNavbar();
+    const instance = tree.instance();
+    instance.activityStatus.idle = true;
+    tree.update();
+    expect(tree.find(".navbar").hasClass("d-inline-block")).toBe(false);
+    expect(tree.find(".navbar").hasClass("d-none")).toBe(true);
+
+    instance.activityStatus.setActive();
+    tree.update();
+    expect(tree.find(".navbar").hasClass("d-inline-block")).toBe(true);
+    expect(tree.find(".navbar").hasClass("d-none")).toBe(false);
+  });
+});