From 3974315ccc74082348e8fedd39ece024331074b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 15 Mar 2019 14:43:30 +0000
Subject: [PATCH] feat(ui): add UI toggle for changing autohide settings

This adds a checkbox in the settings form to control if navbar autohide is on or off

Fixes #530
---
 .../Configuration/AlertGroupConfiguration.js  |  2 +-
 .../AlertGroupSortConfiguration.js            |  2 +-
 .../Configuration/FetchConfiguration.js       |  2 +-
 .../Configuration/FilterBarConfiguration.js   | 54 +++++++++++++++++++
 .../FilterBarConfiguration.test.js            | 48 +++++++++++++++++
 .../AlertGroupConfiguration.test.js.snap      |  2 +-
 .../AlertGroupSortConfiguration.test.js.snap  |  2 +-
 .../FetchConfiguration.test.js.snap           |  2 +-
 .../FilterBarConfiguration.test.js.snap       | 28 ++++++++++
 .../MainModal/Configuration/index.js          |  3 ++
 .../MainModal/Configuration/index.test.js     |  2 +-
 .../MainModalContent.test.js.snap             | 30 +++++++++--
 ui/src/Components/NavBar/index.test.js        |  9 ++++
 13 files changed, 176 insertions(+), 10 deletions(-)
 create mode 100644 ui/src/Components/MainModal/Configuration/FilterBarConfiguration.js
 create mode 100644 ui/src/Components/MainModal/Configuration/FilterBarConfiguration.test.js
 create mode 100644 ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.js.snap

diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.js b/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.js
index aee9e7db7..1ce9b560c 100644
--- a/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.js
+++ b/ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.js
@@ -39,7 +39,7 @@ const AlertGroupConfiguration = observer(
     render() {
       return (
         <div className="form-group text-center">
-          <label className="mb-4">
+          <label className="mb-4 font-weight-bold">
             Default number of alerts to show per group
           </label>
           <InputRange
diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js b/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js
index 2dd593cc4..1a0146271 100644
--- a/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js
+++ b/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js
@@ -65,7 +65,7 @@ const AlertGroupSortConfiguration = observer(
       return (
         <div className="form-group">
           <div className="text-center">
-            <label className="mb-4">Grid sort order</label>
+            <label className="mb-2 font-weight-bold">Grid sort order</label>
           </div>
           <div className="d-flex flex-fill flex-lg-row flex-column justify-content-between">
             <div className="flex-shrink-0 flex-grow-1 flex-basis-auto">
diff --git a/ui/src/Components/MainModal/Configuration/FetchConfiguration.js b/ui/src/Components/MainModal/Configuration/FetchConfiguration.js
index cbad4c782..4bb9f7ff4 100644
--- a/ui/src/Components/MainModal/Configuration/FetchConfiguration.js
+++ b/ui/src/Components/MainModal/Configuration/FetchConfiguration.js
@@ -41,7 +41,7 @@ const FetchConfiguration = observer(
     render() {
       return (
         <div className="form-group text-center">
-          <label className="mb-4">Refresh interval</label>
+          <label className="mb-4 font-weight-bold">Refresh interval</label>
           <InputRange
             minValue={10}
             maxValue={120}
diff --git a/ui/src/Components/MainModal/Configuration/FilterBarConfiguration.js b/ui/src/Components/MainModal/Configuration/FilterBarConfiguration.js
new file mode 100644
index 000000000..4a67eb686
--- /dev/null
+++ b/ui/src/Components/MainModal/Configuration/FilterBarConfiguration.js
@@ -0,0 +1,54 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { action } from "mobx";
+import { observer } from "mobx-react";
+
+import { Settings } from "Stores/Settings";
+
+const FilterBarConfiguration = observer(
+  class FilterBarConfiguration extends Component {
+    static propTypes = {
+      settingsStore: PropTypes.instanceOf(Settings).isRequired
+    };
+
+    onAutohideChange = action(event => {
+      const { settingsStore } = this.props;
+      settingsStore.filterBarConfig.config.autohide = event.target.checked;
+    });
+
+    render() {
+      const { settingsStore } = this.props;
+
+      return (
+        <div className="form-group">
+          <div className="text-center">
+            <label className="mb-2 font-weight-bold">
+              Filter bar configuration
+            </label>
+          </div>
+          <div className="form-check form-check-inline">
+            <span className="custom-control custom-switch">
+              <input
+                id="configuration-autohide"
+                className="custom-control-input"
+                type="checkbox"
+                value=""
+                checked={settingsStore.filterBarConfig.config.autohide || false}
+                onChange={this.onAutohideChange}
+              />
+              <label
+                className="custom-control-label cursor-pointer mr-3"
+                htmlFor="configuration-autohide"
+              >
+                Hide filter bar when idle
+              </label>
+            </span>
+          </div>
+        </div>
+      );
+    }
+  }
+);
+
+export { FilterBarConfiguration };
diff --git a/ui/src/Components/MainModal/Configuration/FilterBarConfiguration.test.js b/ui/src/Components/MainModal/Configuration/FilterBarConfiguration.test.js
new file mode 100644
index 000000000..afe193e08
--- /dev/null
+++ b/ui/src/Components/MainModal/Configuration/FilterBarConfiguration.test.js
@@ -0,0 +1,48 @@
+import React from "react";
+
+import { mount } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
+
+import { Settings } from "Stores/Settings";
+import { FilterBarConfiguration } from "./FilterBarConfiguration";
+
+let settingsStore;
+beforeEach(() => {
+  settingsStore = new Settings();
+});
+
+const FakeConfiguration = () => {
+  return mount(<FilterBarConfiguration settingsStore={settingsStore} />);
+};
+
+describe("<FilterBarConfiguration />", () => {
+  it("matches snapshot with default values", () => {
+    const tree = FakeConfiguration();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+
+  it("unchecking the checkbox sets stored autohide value to 'false'", done => {
+    const tree = FakeConfiguration();
+    const checkbox = tree.find("#configuration-autohide");
+
+    expect(settingsStore.filterBarConfig.config.autohide).toBe(true);
+    checkbox.simulate("change", { target: { checked: false } });
+    setTimeout(() => {
+      expect(settingsStore.filterBarConfig.config.autohide).toBe(false);
+      done();
+    }, 200);
+  });
+
+  it("checking the checkbox sets stored autohide value to 'true'", done => {
+    const tree = FakeConfiguration();
+    const checkbox = tree.find("#configuration-autohide");
+
+    expect(settingsStore.filterBarConfig.config.autohide).toBe(false);
+    checkbox.simulate("change", { target: { checked: true } });
+    setTimeout(() => {
+      expect(settingsStore.filterBarConfig.config.autohide).toBe(true);
+      done();
+    }, 200);
+  });
+});
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.js.snap
index bcb3b0643..42182bb06 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.js.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.js.snap
@@ -3,7 +3,7 @@
 exports[`<AlertGroupConfiguration /> matches snapshot with default values 1`] = `
 "
 <div class=\\"form-group text-center\\">
-  <label class=\\"mb-4\\">
+  <label class=\\"mb-4 font-weight-bold\\">
     Default number of alerts to show per group
   </label>
   <div aria-disabled=\\"false\\"
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap
index 305552b77..01a8f8031 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap
@@ -4,7 +4,7 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
 "
 <div class=\\"form-group\\">
   <div class=\\"text-center\\">
-    <label class=\\"mb-4\\">
+    <label class=\\"mb-2 font-weight-bold\\">
       Grid sort order
     </label>
   </div>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.js.snap
index abe6d6810..2b69bd1c6 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.js.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.js.snap
@@ -3,7 +3,7 @@
 exports[`<FetchConfiguration /> matches snapshot with default values 1`] = `
 "
 <div class=\\"form-group text-center\\">
-  <label class=\\"mb-4\\">
+  <label class=\\"mb-4 font-weight-bold\\">
     Refresh interval
   </label>
   <div aria-disabled=\\"false\\"
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.js.snap
new file mode 100644
index 000000000..f7d820b3c
--- /dev/null
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.js.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FilterBarConfiguration /> matches snapshot with default values 1`] = `
+"
+<div class=\\"form-group\\">
+  <div class=\\"text-center\\">
+    <label class=\\"mb-2 font-weight-bold\\">
+      Filter bar configuration
+    </label>
+  </div>
+  <div class=\\"form-check form-check-inline\\">
+    <span class=\\"custom-control custom-switch\\">
+      <input id=\\"configuration-autohide\\"
+             class=\\"custom-control-input\\"
+             type=\\"checkbox\\"
+             value
+             checked
+      >
+      <label class=\\"custom-control-label cursor-pointer mr-3\\"
+             for=\\"configuration-autohide\\"
+      >
+        Hide filter bar when idle
+      </label>
+    </span>
+  </div>
+</div>
+"
+`;
diff --git a/ui/src/Components/MainModal/Configuration/index.js b/ui/src/Components/MainModal/Configuration/index.js
index 4012eee4a..5c9c09a53 100644
--- a/ui/src/Components/MainModal/Configuration/index.js
+++ b/ui/src/Components/MainModal/Configuration/index.js
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 
 import { Settings } from "Stores/Settings";
 import { FetchConfiguration } from "./FetchConfiguration";
+import { FilterBarConfiguration } from "./FilterBarConfiguration";
 import { AlertGroupConfiguration } from "./AlertGroupConfiguration";
 import { AlertGroupSortConfiguration } from "./AlertGroupSortConfiguration";
 
@@ -10,6 +11,8 @@ const Configuration = ({ settingsStore }) => (
   <form className="px-3">
     <FetchConfiguration settingsStore={settingsStore} />
     <div className="mt-5" />
+    <FilterBarConfiguration settingsStore={settingsStore} />
+    <div className="mt-5" />
     <AlertGroupConfiguration settingsStore={settingsStore} />
     <div className="mt-5" />
     <AlertGroupSortConfiguration settingsStore={settingsStore} />
diff --git a/ui/src/Components/MainModal/Configuration/index.test.js b/ui/src/Components/MainModal/Configuration/index.test.js
index 582ebe8bc..43ac7141b 100644
--- a/ui/src/Components/MainModal/Configuration/index.test.js
+++ b/ui/src/Components/MainModal/Configuration/index.test.js
@@ -10,7 +10,7 @@ describe("<Configuration />", () => {
     const settingsStore = new Settings();
     const tree = shallow(<Configuration settingsStore={settingsStore} />);
     expect(tree.text()).toBe(
-      "<FetchConfiguration /><AlertGroupConfiguration /><AlertGroupSortConfiguration />"
+      "<FetchConfiguration /><FilterBarConfiguration /><AlertGroupConfiguration /><AlertGroupSortConfiguration />"
     );
   });
 });
diff --git a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
index 9fc52d13f..e548b3a1d 100644
--- a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
+++ b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
@@ -23,7 +23,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
   <div class=\\"modal-body\\">
     <form class=\\"px-3\\">
       <div class=\\"form-group text-center\\">
-        <label class=\\"mb-4\\">
+        <label class=\\"mb-4 font-weight-bold\\">
           Refresh interval
         </label>
         <div aria-disabled=\\"false\\"
@@ -67,8 +67,32 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
       </div>
       <div class=\\"mt-5\\">
       </div>
+      <div class=\\"form-group\\">
+        <div class=\\"text-center\\">
+          <label class=\\"mb-2 font-weight-bold\\">
+            Filter bar configuration
+          </label>
+        </div>
+        <div class=\\"form-check form-check-inline\\">
+          <span class=\\"custom-control custom-switch\\">
+            <input id=\\"configuration-autohide\\"
+                   class=\\"custom-control-input\\"
+                   type=\\"checkbox\\"
+                   value
+                   checked
+            >
+            <label class=\\"custom-control-label cursor-pointer mr-3\\"
+                   for=\\"configuration-autohide\\"
+            >
+              Hide filter bar when idle
+            </label>
+          </span>
+        </div>
+      </div>
+      <div class=\\"mt-5\\">
+      </div>
       <div class=\\"form-group text-center\\">
-        <label class=\\"mb-4\\">
+        <label class=\\"mb-4 font-weight-bold\\">
           Default number of alerts to show per group
         </label>
         <div aria-disabled=\\"false\\"
@@ -114,7 +138,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
       </div>
       <div class=\\"form-group\\">
         <div class=\\"text-center\\">
-          <label class=\\"mb-4\\">
+          <label class=\\"mb-2 font-weight-bold\\">
             Grid sort order
           </label>
         </div>
diff --git a/ui/src/Components/NavBar/index.test.js b/ui/src/Components/NavBar/index.test.js
index 1beb2bd81..69560d32e 100644
--- a/ui/src/Components/NavBar/index.test.js
+++ b/ui/src/Components/NavBar/index.test.js
@@ -148,4 +148,13 @@ describe("<IdleTimer />", () => {
         .getPropertyValue("padding-top")
     ).toBe("0px");
   });
+
+  it("doesn't hide when autohide is disabled in settingsStore", () => {
+    settingsStore.filterBarConfig.config.autohide = false;
+    const tree = MountedNavbar();
+    jest.runTimersToTime(1000 * 3600);
+    tree.update();
+    expect(tree.find(".container").hasClass("visible")).toBe(true);
+    expect(tree.find(".container").hasClass("invisible")).toBe(false);
+  });
 });