From 590aaa1fd44411b36fef76571ed2148cc5260789 Mon Sep 17 00:00:00 2001
From: Etienne <45695613+etiennejouan@users.noreply.github.com>
Date: Wed, 7 May 2025 16:46:40 +0200
Subject: [PATCH] fix on field relation preview (#11926)

To reproduce :
Modify object destination to an object with a 'simple' field as
labelIdentifier from data model settings, during creation of a relation
field from an object which has a composite field as labelIdentifier +
Relation type 'has many'

Fix :
fieldValue and fieldDefinition does not update at the same time (when
object destination is modified) in RelationToManyFieldDisplay component.
Need to better define recordId to be sure fieldValue doesn't point on
previous record.

Tested :
Relation field creation from Person with switch on relationType and
objectDestination (company/workspaceMember)
Relation field creation from Company with switch on relationType and
objectDestination (pet/person)
closes https://github.com/twentyhq/twenty/issues/11826
---
 .../RelationFromManyFieldDisplay.tsx          | 22 +++++++++++--------
 .../hooks/useRelationFromManyFieldDisplay.ts  |  3 +--
 .../SettingsDataModelFieldPreview.tsx         |  2 +-
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/RelationFromManyFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/RelationFromManyFieldDisplay.tsx
index 7b20f91e1..05bf1c181 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/RelationFromManyFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/RelationFromManyFieldDisplay.tsx
@@ -13,7 +13,8 @@ import { isDefined } from 'twenty-shared/utils';
 import { pascalCase } from '~/utils/string/pascalCase';
 
 export const RelationFromManyFieldDisplay = () => {
-  const { fieldValue, fieldDefinition } = useRelationFromManyFieldDisplay();
+  const { fieldValue, fieldDefinition, generateRecordChipData } =
+    useRelationFromManyFieldDisplay();
   const { isFocused } = useFieldFocus();
   const { disableChipClick } = useContext(FieldContext);
 
@@ -99,14 +100,17 @@ export const RelationFromManyFieldDisplay = () => {
   } else {
     return (
       <ExpandableList isChipCountDisplayed={isFocused}>
-        {fieldValue.filter(isDefined).map((record) => (
-          <RecordChip
-            key={record.id}
-            objectNameSingular={objectNameSingular}
-            record={record}
-            forceDisableClick={disableChipClick}
-          />
-        ))}
+        {fieldValue.filter(isDefined).map((record) => {
+          const recordChipData = generateRecordChipData(record);
+          return (
+            <RecordChip
+              key={recordChipData.recordId}
+              objectNameSingular={recordChipData.objectNameSingular}
+              record={record}
+              forceDisableClick={disableChipClick}
+            />
+          );
+        })}
       </ExpandableList>
     );
   }
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRelationFromManyFieldDisplay.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRelationFromManyFieldDisplay.ts
index 27d026853..901ced0fb 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRelationFromManyFieldDisplay.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRelationFromManyFieldDisplay.ts
@@ -60,9 +60,8 @@ export const useRelationFromManyFieldDisplay = () => {
     : (record: ObjectRecord) =>
         generateDefaultRecordChipData({
           record,
-          // @ts-expect-error Above assertions does not infer that fieldDefinition.metadata.objectMetadataNameSingular always defined
           objectNameSingular:
-            fieldDefinition.metadata.objectMetadataNameSingular,
+            fieldDefinition.metadata.relationObjectMetadataNameSingular,
         });
 
   return {
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx
index 11243ea42..0f08e83ae 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx
@@ -102,7 +102,7 @@ export const SettingsDataModelFieldPreview = ({
     fieldMetadataItem.name || `${fieldMetadataItem.type}-new-field`;
   const recordId =
     previewRecord?.id ??
-    `${objectMetadataItem.nameSingular}-${fieldName}-${fieldMetadataItem.relationDefinition?.direction}-preview`;
+    `${objectMetadataItem.nameSingular}-${fieldName}-${fieldMetadataItem.relationDefinition?.direction}-${relationObjectMetadataItem?.nameSingular}-preview`;
 
   return (
     <>