Fix perf tests storybook (twentyhq#6584)

As title
ehconitin · Aug 8, 2024 · ab12d9e · ab12d9e
1 parent b4e2ada
commit ab12d9e
Show file tree

Hide file tree

Showing 12 changed files with 195 additions and 57 deletions.
diff --git a/...d-field/meta-types/display/components/__stories__/perf/ActorFieldDisplay.perf.stories.tsx b/...d-field/meta-types/display/components/__stories__/perf/ActorFieldDisplay.perf.stories.tsx
@@ -1,5 +1,4 @@
 import { ActorFieldDisplay } from '@/object-record/record-field/meta-types/display/components/ActorFieldDisplay';
-import { FieldActorValue } from '@/object-record/record-field/types/FieldMetadata';
 import { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from 'twenty-ui';
 
@@ -13,11 +12,10 @@ const meta: Meta = {
   decorators: [
     MemoryRouterDecorator,
     ChipGeneratorsDecorator,
-    getFieldDecorator('person', 'actor', {
+    getFieldDecorator('company', 'createdBy', {
+      id: '1',
       name: 'John Doe',
-      source: 'API',
-      workspaceMemberId: undefined,
-    } satisfies FieldActorValue),
+    }),
     ComponentDecorator,
   ],
   component: ActorFieldDisplay,

diff --git a/...field/meta-types/display/components/__stories__/perf/AddressFieldDisplay.perf.stories.tsx b/...field/meta-types/display/components/__stories__/perf/AddressFieldDisplay.perf.stories.tsx
@@ -11,7 +11,16 @@ const meta: Meta = {
   title: 'UI/Data/Field/Display/AddressFieldDisplay',
   decorators: [
     MemoryRouterDecorator,
-    getFieldDecorator('person', 'testAddress'),
+    getFieldDecorator('company', 'address', {
+      addressCity: 'San Francisco',
+      addressCountry: 'United States',
+      addressStreet1: '1234 Elm Street',
+      addressStreet2: 'Apt 1234',
+      addressLat: 0,
+      addressLng: 0,
+      addressPostcode: '12345',
+      addressState: 'CA',
+    } as FieldAddressValue),
     ComponentDecorator,
   ],
   component: AddressFieldDisplay,
@@ -32,7 +41,7 @@ export const Elipsis: Story = {
     container: { width: 100 },
   },
   decorators: [
-    getFieldDecorator('person', 'testAddress', {
+    getFieldDecorator('company', 'address', {
       addressCity:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam',
       addressCountry: 'United States',

diff --git a/...field/meta-types/display/components/__stories__/perf/BooleanFieldDisplay.perf.stories.tsx b/...field/meta-types/display/components/__stories__/perf/BooleanFieldDisplay.perf.stories.tsx
@@ -10,7 +10,7 @@ const meta: Meta = {
   title: 'UI/Data/Field/Display/BooleanFieldDisplay',
   decorators: [
     MemoryRouterDecorator,
-    getFieldDecorator('person', 'testBoolean'),
+    getFieldDecorator('company', 'idealCustomerProfile'),
     ComponentDecorator,
   ],
   component: BooleanFieldDisplay,

diff --git a/...rd-field/meta-types/display/components/__stories__/perf/JsonFieldDisplay.perf.stories.tsx b/...rd-field/meta-types/display/components/__stories__/perf/JsonFieldDisplay.perf.stories.tsx
@@ -10,7 +10,10 @@ const meta: Meta = {
   title: 'UI/Data/Field/Display/JsonFieldDisplay',
   decorators: [
     MemoryRouterDecorator,
-    getFieldDecorator('person', 'testJson'),
+    getFieldDecorator('company', 'testRawJson', {
+      key1: 'value1',
+      key2: 'value2',
+    }),
     ComponentDecorator,
   ],
   component: JsonFieldDisplay,

diff --git a/...rd-field/meta-types/display/components/__stories__/perf/LinkFieldDisplay.perf.stories.tsx b/...rd-field/meta-types/display/components/__stories__/perf/LinkFieldDisplay.perf.stories.tsx
diff --git a/...d-field/meta-types/display/components/__stories__/perf/LinksFieldDisplay.perf.stories.tsx b/...d-field/meta-types/display/components/__stories__/perf/LinksFieldDisplay.perf.stories.tsx
@@ -1,5 +1,5 @@
-import { useContext, useEffect } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
+import { useContext, useEffect } from 'react';
 import { ComponentDecorator } from 'twenty-ui';
 
 import { FieldFocusContext } from '@/object-record/record-field/contexts/FieldFocusContext';
@@ -23,7 +23,11 @@ const meta: Meta = {
   title: 'UI/Data/Field/Display/LinksFieldDisplay',
   decorators: [
     MemoryRouterDecorator,
-    getFieldDecorator('person', 'testLinks'),
+    getFieldDecorator('company', 'domainName', {
+      primaryLinkUrl: 'https://www.google.com',
+      primaryLinkLabel: 'Google',
+      secondaryLinks: ['https://www.toto.com'],
+    }),
     ComponentDecorator,
   ],
   component: LinksFieldDisplay,

diff --git a/...d/meta-types/display/components/__stories__/perf/MultiSelectFieldDisplay.perf.stories.tsx b/...d/meta-types/display/components/__stories__/perf/MultiSelectFieldDisplay.perf.stories.tsx
@@ -1,5 +1,5 @@
-import { useContext, useEffect } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
+import { useContext, useEffect } from 'react';
 import { ComponentDecorator } from 'twenty-ui';
 
 import { FieldFocusContext } from '@/object-record/record-field/contexts/FieldFocusContext';
@@ -23,7 +23,11 @@ const meta: Meta = {
   title: 'UI/Data/Field/Display/MultiSelectFieldDisplay',
   decorators: [
     MemoryRouterDecorator,
-    getFieldDecorator('person', 'testMultiSelect'),
+    getFieldDecorator('company', 'testMultiSelect', [
+      'Option 1',
+      'Option 2',
+      'Option 3',
+    ]),
     ComponentDecorator,
   ],
   component: MultiSelectFieldDisplay,

diff --git a/...-field/meta-types/display/components/__stories__/perf/RatingFieldDisplay.perf.stories.tsx b/...-field/meta-types/display/components/__stories__/perf/RatingFieldDisplay.perf.stories.tsx
@@ -10,7 +10,7 @@ const meta: Meta = {
   title: 'UI/Data/Field/Display/RatingFieldDisplay',
   decorators: [
     MemoryRouterDecorator,
-    getFieldDecorator('person', 'testRating'),
+    getFieldDecorator('company', 'testRating'),
     ComponentDecorator,
   ],
   component: RatingFieldDisplay,

diff --git a/...-field/meta-types/display/components/__stories__/perf/SelectFieldDisplay.perf.stories.tsx b/...-field/meta-types/display/components/__stories__/perf/SelectFieldDisplay.perf.stories.tsx
@@ -10,7 +10,7 @@ const meta: Meta = {
   title: 'UI/Data/Field/Display/SelectFieldDisplay',
   decorators: [
     MemoryRouterDecorator,
-    getFieldDecorator('person', 'testSelect'),
+    getFieldDecorator('task', 'status'),
     ComponentDecorator,
   ],
   component: SelectFieldDisplay,

diff --git a/packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx b/packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx
@@ -14,18 +14,21 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { getCompaniesMock } from '~/testing/mock-data/companies';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/objectMetadataItems';
 import { getPeopleMock } from '~/testing/mock-data/people';
+import { mockedTasks } from '~/testing/mock-data/tasks';
 import { isDefined } from '~/utils/isDefined';
 
 const RecordMockSetterEffect = ({
   companies,
   people,
+  tasks,
 }: {
   companies: ObjectRecord[];
   people: ObjectRecord[];
+  tasks: ObjectRecord[];
 }) => {
   const setRecordValue = useSetRecordValue();
 
-  const setRecordInBothStores = useRecoilCallback(
+  const setRecordInStores = useRecoilCallback(
     ({ set }) =>
       (record: ObjectRecord) => {
         set(recordStoreFamilyState(record.id), record);
@@ -36,20 +39,24 @@ const RecordMockSetterEffect = ({
 
   useEffect(() => {
     for (const company of companies) {
-      setRecordInBothStores(company);
+      setRecordInStores(company);
     }
 
     for (const person of people) {
-      setRecordInBothStores(person);
+      setRecordInStores(person);
     }
-  }, [setRecordInBothStores, companies, people]);
+
+    for (const task of tasks) {
+      setRecordInStores(task);
+    }
+  }, [companies, people, tasks, setRecordInStores]);
 
   return null;
 };
 
 export const getFieldDecorator =
   (
-    objectNameSingular: 'company' | 'person',
+    objectNameSingular: 'company' | 'person' | 'task',
     fieldName: string,
     fieldValue?: any,
   ): Decorator =>
@@ -74,7 +81,19 @@ export const getFieldDecorator =
           ]
         : peopleMock;
 
-    const record = objectNameSingular === 'company' ? companies[0] : people[0];
+    const tasksMock = mockedTasks;
+
+    const tasks =
+      objectNameSingular === 'task'
+        ? [{ ...tasksMock[0], [fieldName]: fieldValue }, ...tasksMock.slice(1)]
+        : tasksMock;
+
+    const record =
+      objectNameSingular === 'company'
+        ? companies[0]
+        : objectNameSingular === 'person'
+          ? people[0]
+          : tasks[0];
 
     if (isDefined(fieldValue)) {
       (record as any)[fieldName] = fieldValue;
@@ -113,13 +132,17 @@ export const getFieldDecorator =
             isLabelIdentifier,
             fieldDefinition: formatFieldMetadataItemAsColumnDefinition({
               field: fieldMetadataItem,
-              position: record.position ?? 0,
+              position: 0,
               objectMetadataItem,
             }),
             hotkeyScope: 'hotkey-scope',
           }}
         >
-          <RecordMockSetterEffect companies={companies} people={people} />
+          <RecordMockSetterEffect
+            companies={companies}
+            people={people}
+            tasks={tasks}
+          />
           <Story />
         </FieldContext.Provider>
       </RecordFieldValueSelectorContextProvider>

diff --git a/packages/twenty-front/src/testing/mock-data/generated/standard-metadata-query-result.ts b/packages/twenty-front/src/testing/mock-data/generated/standard-metadata-query-result.ts
@@ -7936,6 +7936,75 @@ export const mockedStandardObjectMetadataQueryResult: ObjectMetadataItemsQuery =
                                 "fromRelationMetadata": null,
                                 "toRelationMetadata": null
                             }
+                        },
+                                                {
+                            "__typename": "fieldEdge",
+                            "node": {
+                                "__typename": "field",
+                                "id": "af19a3ba-b725-4b9d-a0b7-8bf6b04fadds",
+                                "type": "MULTI_SELECT",
+                                "name": "testMultiSelect",
+                                "label": "Test Multi Select",
+                                "description": "Test Multi Select",
+                                "icon": "IconSelect",
+                                "isCustom": false,
+                                "isActive": true,
+                                "isSystem": true,
+                                "isNullable": false,
+                                "createdAt": "2024-08-02T16:00:05.938Z",
+                                "updatedAt": "2024-08-02T16:00:05.938Z",
+                                "defaultValue": null,
+                                "options": null,
+                                "relationDefinition": null,
+                                "fromRelationMetadata": null,
+                                "toRelationMetadata": null
+                            }
+                        },
+                        {
+                            "__typename": "fieldEdge",
+                            "node": {
+                                "__typename": "field",
+                                "id": "tt929592-4f74-419e-8b26-6d216859078f",
+                                "type": "RAW_JSON",
+                                "name": "testRawJson",
+                                "label": "Test Raw Json",
+                                "description": "Json value for event details",
+                                "icon": "IconListDetails",
+                                "isCustom": false,
+                                "isActive": true,
+                                "isSystem": true,
+                                "isNullable": true,
+                                "createdAt": "2024-08-02T16:00:05.938Z",
+                                "updatedAt": "2024-08-02T16:00:05.938Z",
+                                "defaultValue": null,
+                                "options": null,
+                                "relationDefinition": null,
+                                "fromRelationMetadata": null,
+                                "toRelationMetadata": null
+                            }
+                        },
+                        {
+                            "__typename": "fieldEdge",
+                            "node": {
+                                "__typename": "field",
+                                "id": "vv929592-4f74-419e-8b26-6d216859078f",
+                                "type": "RATING",
+                                "name": "testRating",
+                                "label": "Rating",
+                                "description": "Rating value",
+                                "icon": "IconListDetails",
+                                "isCustom": false,
+                                "isActive": true,
+                                "isSystem": true,
+                                "isNullable": true,
+                                "createdAt": "2024-08-02T16:00:05.938Z",
+                                "updatedAt": "2024-08-02T16:00:05.938Z",
+                                "defaultValue": null,
+                                "options": null,
+                                "relationDefinition": null,
+                                "fromRelationMetadata": null,
+                                "toRelationMetadata": null
+                            }
                         },
                         {
                             "__typename": "fieldEdge",