Bug 1718601 - Alerts View - Add copy alert ID button (#7197)

* Bug 1718601 - Add copy alert id button to Alerts View

* Bug 1718601 - Fix icon position

tests/ui/perfherder/alerts-view/alerts_test.jsx

@@ -774,3 +774,19 @@ test('test next alert button should be disable when reaching the last alert', as
 
   expect(nextScrollButton).toBeDisabled();
 });
+
+test("Alert's ID can be copied to clipboard", async () => {
+  const { queryAllByTitle } = alertsViewControls();
+  Object.assign(navigator, {
+    clipboard: {
+      writeText: jest.fn(),
+    },
+  });
+
+  const alertID = testAlertSummaries[0].id;
+  const copyIdButtons = await waitFor(() => queryAllByTitle('Copy Alert ID'));
+
+  fireEvent.click(copyIdButtons[0]);
+
+  expect(navigator.clipboard.writeText).toHaveBeenCalledWith(`${alertID}`);
+});

ui/perfherder/alerts/AlertHeader.jsx

@@ -8,18 +8,14 @@ import {
   Container,
   Row,
   Col,
-  Badge,
 } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
-import { Link } from 'react-router-dom';
 
-import { getTitle, getFrameworkName } from '../perf-helpers/helpers';
 import { getJobsUrl } from '../../helpers/url';
 import { toMercurialDateStr } from '../../helpers/display';
 
 import Assignee from './Assignee';
 import TagsList from './TagsList';
+import AlertHeaderTitle from './AlertHeaderTitle';
 
 const AlertHeader = ({
   frameworks,
@@ -44,26 +40,7 @@ const AlertHeader = ({
 
   return (
     <Container>
-      <Row>
-        <Link
-          className="text-dark"
-          to={`./alerts?id=${alertSummary.id}&hideDwnToInv=0`}
-          id={`alert summary ${alertSummary.id.toString()} title`}
-          data-testid={`alert summary ${alertSummary.id.toString()} title`}
-        >
-          <h6 className="font-weight-bold align-middle">
-            <Badge className="mr-2">
-              {getFrameworkName(frameworks, alertSummary.framework)}
-            </Badge>
-            Alert #{alertSummary.id} - {alertSummary.repository} -{' '}
-            {getTitle(alertSummary)}{' '}
-            <FontAwesomeIcon
-              icon={faExternalLinkAlt}
-              className="icon-superscript"
-            />
-          </h6>
-        </Link>
-      </Row>
+      <AlertHeaderTitle alertSummary={alertSummary} frameworks={frameworks} />
       <Row className="font-weight-normal">
         <Col className="p-0" xs="auto">
           {toMercurialDateStr(alertSummaryDatetime)}

ui/perfherder/alerts/AlertHeaderTitle.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Link } from 'react-router-dom';
+import { Row, Col, Badge } from 'reactstrap';
+
+import Clipboard from '../../shared/Clipboard';
+import { getFrameworkName, getTitle } from '../perf-helpers/helpers';
+
+export default class AlertHeaderTitle extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      clipboardVisible: false,
+    };
+  }
+
+  showClipboard = (show) => {
+    this.setState({ clipboardVisible: show });
+  };
+
+  render() {
+    const { alertSummary, frameworks } = this.props;
+    const { clipboardVisible } = this.state;
+    return (
+      <Row
+        onMouseEnter={() => this.showClipboard(true)}
+        onMouseLeave={() => this.showClipboard(false)}
+      >
+        <Col className="d-flex align-items-start p-0">
+          <Link
+            className="text-dark mr-1"
+            to={`./alerts?id=${alertSummary.id}&hideDwnToInv=0`}
+            id={`alert summary ${alertSummary.id.toString()} title`}
+            data-testid={`alert summary ${alertSummary.id.toString()} title`}
+          >
+            <h6 className="font-weight-bold align-middle">
+              <Badge className="mr-2">
+                {getFrameworkName(frameworks, alertSummary.framework)}
+              </Badge>
+              Alert #{alertSummary.id} - {alertSummary.repository} -{' '}
+              {getTitle(alertSummary)}{' '}
+              <FontAwesomeIcon
+                icon={faExternalLinkAlt}
+                className="icon-superscript"
+              />
+            </h6>
+          </Link>
+          <Clipboard
+            text={`${alertSummary.id}`}
+            description="Alert ID"
+            visible={clipboardVisible}
+            color="transparent"
+          />
+        </Col>
+      </Row>
+    );
+  }
+}
+
+AlertHeaderTitle.propTypes = {
+  alertSummary: PropTypes.shape({}).isRequired,
+};

ui/shared/Clipboard.jsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClipboard } from '@fortawesome/free-regular-svg-icons';
 import { Button } from 'reactstrap';
 
-const Clipboard = ({ description, text, outline, visible }) => {
+const Clipboard = ({ description, text, outline, visible, color }) => {
   if (!text) {
     return null;
   }
@@ -17,7 +17,7 @@ const Clipboard = ({ description, text, outline, visible }) => {
       title={`Copy ${description}`}
       onClick={copyToClipboard}
       className={`py-0 px-1 ${visible ? '' : 'invisible'}`}
-      color="light"
+      color={`${color || 'light'}`}
       outline={outline}
     >
       <FontAwesomeIcon icon={faClipboard} />