From 4f8122db831b256e9ba6a366ee201246830d25cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 25 Aug 2020 11:08:03 +0100
Subject: [PATCH] chore(ui): only render filter search icon when empty

Turn the search icon into a placeholder - only render it if there are no active filters.
---
 .../__snapshots__/index.test.tsx.snap         | 171 ++++++++++++++++--
 .../NavBar/FilterInput/index.test.tsx         |  15 +-
 .../Components/NavBar/FilterInput/index.tsx   |  28 +--
 3 files changed, 180 insertions(+), 34 deletions(-)

diff --git a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap
index 8deb7ddca..206609862 100644
--- a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap
@@ -1,26 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<FilterInput /> matches snapshot on default render 1`] = `
+exports[`<FilterInput /> matches snapshot with no filters 1`] = `
 "
 <div class=\\"input-group w-100 mr-2 components-filterinput-outer bg-transparent\\">
-  <div class=\\"input-group-prepend\\">
-    <span class=\\"input-group-text px-2 border-0 rounded-0 bg-inherit components-navbar-icon\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"search\\"
-           class=\\"svg-inline--fa fa-search fa-w-16 \\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
-      >
-        <path fill=\\"currentColor\\"
-              d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"
-        >
-        </path>
-      </svg>
-    </span>
-  </div>
   <div class=\\"form-control components-filterinput border-0 rounded-0 bg-inherit\\">
     <div role=\\"combobox\\"
          aria-haspopup=\\"listbox\\"
@@ -28,6 +10,22 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
          aria-expanded=\\"false\\"
          class=\\"autosuggest d-inline-block mw-100\\"
     >
+      <span class=\\"input-group-text d-inline-block mr-2 border-0 bg-inherit px-1\\">
+        <svg aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             data-prefix=\\"fas\\"
+             data-icon=\\"search\\"
+             class=\\"svg-inline--fa fa-search fa-w-16 \\"
+             role=\\"img\\"
+             xmlns=\\"http://www.w3.org/2000/svg\\"
+             viewbox=\\"0 0 512 512\\"
+        >
+          <path fill=\\"currentColor\\"
+                d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"
+          >
+          </path>
+        </svg>
+      </span>
       <input type=\\"text\\"
              class=\\"components-filterinput-wrapper text-white mw-100\\"
              placeholder
@@ -44,7 +42,140 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
       </div>
     </div>
   </div>
-  <div class=\\"input-group-append inherit\\">
+  <div class=\\"input-group-append\\">
+    <span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
+      <button class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
+              type=\\"button\\"
+              data-toggle=\\"dropdown\\"
+              aria-haspopup=\\"true\\"
+              aria-expanded=\\"true\\"
+      >
+        <svg aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             data-prefix=\\"fas\\"
+             data-icon=\\"caret-down\\"
+             class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
+             role=\\"img\\"
+             xmlns=\\"http://www.w3.org/2000/svg\\"
+             viewbox=\\"0 0 320 512\\"
+        >
+          <path fill=\\"currentColor\\"
+                d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
+          >
+          </path>
+        </svg>
+      </button>
+    </span>
+  </div>
+</div>
+"
+`;
+
+exports[`<FilterInput /> matches snapshot with some filters 1`] = `
+"
+<div class=\\"input-group w-100 mr-2 components-filterinput-outer bg-transparent\\">
+  <div class=\\"form-control components-filterinput border-0 rounded-0 bg-inherit\\">
+    <button type=\\"button\\"
+            class=\\"btn-secondary btn-sm components-filteredinputlabel components-label btn d-inline-flex flex-row align-items-center\\"
+    >
+      <svg aria-hidden=\\"true\\"
+           focusable=\\"false\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"spinner\\"
+           class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin \\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 512 512\\"
+      >
+        <path fill=\\"currentColor\\"
+              d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
+        >
+        </path>
+      </svg>
+      <div class=\\"components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ml-1 tooltip-trigger\\">
+        <span tabindex=\\"0\\"
+              class=\\"cursor-text px-1\\"
+        >
+          foo=bar
+        </span>
+      </div>
+      <svg aria-hidden=\\"true\\"
+           focusable=\\"false\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"times\\"
+           class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ml-1 close\\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 352 512\\"
+      >
+        <path fill=\\"currentColor\\"
+              d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
+        >
+        </path>
+      </svg>
+    </button>
+    <button type=\\"button\\"
+            class=\\"btn-secondary btn-sm components-filteredinputlabel components-label btn d-inline-flex flex-row align-items-center\\"
+    >
+      <svg aria-hidden=\\"true\\"
+           focusable=\\"false\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"spinner\\"
+           class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin \\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 512 512\\"
+      >
+        <path fill=\\"currentColor\\"
+              d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
+        >
+        </path>
+      </svg>
+      <div class=\\"components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ml-1 tooltip-trigger\\">
+        <span tabindex=\\"0\\"
+              class=\\"cursor-text px-1\\"
+        >
+          baz!=bar
+        </span>
+      </div>
+      <svg aria-hidden=\\"true\\"
+           focusable=\\"false\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"times\\"
+           class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ml-1 close\\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 352 512\\"
+      >
+        <path fill=\\"currentColor\\"
+              d=\\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\\"
+        >
+        </path>
+      </svg>
+    </button>
+    <div role=\\"combobox\\"
+         aria-haspopup=\\"listbox\\"
+         aria-owns=\\"react-autowhatever-1\\"
+         aria-expanded=\\"false\\"
+         class=\\"autosuggest d-inline-block mw-100\\"
+    >
+      <input type=\\"text\\"
+             class=\\"components-filterinput-wrapper text-white mw-100\\"
+             placeholder
+             size=\\"1\\"
+             value
+             autocomplete=\\"off\\"
+             aria-autocomplete=\\"list\\"
+             aria-controls=\\"react-autowhatever-1\\"
+      >
+      <div id=\\"react-autowhatever-1\\"
+           role=\\"listbox\\"
+           class=\\"dropdown\\"
+      >
+      </div>
+    </div>
+  </div>
+  <div class=\\"input-group-append\\">
     <span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
       <button class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
               type=\\"button\\"
diff --git a/ui/src/Components/NavBar/FilterInput/index.test.tsx b/ui/src/Components/NavBar/FilterInput/index.test.tsx
index 7da421374..0d626dc40 100644
--- a/ui/src/Components/NavBar/FilterInput/index.test.tsx
+++ b/ui/src/Components/NavBar/FilterInput/index.test.tsx
@@ -40,11 +40,24 @@ const MountedInput = () => {
 };
 
 describe("<FilterInput />", () => {
-  it("matches snapshot on default render", () => {
+  it("matches snapshot with no filters", () => {
     const tree = render(
       <FilterInput alertStore={alertStore} settingsStore={settingsStore} />
     );
     expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+    expect(alertStore.filters.values).toHaveLength(0);
+  });
+
+  it("matches snapshot with some filters", () => {
+    alertStore.filters.values = [
+      NewUnappliedFilter("foo=bar"),
+      NewUnappliedFilter("baz!=bar"),
+    ];
+    const tree = render(
+      <FilterInput alertStore={alertStore} settingsStore={settingsStore} />
+    );
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+    expect(alertStore.filters.values).toHaveLength(2);
   });
 
   it("input gets focus by default on desktop", () => {
diff --git a/ui/src/Components/NavBar/FilterInput/index.tsx b/ui/src/Components/NavBar/FilterInput/index.tsx
index a6f3c6753..e592cc171 100644
--- a/ui/src/Components/NavBar/FilterInput/index.tsx
+++ b/ui/src/Components/NavBar/FilterInput/index.tsx
@@ -118,13 +118,20 @@ const FilterInput: FC<{
     ...inputProps
   }) => {
     return (
-      <input
-        className="components-filterinput-wrapper text-white mw-100"
-        placeholder=""
-        size={value.length + 1}
-        value={value}
-        {...inputProps}
-      />
+      <React.Fragment>
+        {alertStore.filters.values.length ? null : (
+          <span className="input-group-text d-inline-block mr-2 border-0 bg-inherit px-1">
+            <FontAwesomeIcon icon={faSearch} />
+          </span>
+        )}
+        <input
+          className="components-filterinput-wrapper text-white mw-100"
+          placeholder=""
+          size={value.length + 1}
+          value={value}
+          {...inputProps}
+        />
+      </React.Fragment>
     );
   };
 
@@ -138,11 +145,6 @@ const FilterInput: FC<{
           isFocused ? "bg-focused" : "bg-transparent"
         }`}
       >
-        <div className="input-group-prepend">
-          <span className="input-group-text px-2 border-0 rounded-0 bg-inherit components-navbar-icon">
-            <FontAwesomeIcon icon={faSearch} />
-          </span>
-        </div>
         <div
           className="form-control components-filterinput border-0 rounded-0 bg-inherit"
           onClick={(event) =>
@@ -177,7 +179,7 @@ const FilterInput: FC<{
             theme={AutosuggestTheme}
           />
         </div>
-        <div className="input-group-append inherit">
+        <div className="input-group-append">
           <History alertStore={alertStore} settingsStore={settingsStore} />
         </div>
       </div>