From d350143c9204037596d4202f2917f167202193e1 Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Fri, 11 Oct 2024 22:37:56 +0530 Subject: [PATCH] Fix field forms (#7595) @lucasbordeau forms are broken! revert - #7363 used useRelationSettingsFormInitialValues hook from that commit. TODO - figure out a way to change the relation name label from singular to plural and vice versa, until it is edited. related issue - #7355 --------- Co-authored-by: Lucas Bordeau --- .../SettingsDataModelFieldIconLabelForm.tsx | 38 +------------------ .../SettingsDataModelFieldRelationForm.tsx | 33 +++------------- ...DataModelFieldRelationSettingsFormCard.tsx | 5 ++- 3 files changed, 10 insertions(+), 66 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx index 3e6b321361..d4771446e5 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx @@ -3,14 +3,10 @@ import { Controller, useFormContext } from 'react-hook-form'; import { z } from 'zod'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; -import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fieldMetadataItemSchema'; import { getErrorMessageFromError } from '@/settings/data-model/fields/forms/utils/errorMessages'; -import { RelationType } from '@/settings/data-model/types/RelationType'; import { IconPicker } from '@/ui/input/components/IconPicker'; import { TextInput } from '@/ui/input/components/TextInput'; -import { useEffect, useState } from 'react'; -import { RelationDefinitionType } from '~/generated-metadata/graphql'; export const settingsDataModelFieldIconLabelFormSchema = ( existingOtherLabels: string[] = [], @@ -36,47 +32,19 @@ type SettingsDataModelFieldIconLabelFormProps = { disabled?: boolean; fieldMetadataItem?: FieldMetadataItem; maxLength?: number; - relationObjectMetadataItem?: ObjectMetadataItem; - relationType?: RelationType; }; export const SettingsDataModelFieldIconLabelForm = ({ disabled, fieldMetadataItem, maxLength, - relationObjectMetadataItem, - relationType, }: SettingsDataModelFieldIconLabelFormProps) => { const { control, trigger, formState: { errors }, - setValue, } = useFormContext(); - const [labelEditedManually, setLabelEditedManually] = useState(false); - const [iconEditedManually, setIconEditedManually] = useState(false); - - useEffect(() => { - if (labelEditedManually || !relationType) return; - const label = [ - RelationDefinitionType.ManyToOne, - RelationDefinitionType.ManyToMany, - ].includes(relationType ?? RelationDefinitionType.OneToMany) - ? relationObjectMetadataItem?.labelPlural - : relationObjectMetadataItem?.labelSingular; - setValue('label', label ?? ''); - - if (iconEditedManually) return; - setValue('icon', relationObjectMetadataItem?.icon ?? 'IconUsers'); - }, [ - labelEditedManually, - iconEditedManually, - relationObjectMetadataItem, - setValue, - relationType, - ]); - return ( { - setIconEditedManually(true); - onChange(iconKey); - }} + onChange={({ iconKey }) => onChange(iconKey)} variant="primary" /> )} @@ -104,7 +69,6 @@ export const SettingsDataModelFieldIconLabelForm = ({ placeholder="Employees" value={value} onChange={(e) => { - setLabelEditedManually(true); onChange(e); trigger('label'); }} diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx index 9b0968c4f1..854b59b681 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx @@ -5,18 +5,17 @@ import { z } from 'zod'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; +import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation'; import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fieldMetadataItemSchema'; import { FIELD_NAME_MAXIMUM_LENGTH } from '@/settings/data-model/constants/FieldNameMaximumLength'; import { RELATION_TYPES } from '@/settings/data-model/constants/RelationTypes'; import { useRelationSettingsFormInitialValues } from '@/settings/data-model/fields/forms/relation/hooks/useRelationSettingsFormInitialValues'; -import { SettingsDataModelFieldPreviewCardProps } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard'; import { RelationType } from '@/settings/data-model/types/RelationType'; import { IconPicker } from '@/ui/input/components/IconPicker'; import { Select } from '@/ui/input/components/Select'; import { TextInput } from '@/ui/input/components/TextInput'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; -import { useEffect, useState } from 'react'; import { RelationDefinitionType } from '~/generated-metadata/graphql'; export const settingsDataModelFieldRelationFormSchema = z.object({ @@ -41,7 +40,7 @@ export type SettingsDataModelFieldRelationFormValues = z.infer< type SettingsDataModelFieldRelationFormProps = { fieldMetadataItem: Pick; - objectMetadataItem: SettingsDataModelFieldPreviewCardProps['objectMetadataItem']; + objectMetadataItem: ObjectMetadataItem; }; const StyledContainer = styled.div` @@ -84,17 +83,12 @@ export const SettingsDataModelFieldRelationForm = ({ fieldMetadataItem, objectMetadataItem, }: SettingsDataModelFieldRelationFormProps) => { - const { - control, - watch: watchFormValue, - setValue, - } = useFormContext(); + const { control, watch: watchFormValue } = + useFormContext(); const { getIcon } = useIcons(); const { objectMetadataItems, findObjectMetadataItemById } = useFilteredObjectMetadataItems(); - const [labelEditedManually, setLabelEditedManually] = useState(false); - const { disableFieldEdition, disableRelationEdition, @@ -111,20 +105,6 @@ export const SettingsDataModelFieldRelationForm = ({ ); const isMobile = useIsMobile(); - const relationType = watchFormValue('relation.type'); - - useEffect(() => { - if (labelEditedManually) return; - setValue( - 'relation.field.label', - [ - RelationDefinitionType.ManyToMany, - RelationDefinitionType.ManyToOne, - ].includes(relationType) - ? objectMetadataItem.labelPlural - : objectMetadataItem.labelSingular, - ); - }, [labelEditedManually, objectMetadataItem, relationType, setValue]); return ( @@ -195,10 +175,7 @@ export const SettingsDataModelFieldRelationForm = ({ disabled={disableFieldEdition} placeholder="Field name" value={value} - onChange={(newValue) => { - setLabelEditedManually(true); - onChange(newValue); - }} + onChange={onChange} fullWidth maxLength={FIELD_NAME_MAXIMUM_LENGTH} /> diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx index 33509e08e6..0372ba0714 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx @@ -60,7 +60,10 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({ initialRelationObjectMetadataItem, initialRelationType, initialRelationFieldMetadataItem, - } = useRelationSettingsFormInitialValues({ fieldMetadataItem }); + } = useRelationSettingsFormInitialValues({ + fieldMetadataItem, + objectMetadataItem, + }); const relationObjectMetadataId = watchFormValue( 'relation.objectMetadataId',