diff --git a/packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx b/packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx
index f20d8737d..e93d27a83 100644
--- a/packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx
+++ b/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) => {
- return ;
+export const CancelButton = ({
+ onCancel,
+ disabled = false,
+}: CancelButtonProps) => {
+ return (
+
+ );
};
diff --git a/packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveAndCancelButtons.tsx b/packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveAndCancelButtons.tsx
index 069e8aa20..5cb0e3677 100644
--- a/packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveAndCancelButtons.tsx
+++ b/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 (
-
+
);
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 cfb6f203b..7adb8ee74 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
+++ b/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 =
- formConfig.formState.isValid && !formConfig.formState.isSubmitting;
+ const { isValid, isSubmitting } = formConfig.formState;
+ const canSave = isValid && !isSubmitting;
const handleSave = async (
formValues: SettingsDataModelNewObjectFormValues,
@@ -84,6 +84,7 @@ export const SettingsNewObject = () => {
/>
navigate(settingsObjectsPagePath)}
onSave={formConfig.handleSubmit(handleSave)}
/>
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 d0232be5c..82fdb67b8 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
@@ -124,6 +124,7 @@ export const SettingsObjectEdit = () => {
{activeObjectMetadataItem.isCustom && (
navigate(`${settingsObjectsPagePath}/${objectSlug}`)
}
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 acc0bf1d1..9e0b6c422 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
+++ b/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 =
- formConfig.formState.isValid &&
- formConfig.formState.isDirty &&
- !formConfig.formState.isSubmitting;
+ const { isDirty, isValid, isSubmitting } = formConfig.formState;
+ const canSave = isDirty && isValid && !isSubmitting;
const isLabelIdentifier = isLabelIdentifierField({
fieldMetadataItem: activeMetadataField,
@@ -190,6 +188,7 @@ export const SettingsObjectFieldEdit = () => {
{shouldDisplaySaveAndCancel && (
navigate(`/settings/objects/${objectSlug}`)}
onSave={formConfig.handleSubmit(handleSave)}
/>
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 2ab332279..5abf79289 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
@@ -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 =
- formConfig.formState.isValid && !formConfig.formState.isSubmitting;
+ const { isValid, isSubmitting } = formConfig.formState;
+ 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 && (
navigate(`/settings/objects/${objectSlug}`)}
onSave={formConfig.handleSubmit(handleSave)}
/>