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

Updates are now paused when editing filters, so we shouldn't try to hide the entire navbar (including edited filter) when that happens

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);
+  });
 });