Bug 1609140 - Perfherder tooltip fix (#5822)

Add CSS change to allow cursor selection of text on the graph tooltip and
add the Clipboard component to make copying easier

ui/css/perf.css

@@ -87,6 +87,12 @@ h1 {
 }
 .graph-tooltip.locked {
   pointer-events: auto;
+  -webkit-touch-callout: text;
+  -webkit-user-select: text;
+  -khtml-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
 }
 .graph-tooltip .body {
   display: block;

ui/perfherder/graphs/GraphTooltip.jsx

@@ -14,6 +14,7 @@ import { getJobsUrl, createQueryParams, getApiUrl } from '../../helpers/url';
 import { create } from '../../helpers/http';
 import RepositoryModel from '../../models/repository';
 import { displayNumber, getStatus } from '../helpers';
+import Clipboard from '../../shared/Clipboard';
 
 const GraphTooltip = ({
   testData,
@@ -213,7 +214,12 @@ const GraphTooltip = ({
                 >
                   compare
                 </a>
-                )
+                ){' '}
+                <Clipboard
+                  text={dataPointDetails.revision}
+                  description="Revision"
+                  outline
+                />
               </span>
             )}
             {dataPointDetails.alertSummary && (

ui/shared/Clipboard.jsx

@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClipboard } from '@fortawesome/free-regular-svg-icons';
+import { Button } from 'reactstrap';
 
-const Clipboard = ({ description, text }) => {
+const Clipboard = ({ description, text, outline }) => {
   if (!text) {
     return null;
   }
@@ -11,24 +12,28 @@ const Clipboard = ({ description, text }) => {
   const copyToClipboard = () => navigator.clipboard.writeText(text);
 
   return (
-    <button
+    <Button
       type="button"
       title={`Copy ${description}`}
       onClick={copyToClipboard}
-      className="px-1 mx-1"
+      className="py-0 px-1"
+      color="light"
+      outline={outline}
     >
       <FontAwesomeIcon icon={faClipboard} />
-    </button>
+    </Button>
   );
 };
 
 Clipboard.propTypes = {
   description: PropTypes.string.isRequired,
   text: PropTypes.string,
+  outline: PropTypes.bool,
 };
 
 Clipboard.defaultProps = {
   text: null,
+  outline: false,
 };
 
 export { Clipboard as default };