From 9917fb0f9e58c48fbddbe4fae98eedb9a49de042 Mon Sep 17 00:00:00 2001 From: Pacifique LINJANJA Date: Thu, 11 Jul 2024 07:56:07 +0200 Subject: [PATCH] Fix/disable cancel button on save (#6204) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 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 Screenshot 2024-07-10 at 16 06 37 @FellipeMTX @Bonapara --------- Co-authored-by: Félix Malfait --- .../SaveAndCancelButtons/CancelButton.tsx | 15 ++++++++-- .../SaveAndCancelButtons.tsx | 4 ++- .../settings/data-model/SettingsNewObject.tsx | 7 +++-- .../data-model/SettingsObjectEdit.tsx | 1 + .../data-model/SettingsObjectFieldEdit.tsx | 13 ++++----- .../SettingsObjectNewFieldStep2.tsx | 29 ++++++++----------- 6 files changed, 39 insertions(+), 30 deletions(-) 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)} />