Fix - ChipField display in settings data model (#14277)

labelIdentifier fields display throw error in settings data model (field
settings and object settings)

To reproduce, go to /settings/objects/companies/name or
/settings/objects/companies#settings

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

@@ -8,7 +8,9 @@ import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldCont
 import { BooleanFieldInput } from '@/object-record/record-field/ui/meta-types/input/components/BooleanFieldInput';
 import { RatingFieldInput } from '@/object-record/record-field/ui/meta-types/input/components/RatingFieldInput';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/ui/states/contexts/RecordFieldComponentInstanceContext';
+import { SettingsDataModelLabelIdentifierPreviewContextWrapper } from '@/settings/data-model/fields/preview/components/SettingsDataModelLabelIdentifierPreviewContextWrapper';
 import { SettingsDataModelSetFieldValueEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetFieldValueEffect';
+import { SettingsDataModelSetLabelIdentifierRecordEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetLabelIdentifierRecordEffect';
 import { useFieldPreviewValue } from '@/settings/data-model/fields/preview/hooks/useFieldPreviewValue';
 import { useIcons } from 'twenty-ui/display';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
@@ -57,7 +59,7 @@ export const SettingsDataModelFieldPreview = ({
   const theme = useTheme();
   const { labelIdentifierFieldMetadataItem } =
     useLabelIdentifierFieldMetadataItem({
-      objectNameSingular,
+      objectNameSingular: objectNameSingular,
     });
 
   const { getIcon } = useIcons();
@@ -83,56 +85,68 @@ export const SettingsDataModelFieldPreview = ({
 
   return (
     <>
-      <RecordFieldComponentInstanceContext.Provider
-        value={{
-          instanceId: 'record-field-component-instance-id',
-        }}
+      <SettingsDataModelLabelIdentifierPreviewContextWrapper
+        objectNameSingular={objectNameSingular}
+        labelIdentifierFieldMetadataItem={labelIdentifierFieldMetadataItem}
       >
-        <SettingsDataModelSetFieldValueEffect
-          recordId={recordId}
-          gqlFieldName={fieldMetadataItem.name ?? ''}
-          value={fieldPreviewValue}
-        />
-        <StyledFieldPreview shrink={shrink}>
-          {!!withFieldLabel && (
-            <StyledFieldLabel>
-              <FieldIcon
-                size={theme.icon.size.md}
-                stroke={theme.icon.stroke.sm}
-              />
-              {fieldMetadataItem.label}:
-            </StyledFieldLabel>
+        <RecordFieldComponentInstanceContext.Provider
+          value={{
+            instanceId: 'record-field-component-instance-id',
+          }}
+        >
+          {isLabelIdentifier ? (
+            <SettingsDataModelSetLabelIdentifierRecordEffect
+              objectNameSingular={objectNameSingular}
+              recordId={recordId}
+            />
+          ) : (
+            <SettingsDataModelSetFieldValueEffect
+              recordId={recordId}
+              gqlFieldName={fieldMetadataItem.name ?? ''}
+              value={fieldPreviewValue}
+            />
           )}
-          <FieldContext.Provider
-            value={{
-              recordId,
-              isLabelIdentifier,
-              fieldDefinition: {
-                type: fieldMetadataItem.type,
-                iconName: 'FieldIcon',
-                fieldMetadataId: '',
-                label: fieldMetadataItem.label,
-                metadata,
-                defaultValue: fieldMetadataItem.defaultValue,
-              },
-              isRecordFieldReadOnly:
-                fieldMetadataItem.type === FieldMetadataType.BOOLEAN ||
-                fieldMetadataItem.type === FieldMetadataType.RATING
-                  ? true
-                  : false,
-              disableChipClick: true,
-            }}
-          >
-            {fieldMetadataItem.type === FieldMetadataType.BOOLEAN ? (
-              <BooleanFieldInput />
-            ) : fieldMetadataItem.type === FieldMetadataType.RATING ? (
-              <RatingFieldInput />
-            ) : (
-              <FieldDisplay />
+          <StyledFieldPreview shrink={shrink}>
+            {!!withFieldLabel && (
+              <StyledFieldLabel>
+                <FieldIcon
+                  size={theme.icon.size.md}
+                  stroke={theme.icon.stroke.sm}
+                />
+                {fieldMetadataItem.label}:
+              </StyledFieldLabel>
             )}
-          </FieldContext.Provider>
-        </StyledFieldPreview>
-      </RecordFieldComponentInstanceContext.Provider>
+            <FieldContext.Provider
+              value={{
+                recordId,
+                isLabelIdentifier,
+                fieldDefinition: {
+                  type: fieldMetadataItem.type,
+                  iconName: 'FieldIcon',
+                  fieldMetadataId: '',
+                  label: fieldMetadataItem.label,
+                  metadata,
+                  defaultValue: fieldMetadataItem.defaultValue,
+                },
+                isRecordFieldReadOnly:
+                  fieldMetadataItem.type === FieldMetadataType.BOOLEAN ||
+                  fieldMetadataItem.type === FieldMetadataType.RATING
+                    ? true
+                    : false,
+                disableChipClick: true,
+              }}
+            >
+              {fieldMetadataItem.type === FieldMetadataType.BOOLEAN ? (
+                <BooleanFieldInput />
+              ) : fieldMetadataItem.type === FieldMetadataType.RATING ? (
+                <RatingFieldInput />
+              ) : (
+                <FieldDisplay />
+              )}
+            </FieldContext.Provider>
+          </StyledFieldPreview>
+        </RecordFieldComponentInstanceContext.Provider>
+      </SettingsDataModelLabelIdentifierPreviewContextWrapper>
     </>
   );
 };

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

@@ -49,7 +49,7 @@ export const SettingsDataModelFieldPreviewWidget = ({
           pluralizeLabel={pluralizeLabel}
         />
         <SettingsDataModelFieldPreview
-          objectNameSingular={objectMetadataItem.nameSingular}
+          objectNameSingular={objectNameSingular}
           fieldMetadataItem={{
             label: fieldMetadataItem.label,
             icon: fieldMetadataItem.icon,

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

@@ -0,0 +1,47 @@
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { type ReactNode } from 'react';
+
+type SettingsDataModelLabelIdentifierPreviewContextWrapperProps = {
+  children: ReactNode;
+  objectNameSingular: string;
+  labelIdentifierFieldMetadataItem: FieldMetadataItem | undefined;
+};
+
+export const SettingsDataModelLabelIdentifierPreviewContextWrapper = ({
+  children,
+  objectNameSingular,
+  labelIdentifierFieldMetadataItem,
+}: SettingsDataModelLabelIdentifierPreviewContextWrapperProps) => {
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular: objectNameSingular,
+  });
+
+  return (
+    <RecordTableComponentInstanceContext.Provider
+      value={{
+        instanceId: 'record-table-for-settings-data-model-component',
+      }}
+    >
+      <RecordIndexContextProvider
+        value={{
+          indexIdentifierUrl: () => '',
+          onIndexRecordsLoaded: () => {},
+          objectNamePlural: objectMetadataItem.namePlural,
+          objectNameSingular: objectMetadataItem.nameSingular,
+          objectMetadataItem,
+          objectPermissionsByObjectMetadataId: {},
+          recordIndexId: '',
+          recordFieldByFieldMetadataItemId: {},
+          labelIdentifierFieldMetadataItem,
+          fieldMetadataItemByFieldMetadataItemId: {},
+          fieldDefinitionByFieldMetadataItemId: {},
+        }}
+      >
+        {children}
+      </RecordIndexContextProvider>
+    </RecordTableComponentInstanceContext.Provider>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { usePreviewRecord } from '@/settings/data-model/fields/preview/hooks/usePreviewRecord';
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+type SettingsDataModelSetLabelIdentifierRecordEffectProps = {
+  objectNameSingular: string;
+  recordId: string;
+};
+
+export const SettingsDataModelSetLabelIdentifierRecordEffect = ({
+  objectNameSingular,
+  recordId,
+}: SettingsDataModelSetLabelIdentifierRecordEffectProps) => {
+  const recordPreviewForLabelIdentifier = usePreviewRecord({
+    objectNameSingular: objectNameSingular,
+  });
+
+  const setRecord = useSetRecoilState(recordStoreFamilyState(recordId));
+
+  useEffect(() => {
+    setRecord(recordPreviewForLabelIdentifier);
+  }, [recordPreviewForLabelIdentifier, setRecord, recordId]);
+
+  return null;
+};