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, string> = {
      [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<SettingsDataModelNewFieldFormValues>({
      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 <you@example.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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<FieldMetadataItem, 'icon' | 'label' | 'type'> =
+  useEffect(() => {
-    {
+    formConfig.setValue(
-      icon: formConfig.watch('icon'),
+      'icon',
-      label: formConfig.watch('label') || 'Employees',
+      DEFAULT_ICONS_BY_FIELD_TYPE[fieldType] ?? DEFAULT_ICON_FOR_NEW_FIELD,
-      type: formConfig.watch('type'),
+    );
-    };
+  }, [fieldType, formConfig]);
 
   const [, setObjectViews] = useState<View[]>([]);
   const [, setRelationObjectViews] = useState<View[]>([]);
@@ -209,7 +211,11 @@ export const SettingsObjectNewFieldConfigure = () => {
               <H2Title title="Values" description="The values of this field" />
               <SettingsDataModelFieldSettingsFormCard
                 isCreatingField
-                fieldMetadataItem={fieldMetadataItem}
+                fieldMetadataItem={{
+                  icon: formConfig.watch('icon'),
+                  label: formConfig.watch('label') || 'New Field',
+                  type: fieldType as FieldMetadataType,
+                }}
                 objectMetadataItem={activeObjectMetadataItem}
               />
             </Section>

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, string> = {
+  [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',
+};