chore(ui): upgrade react-router-dom to v7

react-app/package.json

@@ -63,7 +63,7 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.46.2",
     "react-loader-spinner": "^6.1.6",
-    "react-router-dom": "^6.10.0",
+    "react-router-dom": "^7.0.2",
     "react-select": "^5.7.4",
     "shared-types": "*",
     "shared-utils": "*",

react-app/src/components/ActionForm/actionForm.components.tsx

@@ -1,5 +1,5 @@
 import { FAQ_TAB } from "@/router";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { z } from "zod";
 
 export const AttachmentFileFormatInstructions = () => (

react-app/src/components/ActionForm/index.tsx

@@ -21,7 +21,7 @@ import {
 import { DefaultValues, FieldPath, useForm, UseFormReturn } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import { Navigate, useLocation, useNavigate, useParams } from "react-router-dom";
+import { Navigate, useLocation, useNavigate, useParams } from "react-router";
 import { getFormOrigin } from "@/utils";
 import { CheckDocumentFunction, documentPoller } from "@/utils/Poller/documentPoller";
 import { API } from "aws-amplify";
@@ -229,7 +229,7 @@ export const ActionForm = <Schema extends SchemaWithEnforcableProps>({
           )}
           {additionalInformation && (
             <SectionCard
-              testId = "additional-info"
+              testId="additional-info"
               title={
                 <>
                   {additionalInformation.title}{" "}

react-app/src/components/Banner/banner.test.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { Link, MemoryRouter, Route, Routes } from "react-router-dom";
+import { Link, MemoryRouter, Route, Routes } from "react-router";
 import { describe, expect, test } from "vitest";
 import { act, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -8,14 +8,8 @@ import { banner, Banner } from ".";
 const wrapper = ({ children }: { children: ReactNode }) => (
   <MemoryRouter initialEntries={["/dashboard"]}>
     <Routes>
-      <Route
-        path="/dashboard"
-        element={<Link to="/example" id="dashboard-link" />}
-      />
-      <Route
-        path="/example"
-        element={<Link to="/dashboard" id="example-link" />}
-      />
+      <Route path="/dashboard" element={<Link to="/example" id="dashboard-link" />} />
+      <Route path="/example" element={<Link to="/dashboard" id="example-link" />} />
     </Routes>
     {children}
   </MemoryRouter>

react-app/src/components/Banner/banner.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Alert, AlertVariant } from "../Alert";
 import { Check, X } from "lucide-react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { Observer } from "@/utils/basic-observable";
 
 export type Banner = {
@@ -57,10 +57,7 @@ export const Banner = () => {
 
   if (activeBanner && activeBanner.pathnameToDisplayOn === pathname) {
     return (
-      <Alert
-        variant={activeBanner.variant}
-        className="mt-4 mb-8 flex-row text-sm"
-      >
+      <Alert variant={activeBanner.variant} className="mt-4 mb-8 flex-row text-sm">
         <div className="flex items-start justify-between">
           <Check />
           <div className="ml-2 w-full">

react-app/src/components/BreadCrumb/BreadCrumb.test.tsx

@@ -2,7 +2,7 @@ import { describe, test, expect, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { BreadCrumb, BreadCrumbBar, BreadCrumbs } from "./BreadCrumb";
-import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
+import { BrowserRouter, Route, Routes, useLocation } from "react-router";
 
 import { optionCrumbsFromPath } from "./create-breadcrumbs";
 import { Authority } from "shared-types";

react-app/src/components/BreadCrumb/BreadCrumb.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { type ReactNode } from "react";
 import { ChevronRight } from "lucide-react";
 
@@ -29,11 +29,7 @@ export const BreadCrumbs = ({ options }: BreadCrumbsProps) => {
         .toSorted((option, prevOption) => option.order - prevOption.order)
         .map(({ displayText, to }, index, optionsArray) => {
           return (
-            <BreadCrumb
-              key={displayText}
-              to={to}
-              active={index !== optionsArray.length - 1}
-            >
+            <BreadCrumb key={displayText} to={to} active={index !== optionsArray.length - 1}>
               {displayText}
             </BreadCrumb>
           );
@@ -78,11 +74,7 @@ export const BreadCrumbSeperator = () => <ChevronRight className="w-5 h-5" />;
 
 export const BreadCrumbBar = ({ children }: React.PropsWithChildren) => {
   return (
-    <nav
-      role="navigation"
-      aria-label="breadcrumbs for spa or waiver choices"
-      className="my-4"
-    >
+    <nav role="navigation" aria-label="breadcrumbs for spa or waiver choices" className="my-4">
       <ul className="flex gap-1">{children}</ul>
     </nav>
   );

react-app/src/components/Cards/OptionCard.test.tsx

@@ -1,25 +1,17 @@
 import { describe, test, expect, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { OptionCard, OptionFieldset } from "@/components";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router";
 
 describe("OptionFieldset", () => {
   beforeEach(() => {
-    render(
-      <OptionFieldset legend={"Test Legend"}>
-        Testing rendering of children
-      </OptionFieldset>,
-    );
+    render(<OptionFieldset legend={"Test Legend"}>Testing rendering of children</OptionFieldset>);
   });
   test("legend prop populates legend element in fieldset", () => {
-    expect(
-      screen.getByRole("group", { name: "Test Legend" }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Test Legend" })).toBeInTheDocument();
   });
   test("renders children", () => {
-    expect(
-      screen.getByText("Testing rendering of children"),
-    ).toBeInTheDocument();
+    expect(screen.getByText("Testing rendering of children")).toBeInTheDocument();
   });
 });
 

react-app/src/components/Cards/OptionCard.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactNode } from "react";
-import { Link, LinkProps } from "react-router-dom";
+import { Link, LinkProps } from "react-router";
 import { ChevronRight } from "lucide-react";
 import { CardWithTopBorder } from "@/components";
 
@@ -13,10 +13,7 @@ export type MACFieldsetOption = {
   altBg?: boolean;
 };
 /** A fieldset for nesting {@link OptionCard} with MACCard styling */
-export const OptionFieldset = ({
-  children,
-  legend,
-}: OptionCardFieldsetProps) => {
+export const OptionFieldset = ({ children, legend }: OptionCardFieldsetProps) => {
   return (
     <section className="max-w-3xl mx-auto mb-6">
       <fieldset>
@@ -28,12 +25,7 @@ export const OptionFieldset = ({
 };
 /** An element for use in options lists that lead to a destination, such as
  * the new submission options found in {@link NewSubmissionInitialOptions} */
-export const OptionCard = ({
-  title,
-  description,
-  to,
-  altBg = false,
-}: MACFieldsetOption) => {
+export const OptionCard = ({ title, description, to, altBg = false }: MACFieldsetOption) => {
   return (
     <label>
       <Link to={to} relative="path">

react-app/src/components/Footer/Footer.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router";
 
 import { Footer, FAQFooter } from "./index";
 
@@ -32,8 +32,6 @@ describe("FAQFooter", () => {
     );
 
     expect(screen.queryByText("View FAQ")).toBeInTheDocument();
-    expect(
-      screen.queryByText("Do you have questions or need support?"),
-    ).toBeInTheDocument();
+    expect(screen.queryByText("Do you have questions or need support?")).toBeInTheDocument();
   });
 });

react-app/src/components/Footer/index.tsx

@@ -1,7 +1,7 @@
 import MedicaidLogo from "@/assets/MedicaidLogo.svg";
 import DepartmentOfHealthLogo from "@/assets/DepartmentOfHealthLogo.svg";
 import { Alert, Button } from "@/components";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 type Props = {
   email: string;
@@ -29,9 +29,8 @@ export const Footer = ({ email, address }: Props) => {
             alt="Logo for Department of Health and Human Services"
           />
           <p className="col-span-12 sm:col-span-4">
-            A federal government website managed and paid for by the U.S.
-            Centers for Medicare and Medicaid Services and part of the MACPro
-            suite.
+            A federal government website managed and paid for by the U.S. Centers for Medicare and
+            Medicaid Services and part of the MACPro suite.
           </p>
         </div>
       </section>

react-app/src/components/Form/content/FormLoadingSpinner.tsx

@@ -1,11 +1,9 @@
-import { useNavigation } from "react-router-dom";
+import { useNavigation } from "react-router";
 import { useFormContext } from "react-hook-form";
 import { LoadingSpinner } from "@/components";
 
 export const FormLoadingSpinner = () => {
   const { state } = useNavigation();
   const { formState } = useFormContext();
-  return (
-    (state === "submitting" || formState.isSubmitting) && <LoadingSpinner />
-  );
+  return (state === "submitting" || formState.isSubmitting) && <LoadingSpinner />;
 };

react-app/src/components/Form/content/PackageSection.tsx

@@ -1,5 +1,5 @@
 import { BLANK_VALUE } from "@/consts";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { AuthorityUnion } from "shared-types";
 
 export const getIdLabel = (authority: AuthorityUnion) => {

react-app/src/components/Form/old-content.tsx

@@ -6,7 +6,7 @@ import {
 } from "@/components";
 import { FAQ_TAB } from "@/router";
 import { Info } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 type FormIntroTextProps = {
   hasProgressLossReminder?: boolean;

react-app/src/components/Layout/index.test.tsx

@@ -25,7 +25,7 @@ vi.mock("@/components", () => ({
 
 // Navigation mock
 const mockNavigate = vi.fn();
-vi.mock("react-router-dom", async () => {
+vi.mock("react-router", async () => {
   const actual = await vi.importActual<typeof import("react-router-dom")>("react-router-dom");
   return {
     ...actual,

react-app/src/components/Layout/index.tsx

@@ -1,4 +1,4 @@
-import { NavLink, NavLinkProps, Outlet, Link, useNavigate } from "react-router-dom";
+import { NavLink, NavLinkProps, Outlet, Link, useNavigate } from "react-router";
 import oneMacLogo from "@/assets/onemac-logo.png";
 import { useMediaQuery } from "@/hooks";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";

react-app/src/components/Opensearch/main/useOpensearch.ts

@@ -5,7 +5,7 @@
 import { useLzUrl } from "@/hooks";
 import { OsTab } from "./types";
 import { createSearchFilterable } from "../utils";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 export const DEFAULT_FILTERS: Record<OsTab, Partial<OsUrlState>> = {
   spas: {
@@ -71,7 +71,7 @@
   };
   useEffect(() => {
     onRequest(params.state);
   }, [params.queryString]);
   return { data, isLoading, error, ...params };
 };
 export const useOsAggregate = () => {
@@ -104,13 +104,11 @@
           },
           {
             field:
-              user?.isCms &&
-              !user.user?.["custom:cms-roles"].includes(UserRoles.HELPDESK)
+              user?.isCms && !user.user?.["custom:cms-roles"].includes(UserRoles.HELPDESK)
                 ? "cmsStatus.keyword"
                 : "stateStatus.keyword",
             name:
-              user?.isCms &&
-              !user.user?.["custom:cms-roles"].includes(UserRoles.HELPDESK)
+              user?.isCms && !user.user?.["custom:cms-roles"].includes(UserRoles.HELPDESK)
                 ? "cmsStatus.keyword"
                 : "stateStatus.keyword",
             type: "terms",

react-app/src/components/RHF/RHFTextDisplay.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/utils";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { RHFTextField } from "shared-types";
 
 interface RHFTextDisplayProps {
@@ -34,15 +34,10 @@ export const RHFTextDisplay = (props: RHFTextDisplayProps) => {
       case "italic":
         return <i className={t.classname}>{t.text}</i>;
       case "numberedSet":
-        return (
-          <span className={t.classname}>{`${t.text} ${props.index + 1}`}</span>
-        );
+        return <span className={t.classname}>{`${t.text} ${props.index + 1}`}</span>;
       case "link":
         return (
-          <Link
-            to={t.link ?? "/"}
-            className={cn("cursor-pointer text-blue-600 ml-0", t.classname)}
-          >
+          <Link to={t.link ?? "/"} className={cn("cursor-pointer text-blue-600 ml-0", t.classname)}>
             {t.text}
           </Link>
         );

react-app/src/components/RHF/tests/RHFTextDisplay.test.tsx

@@ -1,6 +1,6 @@
 import { describe, test, expect } from "vitest";
 import { render } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router";
 import { RHFTextDisplay } from "..";
 import { RHFTextField } from "shared-types";
 

react-app/src/components/ScrollToTop/index.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 export const ScrollToTop = () => {
   const { pathname } = useLocation();

react-app/src/components/UsaBanner/UsaBanner.test.tsx

@@ -3,15 +3,13 @@ import userEvent from "@testing-library/user-event";
 import { describe, expect, test, vi } from "vitest";
 import { UsaBanner } from ".";
 
-vi.mock("react-router-dom", () => ({
+vi.mock("react-router", () => ({
   useLoaderData: vi.fn().mockImplementation(() => ({ error: "" })),
 }));
 
 describe("UsaBanner", () => {
   test("clicking on button expands banner information (small)", async () => {
-    const { queryAllByRole, queryByText } = render(
-      <UsaBanner isUserMissingRole={false} />,
-    );
+    const { queryAllByRole, queryByText } = render(<UsaBanner isUserMissingRole={false} />);
 
     const button = queryAllByRole("button")[0];
     await userEvent.click(button);
@@ -20,9 +18,7 @@ describe("UsaBanner", () => {
   });
 
   test("clicking on button expands banner information (large)", async () => {
-    const { queryAllByRole, queryByText } = render(
-      <UsaBanner isUserMissingRole={false} />,
-    );
+    const { queryAllByRole, queryByText } = render(<UsaBanner isUserMissingRole={false} />);
 
     const button = queryAllByRole("button")[1];
     await userEvent.click(button);
@@ -47,9 +43,7 @@ describe("UsaBanner", () => {
   });
 
   test("government building icon renders", async () => {
-    const { queryByTestId, queryAllByRole } = render(
-      <UsaBanner isUserMissingRole={true} />,
-    );
+    const { queryByTestId, queryAllByRole } = render(<UsaBanner isUserMissingRole={true} />);
 
     const button = queryAllByRole("button")[0];
     await userEvent.click(button);