From 4cc95d47945a0b2abed947ce3a2ad6d7c6db8c2b Mon Sep 17 00:00:00 2001 From: dostavic <117394387+dostavic@users.noreply.github.com> Date: Fri, 11 Oct 2024 15:55:33 +0200 Subject: [PATCH] fix: Set field type icon as the default icon for new fields (#7352) (#7579) Closes #7352 **Summary** Moved the `defaultIconsByFieldType` mapping from the `SettingsObjectNewFieldConfigure` component to a separate constants file. This change improves code organization and maintainability without changing functionality. **Changes Made** - **Created a new constants file:** Added `FieldTypeIcons.ts`, located in `src/pages/settings/data-model/constants/`, to store the mapping of `FieldMetadataType` to default icons. ``` // FieldTypeIcons.ts 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.Email]: 'IconMail', [FieldMetadataType.FullName]: 'IconUser', [FieldMetadataType.Link]: 'IconLink', [FieldMetadataType.MultiSelect]: 'IconList', [FieldMetadataType.Number]: 'IconNumber', [FieldMetadataType.Phone]: 'IconPhone', [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', // Add other field types as needed }; ``` - **Updated the import in the component:** In the file `SettingsObjectNewFieldConfigure.tsx`, imported the mapping from the new constants file. ```// SettingsObjectNewFieldConfigure.tsx import { defaultIconsByFieldType } from '~/pages/settings/data-model/constants/FieldTypeIcons'; - **Adjusted form configuration:** Modified `defaultValues` in `useForm` and `useEffect` to use the imported mapping. ``` `const formConfig = useForm({ mode: 'onTouched', resolver: zodResolver( settingsFieldFormSchema( activeObjectMetadataItem?.fields.map((value) => value.name), ), ), defaultValues: { type: fieldType, icon: defaultIconsByFieldType[fieldType] || 'IconUsers', label: '', description: '', }, }); useEffect(() => { formConfig.setValue('icon', defaultIconsByFieldType[fieldType] || 'IconUsers'); }, [fieldType, formConfig]);` --------- Co-authored-by: Your Name Co-authored-by: Lucas Bordeau --- .../SettingsObjectNewFieldConfigure.tsx | 26 +++++++++++------- .../constants/DefaultIconsByFieldType.ts | 27 +++++++++++++++++++ 2 files changed, 43 insertions(+), 10 deletions(-) create mode 100644 packages/twenty-front/src/pages/settings/data-model/constants/DefaultIconsByFieldType.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..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 @@ -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 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', +};