Merge branch 'main' into mdct-2795

services/ui-src/src/components/app/App.tsx

@@ -18,6 +18,7 @@ import {
 // utils
 import {
   fireTealiumPageView,
+  isApparentReportPage,
   makeMediaQueryClasses,
   UserContext,
   useStore,
@@ -33,7 +34,12 @@ export const App = () => {
 
   // fire tealium page view on route change
   useEffect(() => {
-    fireTealiumPageView(user, window.location.href, pathname);
+    fireTealiumPageView(
+      user,
+      window.location.href,
+      pathname,
+      isApparentReportPage(pathname)
+    );
   }, [key]);
 
   const authenticatedRoutes = (

services/ui-src/src/components/reports/ReportPageFooter.test.tsx

@@ -3,10 +3,28 @@ import { axe } from "jest-axe";
 // components
 import { ReportPageFooter } from "components";
 //utils
-import { mockForm } from "utils/testing/setupJest";
+import { mockForm, RouterWrappedComponent } from "utils/testing/setupJest";
 
-const reportPageComponentWithoutForm = <ReportPageFooter />;
-const reportPageComponentWithForm = <ReportPageFooter form={mockForm} />;
+const mockRoutes = {
+  previousRoute: "/mock-previous-route",
+  nextRoute: "/mock-next-route",
+};
+
+jest.mock("utils", () => ({
+  ...jest.requireActual("utils"),
+  useFindRoute: () => mockRoutes,
+}));
+
+const reportPageComponentWithoutForm = (
+  <RouterWrappedComponent>
+    <ReportPageFooter />
+  </RouterWrappedComponent>
+);
+const reportPageComponentWithForm = (
+  <RouterWrappedComponent>
+    <ReportPageFooter form={mockForm} />
+  </RouterWrappedComponent>
+);
 
 describe("Test ReportPageFooter without form", () => {
   test("Check that ReportPageFooter without form renders", () => {

services/ui-src/src/components/reports/ReportPageFooter.tsx

@@ -1,22 +1,30 @@
+import { useNavigate } from "react-router-dom";
 // components
 import { Box, Button, Flex, Image, Spinner } from "@chakra-ui/react";
 // utils
+import { useFindRoute, useStore } from "utils";
 import { FormJson } from "types";
 // assets
 import nextIcon from "assets/icons/icon_next_white.png";
 import previousIcon from "assets/icons/icon_previous_blue.png";
 
 export const ReportPageFooter = ({ submitting, form, ...props }: Props) => {
-  const hidePrevious = false;
+  const navigate = useNavigate();
   const formIsDisabled = false;
+  const report = useStore().report;
+  const { previousRoute, nextRoute } = useFindRoute(
+    report?.formTemplate.flatRoutes,
+    report?.formTemplate.basePath
+  );
+  const hidePrevious = previousRoute === "/wp" || previousRoute === "/sar";
 
   return (
     <Box sx={sx.footerBox} {...props}>
       <Box>
         <Flex sx={hidePrevious ? sx.floatButtonRight : sx.buttonFlex}>
           {!hidePrevious && (
             <Button
-              onClick={() => {}}
+              onClick={() => navigate(previousRoute)}
               variant="outline"
               leftIcon={
                 <Image src={previousIcon} alt="Previous" sx={sx.arrowIcon} />
@@ -27,7 +35,7 @@ export const ReportPageFooter = ({ submitting, form, ...props }: Props) => {
           )}
           {!form?.id || formIsDisabled ? (
             <Button
-              onClick={() => {}}
+              onClick={() => navigate(nextRoute)}
               rightIcon={
                 submitting ? (
                   <></>

services/ui-src/src/components/reports/StandardReportPage.tsx

@@ -1,20 +1,35 @@
+import { useNavigate } from "react-router-dom";
 // components
 import { Box } from "@chakra-ui/react";
 import { Form, ReportPageFooter, ReportPageIntro } from "components";
 // types
 import { StandardReportPageShape } from "types";
+// utils
+import { useFindRoute, useStore } from "utils";
 // verbiage
 import { mockStandardReportPageJson } from "utils/testing/mockForm";
 
 export const StandardReportPage = ({ route, validateOnRender }: Props) => {
   const submitting = false;
+  const navigate = useNavigate();
+  const report = useStore().report;
+  const { nextRoute } = useFindRoute(
+    report?.formTemplate.flatRoutes!,
+    report?.formTemplate.basePath
+  );
+
+  const onError = () => {
+    navigate(nextRoute);
+  };
+
   return (
     <Box>
       {route.verbiage.intro && <ReportPageIntro text={route.verbiage.intro} />}
       <Form
         id={route.form.id}
         formJson={route.form}
         onSubmit={() => {}}
+        onError={onError}
         formData={mockStandardReportPageJson.form}
         autosave
         validateOnRender={validateOnRender || false}

services/ui-src/src/utils/index.ts

@@ -12,6 +12,7 @@ export * from "./state/useStore";
 export * from "./forms/forms";
 // reports
 export * from "./reports/reports";
+export * from "./reports/routing";
 // tracking
 export * from "./tracking/tealium";
 // validation

services/ui-src/src/utils/reports/routing.test.ts

@@ -0,0 +1,44 @@
+import { useFindRoute } from "./routing";
+import {
+  mockFlattenedReportRoutes,
+  mockReportJson,
+} from "utils/testing/setupJest";
+
+const mockFallbackRoute = mockReportJson.basePath;
+const mockFlatRoutesArray = mockFlattenedReportRoutes;
+
+jest.mock("react-router-dom", () => ({
+  useLocation: jest
+    .fn()
+    .mockReturnValueOnce({ pathname: "/mock/mock-route-1" }) // first path
+    .mockReturnValueOnce({ pathname: "/mock/mock-route-2a" }) // middle path
+    .mockReturnValueOnce({ pathname: "/mock/mock-route-3" }), // last path
+}));
+
+describe("Test useFindRoute behavior at first route in array (with no previous routes)", () => {
+  it("Returns fallback as previousRoute when there are no preceding routes", () => {
+    const { previousRoute } = useFindRoute(
+      mockFlatRoutesArray,
+      mockFallbackRoute
+    );
+    expect(previousRoute).toEqual(mockFallbackRoute);
+  });
+});
+
+describe("Test useFindRoute behavior at middle route in array (with both previous and next routes)", () => {
+  it("Returns previous path when there are preceding routes and next path when there are subsequent routes", () => {
+    const { previousRoute, nextRoute } = useFindRoute(
+      mockFlatRoutesArray,
+      mockFallbackRoute
+    );
+    expect(previousRoute).toEqual("/mock/mock-route-1");
+    expect(nextRoute).toEqual("/mock/mock-route-2b");
+  });
+});
+
+describe("Test useFindRoute behavior at last route in array (with no subsequent routes)", () => {
+  it("Returns fallback if there are no subsequent routes", () => {
+    const { nextRoute } = useFindRoute(mockFlatRoutesArray, mockFallbackRoute);
+    expect(nextRoute).toEqual(mockFallbackRoute);
+  });
+});

services/ui-src/src/utils/reports/routing.ts

@@ -0,0 +1,52 @@
+import { useLocation } from "react-router-dom";
+import { ReportRoute, ReportType } from "types";
+
+/**
+ * WARNING: You probably want ReportContext.isReportPage instead.
+ * This function is called from outside the ReportContext,
+ * so it can only make a best guess.
+ */
+export const isApparentReportPage = (pathname: string): boolean => {
+  const yes = Object.values(ReportType).some((reportType) => {
+    const prefix = `/${reportType.toLowerCase()}/`;
+    /*
+     * Report pages look like "/wp/some-path", or "/sar/some-other-path"
+     * Two exceptions are the Get Started page, and the root (Dashboard) page for that report type.
+     */
+    return (
+      pathname.startsWith(prefix) &&
+      !pathname.startsWith(`/${prefix}/get-started`) &&
+      pathname.length > prefix.length
+    );
+  });
+  return yes;
+};
+
+export const useFindRoute = (
+  flatRouteArray: ReportRoute[] | undefined,
+  fallbackRoute: string = "/"
+) => {
+  const { pathname } = useLocation();
+  let calculatedRoutes = {
+    previousRoute: fallbackRoute,
+    nextRoute: fallbackRoute,
+  };
+  if (flatRouteArray) {
+    // find current route and position in array
+    const currentRouteObject = flatRouteArray.find(
+      (route: ReportRoute) => route.path === pathname
+    );
+    if (currentRouteObject) {
+      const currentPosition = flatRouteArray.indexOf(currentRouteObject);
+      // set previousRoute to previous path or fallback route
+      const previousRoute =
+        flatRouteArray[currentPosition - 1]?.path || fallbackRoute;
+      calculatedRoutes.previousRoute = previousRoute;
+      // set nextRoute to next path or fallback route
+      const nextRoute =
+        flatRouteArray[currentPosition + 1]?.path || fallbackRoute;
+      calculatedRoutes.nextRoute = nextRoute;
+    }
+  }
+  return calculatedRoutes;
+};