From 72521d5554361c8d072509c717606136efa52279 Mon Sep 17 00:00:00 2001
From: Marie <51697796+ijreilly@users.noreply.github.com>
Date: Fri, 10 May 2024 18:18:39 +0200
Subject: [PATCH] Disable save button while submitting form in settings 
 (#5352)

as per title
---
 .../pages/settings/data-model/SettingsNewObject.tsx  | 11 ++++++-----
 .../pages/settings/data-model/SettingsObjectEdit.tsx | 11 ++++++-----
 .../settings/data-model/SettingsObjectFieldEdit.tsx  | 12 ++++++++----
 .../SettingsObjectNewFieldStep2.tsx                  | 11 ++++++-----
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
index 118b489f7..97072bef4 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
@@ -39,11 +39,12 @@ export const SettingsNewObject = () => {
     resolver: zodResolver(newObjectFormSchema),
   });
 
-  const canSave = formConfig.formState.isValid;
-
-  const handleSave = async () => {
-    const formValues = formConfig.getValues();
+  const canSave =
+    formConfig.formState.isValid && !formConfig.formState.isSubmitting;
 
+  const handleSave = async (
+    formValues: SettingsDataModelNewObjectFormValues,
+  ) => {
     try {
       const { data: response } = await createOneObjectMetadataItem(
         settingsCreateObjectInputSchema.parse(formValues),
@@ -81,7 +82,7 @@ export const SettingsNewObject = () => {
             <SaveAndCancelButtons
               isSaveDisabled={!canSave}
               onCancel={() => navigate(settingsObjectsPagePath)}
-              onSave={handleSave}
+              onSave={formConfig.handleSubmit(handleSave)}
             />
           </SettingsHeaderContainer>
           <Section>
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
index 417b4e8f0..678036915 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
@@ -63,11 +63,12 @@ export const SettingsObjectEdit = () => {
 
   if (!activeObjectMetadataItem) return null;
 
-  const { isDirty, isValid } = formConfig.formState;
-  const canSave = isDirty && isValid;
+  const { isDirty, isValid, isSubmitting } = formConfig.formState;
+  const canSave = isDirty && isValid && !isSubmitting;
 
-  const handleSave = async () => {
-    const formValues = formConfig.getValues();
+  const handleSave = async (
+    formValues: SettingsDataModelObjectEditFormValues,
+  ) => {
     const dirtyFieldKeys = Object.keys(
       formConfig.formState.dirtyFields,
     ) as (keyof SettingsDataModelObjectEditFormValues)[];
@@ -121,7 +122,7 @@ export const SettingsObjectEdit = () => {
                 onCancel={() =>
                   navigate(`${settingsObjectsPagePath}/${objectSlug}`)
                 }
-                onSave={handleSave}
+                onSave={formConfig.handleSubmit(handleSave)}
               />
             )}
           </SettingsHeaderContainer>
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
index d009c4435..25c1fdf82 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
@@ -86,15 +86,19 @@ export const SettingsObjectFieldEdit = () => {
 
   if (!activeObjectMetadataItem || !activeMetadataField) return null;
 
-  const canSave = formConfig.formState.isValid && formConfig.formState.isDirty;
+  const canSave =
+    formConfig.formState.isValid &&
+    formConfig.formState.isDirty &&
+    !formConfig.formState.isSubmitting;
 
   const isLabelIdentifier = isLabelIdentifierField({
     fieldMetadataItem: activeMetadataField,
     objectMetadataItem: activeObjectMetadataItem,
   });
 
-  const handleSave = async () => {
-    const formValues = formConfig.getValues();
+  const handleSave = async (
+    formValues: SettingsDataModelFieldEditFormValues,
+  ) => {
     const { dirtyFields } = formConfig.formState;
 
     try {
@@ -166,7 +170,7 @@ export const SettingsObjectFieldEdit = () => {
               <SaveAndCancelButtons
                 isSaveDisabled={!canSave}
                 onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
-                onSave={handleSave}
+                onSave={formConfig.handleSubmit(handleSave)}
               />
             )}
           </SettingsHeaderContainer>
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
index 8b8df5f61..65fea4b72 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
@@ -112,11 +112,12 @@ export const SettingsObjectNewFieldStep2 = () => {
 
   if (!activeObjectMetadataItem) return null;
 
-  const canSave = formConfig.formState.isValid;
-
-  const handleSave = async () => {
-    const formValues = formConfig.getValues();
+  const canSave =
+    formConfig.formState.isValid && !formConfig.formState.isSubmitting;
 
+  const handleSave = async (
+    formValues: SettingsDataModelNewFieldFormValues,
+  ) => {
     try {
       if (
         formValues.type === FieldMetadataType.Relation &&
@@ -294,7 +295,7 @@ export const SettingsObjectNewFieldStep2 = () => {
               <SaveAndCancelButtons
                 isSaveDisabled={!canSave}
                 onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
-                onSave={handleSave}
+                onSave={formConfig.handleSubmit(handleSave)}
               />
             )}
           </SettingsHeaderContainer>