Fix Data model object setting page not loading (twentyhq#16308)

Author: notyenyu-creator

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;

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}

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,
   };
 };

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,