[MDS-6027] Edit Permit Conditions (#3342)

* extract a form, make it form-y

* format the step, implement move up/down

* implement other functions, styles, aria labels

* fix a little bug or two, use a fancy new selector

* add tests

* missed a console log

* remove unused import

* make imports non-ambiguous

* handle backspace. Also delete a random file to up my - ratio

.vscode/extensions.json

@@ -14,8 +14,9 @@
     "ms-azuretools.vscode-docker",
     "shd101wyy.markdown-preview-enhanced",
     "esbenp.prettier-vscode",
-    "sonarsource.sonarlint-vscode"
+    "sonarsource.sonarlint-vscode",
+    "ms-python.vscode-pylance"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []
-}
+}

services/common/src/components/documents/__snapshots__/ArchiveDocumentModal.spec.tsx.snap

@@ -147,6 +147,7 @@ exports[`ArchiveDocumentModal renders correctly and matches the snapshot 1`] = `
     class="ant-modal-footer"
   >
     <button
+      aria-label="Cancel"
       class="ant-btn ant-btn-default core-btn core-btn-default"
       type="button"
     >
@@ -155,6 +156,7 @@ exports[`ArchiveDocumentModal renders correctly and matches the snapshot 1`] = `
       </span>
     </button>
     <button
+      aria-label="Submit"
       class="ant-btn ant-btn-primary"
       type="submit"
     >

services/common/src/components/documents/__snapshots__/DeleteDocumentModal.spec.tsx.snap

@@ -147,6 +147,7 @@ exports[`DeleteDocumentModal renders correctly and matches the snapshot 1`] = `
     class="ant-modal-footer"
   >
     <button
+      aria-label="Cancel"
       class="ant-btn ant-btn-default core-btn core-btn-default"
       type="button"
     >
@@ -155,6 +156,7 @@ exports[`DeleteDocumentModal renders correctly and matches the snapshot 1`] = `
       </span>
     </button>
     <button
+      aria-label="Submit"
       class="ant-btn ant-btn-primary"
       type="submit"
     >

services/common/src/components/documents/__snapshots__/ReplaceDocumentModal.spec.tsx.snap

@@ -150,6 +150,7 @@ exports[`ReplaceDocumentModal renders correctly and matches the snapshot 1`] = `
     class="ant-modal-footer"
   >
     <button
+      aria-label="Cancel"
       class="ant-btn ant-btn-default core-btn core-btn-default"
       type="button"
     >
@@ -158,6 +159,7 @@ exports[`ReplaceDocumentModal renders correctly and matches the snapshot 1`] = `
       </span>
     </button>
     <button
+      aria-label="Submit"
       class="ant-btn ant-btn-primary"
       disabled=""
       type="submit"

services/common/src/components/documents/spatial/__snapshots__/AddSpatialDocumentsModal.spec.tsx.snap

@@ -232,6 +232,7 @@ exports[`AddSpatialDocumentsModal renders properly 1`] = `
       class="ant-row ant-row-end"
     >
       <button
+        aria-label="Cancel"
         class="ant-btn ant-btn-default core-btn core-btn-default"
         type="button"
       >
@@ -240,6 +241,7 @@ exports[`AddSpatialDocumentsModal renders properly 1`] = `
         </span>
       </button>
       <button
+        aria-label="Submit"
         class="ant-btn ant-btn-primary"
         disabled=""
         type="submit"

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

@@ -74,20 +74,24 @@ export interface BaseInputProps extends WrappedFieldProps {
   allowClear?: boolean;
   help?: string;
   showOptional?: boolean;
+  showNA?: boolean;
+  autoFocus?: boolean;
 }
 
 interface BaseViewInputProps {
   label?: string | ReactNode;
   value: string | number;
+  showNA?: boolean;
 }
-export const BaseViewInput: FC<BaseViewInputProps> = ({ label = "", value = "" }) => {
-  const displayValue = value ? value.toString() : EMPTY_FIELD;
+export const BaseViewInput: FC<BaseViewInputProps> = ({ label = "", value = "", showNA = true }) => {
+  const hasValue = value !== "";
+  const displayValue = hasValue ? 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">{displayValue}</Typography.Paragraph>
+      {(hasValue || showNA) && (<Typography.Paragraph className="view-item-value">{displayValue}</Typography.Paragraph>)}
     </div>
   );
 };

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

@@ -28,6 +28,7 @@ const RenderAutoSizeField: FC<AutoSizeProps> = ({
         if (!value.isEditMode) {
           return <BaseViewInput value={props.input.value} label={label} />;
         }
+        const showHelp = help || maximumCharacters !== undefined;
         return (
           <Form.Item
             name={props.input.name}
@@ -51,8 +52,9 @@ const RenderAutoSizeField: FC<AutoSizeProps> = ({
                 {...props.input}
                 autoSize={{ minRows: minRows }}
                 placeholder={props.placeholder}
+                autoFocus={props.autoFocus}
               />
-              <Row
+              {showHelp && <Row
                 justify="space-between"
                 className={`form-item-help ${props.input.name}-form-help`}
               >
@@ -61,9 +63,9 @@ const RenderAutoSizeField: FC<AutoSizeProps> = ({
                 ) : (
                   <span>{`Maximum ${maximumCharacters} characters`}</span>
                 )}
-                <span className="flex-end">{`${maximumCharacters -
-                  props.input.value.length} / ${maximumCharacters}`}</span>
-              </Row>
+                {<span className="flex-end">{`${maximumCharacters -
+                  props.input.value.length} / ${maximumCharacters}`}</span>}
+              </Row>}
             </>
           </Form.Item>
         );

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

@@ -15,14 +15,14 @@ export const cancelConfirmWrapper = (
   return !isFormDirty
     ? cancelFunction()
     : Modal.confirm(
-        modalProps ?? {
-          title: "Discard changes?",
-          content: "All changes made will not be saved.",
-          onOk: cancelFunction,
-          cancelText: "Continue Editing",
-          okText: "Discard",
-        }
-      );
+      modalProps ?? {
+        title: "Discard changes?",
+        content: "All changes made will not be saved.",
+        onOk: cancelFunction,
+        cancelText: "Continue Editing",
+        okText: "Discard",
+      }
+    );
 };
 
 interface RenderCancelButtonProps {
@@ -31,6 +31,7 @@ interface RenderCancelButtonProps {
   buttonProps?: BaseButtonProps;
   cancelFunction?: () => void | Promise<void>;
   cancelModalProps?: ModalFuncProps;
+  iconButton?: boolean;
 }
 
 /**
@@ -47,6 +48,7 @@ const RenderCancelButton: FC<RenderCancelButtonProps> = ({
   buttonProps = { type: "default" },
   cancelFunction,
   cancelModalProps,
+  iconButton = false
 }) => {
   const dispatch = useDispatch();
   const { formName, isModal, isEditMode } = useContext(FormContext);
@@ -66,9 +68,10 @@ const RenderCancelButton: FC<RenderCancelButtonProps> = ({
     : handleCancel;
 
   const buttonType = buttonProps?.type ?? "default";
+  const buttonLabel = isEditMode ? buttonText : viewButtonText;
   return (
-    <CoreButton {...buttonProps} type={buttonType} onClick={() => buttonCancelFunction()}>
-      {isEditMode ? buttonText : viewButtonText}
+    <CoreButton aria-label="Cancel" {...buttonProps} type={buttonType} onClick={() => buttonCancelFunction()}>
+      {!iconButton && buttonLabel}
     </CoreButton>
   );
 };

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

@@ -19,12 +19,13 @@ const RenderField: FC<BaseInputProps> = ({
   id,
   placeholder,
   allowClear,
+  showNA,
 }) => {
   return (
     <FormConsumer>
       {(value) => {
         if (!value.isEditMode) {
-          return <BaseViewInput label={label} value={input?.value} />;
+          return <BaseViewInput label={label} value={input?.value} showNA={showNA} />;
         }
         const labelString = (label || input.name) instanceof String ? (String)(label || input.name) : input.name;
         return (

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

@@ -9,12 +9,14 @@ interface RenderSubmitButtonProps {
   buttonText?: string | ReactNode;
   buttonProps?: ButtonProps & React.RefAttributes<HTMLElement>;
   disableOnClean?: boolean;
+  iconButton?: boolean;
 }
 
 const RenderSubmitButton: FC<RenderSubmitButtonProps> = ({
   buttonText = "Save Changes",
   buttonProps,
   disableOnClean = true,
+  iconButton = false,
 }) => {
   const { formName, isEditMode } = useContext(FormContext);
   const submitting = useSelector(isSubmitting(formName));
@@ -29,9 +31,10 @@ const RenderSubmitButton: FC<RenderSubmitButtonProps> = ({
           disabled={disabled}
           loading={submitting}
           htmlType="submit"
+          aria-label="Submit"
           {...buttonProps}
         >
-          {buttonText}
+          {!iconButton && buttonText}
         </Button>
       )}
     </>

services/common/src/components/forms/__snapshots__/RenderCancelButton.spec.tsx.snap

@@ -8,6 +8,7 @@ exports[`RenderCancelButton component renders properly, does not show confirm on
   >
     <button
       ant-click-animating-without-extra-node="false"
+      aria-label="Cancel"
       class="ant-btn ant-btn-default core-btn core-btn-default"
       type="button"
     >

services/common/src/constants/forms.ts

@@ -9,6 +9,7 @@ export enum FORM {
   REQUEST_REPORT = "REQUEST_REPORT",
   ADD_REPORT_TO_PERMIT_CONDITION = "ADD_REPORT_TO_PERMIT_CONDITION",
   ADD_PERMIT_CONDITION_CATEGORY = "ADD_PERMIT_CONDITION_CATEGORY",
+  EDIT_PERMIT_CONDITION = "EDIT_PERMIT_CONDITION",
   // tailings
   ADD_TAILINGS = "ADD_TAILINGS",
   // documents

services/common/src/interfaces/permits/permitCondition.interface.ts

@@ -1,11 +1,5 @@
 import { IMineReportPermitRequirement } from "@mds/common/interfaces";
 
-export interface IPermitConditionCategory {
-  condition_category_code: string;
-  description: string;
-  display_order: number;
-  step: string;
-}
 export interface IPermitCondition {
   permit_condition_id: number;
   permit_amendment_id: number;
@@ -20,3 +14,11 @@ export interface IPermitCondition {
   display_order: number;
   mineReportPermitRequirement?: IMineReportPermitRequirement;
 }
+
+export interface IPermitConditionCategory {
+  condition_category_code: string;
+  description: string;
+  display_order: number;
+  step: string;
+  conditions?: IPermitCondition[]
+}

services/common/src/utils/helpers.ts

@@ -64,3 +64,20 @@ export const formatProjectPayload = (valuesFromForm: any, params: any) => {
   delete payloadValues.authorizationTypes;
   return payloadValues;
 };
+
+export const parsePermitConditionStep = (step: string) => {
+  if (step?.length > 0) {
+    return step.replace(".", "");
+  }
+  return step;
+}
+
+export const formatPermitConditionStep = (step: string) => {
+  if (step?.length > 0) {
+    if (step.endsWith(".")) {
+      return step;
+    }
+    return `${step}.`
+  }
+  return "";
+}

services/core-api/app/api/mines/permits/permit_conditions/models/permit_conditions.py

@@ -80,13 +80,10 @@ def step(self):
         # and is used to determine the display format of the step.
         # If not set (for manually added condtitions), we auto-generate the step
         if self._step:
-            # Format the first level with a trailing dot - A. B. C. and the rest with () - (a), (i), (ii)
-            if depth == 0:
-                return f"{self._step}."
-            return f"({self._step})"
-        if self._step == "":
-            return ""
-
+            return self._step
+        if self._step == '':
+            return ''
+
         step_format = depth % 3
         if step_format == 0:
             return str(self.display_order) + "."

services/core-web/src/components/Forms/MajorProject/__snapshots__/UpdateStatusForm.spec.tsx.snap

@@ -184,6 +184,7 @@ exports[`UpdateStatusForm renders properly 1`] = `
                     </div>
                   </div>
                   <button
+                    aria-label="Submit"
                     class="ant-btn ant-btn-primary"
                     disabled=""
                     type="submit"