Upgrade react-router to v6 (#3261)

* Upgrade react-router to v6

* Fix tests

* Code smells

* Fix various TypeScript errors

* Add missing useEffect dependency

* Fix QueueItem storybook story

* Undo stupid change where I confused path params with URL search params

* Forgot a few wildcards

* Add test for Prompt

* Fix <Navigate> to props in AccountCreationApp

* Make all navigation relative

* Fix tests

* Use absolute paths in places where it makes more sense

* A few navigation bugfixes

* Code smells

* Add /reload-app path for reloading whoami query for TenantDataAccess

* A little more test coverage for <Prompt>

* DRY up App component

* Apply style to active-nav-item class instead of using style prop

* Revert App changes

frontend/cypress/docker-compose.yml

@@ -61,6 +61,7 @@ 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.1.6",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.4",
     "@types/testing-library__jest-dom": "^5.14.2",
     "apollo-upload-client": "^14.1.3",
@@ -37,8 +37,7 @@
     "react-i18next": "^11.8.15",
     "react-modal": "^3.13.1",
     "react-redux": "^7.2.6",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "^5.0.0",
     "react-toastify": "^6.1.0",
     "react-transition-group": "^4.4.2",

frontend/src/app/App.test.tsx

@@ -1,4 +1,9 @@
-import { BrowserRouter as Router, MemoryRouter, Route } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  MemoryRouter,
+  Route,
+  Routes,
+} from "react-router-dom";
 import { Provider } from "react-redux";
 import createMockStore, { MockStoreEnhanced } from "redux-mock-store";
 import { MockedProvider, MockedResponse } from "@apollo/client/testing";
@@ -199,7 +204,9 @@ const renderApp = (
       <Provider store={newStore}>
         <MockedProvider mocks={queryMocks} addTypename={false}>
           <Router>
-            <Route path="/" component={App} />
+            <Routes>
+              <Route path="/*" element={<App />} />
+            </Routes>
           </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 { Redirect, Route, Switch } from "react-router-dom";
+import { Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { ApplicationInsights } from "@microsoft/applicationinsights-web";
 
 import ProtectedRoute from "./commonComponents/ProtectedRoute";
@@ -50,13 +50,14 @@ 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(window.location.hash.slice(1));
+      const params = new URLSearchParams(location.hash.slice(1));
       if (params.get("error")) {
         throw new Error(
           params.get("error_description") || "Unknown Okta error"
@@ -118,100 +119,125 @@ 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 />
-      <MaintenanceBanner />
+      {process.env.REACT_APP_DISABLE_MAINTENANCE_BANNER === "true" ? null : (
+        <MaintenanceBanner />
+      )}
       {process.env.REACT_APP_IS_TRAINING_SITE === "true" && (
         <TrainingNotification />
       )}
       <WithFacility>
         <Page>
           <Header />
-          <Switch>
-            <Route
-              path="/queue"
-              render={() => {
-                return <TestQueueContainer />;
-              }}
-            />
+          <Routes>
             <Route
               path="/"
-              exact
-              render={({ location }) => (
-                <Redirect
-                  to={{
-                    ...location,
-                    pathname: homepagePath,
-                  }}
+              element={
+                <Navigate
+                  to={{ pathname: homepagePath, search: location.search }}
                 />
-              )}
+              }
             />
-            <ProtectedRoute
-              path="/results/:page"
-              render={({ match }: any) => {
-                return <TestResultsList pageNumber={match.params.page} />;
-              }}
-              requiredPermissions={appPermissions.results.canView}
-              userPermissions={data.whoami.permissions}
+            <Route path="queue" element={<TestQueueContainer />} />
+            <Route
+              path="results/:pageNumber"
+              element={
+                <ProtectedRoute
+                  requiredPermissions={canViewResults}
+                  userPermissions={data.whoami.permissions}
+                  element={<TestResultsList />}
+                />
+              }
             />
-            <ProtectedRoute
-              path="/results/"
-              render={() => <CleanTestResultsList />}
-              requiredPermissions={appPermissions.results.canView}
-              userPermissions={data.whoami.permissions}
+            <Route
+              path="results"
+              element={
+                <ProtectedRoute
+                  requiredPermissions={canViewResults}
+                  userPermissions={data.whoami.permissions}
+                  element={<CleanTestResultsList />}
+                />
+              }
             />
-            <ProtectedRoute
-              path={`/patients/:page?`}
-              render={({ match }: any) => {
-                return <ManagePatientsContainer page={match.params.page} />;
-              }}
-              requiredPermissions={appPermissions.people.canView}
-              userPermissions={data.whoami.permissions}
+            <Route
+              path="patients/:pageNumber"
+              element={
+                <ProtectedRoute
+                  requiredPermissions={canViewPeople}
+                  userPermissions={data.whoami.permissions}
+                  element={<ManagePatientsContainer />}
+                />
+              }
             />
-            <ProtectedRoute
-              path={`/patient/:patientId`}
-              render={({ match }: any) => (
-                <EditPatientContainer patientId={match.params.patientId} />
-              )}
-              requiredPermissions={appPermissions.people.canEdit}
-              userPermissions={data.whoami.permissions}
+            <Route
+              path="patients"
+              element={
+                <ProtectedRoute
+                  requiredPermissions={canViewPeople}
+                  userPermissions={data.whoami.permissions}
+                  element={<ManagePatientsContainer />}
+                />
+              }
             />
-            <ProtectedRoute
-              path={`/add-patient/`}
-              render={() => <AddPatient />}
-              requiredPermissions={appPermissions.people.canEdit}
-              userPermissions={data.whoami.permissions}
+            <Route
+              path="patient/:patientId"
+              element={
+                <ProtectedRoute
+                  requiredPermissions={canEditPeople}
+                  userPermissions={data.whoami.permissions}
+                  element={<EditPatientContainer />}
+                />
+              }
             />
-            <ProtectedRoute
-              path="/settings"
-              component={Settings}
-              requiredPermissions={appPermissions.settings.canView}
-              userPermissions={data.whoami.permissions}
+            <Route
+              path="add-patient"
+              element={
+                <ProtectedRoute
+                  requiredPermissions={canEditPeople}
+                  userPermissions={data.whoami.permissions}
+                  element={<AddPatient />}
+                />
+              }
             />
-            <ProtectedRoute
-              path="/dashboard"
-              component={Analytics}
-              requiredPermissions={appPermissions.settings.canView}
-              userPermissions={data.whoami.permissions}
+            <Route
+              path="settings/*"
+              element={
+                <ProtectedRoute
+                  requiredPermissions={canViewSettings}
+                  userPermissions={data.whoami.permissions}
+                  element={<Settings />}
+                />
+              }
             />
             <Route
-              path={"/admin"}
-              render={({ match }) => (
-                <SupportAdminRoutes
-                  match={match}
-                  isAdmin={data.whoami.isAdmin}
+              path="dashboard"
+              element={
+                <ProtectedRoute
+                  requiredPermissions={canViewSettings}
+                  userPermissions={data.whoami.permissions}
+                  element={<Analytics />}
                 />
-              )}
+              }
+            />
+            <Route
+              path="admin/*"
+              element={<SupportAdminRoutes isAdmin={isSupportAdmin} />}
             />
-          </Switch>
+          </Routes>
         </Page>
       </WithFacility>
     </>

frontend/src/app/HealthChecks.tsx

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

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

@@ -1,5 +1,4 @@
 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";
@@ -19,6 +18,7 @@ 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";
+import { MemoryRouter } from "react-router-dom";
 import configureStore from "redux-mock-store";
 
 import { getAppInsights } from "../../TelemetryService";
@@ -166,10 +166,13 @@ jest.mock("./FacilityForm", () => {
     );
   };
 });
-jest.mock("react-router-dom", () => ({
-  Redirect: () => <p>Redirected</p>,
-}));
-
+jest.mock("react-router-dom", () => {
+  const original = jest.requireActual("react-router-dom");
+  return {
+    ...original,
+    Navigate: () => <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 { Redirect } from "react-router-dom";
+import { Navigate } 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 <Redirect push to={{ pathname: "/settings/facilities" }} />;
+    return <Navigate to="/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";
+import { MemoryRouter } from "react-router-dom";
 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";
+import { MemoryRouter } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 
 import * as clia from "../utils/clia";