From f2c24edff943b41bc9e6b5738b382502a7eae221 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 10 Jun 2019 23:13:07 +0100
Subject: [PATCH 1/2] fix(ui): check for string className when handling clicks
 in filter input

For SVG elements there might be no className attribute so split() might raise an exception
---
 ui/src/Components/NavBar/FilterInput/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/src/Components/NavBar/FilterInput/index.js b/ui/src/Components/NavBar/FilterInput/index.js
index b337c8a0d..4150fd1a8 100644
--- a/ui/src/Components/NavBar/FilterInput/index.js
+++ b/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();
       }
     };

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