Include "Raise an Issue" link on Test Review page

w3c · Nov 21, 2024 · 45e897c · 45e897c
1 parent 977d2af
commit 45e897c
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 7 deletions.
diff --git a/client/components/SortableIssuesTable/index.jsx b/client/components/SortableIssuesTable/index.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;
diff --git a/client/components/TestReview/index.jsx b/client/components/TestReview/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,15 @@ 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}`
+        })}
+      />
       <h2>Tests</h2>
       <FilterButtonContainer>
         <FilterButtons

diff --git a/client/components/TestRun/index.jsx b/client/components/TestRun/index.jsx
@@ -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';
 

diff --git a/client/utils/createIssueLink.js b/client/utils/createIssueLink.js
@@ -3,6 +3,7 @@ const GITHUB_ISSUES_URL =
     ? 'https://github.com/w3c/aria-at'
     : 'https://github.com/bocoup/aria-at';
 
+// TODO: Use At.key
 const atLabelMap = {
   'VoiceOver for macOS': 'vo',
   JAWS: 'jaws',
@@ -46,7 +47,8 @@ const createIssueLink = ({
   browserName = null,
   browserVersionName = null,
   conflictMarkdown = null,
-  reportLink = null
+  reportLink = null,
+  testReviewLink = null
 }) => {
   if (!(testPlanDirectory || testPlanTitle || versionString || atName)) {
     throw new Error('Cannot create issue link due to missing parameters');
@@ -74,7 +76,8 @@ const createIssueLink = ({
       `${titleStart}: "${testTitle}" (${testPlanTitle}, ` +
       `Test ${testSequenceNumber}, ${versionString})`;
   } else {
-    title = `${atName} General Feedback: ${testPlanTitle} ${versionString}`;
+    title = `General Feedback: ${testPlanTitle} ${versionString}`;
+    if (atName) title = `${atName} ${title}`;
   }
 
   const labels =
@@ -121,6 +124,13 @@ const createIssueLink = ({
       '\n';
   }
 
+  let metadataFormatted = '';
+  let testReviewLinkFormatted = '';
+  if (testReviewLink) {
+    testReviewLinkFormatted = `- Test Review Page: [Link](${testReviewLink})\n`;
+    metadataFormatted = `## Metadata\n\n` + testReviewLinkFormatted + '\n';
+  }
+
   const hiddenIssueMetadata = JSON.stringify({
     testPlanDirectory,
     versionString,
@@ -136,6 +146,7 @@ const createIssueLink = ({
     `## Description of Behavior\n\n` +
     `<!-- Write your description here -->\n\n` +
     testSetupFormatted +
+    metadataFormatted +
     `<!-- The following data allows the issue to be imported into the ` +
     `ARIA AT App -->\n` +
     `<!-- ARIA_AT_APP_ISSUE_DATA = ${hiddenIssueMetadata} -->`;
@@ -172,6 +183,7 @@ export const getIssueSearchLink = ({
   versionString,
   testSequenceNumber = null
 }) => {
+  // TODO: Use At.key
   let atKey;
   if (atName === 'JAWS' || atName === 'NVDA') {
     atKey = atName.toLowerCase();