From acc14d37a90fd37dfc046b1b39c843f1cefda361 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 10 Jun 2019 23:14:09 +0100
Subject: [PATCH] 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      | 70 ++++++++++++++++----------
 ui/src/Components/NavBar/index.test.js | 27 ++++++++++
 2 files changed, 71 insertions(+), 26 deletions(-)

diff --git a/ui/src/Components/NavBar/index.js b/ui/src/Components/NavBar/index.js
index cd918c293..5d7a05a20 100644
--- a/ui/src/Components/NavBar/index.js
+++ b/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) {
diff --git a/ui/src/Components/NavBar/index.test.js b/ui/src/Components/NavBar/index.test.js
index bac45a485..ad11fabc4 100644
--- a/ui/src/Components/NavBar/index.test.js
+++ b/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);
+  });
 });