update button to function as link

services/ui-src/src/components/report/StatusTable.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
 import { StatusTableElement } from "./StatusTable";
 import { MemoryRouter } from "react-router-dom";
 import { useStore } from "utils";
@@ -8,12 +7,6 @@ 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",
@@ -64,11 +57,9 @@ describe("StatusTableElement", () => {
       </MemoryRouter>
     );
 
-    const editButton = screen.getAllByRole("button", { name: /Edit/i })[0];
-    await userEvent.click(editButton);
-
-    expect(editButton).toBeVisible();
-    expect(mockNavigate).toHaveBeenCalled();
+    const editButton = screen.getByRole("link", { name: /Edit/i });
+    const editButtonPath = `/report/${report.type}/${report.state}/${report.id}/id-1`;
+    expect(editButton).toHaveAttribute("href", editButtonPath);
   });
 
   test("when the Review PDF button is clicked, navigate to PDF", async () => {

services/ui-src/src/components/report/StatusTable.tsx

@@ -1,4 +1,4 @@
-import { Link as RouterLink, useNavigate, useParams } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
 import {
   Button,
   Image,
@@ -20,8 +20,6 @@ import { reportBasePath } from "utils/other/routing";
 
 export const StatusTableElement = () => {
   const { pageMap, report } = useStore();
-  const { reportType, state, reportId } = useParams();
-  const navigate = useNavigate();
 
   if (!pageMap) {
     return null;
@@ -35,11 +33,6 @@ export const StatusTableElement = () => {
     return report?.pages[pageIdx] as ParentPageTemplate;
   });
 
-  const handleEditClick = (sectionId: string) => {
-    const path = `/report/${reportType}/${state}/${reportId}/${sectionId}`;
-    navigate(path);
-  };
-
   // Build Rows
   const rows = sections.map((section, index) => {
     if (!section) return null;
@@ -55,9 +48,10 @@ export const StatusTableElement = () => {
         </Td>
         <Td>
           <Button
+            as={RouterLink}
+            to={reportBasePath(report!) + `/${section.id}`}
             variant="outline"
             leftIcon={<Image src={editIconPrimary} />}
-            onClick={() => handleEditClick(section.id)}
           >
             Edit
           </Button>