Fix: #286 Save button should be disabled if there are no changes done…

… to the webhooks and user access modal during edit
decentralised-dataexchange · Nov 21, 2023 · f0a71fd · f0a71fd
1 parent c9eeccf
commit f0a71fd
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 29 deletions.
diff --git a/src/components/modals/dataAgreementModal.tsx b/src/components/modals/dataAgreementModal.tsx
@@ -34,6 +34,7 @@ import { PurposeDescription } from "../dataAgreements/PurposeDescription";
 import { LawfullBasisOfProcessingFormControll } from "../dataAgreements/LawfullBasisOfProcessing";
 import { OrganizationDetailsCRUDContext } from "../../contexts/organizationDetailsCrud";
 import SnackbarComponent from "../notification";
+import { isFormDataChanged } from "../../utils/isFormDataChanged";
 
 interface Props {
   open: boolean;
@@ -294,12 +295,6 @@ export default function DataAgreementModal(props: Props) {
     }
   }, [dataAgrreementRevisionIdForSelectedRecord, open]);
 
-  // To check the input field is change during update
-  const isFormDataChanged = () => {
-    const dirtyFields = methods.formState.dirtyFields;
-    return Object.keys(dirtyFields).length > 0;
-  };
-
   const [openExistingSchemaModal, setOpenExistingSchemaModal] = useState(false);
 
   const { organisationDetails, logoImageBase64, coverImageBase64 }: any =
@@ -332,7 +327,7 @@ export default function DataAgreementModal(props: Props) {
       mode === "Update" &&
       (selectedDataAgreement && selectedDataAgreement.lifecycle === "draft"
         ? selectedDataAgreement.lifecycle === "draft"
-        : isFormDataChanged())
+        : isFormDataChanged(methods.formState))
     ) {
       HttpService.updateDataAgreementById(
         DataAgreementPayload(
@@ -385,7 +380,7 @@ export default function DataAgreementModal(props: Props) {
           );
           setOpenSnackBar(true);
         });
-    } else if (mode === "Update" && isFormDataChanged()) {
+    } else if (mode === "Update" && isFormDataChanged(methods.formState)) {
       HttpService.updateDataAgreementById(
         DataAgreementPayload(
           createdData,
@@ -568,21 +563,21 @@ export default function DataAgreementModal(props: Props) {
                   style={
                     methods.formState.isValid &&
                     mode !== "Read" &&
-                    isFormDataChanged()
+                    isFormDataChanged(methods.formState)
                       ? buttonStyle
                       : disabledButtonstyle
                   }
                   sx={{
                     cursor:
                       methods.formState.isValid &&
                       mode !== "Read" &&
-                      isFormDataChanged()
+                      isFormDataChanged(methods.formState)
                         ? "pointer"
                         : "not-allowed",
                     color:
                       methods.formState.isValid &&
                       mode !== "Read" &&
-                      isFormDataChanged()
+                      isFormDataChanged(methods.formState)
                         ? "black"
                         : "#6D7676",
                     marginRight: "15px",
@@ -604,7 +599,7 @@ export default function DataAgreementModal(props: Props) {
                       (selectedDataAgreement &&
                       selectedDataAgreement.lifecycle === "draft"
                         ? selectedDataAgreement.lifecycle === "draft"
-                        : isFormDataChanged())
+                        : isFormDataChanged(methods.formState))
                         ? "pointer"
                         : "not-allowed",
                     color:
@@ -613,7 +608,7 @@ export default function DataAgreementModal(props: Props) {
                       (selectedDataAgreement &&
                       selectedDataAgreement.lifecycle === "draft"
                         ? selectedDataAgreement.lifecycle === "draft"
-                        : isFormDataChanged())
+                        : isFormDataChanged(methods.formState))
                         ? "black"
                         : "#6D7676",
                     "&:hover": {
@@ -628,7 +623,7 @@ export default function DataAgreementModal(props: Props) {
                     (selectedDataAgreement &&
                     selectedDataAgreement.lifecycle === "draft"
                       ? selectedDataAgreement.lifecycle === "draft"
-                      : isFormDataChanged())
+                      : isFormDataChanged(methods.formState))
                       ? buttonStyle
                       : disabledButtonstyle
                   }

diff --git a/src/components/modals/editUserAccessModal.tsx b/src/components/modals/editUserAccessModal.tsx
@@ -25,6 +25,7 @@ import {
 } from "./modalStyle";
 import { FormProvider, useForm } from "react-hook-form";
 import { HttpService } from "../../service/HTTPService";
+import { isFormDataChanged } from "../../utils/isFormDataChanged";
 
 interface Props {
   open: boolean;
@@ -84,9 +85,11 @@ export default function EditUserAccesModal(props: Props) {
     };
 
     if (idpDetails) {
-      HttpService.updateIdpByid(payload, idpDetails.id).then(() => {
-        setOpen(false);
-      });
+      if (isFormDataChanged(methods.formState)) {
+        HttpService.updateIdpByid(payload, idpDetails.id).then(() => {
+          setOpen(false);
+        });
+      }
     } else {
       HttpService.addNewIDP(payload).then(() => {
         setOpen(false);
@@ -298,16 +301,23 @@ export default function EditUserAccesModal(props: Props) {
                   variant="outlined"
                   type="submit"
                   style={
-                    methods.formState.isValid
+                    methods.formState.isValid &&
+                    isFormDataChanged(methods.formState)
                       ? buttonStyle
                       : disabledButtonstyle
                   }
                   sx={{
-                    cursor: methods.formState.isValid
-                      ? "pointer"
-                      : "not-allowed",
+                    cursor:
+                      methods.formState.isValid &&
+                      isFormDataChanged(methods.formState)
+                        ? "pointer"
+                        : "not-allowed",
                     marginRight: "20px",
-                    color: methods.formState.isValid ? "black" : "#6D7676",
+                    color:
+                      methods.formState.isValid &&
+                      isFormDataChanged(methods.formState)
+                        ? "black"
+                        : "#6D7676",
                     "&:hover": {
                       backgroundColor: "black",
                       color: "white",

diff --git a/src/components/modals/editwebhooksmodal.tsx b/src/components/modals/editwebhooksmodal.tsx
@@ -18,6 +18,7 @@ import CheckboxTree from "../webhooks/checkboxTree";
 import { HttpService } from "../../service/HTTPService";
 import { useForm } from "react-hook-form";
 import { OrganizationDetailsCRUDContext } from "../../contexts/organizationDetailsCrud";
+import { isFormDataChanged } from "../../utils/isFormDataChanged";
 
 interface Props {
   open: boolean;
@@ -125,12 +126,15 @@ export default function EditWebooks(props: Props) {
         },
       };
       if (mode === "Update") {
-        HttpService.updateWebhookById(payload, webhookDetailsForUpdate.id).then(
-          () => {
+        if (isFormDataChanged(formState)) {
+          HttpService.updateWebhookById(
+            payload,
+            webhookDetailsForUpdate.id
+          ).then(() => {
             onRefetch();
             setOpen(false);
-          }
-        );
+          });
+        }
       } else {
         HttpService.addWebhooks(payload).then(() => {
           onRefetch();
@@ -224,18 +228,24 @@ export default function EditWebooks(props: Props) {
               <Button
                 variant="outlined"
                 style={
-                  formState.isValid && checkWebhookIsSelected === true
+                  formState.isValid &&
+                  checkWebhookIsSelected === true &&
+                  isFormDataChanged(formState)
                     ? buttonStyle
                     : disabledButtonstyle
                 }
                 sx={{
                   cursor:
-                    formState.isValid && checkWebhookIsSelected === true
+                    formState.isValid &&
+                    checkWebhookIsSelected === true &&
+                    isFormDataChanged(formState)
                       ? "pointer"
                       : "not-allowed",
                   marginRight: "20px",
                   color:
-                    formState.isValid && checkWebhookIsSelected === true
+                    formState.isValid &&
+                    checkWebhookIsSelected === true &&
+                    isFormDataChanged(formState)
                       ? "black"
                       : "#6D7676",
                   "&:hover": {

diff --git a/src/utils/isFormDataChanged.tsx b/src/utils/isFormDataChanged.tsx
@@ -0,0 +1,5 @@
+  // To check the input field is changed during update
+export const isFormDataChanged = (formState: any) => {
+  const dirtyFields = formState.dirtyFields;
+  return Object.keys(dirtyFields).length > 0;
+};