Skip to content

Commit

Permalink
fix: Set field type icon as the default icon for new fields (#7352) (#…
Browse files Browse the repository at this point in the history 
…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 <[email protected]>
Co-authored-by: Lucas Bordeau <[email protected]>
  • Loading branch information
@dostavic @lucasbordeau
3 people authored Oct 11, 2024
1 parent ac380f1 commit 4cc95d4
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 10 deletions.
26 changes: 16 additions & 10 deletions .../src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -30,13 +29,16 @@ 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<
ReturnType<typeof settingsFieldFormSchema>
> &
any;

const DEFAULT_ICON_FOR_NEW_FIELD = 'IconUsers';

export const SettingsObjectNewFieldConfigure = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
Expand All @@ -48,7 +50,6 @@ export const SettingsObjectNewFieldConfigure = () => {

const { findActiveObjectMetadataItemBySlug } =
useFilteredObjectMetadataItems();

const activeObjectMetadataItem =
findActiveObjectMetadataItemBySlug(objectSlug);
const { createMetadataField } = useFieldMetadataItem();
Expand All @@ -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'> =
{
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<View[]>([]);
const [, setRelationObjectViews] = useState<View[]>([]);
Expand Down Expand Up @@ -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>
Expand Down
27 changes: 27 additions & 0 deletions packages/twenty-front/src/pages/settings/data-model/constants/DefaultIconsByFieldType.ts
View file
Original file line number Diff line number Diff line change
@@ -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',
};

0 comments on commit 4cc95d4

Please sign in to comment.