From 5f333ccd65890b3ca6fc39a852ecff738baac267 Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Tue, 20 May 2025 15:30:43 +0200
Subject: [PATCH] Fixes RelationFromManyFieldDisplay story (#12141)

This PR adds back and fixes the story for RelationFromManyFieldDisplay,
which was broken due to the removal of use-context-selector state.

The story was also setting unnecessary states, we now only keep one
state set in the recoil state.
---
 .../RelationFromManyFieldDisplay.tsx          |  5 +-
 ...ationFromManyFieldDisplay.perf.stories.tsx | 79 +++++++++++++++++++
 2 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx

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 05bf1c181..399b7b852 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
@@ -20,7 +20,7 @@ export const RelationFromManyFieldDisplay = () => {
 
   const { fieldName, objectMetadataNameSingular } = fieldDefinition.metadata;
 
-  const objectNameSingular =
+  const relationObjectNameSingular =
     fieldDefinition?.metadata.relationObjectMetadataNameSingular;
 
   const { activityTargetObjectRecords } = useActivityTargetObjectRecords(
@@ -28,7 +28,7 @@ export const RelationFromManyFieldDisplay = () => {
     fieldValue as NoteTarget[] | TaskTarget[],
   );
 
-  if (!fieldValue || !objectNameSingular) {
+  if (!fieldValue || !relationObjectNameSingular) {
     return null;
   }
 
@@ -64,6 +64,7 @@ export const RelationFromManyFieldDisplay = () => {
 
       return record;
     });
+
     return (
       <ExpandableList isChipCountDisplayed={isFocused}>
         {formattedRecords
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx
new file mode 100644
index 000000000..e4cdaa747
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx
@@ -0,0 +1,79 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+import { RelationFromManyFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RelationFromManyFieldDisplay';
+import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
+import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { ChipGeneratorsDecorator } from '~/testing/decorators/ChipGeneratorsDecorator';
+import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
+import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
+
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { ComponentDecorator } from 'twenty-ui/testing';
+import {
+  fieldValue,
+  relationFromManyFieldDisplayMock,
+} from './relationFromManyFieldDisplayMock';
+
+const RelationFieldValueSetterEffect = () => {
+  const setEntity = useSetRecoilState(
+    recordStoreFamilyState(relationFromManyFieldDisplayMock.entityValue.id),
+  );
+
+  useEffect(() => {
+    setEntity({
+      __typename: relationFromManyFieldDisplayMock.entityValue.__typename,
+      id: relationFromManyFieldDisplayMock.entityValue.id,
+      company: [relationFromManyFieldDisplayMock.entityValue],
+    } satisfies ObjectRecord);
+  }, [setEntity]);
+
+  return null;
+};
+
+const meta: Meta = {
+  title: 'UI/Data/Field/Display/RelationFromManyFieldDisplay',
+  decorators: [
+    MemoryRouterDecorator,
+    ChipGeneratorsDecorator,
+    (Story) => (
+      <FieldContext.Provider
+        value={{
+          recordId: relationFromManyFieldDisplayMock.recordId,
+          isLabelIdentifier: false,
+          fieldDefinition: {
+            ...relationFromManyFieldDisplayMock.fieldDefinition,
+          } as unknown as FieldDefinition<FieldMetadata>,
+          isReadOnly: false,
+        }}
+      >
+        <RelationFieldValueSetterEffect />
+        <Story />
+      </FieldContext.Provider>
+    ),
+    ComponentDecorator,
+  ],
+  component: RelationFromManyFieldDisplay,
+  argTypes: { value: { control: 'date' } },
+  args: { fieldValue: fieldValue },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RelationFromManyFieldDisplay>;
+
+export const Default: Story = {};
+
+// TODO: optimize this component once we have morph many
+export const Performance = getProfilingStory({
+  componentName: 'RelationFromManyFieldDisplay',
+  averageThresholdInMs: 1,
+  numberOfRuns: 20,
+  numberOfTestsPerRun: 100,
+});