From 2f6e8f075955c6768eee0c71f179a4bd7d16d0cb Mon Sep 17 00:00:00 2001 From: Your Name Date: Thu, 10 Oct 2024 18:33:19 +0200 Subject: [PATCH 1/2] fix: Set field type icon as the default icon for new fields (#7352) --- .../SettingsObjectNewFieldConfigure.tsx | 20 +++++++------- .../data-model/constants/FieldTypeIcons.ts | 27 +++++++++++++++++++ 2 files changed, 37 insertions(+), 10 deletions(-) create mode 100644 packages/twenty-front/src/pages/settings/data-model/constants/FieldTypeIcons.ts 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..5d882b7e0e94 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'; @@ -30,6 +29,7 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; import { H2Title } from 'twenty-ui'; import { z } from 'zod'; import { FieldMetadataType } from '~/generated-metadata/graphql'; +import { defaultIconsByFieldType } from '~/pages/settings/data-model/constants/FieldTypeIcons'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; type SettingsDataModelNewFieldFormValues = z.infer< @@ -48,7 +48,6 @@ export const SettingsObjectNewFieldConfigure = () => { const { findActiveObjectMetadataItemBySlug } = useFilteredObjectMetadataItems(); - const activeObjectMetadataItem = findActiveObjectMetadataItemBySlug(objectSlug); const { createMetadataField } = useFieldMetadataItem(); @@ -63,18 +62,15 @@ export const SettingsObjectNewFieldConfigure = () => { ), defaultValues: { type: fieldType, - icon: 'IconUsers', + icon: defaultIconsByFieldType[fieldType] || 'IconUsers', label: '', description: '', }, }); - const fieldMetadataItem: Pick = - { - icon: formConfig.watch('icon'), - label: formConfig.watch('label') || 'Employees', - type: formConfig.watch('type'), - }; + useEffect(() => { + formConfig.setValue('icon', defaultIconsByFieldType[fieldType] || 'IconUsers'); + }, [fieldType, formConfig]); const [, setObjectViews] = useState([]); const [, setRelationObjectViews] = useState([]); @@ -209,7 +205,11 @@ export const SettingsObjectNewFieldConfigure = () => { diff --git a/packages/twenty-front/src/pages/settings/data-model/constants/FieldTypeIcons.ts b/packages/twenty-front/src/pages/settings/data-model/constants/FieldTypeIcons.ts new file mode 100644 index 000000000000..b5ee505bff70 --- /dev/null +++ b/packages/twenty-front/src/pages/settings/data-model/constants/FieldTypeIcons.ts @@ -0,0 +1,27 @@ +import { FieldMetadataType } from '~/generated-metadata/graphql'; + +export const defaultIconsByFieldType: Record = { + [FieldMetadataType.Address]: 'IconLocation', + [FieldMetadataType.Boolean]: 'IconCheckbox', + [FieldMetadataType.Currency]: 'IconCurrency', + [FieldMetadataType.Date]: 'IconCalendar', + [FieldMetadataType.DateTime]: 'IconClock', + [FieldMetadataType.FullName]: 'IconUser', + [FieldMetadataType.MultiSelect]: 'IconList', + [FieldMetadataType.Number]: 'IconNumber', + [FieldMetadataType.Rating]: 'IconStar', + [FieldMetadataType.RawJson]: 'IconCode', + [FieldMetadataType.Relation]: 'IconRelationOneToMany', + [FieldMetadataType.Select]: 'IconSelect', + [FieldMetadataType.Text]: 'IconTypography', + [FieldMetadataType.Uuid]: 'IconKey', + [FieldMetadataType.Array]: 'IconCodeDots', + [FieldMetadataType.Emails]: 'IconMail', + [FieldMetadataType.Links]: 'IconLink', + [FieldMetadataType.Phones]: 'IconPhone', + [FieldMetadataType.Actor]: 'IconUsers', + [FieldMetadataType.Numeric]: 'IconUsers', + [FieldMetadataType.Position]: 'IconUsers', + [FieldMetadataType.RichText]: 'IconUsers', + [FieldMetadataType.TsVector]: 'IconUsers' +}; \ No newline at end of file From 80bc279f6f4821bb34277182490f60111719831f Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Fri, 11 Oct 2024 15:34:35 +0200 Subject: [PATCH 2/2] Fix --- .../SettingsObjectNewFieldConfigure.tsx | 12 ++++++--- .../constants/DefaultIconsByFieldType.ts | 27 +++++++++++++++++++ .../data-model/constants/FieldTypeIcons.ts | 27 ------------------- 3 files changed, 36 insertions(+), 30 deletions(-) create mode 100644 packages/twenty-front/src/pages/settings/data-model/constants/DefaultIconsByFieldType.ts delete mode 100644 packages/twenty-front/src/pages/settings/data-model/constants/FieldTypeIcons.ts 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 5d882b7e0e94..5e8893813fb3 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 @@ -29,7 +29,7 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; import { H2Title } from 'twenty-ui'; import { z } from 'zod'; import { FieldMetadataType } from '~/generated-metadata/graphql'; -import { defaultIconsByFieldType } from '~/pages/settings/data-model/constants/FieldTypeIcons'; +import { DEFAULT_ICONS_BY_FIELD_TYPE } from '~/pages/settings/data-model/constants/DefaultIconsByFieldType'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; type SettingsDataModelNewFieldFormValues = z.infer< @@ -37,6 +37,8 @@ type SettingsDataModelNewFieldFormValues = z.infer< > & any; +const DEFAULT_ICON_FOR_NEW_FIELD = 'IconUsers'; + export const SettingsObjectNewFieldConfigure = () => { const navigate = useNavigate(); const { objectSlug = '' } = useParams(); @@ -62,14 +64,18 @@ export const SettingsObjectNewFieldConfigure = () => { ), defaultValues: { type: fieldType, - icon: defaultIconsByFieldType[fieldType] || 'IconUsers', + icon: + DEFAULT_ICONS_BY_FIELD_TYPE[fieldType] ?? DEFAULT_ICON_FOR_NEW_FIELD, label: '', description: '', }, }); useEffect(() => { - formConfig.setValue('icon', defaultIconsByFieldType[fieldType] || 'IconUsers'); + formConfig.setValue( + 'icon', + DEFAULT_ICONS_BY_FIELD_TYPE[fieldType] ?? DEFAULT_ICON_FOR_NEW_FIELD, + ); }, [fieldType, formConfig]); const [, setObjectViews] = useState([]); diff --git a/packages/twenty-front/src/pages/settings/data-model/constants/DefaultIconsByFieldType.ts b/packages/twenty-front/src/pages/settings/data-model/constants/DefaultIconsByFieldType.ts new file mode 100644 index 000000000000..3b8f482b17fa --- /dev/null +++ b/packages/twenty-front/src/pages/settings/data-model/constants/DefaultIconsByFieldType.ts @@ -0,0 +1,27 @@ +import { FieldMetadataType } from '~/generated-metadata/graphql'; + +export const DEFAULT_ICONS_BY_FIELD_TYPE: Record = { + [FieldMetadataType.Address]: 'IconMap', + [FieldMetadataType.Boolean]: 'IconToggleLeft', + [FieldMetadataType.Currency]: 'IconMoneybag', + [FieldMetadataType.Date]: 'IconCalendarEvent', + [FieldMetadataType.DateTime]: 'IconCalendarClock', + [FieldMetadataType.FullName]: 'IconUserCircle', + [FieldMetadataType.MultiSelect]: 'IconTags', + [FieldMetadataType.Number]: 'IconNumber9', + [FieldMetadataType.Rating]: 'IconStar', + [FieldMetadataType.RawJson]: 'IconBraces', + [FieldMetadataType.Relation]: 'IconRelationOneToMany', + [FieldMetadataType.Select]: 'IconTag', + [FieldMetadataType.Text]: 'IconTypography', + [FieldMetadataType.Uuid]: 'IconId', + [FieldMetadataType.Array]: 'IconBracketsContain', + [FieldMetadataType.Emails]: 'IconMail', + [FieldMetadataType.Links]: 'IconWorld', + [FieldMetadataType.Phones]: 'IconPhone', + [FieldMetadataType.Actor]: 'IconUsers', + [FieldMetadataType.Numeric]: 'IconUsers', + [FieldMetadataType.Position]: 'IconUsers', + [FieldMetadataType.RichText]: 'IconUsers', + [FieldMetadataType.TsVector]: 'IconUsers', +}; diff --git a/packages/twenty-front/src/pages/settings/data-model/constants/FieldTypeIcons.ts b/packages/twenty-front/src/pages/settings/data-model/constants/FieldTypeIcons.ts deleted file mode 100644 index b5ee505bff70..000000000000 --- a/packages/twenty-front/src/pages/settings/data-model/constants/FieldTypeIcons.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { FieldMetadataType } from '~/generated-metadata/graphql'; - -export const defaultIconsByFieldType: Record = { - [FieldMetadataType.Address]: 'IconLocation', - [FieldMetadataType.Boolean]: 'IconCheckbox', - [FieldMetadataType.Currency]: 'IconCurrency', - [FieldMetadataType.Date]: 'IconCalendar', - [FieldMetadataType.DateTime]: 'IconClock', - [FieldMetadataType.FullName]: 'IconUser', - [FieldMetadataType.MultiSelect]: 'IconList', - [FieldMetadataType.Number]: 'IconNumber', - [FieldMetadataType.Rating]: 'IconStar', - [FieldMetadataType.RawJson]: 'IconCode', - [FieldMetadataType.Relation]: 'IconRelationOneToMany', - [FieldMetadataType.Select]: 'IconSelect', - [FieldMetadataType.Text]: 'IconTypography', - [FieldMetadataType.Uuid]: 'IconKey', - [FieldMetadataType.Array]: 'IconCodeDots', - [FieldMetadataType.Emails]: 'IconMail', - [FieldMetadataType.Links]: 'IconLink', - [FieldMetadataType.Phones]: 'IconPhone', - [FieldMetadataType.Actor]: 'IconUsers', - [FieldMetadataType.Numeric]: 'IconUsers', - [FieldMetadataType.Position]: 'IconUsers', - [FieldMetadataType.RichText]: 'IconUsers', - [FieldMetadataType.TsVector]: 'IconUsers' -}; \ No newline at end of file