[MDS-6395] Remove Skeleton from Permit Conditions (#3434)

* remove skeleton, track loading instead * some little fixes- the submit button, add in something I shouldn't have taken out, more loading indicators
bcgov · Feb 26, 2025 · c9c3c52 · c9c3c52
1 parent fa1765c
commit c9c3c52
Show file tree

Hide file tree

Showing 18 changed files with 223 additions and 102 deletions.
diff --git a/services/common/src/components/forms/RenderCancelButton.tsx b/services/common/src/components/forms/RenderCancelButton.tsx
@@ -32,6 +32,8 @@ interface RenderCancelButtonProps {
   cancelFunction?: () => void | Promise<void>;
   cancelModalProps?: ModalFuncProps;
   iconButton?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
 }
 
 /**
@@ -48,7 +50,9 @@ const RenderCancelButton: FC<RenderCancelButtonProps> = ({
   buttonProps = { type: "default" },
   cancelFunction,
   cancelModalProps,
-  iconButton = false
+  iconButton = false,
+  disabled = false,
+  loading = false,
 }) => {
   const dispatch = useDispatch();
   const { formName, isModal, isEditMode } = useContext(FormContext);
@@ -72,7 +76,7 @@ const RenderCancelButton: FC<RenderCancelButtonProps> = ({
   const className = `${buttonProps?.className ?? ""} form-btn`;
 
   return (
-    <CoreButton aria-label="Cancel" {...buttonProps} className={className} type={buttonType} onClick={() => buttonCancelFunction()}>
+    <CoreButton aria-label="Cancel" loading={loading} disabled={disabled} {...buttonProps} className={className} type={buttonType} onClick={() => buttonCancelFunction()}>
       {!iconButton && buttonLabel}
     </CoreButton>
   );

diff --git a/services/common/src/components/forms/RenderSubmitButton.tsx b/services/common/src/components/forms/RenderSubmitButton.tsx
@@ -27,6 +27,7 @@ const RenderSubmitButton: FC<RenderSubmitButtonProps> = ({
   const submitting = useSelector(isSubmitting(formName));
   const isFormDirty = useSelector(isDirty(formName));
   const disabled = props.disabled || submitting || (!isFormDirty && disableOnClean);
+  const loading = props.loading || (submitting && !iconButton);
   const className = `${buttonProps?.className ?? ""} form-btn`;
 
   return (
@@ -35,7 +36,7 @@ const RenderSubmitButton: FC<RenderSubmitButtonProps> = ({
         <Button
           type="primary"
           disabled={disabled}
-          loading={submitting || props.loading}
+          loading={loading}
           htmlType="submit"
           icon={icon}
           aria-label="Submit"

diff --git a/services/core-web/src/components/Forms/reports/ReportPermitRequirementForm.tsx b/services/core-web/src/components/Forms/reports/ReportPermitRequirementForm.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useEffect } from "react";
 import { Field } from "@mds/common/components/forms/form";
 import { Button, Col, Row, Typography } from "antd";
-import { useDispatch } from "react-redux";
+import { useAppDispatch } from "@mds/common/redux/rootState";
 import {
   IMineReport,
   IMineReportPermitRequirement,
@@ -27,6 +27,8 @@ import {
   updateMineReportPermitRequirement,
 } from "@mds/common/redux/slices/mineReportPermitRequirementSlice";
 import { deleteConfirmWrapper } from "@mds/common/components/common/ActionMenu";
+import { usePermitConditions } from "@/components/mine/Permit/PermitConditionsContext";
+
 
 interface ReportPermitRequirementProps {
   onSubmit?: (values: Partial<IMineReport>) => void | Promise<void>;
@@ -51,8 +53,9 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
   currentAmendment,
   mineGuid,
 }) => {
-  const dispatch = useDispatch();
-  const [isEditMode, setIsEditMode] = React.useState(modalView);
+  const { loading } = usePermitConditions();
+  const dispatch = useAppDispatch();
+  const [isEditMode, setIsEditMode] = React.useState(modalView && canEditPermitConditions);
 
   useEffect(() => {
     if (!canEditPermitConditions) {
@@ -62,7 +65,6 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
 
   const handleDeleteReportRequirement = async ({ mine_report_permit_requirement_id }) => {
     deleteConfirmWrapper("Report Requirement", async () => {
-      // @ts-ignore
       await dispatch(deleteMineReportPermitRequirement({ mineGuid, mine_report_permit_requirement_id })).then(async () => {
         await refreshData();
         setIsEditMode(false);
@@ -71,7 +73,6 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
   };
 
   const handleEditReportRequirement = async (values) => {
-    // @ts-ignore
     await dispatch(updateMineReportPermitRequirement({ mineGuid, values })).then(async () => {
       await refreshData();
       setIsEditMode(false);
@@ -121,6 +122,7 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
               label="Report Type"
               validate={[maxLength(255)]}
               component={RenderField}
+              disabled={loading}
             />
           </Col>
           <Col span={12}>
@@ -136,6 +138,7 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
                   label: key,
                 };
               })}
+              disabled={loading}
             />
           </Col>
           <Col md={12} sm={24}>
@@ -145,6 +148,7 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
               placeholder="Select date"
               formatViewDate
               component={RenderDate}
+              disabled={loading}
             />
           </Col>
           <Col md={12} sm={24}>
@@ -173,6 +177,7 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
                 isVertical
                 validate={[requiredRadioButton]}
                 component={RenderRadioButtons}
+                disabled={loading}
               />
             )}
           </Col>
@@ -201,13 +206,15 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
                     label: REPORT_MINISTRY_RECIPIENT_HASH[key],
                   };
                 })}
+                disabled={loading}
               />
             )}
           </Col>
         </Row>
         <Row justify={isEditMode && mineReportPermitRequirement ? "space-between" : "end"}>
           {(isEditMode && mineReportPermitRequirement) && (
             <LinkButton
+              disabled={loading}
               className="report-delete-button"
               onClick={() => handleDeleteReportRequirement(mineReportPermitRequirement)}
             >
@@ -218,14 +225,16 @@ export const ReportPermitRequirementForm: FC<ReportPermitRequirementProps> = ({
           {isEditMode ? (
             <div>
               <RenderCancelButton
+                loading={loading}
                 cancelFunction={!modalView ? () => setIsEditMode(false) : undefined}
               />
-              <Button type="primary" htmlType="submit">
+              <Button type="primary" htmlType="submit" loading={loading}>
                 {mineReportPermitRequirement ? "Update" : "Add"} Report
               </Button>
             </div>
           ) : (canEditPermitConditions &&
             <Button
+              loading={loading}
               type="primary"
               onClick={(event) => {
                 event.preventDefault();

diff --git a/services/core-web/src/components/mine/Permit/PermitConditionCategory.spec.tsx b/services/core-web/src/components/mine/Permit/PermitConditionCategory.spec.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { render, fireEvent, screen } from "@testing-library/react";
 import { ReduxWrapper } from "@mds/common/tests/utils/ReduxWrapper";
 import { EditPermitConditionCategoryInline } from "./PermitConditionCategory";
+import { PermitConditionsProvider } from "./PermitConditionsContext";
 
 const mockCategory = {
   condition_category_code: "TEST-CAT",
@@ -22,13 +23,25 @@ const mockProps = {
   moveDown: jest.fn()
 };
 
+const providerParams = {
+  mineGuid: "mineGuid",
+  permitGuid: "permitGuid",
+  latestAmendment: null,
+  previousAmendment: null,
+  currentAmendment: null,
+  loading: false,
+  setLoading: jest.fn(),
+};
+
 const initialState = {};
 
 describe("PermitConditionCategory", () => {
   it("renders category title with count in view mode", () => {
     render(
       <ReduxWrapper initialState={initialState}>
-        <EditPermitConditionCategoryInline {...mockProps} />
+        <PermitConditionsProvider value={providerParams}>
+          <EditPermitConditionCategoryInline {...mockProps} />
+        </PermitConditionsProvider>
       </ReduxWrapper>
     );
 
@@ -38,7 +51,9 @@ describe("PermitConditionCategory", () => {
   it("switches to edit mode on click", () => {
     render(
       <ReduxWrapper initialState={initialState}>
-        <EditPermitConditionCategoryInline {...mockProps} />
+        <PermitConditionsProvider value={providerParams}>
+          <EditPermitConditionCategoryInline {...mockProps} />
+        </PermitConditionsProvider>
       </ReduxWrapper>
     );
 
@@ -49,7 +64,9 @@ describe("PermitConditionCategory", () => {
   it("calls moveUp when up arrow clicked", () => {
     render(
       <ReduxWrapper initialState={initialState}>
-        <EditPermitConditionCategoryInline {...mockProps} />
+        <PermitConditionsProvider value={providerParams}>
+          <EditPermitConditionCategoryInline {...mockProps} />
+        </PermitConditionsProvider>
       </ReduxWrapper>
     );
 
@@ -63,7 +80,9 @@ describe("PermitConditionCategory", () => {
   it("calls moveDown when down arrow clicked", () => {
     render(
       <ReduxWrapper initialState={initialState}>
-        <EditPermitConditionCategoryInline {...mockProps} />
+        <PermitConditionsProvider value={providerParams}>
+          <EditPermitConditionCategoryInline {...mockProps} />
+        </PermitConditionsProvider>
       </ReduxWrapper>
     );
 
@@ -77,7 +96,9 @@ describe("PermitConditionCategory", () => {
   it("disables delete button when condition count > 0", () => {
     render(
       <ReduxWrapper initialState={initialState}>
-        <EditPermitConditionCategoryInline {...mockProps} conditionCount={1} />
+        <PermitConditionsProvider value={providerParams}>
+          <EditPermitConditionCategoryInline {...mockProps} conditionCount={1} />
+        </PermitConditionsProvider>
       </ReduxWrapper>
     );
 
@@ -90,7 +111,9 @@ describe("PermitConditionCategory", () => {
   it("enables delete button when condition count = 0", () => {
     render(
       <ReduxWrapper initialState={initialState}>
-        <EditPermitConditionCategoryInline {...mockProps} conditionCount={0} />
+        <PermitConditionsProvider value={providerParams}>
+          <EditPermitConditionCategoryInline {...mockProps} conditionCount={0} />
+        </PermitConditionsProvider>
       </ReduxWrapper>
     );
 
@@ -110,7 +133,9 @@ describe("PermitConditionCategory", () => {
   it("submits form with updated values", async () => {
     render(
       <ReduxWrapper initialState={initialState}>
-        <EditPermitConditionCategoryInline {...mockProps} />
+        <PermitConditionsProvider value={providerParams}>
+          <EditPermitConditionCategoryInline {...mockProps} />
+        </PermitConditionsProvider>
       </ReduxWrapper>
     );
 

diff --git a/services/core-web/src/components/mine/Permit/PermitConditionCategory.tsx b/services/core-web/src/components/mine/Permit/PermitConditionCategory.tsx
@@ -12,6 +12,7 @@ import PermitConditionCategorySelector from "./PermitConditionCategorySelector";
 import { required } from "@mds/common/redux/utils/Validate";
 import { useDispatch } from "react-redux";
 import { formatPermitConditionStep } from "@mds/common/utils/helpers";
+import { usePermitConditions } from "./PermitConditionsContext";
 
 export interface IPermitConditionCategoryProps {
   canEdit: boolean;
@@ -28,6 +29,7 @@ export interface IPermitConditionCategoryProps {
 export const EditPermitConditionCategoryInline: FC<IPermitConditionCategoryProps> = ({ category, ...props }) => {
   const [isEditMode, setIsEditMode] = useState(false);
   const { condition_category_code } = category;
+  const { loading } = usePermitConditions();
 
   const dispatch = useDispatch();
   const formName = `${FORM.INLINE_EDIT_PERMIT_CONDITION_CATEGORY}}-${condition_category_code}`;
@@ -73,21 +75,33 @@ export const EditPermitConditionCategoryInline: FC<IPermitConditionCategoryProps
     <FormWrapper scrollOnToggleEdit={false} name={formName} onSubmit={handleSubmit} initialValues={category} isEditMode={isEditMode}>
       <Row style={{ gap: '0.5em' }}>
         <Col flex-shrink="1" style={{ maxWidth: '40px' }}>
-          <Field name="step" component={RenderField} required={true} validate={[required]} style={{ marginRight: 0, }} />
+          <Field
+            name="step"
+            component={RenderField}
+            required={true}
+            validate={[required]}
+            style={{ marginRight: 0, }}
+            disabled={loading}
+          />
         </Col>
         <Col>
           <PermitConditionCategorySelector showLabel={false} />
         </Col>
         <Col flex="auto" style={{ display: 'flex', gap: '0.5em' }}>
           <Button
+            disabled={loading}
             className="icon-button-container"
             style={{ marginRight: 0 }}
             onClick={cancel}
             type="primary"
             icon={<FontAwesomeIcon icon={faXmark} />}
           />
 
-          <RenderSubmitButton buttonText="" buttonProps={{ "aria-label": "Confirm", className: "icon-button-container", style: { marginRight: 0, marginLeft: 0 }, icon: <FontAwesomeIcon icon={faCheck} /> }} />
+          <RenderSubmitButton
+            disabled={loading}
+            icon={<FontAwesomeIcon icon={faCheck} />}
+            buttonProps={{ "aria-label": "Confirm", className: "fa-icon-container", style: { marginRight: 0, marginLeft: 0 } }}
+          />
 
           <Popconfirm
             disabled={props.conditionCount > 0}
@@ -103,14 +117,15 @@ export const EditPermitConditionCategoryInline: FC<IPermitConditionCategoryProps
             cancelText="No"
           >
             <Button
+              loading={loading}
               disabled={props.conditionCount > 0}
               danger={true}
               icon={<FontAwesomeIcon icon={faTrash} />}
               aria-label="Delete Category" />
           </Popconfirm>
 
           <Button
-            disabled={props.currentPosition <= 0}
+            disabled={props.currentPosition <= 0 || loading}
             onClick={(event) => {
               event.stopPropagation();
               props.moveUp(category);
@@ -121,7 +136,7 @@ export const EditPermitConditionCategoryInline: FC<IPermitConditionCategoryProps
           />
           <Button
             style={{ marginLeft: 0 }}
-            disabled={props.currentPosition >= props.categoryCount - 1}
+            disabled={props.currentPosition >= props.categoryCount - 1 || loading}
             aria-label="Move Category Down"
             onClick={(event) => {
               event.stopPropagation();

diff --git a/services/core-web/src/components/mine/Permit/PermitConditionForm.spec.tsx b/services/core-web/src/components/mine/Permit/PermitConditionForm.spec.tsx
@@ -37,6 +37,8 @@ describe("PermitConditionForm", () => {
         latestAmendment: MOCK.PERMITS[0].permit_amendments[0],
         previousAmendment: MOCK.PERMITS[0].permit_amendments[1],
         currentAmendment: MOCK.PERMITS[0].permit_amendments[0],
+        loading: false,
+        setLoading: jest.fn()
     };
 
     it("renders properly in edit mode", async () => {