Bug 1616311 - Add ability to copy test group name to clipboard (#6103)

* Bug 1616311 - Fix when a key starts with a numeral

We use this as an `id` or query selector at times.  So it must
start with a character.

* Bug 1616311 - Pass the correct revision to CommitHistory

We were passing the revision of the parent, not the current revision
for which we are showing the RevisionList

* Bug 1616311 - Add ability to copy test group name to clipboard

tests/ui/push-health/CommitHistory_test.jsx

@@ -18,7 +18,10 @@ afterEach(() => {
 });
 
 describe('CommitHistory', () => {
-  const testCommitHistory = history => <CommitHistory history={history} />;
+  const revision = 'eeb6fd68c0223a72d8714734a34d3e6da69995e1';
+  const testCommitHistory = history => (
+    <CommitHistory history={history} revision={revision} />
+  );
 
   test('should show a parent commit and health icon for that parent', async () => {
     const { details: commitHistory } = pushHealth.metrics.commitHistory;

treeherder/push_health/tests.py

@@ -123,7 +123,8 @@ def get_current_test_failures(push, option_map):
         job_group_symbol = job.job_group.symbol
         job.job_key = '{}{}{}{}'.format(config, platform, job_name, job_group)
         all_failed_jobs[job.id] = job
-        test_key = re.sub(r'\W+', '', '{}{}{}{}{}'.format(test_name, config, platform, job_name, job_group))
+        # The 't' ensures the key starts with a character, as required for a query selector
+        test_key = re.sub(r'\W+', '', 't{}{}{}{}{}'.format(test_name, config, platform, job_name, job_group))
 
         if test_key not in tests:
             line = {

ui/push-health/CommitHistory.jsx

@@ -25,7 +25,6 @@ class CommitHistory extends React.PureComponent {
     const {
       history: {
         repository,
-        revision,
         jobCounts,
         exactMatch,
         parentSha,
@@ -33,6 +32,7 @@ class CommitHistory extends React.PureComponent {
         revisions,
         revisionCount,
       },
+      revision,
     } = this.props;
     const { clipboardVisible } = this.state;
     const repoModel = new RepositoryModel(repository);
@@ -99,7 +99,6 @@ class CommitHistory extends React.PureComponent {
 CommitHistory.propTypes = {
   history: PropTypes.shape({
     repository: PropTypes.object.isRequired,
-    revision: PropTypes.string.isRequired,
     revisionCount: PropTypes.number.isRequired,
     job_counts: PropTypes.shape({
       completed: PropTypes.number.isRequired,
@@ -108,6 +107,7 @@ CommitHistory.propTypes = {
     }),
     id: PropTypes.number,
   }).isRequired,
+  revision: PropTypes.string.isRequired,
 };
 
 export default CommitHistory;

ui/push-health/GroupedTests.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Button, UncontrolledCollapse } from 'reactstrap';
 import groupBy from 'lodash/groupBy';
@@ -6,10 +6,20 @@ import orderBy from 'lodash/orderBy';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretDown } from '@fortawesome/free-solid-svg-icons';
 
+import Clipboard from '../shared/Clipboard';
+
 import TestFailure from './TestFailure';
 import { filterTests } from './helpers';
 
-class GroupedTests extends Component {
+class GroupedTests extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      clipboardVisible: null,
+    };
+  }
+
   getGroupedTests = tests => {
     const { groupedBy, searchStr } = this.props;
     const filteredTests = searchStr.length
@@ -29,6 +39,10 @@ class GroupedTests extends Component {
     return grouped;
   };
 
+  setClipboardVisible = key => {
+    this.setState({ clipboardVisible: key });
+  };
+
   render() {
     const {
       group,
@@ -40,6 +54,7 @@ class GroupedTests extends Component {
       orderedBy,
       groupedBy,
     } = this.props;
+    const { clipboardVisible } = this.state;
 
     const groupedTests = this.getGroupedTests(group);
     const groupedArray = Object.entries(groupedTests).map(([key, tests]) => ({
@@ -57,20 +72,31 @@ class GroupedTests extends Component {
         {groupedTests &&
           sortedGroups.map(group => (
             <div key={group.id} data-testid="test-grouping">
-              <Button
-                id={`${group.id}-group`}
-                color="darker-secondary"
-                outline
-                className="p-3 bg-light text-center text-monospace border-bottom-0 border-right-0 border-left-0 border-secondary w-100"
-                title="Click to expand for test detail"
+              <span
+                className="d-flex border-top w-100 bg-light p-2 border-top-1 border-secondary justify-content-center rounded"
+                onMouseEnter={() => this.setClipboardVisible(group.key)}
+                onMouseLeave={() => this.setClipboardVisible(null)}
               >
-                {group.key === 'none' ? 'All' : group.key} -
-                <span className="ml-2 font-italic">
-                  {group.tests.length} test{group.tests.length > 1 && 's'}
-                </span>
-                <FontAwesomeIcon icon={faCaretDown} className="ml-1" />
-              </Button>
-              <UncontrolledCollapse toggler={`${group.id}-group`}>
+                <Clipboard
+                  text={group.key}
+                  description="group text"
+                  visible={clipboardVisible === group.key}
+                />
+                <Button
+                  id={`group-${group.id}`}
+                  className="text-center text-monospace border-0"
+                  title="Click to expand for test detail"
+                  outline
+                >
+                  {group.key === 'none' ? 'All' : group.key} -
+                  <span className="ml-2 font-italic">
+                    {group.tests.length} test{group.tests.length > 1 && 's'}
+                  </span>
+                  <FontAwesomeIcon icon={faCaretDown} className="ml-1" />
+                </Button>
+              </span>
+
+              <UncontrolledCollapse toggler={`group-${group.id}`}>
                 {group.tests.map(failure => (
                   <TestFailure
                     key={failure.key}

ui/push-health/Health.jsx

@@ -308,7 +308,10 @@ export default class Health extends React.PureComponent {
                     expanded={commitHistoryExpanded}
                     setExpanded={this.setExpanded}
                   >
-                    <CommitHistory history={commitHistory.details} />
+                    <CommitHistory
+                      history={commitHistory.details}
+                      revision={revision}
+                    />
                   </Metric>
                 </Row>
               )}