Identifier Preview is Empty in Object Settings

[Bonapara]

Current Behavior

In the Object settings, the "Identifier preview" is empty.

Desired Behavior

We should display the first record of the table as a sample in the identifier preview.

If there is no record yet, we should display placeholder content such as "Text" for a text field or "12345" for a number field.

[greptile-apps[bot]]

To resolve the issue of the empty identifier preview in Object Settings, follow these steps:

1. Update useFieldPreview Hook:

   • Modify the useFieldPreview hook in /packages/twenty-front/src/modules/settings/data-model/fields/preview/hooks/useFieldPreview.ts to fetch the first record of the table and return it as fieldPreviewValue.

     const useFieldPreview = ({ fieldMetadataItem, objectMetadataItem, relationObjectMetadataItem }) => {
     const { data: records } = useFindManyRecords({ objectMetadataItem });
     const firstRecord = records?.[0];
     const fieldPreviewValue = firstRecord ? getFieldPreviewValueFromRecord(firstRecord, fieldMetadataItem) : getFieldDefaultPreviewValue({ fieldMetadataItem, objectMetadataItem, relationObjectMetadataItem });
     return { entityId, fieldName, fieldPreviewValue, isLabelIdentifier, record: firstRecord };
     };

2. Update SettingsDataModelFieldPreview Component:

   • Modify the SettingsDataModelFieldPreview component in /packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx to use the updated useFieldPreview hook.

     const { fieldPreviewValue, record } = useFieldPreview({ fieldMetadataItem, objectMetadataItem, relationObjectMetadataItem });

3. Update SettingsObjectDetail Component:

   • Ensure the SettingsObjectDetail component in /packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx correctly passes the necessary props to SettingsDataModelFieldPreview.

     <SettingsDataModelFieldPreview fieldMetadataItem={fieldMetadataItem} objectMetadataItem={activeObjectMetadataItem} />

4. Update getFieldDefaultPreviewValue Utility:

   • Ensure the getFieldDefaultPreviewValue function in /packages/twenty-front/src/modules/settings/data-model/utils/getFieldDefaultPreviewValue.ts returns appropriate placeholder content when there are no records.

     const getFieldDefaultPreviewValue = ({ fieldMetadataItem }) => {
     switch (fieldMetadataItem.type) {
     case FieldMetadataType.Text:
      return 'Text';
     case FieldMetadataType.Number:
      return '12345';
     default:
      return null;
     }
     };

References

/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx /packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx /packages/twenty-front/src/modules/settings/data-model/fields/preview/hooks/useFieldPreview.ts /packages/twenty-front/src/modules/settings/data-model/utils/getFieldDefaultPreviewValue.ts

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/twentyhq/twenty/main) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)