feat: showing edit project state in task list

bcgov · Apr 9, 2022 · b007915 · b007915
1 parent b16ad75
commit b007915
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 12 deletions.
diff --git a/app/components/TaskList.tsx b/app/components/TaskList.tsx
@@ -15,16 +15,21 @@ interface Props {
 }
 
 const TaskList: React.FC<Props> = ({ projectRevision }) => {
-  const { id } = useFragment(
+  const { id, projectByProjectId } = useFragment(
     graphql`
       fragment TaskList_projectRevision on ProjectRevision {
         id
+        projectByProjectId {
+          proposalReference
+        }
       }
     `,
     projectRevision
   );
   const router = useRouter();
 
+  let mode = projectByProjectId ? "update" : "create";
+
   const currentStep = useMemo(() => {
     if (!router || !router.pathname) return null;
     if (`${router.pathname}/` === getProjectRevisionPageRoute(id).pathname)
@@ -35,7 +40,11 @@ const TaskList: React.FC<Props> = ({ projectRevision }) => {
 
   return (
     <div>
-      <h2>Add a Project</h2>
+      <h2>
+        {projectByProjectId
+          ? "Editing: " + projectByProjectId.proposalReference
+          : "Add a Project"}
+      </h2>
       <ol>
         <li>
           <h3>1. Project Overview</h3>
@@ -51,28 +60,28 @@ const TaskList: React.FC<Props> = ({ projectRevision }) => {
           </ul>
         </li>
         <li>
-          <h3>2. Project Details (optional)</h3>
+          <h3>2. Project Details {mode === "update" ? "" : "(optional)"}</h3>
           <ul>
             <li
               aria-current={currentStep === "managers" ? "step" : false}
               className="bordered"
             >
               <Link href={getProjectRevisionManagersFormPageRoute(id)}>
-                Add project managers
+                <a>{mode === "update" ? "Edit" : "Add"} project managers</a>
               </Link>
             </li>
             <li
               aria-current={currentStep === "contacts" ? "step" : false}
               className="bordered"
             >
               <Link href={getProjectRevisionContactsFormPageRoute(id)}>
-                Add project contacts
+                <a>{mode === "update" ? "Edit" : "Add"} project contacts</a>
               </Link>
             </li>
           </ul>
         </li>
         <li>
-          <h3>3. Submit Project</h3>
+          <h3>3. Submit changes</h3>
           <ul>
             <li
               aria-current={currentStep === "summary" ? "step" : false}

diff --git a/app/tests/unit/pages/project-revision/[projectRevision]/form/contacts.test.tsx b/app/tests/unit/pages/project-revision/[projectRevision]/form/contacts.test.tsx
@@ -33,6 +33,9 @@ const defaultMockResolver = {
   ProjectRevision() {
     return {
       id: "mock-proj-rev-id",
+      projectByProjectId: {
+        proposalReference: "001",
+      },
       projectFormChange: {
         id: "mock-project-form-id",
         newFormData: {
@@ -85,11 +88,11 @@ describe("The Project Contacts page", () => {
     expect(
       within(
         screen.getByRole("navigation", { name: "side navigation" })
-      ).getByText(/add a project/i)
+      ).getByText(/Editing: 001/i)
     ).toBeInTheDocument();
 
     expect(
-      screen.getByText(/add project contacts/i).closest("li")
+      screen.getByText(/Edit project contacts/i).closest("li")
     ).toHaveAttribute("aria-current", "step");
   });
 

diff --git a/app/tests/unit/pages/project-revision/[projectRevision]/form/managers.test.tsx b/app/tests/unit/pages/project-revision/[projectRevision]/form/managers.test.tsx
@@ -33,6 +33,9 @@ const defaultMockResolver = {
   ProjectRevision() {
     return {
       id: "mock-proj-rev-id",
+      projectByProjectId: {
+        proposalReference: "001",
+      },
       projectFormChange: {
         id: "mock-project-form-id",
         newFormData: {
@@ -84,10 +87,10 @@ describe("The Project Managers form page", () => {
     expect(
       within(
         screen.getByRole("navigation", { name: "side navigation" })
-      ).getByText(/add a project/i)
+      ).getByText(/Editing: /i)
     ).toBeInTheDocument();
     expect(
-      screen.getByText(/add project managers/i).closest("li")
+      screen.getByText(/Edit project managers/i).closest("li")
     ).toHaveAttribute("aria-current", "step");
   });
 

diff --git a/app/tests/unit/pages/project-revision/[projectRevision]/form/overview.test.tsx b/app/tests/unit/pages/project-revision/[projectRevision]/form/overview.test.tsx
@@ -33,6 +33,9 @@ const defaultMockResolver = {
   ProjectRevision() {
     return {
       id: "mock-proj-rev-id",
+      projectByProjectId: {
+        proposalReference: "001",
+      },
       projectFormChange: {
         id: "mock-project-form-id",
         newFormData: {
@@ -84,7 +87,7 @@ describe("The Project Overview page", () => {
     expect(
       within(
         screen.getByRole("navigation", { name: "side navigation" })
-      ).getByText(/add a project/i)
+      ).getByText(/Editing: 001/i)
     ).toBeInTheDocument();
     expect(
       screen.getByText(/add project overview/i).closest("li")

diff --git a/app/tests/unit/pages/project-revision/[projectRevision]/index.test.tsx b/app/tests/unit/pages/project-revision/[projectRevision]/index.test.tsx
@@ -34,6 +34,9 @@ const defaultMockResolver = {
   ProjectRevision() {
     return {
       id: "mock-proj-rev-id",
+      projectByProjectId: {
+        proposalReference: "001",
+      },
       projectFormChange: {
         id: "mock-project-form-id",
         newFormData: {
@@ -101,14 +104,34 @@ describe("The Create Project page", () => {
     expect(
       within(
         screen.getByRole("navigation", { name: "side navigation" })
-      ).getByText(/add a project/i)
+      ).getByText(/Editing: 001/i)
     ).toBeInTheDocument();
 
     expect(
       screen.getByText(/review and submit information/i).closest("li")
     ).toHaveAttribute("aria-current", "step");
   });
 
+  // it("renders task list with optional", () => {
+  //   const router = mocked(useRouter);
+  //   const mockPathname = "/cif/project-revision/[projectRevision]";
+  //   router.mockReturnValue({
+  //     pathname: mockPathname,
+  //   } as any);
+
+  //   loadProjectRevisionQuery();
+  //   renderProjectRevisionPage();
+  //   expect(
+  //     within(
+  //       screen.getByRole("navigation", { name: "side navigation" })
+  //     ).getByText(/( optional )/i)
+  //   ).toBeInTheDocument();
+
+  //   expect(
+  //     screen.getByText(/review and submit information/i).closest("li")
+  //   ).toHaveAttribute("aria-current", "step");
+  // });
+
   it("Renders an enabled submit and discard changes button", async () => {
     jest
       .spyOn(require("mutations/useDebouncedMutation"), "default")