feat(ui): No longer trigger the Session Timeout Modal on "public" pag…

…es (#1052)
Enterprise-CMCS · Jan 24, 2025 · 50f671c · 50f671c
1 parent 0db7d48
commit 50f671c
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 105 deletions.
diff --git a/react-app/src/components/TimeoutModal/index.tsx b/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;

diff --git a/react-app/src/main.tsx b/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} />

diff --git a/react-app/src/router.test.tsx b/react-app/src/router.test.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react";
+import { createMemoryRouter, RouterProvider } from "react-router";
+import { describe, expect, it, vi } from "vitest";
+import { router } from "./router";
+
+vi.mock(import("@/components"), async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    Layout: vi.fn(() => <div>Mock Layout</div>),
+    TimeoutModal: vi.fn(() => <div>Mock TimeoutModal</div>),
+  };
+});
+
+vi.mock(import("@/features"), async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    Welcome: () => <div data-testid="welcome-page">Mock Welcome</div>,
+    Dashboard: () => <div data-testid="dashboard-page">Mock Dashboard</div>,
+    dashboardLoader: vi.fn(),
+    loader: vi.fn(),
+  };
+});
+
+describe("RoutesWithTimeout", () => {
+  it("should not render <TimeoutModal> on `/faq` route", async () => {
+    const testRouter = createMemoryRouter(router.routes[0].children, {
+      initialEntries: ["/faq"],
+    });
+
+    render(<RouterProvider router={testRouter} />);
+
+    expect(screen.queryByText("Mock TimeoutModal")).not.toBeInTheDocument();
+  });
+
+  it("should render <TimeoutModal> on `/dashboard` route", async () => {
+    const testRouter = createMemoryRouter(router.routes[0].children, {
+      initialEntries: ["/dashboard"],
+    });
+
+    render(<RouterProvider router={testRouter} />);
+
+    expect(screen.getByText("Mock TimeoutModal")).toBeInTheDocument();
+  });
+});
diff --git a/react-app/src/router.tsx b/react-app/src/router.tsx
@@ -1,15 +1,22 @@
-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, Outlet } from "react-router";
 export const queryClient = new QueryClient();
-
 export const FAQ_TAB = "faq-tab";
 
+const RoutesWithTimeout = () => (
+  <>
+    <TimeoutModal />
+    <Outlet />
+  </>
+);
+
 export const router = createBrowserRouter([
   {
     path: "/",
@@ -18,100 +25,105 @@ export const router = createBrowserRouter([
       { 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,
+        element: <RoutesWithTimeout />,
+        children: [
+          {
+            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: "/profile", element: <F.Profile /> },
+          { path: "/guides/abp", element: <F.ABPGuide /> },
+          {
+            path: "/actions/:type/:authority/:id",
+            element: <PostSubmissionWrapper />,
+            loader: postSubmissionLoader,
+          },
+        ],
       },
     ],
     loader: F.loader(queryClient),