psp-6864 missing fields required message.

source/frontend/src/features/leases/add/AddLeaseContainer.tsx

@@ -96,7 +96,7 @@ export const AddLeaseContainer: React.FunctionComponent<
           isOkDisabled={formikRef.current?.isSubmitting || bcaLoading}
           onSave={handleSave}
           onCancel={handleCancel}
-          isValid={isValid}
+          displayRequiredFieldError={isValid === false}
         />
       }
       showCloseButton

source/frontend/src/features/mapSideBar/acquisition/AcquisitionView.tsx

@@ -34,7 +34,7 @@ import { FilePropertyRouter } from './router/FilePropertyRouter';
 
 export interface IAcquisitionViewProps {
   onClose: (() => void) | undefined;
-  onSave: () => void;
+  onSave: () => Promise<void>;
   onCancel: () => void;
   onMenuChange: (selectedIndex: number) => void;
   onShowPropertySelector: () => void;
@@ -137,7 +137,7 @@ export const AcquisitionView: React.FunctionComponent<IAcquisitionViewProps> = (
                 isOkDisabled={formikRef?.current?.isSubmitting}
                 onSave={onSave}
                 onCancel={onCancel}
-                isValid={isFormValid}
+                displayRequiredFieldError={isFormValid === false}
               />
             )
           }

source/frontend/src/features/mapSideBar/acquisition/add/AddAcquisitionContainer.tsx

@@ -106,7 +106,7 @@ export const AddAcquisitionContainer: React.FC<IAddAcquisitionContainerProps> =
           isOkDisabled={helper.loading}
           onSave={handleSave}
           onCancel={close}
-          isValid={isValid}
+          displayRequiredFieldError={isValid === false}
         />
       }
     >

source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionForm.tsx

@@ -324,7 +324,7 @@ const UpdateCompensationRequisitionForm: React.FC<CompensationRequisitionFormPro
                 }}
                 isOkDisabled={formikProps.isSubmitting || !formikProps.dirty}
                 onCancel={() => cancelFunc(formikProps.resetForm, formikProps.dirty)}
-                isValid={isValid}
+                displayRequiredFieldError={isValid === false}
               />
             </StyledFooter>
 

source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/UpdateForm8Form.tsx

@@ -115,6 +115,9 @@ export const UpdateForm8Form: React.FC<IForm8FormProps> = ({
                     onSave={() => formikProps.submitForm()}
                     isOkDisabled={formikProps.isSubmitting || !formikProps.dirty}
                     onCancel={() => cancelFunc(formikProps.resetForm, formikProps.dirty)}
+                    displayRequiredFieldError={
+                      formikProps.isValid === false && !!formikProps.submitCount
+                    }
                   />
                 </StyledFooter>
               </>

source/frontend/src/features/mapSideBar/lease/LeaseContainer.tsx

@@ -216,7 +216,7 @@ export const LeaseContainer: React.FC<ILeaseContainerProps> = ({ leaseId, onClos
             isOkDisabled={formikRef?.current?.isSubmitting}
             onSave={handleSaveClick}
             onCancel={handleCancelClick}
-            isValid={isValid}
+            displayRequiredFieldError={isValid === false && !!formikRef.current?.submitCount}
           />
         )
       }

source/frontend/src/features/mapSideBar/project/ProjectContainer.tsx

@@ -21,6 +21,8 @@ export interface IProjectContainerViewProps {
   onClose: () => void;
   onSetProject: (project: Api_Project) => void;
   onSuccess: () => void;
+  setIsValid: (value: boolean) => void;
+  displayRequiredFieldsError: boolean;
 }
 
 export interface IProjectContainerProps {
@@ -74,6 +76,8 @@ const ProjectContainer: React.FunctionComponent<
     getProject: { execute: getProject, loading: loadingProject },
   } = useProjectProvider();
 
+  const [isValid, setIsValid] = useState<boolean>(false);
+
   const [containerState, setContainerState] = useReducer(
     (prevState: ProjectContainerState, newState: Partial<ProjectContainerState>) => ({
       ...prevState,
@@ -117,6 +121,8 @@ const ProjectContainer: React.FunctionComponent<
       onSetProject={setProject}
       onClose={onClose}
       onSuccess={onSuccess}
+      setIsValid={setIsValid}
+      displayRequiredFieldsError={containerState.isSubmitting && !isValid}
     />
   );
 };

source/frontend/src/features/mapSideBar/project/ProjectContainerView.test.tsx

@@ -20,6 +20,8 @@ const mockProps: IProjectContainerViewProps = {
   onSetProject: jest.fn(),
   onSetContainerState: jest.fn(),
   onSuccess: jest.fn(),
+  setIsValid: jest.fn(),
+  displayRequiredFieldsError: false,
 };
 
 describe('ProjectSummaryView component', () => {

source/frontend/src/features/mapSideBar/project/ProjectContainerView.tsx

@@ -19,20 +19,23 @@ const ProjectContainerView: React.FC<IProjectContainerViewProps> = ({
   activeTab,
   isEditing,
   showConfirmModal,
-  isSubmitting,
+  displayRequiredFieldsError,
   onClose,
   onSetProject,
   onSetContainerState,
   onSuccess,
+  setIsValid,
 }) => {
   const close = useCallback(() => onClose && onClose(), [onClose]);
 
   const handleSaveClick = () => {
     if (formikRef !== undefined) {
+      setIsValid(formikRef.current?.isValid ?? false);
       onSetContainerState({ isSubmitting: true });
       formikRef.current?.setSubmitting(true);
-      formikRef.current?.submitForm();
+      return formikRef.current?.submitForm() ?? Promise.resolve();
     }
+    return Promise.resolve();
   };
 
   const formikRef = useRef<FormikProps<any>>(null);
@@ -77,6 +80,7 @@ const ProjectContainerView: React.FC<IProjectContainerViewProps> = ({
             isOkDisabled={false}
             onSave={handleSaveClick}
             onCancel={handleCancelClick}
+            displayRequiredFieldError={displayRequiredFieldsError}
           />
         )
       }

source/frontend/src/features/mapSideBar/project/add/AddProjectContainer.tsx

@@ -32,6 +32,7 @@ const AddProjectContainer: React.FC<React.PropsWithChildren<IAddProjectContainer
   const [businessFunctions, setBusinessFunctions] = useState<Api_FinancialCode[]>([]);
   const [costTypes, setCostTypes] = useState<Api_FinancialCode[]>([]);
   const [workActivities, setWorkActivities] = useState<Api_FinancialCode[]>([]);
+  const [isValid, setIsValid] = useState<boolean>(true);
 
   useEffect(() => {
     async function fetchBusinessFunctions() {
@@ -76,8 +77,10 @@ const AddProjectContainer: React.FC<React.PropsWithChildren<IAddProjectContainer
 
   const close = useCallback(() => onClose && onClose(), [onClose]);
 
-  const handleSave = () => {
-    formikRef.current?.submitForm();
+  const handleSave = async () => {
+    var result = await (formikRef.current?.submitForm() ?? Promise.resolve());
+    setIsValid(formikRef.current?.isValid ?? false);
+    return result;
   };
 
   const onSuccess = async (proj: Api_Project) => {
@@ -93,7 +96,9 @@ const AddProjectContainer: React.FC<React.PropsWithChildren<IAddProjectContainer
       title="Create Project"
       icon={<FaBriefcase className="mr-2 mb-2" size={32} />}
       onClose={close}
-      footer={<SidebarFooter onSave={handleSave} onCancel={close} />}
+      footer={
+        <SidebarFooter onSave={handleSave} onCancel={close} displayRequiredFieldError={!isValid} />
+      }
     >
       <AddProjectForm
         ref={formikRef}

source/frontend/src/features/mapSideBar/project/add/AddProjectForm.tsx

@@ -39,8 +39,9 @@ const AddProjectForm = React.forwardRef<FormikProps<ProjectForm>, IAddProjectFor
     } = props;
 
     const handleSubmit = async (values: ProjectForm, formikHelpers: FormikHelpers<ProjectForm>) => {
-      await onSubmit(values, formikHelpers);
+      var result = await onSubmit(values, formikHelpers);
       formikHelpers.setSubmitting(false);
+      return result;
     };
 
     return (

source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectContainer.test.tsx.snap

@@ -680,7 +680,7 @@ exports[`AddProjectContainer component renders as expected 1`] = `
       </div>
     </div>
   </div>
-  .c2.btn {
+  .c1.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -710,49 +710,49 @@ exports[`AddProjectContainer component renders as expected 1`] = `
   cursor: pointer;
 }
 
-.c2.btn:hover {
+.c1.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c2.btn:focus {
+.c1.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c2.btn.btn-primary {
+.c1.btn.btn-primary {
   border: none;
 }
 
-.c2.btn.btn-secondary {
+.c1.btn.btn-secondary {
   background: none;
 }
 
-.c2.btn.btn-info {
+.c1.btn.btn-info {
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c2.btn.btn-info:hover,
-.c2.btn.btn-info:active,
-.c2.btn.btn-info:focus {
+.c1.btn.btn-info:hover,
+.c1.btn.btn-info:active,
+.c1.btn.btn-info:focus {
   background: none;
 }
 
-.c2.btn.btn-light {
+.c1.btn.btn-light {
   border: none;
 }
 
-.c2.btn.btn-dark {
+.c1.btn.btn-dark {
   border: none;
 }
 
-.c2.btn.btn-link {
+.c1.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   background: none;
@@ -773,9 +773,9 @@ exports[`AddProjectContainer component renders as expected 1`] = `
   padding: 0;
 }
 
-.c2.btn.btn-link:hover,
-.c2.btn.btn-link:active,
-.c2.btn.btn-link:focus {
+.c1.btn.btn-link:hover,
+.c1.btn.btn-link:active,
+.c1.btn.btn-link:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -784,14 +784,14 @@ exports[`AddProjectContainer component renders as expected 1`] = `
   outline: none;
 }
 
-.c2.btn.btn-link:disabled,
-.c2.btn.btn-link.disabled {
+.c1.btn.btn-link:disabled,
+.c1.btn.btn-link.disabled {
   background: none;
   pointer-events: none;
 }
 
-.c2.btn:disabled,
-.c2.btn:disabled:hover {
+.c1.btn:disabled,
+.c1.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -802,15 +802,15 @@ exports[`AddProjectContainer component renders as expected 1`] = `
   opacity: 0.65;
 }
 
-.c2.Button .Button__icon {
+.c1.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c2.Button--icon-only:focus {
+.c1.Button--icon-only:focus {
   outline: none;
 }
 
-.c2.Button--icon-only .Button__icon {
+.c1.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
@@ -823,11 +823,6 @@ exports[`AddProjectContainer component renders as expected 1`] = `
   z-index: 10;
 }
 
-.c1 {
-  padding-top: 0.7rem;
-  color: red;
-}
-
 <div
     class=""
   >
@@ -836,18 +831,12 @@ exports[`AddProjectContainer component renders as expected 1`] = `
     >
       <div
         class="pr-3 col-auto"
-      >
-        <div
-          class="c1"
-        >
-          Please check the required fields.
-        </div>
-      </div>
+      />
       <div
         class="pr-4 col-auto"
       >
         <button
-          class="c2 Button btn btn-secondary"
+          class="c1 Button btn btn-secondary"
           type="button"
         >
           <div
@@ -861,7 +850,7 @@ exports[`AddProjectContainer component renders as expected 1`] = `
         class="col-auto"
       >
         <button
-          class="c2 Button btn btn-primary"
+          class="c1 Button btn btn-primary"
           type="button"
         >
           <div

source/frontend/src/features/mapSideBar/property/MotiInventoryContainer.tsx

@@ -28,6 +28,7 @@ export const MotiInventoryContainer: React.FunctionComponent<
   const [showCancelConfirmModal, setShowCancelConfirmModal] = useState<boolean>(false);
 
   const [isEditing, setIsEditing] = useState<boolean>(false);
+  const [isValid, setIsValid] = useState<boolean>(true);
 
   const mapMachine = useMapStateMachine();
 
@@ -57,7 +58,8 @@ export const MotiInventoryContainer: React.FunctionComponent<
   const handleSaveClick = async () => {
     if (formikRef !== undefined) {
       formikRef.current?.setSubmitting(true);
-      formikRef.current?.submitForm();
+      await formikRef.current?.submitForm();
+      setIsValid(formikRef.current?.isValid ?? false);
     }
   };
 
@@ -108,6 +110,7 @@ export const MotiInventoryContainer: React.FunctionComponent<
             isOkDisabled={formikRef?.current?.isSubmitting}
             onSave={handleSaveClick}
             onCancel={handleCancelClick}
+            displayRequiredFieldError={!isValid}
           />
         )
       }

source/frontend/src/features/mapSideBar/research/ResearchContainer.tsx

@@ -50,6 +50,7 @@ export const ResearchContainer: React.FunctionComponent<
   const [selectedMenuIndex, setSelectedMenuIndex] = useState<number>(0);
   const [isEditing, setIsEditing] = useState<boolean>(false);
   const [editKey, setEditKey] = useState(FormKeys.none);
+  const [isValid, setIsValid] = useState<boolean>(true);
 
   const [isShowingPropertySelector, setIsShowingPropertySelector] = useState<boolean>(false);
 
@@ -117,6 +118,7 @@ export const ResearchContainer: React.FunctionComponent<
     if (formikRef !== undefined) {
       formikRef.current?.setSubmitting(true);
       formikRef.current?.submitForm();
+      setIsValid(formikRef.current?.isValid || false);
     }
   };
 
@@ -183,6 +185,7 @@ export const ResearchContainer: React.FunctionComponent<
               isOkDisabled={formikRef?.current?.isSubmitting}
               onSave={handleSaveClick}
               onCancel={handleCancelClick}
+              displayRequiredFieldError={!isValid}
             />
           )
         }