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(); } }; 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 ( { + 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("", () => { 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); + }); });