Update React

client/.babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    presets: ['@babel/preset-env', '@babel/preset-react'],
+    plugins: ['lodash'],
+    env: {
+        test: {
+            plugins: ['@babel/plugin-transform-runtime']
+        }
+    }
+};

client/.babelrc

@@ -1,10 +1,16 @@
 {
-    "presets": ["@babel/env", "@babel/preset-react"],
-    "plugins": ["lodash"],
-    "env": {
-        "test": {
-          "plugins":
-          ["@babel/plugin-transform-runtime"]
-        }
-      }
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "lodash"
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        "@babel/plugin-transform-runtime"
+      ]
+    }
+  }
 }

client/components/App/App.jsx

@@ -1,7 +1,6 @@
 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 { Route, Routes, Link, useLocation } from 'react-router-dom';
 import Container from 'react-bootstrap/Container';
 import Navbar from 'react-bootstrap/Navbar';
 import Nav from 'react-bootstrap/Nav';
@@ -90,7 +89,11 @@ const App = () => {
                                     as={Link}
                                     to="/test-queue"
                                     aria-current={
-                                        location.pathname === '/test-queue'
+                                        location.pathname === '/test-queue' ||
+                                        location.pathname.startsWith('/run') ||
+                                        location.pathname.startsWith(
+                                            '/test-plan-report'
+                                        )
                                     }
                                 >
                                     Test Queue
@@ -164,7 +167,17 @@ const App = () => {
                 </Navbar>
             </Container>
             <Container fluid>
-                <div>{renderRoutes(routes)}</div>
+                <Routes>
+                    {routes.map((route, i) => {
+                        return (
+                            <Route
+                                key={i}
+                                path={route.path}
+                                element={route.element}
+                            />
+                        );
+                    })}
+                </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, Navigate, useNavigate } 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 history = useNavigate();
 
     const { loading, data, error, refetch } = useQuery(
         CANDIDATE_REPORTS_QUERY,
@@ -246,7 +246,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" />;
 
     const testPlanReport = testPlanReports.find(
         each => each.testPlanVersion.id === testPlanVersionId

client/components/CandidateTests/index.jsx

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

client/components/ConfirmAuth/index.jsx

@@ -1,34 +1,25 @@
 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="/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" />;
+
+    return children;
 };
 
 ConfirmAuth.propTypes = {

client/components/Reports/Report.jsx

@@ -1,18 +1,25 @@
 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, useMatch } from 'react-router-dom';
 import SummarizeTestPlanVersion from './SummarizeTestPlanVersion';
 import SummarizeTestPlanReport from './SummarizeTestPlanReport';
+import NotFound from '../NotFound';
 import PageStatus from '../common/PageStatus';
 import { REPORT_PAGE_QUERY } from './queries';
 import './Reports.css';
 
 const Reports = () => {
-    const match = useRouteMatch('/report/:testPlanVersionId');
+    const parentMatch = useMatch('/report/:testPlanVersionId');
+    const childMatch = useMatch(
+        '/report/:testPlanVersionId/targets/:testPlanReportId'
+    );
 
     const { loading, data, error } = useQuery(REPORT_PAGE_QUERY, {
-        variables: { testPlanVersionId: match?.params?.testPlanVersionId },
+        variables: {
+            testPlanVersionId:
+                parentMatch?.params?.testPlanVersionId ||
+                childMatch?.params?.testPlanVersionId
+        },
         fetchPolicy: 'cache-and-network'
     });
 
@@ -38,51 +45,66 @@ const Reports = () => {
 
     if (!data) return null;
 
-    return (
-        <Switch>
-            <Route
-                exact
-                path="/report/:testPlanVersionId"
-                render={({ match: { params } }) => {
-                    const { testPlanVersionId } = params;
+    let testPlanVersionId;
+    let testPlanReports;
+    let testPlanReport;
+
+    if (parentMatch) {
+        const { testPlanVersionId: _testPlanVersionId } = parentMatch.params;
+        const _testPlanReports = data.testPlanReports.filter(
+            each => each.testPlanVersion.id === _testPlanVersionId
+        );
+
+        testPlanVersionId = _testPlanVersionId;
+        testPlanReports = _testPlanReports;
+    }
+
+    if (childMatch) {
+        const {
+            testPlanVersionId: _testPlanVersionId,
+            testPlanReportId
+        } = childMatch.params;
+        const _testPlanReport = data.testPlanReports.find(
+            each =>
+                each.testPlanVersion.id === _testPlanVersionId &&
+                each.id == testPlanReportId
+        );
 
-                    const testPlanReports = data.testPlanReports.filter(
-                        each => each.testPlanVersion.id === testPlanVersionId
-                    );
+        testPlanVersionId = _testPlanVersionId;
+        testPlanReport = _testPlanReport;
+    }
+
+    // For /report/:testPlanVersionId
+    if (parentMatch && !testPlanVersionId) return <Navigate to="/404" />;
 
-                    if (!testPlanReports.length) return <Redirect to="/404" />;
+    // For /report/:testPlanVersionId/targets/:testPlanReportId
+    if (childMatch && !testPlanReport) return <Navigate to="/404" />;
 
-                    return (
+    return (
+        <Routes>
+            {parentMatch && (
+                <Route
+                    path="/"
+                    element={
                         <SummarizeTestPlanVersion
                             testPlanVersion={testPlanReports[0].testPlanVersion}
                             testPlanReports={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 (
+                    }
+                />
+            )}
+            {childMatch && (
+                <Route
+                    path="/targets/:testPlanReportId"
+                    element={
                         <SummarizeTestPlanReport
                             testPlanReport={testPlanReport}
                         />
-                    );
-                }}
-            />
-            <Redirect to="/404" />
-        </Switch>
+                    }
+                />
+            )}
+            <Route path="*" element={<NotFound />} />
+        </Routes>
     );
 };
 

client/components/TestRun/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Helmet } from 'react-helmet';
-import { Link, useParams, useHistory } from 'react-router-dom';
+import { Link, useParams, useNavigate } from 'react-router-dom';
 import useRouterQuery from '../../hooks/useRouterQuery';
 import { useQuery, useMutation } from '@apollo/client';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -83,7 +83,7 @@ const createGitHubIssueWithTitleAndBody = ({
 
 const TestRun = () => {
     const params = useParams();
-    const history = useHistory();
+    const history = useNavigate();
     const routerQuery = useRouterQuery();
 
     // Detect UA information

client/components/common/AtAndBrowserDetailsModal/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Form, Alert } from 'react-bootstrap';
 import styled from '@emotion/styled';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -57,7 +57,7 @@ const AtAndBrowserDetailsModal = ({
     // Detect UA information
     const { uaBrowser, uaMajor, uaMinor, uaPatch } = useDetectUa();
 
-    const history = useHistory();
+    const history = useNavigate();
 
     const updatedAtVersionDropdownRef = useRef();
     const updatedBrowserVersionTextRef = useRef();

client/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 // Order matters for the following two imports
@@ -27,11 +27,12 @@ const client = new ApolloClient({
     })
 });
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
     <ApolloProvider client={client}>
         <BrowserRouter>
             <App />
         </BrowserRouter>
-    </ApolloProvider>,
-    document.getElementById('root')
+    </ApolloProvider>
 );

client/jest.setup.js

@@ -1,3 +1,5 @@
 const fetch = require('node-fetch');
+const ResizeObserver = require('resize-observer-polyfill');
 
 global.fetch = fetch;
+global.ResizeObserver = require('resize-observer-polyfill')