diff --git a/services/ui-src/src/components/accordions/AccordionItem.test.tsx b/services/ui-src/src/components/accordions/AccordionItem.test.tsx index ce69003c..289f6f54 100644 --- a/services/ui-src/src/components/accordions/AccordionItem.test.tsx +++ b/services/ui-src/src/components/accordions/AccordionItem.test.tsx @@ -31,7 +31,7 @@ describe("Test AccordionItem", () => { const button = screen.getByRole("button", { name: "Expand" }); await userEvent.click(button); }); - expect(screen.getByRole("button", { name: "Collapse" })); + expect(screen.getByRole("button", { name: "Collapse" })).toBeVisible(); }); testA11y(accordionItemComponent); diff --git a/services/ui-src/src/components/app/AppRoutes.tsx b/services/ui-src/src/components/app/AppRoutes.tsx index f2aeaef3..8acfebdd 100644 --- a/services/ui-src/src/components/app/AppRoutes.tsx +++ b/services/ui-src/src/components/app/AppRoutes.tsx @@ -1,6 +1,7 @@ import { Navigate, Route, Routes } from "react-router-dom"; import { AdminPage, + CreateReportOptions, HelpPage, HomePage, ProfilePage, @@ -8,9 +9,8 @@ import { NotFoundPage, AdminBannerProvider, ExportedReportPage, + ReportPageWrapper, } from "components"; -import { CreateReportOptions } from "components/pages/CreateReportOptions/CreateReportOptions"; -import { ReportPageWrapper } from "components/report/ReportPageWrapper"; import { useStore } from "utils"; export const AppRoutes = () => { @@ -34,14 +34,15 @@ export const AppRoutes = () => { element={} /> } /> - } - /> } /> + } + /> + {/* TO DO: Load pageId by default? */} diff --git a/services/ui-src/src/components/cards/TemplateCard.test.tsx b/services/ui-src/src/components/cards/TemplateCard.test.tsx index c974a736..57c6efab 100644 --- a/services/ui-src/src/components/cards/TemplateCard.test.tsx +++ b/services/ui-src/src/components/cards/TemplateCard.test.tsx @@ -54,7 +54,7 @@ describe("", () => { const templateCardLink = screen.getByText(qmTemplateVerbiage.link.text)!; await userEvent.click(templateCardLink); const expectedRoute = "/report/QM/MN"; - await expect(mockUseNavigate).toHaveBeenCalledWith(expectedRoute); + expect(mockUseNavigate).toHaveBeenCalledWith(expectedRoute); }); }); diff --git a/services/ui-src/src/components/index.ts b/services/ui-src/src/components/index.ts index 595e521b..01709b55 100644 --- a/services/ui-src/src/components/index.ts +++ b/services/ui-src/src/components/index.ts @@ -32,8 +32,8 @@ export { ExportedReportBanner } from "./export/ExportedReportBanner"; export { ExportedReportWrapper } from "./export/ExportedReportWrapper"; // fields export { RadioField } from "./fields/RadioField"; -export { TextField } from "./fields/TextField"; export { DateField } from "./fields/DateField"; +export { TextField } from "./fields/TextField"; // forms export { AdminBannerForm } from "./forms/AdminBannerForm"; export { AdminDashSelector } from "./forms/AdminDashSelector"; @@ -42,10 +42,19 @@ export { LoginCognito } from "./logins/LoginCognito"; export { LoginIDM } from "./logins/LoginIDM"; // pages export { AdminPage } from "./pages/Admin/AdminPage"; +export { CreateReportOptions } from "./pages/CreateReportOptions/CreateReportOptions"; +export { ExportedReportPage } from "./pages/Export/ExportedReportPage"; export { HelpPage } from "./pages/HelpPage/HelpPage"; -export { ProfilePage } from "./pages/Profile/ProfilePage"; export { NotFoundPage } from "./pages/NotFound/NotFoundPage"; -export { ExportedReportPage } from "./pages/Export/ExportedReportPage"; +export { ProfilePage } from "./pages/Profile/ProfilePage"; +// report +export { MeasureReplacementModal } from "./report/MeasureReplacementModal"; +export { Page } from "./report/Page"; +export { PraDisclosure } from "./report/PraDisclosure"; +export { ReportModal } from "./report/ReportModal"; +export { ReportPageWrapper } from "./report/ReportPageWrapper"; +export { Sidebar } from "./report/Sidebar"; +export { SubnavBar } from "./report/SubnavBar"; // menus export { Menu } from "./menus/Menu"; export { MenuOption } from "./menus/MenuOption"; @@ -56,6 +65,7 @@ export { AddEditReportModal } from "./modals/AddEditReportModal"; export { PostLogoutRedirect } from "./PostLogoutRedirect/index"; // tables export { Table } from "./tables/Table"; +export { TableStatusIcon } from "./tables/TableStatusIcon"; // dashboard export { DashboardPage } from "./pages/Dashboard/DashboardPage"; export { DashboardTable } from "./pages/Dashboard/DashboardTable"; diff --git a/services/ui-src/src/components/report/Elements.tsx b/services/ui-src/src/components/report/Elements.tsx index 293aaccb..33c76204 100644 --- a/services/ui-src/src/components/report/Elements.tsx +++ b/services/ui-src/src/components/report/Elements.tsx @@ -1,5 +1,5 @@ +import { useNavigate, useParams } from "react-router-dom"; import { Button, Heading, Stack, Image, Text } from "@chakra-ui/react"; -import { useStore } from "utils"; import { HeaderTemplate, SubHeaderTemplate, @@ -7,8 +7,8 @@ import { AccordionTemplate, ButtonLinkTemplate, PageElement, -} from "../../types/report"; -import { TemplateCardAccordion } from "components/accordions/TemplateCardAccordion"; +} from "types"; +import { TemplateCardAccordion } from "components"; import arrowLeftIcon from "assets/icons/arrows/icon_arrow_left_blue.png"; export interface PageElementProps { @@ -58,10 +58,14 @@ export const accordionElement = (props: PageElementProps) => { }; export const buttonLinkElement = (props: PageElementProps) => { + const { reportType, state, reportId } = useParams(); + const navigate = useNavigate(); const button = props.element as ButtonLinkTemplate; - const { setCurrentPageId } = useStore(); + const nav = () => + navigate(`/report/${reportType}/${state}/${reportId}/${button.to}`); + return ( - diff --git a/services/ui-src/src/components/report/MeasureTable.test.tsx b/services/ui-src/src/components/report/MeasureTable.test.tsx index 25ff3568..ff603e5e 100644 --- a/services/ui-src/src/components/report/MeasureTable.test.tsx +++ b/services/ui-src/src/components/report/MeasureTable.test.tsx @@ -4,6 +4,7 @@ import { MeasureTableElement } from "./MeasureTable"; import { mockUseStore } from "utils/testing/setupJest"; import { useStore } from "utils/state/useStore"; import { ElementType, PageElement } from "types"; +import { MemoryRouter } from "react-router-dom"; jest.mock("utils/state/useStore"); const mockedUseStore = useStore as jest.MockedFunction; @@ -15,10 +16,12 @@ const mockedMeasureTableElement = { }; const MeasureTableComponent = ( - + + + ); /* To do: add real test */ diff --git a/services/ui-src/src/components/report/MeasureTable.tsx b/services/ui-src/src/components/report/MeasureTable.tsx index 2a52106a..c6d16c70 100644 --- a/services/ui-src/src/components/report/MeasureTable.tsx +++ b/services/ui-src/src/components/report/MeasureTable.tsx @@ -1,3 +1,4 @@ +import { useNavigate, useParams } from "react-router-dom"; import { Button, Table, @@ -9,24 +10,22 @@ import { Text, Link, } from "@chakra-ui/react"; -import { useStore } from "utils"; -import { MeasureReplacementModal } from "./MeasureReplacementModal"; +import { MeasureReplacementModal, TableStatusIcon } from "components"; import { isMeasureTemplate, MeasurePageTemplate, MeasureTableTemplate, -} from "../../types/report"; +} from "types"; +import { useStore } from "utils"; import { PageElementProps } from "./Elements"; -import { TableStatusIcon } from "components/tables/TableStatusIcon"; export const MeasureTableElement = (props: PageElementProps) => { const table = props.element as MeasureTableTemplate; const { report, - setMeasure, + // setMeasure, setModalComponent, setModalOpen, - setCurrentPageId, } = useStore(); const measures = report?.pages.filter((page) => isMeasureTemplate(page) @@ -48,9 +47,14 @@ export const MeasureTableElement = (props: PageElementProps) => { setModalComponent(modal); }; - const onEdit = (measure: MeasurePageTemplate) => { - setCurrentPageId(measure.id); - setMeasure(measure.cmit!); + const { reportType, state, reportId } = useParams(); + const navigate = useNavigate(); + + // TO-DO: Where does cmit need to be set? Does it happen onEdit click? + const handleEditClick = (measureId: string) => { + const path = `/report/${reportType}/${state}/${reportId}/${measureId}`; + navigate(path); + // setMeasure(measure.cmit!); }; // Build Rows @@ -73,7 +77,8 @@ export const MeasureTableElement = (props: PageElementProps) => { - diff --git a/services/ui-src/src/components/report/Page.test.tsx b/services/ui-src/src/components/report/Page.test.tsx index 035cdf92..76454dea 100644 --- a/services/ui-src/src/components/report/Page.test.tsx +++ b/services/ui-src/src/components/report/Page.test.tsx @@ -1,11 +1,14 @@ -import { render } from "@testing-library/react"; +import { useNavigate, useParams } from "react-router-dom"; +import userEvent from "@testing-library/user-event"; +import { render, screen } from "@testing-library/react"; import { ElementType, PageElement } from "types/report"; -import { Page } from "./Page"; +import { useStore } from "utils"; import { mockUseStore } from "utils/testing/setupJest"; -import { useStore } from "utils/state/useStore"; +import { Page } from "./Page"; jest.mock("react-router-dom", () => ({ useNavigate: jest.fn(), + useParams: jest.fn(), })); jest.mock("utils/state/useStore"); @@ -23,6 +26,14 @@ jest.mock("./StatusTable", () => { return { StatusTableElement: () =>
Status Table
}; }); +const mockNavigate = jest.fn(); +(useNavigate as jest.Mock).mockReturnValue(mockNavigate); +(useParams as jest.Mock).mockReturnValue({ + reportType: "exampleReport", + state: "exampleState", + reportId: "123", +}); + const elements: PageElement[] = [ { type: ElementType.Header, @@ -86,6 +97,31 @@ describe("Page Component", () => { const { container } = render(); expect(container).not.toBeEmptyDOMElement(); }); + + test("should render and navigate correctly for ButtonLink element", async () => { + render( + + ); + + // Button renders + const button = screen.getByRole("button", { name: /click me/i }); + expect(button).toBeInTheDocument(); + + // Navigation + await userEvent.click(button); + expect(mockNavigate).toHaveBeenCalledWith( + "/report/exampleReport/exampleState/123/report-page-id" + ); + }); + test("should not render if it is passed missing types", () => { // Page Element prevents us from doing this with typescript, but the real world may have other plans const badObject = { type: "unused element name" }; diff --git a/services/ui-src/src/components/report/ReportPageWrapper.test.tsx b/services/ui-src/src/components/report/ReportPageWrapper.test.tsx index c4bdefb4..4d2f056a 100644 --- a/services/ui-src/src/components/report/ReportPageWrapper.test.tsx +++ b/services/ui-src/src/components/report/ReportPageWrapper.test.tsx @@ -1,4 +1,4 @@ -import { render, waitFor } from "@testing-library/react"; +import { screen, render, waitFor } from "@testing-library/react"; import { ElementType, MeasurePageTemplate, @@ -116,28 +116,31 @@ describe("ReportPageWrapper", () => { reportId: "QMNJ123", }); }); - test("should not render if missing params", () => { + test("should not render if missing params", async () => { mockUseParams.mockReturnValue({ reportType: undefined, state: undefined, reportId: undefined, }); - const { getByText } = render(); - expect(getByText("bad params")).toBeTruthy(); // To be updated with real error page + render(); + await waitFor(() => expect(mockGetReport).toHaveBeenCalled); + expect(screen.getByText("bad params")).toBeTruthy(); // To be updated with real error page }); - test("should render Loading if report not loaded", () => { + test("should render Loading if report not loaded", async () => { mockGetReport.mockResolvedValueOnce(undefined); - const { getByText } = render(); - expect(getByText("Loading")).toBeTruthy(); // To be updated with real loading page + render(); + await waitFor(() => expect(mockGetReport).toHaveBeenCalled); + expect(screen.getByText("Loading")).toBeTruthy(); // To be updated with real loading page }); test("should render if report exists", async () => { - const { queryAllByText, getByText } = render(); + render(); + await waitFor(() => expect(mockGetReport).toHaveBeenCalled); await waitFor(() => { - expect(queryAllByText("General Information")).toBeDefined(); + expect(screen.queryAllByText("General Information")).toBeDefined(); }); - expect(getByText("Continue")).toBeTruthy(); - expect(queryAllByText("General Information")[0]).toBeTruthy(); + expect(screen.getByText("Continue")).toBeTruthy(); + expect(screen.queryAllByText("General Information")[0]).toBeTruthy(); }); }); diff --git a/services/ui-src/src/components/report/ReportPageWrapper.tsx b/services/ui-src/src/components/report/ReportPageWrapper.tsx index bc2a213f..18905bd1 100644 --- a/services/ui-src/src/components/report/ReportPageWrapper.tsx +++ b/services/ui-src/src/components/report/ReportPageWrapper.tsx @@ -1,15 +1,16 @@ -import { useParams } from "react-router-dom"; -import { Box, Button, Divider, Flex, HStack, VStack } from "@chakra-ui/react"; import { useEffect, useMemo, useState } from "react"; -import { Page } from "./Page"; -import { Sidebar } from "./Sidebar"; -import { ReportModal } from "./ReportModal"; -import { SubnavBar } from "./SubnavBar"; -import { getReport } from "utils/api/requestMethods/report"; -import { useStore } from "utils"; +import { useParams, useNavigate } from "react-router-dom"; import { FormProvider, useForm } from "react-hook-form"; -import { FormPageTemplate } from "types/report"; -import { PraDisclosure } from "./PraDisclosure"; +import { Box, Button, Divider, Flex, HStack, VStack } from "@chakra-ui/react"; +import { FormPageTemplate } from "types"; +import { getReport, useStore } from "utils"; +import { + ReportModal, + Sidebar, + SubnavBar, + Page, + PraDisclosure, +} from "components"; export const ReportPageWrapper = () => { const { @@ -21,7 +22,7 @@ export const ReportPageWrapper = () => { setAnswers, setCurrentPageId, } = useStore(); - const { reportType, state, reportId } = useParams(); + const { reportType, state, reportId, pageId } = useParams(); const [isLoading, setIsLoading] = useState(true); const methods = useForm({ defaultValues: useMemo(() => { @@ -31,11 +32,16 @@ export const ReportPageWrapper = () => { shouldUnregister: true, }); + const navigate = useNavigate(); + const { handleSubmit, reset } = methods; useEffect(() => { - const pageIndex = pageMap?.get(currentPageId ?? "")!; + const pageIndex = pageMap?.get(pageId ?? "")!; reset(report?.pages[pageIndex]); - }, [currentPageId]); + if (pageId) { + setCurrentPageId(pageId); + } + }, [pageId]); const handleBlur = (data: any) => { if (!report) return; @@ -47,6 +53,9 @@ export const ReportPageWrapper = () => { try { const result = await getReport(reportType, state, reportId); setReport(result); + if (pageId) { + setCurrentPageId(pageId); + } setIsLoading(false); } catch { // console.log("oopsy") @@ -68,7 +77,8 @@ export const ReportPageWrapper = () => { const currentPage = report.pages[pageMap.get(currentPageId)!]; const SetPageIndex = (newPageIndex: number) => { if (!parentPage) return; // Pages can exist outside of the direct parentage structure - setCurrentPageId(parentPage.childPageIds[newPageIndex]); + const sectionId = parentPage.childPageIds[newPageIndex]; + navigate(`/report/${reportType}/${state}/${reportId}/${sectionId}`); }; return ( diff --git a/services/ui-src/src/components/report/Sidebar.test.tsx b/services/ui-src/src/components/report/Sidebar.test.tsx index 91d542cc..34b3bc91 100644 --- a/services/ui-src/src/components/report/Sidebar.test.tsx +++ b/services/ui-src/src/components/report/Sidebar.test.tsx @@ -1,8 +1,29 @@ import { act, render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; +import { mockUseStore } from "utils/testing/setupJest"; +import { BrowserRouter as Router, useParams } from "react-router-dom"; import { Sidebar } from "./Sidebar"; +import { useStore } from "utils"; + +jest.mock("utils/other/useBreakpoint", () => ({ + useBreakpoint: jest.fn(() => ({ + isDesktop: true, + })), +})); + +jest.mock("utils/state/useStore"); +const mockedUseStore = useStore as jest.MockedFunction; +mockedUseStore.mockReturnValue(mockUseStore); + +jest.mock("react-router-dom", () => ({ + ...jest.requireActual("react-router-dom"), + useNavigate: () => mockUseNavigate, + useParams: jest.fn(), +})); const setCurrentPageId = jest.fn(); +const mockUseNavigate = jest.fn(); + const mockPageMap = new Map(); mockPageMap.set("root", 0); mockPageMap.set("id-1", 1); @@ -18,60 +39,72 @@ const report = { ], }; -const mockReportStore = jest.fn().mockImplementation(() => ({ - pageMap: mockPageMap, - report: report, - currentPageId: "id-1", - setCurrentPageId, -})); -jest.mock("../../utils/state/useStore", () => ({ - useStore: () => mockReportStore(), -})); - describe("Sidebar", () => { + beforeEach(() => { + (useStore as unknown as jest.Mock).mockReturnValue({ + pageMap: mockPageMap, + report, + currentPageId: "id-1", + setCurrentPageId, + }); + (useParams as jest.Mock).mockReturnValue({ + reportType: "exampleReport", + state: "exampleState", + reportId: "123", + }); + }); test("should not render if missing details from the store", () => { - mockReportStore.mockReturnValueOnce({ + (useStore as unknown as jest.Mock).mockReturnValueOnce({ pageMap: undefined, report: undefined, currentPageId: undefined, setCurrentPageId, }); - const { container } = render(); - expect(container).toBeEmptyDOMElement(); - }); - test("should not render if missing root in page map", () => { - mockReportStore.mockReturnValueOnce({ - pageMap: new Map(), - report: report, - currentPageId: "id-1", - setCurrentPageId, - }); - const { container } = render(); + const { container } = render( + + + + ); expect(container).toBeEmptyDOMElement(); }); test("should render section headers", () => { - const { getByText } = render(); - expect(getByText("Section 1")).toBeTruthy(); - expect(getByText("Section 2")).toBeTruthy(); + render( + + + + ); + expect(screen.getByText("Section 1")).toBeInTheDocument(); + expect(screen.getByText("Section 2")).toBeInTheDocument(); }); test("should attempt to navigate on Click", async () => { - const { getByText } = render(); - const button = getByText("Section 1"); + render( + + + + ); + const button = screen.getByText("Section 1"); await userEvent.click(button); - expect(setCurrentPageId).toHaveBeenCalledWith("id-1"); + const reportPath = "/report/exampleReport/exampleState/123/id-1"; + expect(mockUseNavigate).toHaveBeenCalledWith(reportPath); }); test("should expand on Click", async () => { - const { getByText, queryByText } = render(); + render( + + + + ); + + const expandButton = screen.getByAltText("Expand subitems"); + expect(screen.queryByText("Child 1")).not.toBeInTheDocument(); - expect(getByText("Section 1")).toBeTruthy(); await act(async () => { - const button = screen.getByAltText("Expand subitems"); - await userEvent.click(button); + await userEvent.click(expandButton); }); - expect(queryByText("Child 1")).toBeInTheDocument(); + + expect(screen.getByText("Child 1")).toBeInTheDocument(); }); }); diff --git a/services/ui-src/src/components/report/Sidebar.tsx b/services/ui-src/src/components/report/Sidebar.tsx index 5055a0f5..dc6ec74d 100644 --- a/services/ui-src/src/components/report/Sidebar.tsx +++ b/services/ui-src/src/components/report/Sidebar.tsx @@ -1,4 +1,5 @@ import { Box, Button, Heading, Flex, Image } from "@chakra-ui/react"; +import { useNavigate, useParams } from "react-router-dom"; import { useBreakpoint, useStore } from "utils"; import arrowDownIcon from "assets/icons/arrows/icon_arrow_down_gray.svg"; import arrowUpIcon from "assets/icons/arrows/icon_arrow_up_gray.svg"; @@ -14,7 +15,8 @@ const navItem = (title: string, index: number) => { }; export const Sidebar = () => { - const { report, pageMap, currentPageId, setCurrentPageId } = useStore(); + const { report, pageMap, currentPageId } = useStore(); + const { reportType, state, reportId } = useParams(); const { isDesktop } = useBreakpoint(); const [isOpen, setIsOpen] = useState(isDesktop); const [toggleList, setToggleList] = useState<{ [key: string]: boolean }>({}); @@ -23,14 +25,16 @@ export const Sidebar = () => { return null; } - const setToggle = (sectonId: string) => { + const setToggle = (sectionId: string) => { const list = toggleList; - list[sectonId] = !toggleList[sectonId]; + list[sectionId] = !toggleList[sectionId]; setToggleList({ ...list }); }; - const onNavSelect = (sectonId: string) => { - setCurrentPageId(sectonId); + const navigate = useNavigate(); + + const onNavSelect = (sectionId: string) => { + navigate(`/report/${reportType}/${state}/${reportId}/${sectionId}`); }; const navSection = (section: number, index: number = 0): ReactNode => { diff --git a/services/ui-src/src/components/report/StatusTable.test.tsx b/services/ui-src/src/components/report/StatusTable.test.tsx index 161938c5..72b49833 100644 --- a/services/ui-src/src/components/report/StatusTable.test.tsx +++ b/services/ui-src/src/components/report/StatusTable.test.tsx @@ -1,17 +1,19 @@ import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { StatusTableElement } from "./StatusTable"; -import { useNavigate } from "react-router-dom"; +import { MemoryRouter } from "react-router-dom"; import { useStore } from "utils"; -jest.mock("react-router-dom", () => ({ - useNavigate: jest.fn(), -})); - jest.mock("utils", () => ({ useStore: jest.fn(), })); +const mockNavigate = jest.fn(); +jest.mock("react-router-dom", () => ({ + ...jest.requireActual("react-router-dom"), + useNavigate: () => mockNavigate, +})); + const report = { type: "QM", id: "mock-report-id", @@ -24,11 +26,7 @@ const report = { }; describe("StatusTableElement", () => { - const mockNavigate = jest.fn(); - const setCurrentPageId = jest.fn(); - beforeEach(() => { - (useNavigate as jest.Mock).mockReturnValue(mockNavigate); jest.clearAllMocks(); const mockPageMap = new Map(); @@ -39,12 +37,15 @@ describe("StatusTableElement", () => { (useStore as unknown as jest.Mock).mockReturnValue({ pageMap: mockPageMap, report: report, - setCurrentPageId, }); }); test("table with section titles and status icons render", () => { - render(); + render( + + + + ); // Table headers expect(screen.getByText("Section")).toBeInTheDocument(); @@ -56,24 +57,31 @@ describe("StatusTableElement", () => { expect(screen.getByAltText("complete icon")).toBeInTheDocument(); }); - test("when Edit button is clicked call setCurrentPageId with the correct pageId", async () => { - render(); + test("when the Edit button is clicked, navigate to the correct editable page", async () => { + render( + + + + ); - const editButton = screen.getByRole("button", { name: /Edit/i }); + const editButton = screen.getAllByRole("button", { name: /Edit/i })[0]; await userEvent.click(editButton); - expect(setCurrentPageId).toHaveBeenCalledWith("id-1"); + expect(editButton).toBeVisible(); }); - test("when the Review PDF button is clicked navigate to PDF", async () => { - render(); - - const reviewPdfButton = screen.getByRole("button", { name: /Review PDF/i }); + test("when the Review PDF button is clicked, navigate to PDF", async () => { + render( + + + + ); - const path = `/report/${report.type}/${report.state}/${report.id}/export`; - expect(reviewPdfButton).toHaveAttribute("to", path); + const reviewPdfButton = screen.getByRole("link", { name: /Review PDF/i }); - await userEvent.click(reviewPdfButton); + const PdfPath = `/report/${report.type}/${report.state}/${report.id}/export`; + expect(reviewPdfButton).toHaveAttribute("href", PdfPath); + expect(reviewPdfButton).toHaveAttribute("target", "_blank"); }); test("if pageMap is not defined return null", () => { @@ -81,7 +89,11 @@ describe("StatusTableElement", () => { pageMap: null, }); - const { container } = render(); + const { container } = render( + + + + ); expect(container.firstChild).toBeNull(); }); }); diff --git a/services/ui-src/src/components/report/StatusTable.tsx b/services/ui-src/src/components/report/StatusTable.tsx index f2508730..73a514b0 100644 --- a/services/ui-src/src/components/report/StatusTable.tsx +++ b/services/ui-src/src/components/report/StatusTable.tsx @@ -1,4 +1,4 @@ -import { Link as RouterLink } from "react-router-dom"; +import { Link as RouterLink, useNavigate, useParams } from "react-router-dom"; import { Button, Image, @@ -19,7 +19,8 @@ import { TableStatusIcon } from "components/tables/TableStatusIcon"; import { reportBasePath } from "utils/other/routing"; export const StatusTableElement = () => { - const { pageMap, report, setCurrentPageId } = useStore(); + const { pageMap, report } = useStore(); + const { reportType, state, reportId } = useParams(); if (!pageMap) { return null; @@ -29,13 +30,21 @@ export const StatusTableElement = () => { .childPageIds; const sections = childPages.slice(0, -1).map((id) => { const pageIdx = pageMap.get(id); - if (!pageIdx) return; + if (!pageIdx) return null; return report?.pages[pageIdx] as ParentPageTemplate; }); + const navigate = useNavigate(); + + const handleEditClick = (sectionId: string) => { + const path = `/report/${reportType}/${state}/${reportId}/${sectionId}`; + navigate(path); + }; + // Build Rows const rows = sections.map((section, index) => { if (!section) return; + return ( @@ -43,16 +52,13 @@ export const StatusTableElement = () => { {/* TODO: Logic for when a page is incomplete to change status icon and text */} - + diff --git a/services/ui-src/src/utils/index.ts b/services/ui-src/src/utils/index.ts index 4f29f9cf..cda7d93e 100644 --- a/services/ui-src/src/utils/index.ts +++ b/services/ui-src/src/utils/index.ts @@ -1,8 +1,9 @@ // api export * from "./api/apiLib"; export * from "./api/providers/ApiProvider"; -export * from "./api/requestMethods/getTemplateUrl"; export * from "./api/requestMethods/banner"; +export * from "./api/requestMethods/getTemplateUrl"; +export * from "./api/requestMethods/report"; // auth export * from "./auth/UserProvider"; export * from "./auth/authLifecycle";