feat(ui): handle outside clicks in dropdowns

ui/package-lock.json

@@ -9671,6 +9671,11 @@
       "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.7.9.tgz",
       "integrity": "sha512-JpHQgpB+p3oqZv583xlJakPXgqdIjGBZvngHYcFhlYxTYs0NDZSdoM1FCpU9T2QmqKOEFBVuhhJBMvJzTkF/wQ=="
     },
+    "react-onclickoutside": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz",
+      "integrity": "sha512-p84kBqGaMoa7VYT0vZ/aOYRfJB+gw34yjpda1Z5KeLflg70HipZOT+MXQenEhdkPAABuE2Astq4zEPdMqUQxcg=="
+    },
     "react-popper": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0.tgz",

ui/package.json

@@ -27,6 +27,7 @@
     "react-linkify": "^0.2.2",
     "react-masonry-infinite": "^1.2.2",
     "react-moment": "^0.7.9",
+    "react-onclickoutside": "^6.7.1",
     "react-popper": "^1.0.0",
     "react-resize-detector": "^3.0.1",
     "react-scripts": "1.1.4",

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.js

@@ -0,0 +1,128 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { action, observable } from "mobx";
+import { observer } from "mobx-react";
+
+import { Manager, Reference, Popper } from "react-popper";
+import onClickOutside from "react-onclickoutside";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEllipsisV } from "@fortawesome/free-solid-svg-icons/faEllipsisV";
+import { faShareSquare } from "@fortawesome/free-solid-svg-icons/faShareSquare";
+
+import { FormatAPIFilterQuery } from "Stores/AlertStore";
+import { QueryOperators, StaticLabels, FormatQuery } from "Common/Query";
+
+const MenuContent = onClickOutside(
+  ({ popperPlacement, popperRef, popperStyle, group, afterClick }) => {
+    let groupFilters = Object.keys(group.labels).map(name =>
+      FormatQuery(name, QueryOperators.Equal, group.labels[name])
+    );
+    groupFilters.push(
+      FormatQuery(StaticLabels.Receiver, QueryOperators.Equal, group.receiver)
+    );
+    const groupLink = `?${FormatAPIFilterQuery(groupFilters)}`;
+
+    return (
+      <div
+        className="dropdown-menu d-block"
+        ref={popperRef}
+        style={popperStyle}
+        data-placement={popperPlacement}
+      >
+        <a
+          className="dropdown-item"
+          href={groupLink}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FontAwesomeIcon icon={faShareSquare} /> Link to this group
+        </a>
+      </div>
+    );
+  }
+);
+MenuContent.propTypes = {
+  popperPlacement: PropTypes.string,
+  popperRef: PropTypes.func,
+  popperStyle: PropTypes.object,
+  group: PropTypes.object.isRequired,
+  afterClick: PropTypes.func.isRequired
+};
+
+const GroupMenu = observer(
+  class GroupMenu extends Component {
+    static propTypes = {
+      group: PropTypes.object.isRequired
+    };
+
+    collapse = observable(
+      {
+        value: true,
+        toggle() {
+          this.value = !this.value;
+        },
+        hide() {
+          this.value = true;
+        }
+      },
+      { toggle: action.bound, hide: action.bound },
+      { name: "Alert group menu toggle" }
+    );
+
+    handleClickOutside = action(event => {
+      this.collapse.hide();
+    });
+
+    render() {
+      const { group } = this.props;
+
+      return (
+        <Manager>
+          <Reference>
+            {({ ref }) => (
+              <a
+                ref={ref}
+                onClick={this.collapse.toggle}
+                className={`text-muted cursor-pointer badge text-nowrap text-truncate pl-0 components-grid-alertgroup-${
+                  group.id
+                }`}
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="true"
+              >
+                <FontAwesomeIcon icon={faEllipsisV} />
+              </a>
+            )}
+          </Reference>
+          <Popper
+            placement="bottom-start"
+            modifiers={{
+              arrow: { enabled: false },
+              offset: { offset: "-5px, 0px" }
+            }}
+          >
+            {this.collapse.value
+              ? ({ placement, ref, style }) => <span />
+              : ({ placement, ref, style }) => (
+                  <MenuContent
+                    popperPlacement={placement}
+                    popperRef={ref}
+                    popperStyle={style}
+                    group={group}
+                    afterClick={this.collapse.hide}
+                    handleClickOutside={this.collapse.hide}
+                    outsideClickIgnoreClass={`components-grid-alertgroup-${
+                      group.id
+                    }`}
+                  />
+                )}
+          </Popper>
+        </Manager>
+      );
+    }
+  }
+);
+
+export { GroupMenu };

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js

@@ -4,60 +4,43 @@ import PropTypes from "prop-types";
 import { observer } from "mobx-react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faShareSquare } from "@fortawesome/free-solid-svg-icons/faShareSquare";
 import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
 
-import { FormatAPIFilterQuery } from "Stores/AlertStore";
-import { QueryOperators, StaticLabels, FormatQuery } from "Common/Query";
 import { FilteringLabel } from "Components/Labels/FilteringLabel";
 import { FilteringCounterBadge } from "Components/Labels/FilteringCounterBadge";
+import { GroupMenu } from "./GroupMenu";
 
 const GroupHeader = observer(
   class GroupHeader extends Component {
     static propTypes = {
       collapseStore: PropTypes.object.isRequired,
-      labels: PropTypes.object.isRequired,
-      receiver: PropTypes.string.isRequired,
-      stateCount: PropTypes.object.isRequired
+      group: PropTypes.object.isRequired
     };
 
     render() {
-      const { collapseStore, labels, receiver, stateCount } = this.props;
-
-      let groupFilters = Object.keys(labels).map(name =>
-        FormatQuery(name, QueryOperators.Equal, labels[name])
-      );
-      groupFilters.push(
-        FormatQuery(StaticLabels.Receiver, QueryOperators.Equal, receiver)
-      );
-      const groupLink = `?${FormatAPIFilterQuery(groupFilters)}`;
+      const { collapseStore, group } = this.props;
 
       return (
         <h5 className="card-title text-center mb-0">
-          <a
-            href={groupLink}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="float-left badge badge-pill text-nowrap text-truncate mr-1 ml-0 pl-0 pr-1"
-          >
-            <FontAwesomeIcon icon={faShareSquare} />
-          </a>
+          <span className="float-left">
+            <GroupMenu group={group} />
+          </span>
           <span className="float-right">
             <FilteringCounterBadge
               name="@state"
               value="unprocessed"
-              counter={stateCount.unprocessed}
+              counter={group.stateCount.unprocessed}
             />
             <FilteringCounterBadge
               name="@state"
               value="suppressed"
-              counter={stateCount.suppressed}
+              counter={group.stateCount.suppressed}
             />
             <FilteringCounterBadge
               name="@state"
               value="active"
-              counter={stateCount.active}
+              counter={group.stateCount.active}
             />
             <a
               className="text-muted cursor-pointer badge text-nowrap text-truncate pr-0"
@@ -69,8 +52,12 @@ const GroupHeader = observer(
             </a>
           </span>
           <span>
-            {Object.keys(labels).map(name => (
-              <FilteringLabel key={name} name={name} value={labels[name]} />
+            {Object.keys(group.labels).map(name => (
+              <FilteringLabel
+                key={name}
+                name={name}
+                value={group.labels[name]}
+              />
             ))}
           </span>
         </h5>

ui/src/Components/Grid/AlertGrid/AlertGroup/index.js

@@ -144,12 +144,7 @@ const AlertGroup = observer(
           <div className="components-grid-alertgrid-alertgroup p-1">
             <div className="card">
               <div className="card-body px-2 pt-2 pb-1">
-                <GroupHeader
-                  collapseStore={this.collapse}
-                  labels={group.labels}
-                  receiver={group.receiver}
-                  stateCount={group.stateCount}
-                />
+                <GroupHeader collapseStore={this.collapse} group={group} />
                 {this.collapse.value ? null : (
                   <ul className="list-group mt-1">
                     {group.alerts

ui/src/Components/NavBar/FilterInput/History.js

@@ -6,6 +6,7 @@ import { observer } from "mobx-react";
 import { localStored } from "mobx-stored";
 
 import { Manager, Reference, Popper } from "react-popper";
+import onClickOutside from "react-onclickoutside";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
@@ -28,49 +29,51 @@ function reduceFilter(filter) {
   };
 }
 
-const HistoryMenu = ({
-  popperPlacement,
-  popperRef,
-  popperStyle,
-  filters,
-  alertStore,
-  afterClick
-}) => {
-  return (
-    <div
-      className="dropdown-menu d-block components-navbar-historymenu"
-      ref={popperRef}
-      style={popperStyle}
-      data-placement={popperPlacement}
-    >
-      {filters.length === 0 ? (
-        <h6 className="dropdown-header text-muted text-center">Empty</h6>
-      ) : (
-        filters.map(historyFilters => (
-          <button
-            className="dropdown-item cursor-pointer px-3"
-            key={JSON.stringify(historyFilters.map(f => f.raw))}
-            onClick={() => {
-              alertStore.filters.setFilters(historyFilters.map(f => f.raw));
-              afterClick();
-            }}
-          >
-            <div className="components-navbar-historymenu-labels pl-2">
-              {historyFilters.map(f => (
-                <HistoryLabel
-                  key={f.raw}
-                  alertStore={alertStore}
-                  name={f.name}
-                  value={f.value}
-                />
-              ))}
-            </div>
-          </button>
-        ))
-      )}
-    </div>
-  );
-};
+const HistoryMenu = onClickOutside(
+  ({
+    popperPlacement,
+    popperRef,
+    popperStyle,
+    filters,
+    alertStore,
+    afterClick
+  }) => {
+    return (
+      <div
+        className="dropdown-menu d-block components-navbar-historymenu"
+        ref={popperRef}
+        style={popperStyle}
+        data-placement={popperPlacement}
+      >
+        {filters.length === 0 ? (
+          <h6 className="dropdown-header text-muted text-center">Empty</h6>
+        ) : (
+          filters.map(historyFilters => (
+            <button
+              className="dropdown-item cursor-pointer px-3"
+              key={JSON.stringify(historyFilters.map(f => f.raw))}
+              onClick={() => {
+                alertStore.filters.setFilters(historyFilters.map(f => f.raw));
+                afterClick();
+              }}
+            >
+              <div className="components-navbar-historymenu-labels pl-2">
+                {historyFilters.map(f => (
+                  <HistoryLabel
+                    key={f.raw}
+                    alertStore={alertStore}
+                    name={f.name}
+                    value={f.value}
+                  />
+                ))}
+              </div>
+            </button>
+          ))
+        )}
+      </div>
+    );
+  }
+);
 HistoryMenu.propTypes = {
   popperPlacement: PropTypes.string,
   popperRef: PropTypes.func,
@@ -140,6 +143,10 @@ const History = observer(
       this.appendToHistory();
     }
 
+    handleClickOutside = action(event => {
+      this.collapse.hide();
+    });
+
     render() {
       const { alertStore } = this.props;
 
@@ -159,7 +166,7 @@ const History = observer(
               <button
                 ref={ref}
                 onClick={this.collapse.toggle}
-                className="btn btn-light dropdown-toggle rounded-right"
+                className="btn btn-light dropdown-toggle rounded-right components-navbar-history"
                 type="button"
                 data-toggle="dropdown"
                 aria-haspopup="true"
@@ -170,7 +177,6 @@ const History = observer(
             )}
           </Reference>
           <Popper
-            placement="top"
             modifiers={{
               arrow: { enabled: false }
             }}
@@ -185,6 +191,8 @@ const History = observer(
                     filters={this.history.filters}
                     alertStore={alertStore}
                     afterClick={this.collapse.hide}
+                    handleClickOutside={this.collapse.hide}
+                    outsideClickIgnoreClass="components-navbar-history"
                   />
                 )}
           </Popper>