fix: Include additional "Raise an Issue" links (#1281)

* Include link to Review Page from Test Run
* Includes "Raise an Issue" link on Test Review page
* Support raising an issue for a specific command from Test Run page
* Infer issue creation's isCandidateReview flag where applicable
* Show if issue is being created for a published report

Author: howard-e

.eslintrc.json

@@ -1,4 +1,9 @@
 {
+  "ignorePatterns": [
+    "client/dist/*",
+    "client/dist/bundle.js",
+    "client/tests/e2e/snapshots/saved"
+  ],
   "env": {
     "browser": true,
     "es6": true,
@@ -19,40 +24,19 @@
     "ecmaVersion": 2020,
     "sourceType": "module"
   },
-  "plugins": [
-    "react",
-    "json",
-    "prettier",
-    "jest"
-  ],
+  "plugins": ["react", "json", "prettier", "jest"],
   "rules": {
-    "linebreak-style": [
-      "error",
-      "unix"
-    ],
-    "semi": [
-      "error",
-      "always"
-    ],
-    "eol-last": [
-      "error",
-      "always"
-    ],
+    "linebreak-style": ["error", "unix"],
+    "semi": ["error", "always"],
+    "eol-last": ["error", "always"],
     "no-console": [
       "error",
       {
-        "allow": [
-          "warn",
-          "error"
-        ]
+        "allow": ["warn", "error"]
       }
     ],
-    "no-use-before-define": [
-      "off"
-    ],
-    "react/display-name": [
-      "off"
-    ]
+    "no-use-before-define": ["off"],
+    "react/display-name": ["off"]
   },
   "settings": {
     "react": {

.prettierignore

@@ -0,0 +1,5 @@
+client/dist/*
+client/dist/bundle.js
+
+# snaphosts
+client/tests/e2e/snapshots/saved

client/.eslintignore

@@ -263,6 +263,7 @@ const SummarizeTestPlanReport = ({ testPlanVersion, testPlanReports }) => {
           atVersionName: testResult.atVersion.name,
           browserName: testPlanReport.browser.name,
           browserVersionName: testResult.browserVersion.name,
+          versionPhase: testPlanVersion.phase,
           reportLink
         });
 

client/components/Reports/SummarizeTestPlanReport.jsx

@@ -24,7 +24,7 @@ const SORT_FIELDS = {
   CLOSED_AT: 'closedAt'
 };
 
-const SortableIssuesTable = ({ issues }) => {
+const SortableIssuesTable = ({ issues, issueLink }) => {
   const [activeSort, setActiveSort] = useState(SORT_FIELDS.STATUS);
   const [sortOrder, setSortOrder] = useState(TABLE_SORT_ORDERS.ASC);
   const [activeFilter, setActiveFilter] = useState('OPEN');
@@ -187,12 +187,20 @@ const SortableIssuesTable = ({ issues }) => {
           {renderTableBody()}
         </ThemeTable>
       )}
+      {issueLink && (
+        <div style={{ marginTop: '1rem' }}>
+          <a href={issueLink} target="_blank" rel="noreferrer">
+            Raise an Issue
+          </a>
+        </div>
+      )}
     </>
   );
 };
 
 SortableIssuesTable.propTypes = {
-  issues: PropTypes.arrayOf(IssuePropType).isRequired
+  issues: PropTypes.arrayOf(IssuePropType).isRequired,
+  issueLink: PropTypes.string
 };
 
 export default SortableIssuesTable;

client/components/SortableIssuesTable/index.jsx

@@ -27,6 +27,7 @@ import UnexpectedBehaviorsFieldset from './UnexpectedBehaviorsFieldset';
 import supportJson from '../../resources/support.json';
 import commandsJson from '../../resources/commands.json';
 import { AtPropType, TestResultPropType } from '../common/proptypes/index.js';
+import createIssueLink from '@client/utils/createIssueLink';
 
 const Container = styled.div`
   width: 100%;
@@ -163,7 +164,8 @@ const TestRenderer = ({
   isReviewingBot = false,
   isReadOnly = false,
   isEdit = false,
-  setIsRendererReady = false
+  setIsRendererReady = false,
+  commonIssueContent
 }) => {
   const { scenarioResults, test = {}, completedAt } = testResult;
   const { renderableContent } = test;
@@ -498,7 +500,7 @@ const TestRenderer = ({
           {mayAssertionsFailedCount} unsupported)
         </SubHeadingText>
         <TestPlanResultsTable
-          test={{ title: header, at }}
+          test={{ id: test.id, title: header, at }}
           testResult={testResult}
         />
       </>
@@ -543,6 +545,13 @@ const TestRenderer = ({
                 unexpectedBehaviors,
                 assertionsHeader
               } = value;
+
+              const commandString = header.replace('After ', '');
+              const issueLink = createIssueLink({
+                ...commonIssueContent,
+                commandString
+              });
+
               return (
                 <Fragment key={`AtOutputKey_${commandIndex}`}>
                   <InnerSectionHeadingText>{header}</InnerSectionHeadingText>
@@ -564,6 +573,9 @@ const TestRenderer = ({
                     isSubmitted={isSubmitted}
                     readOnly={isReadOnly}
                   />
+                  <a href={issueLink} target="_blank" rel="noreferrer">
+                    Raise an issue for {commandString}
+                  </a>
                 </Fragment>
               );
             })}
@@ -604,7 +616,8 @@ TestRenderer.propTypes = {
   isReadOnly: PropTypes.bool,
   isEdit: PropTypes.bool,
   isReviewingBot: PropTypes.bool,
-  setIsRendererReady: PropTypes.func
+  setIsRendererReady: PropTypes.func,
+  commonIssueContent: PropTypes.object
 };
 
 export default TestRenderer;

client/components/TestRenderer/index.jsx

@@ -2,7 +2,7 @@ import React, { Fragment, useMemo, useState } from 'react';
 import { useQuery } from '@apollo/client';
 import { TEST_REVIEW_PAGE_QUERY } from './queries';
 import { Container } from 'react-bootstrap';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useLocation, useParams } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import PageStatus from '../common/PageStatus';
 import InstructionsRenderer from '../CandidateReview/CandidateTestPlanRun/InstructionsRenderer';
@@ -12,6 +12,7 @@ import { derivePhaseName } from '../../utils/aria';
 import { dates } from 'shared';
 import supportJson from '../../resources/support.json';
 import SortableIssuesTable from '../SortableIssuesTable';
+import createIssueLink from '../../utils/createIssueLink';
 
 const Ul = styled.ul`
   li {
@@ -28,6 +29,7 @@ const FilterButtonContainer = styled.div`
 `;
 
 const TestReview = () => {
+  const location = useLocation();
   const { testPlanVersionId } = useParams();
 
   const { loading, data, error } = useQuery(TEST_REVIEW_PAGE_QUERY, {
@@ -237,7 +239,16 @@ const TestReview = () => {
           }
         )}
       </ul>
-      <SortableIssuesTable issues={issues} />
+      <SortableIssuesTable
+        issues={issues}
+        issueLink={createIssueLink({
+          testPlanTitle: testPlanVersion.title,
+          testPlanDirectory: testPlanVersion.testPlan.directory,
+          versionString: testPlanVersion.versionString,
+          testReviewLink: `https://aria-at-.w3.org${location.pathname}`,
+          versionPhase: testPlanVersion.versionPhase
+        })}
+      />
       <h2>Tests</h2>
       <FilterButtonContainer>
         <FilterButtons

client/components/TestReview/index.jsx

@@ -24,6 +24,8 @@ const TestRunHeading = ({
   openAsUser,
   showEditAtBrowser,
   testPlanTitle,
+  testPlanVersionString,
+  testPlanVersionReviewLink,
   testResults,
   testIndex,
   testCount,
@@ -137,6 +139,7 @@ const TestRunHeading = ({
     );
   }
 
+  const testPlanName = `${testPlanTitle} ${testPlanVersionString}`;
   return (
     <>
       <div className="test-info-wrapper">
@@ -145,7 +148,8 @@ const TestRunHeading = ({
           data-testid="apg-example-name"
         >
           <div className="info-label">
-            <b>Test Plan:</b> {testPlanTitle}
+            <b>Test Plan:</b>&nbsp;
+            <a href={testPlanVersionReviewLink}>{testPlanName}</a>
           </div>
         </div>
         <div className="test-info-entity at-browser" data-testid="at-browser">
@@ -177,6 +181,8 @@ const TestRunHeading = ({
 
 TestRunHeading.propTypes = {
   testPlanTitle: PropTypes.string.isRequired,
+  testPlanVersionString: PropTypes.string.isRequired,
+  testPlanVersionReviewLink: PropTypes.string.isRequired,
   at: PropTypes.string.isRequired,
   browser: PropTypes.string.isRequired,
   showEditAtBrowser: PropTypes.bool.isRequired,

client/components/TestRun/Heading.js

@@ -39,7 +39,6 @@ import { evaluateAuth } from '../../utils/evaluateAuth';
 import './TestRun.css';
 import ReviewConflicts from '../ReviewConflicts';
 import createIssueLink from '../../utils/createIssueLink';
-import { dates } from 'shared';
 import { Provider as CollectionJobContextProvider } from './CollectionJobContext';
 import { useUrlTestIndex } from '../../hooks/useUrlTestIndex';
 
@@ -360,16 +359,13 @@ const TestRun = () => {
   }
   adminReviewerCheckedRef.current = true;
 
-  let issueLink;
+  let issueLink, commonIssueContent;
   const hasLoadingCompleted = Object.keys(currentTest).length;
   if (hasLoadingCompleted) {
-    issueLink = createIssueLink({
+    commonIssueContent = {
       testPlanTitle: testPlanVersion.title,
       testPlanDirectory: testPlanVersion.testPlan.directory,
-      versionString: `V${dates.convertDateToString(
-        testPlanVersion.updatedAt,
-        'YY.MM.DD'
-      )}`,
+      versionString: testPlanVersion.versionString,
       testTitle: currentTest.title,
       testRowNumber: currentTest.rowNumber,
       testSequenceNumber: currentTest.seq,
@@ -379,7 +375,8 @@ const TestRun = () => {
       atVersionName: currentAtVersion?.name,
       browserVersionName: currentBrowserVersion?.name,
       conflictMarkdown: conflictMarkdownRef.current
-    });
+    };
+    issueLink = createIssueLink(commonIssueContent);
   }
 
   const remapScenarioResults = (
@@ -969,7 +966,7 @@ const TestRun = () => {
         <ul className="options-wrapper" aria-labelledby="test-options-heading">
           <li>
             <OptionButton
-              text="Raise An Issue"
+              text="Raise an Issue"
               icon={
                 <FontAwesomeIcon icon={faExclamationCircle} color="#94979b" />
               }
@@ -1051,6 +1048,7 @@ const TestRun = () => {
                   isSubmitted={isTestSubmitClicked}
                   isEdit={isTestEditClicked}
                   setIsRendererReady={setIsRendererReady}
+                  commonIssueContent={commonIssueContent}
                 />
               </Row>
               {isRendererReady && (
@@ -1143,6 +1141,8 @@ const TestRun = () => {
       testPlanTitle={
         testPlanVersion.title || testPlanVersion.testPlan?.directory || ''
       }
+      testPlanVersionString={testPlanVersion.versionString}
+      testPlanVersionReviewLink={`/test-review/${testPlanVersion.id}`}
       at={`${testPlanReport.at?.name}${
         isViewingRun ? ` ${currentAtVersion?.name}` : ''
       }`}

client/components/TestRun/index.jsx

@@ -336,23 +336,23 @@ describe('Test Run when signed in as tester', () => {
       await page.waitForSelector('h1 ::-p-text(Test 1)');
       await page.waitForSelector('button ::-p-text(Next Test)');
 
-      const radioSelector = 'input[type="radio"]';
+      const radioSelector = 'input[type="radio"][id^="pass-"]';
       const test1NavSelector = 'nav#test-navigator-nav ol li:nth-child(1)';
       const test2NavSelector = 'nav#test-navigator-nav ol li:nth-child(2)';
       const nextTestButtonSelector = 'button ::-p-text(Next Test)';
       const previousTestButtonSelector = 'button ::-p-text(Previous Test)';
 
       // Randomly select radio buttons on first test
       const generatedCheckedTest1Count =
-        await getGeneratedCheckedAssertionCount(page, radioSelector);
+        await getGeneratedCheckedAssertionCount(page);
 
       // Navigate to test 2 with navigation menu
       await page.$eval(test2NavSelector, el => el.querySelector('a').click());
       await page.waitForNetworkIdle();
       await page.waitForSelector('h1 ::-p-text(Test 2:)');
       await page.waitForSelector('button ::-p-text(Next Test)');
       const generatedCheckedTest2Count =
-        await getGeneratedCheckedAssertionCount(page, radioSelector);
+        await getGeneratedCheckedAssertionCount(page);
 
       // Navigate to test 3 with next button
       await page.click(nextTestButtonSelector);