From fe371eb4c45c8b355418ab94b96e8037302464cb 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 7b20f91e1ba..05bf1c18149 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 27d026853e4..901ced0fbff 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 11243ea4284..0f08e83ae70 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 (
     <>