feat(ui): Update link on Temporary Extension page to link to respecti…

…ve authority (#1148)
Enterprise-CMCS · Feb 20, 2025 · 1bd3cc6 · 1bd3cc6
1 parent 82d6592
commit 1bd3cc6
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 8 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/react-app/package.json b/react-app/package.json
@@ -64,7 +64,6 @@
     "@axe-core/playwright": "^4.8.3",
     "@playwright/test": "^1.45.3",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/lodash.debounce": "^4.0.7",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
@@ -80,6 +79,7 @@
     "tailwindcss": "^3.3.1",
     "typescript": "5.4.5",
     "vite": "^5.3.5",
+    "vite-plugin-checker": "^0.8.0",
     "vite-plugin-radar": "^0.9.2"
   }
 }
diff --git a/react-app/src/features/forms/faqLinks.ts b/react-app/src/features/forms/faqLinks.ts
@@ -12,7 +12,8 @@ export const getFAQLinkForAttachments = (eventName: string) => {
     ["contracting-amendment", "/faq/waiverb-attachments"],
     ["contracting-initial", "/faq/waiverb-attachments"],
     ["contracting-renewal", "/faq/waiverb-attachments"],
-    ["temporary-extension", "/faq/temporary-extensions-b-attachments"],
+    ["temporary-extension-1915(b)", "/faq/temporary-extensions-b-attachments"],
+    ["temporary-extension-1915(c)", "/faq/temporary-extensions-c-attachments"],
   ]);
 
   return faqLinks.get(eventName) ?? "/faq";

diff --git a/react-app/src/features/forms/waiver/temporary-extension/index.tsx b/react-app/src/features/forms/waiver/temporary-extension/index.tsx
@@ -1,3 +1,4 @@
+import { useGetItem } from "@/api";
 import {
   ActionForm,
   FormControl,
@@ -14,10 +15,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components";
-import { Link, useParams } from "react-router";
 import { formSchemas } from "@/formSchemas";
 import { FAQ_TAB } from "@/router";
-import { useGetItem } from "@/api";
+import { useState } from "react";
+import { Link, useParams } from "react-router";
 import { getFAQLinkForAttachments } from "../../faqLinks";
 
 const actionTypeMap = {
@@ -29,6 +30,8 @@ export const TemporaryExtensionForm = () => {
   const { id: waiverId } = useParams<{ id: string }>();
   const { data: submission } = useGetItem(waiverId, { enabled: waiverId !== undefined });
 
+  const [temporaryExtensionType, setTemporaryExtensionType] = useState<string>("1915(b)");
+
   const type =
     submission && submission._source
       ? `${submission._source.authority} ${actionTypeMap[submission._source.actionType]}`
@@ -58,7 +61,13 @@ export const TemporaryExtensionForm = () => {
                     <strong className="font-bold">Temporary Extension Type</strong>{" "}
                     <RequiredIndicator />
                   </FormLabel>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <Select
+                    onValueChange={(value) => {
+                      field.onChange(value);
+                      setTemporaryExtensionType(value);
+                    }}
+                    defaultValue={field.value}
+                  >
                     <FormControl>
                       <SelectTrigger>
                         <SelectValue placeholder="-- select a temporary extension type --" />
@@ -172,7 +181,7 @@ export const TemporaryExtensionForm = () => {
         },
       }}
       attachments={{
-        faqLink: getFAQLinkForAttachments("temporary-extension"),
+        faqLink: getFAQLinkForAttachments(`temporary-extension-${temporaryExtensionType}`),
       }}
       documentPollerArgs={{
         property: (data) => data.id,

diff --git a/react-app/src/features/forms/waiver/temporary-extension/temporary-extension.test.tsx b/react-app/src/features/forms/waiver/temporary-extension/temporary-extension.test.tsx
@@ -58,7 +58,7 @@ describe("Temporary Extension", () => {
     ).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
   });
 
-  test("TEMPORARY EXTENSION TYPE", async () => {
+  test("TEMPORARY EXTENSION TYPE 1915(c)", async () => {
     await renderFormAsync(<TemporaryExtensionForm />);
 
     // enable render cleanup here
@@ -68,13 +68,27 @@ describe("Temporary Extension", () => {
 
     await user.click(teTypeDropdown);
 
+    const teOptionToClick = screen.getByRole("option", {
+      name: "1915(c)",
+    });
+
+    await user.click(teOptionToClick);
+
+    expect(screen.getByRole("combobox")).toHaveTextContent("1915(c)");
+  });
+
+  test("TEMPORARY EXTENSION TYPE 1915(b)", async () => {
+    const teTypeDropdown = screen.getByRole("combobox");
+
+    await user.click(teTypeDropdown);
+
     const teOptionToClick = screen.getByRole("option", {
       name: "1915(b)",
     });
 
     await user.click(teOptionToClick);
 
-    expect(teTypeDropdown).toHaveTextContent("1915(b)");
+    expect(screen.getByRole("combobox")).toHaveTextContent("1915(b)");
   });
 
   test("APPROVED INITIAL OR RENEWAL WAIVER NUMBER", async () => {

diff --git a/react-app/vite.config.ts b/react-app/vite.config.ts
@@ -2,6 +2,7 @@ import { defineConfig, loadEnv } from "vite";
 //import { defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react-swc";
 import { fileURLToPath } from "url";
+import checker from "vite-plugin-checker";
 import { VitePluginRadar } from "vite-plugin-radar";
 
 // https://vitejs.dev/config/
@@ -16,6 +17,7 @@ export default defineConfig(({ mode }) => {
     },
     plugins: [
       react(),
+      checker({ typescript: true }),
       VitePluginRadar({
         enableDev: true,
         analytics: [