feat: Issues table for Test Plan Review page (#1269)

* First pass on adding issues table to test review

* Code simplification in TestPlanVersionsPage

* Update snapshots, handle missing data

* Update client/components/TestReview/queries.js

Co-authored-by: Howard Edwards <[email protected]>

---------

Co-authored-by: Howard Edwards <[email protected]>

Author: stalgiag

client/components/TestPlanVersionsPage/index.jsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { useQuery } from '@apollo/client';
 import { TEST_PLAN_VERSIONS_PAGE_QUERY } from './queries';
 import PageStatus from '../common/PageStatus';
@@ -88,6 +88,12 @@ const TestPlanVersionsPage = () => {
   const expandedVersionSections = useRef();
   const toggleVersionSections = useRef();
 
+  // GraphQL results are read only so they need to be cloned
+  // before passing to SortableIssuesTable
+  const issues = useMemo(() => {
+    return data ? [...data.testPlan.issues] : [];
+  }, [data]);
+
   if (error) {
     return (
       <PageStatus
@@ -192,23 +198,12 @@ const TestPlanVersionsPage = () => {
     return derivedPhaseDeprecatedDuring;
   };
 
-  const testPlan = data.testPlan;
+  const { testPlan, ats } = data;
 
-  // GraphQL results are read only so they need to be cloned before sorting
-  const issues = [...testPlan.issues].sort((a, b) => {
-    const aCreatedAt = new Date(a.createdAt);
-    const bCreatedAt = new Date(b.createdAt);
-    return bCreatedAt - aCreatedAt;
+  const testPlanVersions = testPlan.testPlanVersions.slice().sort((a, b) => {
+    return new Date(b.updatedAt) - new Date(a.updatedAt);
   });
 
-  const ats = data.ats;
-
-  const testPlanVersions = data.testPlan.testPlanVersions
-    .slice()
-    .sort((a, b) => {
-      return new Date(b.updatedAt) - new Date(a.updatedAt);
-    });
-
   const timelineForAllVersions = [];
 
   testPlanVersions.forEach(testPlanVersion => {

client/components/TestReview/index.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useMemo, useState } from 'react';
 import { useQuery } from '@apollo/client';
 import { TEST_REVIEW_PAGE_QUERY } from './queries';
 import { Container } from 'react-bootstrap';
@@ -11,6 +11,7 @@ import styled from '@emotion/styled';
 import { derivePhaseName } from '../../utils/aria';
 import { dates } from 'shared';
 import supportJson from '../../resources/support.json';
+import SortableIssuesTable from '../SortableIssuesTable';
 
 const Ul = styled.ul`
   li {
@@ -35,6 +36,12 @@ const TestReview = () => {
   });
   const [activeFilter, setActiveFilter] = useState('All ATs');
 
+  // GraphQL results are read only so they need to be cloned
+  // before passing to SortableIssuesTable
+  const issues = useMemo(() => {
+    return data ? [...data.testPlanVersion.testPlan.issues] : [];
+  }, [data]);
+
   if (loading) {
     return (
       <PageStatus
@@ -230,6 +237,7 @@ const TestReview = () => {
           }
         )}
       </ul>
+      <SortableIssuesTable issues={issues} />
       <h2>Tests</h2>
       <FilterButtonContainer>
         <FilterButtons

client/components/TestReview/queries.js

@@ -1,15 +1,25 @@
 import { gql } from '@apollo/client';
 import {
   AT_FIELDS,
-  TEST_PLAN_VERSION_FIELDS
+  TEST_PLAN_VERSION_FIELDS,
+  ISSUE_FIELDS
 } from '@components/common/fragments';
 
 export const TEST_REVIEW_PAGE_QUERY = gql`
   ${AT_FIELDS}
   ${TEST_PLAN_VERSION_FIELDS}
+  ${ISSUE_FIELDS('all')}
   query TestReviewPageQuery($testPlanVersionId: ID!) {
     testPlanVersion(id: $testPlanVersionId) {
       ...TestPlanVersionFields
+      testPlan {
+        issues {
+          ...IssueFieldsAll
+          at {
+            ...AtFields
+          }
+        }
+      }
       tests {
         id
         title

client/tests/e2e/snapshots/saved/_test-review_8.html

@@ -123,6 +123,43 @@ <h2>Supporting Documentation</h2>
               >
             </li>
           </ul>
+          <h2 id="github-issues">GitHub Issues (0 open, 0&nbsp;closed)</h2>
+          <ul
+            class="d-flex align-items-center my-3"
+            aria-label="Filter GitHub issues"
+            role="group">
+            <li aria-hidden="true">Filter</li>
+            <li>
+              <button
+                type="button"
+                data-test="filter-open"
+                aria-pressed="true"
+                class="css-14jv778 btn active btn-secondary">
+                Open
+              </button>
+            </li>
+            <li>
+              <button
+                type="button"
+                data-test="filter-closed"
+                aria-pressed="false"
+                class="css-14jv778 btn btn-secondary">
+                Closed
+              </button>
+            </li>
+            <li>
+              <button
+                type="button"
+                data-test="filter-all"
+                aria-pressed="false"
+                class="css-14jv778 btn btn-secondary">
+                All
+              </button>
+            </li>
+          </ul>
+          <div aria-labelledby="github-issues" class="css-gy9uo3">
+            No GitHub Issues
+          </div>
           <h2>Tests</h2>
           <div class="css-ifttx1">
             <ul