[MDS-6179] Refactored ProjectOverviewTab.js to a functional Typescrip…

…t Component (#3253) * Refactored ProjectOverviewTab.js to a functional Typescript component. This process seems to have fixed the issue. * added refetch of project if the projectSummary has been cleared from the store (this happens deliberately while backing out of viewing a detailed project summary as it prevents another bug where the state is incorrectly persisted. * update snap * update imports and interface * reorder useSelectors and other logic in ProjectManagement.tsx * reorder useSelectors and other logic in ProjectManagement.tsx * reorder useSelectors and other logic in ProjectManagement.tsx * move isFeatureEnabled out of render function * fixed optional chaining * fixed optional chaining * updated projectFormTabs usage
bcgov · Sep 25, 2024 · 21acc0c · 21acc0c
1 parent 95e97e1
commit 21acc0c
Show file tree

Hide file tree

Showing 14 changed files with 785 additions and 497 deletions.
diff --git a/services/common/src/components/projectSummary/ProjectManagement.tsx b/services/common/src/components/projectSummary/ProjectManagement.tsx
@@ -35,13 +35,18 @@ export const ProjectManagement: FC = () => {
   const systemFlag = useSelector(getSystemFlag);
   const isCore = systemFlag === SystemFlagEnum.core;
 
-  const { isFeatureEnabled } = useFeatureFlag();
-
+  const projectSummaryStatusCodes = useSelector(getDropdownProjectSummaryStatusCodes);
+  const ministryComments = useSelector(getProjectSummaryMinistryComments);
+  const projectLeads: IGroupedDropdownList = useSelector(getDropdownProjectLeads);
   const { status_code, project_summary_guid, project_lead_party_guid } = useSelector((state) =>
     getFormValues(FORM.ADD_EDIT_PROJECT_SUMMARY)(state)
   );
 
-  const ministryComments = useSelector(getProjectSummaryMinistryComments);
+  const isNewProject = !project_summary_guid;
+  const isProjectLeadAssigned = Boolean(project_lead_party_guid);
+  const projectLeadData = [unassignedProjectLeadEntry, ...(projectLeads?.[0]?.opt || [])];
+
+  const { isFeatureEnabled } = useFeatureFlag();
 
   useEffect(() => {
     if (project_summary_guid) {
@@ -53,22 +58,11 @@ export const ProjectManagement: FC = () => {
     };
   }, [project_summary_guid]);
 
-  if (!isCore) {
-    return null;
-  }
-
-  const isNewProject = !project_summary_guid;
-  const isProjectLeadAssigned = Boolean(project_lead_party_guid);
-  const projectSummaryStatusCodes = useSelector(getDropdownProjectSummaryStatusCodes);
-
-  const projectLeads: IGroupedDropdownList = useSelector(getDropdownProjectLeads);
-  const projectLeadData = [unassignedProjectLeadEntry, ...projectLeads[0]?.opt];
-
   const submitComment = async ({ comment }) => {
     await dispatch(createProjectSummaryMinistryComment(project_summary_guid, { content: comment }));
   };
 
-  return (
+  return isCore ? (
     <>
       {isFeatureEnabled(Feature.MAJOR_PROJECT_REFACTOR) ? (
         <div>
@@ -197,5 +191,7 @@ export const ProjectManagement: FC = () => {
         </>
       )}
     </>
+  ) : (
+    undefined
   );
 };
diff --git a/services/common/src/components/projectSummary/ProjectSummaryForm.tsx b/services/common/src/components/projectSummary/ProjectSummaryForm.tsx
@@ -34,9 +34,11 @@ interface ProjectSummaryFormProps {
 
 // converted to a function to make feature flag easier to work with
 // when removing feature flag, convert back to array
-export const getProjectFormTabs = (amsFeatureEnabled: boolean, isCore = false) => {
-  const { isFeatureEnabled } = useFeatureFlag();
-
+export const getProjectFormTabs = (
+  amsFeatureEnabled: boolean,
+  isCore = false,
+  projectRefactorEnabled: boolean
+) => {
   const projectFormTabs = [
     "basic-information",
     "related-projects",
@@ -55,7 +57,7 @@ export const getProjectFormTabs = (amsFeatureEnabled: boolean, isCore = false) =
     projectFormTabs.splice(
       1,
       0,
-      isFeatureEnabled(Feature.MAJOR_PROJECT_REFACTOR) ? "project-management" : "ministry-contact"
+      projectRefactorEnabled ? "project-management" : "ministry-contact"
     );
   }
 
@@ -82,7 +84,11 @@ export const ProjectSummaryForm: FC<ProjectSummaryFormProps> = ({
   const { isFeatureEnabled } = useFeatureFlag();
   const majorProjectsFeatureEnabled = isFeatureEnabled(Feature.MAJOR_PROJECT_LINK_PROJECTS);
   const amsFeatureEnabled = isFeatureEnabled(Feature.AMS_AGENT);
-  const projectFormTabs = getProjectFormTabs(amsFeatureEnabled, isCore);
+  const projectFormTabs = getProjectFormTabs(
+    amsFeatureEnabled,
+    isCore,
+    isFeatureEnabled(Feature.MAJOR_PROJECT_REFACTOR)
+  );
   const projectSummaryAuthorizationTypesArray = useSelector(
     getProjectSummaryAuthorizationTypesArray
   );

diff --git a/services/common/src/constants/strings.tsx b/services/common/src/constants/strings.tsx
@@ -39,6 +39,7 @@ export const CONTACT_ADMIN = [
 ];
 export const MMO_EMAIL = "[email protected]";
 export const EMPTY_FIELD = "N/A";
+export const UNKNOWN = "Unknown";
 export const EMPTY = "";
 export const ZERO = "0.00";
 export const UNASSIGNED = "Unassigned";

diff --git a/services/common/src/interfaces/projects/index.ts b/services/common/src/interfaces/projects/index.ts
@@ -21,3 +21,4 @@ export * from "./linkedProject.interface";
 export * from "./requirement.interface";
 export * from "./authorizationSummary.interface";
 export * from "./projectSummaryMinistryComment.interface";
+export * from "./projectStage.interface";
diff --git a/services/common/src/interfaces/projects/projectStage.interface.ts b/services/common/src/interfaces/projects/projectStage.interface.ts
@@ -0,0 +1,11 @@
+import { IProjectSummary } from "@mds/common/interfaces";
+
+export interface IProjectStage {
+  title: string;
+  key: string;
+  status: string;
+  payload: IProjectSummary;
+  statusHash: any;
+  required: boolean;
+  navigateForward: (source: string, status: string) => void;
+}
diff --git a/services/core-web/src/components/mine/Projects/ProjectSummary.tsx b/services/core-web/src/components/mine/Projects/ProjectSummary.tsx
@@ -19,7 +19,6 @@ import {
   AMS_STATUS_CODES_SUCCESS,
   AMS_STATUS_CODE_FAIL,
   AMS_ENVIRONMENTAL_MANAGEMENT_ACT_TYPES,
-  isFieldDisabled,
 } from "@mds/common";
 import { getMineById } from "@mds/common/redux/reducers/mineReducer";
 import withFeatureFlag from "@mds/common/providers/featureFlags/withFeatureFlag";
@@ -60,7 +59,11 @@ export const ProjectSummary: FC = () => {
 
   const { isFeatureEnabled } = useFeatureFlag();
   const amsFeatureEnabled = isFeatureEnabled(Feature.AMS_AGENT);
-  const projectFormTabs = getProjectFormTabs(amsFeatureEnabled, true);
+  const projectFormTabs = getProjectFormTabs(
+    amsFeatureEnabled,
+    true,
+    isFeatureEnabled(Feature.MAJOR_PROJECT_REFACTOR)
+  );
 
   const isExistingProject = Boolean(projectGuid && projectSummaryGuid);
   const isDefaultLoaded = isExistingProject

diff --git a/...board/mine/projects/ProjectStagesTable.js → ...oard/mine/projects/ProjectStagesTable.tsx b/...board/mine/projects/ProjectStagesTable.js → ...oard/mine/projects/ProjectStagesTable.tsx
@@ -1,15 +1,19 @@
-import React, { Component } from "react";
+import React, { FC } from "react";
+import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
-import PropTypes from "prop-types";
-import { Table, Button } from "antd";
+import { Button, Table } from "antd";
 import * as routes from "@/constants/routes";
+import { ColumnsType } from "antd/es/table";
+import { getProjectSummary } from "@mds/common/redux/reducers/projectReducer";
+import { IProjectStage } from "@mds/common";
 
-const propTypes = {
-  projectStages: PropTypes.arrayOf(PropTypes.any).isRequired,
-};
+interface ProjectStagesTableProps {
+  projectStages: IProjectStage[];
+}
 
-export class ProjectStagesTable extends Component {
-  transformRowData = (projectStages) =>
+export const ProjectStagesTable: FC<ProjectStagesTableProps> = ({ projectStages }) => {
+  const projectSummary = useSelector(getProjectSummary);
+  const transformRowData = (projectStages) =>
     projectStages &&
     projectStages.map((stage) => ({
       key: stage.key,
@@ -21,7 +25,7 @@ export class ProjectStagesTable extends Component {
       stage,
     }));
 
-  columns = () => [
+  const columns: ColumnsType<any> = [
     {
       title: "",
       dataIndex: "project_stage",
@@ -63,12 +67,11 @@ export class ProjectStagesTable extends Component {
       render: (text, record) => {
         let link;
         if (record.project_stage === "Project description") {
-          let payload = record.stage?.payload;
+          const payload = record.stage?.payload;
           if (payload?.submission_date) {
             link = (
               <Button
                 className="full-mobile margin-small"
-                type="secondary"
                 onClick={() => record?.navigate_forward()}
               >
                 View
@@ -82,15 +85,13 @@ export class ProjectStagesTable extends Component {
                   payload?.project_summary_guid
                 )}
               >
-                <Button className="full-mobile margin-small" type="secondary">
-                  Resume
-                </Button>
+                <Button className="full-mobile margin-small">Resume</Button>
               </Link>
             );
           }
         }
         if (record.project_stage === "IRT") {
-          let buttonLabel;
+          let buttonLabel: string;
           if (!record.stage_status) {
             buttonLabel = "Start";
           } else if (record.stage_status === "APV") {
@@ -100,11 +101,7 @@ export class ProjectStagesTable extends Component {
           }
 
           link = (
-            <Button
-              className="full-mobile margin-small"
-              type="secondary"
-              onClick={() => record?.navigate_forward()}
-            >
+            <Button className="full-mobile margin-small" onClick={() => record?.navigate_forward()}>
               {buttonLabel}
             </Button>
           );
@@ -120,11 +117,7 @@ export class ProjectStagesTable extends Component {
           }
 
           link = (
-            <Button
-              className="full-mobile margin-small"
-              type="secondary"
-              onClick={() => record?.navigate_forward()}
-            >
+            <Button className="full-mobile margin-small" onClick={() => record?.navigate_forward()}>
               {buttonLabel}
             </Button>
           );
@@ -134,21 +127,18 @@ export class ProjectStagesTable extends Component {
     },
   ];
 
-  render() {
-    return (
-      <Table
-        size="small"
-        showHeader={false}
-        pagination={false}
-        columns={this.columns()}
-        rowKey="title"
-        dataSource={this.transformRowData(this.props.projectStages)}
-        locale={{ emptyText: "This project has no stage data." }}
-      />
-    );
-  }
-}
-
-ProjectStagesTable.propTypes = propTypes;
+  return (
+    <Table
+      loading={!projectSummary.project_summary_guid}
+      size="small"
+      showHeader={false}
+      pagination={false}
+      columns={columns}
+      rowKey="title"
+      dataSource={transformRowData(projectStages)}
+      locale={{ emptyText: "This project has no stage data." }}
+    />
+  );
+};
 
 export default ProjectStagesTable;