Updating react deps

.github/workflows/runtest.yml

@@ -44,4 +44,4 @@ jobs:
       - name: lighthouseci
         run: |
           npm install -g @lhci/[email protected]
-          yarn workspace client lighthouse
+          yarn workspace client lighthouse

client/components/App/App.jsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { useQuery } from '@apollo/client';
-import { renderRoutes } from 'react-router-config';
 import { Link, useLocation } from 'react-router-dom';
 import Container from 'react-bootstrap/Container';
 import Navbar from 'react-bootstrap/Navbar';
@@ -163,9 +162,7 @@ const App = () => {
                     </Navbar.Collapse>
                 </Navbar>
             </Container>
-            <Container fluid>
-                <div>{renderRoutes(routes)}</div>
-            </Container>
+            <Container fluid>{routes()}</Container>
         </ScrollFixer>
     );
 };

client/components/CandidateTests/CandidateTestPlanRun/index.jsx

@@ -15,7 +15,7 @@ import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Button from 'react-bootstrap/Button';
-import { useParams, Redirect, useHistory } from 'react-router-dom';
+import { useParams, useNavigate, Navigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import './CandidateTestPlanRun.css';
 import '../../TestRun/TestRun.css';
@@ -45,7 +45,7 @@ function useSize(target) {
 
 const CandidateTestPlanRun = () => {
     const { atId, testPlanVersionId } = useParams();
-    const history = useHistory();
+    const navigate = useNavigate();
 
     const { loading, data, error, refetch } = useQuery(
         CANDIDATE_REPORTS_QUERY,
@@ -254,7 +254,7 @@ const CandidateTestPlanRun = () => {
     const at = atMap[atId];
 
     const testPlanReports = data.testPlanReports;
-    if (testPlanReports.length === 0) return <Redirect to="/404" />;
+    if (testPlanReports.length === 0) return <Navigate to="/404" replace />;
 
     const testPlanReport = testPlanReports.find(
         each => each.testPlanVersion.id === testPlanVersionId
@@ -699,7 +699,7 @@ const CandidateTestPlanRun = () => {
                     show={true}
                     handleAction={async () => {
                         setThankYouModalShowing(false);
-                        history.push('/candidate-tests');
+                        navigate('/candidate-tests');
                     }}
                     githubUrl={generateGithubUrl(
                         false,

client/components/CandidateTests/index.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useQuery } from '@apollo/client';
-import { Redirect, Route, Switch } from 'react-router';
 import PageStatus from '../common/PageStatus';
 import TestPlans from './TestPlans';
 import { CANDIDATE_TESTS_PAGE_QUERY } from './queries';
@@ -36,19 +35,10 @@ const CandidateTests = () => {
     if (!data) return null;
 
     return (
-        <Switch>
-            <Route
-                exact
-                path="/candidate-tests"
-                render={() => (
-                    <TestPlans
-                        testPlanReports={data.testPlanReports}
-                        triggerPageUpdate={refetch}
-                    />
-                )}
-            />
-            <Redirect to="/404" />
-        </Switch>
+        <TestPlans
+            testPlanReports={data.testPlanReports}
+            triggerPageUpdate={refetch}
+        />
     );
 };
 

client/components/ConfirmAuth/index.jsx

@@ -1,34 +1,27 @@
 import React from 'react';
-import { Route, Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { useQuery } from '@apollo/client';
 import { ME_QUERY } from '../App/queries';
 import { evaluateAuth } from '../../utils/evaluateAuth';
 
-const ConfirmAuth = ({ children, requiredPermission, ...rest }) => {
+const ConfirmAuth = ({ children, requiredPermission }) => {
     const { data } = useQuery(ME_QUERY);
 
     const auth = evaluateAuth(data && data.me ? data.me : {});
     const { roles, username, isAdmin, isSignedIn } = auth;
 
-    if (!username) return <Redirect to={{ pathname: '/invalid-request' }} />;
+    if (!username) return <Navigate to={{ pathname: '/invalid-request' }} />;
 
     // If you are an admin, you can access all other role actions by default
     const authConfirmed =
         isSignedIn && (roles.includes(requiredPermission) || isAdmin);
 
-    return (
-        <Route
-            {...rest}
-            render={() => {
-                return authConfirmed ? (
-                    children
-                ) : (
-                    <Redirect to={{ pathname: '/404' }} />
-                );
-            }}
-        />
-    );
+    if (!authConfirmed) {
+        return <Navigate to="/404" replace />;
+    }
+
+    return children;
 };
 
 ConfirmAuth.propTypes = {

client/components/Reports/Report.jsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import { useQuery } from '@apollo/client';
-import { Route, Switch } from 'react-router';
-import { Redirect, useRouteMatch } from 'react-router-dom';
+import { Route, Routes, Navigate } from 'react-router';
 import SummarizeTestPlanVersion from './SummarizeTestPlanVersion';
 import SummarizeTestPlanReport from './SummarizeTestPlanReport';
 import PageStatus from '../common/PageStatus';
 import { REPORT_PAGE_QUERY } from './queries';
 import './Reports.css';
+import { useParams } from 'react-router-dom';
 
-const Reports = () => {
-    const match = useRouteMatch('/report/:testPlanVersionId');
+const Report = () => {
+    const { testPlanVersionId } = useParams();
 
     let testPlanVersionIds = [];
-    let testPlanVersionId = match?.params?.testPlanVersionId;
+
     if (testPlanVersionId.includes(','))
         testPlanVersionIds = testPlanVersionId.split(',');
 
@@ -45,6 +45,12 @@ const Reports = () => {
 
     if (!data) return null;
 
+    const testPlanReports = data.testPlanReports.filter(
+        each =>
+            each.testPlanVersion.id === testPlanVersionId ||
+            testPlanVersionIds.includes(each.testPlanVersion.id)
+    );
+
     const combineArray = testPlanReports => {
         let testPlanTargetsById = {};
         testPlanReports.forEach(testPlanReport => {
@@ -76,58 +82,32 @@ const Reports = () => {
         });
     };
 
+    if (!testPlanReports || testPlanReports.length < 1) {
+        return <Navigate to="/404" replace />;
+    }
+
     return (
-        <Switch>
+        <Routes>
             <Route
-                exact
-                path="/report/:testPlanVersionId"
-                render={({ match: { params } }) => {
-                    const { testPlanVersionId } = params;
-
-                    let testPlanVersionIds = [];
-                    if (testPlanVersionId.includes(','))
-                        testPlanVersionIds = testPlanVersionId.split(',');
-
-                    const testPlanReports = data.testPlanReports.filter(
-                        each =>
-                            each.testPlanVersion.id === testPlanVersionId ||
-                            testPlanVersionIds.includes(each.testPlanVersion.id)
-                    );
-
-                    if (!testPlanReports.length) return <Redirect to="/404" />;
-
-                    return (
-                        <SummarizeTestPlanVersion
-                            testPlanVersion={testPlanReports[0].testPlanVersion}
-                            testPlanReports={combineArray(testPlanReports)}
-                        />
-                    );
-                }}
+                index
+                element={
+                    <SummarizeTestPlanVersion
+                        testPlanVersion={testPlanReports[0].testPlanVersion}
+                        testPlanReports={combineArray(testPlanReports)}
+                    />
+                }
             />
             <Route
-                exact
-                path="/report/:testPlanVersionId/targets/:testPlanReportId"
-                render={({ match: { params } }) => {
-                    const { testPlanVersionId, testPlanReportId } = params;
-
-                    const testPlanReport = data.testPlanReports.find(
-                        each =>
-                            each.testPlanVersion.id === testPlanVersionId &&
-                            each.id == testPlanReportId
-                    );
-
-                    if (!testPlanReport) return <Redirect to="/404" />;
-
-                    return (
-                        <SummarizeTestPlanReport
-                            testPlanReport={testPlanReport}
-                        />
-                    );
-                }}
+                path="targets/:testPlanReportId"
+                element={
+                    <SummarizeTestPlanReport
+                        testPlanReports={testPlanReports}
+                    />
+                }
             />
-            <Redirect to="/404" />
-        </Switch>
+            <Route path="*" element={<Navigate to="/404" replace />} />
+        </Routes>
     );
 };
 
-export default Reports;
+export default Report;

client/components/Reports/SummarizeTestPlanReport.jsx

@@ -16,6 +16,8 @@ import { convertDateToString } from '../../utils/formatter';
 import DisclaimerInfo from '../DisclaimerInfo';
 import TestPlanResultsTable from './TestPlanResultsTable';
 import DisclosureComponent from '../common/DisclosureComponent';
+import { Navigate } from 'react-router';
+import { useParams } from 'react-router-dom';
 
 const getTestersRunHistory = (
     testPlanReport,
@@ -74,7 +76,15 @@ const getTestersRunHistory = (
     );
 };
 
-const SummarizeTestPlanReport = ({ testPlanReport }) => {
+const SummarizeTestPlanReport = ({ testPlanReports }) => {
+    const { testPlanReportId } = useParams();
+
+    const testPlanReport = testPlanReports.find(
+        each => each.id == testPlanReportId
+    );
+
+    if (!testPlanReport) return <Navigate to="/404" />;
+
     const { testPlanVersion, at, browser } = testPlanReport;
 
     // Construct testPlanTarget
@@ -226,60 +236,63 @@ const SummarizeTestPlanReport = ({ testPlanReport }) => {
 };
 
 SummarizeTestPlanReport.propTypes = {
-    testPlanReport: PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        status: PropTypes.string.isRequired,
-        testPlanVersion: PropTypes.object.isRequired,
-        runnableTests: PropTypes.arrayOf(PropTypes.object.isRequired)
-            .isRequired,
-        at: PropTypes.shape({
+    testPlanReports: PropTypes.arrayOf(
+        PropTypes.shape({
             id: PropTypes.string.isRequired,
-            name: PropTypes.string.isRequired
-        }).isRequired,
-        browser: PropTypes.shape({
-            id: PropTypes.string.isRequired,
-            name: PropTypes.string.isRequired
-        }).isRequired,
-        finalizedTestResults: PropTypes.arrayOf(
-            PropTypes.shape({
+            status: PropTypes.string.isRequired,
+            testPlanVersion: PropTypes.object.isRequired,
+            runnableTests: PropTypes.arrayOf(PropTypes.object.isRequired)
+                .isRequired,
+            at: PropTypes.shape({
+                id: PropTypes.string.isRequired,
+                name: PropTypes.string.isRequired
+            }).isRequired,
+            browser: PropTypes.shape({
                 id: PropTypes.string.isRequired,
-                test: PropTypes.shape({
-                    title: PropTypes.string.isRequired,
-                    renderedUrl: PropTypes.string.isRequired
-                }).isRequired,
-                scenarioResults: PropTypes.arrayOf(
-                    PropTypes.shape({
-                        id: PropTypes.string.isRequired,
-                        output: PropTypes.string.isRequired,
-                        assertionResults: PropTypes.arrayOf(
-                            PropTypes.shape({
-                                id: PropTypes.string.isRequired,
-                                passed: PropTypes.bool.isRequired,
-                                failedReason: PropTypes.string,
-                                assertion: PropTypes.shape({
-                                    text: PropTypes.string.isRequired
+                name: PropTypes.string.isRequired
+            }).isRequired,
+            finalizedTestResults: PropTypes.arrayOf(
+                PropTypes.shape({
+                    id: PropTypes.string.isRequired,
+                    test: PropTypes.shape({
+                        title: PropTypes.string.isRequired,
+                        renderedUrl: PropTypes.string.isRequired
+                    }).isRequired,
+                    scenarioResults: PropTypes.arrayOf(
+                        PropTypes.shape({
+                            id: PropTypes.string.isRequired,
+                            output: PropTypes.string.isRequired,
+                            assertionResults: PropTypes.arrayOf(
+                                PropTypes.shape({
+                                    id: PropTypes.string.isRequired,
+                                    passed: PropTypes.bool.isRequired,
+                                    failedReason: PropTypes.string,
+                                    assertion: PropTypes.shape({
+                                        text: PropTypes.string.isRequired
+                                    }).isRequired
+                                }).isRequired
+                            ).isRequired,
+                            unexpectedBehaviors: PropTypes.arrayOf(
+                                PropTypes.shape({
+                                    id: PropTypes.string.isRequired,
+                                    text: PropTypes.string.isRequired,
+                                    otherUnexpectedBehaviorText:
+                                        PropTypes.string
                                 }).isRequired
-                            }).isRequired
-                        ).isRequired,
-                        unexpectedBehaviors: PropTypes.arrayOf(
-                            PropTypes.shape({
-                                id: PropTypes.string.isRequired,
-                                text: PropTypes.string.isRequired,
-                                otherUnexpectedBehaviorText: PropTypes.string
-                            }).isRequired
-                        ).isRequired
-                    }).isRequired
-                ).isRequired
-            }).isRequired
-        ).isRequired,
-        draftTestPlanRuns: PropTypes.arrayOf(
-            PropTypes.shape({
-                tester: PropTypes.shape({
-                    username: PropTypes.string.isRequired
+                            ).isRequired
+                        }).isRequired
+                    ).isRequired
+                }).isRequired
+            ).isRequired,
+            draftTestPlanRuns: PropTypes.arrayOf(
+                PropTypes.shape({
+                    tester: PropTypes.shape({
+                        username: PropTypes.string.isRequired
+                    })
                 })
-            })
-        )
-    }).isRequired
+            )
+        }).isRequired
+    )
 };
 
 export default SummarizeTestPlanReport;