From 26abcc632b86f1ece351005ed48c2c8408d88340 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 8 Sep 2018 23:35:21 +0100
Subject: [PATCH] fix(ui): pass unique class to alert action button, so
 clicking it doesn't trigger click outside handler

---
 .../Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js         | 9 ++++++++-
 .../AlertGroup/Alert/__snapshots__/index.test.js.snap    | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
index a2bcf5871..eadb02bdd 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.js
@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 
+import hash from "object-hash";
+
 import { Manager, Reference, Popper } from "react-popper";
 import onClickOutside from "react-onclickoutside";
 
@@ -97,12 +99,16 @@ const AlertMenu = observer(
     render() {
       const { group, alert, silenceFormStore } = this.props;
 
+      const uniqueClass = `components-grid-alert-${group.id}-${hash(
+        alert.labels
+      )}`;
+
       return (
         <Manager>
           <Reference>
             {({ ref }) => (
               <span
-                className="components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer"
+                className={`components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer ${uniqueClass}`}
                 ref={ref}
                 onClick={this.collapse.toggle}
                 data-toggle="dropdown"
@@ -134,6 +140,7 @@ const AlertMenu = observer(
                   silenceFormStore={silenceFormStore}
                   afterClick={this.collapse.hide}
                   handleClickOutside={this.collapse.hide}
+                  outsideClickIgnoreClass={uniqueClass}
                 />
               )}
             </Popper>
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 cb879ad25..22eb955a9 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
@@ -42,7 +42,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
       hidden
     </div>
   </div>
-  <span class=\\"components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer\\"
+  <span class=\\"components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-undefined-0988cb349635341c67d91bfe3454d2b3178c443c\\"
         data-toggle=\\"dropdown\\"
   >
     <svg aria-hidden=\\"true\\"