From acfae1a663eeb24fd8710d70031f238c3b650afc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 14 May 2020 11:21:29 +0100
Subject: [PATCH] fix(ui): fix menu close on trigger click

---
 .../AlertGrid/AlertGroup/Alert/AlertMenu.js   | 96 +++++++++----------
 .../Alert/__snapshots__/index.test.js.snap    | 80 ++++++++--------
 .../AlertGroup/GroupHeader/GroupMenu.js       | 92 +++++++++---------
 .../Components/NavBar/FilterInput/History.js  | 91 +++++++++---------
 .../__snapshots__/index.test.js.snap          | 40 ++++----
 5 files changed, 201 insertions(+), 198 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
index 58665f272..dd4b013ea 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
 
 import { useObserver, useLocalStore } from "mobx-react";
@@ -40,18 +40,11 @@ const MenuContent = ({
   alertStore,
   silenceFormStore,
 }) => {
-  const ref = useRef(null);
-  useOnClickOutside(ref, afterClick);
-
-  useEffect(() => {
-    popperRef(ref.current);
-  }, [popperRef]);
-
   return (
     <FetchPauser alertStore={alertStore}>
       <div
         className="dropdown-menu d-block shadow"
-        ref={ref}
+        ref={popperRef}
         style={popperStyle}
         data-placement={popperPlacement}
       >
@@ -117,48 +110,53 @@ const AlertMenu = ({
     },
   }));
 
+  const ref = useRef(null);
+  useOnClickOutside(ref, collapse.hide);
+
   return useObserver(() => (
-    <Manager>
-      <Reference>
-        {({ ref }) => (
-          <span
-            className="components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer"
-            ref={ref}
-            onClick={collapse.toggle}
-            data-toggle="dropdown"
-          >
-            <FontAwesomeIcon
-              className="pr-1"
-              style={{ width: "0.8rem" }}
-              icon={faCaretDown}
-            />
-            <Moment fromNow>{alert.startsAt}</Moment>
-          </span>
-        )}
-      </Reference>
-      <DropdownSlide in={!collapse.value} unmountOnExit>
-        <Popper
-          placement="bottom-start"
-          modifiers={[
-            { name: "arrow", enabled: false },
-            { name: "offset", options: { offset: "-5px, 0px" } },
-          ]}
-        >
-          {({ placement, ref, style }) => (
-            <MenuContent
-              popperPlacement={placement}
-              popperRef={ref}
-              popperStyle={style}
-              group={group}
-              alert={alert}
-              alertStore={alertStore}
-              silenceFormStore={silenceFormStore}
-              afterClick={collapse.hide}
-            />
+    <span ref={ref}>
+      <Manager>
+        <Reference>
+          {({ ref }) => (
+            <span
+              className="components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer"
+              ref={ref}
+              onClick={collapse.toggle}
+              data-toggle="dropdown"
+            >
+              <FontAwesomeIcon
+                className="pr-1"
+                style={{ width: "0.8rem" }}
+                icon={faCaretDown}
+              />
+              <Moment fromNow>{alert.startsAt}</Moment>
+            </span>
           )}
-        </Popper>
-      </DropdownSlide>
-    </Manager>
+        </Reference>
+        <DropdownSlide in={!collapse.value} unmountOnExit>
+          <Popper
+            placement="bottom-start"
+            modifiers={[
+              { name: "arrow", enabled: false },
+              { name: "offset", options: { offset: "-5px, 0px" } },
+            ]}
+          >
+            {({ placement, ref, style }) => (
+              <MenuContent
+                popperPlacement={placement}
+                popperRef={ref}
+                popperStyle={style}
+                group={group}
+                alert={alert}
+                alertStore={alertStore}
+                silenceFormStore={silenceFormStore}
+                afterClick={collapse.hide}
+              />
+            )}
+          </Popper>
+        </DropdownSlide>
+      </Manager>
+    </span>
   ));
 };
 AlertMenu.propTypes = {
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
index 1afe7d473..78cdf0f09 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
@@ -56,27 +56,29 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
       </div>
     </div>
   </div>
-  <span class=\\"components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer\\"
-        data-toggle=\\"dropdown\\"
-  >
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"caret-down\\"
-         class=\\"svg-inline--fa fa-caret-down fa-w-10 pr-1\\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 320 512\\"
-         style=\\"width: 0.8rem;\\"
+  <span>
+    <span class=\\"components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer\\"
+          data-toggle=\\"dropdown\\"
     >
-      <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\\"
+      <svg aria-hidden=\\"true\\"
+           focusable=\\"false\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"caret-down\\"
+           class=\\"svg-inline--fa fa-caret-down fa-w-10 pr-1\\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 320 512\\"
+           style=\\"width: 0.8rem;\\"
       >
-      </path>
-    </svg>
-    <time datetime=\\"1534268200017\\">
-      a day ago
-    </time>
+        <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>
+      <time datetime=\\"1534268200017\\">
+        a day ago
+      </time>
+    </span>
   </span>
   <div style=\\"display: inline-block; max-width: 100%;\\"
        class=\\" tooltip-trigger\\"
@@ -203,27 +205,29 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
       </div>
     </div>
   </div>
-  <span class=\\"components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer\\"
-        data-toggle=\\"dropdown\\"
-  >
-    <svg aria-hidden=\\"true\\"
-         focusable=\\"false\\"
-         data-prefix=\\"fas\\"
-         data-icon=\\"caret-down\\"
-         class=\\"svg-inline--fa fa-caret-down fa-w-10 pr-1\\"
-         role=\\"img\\"
-         xmlns=\\"http://www.w3.org/2000/svg\\"
-         viewbox=\\"0 0 320 512\\"
-         style=\\"width: 0.8rem;\\"
+  <span>
+    <span class=\\"components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer\\"
+          data-toggle=\\"dropdown\\"
     >
-      <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\\"
+      <svg aria-hidden=\\"true\\"
+           focusable=\\"false\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"caret-down\\"
+           class=\\"svg-inline--fa fa-caret-down fa-w-10 pr-1\\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 320 512\\"
+           style=\\"width: 0.8rem;\\"
       >
-      </path>
-    </svg>
-    <time datetime=\\"1534268200017\\">
-      a day ago
-    </time>
+        <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>
+      <time datetime=\\"1534268200017\\">
+        a day ago
+      </time>
+    </span>
   </span>
   <div style=\\"display: inline-block; max-width: 100%;\\"
        class=\\" tooltip-trigger\\"
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js
index 633daab23..66133df7b 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
 
 import { useObserver, useLocalStore } from "mobx-react";
@@ -40,13 +40,6 @@ const MenuContent = ({
   alertStore,
   silenceFormStore,
 }) => {
-  const ref = useRef(null);
-  useOnClickOutside(ref, afterClick);
-
-  useEffect(() => {
-    popperRef(ref.current);
-  }, [popperRef]);
-
   let groupFilters = Object.keys(group.labels).map((name) =>
     FormatQuery(name, QueryOperators.Equal, group.labels[name])
   );
@@ -65,7 +58,7 @@ const MenuContent = ({
     <FetchPauser alertStore={alertStore}>
       <div
         className="dropdown-menu d-block shadow"
-        ref={ref}
+        ref={popperRef}
         style={popperStyle}
         data-placement={popperPlacement}
       >
@@ -123,46 +116,51 @@ const GroupMenu = ({
     },
   }));
 
+  const ref = useRef(null);
+  useOnClickOutside(ref, collapse.hide);
+
   return useObserver(() => (
-    <Manager>
-      <Reference>
-        {({ ref }) => (
-          <span
-            ref={ref}
-            onClick={collapse.toggle}
-            className={`${
-              themed ? "text-white" : "text-muted"
-            } cursor-pointer badge pl-0 pr-3 pr-sm-2 components-label mr-0 components-grid-alertgroup-${
-              group.id
-            }`}
-            data-toggle="dropdown"
-          >
-            <FontAwesomeIcon icon={faEllipsisV} />
-          </span>
-        )}
-      </Reference>
-      <DropdownSlide in={!collapse.isHidden} unmountOnExit>
-        <Popper
-          placement="bottom-start"
-          modifiers={[
-            { name: "arrow", enabled: false },
-            { name: "offset", options: { offset: "-5px, 0px" } },
-          ]}
-        >
-          {({ placement, ref, style }) => (
-            <MenuContent
-              popperPlacement={placement}
-              popperRef={ref}
-              popperStyle={style}
-              group={group}
-              alertStore={alertStore}
-              silenceFormStore={silenceFormStore}
-              afterClick={collapse.hide}
-            />
+    <span ref={ref}>
+      <Manager>
+        <Reference>
+          {({ ref }) => (
+            <span
+              ref={ref}
+              onClick={collapse.toggle}
+              className={`${
+                themed ? "text-white" : "text-muted"
+              } cursor-pointer badge pl-0 pr-3 pr-sm-2 components-label mr-0 components-grid-alertgroup-${
+                group.id
+              }`}
+              data-toggle="dropdown"
+            >
+              <FontAwesomeIcon icon={faEllipsisV} />
+            </span>
           )}
-        </Popper>
-      </DropdownSlide>
-    </Manager>
+        </Reference>
+        <DropdownSlide in={!collapse.isHidden} unmountOnExit>
+          <Popper
+            placement="bottom-start"
+            modifiers={[
+              { name: "arrow", enabled: false },
+              { name: "offset", options: { offset: "-5px, 0px" } },
+            ]}
+          >
+            {({ placement, ref, style }) => (
+              <MenuContent
+                popperPlacement={placement}
+                popperRef={ref}
+                popperStyle={style}
+                group={group}
+                alertStore={alertStore}
+                silenceFormStore={silenceFormStore}
+                afterClick={collapse.hide}
+              />
+            )}
+          </Popper>
+        </DropdownSlide>
+      </Manager>
+    </span>
   ));
 };
 GroupMenu.propTypes = {
diff --git a/ui/src/Components/NavBar/FilterInput/History.js b/ui/src/Components/NavBar/FilterInput/History.js
index 4672515ab..77d18ed1f 100644
--- a/ui/src/Components/NavBar/FilterInput/History.js
+++ b/ui/src/Components/NavBar/FilterInput/History.js
@@ -62,17 +62,10 @@ const HistoryMenu = ({
   afterClick,
   onClear,
 }) => {
-  const ref = useRef(null);
-  useOnClickOutside(ref, afterClick);
-
-  useEffect(() => {
-    popperRef(ref.current);
-  }, [popperRef]);
-
   return (
     <div
       className="dropdown-menu d-block shadow components-navbar-historymenu"
-      ref={ref}
+      ref={popperRef}
       style={popperStyle}
       data-placement={popperPlacement}
     >
@@ -201,51 +194,59 @@ const History = ({ alertStore, settingsStore }) => {
     }
   });
 
+  const ref = useRef(null);
+  useOnClickOutside(ref, collapse.hide);
+
   return useObserver(() => (
     // data-filters is there to register filters for observation in mobx
     // it needs to be using full filter object to notice changes to
     // name & value but ignore hits
     // using it this way will force re-render on every change, which is
     // needed to keep track of all filter changes
-    <Manager
-      data-filters={alertStore.filters.values
-        .map((f) => ReduceFilter(f))
-        .join(" ")}
+    <span
+      ref={ref}
+      className="input-group-text border-0 rounded-0 bg-transparent px-0"
     >
-      <Reference>
-        {({ ref }) => (
-          <button
-            ref={ref}
-            onClick={collapse.toggle}
-            className="input-group-text border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 components-navbar-icon"
-            type="button"
-            data-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="true"
-          >
-            <FontAwesomeIcon icon={faCaretDown} />
-          </button>
-        )}
-      </Reference>
-      <DropdownSlide in={!collapse.isHidden} unmountOnExit>
-        <Popper modifiers={[{ name: "arrow", enabled: false }]}>
-          {({ placement, ref, style }) => (
-            <HistoryMenu
-              popperPlacement={placement}
-              popperRef={ref}
-              popperStyle={style}
-              filters={history.filters}
-              onClear={() => {
-                history.filters = [];
-              }}
-              alertStore={alertStore}
-              settingsStore={settingsStore}
-              afterClick={collapse.hide}
-            />
+      <Manager
+        data-filters={alertStore.filters.values
+          .map((f) => ReduceFilter(f))
+          .join(" ")}
+      >
+        <Reference>
+          {({ ref }) => (
+            <button
+              ref={ref}
+              onClick={collapse.toggle}
+              className="border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 components-navbar-icon"
+              type="button"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="true"
+            >
+              <FontAwesomeIcon icon={faCaretDown} />
+            </button>
           )}
-        </Popper>
-      </DropdownSlide>
-    </Manager>
+        </Reference>
+        <DropdownSlide in={!collapse.isHidden} unmountOnExit>
+          <Popper modifiers={[{ name: "arrow", enabled: false }]}>
+            {({ placement, ref, style }) => (
+              <HistoryMenu
+                popperPlacement={placement}
+                popperRef={ref}
+                popperStyle={style}
+                filters={history.filters}
+                onClear={() => {
+                  history.filters = [];
+                }}
+                alertStore={alertStore}
+                settingsStore={settingsStore}
+                afterClick={collapse.hide}
+              />
+            )}
+          </Popper>
+        </DropdownSlide>
+      </Manager>
+    </span>
   ));
 };
 History.propTypes = {
diff --git a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
index 047783663..6e179bd11 100644
--- a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
@@ -45,27 +45,29 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
     </div>
   </div>
   <div class=\\"input-group-append bg-transparent\\">
-    <button class=\\"input-group-text border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 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\\"
+    <span class=\\"input-group-text border-0 rounded-0 bg-transparent px-0\\">
+      <button class=\\"border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 components-navbar-icon\\"
+              type=\\"button\\"
+              data-toggle=\\"dropdown\\"
+              aria-haspopup=\\"true\\"
+              aria-expanded=\\"true\\"
       >
-        <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\\"
+        <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>
-      </svg>
-    </button>
+          <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>
 "