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.

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

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