[MDS-6177] Project Summary View Bugs (#3287)

* default empty field display to N/A

* add classnames and style to checkbox & radio components

* application summary buttons: view/edit

* disable things in view mode on auths, contacts, links

* fix compilation type error complaint, disable prompt in view mode when leaving page

* don't disable tabs in view mode for stepped form

* copy style changes over to MS

* update snaps

services/common/src/components/forms/BaseInput.tsx

@@ -1,3 +1,4 @@
+import { EMPTY_FIELD } from "@mds/common/constants";
 import { Typography } from "antd";
 import React, { FC, ReactNode } from "react";
 import { WrappedFieldProps, WrappedFieldMetaProps, WrappedFieldInputProps } from "redux-form";
@@ -80,12 +81,13 @@ interface BaseViewInputProps {
   value: string | number;
 }
 export const BaseViewInput: FC<BaseViewInputProps> = ({ label = "", value = "" }) => {
+  const displayValue = value ? value.toString() : EMPTY_FIELD;
   return (
     <div className="view-item ant-form-item">
       {label && label !== "" && (
         <Typography.Paragraph className="view-item-label">{label}</Typography.Paragraph>
       )}
-      <Typography.Paragraph className="view-item-value">{value.toString()}</Typography.Paragraph>
+      <Typography.Paragraph className="view-item-value">{displayValue}</Typography.Paragraph>
     </div>
   );
 };

services/common/src/components/forms/RenderCheckbox.tsx

@@ -1,6 +1,7 @@
-import React, { FC } from "react";
+import React, { FC, useContext } from "react";
 import { Checkbox, Form } from "antd";
 import { BaseInputProps } from "./BaseInput";
+import { FormContext } from "./FormWrapper";
 /**
  * @constant RenderCheckbox - Ant Design `Checkbox` component for redux-form.
  */
@@ -20,6 +21,20 @@ const RenderCheckbox: FC<CheckboxProps> = ({
   const onChange = (e) => {
     input.onChange(e.target.checked);
   };
+  const { isEditMode } = useContext(FormContext);
+
+  if (!isEditMode) {
+    return (
+      <Form.Item
+        name={input.name}
+        className="view-item"
+      >
+        <Checkbox id={id} checked={input.value} disabled={true}>
+          <div className="view-item-label ungroup-checkbox">{label}</div>
+        </Checkbox>
+      </Form.Item>
+    );
+  }
   return (
     <Form.Item
       name={input.name}

services/common/src/components/forms/RenderGroupCheckbox.tsx

@@ -1,6 +1,7 @@
-import React, { FC } from "react";
+import React, { FC, useContext } from "react";
 import { Checkbox, Form } from "antd";
 import { BaseInputProps } from "./BaseInput";
+import { FormContext } from "./FormWrapper";
 
 /**
  * @constant RenderGroupCheckbox - Ant Design `Checkbox` component for redux-form.
@@ -33,6 +34,24 @@ const RenderGroupCheckbox: FC<CheckboxProps> = ({
   required,
   ...props
 }) => {
+  const { isEditMode } = useContext(FormContext);
+  if (!isEditMode) {
+    return (
+      <Form.Item
+        name={input.name}
+        label={<div className="view-item-label">{label}</div>}
+        getValueProps={() => ({ value: input.value })}
+        className="view-item"
+      >
+        <Checkbox.Group
+          name={input.name}
+          options={options}
+          className="view-group-checkbox"
+          disabled={true}
+        />
+      </Form.Item>
+    );
+  }
   return (
     <Form.Item
       name={input.name}

services/common/src/components/forms/RenderRadioButtons.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useContext } from "react";
 import { Form, Radio } from "antd";
-import { BaseInputProps, getFormItemLabel } from "@mds/common/components/forms/BaseInput";
+import { BaseInputProps, BaseViewInput, getFormItemLabel } from "@mds/common/components/forms/BaseInput";
 import { IOption } from "@mds/common/interfaces";
 import { FormContext } from "./FormWrapper";
 
@@ -40,6 +40,36 @@ const RenderRadioButtons: FC<RenderRadioButtonsProps> = ({
     input.onChange(e.target.value);
   };
 
+  if (!isEditMode) {
+    if (optionType !== "default") {
+      const matching = options.find((opt) => opt.value === input.value);
+      return <BaseViewInput label={label} value={matching?.label} />
+    }
+    const radioGroupClass = isVertical ? "vertical-radio-group view-item" : "view-item"
+    return (
+      <Form.Item
+        id={id}
+        getValueProps={() => ({ value: input.value })}
+        name={input.name}
+        label={<div className="view-item-label">{getFormItemLabel(label, false, labelSubtitle, false)}</div>}
+        className="view-item"
+      >
+        <>
+          <Radio.Group
+            disabled={true}
+            name={input.name}
+            value={input.value}
+            options={options}
+            optionType={optionType}
+            className={radioGroupClass}
+            buttonStyle="solid"
+          />
+          {help && <div className={`form-item-help ${input.name}-form-help`}>{help}</div>}
+        </>
+      </Form.Item>
+    );
+  }
+
   return (
     <Form.Item
       id={id}
@@ -55,7 +85,7 @@ const RenderRadioButtons: FC<RenderRadioButtonsProps> = ({
     >
       <>
         <Radio.Group
-          disabled={disabled || !isEditMode}
+          disabled={disabled}
           name={input.name}
           value={input.value}
           onChange={handleRadioChange}

services/common/src/components/forms/SteppedForm.tsx

@@ -122,7 +122,7 @@ const SteppedForm: FC<SteppedFormProps> = ({
     return {
       label: formatUrlToUpperCaseString(tab),
       key: tab,
-      disabled: child?.props?.disabled || (disableTabsOnError && errors.length > 0),
+      disabled: child?.props?.disabled || (isEditMode && disableTabsOnError && errors.length > 0),
       className: "stepped-menu-item",
       onClick: () => handleTabClick(tabs[indexOf(tabs, tab)]),
     };
@@ -143,7 +143,7 @@ const SteppedForm: FC<SteppedFormProps> = ({
           <div className="stepped-form-form-container">
             <FormWrapper
               name={name}
-              onSubmit={() => {}}
+              onSubmit={() => { }}
               initialValues={initialValues}
               isEditMode={isEditMode}
               reduxFormConfig={

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

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useContext, useEffect, useState } from "react";
 import { getFormValues } from "redux-form";
 import { useSelector } from "react-redux";
 import {
@@ -15,6 +15,7 @@ import { getPermits } from "@mds/common/redux/selectors/permitSelectors";
 import { FORM, isFieldDisabled } from "@mds/common/constants";
 import { IAuthorizationSummary } from "@mds/common/interfaces";
 import { getSystemFlag } from "@mds/common/redux/selectors/authenticationSelectors";
+import { FormContext } from "../forms/FormWrapper";
 
 export const ApplicationSummary: FC = () => {
   const permits = useSelector(getPermits);
@@ -35,6 +36,7 @@ export const ApplicationSummary: FC = () => {
   const processedEnvironmentActPermitResult: any[] = [];
   let processedOtherActPermitResult: any[] = [];
   const systemFlag = useSelector(getSystemFlag);
+  const { isEditMode } = useContext(FormContext);
 
   const minesActColumns: ColumnsType<IAuthorizationSummary> = [
     renderTextColumn("project_type", "Type", false),
@@ -227,6 +229,16 @@ export const ApplicationSummary: FC = () => {
     history.push(url);
   };
 
+  const editButton = <Col md={12} sm={24} style={{ textAlign: "right" }}>
+    <Button
+      disabled={isFieldDisabled(systemFlag, formValues?.status_code)}
+      type="default"
+      onClick={handleEditClicked}
+    >
+      {isEditMode ? "Edit" : "View"}
+    </Button>
+  </Col>;
+
   return (
     <div className="ant-form-vertical">
       <Typography.Title level={3}>Application Summary</Typography.Title>
@@ -246,15 +258,7 @@ export const ApplicationSummary: FC = () => {
         <Col md={12} sm={24}>
           <Typography.Title level={5}>Mines Act</Typography.Title>
         </Col>
-        <Col md={12} sm={24} style={{ textAlign: "right" }}>
-          <Button
-            disabled={isFieldDisabled(systemFlag, formValues?.status_code)}
-            type="default"
-            onClick={handleEditClicked}
-          >
-            Edit
-          </Button>
-        </Col>
+        {editButton}
       </Row>
       <CoreTable dataSource={minesActData} columns={minesActColumns} />
       <br />
@@ -263,63 +267,31 @@ export const ApplicationSummary: FC = () => {
         <Col md={12} sm={24}>
           <Typography.Title level={5}>Environmental Management Act</Typography.Title>
         </Col>
-        <Col md={12} sm={24} style={{ textAlign: "right" }}>
-          <Button
-            disabled={isFieldDisabled(systemFlag, formValues?.status_code)}
-            type="default"
-            onClick={handleEditClicked}
-          >
-            Edit
-          </Button>
-        </Col>
+        {editButton}
       </Row>
       <CoreTable dataSource={environmentalManagementActData} columns={otherActColumns} />
       <br />
       <Row gutter={8}>
         <Col md={12} sm={24}>
           <Typography.Title level={5}>Water Sustainability Act</Typography.Title>
         </Col>
-        <Col md={12} sm={24} style={{ textAlign: "right" }}>
-          <Button
-            disabled={isFieldDisabled(systemFlag, formValues?.status_code)}
-            type="default"
-            onClick={handleEditClicked}
-          >
-            Edit
-          </Button>
-        </Col>
+        {editButton}
       </Row>
       <CoreTable dataSource={waterSustainabilityActData} columns={otherActColumns} />
       <br />
       <Row gutter={8}>
         <Col md={12} sm={24}>
           <Typography.Title level={5}>Forestry Act</Typography.Title>
         </Col>
-        <Col md={12} sm={24} style={{ textAlign: "right" }}>
-          <Button
-            disabled={isFieldDisabled(systemFlag, formValues?.status_code)}
-            type="default"
-            onClick={handleEditClicked}
-          >
-            Edit
-          </Button>
-        </Col>
+        {editButton}
       </Row>
       <CoreTable dataSource={forestryActData} columns={otherActColumns} />
       <br />
       <Row gutter={8}>
         <Col md={12} sm={24}>
           <Typography.Title level={5}>Other Legislation</Typography.Title>
         </Col>
-        <Col md={12} sm={24} style={{ textAlign: "right" }}>
-          <Button
-            disabled={isFieldDisabled(systemFlag, formValues?.status_code)}
-            type="default"
-            onClick={handleEditClicked}
-          >
-            Edit
-          </Button>
-        </Col>
+        {editButton}
       </Row>
       <CoreTable dataSource={otherLegislationActData} columns={otherActColumns} />
     </div>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {
   arrayPush,
@@ -57,6 +57,7 @@ import {
 } from "../..";
 import { SystemFlagEnum } from "@mds/common/constants/enums";
 import { getSystemFlag } from "@mds/common/redux/selectors/authenticationSelectors";
+import { FormContext } from "../forms/FormWrapper";
 
 const RenderEMAPermitCommonSections = ({ code, isAmendment, index, isDisabled }) => {
   const dispatch = useDispatch();
@@ -292,7 +293,7 @@ const RenderEMANewPermitSection = ({ code, isDisabled }) => {
   );
 };
 
-const RenderEMAAmendFieldArray = ({ fields, code, isDisabled }) => {
+const RenderEMAAmendFieldArray = ({ fields, code, isDisabled, isEditMode }) => {
   const handleRemoveAmendment = (index: number) => {
     fields.remove(index);
   };
@@ -317,9 +318,9 @@ const RenderEMAAmendFieldArray = ({ fields, code, isDisabled }) => {
                       </a>
                     </Typography.Text>
                   </Col>
-                  <Col>
+                  {isEditMode && <Col>
                     <Button onClick={() => handleRemoveAmendment(index)}>Cancel</Button>
-                  </Col>
+                  </Col>}
                 </Row>
               }
               name="existing_permits_authorizations[0]"
@@ -389,6 +390,7 @@ const RenderEMAAuthCodeFormSection = ({ code, isDisabled }) => {
   const hasNew = codeAuthorizations.NEW?.length > 0;
   const permitTypes = ["AMENDMENT", "NEW"];
   const dispatch = useDispatch();
+  const { isEditMode } = useContext(FormContext);
 
   const addAmendment = () => {
     dispatch(arrayPush(FORM.ADD_EDIT_PROJECT_SUMMARY, `authorizations.${code}.AMENDMENT`, {}));
@@ -437,16 +439,16 @@ const RenderEMAAuthCodeFormSection = ({ code, isDisabled }) => {
                       <FieldArray
                         name={`${code}.AMENDMENT`}
                         component={RenderEMAAmendFieldArray}
-                        props={{ code, isDisabled }}
+                        props={{ code, isDisabled, isEditMode }}
                       />
-                      <Button
+                      {isEditMode && <Button
                         disabled={isDisabled}
                         onClick={addAmendment}
                         icon={<PlusCircleFilled />}
                         className="btn-sm-padding margin-large--bottom"
                       >
                         Add another amendment
-                      </Button>
+                      </Button>}
                     </Row>
                   )}
                 </>
@@ -558,7 +560,7 @@ export const AuthorizationsInvolved = () => {
   const transformedProjectSummaryAuthorizationTypes = useSelector(
     getTransformedProjectSummaryAuthorizationTypes
   );
-
+  const { isEditMode } = useContext(FormContext);
   const amsAuthTypes = useSelector(getAmsAuthorizationTypes);
   const formValues = useSelector(getFormValues(FORM.ADD_EDIT_PROJECT_SUMMARY));
 
@@ -635,13 +637,13 @@ export const AuthorizationsInvolved = () => {
                         <Row gutter={[0, 16]}>
                           <Col>
                             <Checkbox
-                              disabled={isFieldDisabled(systemFlag, formValues?.status_code, true)}
+                              disabled={!isEditMode || isFieldDisabled(systemFlag, formValues?.status_code, true)}
                               data-cy={`checkbox-authorization-${child.code}`}
                               value={child.code}
                               checked={checked}
                               onChange={(e) => handleChange(e, child.code)}
                             >
-                              <b>{child.description}</b>
+                              <b className={!isEditMode && "view-item-label"}>{child.description}</b>
                             </Checkbox>
                             {checked && (
                               <>