Merge pull request #1503 from bcgov/external-project-overview

feat: external project overview

app/components/Project/ProjectTableRow.tsx

@@ -1,6 +1,9 @@
 import Button from "@button-inc/bcgov-theme/Button";
 import { useRouter } from "next/router";
-import { getProjectRevisionFormPageRoute } from "routes/pageRoutes";
+import {
+  getExternalProjectRevisionViewPageRoute,
+  getProjectRevisionFormPageRoute,
+} from "routes/pageRoutes";
 import { useFragment, graphql } from "react-relay";
 import { ProjectTableRow_project$key } from "__generated__/ProjectTableRow_project.graphql";
 import Money from "lib/helpers/Money";
@@ -109,7 +112,14 @@ const ProjectTableRow: React.FC<Props> = ({ project, isInternal }) => {
           <Button
             size="small"
             onClick={
-              isInternal ? handleViewClick : () => console.log("placeholder")
+              isInternal
+                ? handleViewClick
+                : () =>
+                    router.push(
+                      getExternalProjectRevisionViewPageRoute(
+                        latestCommittedProjectRevision.id
+                      )
+                    )
             }
           >
             View

app/components/TaskList/ExternalTaskList.tsx

@@ -0,0 +1,93 @@
+import Link from "next/link";
+import TaskListSection from "./TaskListSection";
+
+const ExternalTaskList = ({}) => {
+  return (
+    <>
+      <Link href="/cif-external">{"< Return to Dashboard"}</Link>
+      <div className="container">
+        <ol>
+          <TaskListSection
+            key={"tasklist_section_1"}
+            defaultExpandedState={false}
+            listItemName={"Application Overview"}
+            listItemMode={""}
+            renderCaret={false}
+          >
+            {null}
+          </TaskListSection>
+          <TaskListSection
+            key={"tasklist_section_2"}
+            defaultExpandedState={false}
+            listItemName={"Attachments"}
+            listItemMode={""}
+            renderCaret={false}
+          >
+            {null}
+          </TaskListSection>
+          <TaskListSection
+            key={"tasklist_section_3"}
+            defaultExpandedState={false}
+            listItemName={"Review"}
+            listItemMode={""}
+            renderCaret={false}
+          >
+            {null}
+          </TaskListSection>
+          <TaskListSection
+            key={"tasklist_section_4"}
+            defaultExpandedState={false}
+            listItemName={"Declarations"}
+            listItemMode={""}
+            renderCaret={false}
+          >
+            {null}
+          </TaskListSection>
+          <TaskListSection
+            key={"tasklist_section_5"}
+            defaultExpandedState={false}
+            listItemName={"Submit"}
+            listItemMode={""}
+            renderCaret={false}
+          >
+            {null}
+          </TaskListSection>
+        </ol>
+        <style jsx>{`
+          ol {
+            list-style: none;
+            margin: 0;
+          }
+          a {
+            padding: 10px 0 10px 0;
+          }
+
+          h2 {
+            font-size: 1.25rem;
+            margin: 0;
+            padding: 20px 0 10px 0;
+            border-bottom: 1px solid #d1d1d1;
+            text-indent: 15px;
+          }
+
+          div :global(a) {
+            color: #1a5a96;
+          }
+
+          div :global(a:hover) {
+            text-decoration: none;
+            color: blue;
+          }
+
+          div.container {
+            background-color: #e5e5e5;
+            width: 400px;
+            margin-top: 20px;
+          }
+        `}</style>
+      </div>
+    </>
+  );
+};
+
+export default ExternalTaskList;

app/components/TaskList/TaskListSection.tsx

@@ -8,6 +8,7 @@ interface Props {
   listItemName: string;
   listItemMode?: string;
   children: React.ReactNode;
+  renderCaret?: boolean;
 }
 
 const TaskListSection: React.FC<Props> = ({
@@ -16,6 +17,7 @@ const TaskListSection: React.FC<Props> = ({
   listItemName,
   listItemMode,
   children,
+  renderCaret = true,
 }) => {
   const [isExpanded, setIsExpanded] = useState(defaultExpandedState);
   const toggleCustomAccordion = () => setIsExpanded(!isExpanded);
@@ -35,7 +37,9 @@ const TaskListSection: React.FC<Props> = ({
           {listItemNumber && `${listItemNumber}.`} {listItemName} {listItemMode}
           <span>
             <span>
-              <FontAwesomeIcon icon={isExpanded ? faCaretDown : faCaretUp} />
+              {renderCaret && (
+                <FontAwesomeIcon icon={isExpanded ? faCaretDown : faCaretUp} />
+              )}
             </span>
           </span>
         </button>

app/pages/cif-external/project-revision/[projectRevision]/view.tsx

@@ -0,0 +1,59 @@
+import withRelayOptions from "lib/relay/withRelayOptions";
+import { graphql, usePreloadedQuery } from "react-relay/hooks";
+import { RelayProps, withRelay } from "relay-nextjs";
+import { viewExternalProjectRevisionQuery } from "__generated__/viewExternalProjectRevisionQuery.graphql";
+import ExternalLayout from "components/Layout/ExternalLayout";
+import ProjectFormSummary from "components/Form/ProjectFormSummary";
+import ExternalTaskList from "components/TaskList/ExternalTaskList";
+import { Button } from "@button-inc/bcgov-theme";
+import { useRouter } from "next/router";
+
+const ExternalCifProjectViewQuery = graphql`
+  query viewExternalProjectRevisionQuery($projectRevision: ID!) {
+    session {
+      ...ExternalLayout_session
+    }
+    projectRevision(id: $projectRevision) {
+      ...ProjectFormSummary_projectRevision
+    }
+  }
+`;
+export function ExternalProjectFormPage({
+  preloadedQuery,
+}: RelayProps<{}, viewExternalProjectRevisionQuery>) {
+  const router = useRouter();
+  const { session, projectRevision } = usePreloadedQuery(
+    ExternalCifProjectViewQuery,
+    preloadedQuery
+  );
+  const taskList = <ExternalTaskList />;
+  let renderList = false;
+  if (
+    router.pathname === "/cif-external/project-revision/[projectRevision]/view"
+  ) {
+    renderList = true;
+  }
+  return (
+    <ExternalLayout session={session} leftSideNav={taskList}>
+      <div className="container">
+        <ProjectFormSummary projectRevision={projectRevision} viewOnly={true} />
+        {renderList && (
+          <Button
+            size="small"
+            onClick={() => {
+              console.log("to be implemented: 🍰");
+            }}
+          >
+            Next
+          </Button>
+        )}
+      </div>
+    </ExternalLayout>
+  );
+}
+
+export default withRelay(
+  ExternalProjectFormPage,
+  ExternalCifProjectViewQuery,
+  withRelayOptions
+);

app/routes/pageRoutes.ts

@@ -142,3 +142,12 @@ export const getAttachmentDownloadRoute = (attachmentId: string) => ({
 export const getExternalUserLandingPageRoute = () => ({
   pathname: "/cif-external/",
 });
+
+export const getExternalProjectRevisionViewPageRoute = (
+  projectRevisionId: string
+) => ({
+  pathname: `/cif-external/project-revision/[projectRevision]/view`,
+  query: {
+    projectRevision: projectRevisionId,
+  },
+});

app/tests/unit/pages/project-revision/[projectRevision]/form/[formIndex]/external.test.tsx

@@ -0,0 +1,111 @@
+import "@testing-library/jest-dom";
+import { screen, within } from "@testing-library/react";
+
+import PageTestingHelper from "tests/helpers/pageTestingHelper";
+import externalCompiledQuery from "__generated__/viewExternalProjectRevisionQuery.graphql";
+import ExternalProjectFormPage from "pages/cif-external/project-revision/[projectRevision]/view";
+import { FormIndexPageQuery } from "__generated__/FormIndexPageQuery.graphql";
+
+const defaultMockResolver = {
+  ProjectRevision(context, generateId) {
+    return {
+      id: `mock-id`,
+      projectId: 123,
+      changeStatus: "pending",
+      projectByProjectId: {
+        proposalReference: "001",
+      },
+      projectFormChange: {
+        id: `mock-project-form-${generateId()}`,
+        newFormData: {
+          someProjectData: "test2",
+        },
+        asProject: {
+          fundingStreamRfpByFundingStreamRfpId: {
+            fundingStreamByFundingStreamId: {
+              name: "EP",
+            },
+          },
+        },
+      },
+      managerFormChanges: {
+        edges: [
+          {
+            node: {
+              projectManagerLabel: {
+                id: "Test Label 1 ID",
+                rowId: 1,
+                label: "Test Label 1",
+              },
+              formChange: null,
+            },
+          },
+        ],
+      },
+      milestoneReportStatuses: {
+        edges: [],
+      },
+    };
+  },
+};
+
+const externalPageTestingHelper = new PageTestingHelper<FormIndexPageQuery>({
+  pageComponent: ExternalProjectFormPage,
+  compiledQuery: externalCompiledQuery,
+  defaultQueryResolver: defaultMockResolver,
+  defaultQueryVariables: {
+    projectRevision: "mock-id",
+  },
+});
+
+describe("The Project Overview Page (external)", () => {
+  beforeEach(() => {
+    externalPageTestingHelper.reinit();
+    externalPageTestingHelper.setMockRouterValues({
+      pathname: "/cif-external/project-revision/[projectRevision]/view",
+      query: { projectRevision: "mock-id" },
+    });
+  });
+
+  it("renders the task list in the left navigation", () => {
+    externalPageTestingHelper.loadQuery();
+    externalPageTestingHelper.renderPage();
+
+    expect(
+      within(
+        screen.getByRole("navigation", { name: "side navigation" })
+      ).getByText(/Application Overview/i)
+    ).toBeInTheDocument();
+
+    expect(
+      within(
+        screen.getByRole("navigation", { name: "side navigation" })
+      ).getByText(/Attachments/i)
+    ).toBeInTheDocument();
+
+    expect(
+      within(
+        screen.getByRole("navigation", { name: "side navigation" })
+      ).getByText(/Review/i)
+    ).toBeInTheDocument();
+
+    expect(screen.getByText("< Return to Dashboard")).toBeInTheDocument();
+
+    expect(
+      within(
+        screen.getByRole("navigation", { name: "side navigation" })
+      ).getByText(/Declaration/i)
+    ).toBeInTheDocument();
+  });
+
+  it("renders the next button", () => {
+    externalPageTestingHelper.loadQuery();
+    externalPageTestingHelper.renderPage();
+    screen.logTestingPlaygroundURL();
+    expect(
+      screen.getByRole("button", {
+        name: /next/i,
+      })
+    ).toBeInTheDocument();
+  });
+});

app/tests/unit/pages/project-revision/[projectRevision]/form/[formIndex]/index.test.tsx

@@ -145,4 +145,15 @@ describe("The Project Annual Reports page", () => {
     expect(container.childElementCount).toEqual(0);
     expect(pageTestingHelper.router.replace).toHaveBeenCalledWith("/404");
   });
+
+  it("does not render the next button", () => {
+    pageTestingHelper.loadQuery({
+      Query() {
+        return {
+          projectRevision: null,
+        };
+      },
+    });
+    expect(screen.queryByText(/next/i)).not.toBeInTheDocument();
+  });
 });