From da9c0790b8fb5a8c5ccb8de7a398b2bb40d0456e Mon Sep 17 00:00:00 2001 From: ehconitin Date: Fri, 11 Oct 2024 17:45:44 +0530 Subject: [PATCH 1/2] Revert "Prefill Relation Fields with Initiating Object Icon and Name (#7363)" This reverts commit e45e45d8b2f0080a17c25b89dc4a97ea95e3fc78. --- .../SettingsDataModelFieldIconLabelForm.tsx | 38 +------------------ .../SettingsDataModelFieldRelationForm.tsx | 37 ++---------------- ...DataModelFieldRelationSettingsFormCard.tsx | 1 - .../useRelationSettingsFormInitialValues.ts | 21 +++------- .../SettingsObjectNewFieldConfigure.tsx | 15 +++----- 5 files changed, 16 insertions(+), 96 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 c3b82ccddd8c..d4771446e5d3 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) 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 9b0968c4f180..d6f3fe48be10 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 @@ -10,13 +10,11 @@ import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fi 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 +39,6 @@ export type SettingsDataModelFieldRelationFormValues = z.infer< type SettingsDataModelFieldRelationFormProps = { fieldMetadataItem: Pick; - objectMetadataItem: SettingsDataModelFieldPreviewCardProps['objectMetadataItem']; }; const StyledContainer = styled.div` @@ -82,49 +79,26 @@ const RELATION_TYPE_OPTIONS = Object.entries(RELATION_TYPES) 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, initialRelationFieldMetadataItem, initialRelationObjectMetadataItem, initialRelationType, - } = useRelationSettingsFormInitialValues({ - fieldMetadataItem, - objectMetadataItem, - }); + } = useRelationSettingsFormInitialValues({ fieldMetadataItem }); const selectedObjectMetadataItem = findObjectMetadataItemById( watchFormValue('relation.objectMetadataId'), ); 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 +169,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 33509e08e632..db8f46e97216 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 @@ -114,7 +114,6 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({ form={ } /> diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/hooks/useRelationSettingsFormInitialValues.ts b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/hooks/useRelationSettingsFormInitialValues.ts index 298c3ad6dc24..bd4b2badd0e2 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/hooks/useRelationSettingsFormInitialValues.ts +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/hooks/useRelationSettingsFormInitialValues.ts @@ -2,17 +2,15 @@ import { useMemo } from 'react'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata'; +import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation'; -import { SettingsDataModelFieldPreviewCardProps } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard'; import { RelationDefinitionType } from '~/generated-metadata/graphql'; export const useRelationSettingsFormInitialValues = ({ fieldMetadataItem, - objectMetadataItem, }: { fieldMetadataItem?: Pick; - objectMetadataItem?: SettingsDataModelFieldPreviewCardProps['objectMetadataItem']; }) => { const { objectMetadataItems } = useFilteredObjectMetadataItems(); @@ -30,13 +28,11 @@ export const useRelationSettingsFormInitialValues = ({ const initialRelationObjectMetadataItem = useMemo( () => relationObjectMetadataItemFromFieldMetadata ?? - objectMetadataItem ?? + objectMetadataItems.find( + ({ nameSingular }) => nameSingular === CoreObjectNameSingular.Person, + ) ?? objectMetadataItems.filter(isObjectMetadataAvailableForRelation)[0], - [ - objectMetadataItem, - objectMetadataItems, - relationObjectMetadataItemFromFieldMetadata, - ], + [objectMetadataItems, relationObjectMetadataItemFromFieldMetadata], ); const initialRelationType = @@ -48,12 +44,7 @@ export const useRelationSettingsFormInitialValues = ({ disableRelationEdition: !!relationFieldMetadataItem, initialRelationFieldMetadataItem: relationFieldMetadataItem ?? { icon: initialRelationObjectMetadataItem.icon ?? 'IconUsers', - label: [ - RelationDefinitionType.ManyToMany, - RelationDefinitionType.ManyToOne, - ].includes(initialRelationType) - ? initialRelationObjectMetadataItem.labelPlural - : initialRelationObjectMetadataItem.labelSingular, + label: '', }, initialRelationObjectMetadataItem, initialRelationType, diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx index 0b27c458859b..4d00210c8782 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx @@ -2,7 +2,6 @@ import { useCreateOneRelationMetadataItem } from '@/object-metadata/hooks/useCre import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; -import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons'; @@ -48,7 +47,6 @@ export const SettingsObjectNewFieldConfigure = () => { const { findActiveObjectMetadataItemBySlug } = useFilteredObjectMetadataItems(); - const activeObjectMetadataItem = findActiveObjectMetadataItemBySlug(objectSlug); const { createMetadataField } = useFieldMetadataItem(); @@ -69,13 +67,6 @@ export const SettingsObjectNewFieldConfigure = () => { }, }); - const fieldMetadataItem: Pick = - { - icon: formConfig.watch('icon'), - label: formConfig.watch('label') || 'Employees', - type: formConfig.watch('type'), - }; - const [, setObjectViews] = useState([]); const [, setRelationObjectViews] = useState([]); @@ -209,7 +200,11 @@ export const SettingsObjectNewFieldConfigure = () => { From 80c65678cd976685c7995193076ded4e55335f1c Mon Sep 17 00:00:00 2001 From: ehconitin Date: Fri, 11 Oct 2024 18:12:40 +0530 Subject: [PATCH 2/2] temporary fix --- .../SettingsDataModelFieldRelationForm.tsx | 8 ++++++- ...DataModelFieldRelationSettingsFormCard.tsx | 6 +++++- .../useRelationSettingsFormInitialValues.ts | 21 +++++++++++++------ .../ui/input/button/components/IconButton.tsx | 2 +- 4 files changed, 28 insertions(+), 9 deletions(-) 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 d6f3fe48be10..854b59b68154 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,6 +5,7 @@ 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'; @@ -39,6 +40,7 @@ export type SettingsDataModelFieldRelationFormValues = z.infer< type SettingsDataModelFieldRelationFormProps = { fieldMetadataItem: Pick; + objectMetadataItem: ObjectMetadataItem; }; const StyledContainer = styled.div` @@ -79,6 +81,7 @@ const RELATION_TYPE_OPTIONS = Object.entries(RELATION_TYPES) export const SettingsDataModelFieldRelationForm = ({ fieldMetadataItem, + objectMetadataItem, }: SettingsDataModelFieldRelationFormProps) => { const { control, watch: watchFormValue } = useFormContext(); @@ -92,7 +95,10 @@ export const SettingsDataModelFieldRelationForm = ({ initialRelationFieldMetadataItem, initialRelationObjectMetadataItem, initialRelationType, - } = useRelationSettingsFormInitialValues({ fieldMetadataItem }); + } = useRelationSettingsFormInitialValues({ + fieldMetadataItem, + objectMetadataItem, + }); const selectedObjectMetadataItem = findObjectMetadataItemById( watchFormValue('relation.objectMetadataId'), 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 db8f46e97216..0372ba071417 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', @@ -114,6 +117,7 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({ form={ } /> diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/hooks/useRelationSettingsFormInitialValues.ts b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/hooks/useRelationSettingsFormInitialValues.ts index bd4b2badd0e2..298c3ad6dc24 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/hooks/useRelationSettingsFormInitialValues.ts +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/hooks/useRelationSettingsFormInitialValues.ts @@ -2,15 +2,17 @@ import { useMemo } from 'react'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata'; -import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation'; +import { SettingsDataModelFieldPreviewCardProps } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard'; import { RelationDefinitionType } from '~/generated-metadata/graphql'; export const useRelationSettingsFormInitialValues = ({ fieldMetadataItem, + objectMetadataItem, }: { fieldMetadataItem?: Pick; + objectMetadataItem?: SettingsDataModelFieldPreviewCardProps['objectMetadataItem']; }) => { const { objectMetadataItems } = useFilteredObjectMetadataItems(); @@ -28,11 +30,13 @@ export const useRelationSettingsFormInitialValues = ({ const initialRelationObjectMetadataItem = useMemo( () => relationObjectMetadataItemFromFieldMetadata ?? - objectMetadataItems.find( - ({ nameSingular }) => nameSingular === CoreObjectNameSingular.Person, - ) ?? + objectMetadataItem ?? objectMetadataItems.filter(isObjectMetadataAvailableForRelation)[0], - [objectMetadataItems, relationObjectMetadataItemFromFieldMetadata], + [ + objectMetadataItem, + objectMetadataItems, + relationObjectMetadataItemFromFieldMetadata, + ], ); const initialRelationType = @@ -44,7 +48,12 @@ export const useRelationSettingsFormInitialValues = ({ disableRelationEdition: !!relationFieldMetadataItem, initialRelationFieldMetadataItem: relationFieldMetadataItem ?? { icon: initialRelationObjectMetadataItem.icon ?? 'IconUsers', - label: '', + label: [ + RelationDefinitionType.ManyToMany, + RelationDefinitionType.ManyToOne, + ].includes(initialRelationType) + ? initialRelationObjectMetadataItem.labelPlural + : initialRelationObjectMetadataItem.labelSingular, }, initialRelationObjectMetadataItem, initialRelationType, diff --git a/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx index e5e83551cdcc..b5117f360ab7 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx @@ -37,7 +37,7 @@ const StyledButton = styled.button< ? focus ? theme.color.blue : theme.background.transparent.light - : 'transparent'}; + : theme.border.color.medium}; border-width: ${!disabled && focus ? '1px 1px !important' : 0}; box-shadow: ${!disabled && focus ? `0 0 0 3px ${theme.accent.tertiary}`