Merge pull request #532 from prymitive/autohide-settings

feat(ui): add UI toggle for changing autohide settings

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

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">

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}

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

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

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\\"

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>

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\\"

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>
+"
+`;

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} />

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 />"
     );
   });
 });

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>

ui/src/Components/NavBar/index.js

@@ -103,7 +103,11 @@ const NavBar = observer(
       return (
         <IdleTimer
           onActive={this.activityStatus.setActive}
-          onIdle={this.activityStatus.setIdle}
+          onIdle={() => {
+            if (settingsStore.filterBarConfig.config.autohide) {
+              this.activityStatus.setIdle();
+            }
+          }}
           timeout={
             window.innerWidth >= 768 ? DesktopIdleTimeout : MobileIdleTimeout
           }

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

ui/src/Stores/Settings.js

@@ -70,6 +70,18 @@ class GridConfig {
   );
 }
 
+class FilterBarConfig {
+  config = localStored(
+    "filterBarConfig",
+    {
+      autohide: true
+    },
+    {
+      delay: 100
+    }
+  );
+}
+
 class Settings {
   constructor() {
     this.savedFilters = new SavedFilters();
@@ -77,6 +89,7 @@ class Settings {
     this.alertGroupConfig = new AlertGroupConfig();
     this.gridConfig = new GridConfig();
     this.silenceFormConfig = new SilenceFormConfig();
+    this.filterBarConfig = new FilterBarConfig();
   }
 }