[HCBS] Create Submission Dashboard (#32)

services/ui-src/src/components/accordions/InstructionsAccordion.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { InstructionsAccordion } from "components";
+import { mockAccordion } from "utils/testing/setupJest";
+import { testA11y } from "utils/testing/commonTests";
+
+const accordionComponent = <InstructionsAccordion verbiage={mockAccordion} />;
+
+describe("<InstructionsAccordion />", () => {
+  beforeEach(() => {
+    render(accordionComponent);
+  });
+
+  test("Accordion is visible", () => {
+    expect(screen.getByText(mockAccordion.buttonLabel)).toBeVisible();
+  });
+
+  test("Accordion default closed state only shows the question", () => {
+    expect(screen.getByText(mockAccordion.buttonLabel)).toBeVisible();
+    expect(screen.getByText(mockAccordion.text)).not.toBeVisible();
+  });
+
+  test("Accordion should show answer on click", async () => {
+    const accordionQuestion = screen.getByText(mockAccordion.buttonLabel);
+    expect(accordionQuestion).toBeVisible();
+    expect(screen.getByText(mockAccordion.text)).not.toBeVisible();
+    await userEvent.click(accordionQuestion);
+    expect(accordionQuestion).toBeVisible();
+    expect(screen.getByText(mockAccordion.text)).toBeVisible();
+  });
+
+  testA11y(accordionComponent);
+});

services/ui-src/src/components/accordions/InstructionsAccordion.tsx

@@ -0,0 +1,72 @@
+import { Accordion, Box, ListItem, UnorderedList } from "@chakra-ui/react";
+import { AccordionItem } from "components";
+import { AnyObject } from "types";
+import { parseCustomHtml, sanitizeAndParseHtml } from "utils";
+
+export const InstructionsAccordion = ({ verbiage, ...props }: Props) => {
+  const { buttonLabel, intro, list, text } = verbiage;
+  return (
+    <Accordion allowToggle={true} allowMultiple={true} sx={sx.root} {...props}>
+      <AccordionItem label={buttonLabel} sx={sx.item}>
+        <Box sx={sx.textBox}>{parseCustomHtml(intro)}</Box>
+        {list && parseList(list)}
+        {text && <Box sx={sx.textBox}>{parseCustomHtml(text)}</Box>}
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export const parseList = (list: any) => {
+  return (
+    <UnorderedList sx={sx.list}>
+      {list?.map((listItem: string | AnyObject, index: number) =>
+        typeof listItem === "string" ? (
+          <ListItem key={index}>{sanitizeAndParseHtml(listItem)}</ListItem>
+        ) : (
+          parseList(listItem)
+        )
+      )}
+    </UnorderedList>
+  );
+};
+
+interface Props {
+  verbiage: AnyObject;
+  [key: string]: any;
+}
+
+const sx = {
+  root: {
+    marginTop: "2rem",
+    color: "palette.base",
+  },
+  item: {
+    marginBottom: "1.5rem",
+    borderStyle: "none",
+  },
+  textBox: {
+    ".mobile &": {
+      paddingLeft: "1rem",
+    },
+    a: {
+      color: "palette.primary",
+      textDecoration: "underline",
+    },
+    header: {
+      marginBottom: "1.5rem",
+    },
+    p: {
+      marginBottom: "1.5rem",
+    },
+  },
+  text: {
+    marginBottom: "1rem",
+  },
+  list: {
+    paddingLeft: "1rem",
+    margin: "1.5rem",
+    li: {
+      marginBottom: "1.25rem",
+    },
+  },
+};

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

@@ -1,5 +1,5 @@
 import { Route, Routes } from "react-router-dom";
-import { HelpPage, HomePage, ProfilePage } from "components";
+import { HelpPage, HomePage, ProfilePage, DashboardPage } from "components";
 import { CreateReportOptions } from "components/pages/CreateReportOptions/CreateReportOptions";
 import { ReportPageWrapper } from "components/report/ReportPageWrapper";
 
@@ -11,6 +11,7 @@ export const AppRoutes = () => {
         <Route path="/" element={<HomePage />} />
         <Route path="/profile" element={<ProfilePage />} />
         <Route path="/help" element={<HelpPage />} />
+        <Route path="/dashboard" element={<DashboardPage />} />
         <Route path="/report/QM" element={<CreateReportOptions />} />
         <Route
           path="/report/:reportType/:state/:reportId"

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

@@ -2,6 +2,7 @@
 export { AccordionItem } from "./accordions/AccordionItem";
 export { FaqAccordion } from "./accordions/FaqAccordion";
 export { TemplateCardAccordion } from "./accordions/TemplateCardAccordion";
+export { InstructionsAccordion } from "./accordions/InstructionsAccordion";
 // alerts
 export { Alert } from "./alerts/Alert";
 export { ErrorAlert } from "./alerts/ErrorAlert";
@@ -32,3 +33,6 @@ export { MenuOption } from "./menus/MenuOption";
 export { PostLogoutRedirect } from "./PostLogoutRedirect/index";
 // tables
 export { Table } from "./tables/Table";
+// dashboard
+export { DashboardPage } from "./pages/Dashboard/DashboardPage";
+export { DashboardTable } from "./pages/Dashboard/DashboardTable";

services/ui-src/src/components/pages/Dashboard/DashboardPage.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from "@testing-library/react";
+import { DashboardPage } from "components";
+import { mockStateUser } from "utils/testing/mockUsers";
+import { RouterWrappedComponent } from "utils/testing/setupJest";
+import { useBreakpoint, useStore, makeMediaQueryClasses } from "utils";
+import { useUser } from "utils/auth/useUser";
+import dashboardVerbiage from "verbiage/pages/dashboard";
+
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+jest.mock("utils/auth/useUser");
+const mockedUseUser = useUser as jest.MockedFunction<typeof useUser>;
+
+jest.mock("utils/other/useBreakpoint");
+const mockUseBreakpoint = useBreakpoint as jest.MockedFunction<
+  typeof useBreakpoint
+>;
+const mockMakeMediaQueryClasses = makeMediaQueryClasses as jest.MockedFunction<
+  typeof makeMediaQueryClasses
+>;
+
+jest.mock("utils/state/useStore");
+const mockedUseStore = useStore as jest.MockedFunction<typeof useStore>;
+
+const mockUseNavigate = jest.fn();
+jest.mock("react-router-dom", () => ({
+  useNavigate: () => mockUseNavigate,
+  useLocation: jest.fn(() => ({
+    pathname: "/mock-dashboard",
+  })),
+}));
+
+const dashboardWithNoReports = (
+  <RouterWrappedComponent>
+    <DashboardPage />
+  </RouterWrappedComponent>
+);
+
+describe("<DashboardPage />", () => {
+  describe("Test Report Dashboard with no reports", () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+      mockedUseUser.mockReturnValue(mockStateUser);
+      mockedUseStore.mockReturnValue({
+        reportsByState: undefined,
+      });
+      mockUseBreakpoint.mockReturnValue({
+        isMobile: false,
+      });
+      mockMakeMediaQueryClasses.mockReturnValue("desktop");
+    });
+
+    test("Dashboard renders table with empty text", () => {
+      mockedUseStore.mockReturnValue(mockStateUser);
+      render(dashboardWithNoReports);
+      expect(screen.getByText(dashboardVerbiage.body.empty)).toBeVisible();
+    });
+  });
+});

services/ui-src/src/components/pages/Dashboard/DashboardPage.tsx

@@ -0,0 +1,154 @@
+import { useState } from "react";
+import { Link as RouterLink, useNavigate } from "react-router-dom";
+import { States } from "../../../constants";
+import { ReportMetadataShape } from "types";
+
+import {
+  PageTemplate,
+  InstructionsAccordion,
+  DashboardTable,
+} from "components";
+import { Box, Button, Image, Heading, Link, Text } from "@chakra-ui/react";
+import { parseCustomHtml, useStore } from "utils";
+
+import dashboardVerbiage from "verbiage/pages/dashboard";
+import accordion from "verbiage/pages/accordion";
+
+import arrowLeftIcon from "assets/icons/arrows/icon_arrow_left_blue.png";
+
+export const DashboardPage = () => {
+  const {
+    state: userState,
+    userIsReadOnly,
+    userIsAdmin,
+  } = useStore().user ?? {};
+  const navigate = useNavigate();
+
+  const [reportsToDisplay] = useState<ReportMetadataShape[] | undefined>(
+    undefined
+  );
+
+  const { intro, body } = dashboardVerbiage;
+
+  // if an admin or a read-only user has selected a state, retrieve it from local storage
+  const adminSelectedState = localStorage.getItem("selectedState") || undefined;
+
+  // if a user is an admin or a read-only type, use the selected state, otherwise use their assigned state
+  const activeState =
+    userIsAdmin || userIsReadOnly ? adminSelectedState : userState;
+
+  const fullStateName = States[activeState as keyof typeof States];
+
+  return (
+    <PageTemplate type="report" sx={sx.layout}>
+      <Link as={RouterLink} to="/" sx={sx.returnLink}>
+        <Image src={arrowLeftIcon} alt="Arrow left" className="returnIcon" />
+        Return home
+      </Link>
+
+      <Box sx={sx.leadTextBox}>
+        <Heading as="h1" sx={sx.headerText}>
+          {fullStateName} {intro.header}
+        </Heading>
+        <InstructionsAccordion
+          verbiage={
+            userIsAdmin
+              ? accordion.adminDashboard
+              : accordion.stateUserDashboard
+          }
+          defaultIndex={0} // sets the accordion to open by default
+        />
+        {parseCustomHtml(intro.body)}
+      </Box>
+      <Box sx={sx.bodyBox}>
+        <DashboardTable reportsByState={reportsToDisplay} body={body} />
+        {!reportsToDisplay?.length && (
+          <Text sx={sx.emptyTableContainer}>{body.empty}</Text>
+        )}
+        <Box sx={sx.callToActionContainer}>
+          <Button onClick={() => navigate(body.link.route)} type="submit">
+            {body.link.callToActionText}
+          </Button>
+        </Box>
+      </Box>
+    </PageTemplate>
+  );
+};
+
+const sx = {
+  layout: {
+    ".contentFlex": {
+      maxWidth: "appMax",
+      marginTop: "1rem",
+      marginBottom: "3.5rem",
+    },
+  },
+  returnLink: {
+    display: "flex",
+    width: "8.5rem",
+    paddingTop: "0.5rem",
+    svg: {
+      height: "1.375rem",
+      width: "1.375rem",
+      marginTop: "-0.125rem",
+      marginRight: ".5rem",
+    },
+    textDecoration: "none",
+    _hover: {
+      textDecoration: "underline",
+    },
+    ".returnIcon": {
+      width: "1.25rem",
+      height: "1.25rem",
+      marginTop: "0.25rem",
+      marginRight: "0.5rem",
+    },
+  },
+  headerText: {
+    marginBottom: "1rem",
+    fontSize: "4xl",
+    fontWeight: "normal",
+    ".tablet &, .mobile &": {
+      fontSize: "xl",
+      lineHeight: "1.75rem",
+      fontWeight: "bold",
+    },
+  },
+  leadTextBox: {
+    width: "100%",
+    maxWidth: "55.25rem",
+    margin: "2.5rem auto 0rem",
+    ".tablet &, .mobile &": {
+      margin: "2.5rem 0 1rem",
+    },
+  },
+  bodyBox: {
+    maxWidth: "55.25rem",
+    margin: "0 auto",
+    ".desktop &": {
+      width: "100%",
+    },
+    ".tablet &, .mobile &": {
+      margin: "0",
+    },
+    ".ds-c-spinner": {
+      "&:before": {
+        borderColor: "palette.black",
+      },
+      "&:after": {
+        borderLeftColor: "palette.black",
+      },
+    },
+  },
+  emptyTableContainer: {
+    maxWidth: "75%",
+    margin: "0 auto",
+    textAlign: "center",
+  },
+  callToActionContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    marginTop: "2rem",
+  },
+};

services/ui-src/src/components/pages/Dashboard/DashboardTable.test.tsx

@@ -0,0 +1,25 @@
+import { getStatus } from "./DashboardTable";
+
+describe("<DashboardTable />", () => {
+  describe("getStatus()", () => {
+    test("should render the correct status if report has been unlocked", () => {
+      expect(getStatus("In revision", false, 1)).toBe("In revision");
+    });
+
+    test("should render the correct status if report been started", () => {
+      expect(getStatus("In progress", false, 0)).toBe("In progress");
+    });
+
+    test("should render the correct status if report has been archived", () => {
+      expect(getStatus("In progress", true, 1)).toBe("Archived");
+    });
+
+    test("should render the correct status if report has been submitted", () => {
+      expect(getStatus("Submitted", false, 1)).toBe("Submitted");
+    });
+
+    test("should render the correct status if report has not started", () => {
+      expect(getStatus("Not started", false, 0)).toBe("Not started");
+    });
+  });
+});