Add collapsible areas for Test Plan Versions History page

.github/workflows/runtest.yml

@@ -37,6 +37,7 @@ jobs:
           yarn sequelize:test db:migrate
           yarn sequelize:test db:seed:all
           yarn workspace server db-import-tests:test -c ${IMPORT_ARIA_AT_TESTS_COMMIT_1}
+          yarn workspace server db-import-tests:test -c ${IMPORT_ARIA_AT_TESTS_COMMIT_2}
           yarn workspace server db-import-tests:test
           yarn workspace server db-populate-sample-data:test
       - name: test

.vscode/launch.json

@@ -4,6 +4,7 @@
     {
       "name": "Import tests",
       "program": "${workspaceFolder}/server/scripts/import-tests/index.js",
+      // "args": ["-c","5fe7afd82fe51c185b8661276105190a59d47322"],
       "request": "launch",
       "envFile": "${workspaceFolder}/config/dev.env",
       "skipFiles": [

client/components/CandidateReview/CandidateTestPlanRun/CandidateTestPlanRun.css

@@ -132,12 +132,7 @@
 }
 
 .test-results-header {
-    border-bottom: none;
-    margin: 0;
-    padding: 20px;
-    font-size: 20px;
-    background-color: #f5f8fa;
-    border: #e5efe8 1px solid;
+    margin: 0 0 1rem;
 }
 
 .test-results-table {

client/components/CandidateReview/CandidateTestPlanRun/index.jsx

@@ -20,28 +20,17 @@ import { Helmet } from 'react-helmet';
 import './CandidateTestPlanRun.css';
 import '../../TestRun/TestRun.css';
 import '../../App/App.css';
-import useResizeObserver from '@react-hook/resize-observer';
 import { useMediaQuery } from 'react-responsive';
 import { convertDateToString } from '../../../utils/formatter';
-import TestPlanResultsTable from '../../Reports/TestPlanResultsTable';
+import TestPlanResultsTable from '../../common/TestPlanResultsTable';
+import { calculateAssertionsCount } from '../../common/TestPlanResultsTable/utils';
 import ProvideFeedbackModal from '../CandidateModals/ProvideFeedbackModal';
 import ThankYouModal from '../CandidateModals/ThankYouModal';
-import getMetrics from '../../Reports/getMetrics';
 import FeedbackListItem from '../FeedbackListItem';
 import DisclosureComponent from '../../common/DisclosureComponent';
-
-// https://codesandbox.io/s/react-hookresize-observer-example-ft88x
-function useSize(target) {
-    const [size, setSize] = React.useState();
-
-    React.useLayoutEffect(() => {
-        target && setSize(target.getBoundingClientRect());
-    }, [target]);
-
-    // Where the magic happens
-    useResizeObserver(target, entry => setSize(entry.contentRect));
-    return size;
-}
+import createIssueLink, {
+    getIssueSearchLink
+} from '../../../utils/createIssueLink';
 
 const CandidateTestPlanRun = () => {
     const { atId, testPlanVersionId } = useParams();
@@ -80,10 +69,6 @@ const CandidateTestPlanRun = () => {
     const [showBrowserBools, setShowBrowserBools] = useState([]);
     const [showBrowserClicks, setShowBrowserClicks] = useState([]);
 
-    const [issuesHeading, setIssuesHeading] = React.useState();
-    const issuesHeadingSize = useSize(issuesHeading);
-    const [issuesList, setIssuesList] = React.useState();
-    const issuesListSize = useSize(issuesList);
     const isLaptopOrLarger = useMediaQuery({
         query: '(min-width: 792px)'
     });
@@ -312,64 +297,79 @@ const CandidateTestPlanRun = () => {
     // Assumes that the issues are across the entire AT/Browser combination
     const changesRequestedIssues = testPlanReport.issues?.filter(
         issue =>
+            issue.isCandidateReview &&
             issue.feedbackType === 'CHANGES_REQUESTED' &&
             issue.testNumberFilteredByAt === currentTest.seq
     );
 
     const feedbackIssues = testPlanReport.issues?.filter(
         issue =>
+            issue.isCandidateReview &&
             issue.feedbackType === 'FEEDBACK' &&
             issue.testNumberFilteredByAt === currentTest.seq
     );
 
+    const issue = {
+        isCandidateReview: true,
+        isCandidateReviewChangesRequested: true,
+        testPlanTitle: testPlanVersion.title,
+        testPlanDirectory: testPlanVersion.testPlan.directory,
+        versionString: testPlanVersion.versionString,
+        testTitle: currentTest.title,
+        testRowNumber: currentTest.rowNumber,
+        testRenderedUrl: currentTest.renderedUrl,
+        atName: testPlanReport.at.name
+    };
+
+    const requestChangesUrl = createIssueLink(issue);
+
+    const feedbackUrl = createIssueLink({
+        ...issue,
+        isCandidateReviewChangesRequested: false
+    });
+
+    const generalFeedbackUrl = createIssueLink({
+        ...issue,
+        isCandidateReviewChangesRequested: false,
+        testTitle: undefined,
+        testRowNumber: undefined,
+        testRenderedUrl: undefined
+    });
+
+    const issueQuery = {
+        isCandidateReview: true,
+        isCandidateReviewChangesRequested: false,
+        testPlanTitle: testPlanVersion.title,
+        versionString: testPlanVersion.versionString,
+        testRowNumber: currentTest.rowNumber,
+        username: data.me.username,
+        atName: testPlanReport.at.name
+    };
+
+    const feedbackGithubUrl = getIssueSearchLink(issueQuery);
+
+    const changesRequestedGithubUrl = getIssueSearchLink({
+        ...issueQuery,
+        isCandidateReviewChangesRequested: true
+    });
+
+    let fileBugUrl;
+
     const githubAtLabelMap = {
         'VoiceOver for macOS': 'vo',
         JAWS: 'jaws',
         NVDA: 'nvda'
     };
 
-    const generateGithubUrl = (
-        test = false,
-        type = '',
-        titleAddition = '',
-        search = false,
-        author = ''
-    ) => {
-        const testPlanVersionDate = convertDateToString(
-            new Date(testPlanVersion.updatedAt),
-            'DD-MM-YYYY'
-        );
-
-        const generateGithubTitle = () => {
-            return `${at} Feedback: "${currentTest.title}" (${
-                testPlanVersion.title
-            }${
-                test ? `, Test ${currentTest.seq}` : ''
-            }, ${testPlanVersionDate})${
-                titleAddition ? ` - ${titleAddition}` : ''
-            }`;
-        };
-
-        const githubIssueUrlTitle = generateGithubTitle();
-        const defaultGithubLabels = 'app,candidate-review';
-        let githubUrl;
-
-        if (!search) {
-            githubUrl = `https://github.com/w3c/aria-at/issues/new?title=${encodeURI(
-                githubIssueUrlTitle
-            )}&labels=${defaultGithubLabels},${githubAtLabelMap[at]}`;
-            return `${githubUrl},${type}`;
-        } else {
-            let title = generateGithubTitle();
-            let query = encodeURI(
-                `label:app label:candidate-review label:${type} label:${
-                    githubAtLabelMap[at]
-                } ${author ? `author:${author}` : ''} ${title}`
-            );
-            githubUrl = `https://github.com/w3c/aria-at/issues?q=${query}`;
-            return githubUrl;
-        }
-    };
+    if (githubAtLabelMap[at] == 'vo') {
+        fileBugUrl =
+            'https://bugs.webkit.org/buglist.cgi?quicksearch=voiceover';
+    } else if (githubAtLabelMap[at] == 'nvda') {
+        fileBugUrl = 'https://github.com/nvaccess/nvda/issues';
+    } else {
+        fileBugUrl =
+            'https://github.com/FreedomScientific/VFO-standards-support/issues';
+    }
 
     const heading = (
         <div className="test-info-heading">
@@ -426,27 +426,16 @@ const CandidateTestPlanRun = () => {
     );
 
     const feedback = testPlanReport.issues.filter(
-        issue => issue.testNumberFilteredByAt == currentTest.seq
+        issue =>
+            issue.isCandidateReview &&
+            issue.testNumberFilteredByAt == currentTest.seq
     ).length > 0 && (
         <div className="issues-container">
-            <h2
-                style={{
-                    width: isLaptopOrLarger
-                        ? issuesHeadingSize?.width
-                        : issuesListSize?.width,
-                    position: 'relative'
-                }}
-            >
+            <h2>
                 <span className="feedback-from-text">Feedback from</span>{' '}
                 <b>{at} Representative</b>
             </h2>
-            <ul
-                className="feedback-list"
-                style={{
-                    width: issuesListSize?.width,
-                    position: 'relative'
-                }}
-            >
+            <ul className="feedback-list">
                 {[changesRequestedIssues, feedbackIssues].map((list, index) => {
                     if (list.length > 0) {
                         const uniqueAuthors = [
@@ -467,15 +456,16 @@ const CandidateTestPlanRun = () => {
                                 }
                                 issues={list}
                                 individualTest={true}
-                                githubUrl={generateGithubUrl(
-                                    true,
-                                    index === 0
-                                        ? 'changes-requested'
-                                        : 'feedback',
-                                    null,
-                                    true,
-                                    !differentAuthors ? data.me.username : null
-                                )}
+                                githubUrl={getIssueSearchLink({
+                                    isCandidateReview: true,
+                                    isCandidateReviewChangesRequested:
+                                        index === 0,
+                                    atName: testPlanReport.at.name,
+                                    testPlanTitle: testPlanVersion.title,
+                                    versionString:
+                                        testPlanVersion.versionString,
+                                    testRowNumber: currentTest.rowNumber
+                                })}
                             />
                         );
                     }
@@ -518,17 +508,20 @@ const CandidateTestPlanRun = () => {
                             testPlanReport.finalizedTestResults[
                                 currentTestIndex
                             ];
-                        const { testsPassedCount } = getMetrics({ testResult });
+
+                        const { passedAssertionsCount, failedAssertionsCount } =
+                            calculateAssertionsCount(testResult);
+
                         return (
                             <>
                                 <h2 className="test-results-header">
-                                    Test Result:{' '}
-                                    {testsPassedCount ? 'PASS' : 'FAIL'}
+                                    Test Results&nbsp;(
+                                    {passedAssertionsCount} passed,&nbsp;
+                                    {failedAssertionsCount} failed)
                                 </h2>
                                 <TestPlanResultsTable
-                                    tableClassName="test-results-table"
                                     key={`${testPlanReport.id} + ${testResult.id}`}
-                                    test={currentTest}
+                                    test={{ ...currentTest, at: { name: at } }}
                                     testResult={testResult}
                                 />
                             </>
@@ -540,20 +533,6 @@ const CandidateTestPlanRun = () => {
         </div>
     );
 
-    const requestChangesUrl = generateGithubUrl(true, 'changes-requested');
-    const feedbackUrl = generateGithubUrl(true, 'feedback');
-    let fileBugUrl;
-
-    if (githubAtLabelMap[at] == 'vo') {
-        fileBugUrl =
-            'https://bugs.webkit.org/buglist.cgi?quicksearch=voiceover';
-    } else if (githubAtLabelMap[at] == 'nvda') {
-        fileBugUrl = 'https://github.com/nvaccess/nvda/issues';
-    } else {
-        fileBugUrl =
-            'https://github.com/FreedomScientific/VFO-standards-support/issues';
-    }
-
     return (
         <Container className="test-run-container">
             <Helmet>
@@ -580,11 +559,10 @@ const CandidateTestPlanRun = () => {
                         {heading}
                         {testInfo}
                         <Col className="results-container-col">
-                            <Row xs={1} s={1} md={2} ref={setIssuesHeading}>
+                            <Row xs={1} s={1} md={2}>
                                 <Col
                                     className="results-container"
                                     md={isLaptopOrLarger ? 9 : 12}
-                                    ref={setIssuesList}
                                 >
                                     <Row>{feedback}</Row>
                                     <Row className="results-container-row">
@@ -691,28 +669,18 @@ const CandidateTestPlanRun = () => {
                     testPlan={testPlanVersion.title}
                     feedbackIssues={testPlanReport.issues?.filter(
                         issue =>
+                            issue.isCandidateReview &&
                             issue.feedbackType === 'FEEDBACK' &&
                             issue.author == data.me.username
                     )}
-                    feedbackGithubUrl={generateGithubUrl(
-                        false,
-                        'feedback',
-                        null,
-                        true,
-                        data.me.username
-                    )}
+                    feedbackGithubUrl={feedbackGithubUrl}
                     changesRequestedIssues={testPlanReport.issues?.filter(
                         issue =>
+                            issue.isCandidateReview &&
                             issue.feedbackType === 'CHANGES_REQUESTED' &&
                             issue.author == data.me.username
                     )}
-                    changesRequestedGithubUrl={generateGithubUrl(
-                        false,
-                        'changes-requested',
-                        null,
-                        true,
-                        data.me.username
-                    )}
+                    changesRequestedGithubUrl={changesRequestedGithubUrl}
                     handleAction={submitApproval}
                     handleHide={() => setFeedbackModalShowing(false)}
                 />
@@ -726,11 +694,7 @@ const CandidateTestPlanRun = () => {
                         setThankYouModalShowing(false);
                         navigate('/candidate-review');
                     }}
-                    githubUrl={generateGithubUrl(
-                        false,
-                        'feedback',
-                        'General Feedback'
-                    )}
+                    githubUrl={generalFeedbackUrl}
                 />
             ) : (
                 <></>

client/components/CandidateReview/CandidateTestPlanRun/queries.js

@@ -45,6 +45,7 @@ export const CANDIDATE_REPORTS_QUERY = gql`
             vendorReviewStatus
             issues {
                 author
+                isCandidateReview
                 feedbackType
                 testNumberFilteredByAt
                 link
@@ -73,12 +74,14 @@ export const CANDIDATE_REPORTS_QUERY = gql`
                 metadata
                 testPageUrl
                 updatedAt
+                versionString
                 candidatePhaseReachedAt
                 recommendedPhaseTargetDate
             }
             runnableTests {
                 id
                 title
+                rowNumber
                 renderedUrl
                 renderableContent
                 viewers {