Merge pull request #769 from prymitive/dont-hide-on-pause

fix(ui): don't hide the navbar on idle when updates are paused

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

@@ -97,7 +97,10 @@ const FilterInput = observer(
     });
 
     onInputClick = (inputReference, event) => {
-      if (event.target.className.split(" ").includes("form-control")) {
+      if (
+        typeof event.target.className === "string" &&
+        event.target.className.split(" ").includes("form-control")
+      ) {
         inputReference.input.focus();
       }
     };

ui/src/Components/NavBar/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 
-import { observable, action } from "mobx";
+import { observable, action, reaction } from "mobx";
 import { observer } from "mobx-react";
 
 import ReactResizeDetector from "react-resize-detector";
@@ -33,6 +33,46 @@ const NavBar = observer(
       silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired
     };
 
+    constructor(props) {
+      super(props);
+
+      this.idleTimer = null;
+
+      this.activityStatus = observable(
+        {
+          idle: false,
+          className: "visible",
+          setIdle() {
+            this.idle = true;
+          },
+          setActive() {
+            this.idle = false;
+          },
+          hide() {
+            this.className = "invisible";
+          },
+          show() {
+            this.className = "visible";
+          }
+        },
+        {
+          setIdle: action.bound,
+          setActive: action.bound,
+          hide: action.bound,
+          show: action.bound
+        }
+      );
+
+      this.activityStatusReaction = reaction(
+        () => props.alertStore.status.paused,
+        paused =>
+          paused
+            ? this.idleTimer && this.idleTimer.pause()
+            : this.idleTimer && this.idleTimer.reset(),
+        { fireImmediately: true }
+      );
+    }
+
     elementSize = observable(
       {
         width: 0,
@@ -45,31 +85,6 @@ const NavBar = observer(
       { setSize: action }
     );
 
-    activityStatus = observable(
-      {
-        idle: false,
-        className: "visible",
-        setIdle() {
-          this.idle = true;
-        },
-        setActive() {
-          this.idle = false;
-        },
-        hide() {
-          this.className = "invisible";
-        },
-        show() {
-          this.className = "visible";
-        }
-      },
-      {
-        setIdle: action.bound,
-        setActive: action.bound,
-        hide: action.bound,
-        show: action.bound
-      }
-    );
-
     updateBodyPaddingTop = () => {
       const paddingTop = this.activityStatus.idle
         ? 0
@@ -107,6 +122,9 @@ const NavBar = observer(
 
       return (
         <IdleTimer
+          ref={ref => {
+            this.idleTimer = ref;
+          }}
           onActive={this.activityStatus.setActive}
           onIdle={() => {
             if (settingsStore.filterBarConfig.config.autohide) {

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

@@ -155,4 +155,31 @@ describe("<IdleTimer />", () => {
     expect(tree.find(".container").hasClass("visible")).toBe(true);
     expect(tree.find(".container").hasClass("invisible")).toBe(false);
   });
+
+  it("doesn't hide when autohide is enabled in settingsStore but alertStore is paused", () => {
+    settingsStore.filterBarConfig.config.autohide = true;
+    const tree = MountedNavbar();
+    alertStore.status.pause();
+    jest.runTimersToTime(1000 * 3600);
+    tree.update();
+    expect(tree.find(".container").hasClass("visible")).toBe(true);
+    expect(tree.find(".container").hasClass("invisible")).toBe(false);
+  });
+
+  it("hides navbar after alertStore is resumed", () => {
+    settingsStore.filterBarConfig.config.autohide = true;
+    const tree = MountedNavbar();
+
+    alertStore.status.pause();
+    jest.runTimersToTime(1000 * 3600);
+    tree.update();
+    expect(tree.find(".container").hasClass("visible")).toBe(true);
+    expect(tree.find(".container").hasClass("invisible")).toBe(false);
+
+    alertStore.status.resume();
+    jest.runTimersToTime(1000 * 60 * 3 + 1000);
+    tree.update();
+    expect(tree.find(".container").hasClass("visible")).toBe(false);
+    expect(tree.find(".container").hasClass("invisible")).toBe(true);
+  });
 });