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 0b27c4588..5e8893813 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 { 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(); @@ -48,7 +50,6 @@ export const SettingsObjectNewFieldConfigure = () => { const { findActiveObjectMetadataItemBySlug } = useFilteredObjectMetadataItems(); - const activeObjectMetadataItem = findActiveObjectMetadataItemBySlug(objectSlug); const { createMetadataField } = useFieldMetadataItem(); @@ -63,18 +64,19 @@ export const SettingsObjectNewFieldConfigure = () => { ), defaultValues: { type: fieldType, - icon: 'IconUsers', + icon: + DEFAULT_ICONS_BY_FIELD_TYPE[fieldType] ?? DEFAULT_ICON_FOR_NEW_FIELD, label: '', description: '', }, }); - const fieldMetadataItem: Pick = - { - icon: formConfig.watch('icon'), - label: formConfig.watch('label') || 'Employees', - type: formConfig.watch('type'), - }; + useEffect(() => { + formConfig.setValue( + 'icon', + DEFAULT_ICONS_BY_FIELD_TYPE[fieldType] ?? DEFAULT_ICON_FOR_NEW_FIELD, + ); + }, [fieldType, formConfig]); const [, setObjectViews] = useState([]); const [, setRelationObjectViews] = useState([]); @@ -209,7 +211,11 @@ export const SettingsObjectNewFieldConfigure = () => { 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 000000000..3b8f482b1 --- /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', +};