fix: Set field type icon as the default icon for new fields (#7352)

[dostavic]

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.

  
  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]);`

[greptile-apps]

PR Summary

This pull request improves code organization by moving the default icon mapping for field types to a separate constants file.

• Created new file packages/twenty-front/src/pages/settings/data-model/constants/FieldTypeIcons.ts to store defaultIconsByFieldType mapping
• Updated SettingsObjectNewFieldConfigure.tsx to import and use the new constant file
• Modified form configuration in SettingsObjectNewFieldConfigure.tsx to use the imported mapping for default icon values
• Improved maintainability by centralizing the icon mapping in a dedicated constants file

_{2 file(s) reviewed, 3 comment(s)
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

style: This useEffect might cause unnecessary re-renders. Consider memoizing the default icon

[greptile-apps]

style: Consider using a constant for the default label 'New Field'

[greptile-apps]

style: Consider adding a brief comment explaining the purpose of this constant

[Bonapara]

@dostavic, can you use the same icons as in the previous step?

For instance the money-bag instead of the https://tabler.io/icons/icon/currency icon for the currency field