refactor(app-router): finish overhaul of routing

src/services/ui/src/components/Layout/index.tsx

@@ -8,11 +8,11 @@ import { Auth } from "aws-amplify";
 import { AwsCognitoOAuthOpts } from "@aws-amplify/auth/lib-esm/types";
 import { Footer } from "../Footer";
 import { UsaBanner } from "../UsaBanner";
-import { FAQ_TARGET } from "@/routes";
 import { useUserContext } from "../Context/userContext";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import config from "@/config";
 import { useNavigate } from "../Routing";
+import { FAQ_TAB } from "../Routing/consts";
 
 const getLinks = (isAuthenticated: boolean, role?: boolean) => {
   const isProd = window && window.location.hostname === "mako.cms.gov";
@@ -182,7 +182,7 @@ const ResponsiveNav = ({ isDesktop }: ResponsiveNavProps) => {
         {getLinks(!!data.user, role).map((link) => (
           <NavLink
             to={link.link}
-            target={link.link === "/faq" ? FAQ_TARGET : undefined}
+            target={link.link === "/faq" ? FAQ_TAB : "_self"}
             key={link.name}
             className={setClassBasedOnNav}
           >
@@ -227,7 +227,7 @@ const ResponsiveNav = ({ isDesktop }: ResponsiveNavProps) => {
                 <Link
                   className="block py-2 pl-3 pr-4 text-white rounded"
                   to={link.link}
-                  target={link.link === "/faq" ? FAQ_TARGET : undefined}
+                  target={link.link === "/faq" ? FAQ_TAB : "_self"}
                 >
                   {link.name}
                 </Link>

src/services/ui/src/components/Routing/consts.ts

@@ -0,0 +1 @@
+export const FAQ_TAB = "faq-tab";

src/services/ui/src/pages/create/external-landing/ExternalAppLandingPage.tsx

@@ -4,9 +4,9 @@ import { Link } from "@/components/Routing";
 import { PropsWithChildren, ReactElement } from "react";
 import { SimplePageTitle } from "@/pages/create/create-options";
 import { SimplePageContainer } from "@/components";
-import { FAQ_SECTION } from "@/routes";
 import { BreadCrumbs } from "@/components/BreadCrumb";
 import { optionCrumbsFromPath } from "@/pages/create/create-breadcrumbs";
+import { FAQ_TAB } from "@/components/Routing/consts";
 export enum EXTERNAL_APP {
   MAC_PRO = "https://www.medicaid.gov/resources-for-states/medicaid-and-chip-program-macpro-portal/index.html#MACPro",
   MMDL = "https://wms-mmdl.cms.gov/MMDL/faces/portal.jsp",
@@ -32,9 +32,9 @@ const FAQHelperText = () => (
       {/* TODO: Get desired FAQ `target` from Wale */}
       <Link
         className="text-sky-600 hover:text-sky-800 underline"
-        target={"_faq"}
+        target={FAQ_TAB}
         path="/faq"
-        hash={FAQ_SECTION.SYSTEM}
+        hash={"system"}
       >
         Crosswalk from Paper-based State Plan to MACPro and MMDL
       </Link>{" "}

src/services/ui/src/pages/faq/content/oneMACFAQContent.tsx

@@ -4,7 +4,6 @@ import IDMInstructionsforOneMACUsers from "../../../assets/onboarding/IDMInstruc
 import OneMACIDMGuide from "../../../assets/onboarding/OneMACIDMGuide.pdf";
 import OneMACStateUserGuide from "../../../assets/onboarding/OneMACStateUserGuide.pdf";
 import OneMACCMSUserGuide from "../../../assets/onboarding/OneMACCMSUserGuide.pdf";
-import { FAQ_SECTION } from "@/routes";
 import { FILE_TYPES } from "shared-types/uploads";
 
 type QuestionAnswer = {
@@ -31,7 +30,7 @@ export const oneMACFAQContent: FAQContent[] = [
         anchorText: "system",
         question: "Which system should I use for my state’s submission?",
         answerJSX: (
-          <section id={FAQ_SECTION.SYSTEM}>
+          <section id={"system"}>
             <p>
               Check which system to submit your state plan in with this
               crosswalk training document.

src/services/ui/src/pages/form/chip-form.tsx

@@ -12,7 +12,6 @@ import {
   SimplePageContainer,
 } from "@/components";
 import * as Inputs from "@/components/Inputs";
-import { FAQ_TARGET } from "@/routes";
 import { PlanType } from "shared-types";
 import {
   zAttachmentOptional,
@@ -22,6 +21,7 @@ import {
 import * as Content from "@/pages/form/content";
 import { ModalProvider, useModalContext } from "@/pages/form/modals";
 import { formCrumbsFromPath } from "@/pages/form/form-breadcrumbs";
+import { FAQ_TAB } from "@/components/Routing/consts";
 
 const formSchema = z.object({
   id: zSpaIdSchema,
@@ -105,7 +105,7 @@ export const ChipForm = () => {
                     </Inputs.FormLabel>
                     <Link
                       to="/faq/#spa-id-format"
-                      target={FAQ_TARGET}
+                      target={FAQ_TAB}
                       rel="noopener noreferrer"
                       className="text-blue-700 hover:underline"
                     >

src/services/ui/src/pages/form/content.tsx

@@ -1,8 +1,8 @@
 import { Link } from "react-router-dom";
-import { FAQ_TARGET } from "@/routes";
 import { RequiredIndicator } from "@/components/Inputs";
 import { Alert } from "@/components";
 import { Info } from "lucide-react";
+import { FAQ_TAB } from "@/components/Routing/consts";
 
 export const FormIntroText = () => (
   <div>
@@ -50,7 +50,7 @@ export const AttachmentsSizeTypesDesc = ({
       {
         <Link
           to={faqLink}
-          target={FAQ_TARGET}
+          target={FAQ_TAB}
           rel="noopener noreferrer"
           className="text-blue-700 hover:underline"
         >
@@ -66,7 +66,7 @@ export const AttachmentsSizeTypesDesc = ({
       {
         <Link
           to="/faq/#acceptable-file-formats"
-          target={FAQ_TARGET}
+          target={FAQ_TAB}
           rel="noopener noreferrer"
           className="text-blue-700 hover:underline"
         >

src/services/ui/src/pages/form/form-breadcrumbs.ts

@@ -1,3 +1,4 @@
+import { Route } from "@/components/Routing/types";
 import { optionCrumbsFromPath } from "@/pages/create/create-breadcrumbs";
 import { submissionFormCrumb } from "@/utils/crumbs";
 
@@ -7,6 +8,6 @@ export const formCrumbsFromPath = (path: string) => {
   const previousOptionsCrumbs = [...optionCrumbsFromPath(path)];
   return [
     ...previousOptionsCrumbs,
-    submissionFormCrumb(path, previousOptionsCrumbs.length),
+    submissionFormCrumb(path as Route, previousOptionsCrumbs.length),
   ];
 };

src/services/ui/src/pages/form/medicaid-form.tsx

@@ -12,7 +12,6 @@ import {
   SimplePageContainer,
   SectionCard,
 } from "@/components";
-import { FAQ_TARGET } from "@/routes";
 import { submit } from "@/api/submissionService";
 import { PlanType } from "shared-types";
 import {
@@ -22,6 +21,7 @@ import {
 } from "@/pages/form/zod";
 import { ModalProvider, useModalContext } from "@/pages/form/modals";
 import { formCrumbsFromPath } from "@/pages/form/form-breadcrumbs";
+import { FAQ_TAB } from "@/components/Routing/consts";
 
 const formSchema = z.object({
   id: zSpaIdSchema,
@@ -110,7 +110,7 @@ export const MedicaidForm = () => {
                     </Inputs.FormLabel>
                     <Link
                       to="/faq/#spa-id-format"
-                      target={FAQ_TARGET}
+                      target={FAQ_TAB}
                       rel="noopener noreferrer"
                       className="text-blue-700 hover:underline"
                     >

src/services/ui/src/pages/welcome/index.tsx

@@ -5,7 +5,7 @@ import { QueryClient } from "@tanstack/react-query";
 import { getUser } from "@/api/useGetUser";
 import { Link } from "@/components/Routing";
 import { Button } from "@/components/Inputs";
-import { FAQ_TARGET } from "@/routes";
+import { FAQ_TAB } from "@/components/Routing/consts";
 
 export const loader = (queryClient: QueryClient) => {
   return async () => {
@@ -191,7 +191,7 @@ export const Welcome = () => {
         <div className="flex justify-around items-center text-xl px-10 py-4 max-w-screen-xl mx-auto">
           <h4>Do you have questions or need support?</h4>
           <Button asChild>
-            <Link path={"/faq"} target={FAQ_TARGET}>
+            <Link path={"/faq"} target={FAQ_TAB}>
               View FAQ
             </Link>
           </Button>

src/services/ui/src/router.tsx

@@ -1,78 +1,86 @@
-import { createBrowserRouter } from "react-router-dom";
+import { RouteObject, createBrowserRouter } from "react-router-dom";
 import * as P from "@/pages";
 import { loader as rootLoader } from "@/pages/welcome";
 import { dashboardLoader } from "@/pages/dashboard";
 import "@/api/amplifyConfig";
 import * as C from "@/components";
 import { QueryClient } from "@tanstack/react-query";
-import { ROUTES } from "@/routes";
+import { type Route } from "./components/Routing/types";
 export const queryClient = new QueryClient();
 
 export const router = createBrowserRouter([
   {
-    path: ROUTES.HOME,
+    path: "/",
     element: <C.Layout />,
     children: [
-      { path: ROUTES.HOME, index: true, element: <P.Welcome /> },
+      { path: "/", index: true, element: <P.Welcome /> },
       {
-        path: ROUTES.DASHBOARD,
+        path: "/dashboard",
         element: <P.Dashboard />,
         loader: dashboardLoader(queryClient),
       },
-      { path: ROUTES.DETAILS, element: <P.Details /> },
-      { path: ROUTES.FAQ, element: <P.Faq /> },
+      { path: "/details", element: <P.Details /> },
+      { path: "/faq", element: <P.Faq /> },
       {
-        path: ROUTES.NEW_SUBMISSION_OPTIONS,
+        path: "/new-submission",
         element: <P.NewSubmissionInitialOptions />,
       },
       {
-        path: ROUTES.SPA_SUBMISSION_OPTIONS,
+        path: "/new-submission/spa",
         element: <P.SPASubmissionOptions />,
       },
       {
-        path: ROUTES.WAIVER_SUBMISSION_OPTIONS,
+        path: "/new-submission/waiver",
         element: <P.WaiverSubmissionOptions />,
       },
       {
-        path: ROUTES.B_WAIVER_SUBMISSION_OPTIONS,
+        path: "/new-submission/waiver/b",
         element: <P.BWaiverSubmissionOptions />,
       },
       {
-        path: ROUTES.B4_WAIVER_OPTIONS,
+        path: "/new-submission/waiver/b/b4",
         element: <P.B4WaiverSubmissionOptions />,
       },
       {
-        path: ROUTES.BCAP_WAIVER_OPTIONS,
+        path: "/new-submission/waiver/b/capitated",
         element: <P.BCapWaiverSubmissionOptions />,
       },
       {
-        path: ROUTES.MEDICAID_SPA_SUB_OPTIONS,
+        path: "/new-submission/spa/medicaid",
         element: <P.MedicaidSPASubmissionOptions />,
       },
       {
-        path: ROUTES.CHIP_SPA_SUB_OPTIONS,
+        path: "/new-submission/spa/chip",
         element: <P.ChipSPASubmissionOptions />,
       },
       {
-        path: ROUTES.MEDICAID_ABP_LANDING,
+        path: "/new-submission/spa/medicaid/landing/medicaid-abp",
         element: <P.MedicaidABPLandingPage />,
       },
       {
-        path: ROUTES.MEDICAID_ELIGIBILITY_LANDING,
+        path: "/new-submission/spa/medicaid/landing/medicaid-eligibility",
         element: <P.MedicaidEligibilityLandingPage />,
       },
       {
-        path: ROUTES.CHIP_ELIGIBILITY_LANDING,
+        path: "/new-submission/spa/chip/landing/chip-eligibility",
         element: <P.CHIPEligibilityLandingPage />,
       },
-      { path: ROUTES.MEDICAID_NEW, element: <P.MedicaidSpaFormPage /> },
-      { path: ROUTES.CHIP_NEW, element: <P.ChipSpaFormPage /> },
-      { path: ROUTES.ACTION, element: <P.ActionFormIndex /> },
-      { path: ROUTES.WEBFORMS, element: <C.Webforms /> },
-      { path: ROUTES.WEBFORM, element: <C.Webform /> },
-      { path: ROUTES.PROFILE, element: <P.Profile /> },
-      { path: ROUTES.ABPGUIDE, element: <P.ABPGuide /> },
-    ],
+      // {
+      //   path: "/new-submission/waiver/b/create",
+      //   element: <P.Waiver1915BFormPage />,
+      // },
+      { path: "/new-submission/spa/medicaid/create", element: <P.MedicaidSpaFormPage /> },
+      { path: "/new-submission/spa/chip/create", element: <P.ChipSpaFormPage /> },
+      { path: "/action/:id/:type", element: <P.ActionFormIndex /> },
+      { path: "/webforms", element: <C.Webforms /> },
+      { path: "/webform/:id/:version", element: <C.Webform /> },
+      { path: "/profile", element: <P.Profile /> },
+      { path: "/guides/abp", element: <P.ABPGuide /> },
+    ] satisfies TypedRouteObject[],
     loader: rootLoader(queryClient),
   },
-]);
+] satisfies TypedRouteObject[]);
+
+type TypedRouteObject = RouteObject & {
+  path: Route;
+};

src/services/ui/src/utils/crumbs.ts

@@ -1,13 +1,13 @@
-import { ROUTES } from "@/routes";
 import { BreadCrumbConfig } from "@/components";
 import { mapActionLabel, mapSubmissionCrumb } from "@/utils/labelMappers";
 import { Action } from "shared-types";
+import { Route } from "@/components/Routing/types";
 
 export const dashboardCrumb: BreadCrumbConfig = {
   displayText: "Dashboard",
   order: 1,
   default: true,
-  to: ROUTES.DASHBOARD,
+  to: "/dashboard",
 };
 
 export const detailsCrumb = (id: string): BreadCrumbConfig => ({
@@ -23,10 +23,10 @@ export const actionCrumb = (action: Action, id: string): BreadCrumbConfig => ({
 });
 
 export const submissionFormCrumb = (
-  path: string,
+  path: Route,
   idx: number
 ): BreadCrumbConfig => ({
-  displayText: mapSubmissionCrumb(path as ROUTES),
+  displayText: mapSubmissionCrumb(path),
   order: idx,
   to: path,
 });