[MDS-6178] CORE Project summary edit mode bugs

migrations/sql/V2024.11.22.10.31__change_project_summary_dates_to_date.sql

@@ -0,0 +1,15 @@
+ALTER TABLE project_summary
+    ALTER COLUMN expected_draft_irt_submission_date TYPE date
+    USING expected_draft_irt_submission_date::date;
+
+ALTER TABLE project_summary
+    ALTER COLUMN expected_permit_application_date TYPE date
+    USING expected_permit_application_date::date;
+
+ALTER TABLE project_summary
+    ALTER COLUMN expected_permit_receipt_date TYPE date
+    USING expected_permit_receipt_date::date;
+
+ALTER TABLE project_summary
+    ALTER COLUMN expected_project_start_date TYPE date
+    USING expected_project_start_date::date;

services/common/src/components/help/HelpGuide.tsx

@@ -27,6 +27,8 @@ import DOMPurify from "dompurify";
 import { useFeatureFlag } from "@mds/common/providers/featureFlags/useFeatureFlag";
 import { Feature } from "@mds/common/utils";
 import Loading from "../common/Loading";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faQuestionCircle } from "@fortawesome/pro-regular-svg-icons";
 
 interface HelpGuideProps {
   helpKey: string;
@@ -138,8 +140,14 @@ export const HelpGuideContent: FC<HelpGuideProps> = ({ helpKey }) => {
 
   return (
     <>
-      <Button data-testid="help-open" onClick={showDrawer}>
-        ?
+      <Button
+        data-testid="help-open"
+        className="help-open"
+        onClick={showDrawer}
+        title="Open Help Guide"
+        type="text"
+      >
+        <FontAwesomeIcon icon={faQuestionCircle} />
       </Button>
       <Drawer
         placement="right"

services/common/src/components/project/ProjectDescriptionTab.tsx

@@ -267,8 +267,8 @@ const ProjectDescriptionTab = () => {
     const url = GLOBAL_ROUTES?.EDIT_PROJECT_SUMMARY.dynamicRoute(
       project.project_summary.project_guid,
       project.project_summary.project_summary_guid,
-      "purpose-and-authorization",
-      false
+      "basic-information",
+      true
     );
     history.push(url);
   };

services/common/src/components/projectSummary/ProjectContacts.tsx

@@ -15,10 +15,9 @@ import {
 } from "@mds/common/redux/utils/Validate";
 import { normalizePhone } from "@mds/common/redux/utils/helpers";
 import LinkButton from "@mds/common/components/common/LinkButton";
-import { FORM, isFieldDisabled } from "@mds/common/constants";
+import { FORM, isFieldDisabled, CONTACTS_COUNTRY_OPTIONS } from "@mds/common/constants";
 import RenderField from "@mds/common/components/forms/RenderField";
 import RenderSelect from "@mds/common/components/forms/RenderSelect";
-import { CONTACTS_COUNTRY_OPTIONS } from "@mds/common/constants";
 import { getDropdownProvinceOptions } from "@mds/common/redux/selectors/staticContentSelectors";
 import { getSystemFlag } from "@mds/common/redux/selectors/authenticationSelectors";
 
@@ -46,9 +45,9 @@ const RenderContacts = ({ fields, isDisabled }) => {
         const { address_type_code, sub_division_code } = address ?? {};
         const isInternational = address_type_code === "INT";
         const isPrimary = contact.is_primary;
+
         return (
-          // eslint-disable-next-line react/no-array-index-key
-          <div key={index}>
+          <div key={field}>
             {index === 0 ? (
               <>
                 <Typography.Title level={5}>Primary project contact</Typography.Title>
@@ -58,35 +57,33 @@ const RenderContacts = ({ fields, isDisabled }) => {
                 </Typography.Paragraph>
               </>
             ) : (
-              <>
-                <Col span={24}>
-                  <Row gutter={16}>
-                    <Col>
-                      <Typography.Title level={5}>
-                        Additional project contact #{index}
-                      </Typography.Title>
-                    </Col>
-                    <Col>
-                      <Popconfirm
-                        placement="topLeft"
-                        title="Are you sure you want to remove this contact?"
-                        onConfirm={() => fields.remove(index)}
-                        okText="Remove"
-                        cancelText="Cancel"
+              <Col span={24}>
+                <Row gutter={16}>
+                  <Col>
+                    <Typography.Title level={5}>
+                      Additional project contact #{index}
+                    </Typography.Title>
+                  </Col>
+                  <Col>
+                    <Popconfirm
+                      placement="topLeft"
+                      title="Are you sure you want to remove this contact?"
+                      onConfirm={() => fields.remove(index)}
+                      okText="Remove"
+                      cancelText="Cancel"
+                    >
+                      <Button
+                        style={{ marginTop: 0 }}
+                        className="fa-icon-container btn-sm-padding"
+                        icon={<FontAwesomeIcon icon={faTrashAlt} />}
+                        type="default"
                       >
-                        <Button
-                          style={{ marginTop: 0 }}
-                          className="fa-icon-container btn-sm-padding"
-                          icon={<FontAwesomeIcon icon={faTrashAlt} />}
-                          type="default"
-                        >
-                          Delete
-                        </Button>
-                      </Popconfirm>
-                    </Col>
-                  </Row>
-                </Col>
-              </>
+                        Delete
+                      </Button>
+                    </Popconfirm>
+                  </Col>
+                </Row>
+              </Col>
             )}
             <Row gutter={16}>
               <Col md={12} sm={24}>
@@ -208,7 +205,7 @@ const RenderContacts = ({ fields, isDisabled }) => {
               </Col>
               <Col md={12} sm={24}>
                 <Field
-                  disabled={isDisabled}
+                  disabled={isDisabled || isInternational}
                   name={`${field}.address.sub_division_code`}
                   label="Province"
                   required={isPrimary && !isInternational}

services/common/src/components/projectSummary/ProjectDates.tsx

@@ -2,7 +2,11 @@ import React from "react";
 import { useSelector } from "react-redux";
 import { Field, getFormValues } from "redux-form";
 import { Typography } from "antd";
-import { dateNotBeforeOther, dateNotAfterOther } from "@mds/common/redux/utils/Validate";
+import {
+  dateNotBeforeOther,
+  dateNotAfterOther,
+  dateInFuture,
+} from "@mds/common/redux/utils/Validate";
 import Callout from "@mds/common/components/common/Callout";
 import { FORM, isFieldDisabled } from "@mds/common/constants";
 import RenderDate from "@mds/common/components/forms/RenderDate";
@@ -43,7 +47,7 @@ export const ProjectDates = () => {
         label="When do you anticipate submitting a draft Information Requirements Table?"
         placeholder="Please select date"
         component={RenderDate}
-        validate={[dateNotAfterOther(expected_permit_application_date)]}
+        validate={[dateInFuture, dateNotAfterOther(expected_permit_application_date)]}
         disabled={isFieldDisabled(systemFlag, formValues?.status_code)}
       />
       <Field
@@ -52,7 +56,7 @@ export const ProjectDates = () => {
         label="When do you anticipate submitting a permit application?"
         placeholder="Please select date"
         component={RenderDate}
-        validate={[dateNotBeforeOther(expected_draft_irt_submission_date)]}
+        validate={[dateInFuture, dateNotBeforeOther(expected_draft_irt_submission_date)]}
         disabled={isFieldDisabled(systemFlag, formValues?.status_code)}
       />
       <Field
@@ -61,7 +65,7 @@ export const ProjectDates = () => {
         label="When do you hope to receive your permit/amendment(s)?"
         placeholder="Please select date"
         component={RenderDate}
-        validate={[dateNotBeforeOther(expected_permit_application_date)]}
+        validate={[dateInFuture, dateNotBeforeOther(expected_permit_application_date)]}
         disabled={isFieldDisabled(systemFlag, formValues?.status_code)}
       />
       <Field
@@ -70,7 +74,7 @@ export const ProjectDates = () => {
         label="When do you anticipate starting work on this project?"
         placeholder="Please select date"
         component={RenderDate}
-        validate={[dateNotBeforeOther(expected_permit_receipt_date)]}
+        validate={[dateInFuture, dateNotBeforeOther(expected_permit_receipt_date)]}
         disabled={isFieldDisabled(systemFlag, formValues?.status_code)}
       />
     </>

services/common/src/components/projectSummary/ProjectLinks.tsx

@@ -77,7 +77,9 @@ const ProjectLinkInput = ({ unrelatedProjects = [], mineGuid, projectGuid }) =>
           onChange={(...args) => handleChange(args)}
         />
         <Button
-          disabled={isFieldDisabled(systemFlag, formValues?.status_code)}
+          disabled={
+            currentSelection.length === 0 || isFieldDisabled(systemFlag, formValues?.status_code)
+          }
           type="primary"
           onClick={addRelatedProjects}
           className="block-button"

services/common/src/redux/utils/Validate.ts

@@ -276,11 +276,12 @@ export const dateTimezoneRequired = memoize((timezoneField) => (_value, allValue
 export const dateInFuture = (value) =>
   value && !moment(value).isAfter() ? "Date must be in the future" : undefined;
 
-export const dateNotBeforeOther = memoize((other) => (value) =>
-  value && other && new Date(value) <= new Date(other)
-    ? `Date cannot be on or before ${new Date(other).toDateString()}`
-    : undefined
-);
+// NOTE: modified from version in CORE- change from <= to <
+export const dateNotBeforeOther = memoize((other: string) => (value: string) => {
+  return value && other && value < other
+    ? `Date cannot be before ${moment(other).format("ddd MMM D YYYY")}`
+    : undefined;
+});
 
 export const dateNotBeforeStrictOther = memoize((other) => (value) =>
   value && other && moment(value).isBefore(other) ? `Date cannot be before ${other}` : undefined
@@ -298,11 +299,12 @@ export const timeNotBeforeOther = memoize(
       : undefined
 );
 
-export const dateNotAfterOther = memoize((other) => (value) =>
-  value && other && new Date(value) >= new Date(other)
-    ? `Date cannot be on or after ${new Date(other).toDateString()}`
-    : undefined
-);
+// NOTE: modified from version in CORE- change from >= to >
+export const dateNotAfterOther = memoize((other: string) => (value: string) => {
+  return value && other && value > other
+    ? `Date cannot be after ${moment(other).format("ddd MMM D YYYY")}`
+    : undefined;
+});
 
 export const yearNotInFuture = (value) =>
   value && value > new Date().getFullYear() ? "Year cannot be in the future" : undefined;

services/core-api/app/api/projects/project_summary/models/project_summary.py

@@ -47,10 +47,10 @@ class ProjectSummary(SoftDeleteMixin, AuditMixin, Base):
         db.Integer, server_default=FetchedValue(), nullable=False, unique=True)
     project_summary_description = db.Column(db.String(4000), nullable=True)
     submission_date = db.Column(db.DateTime, nullable=True)
-    expected_draft_irt_submission_date = db.Column(db.DateTime, nullable=True)
-    expected_permit_application_date = db.Column(db.DateTime, nullable=True)
-    expected_permit_receipt_date = db.Column(db.DateTime, nullable=True)
-    expected_project_start_date = db.Column(db.DateTime, nullable=True)
+    expected_draft_irt_submission_date = db.Column(db.Date, nullable=True)
+    expected_permit_application_date = db.Column(db.Date, nullable=True)
+    expected_permit_receipt_date = db.Column(db.Date, nullable=True)
+    expected_project_start_date = db.Column(db.Date, nullable=True)
     agent_party_guid = db.Column(UUID(as_uuid=True), db.ForeignKey('party.party_guid'), nullable=True)
     is_agent = db.Column(db.Boolean, nullable=True)
     facility_operator_guid = db.Column(UUID(as_uuid=True), db.ForeignKey('party.party_guid'), nullable=True)

services/core-api/app/api/projects/response_models.py

@@ -188,11 +188,11 @@ def format(self, value):
         'mine_name': fields.String,
         'status_code': fields.String,
         'proponent_project_id': fields.String,
-        'expected_draft_irt_submission_date': fields.DateTime,
+        'expected_draft_irt_submission_date': fields.Date,
         'submission_date': fields.DateTime,
-        'expected_permit_application_date': fields.DateTime,
-        'expected_permit_receipt_date': fields.DateTime,
-        'expected_project_start_date': fields.DateTime,
+        'expected_permit_application_date': fields.Date,
+        'expected_permit_receipt_date': fields.Date,
+        'expected_project_start_date': fields.Date,
         'documents': fields.List(fields.Nested(PROJECT_SUMMARY_DOCUMENT_MODEL)),
         'contacts': fields.List(fields.Nested(PROJECT_CONTACT_MODEL)),
         'authorizations': fields.List(fields.Nested(PROJECT_SUMMARY_AUTHORIZATION_MODEL)),

services/core-web/src/styles/components/HelpGuide.scss

@@ -8,4 +8,16 @@
     .ant-form-item-label {
         text-align: left;
     }
+}
+
+.help-open {
+    font-size: 18px;
+    margin-bottom: 0;
+    border: none;
+    color: white;
+    padding: 0 5px;
+
+    &:hover {
+        color: white;
+    }
 }

services/core-web/src/styles/components/SteppedForm.scss

@@ -20,10 +20,13 @@
     border-right: unset !important;
 }
 
-.stepped-menu-item {
+.ant-menu-item.stepped-menu-item {
     transition: all .1s ease-in-out;
     color: $violet;
-    // text-decoration: underline;
+    text-wrap: wrap;
+    height: auto;
+    min-height: 40px;
+    line-height: 25px;
 }
 
 .stepped-menu-item:hover {

services/core-web/src/styles/generic/layout.scss

@@ -22,6 +22,7 @@ html {
   overflow: initial;
   min-height: 100vh;
   background-color: $pure-white;
+  padding-bottom: 80px;
 
   &--light-grey {
     background-color: $lightest-grey;

services/minespace-web/src/styles/components/HelpGuide.scss

@@ -3,4 +3,17 @@
         width: 520px !important;
     }
 
+}
+
+.help-open {
+    font-size: 18px;
+    margin-bottom: 0;
+    border: none;
+    color: white;
+    margin-right: 20px;
+
+    &:hover {
+        background-color: transparent;
+        color: white;
+    }
 }

services/minespace-web/src/styles/components/SteppedForm.scss

@@ -20,8 +20,12 @@
   border-right: unset !important;
 }
 
-.stepped-menu-item {
+.ant-menu-item.stepped-menu-item {
   transition: all .1s ease-in-out;
+  text-wrap: wrap;
+  height: auto;
+  min-height: 40px;
+  line-height: 25px;
 }
 
 .stepped-menu-item:hover {