Fix/disable cancel button on save (#6204)

# This PR

- Fix #5675 
- Fix #6118 

Similarly to #5673 I have improved the field creation time by
re-fetching data on page redirection to the object page

<img width="1511" alt="Screenshot 2024-07-10 at 16 06 37"
src="https://github.com/twentyhq/twenty/assets/61581306/8ef8f4cb-4334-4f4c-b5d9-fea11fd5d99a">

@FellipeMTX @Bonapara

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx

@@ -2,8 +2,19 @@ import { LightButton } from '@/ui/input/button/components/LightButton';
 
 type CancelButtonProps = {
   onCancel?: () => void;
+  disabled?: boolean;
 };
 
-export const CancelButton = ({ onCancel }: CancelButtonProps) => {
+export const CancelButton = ({
-  return <LightButton title="Cancel" accent="tertiary" onClick={onCancel} />;
+  onCancel,
+  disabled = false,
+}: CancelButtonProps) => {
+  return (
+    <LightButton
+      title="Cancel"
+      accent="tertiary"
+      onClick={onCancel}
+      disabled={disabled}
+    />
+  );
 };

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveAndCancelButtons.tsx

@@ -13,16 +13,18 @@ type SaveAndCancelButtonsProps = {
   onSave?: () => void;
   onCancel?: () => void;
   isSaveDisabled?: boolean;
+  isCancelDisabled?: boolean;
 };
 
 export const SaveAndCancelButtons = ({
   onSave,
   onCancel,
   isSaveDisabled,
+  isCancelDisabled,
 }: SaveAndCancelButtonsProps) => {
   return (
     <StyledContainer>
-      <CancelButton onCancel={onCancel} />
+      <CancelButton onCancel={onCancel} disabled={isCancelDisabled} />
       <SaveButton onSave={onSave} disabled={isSaveDisabled} />
     </StyledContainer>
   );

packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx

@@ -1,6 +1,6 @@
+import { zodResolver } from '@hookform/resolvers/zod';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { H2Title, IconSettings } from 'twenty-ui';
 import { z } from 'zod';
 
@@ -40,8 +40,8 @@ export const SettingsNewObject = () => {
     resolver: zodResolver(newObjectFormSchema),
   });
 
-  const canSave =
+  const { isValid, isSubmitting } = formConfig.formState;
-    formConfig.formState.isValid && !formConfig.formState.isSubmitting;
+  const canSave = isValid && !isSubmitting;
 
   const handleSave = async (
     formValues: SettingsDataModelNewObjectFormValues,
@@ -84,6 +84,7 @@ export const SettingsNewObject = () => {
             />
             <SaveAndCancelButtons
               isSaveDisabled={!canSave}
+              isCancelDisabled={isSubmitting}
               onCancel={() => navigate(settingsObjectsPagePath)}
               onSave={formConfig.handleSubmit(handleSave)}
             />

packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx

@@ -124,6 +124,7 @@ export const SettingsObjectEdit = () => {
             {activeObjectMetadataItem.isCustom && (
               <SaveAndCancelButtons
                 isSaveDisabled={!canSave}
+                isCancelDisabled={isSubmitting}
                 onCancel={() =>
                   navigate(`${settingsObjectsPagePath}/${objectSlug}`)
                 }

packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx

@@ -1,11 +1,11 @@
-import { useEffect } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate, useParams } from 'react-router-dom';
 import { useApolloClient } from '@apollo/client';
 import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
 import omit from 'lodash.omit';
 import pick from 'lodash.pick';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router-dom';
 import { H2Title, IconArchive, IconSettings } from 'twenty-ui';
 import { z } from 'zod';
 
@@ -104,10 +104,8 @@ export const SettingsObjectFieldEdit = () => {
 
   if (!activeObjectMetadataItem || !activeMetadataField) return null;
 
-  const canSave =
+  const { isDirty, isValid, isSubmitting } = formConfig.formState;
-    formConfig.formState.isValid &&
+  const canSave = isDirty && isValid && !isSubmitting;
-    formConfig.formState.isDirty &&
-    !formConfig.formState.isSubmitting;
 
   const isLabelIdentifier = isLabelIdentifierField({
     fieldMetadataItem: activeMetadataField,
@@ -190,6 +188,7 @@ export const SettingsObjectFieldEdit = () => {
               {shouldDisplaySaveAndCancel && (
                 <SaveAndCancelButtons
                   isSaveDisabled={!canSave}
+                  isCancelDisabled={isSubmitting}
                   onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
                   onSave={formConfig.handleSubmit(handleSave)}
                 />

packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate, useParams } from 'react-router-dom';
 import { useApolloClient } from '@apollo/client';
 import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
 import pick from 'lodash.pick';
+import { useEffect, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router-dom';
 import { H2Title, IconSettings } from 'twenty-ui';
 import { z } from 'zod';
 
@@ -109,8 +109,8 @@ export const SettingsObjectNewFieldStep2 = () => {
 
   if (!activeObjectMetadataItem) return null;
 
-  const canSave =
+  const { isValid, isSubmitting } = formConfig.formState;
-    formConfig.formState.isValid && !formConfig.formState.isSubmitting;
+  const canSave = isValid && !isSubmitting;
 
   const handleSave = async (
     formValues: SettingsDataModelNewFieldFormValues,
@@ -134,26 +134,20 @@ export const SettingsObjectNewFieldStep2 = () => {
             objectMetadataId: relationFormValues.objectMetadataId,
           },
         });
-
-        // TODO: fix optimistic update logic
-        // Forcing a refetch for now but it's not ideal
-        await apolloClient.refetchQueries({
-          include: ['FindManyViews', 'CombinedFindManyRecords'],
-        });
       } else {
         await createMetadataField({
           ...formValues,
           objectMetadataId: activeObjectMetadataItem.id,
         });
-
-        // TODO: fix optimistic update logic
-        // Forcing a refetch for now but it's not ideal
-        await apolloClient.refetchQueries({
-          include: ['FindManyViews', 'CombinedFindManyRecords'],
-        });
       }
 
       navigate(`/settings/objects/${objectSlug}`);
+
+      // TODO: fix optimistic update logic
+      // Forcing a refetch for now but it's not ideal
+      await apolloClient.refetchQueries({
+        include: ['FindManyViews', 'CombinedFindManyRecords'],
+      });
     } catch (error) {
       enqueueSnackBar((error as Error).message, {
         variant: SnackBarVariant.Error,
@@ -193,6 +187,7 @@ export const SettingsObjectNewFieldStep2 = () => {
               {!activeObjectMetadataItem.isRemote && (
                 <SaveAndCancelButtons
                   isSaveDisabled={!canSave}
+                  isCancelDisabled={isSubmitting}
                   onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
                   onSave={formConfig.handleSubmit(handleSave)}
                 />