feat: simplify field preview logic in Settings

Closes #5382

Author: thaisguigon

packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx

@@ -4,13 +4,13 @@ import { useIcons } from 'twenty-ui';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
 import { FieldDisplay } from '@/object-record/record-field/components/FieldDisplay';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { BooleanFieldInput } from '@/object-record/record-field/meta-types/input/components/BooleanFieldInput';
 import { RatingFieldInput } from '@/object-record/record-field/meta-types/input/components/RatingFieldInput';
 import { SettingsDataModelSetFieldValueEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetFieldValueEffect';
-import { SettingsDataModelSetRecordEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect';
-import { useFieldPreview } from '@/settings/data-model/fields/preview/hooks/useFieldPreview';
+import { useFieldPreviewValue } from '@/settings/data-model/fields/preview/hooks/useFieldPreviewValue';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 export type SettingsDataModelFieldPreviewProps = {
@@ -61,24 +61,37 @@ export const SettingsDataModelFieldPreview = ({
   const { getIcon } = useIcons();
   const FieldIcon = getIcon(fieldMetadataItem.icon);
 
-  const { entityId, fieldName, fieldPreviewValue, isLabelIdentifier, record } =
-    useFieldPreview({
-      fieldMetadataItem,
+  // id and name are undefined in create mode (field does not exist yet)
+  // and are defined in edit mode.
+  const isLabelIdentifier =
+    !!fieldMetadataItem.id &&
+    !!fieldMetadataItem.name &&
+    isLabelIdentifierField({
+      fieldMetadataItem: {
+        id: fieldMetadataItem.id,
+        name: fieldMetadataItem.name,
+      },
       objectMetadataItem,
-      relationObjectMetadataItem,
     });
 
+  const fieldPreviewValue = useFieldPreviewValue({
+    isLabelIdentifier,
+    fieldMetadataItem,
+    objectMetadataItem,
+    relationObjectMetadataItem,
+  });
+
+  const fieldName =
+    fieldMetadataItem.name || `${fieldMetadataItem.type}-new-field`;
+  const entityId = `${objectMetadataItem.nameSingular}-${fieldName}-preview`;
+
   return (
     <>
-      {record ? (
-        <SettingsDataModelSetRecordEffect record={record} />
-      ) : (
-        <SettingsDataModelSetFieldValueEffect
-          entityId={entityId}
-          fieldName={fieldName}
-          value={fieldPreviewValue}
-        />
-      )}
+      <SettingsDataModelSetFieldValueEffect
+        entityId={entityId}
+        fieldName={fieldName}
+        value={fieldPreviewValue}
+      />
       <StyledFieldPreview shrink={shrink}>
         {!!withFieldLabel && (
           <StyledFieldLabel>

packages/twenty-front/src/modules/settings/data-model/fields/preview/hooks/__tests__/useFieldPreview.test.tsx renamed to packages/twenty-front/src/modules/settings/data-model/fields/preview/hooks/__tests__/useFieldPreviewValue.test.tsx

@@ -6,7 +6,7 @@ import { RecoilRoot } from 'recoil';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { mockedCompanyObjectMetadataItem } from '~/testing/mock-data/metadata';
 
-import { useFieldPreview } from '../useFieldPreview';
+import { useFieldPreviewValue } from '../useFieldPreviewValue';
 
 const Wrapper = ({ children }: { children: ReactNode }) => (
   <RecoilRoot>
@@ -28,7 +28,7 @@ describe('useFieldPreview', () => {
 
     // When
     const { result } = renderHook(
-      () => useFieldPreview({ fieldMetadataItem, objectMetadataItem }),
+      () => useFieldPreviewValue({ fieldMetadataItem, objectMetadataItem }),
       { wrapper: Wrapper },
     );
 
@@ -51,7 +51,7 @@ describe('useFieldPreview', () => {
 
     // When
     const { result } = renderHook(
-      () => useFieldPreview({ fieldMetadataItem, objectMetadataItem }),
+      () => useFieldPreviewValue({ fieldMetadataItem, objectMetadataItem }),
       { wrapper: Wrapper },
     );
 

packages/twenty-front/src/modules/settings/data-model/fields/preview/hooks/useFieldPreview.ts

@@ -0,0 +1,54 @@
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useLabelIdentifierFieldPreviewValue } from '@/settings/data-model/fields/preview/hooks/useLabelIdentifierFieldPreviewValue';
+import { useRelationFieldPreviewValue } from '@/settings/data-model/fields/preview/hooks/useRelationFieldPreviewValue';
+import { getFieldPreviewValue } from '@/settings/data-model/fields/preview/utils/getFieldPreviewValue';
+import { getMultiSelectFieldPreviewValue } from '@/settings/data-model/fields/preview/utils/getMultiSelectFieldPreviewValue';
+import { getSelectFieldPreviewValue } from '@/settings/data-model/fields/preview/utils/getSelectFieldPreviewValue';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
+
+type UseFieldPreviewParams = {
+  fieldMetadataItem: Pick<
+    FieldMetadataItem,
+    'type' | 'options' | 'defaultValue'
+  >;
+  isLabelIdentifier?: boolean;
+  objectMetadataItem: ObjectMetadataItem;
+  relationObjectMetadataItem?: ObjectMetadataItem;
+};
+
+export const useFieldPreviewValue = ({
+  fieldMetadataItem,
+  isLabelIdentifier = false,
+  objectMetadataItem,
+  relationObjectMetadataItem,
+}: UseFieldPreviewParams) => {
+  const labelIdentifierFieldPreviewValue = useLabelIdentifierFieldPreviewValue({
+    objectMetadataItem,
+    skip: !isLabelIdentifier,
+  });
+
+  const relationFieldPreviewValue = useRelationFieldPreviewValue({
+    relationObjectMetadataItem: relationObjectMetadataItem ?? {
+      fields: [],
+      labelSingular: '',
+      nameSingular: '',
+    },
+    skip:
+      fieldMetadataItem.type !== FieldMetadataType.Relation ||
+      !relationObjectMetadataItem,
+  });
+
+  if (isLabelIdentifier) return labelIdentifierFieldPreviewValue;
+
+  switch (fieldMetadataItem.type) {
+    case FieldMetadataType.Relation:
+      return relationFieldPreviewValue;
+    case FieldMetadataType.Select:
+      return getSelectFieldPreviewValue({ fieldMetadataItem });
+    case FieldMetadataType.MultiSelect:
+      return getMultiSelectFieldPreviewValue({ fieldMetadataItem });
+    default:
+      return getFieldPreviewValue({ fieldMetadataItem });
+  }
+};

packages/twenty-front/src/modules/settings/data-model/fields/preview/hooks/useFieldPreviewValue.ts

@@ -0,0 +1,36 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { getPlaceholderRecord } from '@/settings/data-model/fields/preview/utils/getPlaceholderRecord';
+
+type UseLabelIdentifierFieldPreviewParams = {
+  objectMetadataItem: Pick<
+    ObjectMetadataItem,
+    | 'fields'
+    | 'labelIdentifierFieldMetadataId'
+    | 'labelSingular'
+    | 'nameSingular'
+  >;
+  skip?: boolean;
+};
+
+export const useLabelIdentifierFieldPreviewValue = ({
+  objectMetadataItem,
+  skip,
+}: UseLabelIdentifierFieldPreviewParams) => {
+  const { records } = useFindManyRecords({
+    objectNameSingular: objectMetadataItem.nameSingular,
+    limit: 1,
+    skip,
+  });
+
+  if (!skip) return null;
+
+  const [firstRecord] = records;
+
+  const fieldPreviewValue =
+    firstRecord ??
+    // If no record was found, display a placeholder record
+    getPlaceholderRecord({ objectMetadataItem });
+
+  return fieldPreviewValue;
+};

packages/twenty-front/src/modules/settings/data-model/fields/preview/hooks/useLabelIdentifierFieldPreviewValue.ts

@@ -0,0 +1,22 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useLabelIdentifierFieldPreviewValue } from '@/settings/data-model/fields/preview/hooks/useLabelIdentifierFieldPreviewValue';
+
+type UseRelationFieldPreviewParams = {
+  relationObjectMetadataItem: Pick<
+    ObjectMetadataItem,
+    | 'fields'
+    | 'labelIdentifierFieldMetadataId'
+    | 'labelSingular'
+    | 'nameSingular'
+  >;
+  skip?: boolean;
+};
+
+export const useRelationFieldPreviewValue = ({
+  relationObjectMetadataItem,
+  skip,
+}: UseRelationFieldPreviewParams) =>
+  useLabelIdentifierFieldPreviewValue({
+    objectMetadataItem: relationObjectMetadataItem,
+    skip,
+  });