From 54a71bfa680fa77ecb8cffdf99adff38769fd458 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 17 Sep 2018 20:23:47 +0100
Subject: [PATCH] feat(ui): hide navbar after 3 minutes with no activity

---
 ui/package-lock.json                   |  5 ++
 ui/package.json                        |  1 +
 ui/src/Components/NavBar/index.js      | 71 ++++++++++++++++++--------
 ui/src/Components/NavBar/index.test.js | 43 +++++++++++++++-
 4 files changed, 98 insertions(+), 22 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 5857e768e..ceb3b536d 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -10361,6 +10361,11 @@
         "prop-types": "15.6.2"
       }
     },
+    "react-idle-timer": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/react-idle-timer/-/react-idle-timer-4.0.9.tgz",
+      "integrity": "sha512-eCZeICihOnE8PZWmB0RjkBp9LdePHoth+08uLlkuLfo3d/zQBOaqHzxmXrI2JA5Nha/4EHeVW6P/yCo1CF+dzA=="
+    },
     "react-infinite-scroller": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/react-infinite-scroller/-/react-infinite-scroller-1.1.4.tgz",
diff --git a/ui/package.json b/ui/package.json
index c77d033d5..ae6dc25fc 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -31,6 +31,7 @@
     "react-datepicker": "1.6.0",
     "react-dom": "16.5.1",
     "react-highlighter": "0.4.3",
+    "react-idle-timer": "4.0.9",
     "react-input-range": "1.3.0",
     "react-json-pretty": "1.7.9",
     "react-linkify": "0.2.2",
diff --git a/ui/src/Components/NavBar/index.js b/ui/src/Components/NavBar/index.js
index 69de2783c..f9be2e86a 100644
--- a/ui/src/Components/NavBar/index.js
+++ b/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>
       );
     }
   }
diff --git a/ui/src/Components/NavBar/index.test.js b/ui/src/Components/NavBar/index.test.js
index 8cb85595d..8ab115c07 100644
--- a/ui/src/Components/NavBar/index.test.js
+++ b/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);
+  });
+});