From 38fc14cb3ee33346208053aa7de9578c1939e52e Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Thu, 4 Dec 2025 08:09:38 +0100
Subject: [PATCH] Fix Data model object setting page not loading (#16308)

Regression introduced by
https://github.com/twentyhq/twenty/pull/16244/files

Why:
- `ChipFieldDisplay` component is using a `recoilComponentState` and
`ContextStoreComponentContext` is not provided on Settings page

This fix
- does not use the componentState in the `ChipFieldDisplay` but in the
RecordIndex area where the `ContextStoreComponentContext` is provided
- this also improve the performance as recoilState access is not free
---
 .../record-field/ui/contexts/FieldContext.ts          |  1 +
 .../display/components/ChipFieldDisplay.tsx           | 11 ++---------
 .../ui/meta-types/hooks/useChipFieldDisplay.ts        |  2 ++
 .../RecordTableCellFieldContextLabelIdentifier.tsx    |  7 +++++++
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/contexts/FieldContext.ts b/packages/twenty-front/src/modules/object-record/record-field/ui/contexts/FieldContext.ts
index 271d0a636d..103a2cec2e 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/contexts/FieldContext.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/contexts/FieldContext.ts
@@ -26,6 +26,7 @@ export type GenericFieldContextType = {
   fieldDefinition: FieldDefinition<FieldMetadata>;
   useUpdateRecord?: RecordUpdateHook;
   isLabelIdentifier: boolean;
+  isLabelIdentifierCompact?: boolean;
   clearable?: boolean;
   maxWidth?: number;
   isCentered?: boolean;
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ChipFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ChipFieldDisplay.tsx
index f681a6731d..8df8c06ba8 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ChipFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ChipFieldDisplay.tsx
@@ -1,7 +1,5 @@
 import { RecordChip } from '@/object-record/components/RecordChip';
 import { useChipFieldDisplay } from '@/object-record/record-field/ui/meta-types/hooks/useChipFieldDisplay';
-import { shouldCompactRecordIndexLabelIdentifierComponentState } from '@/object-record/record-index/states/shouldCompactRecordIndexLabelIdentifierComponentState';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { isDefined } from 'twenty-shared/utils';
 import { ChipSize } from 'twenty-ui/components';
 
@@ -14,14 +12,9 @@ export const ChipFieldDisplay = () => {
     maxWidth,
     triggerEvent,
     onRecordChipClick,
+    isLabelIdentifierCompact,
   } = useChipFieldDisplay();
 
-  const shouldCompactRecordIndexLabelIdentifier = useRecoilComponentValue(
-    shouldCompactRecordIndexLabelIdentifierComponentState,
-  );
-
-  const isLabelIdentifierCompact = shouldCompactRecordIndexLabelIdentifier;
-
   if (!isDefined(recordValue)) {
     return null;
   }
@@ -33,7 +26,7 @@ export const ChipFieldDisplay = () => {
       record={recordValue}
       size={ChipSize.Small}
       to={labelIdentifierLink}
-      isLabelHidden={isLabelIdentifierCompact}
+      isLabelHidden={isLabelIdentifierCompact ?? false}
       forceDisableClick={disableChipClick}
       triggerEvent={triggerEvent}
       onClick={onRecordChipClick}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/hooks/useChipFieldDisplay.ts b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/hooks/useChipFieldDisplay.ts
index 49bbe10183..6cf9f141ce 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/hooks/useChipFieldDisplay.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/hooks/useChipFieldDisplay.ts
@@ -21,6 +21,7 @@ export const useChipFieldDisplay = () => {
     maxWidth,
     triggerEvent,
     onRecordChipClick,
+    isLabelIdentifierCompact,
   } = useContext(FieldContext);
 
   const { indexIdentifierUrl, labelIdentifierFieldMetadataItem } =
@@ -62,5 +63,6 @@ export const useChipFieldDisplay = () => {
     maxWidth,
     triggerEvent,
     onRecordChipClick,
+    isLabelIdentifierCompact,
   };
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextLabelIdentifier.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextLabelIdentifier.tsx
index f91d09c20f..5123fff210 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextLabelIdentifier.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextLabelIdentifier.tsx
@@ -2,10 +2,12 @@ import { getObjectPermissionsForObject } from '@/object-metadata/utils/getObject
 import { isRecordFieldReadOnly } from '@/object-record/read-only/utils/isRecordFieldReadOnly';
 import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
+import { shouldCompactRecordIndexLabelIdentifierComponentState } from '@/object-record/record-index/states/shouldCompactRecordIndexLabelIdentifierComponentState';
 import { RecordUpdateContext } from '@/object-record/record-table/contexts/EntityUpdateMutationHookContext';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useContext, type ReactNode } from 'react';
 
 type RecordTableCellFieldContextLabelIdentifierProps = {
@@ -31,6 +33,10 @@ export const RecordTableCellFieldContextLabelIdentifier = ({
     objectMetadataItem.id,
   );
 
+  const shouldCompactRecordIndexLabelIdentifier = useRecoilComponentValue(
+    shouldCompactRecordIndexLabelIdentifierComponentState,
+  );
+
   const hasObjectReadPermissions = objectPermissions.canReadObjectRecords;
 
   const updateRecord = useContext(RecordUpdateContext);
@@ -49,6 +55,7 @@ export const RecordTableCellFieldContextLabelIdentifier = ({
         fieldDefinition,
         useUpdateRecord: () => [updateRecord, {}],
         isLabelIdentifier: true,
+        isLabelIdentifierCompact: shouldCompactRecordIndexLabelIdentifier,
         displayedMaxRows: 1,
         isRecordFieldReadOnly: isRecordFieldReadOnly({
           isRecordReadOnly: isRecordReadOnly ?? false,