Revert "Upgrade react-router to v6 (#3261)"

This reverts commit 46bb4cd.

frontend/cypress/docker-compose.yml

@@ -61,7 +61,6 @@ services:
       REACT_APP_BACKEND_URL: http://localhost.simplereport.gov/api
       REACT_APP_OKTA_ENABLED: "true"
       REACT_APP_OKTA_URL: http://cypress:8088
-      REACT_APP_DISABLE_MAINTENANCE_BANNER: "true"
     volumes:
       - ../:/frontend/
       - ../../backend/src/main/resources/graphql:/backend/src/main/resources/graphql

frontend/package.json

@@ -20,7 +20,7 @@
     "@trussworks/react-uswds": "^2.6.0",
     "@types/google-libphonenumber": "^7.4.23",
     "@types/history": "^4.7.10",
-    "@types/react-router-dom": "^5.3.3",
+    "@types/react-router-dom": "^5.1.6",
     "@types/react-transition-group": "^4.4.4",
     "@types/testing-library__jest-dom": "^5.14.2",
     "apollo-upload-client": "^14.1.3",
@@ -37,7 +37,8 @@
     "react-i18next": "^11.8.15",
     "react-modal": "^3.13.1",
     "react-redux": "^7.2.6",
-    "react-router-dom": "^6.2.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.0",
     "react-toastify": "^6.1.0",
     "react-transition-group": "^4.4.2",

frontend/src/app/App.test.tsx

@@ -1,9 +1,4 @@
-import {
-  BrowserRouter as Router,
-  MemoryRouter,
-  Route,
-  Routes,
-} from "react-router-dom";
+import { BrowserRouter as Router, MemoryRouter, Route } from "react-router-dom";
 import { Provider } from "react-redux";
 import createMockStore, { MockStoreEnhanced } from "redux-mock-store";
 import { MockedProvider, MockedResponse } from "@apollo/client/testing";
@@ -204,9 +199,7 @@ const renderApp = (
       <Provider store={newStore}>
         <MockedProvider mocks={queryMocks} addTypename={false}>
           <Router>
-            <Routes>
-              <Route path="/*" element={<App />} />
-            </Routes>
+            <Route path="/" component={App} />
           </Router>
         </MockedProvider>
       </Provider>

frontend/src/app/App.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { gql, useQuery } from "@apollo/client";
 import { useDispatch, connect } from "react-redux";
-import { Navigate, Route, Routes, useLocation } from "react-router-dom";
+import { Redirect, Route, Switch } from "react-router-dom";
 import { ApplicationInsights } from "@microsoft/applicationinsights-web";
 
 import ProtectedRoute from "./commonComponents/ProtectedRoute";
@@ -50,14 +50,13 @@ export const WHOAMI_QUERY = gql`
 const App = () => {
   const appInsights = getAppInsights();
   const dispatch = useDispatch();
-  const location = useLocation();
 
   // Check if the user is logged in, if not redirect to Okta
   if (process.env.REACT_APP_OKTA_ENABLED === "true") {
     const accessToken = localStorage.getItem("access_token");
     if (!accessToken) {
       // If Okta login has been attempted and returned to SR with an error, don't redirect back to Okta
-      const params = new URLSearchParams(location.hash.slice(1));
+      const params = new URLSearchParams(window.location.hash.slice(1));
       if (params.get("error")) {
         throw new Error(
           params.get("error_description") || "Unknown Okta error"
@@ -119,125 +118,100 @@ const App = () => {
   let homepagePath: string;
 
   if (isSupportAdmin) {
-    homepagePath = "admin";
+    homepagePath = "/admin";
   } else if (isOrgAdmin) {
-    homepagePath = "dashboard";
+    homepagePath = "/dashboard";
   } else {
-    homepagePath = "queue";
+    homepagePath = "/queue";
   }
 
-  const canViewResults = appPermissions.results.canView;
-  const canViewPeople = appPermissions.people.canView;
-  const canEditPeople = appPermissions.people.canEdit;
-  const canViewSettings = appPermissions.settings.canView;
-
   return (
     <>
       <VersionEnforcer />
-      {process.env.REACT_APP_DISABLE_MAINTENANCE_BANNER === "true" ? null : (
-        <MaintenanceBanner />
-      )}
+      <MaintenanceBanner />
       {process.env.REACT_APP_IS_TRAINING_SITE === "true" && (
         <TrainingNotification />
       )}
       <WithFacility>
         <Page>
           <Header />
-          <Routes>
+          <Switch>
             <Route
-              path="/"
-              element={
-                <Navigate
-                  to={{ pathname: homepagePath, search: location.search }}
-                />
-              }
+              path="/queue"
+              render={() => {
+                return <TestQueueContainer />;
+              }}
             />
-            <Route path="queue" element={<TestQueueContainer />} />
             <Route
-              path="results/:pageNumber"
-              element={
-                <ProtectedRoute
-                  requiredPermissions={canViewResults}
-                  userPermissions={data.whoami.permissions}
-                  element={<TestResultsList />}
+              path="/"
+              exact
+              render={({ location }) => (
+                <Redirect
+                  to={{
+                    ...location,
+                    pathname: homepagePath,
+                  }}
                 />
-              }
+              )}
             />
-            <Route
-              path="results"
-              element={
-                <ProtectedRoute
-                  requiredPermissions={canViewResults}
-                  userPermissions={data.whoami.permissions}
-                  element={<CleanTestResultsList />}
-                />
-              }
+            <ProtectedRoute
+              path="/results/:page"
+              render={({ match }: any) => {
+                return <TestResultsList pageNumber={match.params.page} />;
+              }}
+              requiredPermissions={appPermissions.results.canView}
+              userPermissions={data.whoami.permissions}
             />
-            <Route
-              path="patients/:pageNumber"
-              element={
-                <ProtectedRoute
-                  requiredPermissions={canViewPeople}
-                  userPermissions={data.whoami.permissions}
-                  element={<ManagePatientsContainer />}
-                />
-              }
+            <ProtectedRoute
+              path="/results/"
+              render={() => <CleanTestResultsList />}
+              requiredPermissions={appPermissions.results.canView}
+              userPermissions={data.whoami.permissions}
             />
-            <Route
-              path="patients"
-              element={
-                <ProtectedRoute
-                  requiredPermissions={canViewPeople}
-                  userPermissions={data.whoami.permissions}
-                  element={<ManagePatientsContainer />}
-                />
-              }
+            <ProtectedRoute
+              path={`/patients/:page?`}
+              render={({ match }: any) => {
+                return <ManagePatientsContainer page={match.params.page} />;
+              }}
+              requiredPermissions={appPermissions.people.canView}
+              userPermissions={data.whoami.permissions}
             />
-            <Route
-              path="patient/:patientId"
-              element={
-                <ProtectedRoute
-                  requiredPermissions={canEditPeople}
-                  userPermissions={data.whoami.permissions}
-                  element={<EditPatientContainer />}
-                />
-              }
+            <ProtectedRoute
+              path={`/patient/:patientId`}
+              render={({ match }: any) => (
+                <EditPatientContainer patientId={match.params.patientId} />
+              )}
+              requiredPermissions={appPermissions.people.canEdit}
+              userPermissions={data.whoami.permissions}
             />
-            <Route
-              path="add-patient"
-              element={
-                <ProtectedRoute
-                  requiredPermissions={canEditPeople}
-                  userPermissions={data.whoami.permissions}
-                  element={<AddPatient />}
-                />
-              }
+            <ProtectedRoute
+              path={`/add-patient/`}
+              render={() => <AddPatient />}
+              requiredPermissions={appPermissions.people.canEdit}
+              userPermissions={data.whoami.permissions}
             />
-            <Route
-              path="settings/*"
-              element={
-                <ProtectedRoute
-                  requiredPermissions={canViewSettings}
-                  userPermissions={data.whoami.permissions}
-                  element={<Settings />}
-                />
-              }
+            <ProtectedRoute
+              path="/settings"
+              component={Settings}
+              requiredPermissions={appPermissions.settings.canView}
+              userPermissions={data.whoami.permissions}
             />
-            <Route
-              path="dashboard"
-              element={
-                <ProtectedRoute
-                  requiredPermissions={canViewSettings}
-                  userPermissions={data.whoami.permissions}
-                  element={<Analytics />}
-                />
-              }
+            <ProtectedRoute
+              path="/dashboard"
+              component={Analytics}
+              requiredPermissions={appPermissions.settings.canView}
+              userPermissions={data.whoami.permissions}
             />
             <Route
-              path="admin/*"
-              element={<SupportAdminRoutes isAdmin={isSupportAdmin} />}
+              path={"/admin"}
+              render={({ match }) => (
+                <SupportAdminRoutes
+                  match={match}
+                  isAdmin={data.whoami.isAdmin}
+                />
+              )}
             />
-          </Routes>
+          </Switch>
         </Page>
       </WithFacility>
     </>

frontend/src/app/HealthChecks.tsx

@@ -1,13 +1,14 @@
-import { Route, Routes } from "react-router-dom";
+import React from "react";
+import { Route } from "react-router-dom";
 
-const HealthChecks = () => (
-  <Routes>
-    <Route path="ping" element={<div>pong</div>} />
+const HealthChecks: React.FC<{}> = ({ match }: any) => (
+  <>
+    <Route path={match.url + "/ping"} render={() => <div>pong</div>} />
     <Route
-      path="commit"
-      element={<div>{process.env.REACT_APP_CURRENT_COMMIT}</div>}
+      path={match.url + "/commit"}
+      render={() => <div>{process.env.REACT_APP_CURRENT_COMMIT}</div>}
     />
-  </Routes>
+  </>
 );
 
 export default HealthChecks;

frontend/src/app/Settings/Facility/Components/OrderingProviderList.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, screen, within } from "@testing-library/react";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 
 import OrderingProviderList from "./OrderingProviderList";
 

frontend/src/app/Settings/Facility/FacilityForm.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from "react";
+import { Prompt } from "react-router-dom";
 
 import iconSprite from "../../../../node_modules/uswds/dist/img/sprite.svg";
 import Button from "../../commonComponents/Button/Button";
@@ -18,7 +19,6 @@ import {
   AddressConfirmationModal,
   AddressSuggestionConfig,
 } from "../../commonComponents/AddressConfirmationModal";
-import Prompt from "../../utils/Prompt";
 
 import ManageDevices from "./Components/ManageDevices";
 import OrderingProviderSettings from "./Components/OrderingProvider";

frontend/src/app/Settings/Facility/FacilityFormContainer.test.tsx

@@ -6,7 +6,7 @@ import {
 import userEvent from "@testing-library/user-event";
 import { MockedProvider } from "@apollo/client/testing";
 import { Provider } from "react-redux";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import configureStore from "redux-mock-store";
 
 import { getAppInsights } from "../../TelemetryService";
@@ -166,13 +166,10 @@ jest.mock("./FacilityForm", () => {
     );
   };
 });
-jest.mock("react-router-dom", () => {
-  const original = jest.requireActual("react-router-dom");
-  return {
-    ...original,
-    Navigate: () => <p>Redirected</p>,
-  };
-});
+jest.mock("react-router-dom", () => ({
+  Redirect: () => <p>Redirected</p>,
+}));
+
 jest.mock("../../TelemetryService", () => ({
   getAppInsights: jest.fn(),
 }));

frontend/src/app/Settings/Facility/FacilityFormContainer.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { gql, useQuery, useMutation } from "@apollo/client";
-import { Navigate } from "react-router-dom";
+import { Redirect } from "react-router-dom";
 import { useDispatch } from "react-redux";
 
 import { updateFacility } from "../../store";
@@ -191,7 +191,7 @@ const FacilityFormContainer: any = (props: Props) => {
     if (props.newOrg) {
       window.location.pathname = process.env.PUBLIC_URL || "";
     }
-    return <Navigate to="/settings/facilities" />;
+    return <Redirect push to={{ pathname: "/settings/facilities" }} />;
   }
 
   const saveFacility = async (facility: Facility) => {

frontend/src/app/Settings/Facility/ManageFacilitiesContainer.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, act } from "@testing-library/react";
 import { MockedProvider } from "@apollo/client/testing";
 import { Provider } from "react-redux";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import configureStore from "redux-mock-store";
 
 import { GetManagedFacilitiesDocument } from "../../../generated/graphql";

frontend/src/app/Settings/FacilityForm.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { ToastContainer } from "react-toastify";
 
 import * as clia from "../utils/clia";