fix(ui): group dropdown item should copy rather than open new tab

ui/package-lock.json

@@ -2469,6 +2469,14 @@
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
+    "copy-to-clipboard": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz",
+      "integrity": "sha512-c3GdeY8qxCHGezVb1EFQfHYK/8NZRemgcTIzPq7PuxjHAf/raKibn2QdhHPb/y6q74PMgH6yizaDZlRmw6QyKw==",
+      "requires": {
+        "toggle-selection": "1.0.6"
+      }
+    },
     "core-js": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
@@ -11744,6 +11752,11 @@
         "repeat-string": "1.6.1"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toposort": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",

ui/package.json

@@ -11,6 +11,7 @@
     "@fortawesome/react-fontawesome": "0.1.1",
     "bootstrap": "4.1.3",
     "bootswatch": "4.1.3",
+    "copy-to-clipboard": "3.0.8",
     "fast-deep-equal": "2.0.1",
     "lodash.debounce": "4.0.8",
     "lodash.throttle": "4.1.1",

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

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 
+import copy from "copy-to-clipboard";
+
 import { Manager, Reference, Popper } from "react-popper";
 import onClickOutside from "react-onclickoutside";
 
@@ -36,7 +38,9 @@ const MenuContent = onClickOutside(
     groupFilters.push(
       FormatQuery(StaticLabels.Receiver, QueryOperators.Equal, group.receiver)
     );
-    const groupLink = `?${FormatAPIFilterQuery(groupFilters)}`;
+    const groupLink = `${window.location.href}?${FormatAPIFilterQuery(
+      groupFilters
+    )}`;
 
     return (
       <div
@@ -45,20 +49,21 @@ const MenuContent = onClickOutside(
         style={popperStyle}
         data-placement={popperPlacement}
       >
-        <a
-          className="dropdown-item"
-          href={groupLink}
-          target="_blank"
-          rel="noopener noreferrer"
+        <div
+          className="dropdown-item cursor-pointer"
+          onClick={() => {
+            copy(groupLink);
+            afterClick();
+          }}
         >
-          <FontAwesomeIcon icon={faShareSquare} /> Link to this group
-        </a>
-        <a
+          <FontAwesomeIcon icon={faShareSquare} /> Copy link to this group
+        </div>
+        <div
           className="dropdown-item cursor-pointer"
           onClick={() => onSilenceClick(silenceFormStore, group)}
         >
           <FontAwesomeIcon icon={faBellSlash} /> Silence this group
-        </a>
+        </div>
       </div>
     );
   }