Revert "Update React"

This reverts commit d09df2f.
w3c · Feb 9, 2023 · 944130e · 944130e
1 parent 9a916e6
commit 944130e
Show file tree

Hide file tree

Showing 14 changed files with 340 additions and 272 deletions.
diff --git a/client/.babel.config.js b/client/.babel.config.js
diff --git a/client/.babelrc b/client/.babelrc
@@ -1,16 +1,10 @@
 {
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    "lodash"
-  ],
-  "env": {
-    "test": {
-      "plugins": [
-        "@babel/plugin-transform-runtime"
-      ]
-    }
-  }
+    "presets": ["@babel/env", "@babel/preset-react"],
+    "plugins": ["lodash"],
+    "env": {
+        "test": {
+          "plugins":
+          ["@babel/plugin-transform-runtime"]
+        }
+      }
 }
diff --git a/client/components/App/App.jsx b/client/components/App/App.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useQuery } from '@apollo/client';
-import { Route, Routes, Link, useLocation } from 'react-router-dom';
+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';
 import Nav from 'react-bootstrap/Nav';
@@ -89,11 +90,7 @@ const App = () => {
                                     as={Link}
                                     to="/test-queue"
                                     aria-current={
-                                        location.pathname === '/test-queue' ||
-                                        location.pathname.startsWith('/run') ||
-                                        location.pathname.startsWith(
-                                            '/test-plan-report'
-                                        )
+                                        location.pathname === '/test-queue'
                                     }
                                 >
                                     Test Queue
@@ -167,17 +164,7 @@ const App = () => {
                 </Navbar>
             </Container>
             <Container fluid>
-                <Routes>
-                    {routes.map((route, i) => {
-                        return (
-                            <Route
-                                key={i}
-                                path={route.path}
-                                element={route.element}
-                            />
-                        );
-                    })}
-                </Routes>
+                <div>{renderRoutes(routes)}</div>
             </Container>
         </ScrollFixer>
     );

diff --git a/client/components/CandidateTests/CandidateTestPlanRun/index.jsx b/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, Navigate, useNavigate } from 'react-router-dom';
+import { useParams, Redirect, useHistory } 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 = useNavigate();
+    const history = useHistory();
 
     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 <Navigate to="/404" />;
+    if (testPlanReports.length === 0) return <Redirect to="/404" />;
 
     const testPlanReport = testPlanReports.find(
         each => each.testPlanVersion.id === testPlanVersionId

diff --git a/client/components/CandidateTests/index.jsx b/client/components/CandidateTests/index.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import { useQuery } from '@apollo/client';
-import { Route, Routes } from 'react-router-dom';
+import { Redirect, Route, Switch } from 'react-router';
 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(
@@ -37,18 +36,19 @@ const CandidateTests = () => {
     if (!data) return null;
 
     return (
-        <Routes>
+        <Switch>
             <Route
-                path="/"
-                element={
+                exact
+                path="/candidate-tests"
+                render={() => (
                     <TestPlans
                         testPlanReports={data.testPlanReports}
                         triggerPageUpdate={refetch}
                     />
-                }
+                )}
             />
-            <Route path="*" element={<NotFound />} />
-        </Routes>
+            <Redirect to="/404" />
+        </Switch>
     );
 };
 

diff --git a/client/components/ConfirmAuth/index.jsx b/client/components/ConfirmAuth/index.jsx
@@ -1,25 +1,34 @@
 import React from 'react';
-import { Navigate } from 'react-router-dom';
+import { Route, Redirect } 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 }) => {
+const ConfirmAuth = ({ children, requiredPermission, ...rest }) => {
     const { data } = useQuery(ME_QUERY);
 
     const auth = evaluateAuth(data && data.me ? data.me : {});
     const { roles, username, isAdmin, isSignedIn } = auth;
 
-    if (!username) return <Navigate to="/invalid-request" />;
+    if (!username) return <Redirect 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);
 
-    if (!authConfirmed) return <Navigate to="/404" />;
-
-    return children;
+    return (
+        <Route
+            {...rest}
+            render={() => {
+                return authConfirmed ? (
+                    children
+                ) : (
+                    <Redirect to={{ pathname: '/404' }} />
+                );
+            }}
+        />
+    );
 };
 
 ConfirmAuth.propTypes = {

diff --git a/client/components/TestRun/index.jsx b/client/components/TestRun/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Helmet } from 'react-helmet';
-import { Link, useParams, useNavigate } from 'react-router-dom';
+import { Link, useParams, useHistory } 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 = useNavigate();
+    const history = useHistory();
     const routerQuery = useRouterQuery();
 
     // Detect UA information

diff --git a/client/components/common/AtAndBrowserDetailsModal/index.jsx b/client/components/common/AtAndBrowserDetailsModal/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useNavigate } from 'react-router-dom';
+import { useHistory } 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 = useNavigate();
+    const history = useHistory();
 
     const updatedAtVersionDropdownRef = useRef();
     const updatedBrowserVersionTextRef = useRef();

diff --git a/client/index.js b/client/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 // Order matters for the following two imports
@@ -27,12 +27,11 @@ const client = new ApolloClient({
     })
 });
 
-const container = document.getElementById('root');
-const root = createRoot(container);
-root.render(
+ReactDOM.render(
     <ApolloProvider client={client}>
         <BrowserRouter>
             <App />
         </BrowserRouter>
-    </ApolloProvider>
+    </ApolloProvider>,
+    document.getElementById('root')
 );
diff --git a/client/package.json b/client/package.json
@@ -40,14 +40,15 @@
     "object-hash": "^3.0.0",
     "octicons-react": "^1.0.4",
     "prop-types": "^15.7.2",
-    "react": "^18.2.0",
+    "react": "^16.14.0",
     "react-bootstrap": "^2.7.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^16.14.0",
     "react-helmet": "^6.0.0",
     "react-id-generator": "^3.0.0",
     "react-responsive": "^9.0.0-beta.10",
-    "react-router-bootstrap": "^0.26.2",
-    "react-router-dom": "^6.6.1",
+    "react-router-bootstrap": "^0.25.0",
+    "react-router-config": "^5.1.1",
+    "react-router-dom": "^5.1.2",
     "sass": "^1.57.1",
     "turndown": "^7.1.1",
     "ua-parser-js": "^1.0.2"
@@ -68,8 +69,8 @@
     "@storybook/react": "^6.5.10",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.1.9",
     "babel-jest": "^29.3.1",
     "babel-loader": "^9.1.2",
     "babel-plugin-lodash": "^3.3.4",