feat(ui): No longer trigger the <TimeoutModal> on "public" pages

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useGetUser } from "@/api";
 import {
   Button,
   Dialog,
@@ -7,12 +7,12 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components";
+import { useCountdown, useIdle } from "@/hooks";
+import { DialogDescription } from "@radix-ui/react-dialog";
 import { Auth } from "aws-amplify";
-import { useIdle, useCountdown } from "@/hooks";
-import { useGetUser } from "@/api";
 import { intervalToDuration } from "date-fns";
 import pluralize from "pluralize";
-import { DialogDescription } from "@radix-ui/react-dialog";
+import { useEffect, useState } from "react";
 
 const TWENTY_MINS_IN_MILS = 1000 * 60 * 20;
 const TEN_MINS_IN_MILS = 60 * 10;

react-app/src/main.tsx

@@ -1,14 +1,13 @@
+import config from "@/config";
+import "@fontsource/open-sans";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { asyncWithLDProvider } from "launchdarkly-react-client-sdk";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router";
-import "@fontsource/open-sans";
 import "./index.css";
 import { queryClient, router } from "./router";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { TimeoutModal } from "@/components";
-import config from "@/config";
-import { asyncWithLDProvider } from "launchdarkly-react-client-sdk";
 
 const ldClientId = config.launchDarkly?.CLIENT_ID;
 if (ldClientId === undefined) {
@@ -30,7 +29,6 @@ const initializeLaunchDarkly = async () => {
     <React.StrictMode>
       <QueryClientProvider client={queryClient}>
         <LDProvider>
-          <TimeoutModal />
           <RouterProvider router={router} />
         </LDProvider>
         <ReactQueryDevtools initialIsOpen={false} />

react-app/src/router.test.tsx

@@ -0,0 +1,50 @@
+import { render } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+import { router } from "./router";
+
+vi.mock("@/components", () => ({
+  TimeoutModal: () => <div data-testid="timeout-modal">TimeoutModal</div>,
+  Layout: ({ children }) => <div>{children}</div>,
+}));
+
+vi.mock(import("@/features"), async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    Welcome: () => <div data-testid="welcome-page">Welcome</div>,
+    Dashboard: () => <div data-testid="dashboard-page">Dashboard</div>,
+    dashboardLoader: vi.fn(),
+    loader: vi.fn(),
+  };
+});
+
+describe("Router tests", () => {
+  it("should include <TimeoutModal /> in private routes", () => {
+    const { getByTestId } = render(
+      <MemoryRouter initialEntries={["/dashboard"]}>
+        <Routes>
+          {router.routes[0].children.map((route) => (
+            <Route key={route.path} path={route.path} element={route.element} />
+          ))}
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(getByTestId("timeout-modal")).toBeDefined();
+  });
+
+  it("should not include <TimeoutModal /> in public routes", () => {
+    const { queryByTestId } = render(
+      <MemoryRouter initialEntries={["/"]}>
+        <Routes>
+          {router.routes[0].children.map((route) => (
+            <Route key={route.path} path={route.path} element={route.element} />
+          ))}
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(queryByTestId("timeout-modal")).toBeNull();
+  });
+});

react-app/src/router.tsx

@@ -1,119 +1,138 @@
-import { createBrowserRouter } from "react-router";
-import * as F from "@/features";
 import * as C from "@/components";
+import { TimeoutModal } from "@/components";
+import * as F from "@/features";
 import {
   postSubmissionLoader,
   PostSubmissionWrapper,
 } from "@/features/forms/post-submission/post-submission-forms";
 import { QueryClient } from "@tanstack/react-query";
+import { createBrowserRouter } from "react-router";
 export const queryClient = new QueryClient();
-
 export const FAQ_TAB = "faq-tab";
 
+// These routes are divided into public and private, but this distinction
+// is not used for enforcing authentication. Instead, private routes include
+// a Timeout component that logs out a user after a period of inactivity.
+
+const PrivateWrapper = ({ element: Component }) => {
+  return (
+    <>
+      <TimeoutModal />
+      {Component}
+    </>
+  );
+};
+
+const publicRoutes = [
+  { path: "/", index: true, element: <F.Welcome /> },
+  { path: "/faq", element: <F.Faq /> },
+  { path: "/faq/:id", element: <F.Faq /> },
+  { path: "/webforms", element: <F.WebformsList /> },
+  { path: "/webform/:id/:version", element: <F.Webform /> },
+];
+
+const privateRoutes = [
+  {
+    path: "/dashboard",
+    element: <PrivateWrapper element={<F.Dashboard />} />,
+    loader: F.dashboardLoader(queryClient),
+  },
+  {
+    path: "/details/:authority/:id",
+    element: <F.Details />,
+    loader: F.packageDetailsLoader,
+  },
+  {
+    path: "/new-submission/spa/medicaid/create",
+    element: <PrivateWrapper element={<F.MedicaidForm />} />,
+  },
+  {
+    path: "/new-submission/spa/chip/create",
+    element: <PrivateWrapper element={<F.ChipForm />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/capitated/amendment/create",
+    element: <PrivateWrapper element={<F.CapitatedWaivers.AmendmentForm />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/capitated/initial/create",
+    element: <PrivateWrapper element={<F.CapitatedWaivers.InitialForm />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/capitated/renewal/create",
+    element: <PrivateWrapper element={<F.CapitatedWaivers.Renewal />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/b4/renewal/create",
+    element: <PrivateWrapper element={<F.ContractingWaivers.RenewalForm />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/b4/initial/create",
+    element: <PrivateWrapper element={<F.ContractingWaivers.InitialForm />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/b4/amendment/create",
+    element: <PrivateWrapper element={<F.ContractingWaivers.AmendmentForm />} />,
+  },
+  {
+    path: "/new-submission/waiver/app-k",
+    element: <PrivateWrapper element={<F.AppKAmendmentForm />} />,
+  },
+  {
+    path: "/new-submission/waiver/temporary-extensions",
+    element: <PrivateWrapper element={<F.TemporaryExtensionForm />} />,
+  },
+  {
+    path: "/new-submission",
+    element: <PrivateWrapper element={<F.NewSubmissionInitialOptions />} />,
+  },
+  {
+    path: "/new-submission/spa",
+    element: <PrivateWrapper element={<F.SPASubmissionOptions />} />,
+  },
+  {
+    path: "/new-submission/waiver",
+    element: <PrivateWrapper element={<F.WaiverSubmissionOptions />} />,
+  },
+  {
+    path: "/new-submission/waiver/b",
+    element: <PrivateWrapper element={<F.BWaiverSubmissionOptions />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/b4",
+    element: <PrivateWrapper element={<F.B4WaiverSubmissionOptions />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/capitated",
+    element: <PrivateWrapper element={<F.BCapWaiverSubmissionOptions />} />,
+  },
+  {
+    path: "/new-submission/spa/medicaid",
+    element: <PrivateWrapper element={<F.MedicaidSPASubmissionOptions />} />,
+  },
+  {
+    path: "/new-submission/spa/chip",
+    element: <PrivateWrapper element={<F.ChipSPASubmissionOptions />} />,
+  },
+  {
+    path: "/new-submission/spa/medicaid/landing/medicaid-eligibility",
+    element: <PrivateWrapper element={<F.MedicaidEligibilityLandingPage />} />,
+  },
+
+  { path: "/profile", element: <PrivateWrapper element={<F.Profile />} /> },
+  { path: "/guides/abp", element: <PrivateWrapper element={<F.ABPGuide />} /> },
+  {
+    path: "/actions/:type/:authority/:id",
+    element: <PrivateWrapper element={<PostSubmissionWrapper />} />,
+    loader: postSubmissionLoader,
+  },
+];
+
 export const router = createBrowserRouter([
   {
     path: "/",
     element: <C.Layout />,
-    children: [
-      { path: "/", index: true, element: <F.Welcome /> },
-      { path: "/faq", element: <F.Faq /> },
-      { path: "/faq/:id", element: <F.Faq /> },
-      {
-        path: "/dashboard",
-        element: <F.Dashboard />,
-        loader: F.dashboardLoader(queryClient),
-      },
-      {
-        path: "/details/:authority/:id",
-        element: <F.Details />,
-        loader: F.packageDetailsLoader,
-      },
-      {
-        path: "/new-submission/spa/medicaid/create",
-        element: <F.MedicaidForm />,
-      },
-      {
-        path: "/new-submission/spa/chip/create",
-        element: <F.ChipForm />,
-      },
-      {
-        path: "/new-submission/waiver/b/capitated/amendment/create",
-        element: <F.CapitatedWaivers.AmendmentForm />,
-      },
-      {
-        path: "/new-submission/waiver/b/capitated/initial/create",
-        element: <F.CapitatedWaivers.InitialForm />,
-      },
-      {
-        path: "/new-submission/waiver/b/capitated/renewal/create",
-        element: <F.CapitatedWaivers.Renewal />,
-      },
-      {
-        path: "/new-submission/waiver/b/b4/renewal/create",
-        element: <F.ContractingWaivers.RenewalForm />,
-      },
-      {
-        path: "/new-submission/waiver/b/b4/initial/create",
-        element: <F.ContractingWaivers.InitialForm />,
-      },
-      {
-        path: "/new-submission/waiver/b/b4/amendment/create",
-        element: <F.ContractingWaivers.AmendmentForm />,
-      },
-      {
-        path: "/new-submission/waiver/app-k",
-        element: <F.AppKAmendmentForm />,
-      },
-      {
-        path: "/new-submission/waiver/temporary-extensions",
-        element: <F.TemporaryExtensionForm />,
-      },
-      {
-        path: "/new-submission",
-        element: <F.NewSubmissionInitialOptions />,
-      },
-      {
-        path: "/new-submission/spa",
-        element: <F.SPASubmissionOptions />,
-      },
-      {
-        path: "/new-submission/waiver",
-        element: <F.WaiverSubmissionOptions />,
-      },
-      {
-        path: "/new-submission/waiver/b",
-        element: <F.BWaiverSubmissionOptions />,
-      },
-      {
-        path: "/new-submission/waiver/b/b4",
-        element: <F.B4WaiverSubmissionOptions />,
-      },
-      {
-        path: "/new-submission/waiver/b/capitated",
-        element: <F.BCapWaiverSubmissionOptions />,
-      },
-      {
-        path: "/new-submission/spa/medicaid",
-        element: <F.MedicaidSPASubmissionOptions />,
-      },
-      {
-        path: "/new-submission/spa/chip",
-        element: <F.ChipSPASubmissionOptions />,
-      },
-      {
-        path: "/new-submission/spa/medicaid/landing/medicaid-eligibility",
-        element: <F.MedicaidEligibilityLandingPage />,
-      },
-      { path: "/webforms", element: <F.WebformsList /> },
-      { path: "/webform/:id/:version", element: <F.Webform /> },
-      { path: "/profile", element: <F.Profile /> },
-      { path: "/guides/abp", element: <F.ABPGuide /> },
-      {
-        path: "/actions/:type/:authority/:id",
-        element: <PostSubmissionWrapper />,
-        loader: postSubmissionLoader,
-      },
-    ],
+    children: [...privateRoutes, ...publicRoutes],
     loader: F.loader(queryClient),
     HydrateFallback: () => null,
   },