Refactored all FieldDisplay types for performance optimization (#5768)

This PR is the second part of https://github.com/twentyhq/twenty/pull/5693. It optimizes all remaining field types. The observed improvements are : - x2 loading time improvement on table rows - more consistent render time Here's a summary of measured improvements, what's given here is the average of hundreds of renders with a React Profiler component. (in our Storybook performance stories) | Component | Before (µs) | After (µs) | | ----- | ------------- | --- | | TextFieldDisplay | 127 | 83 | | EmailFieldDisplay | 117 | 83 | | NumberFieldDisplay | 97 | 56 | | DateFieldDisplay | 240 | 52 | | CurrencyFieldDisplay | 236 | 110 | | FullNameFieldDisplay | 131 | 85 | | AddressFieldDisplay | 118 | 81 | | BooleanFieldDisplay | 130 | 100 | | JSONFieldDisplay | 248 | 49 | | LinksFieldDisplay | 1180 | 140 | | LinkFieldDisplay | 140 | 78 | | MultiSelectFieldDisplay | 770 | 130 | | SelectFieldDisplay | 230 | 87 |
2024-06-12 18:36:25 +02:00
parent 007e0e8b0e
commit 03b3c8a67a
101 changed files with 17167 additions and 15795 deletions
--- a/packages/twenty-front/src/testing/mock-data/companies.ts
+++ b/packages/twenty-front/src/testing/mock-data/companies.ts
@ -1,210 +1,393 @@
-import { Company } from '@/companies/types/Company';
-import { Favorite } from '@/favorites/types/Favorite';
-import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
-
-import { mockedUsersData } from './users';
-
-type MockedCompany = Omit<Company, 'deletedAt'> & {
-  accountOwner: WorkspaceMember | null;
-  Favorite: Pick<Favorite, 'id'> | null;
+export const getCompaniesMock = () => {
+  return companiesQueryResult.companies.edges.map((edge) => edge.node);
 };

-export const mockedCompaniesData: Array<MockedCompany> = [
-  {
+export const getCompanyDuplicateMock = () => {
+  return {
+    ...companiesQueryResult.companies.edges[0].node,
+    id: '8b40856a-2ec9-4c03-8bc0-c032c89e1824',
+  };
+};
+
+export const getEmptyCompanyMock = () => {
+  return {
+    id: '9231e6ee-4cc2-4c7b-8c55-dff16f4d968a',
+    name: '',
+    domainName: '',
+    address: '',
+    accountOwner: null,
+    createdAt: null,
+    updatedAt: null,
+    employees: null,
+    idealCustomerProfile: null,
+    linkedinLink: null,
+    xLink: null,
+    _activityCount: null,
    __typename: 'Company',
-    id: '89bb825c-171e-4bcc-9cf7-43448d6fb278',
-    domainName: 'airbnb.com',
-    name: 'Airbnb',
-    createdAt: '2023-04-26T10:08:54.724515+00:00',
-    updatedAt: '2023-04-26T10:23:42.33625+00:00',
-    address: '17 rue de clignancourt',
-    employees: 12,
-    linkedinLink: {
-      url: 'https://www.linkedin.com/company/airbnb/',
-      label: 'https://www.linkedin.com/company/airbnb/',
+  };
+};
+
+export const companiesQueryResult = {
+  companies: {
+    __typename: 'CompanyConnection',
+    totalCount: 13,
+    pageInfo: {
+      __typename: 'PageInfo',
+      hasNextPage: false,
+      startCursor:
+        'WzEsICIyMDIwMjAyMC0zZWMzLTRmZTMtODk5Ny1iNzZhYTBiZmE0MDgiXQ==',
+      endCursor: 'WzEzLCAiMjAyMDIwMjAtMTQ1NS00YzU3LWFmYWYtZGQ1ZGMwODYzNjFkIl0=',
    },
-    xLink: {
-      url: 'https://twitter.com/airbnb',
-      label: 'https://twitter.com/airbnb',
-    },
-    annualRecurringRevenue: { amountMicros: 5000000, currencyCode: 'USD' },
-    idealCustomerProfile: true,
-    Favorite: null,
-    accountOwnerId: mockedUsersData[0].id,
-    accountOwner: {
-      __typename: 'WorkspaceMember',
-      name: {
-        firstName: 'Charles',
-        lastName: 'Test',
+    edges: [
+      {
+        __typename: 'CompanyEdge',
+        cursor: 'WzEsICIyMDIwMjAyMC0zZWMzLTRmZTMtODk5Ny1iNzZhYTBiZmE0MDgiXQ==',
+        node: {
+          __typename: 'Company',
+          id: '20202020-3ec3-4fe3-8997-b76aa0bfa408',
+          employees: 100,
+          createdAt: '2024-06-05T09:00:20.412Z',
+          name: 'Linkedin',
+          accountOwner: null,
+          domainName: 'linkedin.com',
+          address: '',
+          position: 1,
+          idealCustomerProfile: true,
+          linkedinLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+          previousEmployees: {
+            __typename: 'Person',
+            id: '20202020-2d40-4e49-8df4-9c6a049191de',
+            email: 'louis.duss@google.com',
+            position: 14,
+            testJson: null,
+            testRating: null,
+            companyId: '20202020-c21e-4ec2-873b-de4264d89025',
+            avatarUrl: '',
+            updatedAt: '2024-06-05T09:36:42.400Z',
+            testMultiSelect: null,
+            testBoolean: true,
+            testSelect: 'OPTION_1',
+            testDateOnly: null,
+            bestCompanyId: null,
+            testUuid: null,
+            phone: '+33788901234',
+            createdAt: '2024-06-05T09:00:20.412Z',
+            city: 'Seattle',
+            testPhone: '',
+            jobTitle: 'CTO',
+            testCurrency: {
+              __typename: 'Currency',
+              amountMicros: null,
+              currencyCode: 'USD',
+            },
+            xLink: {
+              __typename: 'Link',
+              label: '',
+              url: 'twitter.com',
+            },
+            testLinks: {
+              __typename: 'Links',
+              primaryLinkUrl: '',
+              primaryLinkLabel: '',
+              secondaryLinks: null,
+            },
+            name: {
+              __typename: 'FullName',
+              firstName: 'Louis',
+              lastName: 'Duss',
+            },
+            linkedinLink: {
+              __typename: 'Link',
+              label: '',
+              url: 'linkedin.com',
+            },
+            testAddress: {
+              __typename: 'Address',
+              addressStreet1: '',
+              addressStreet2: '',
+              addressCity: '',
+              addressState: '',
+              addressCountry: '',
+              addressPostcode: '',
+              addressLat: null,
+              addressLng: null,
+            },
+            testLink: {
+              __typename: 'Link',
+              label: '',
+              url: '',
+            },
+          },
+        },
      },
-      avatarUrl: null,
-      id: mockedUsersData[0].id,
-      locale: 'en',
-      colorScheme: 'Light',
-      updatedAt: '2023-04-26T10:23:42.33625+00:00',
-      createdAt: '2023-04-26T10:23:42.33625+00:00',
-      userId: mockedUsersData[0].id,
-      userEmail: 'charles@test.com',
-    },
+      {
+        __typename: 'CompanyEdge',
+        cursor: 'WzIsICIyMDIwMjAyMC01ZDgxLTQ2ZDYtYmY4My1mN2ZkMzNlYTYxMDIiXQ==',
+        node: {
+          __typename: 'Company',
+          id: '20202020-5d81-46d6-bf83-f7fd33ea6102',
+          employees: null,
+          createdAt: '2024-06-05T09:00:20.412Z',
+          name: 'Facebook',
+          idealCustomerProfile: false,
+          accountOwner: null,
+          domainName: 'facebook.com',
+          address: '',
+          previousEmployees: null,
+          position: 2,
+          linkedinLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+        },
+      },
+      {
+        __typename: 'CompanyEdge',
+        cursor: 'WzMsICIyMDIwMjAyMC0wNzEzLTQwYTUtODIxNi04MjgwMjQwMWQzM2UiXQ==',
+        node: {
+          __typename: 'Company',
+          id: '20202020-0713-40a5-8216-82802401d33e',
+          employees: null,
+          createdAt: '2024-06-05T09:00:20.412Z',
+          name: 'Qonto',
+          idealCustomerProfile: false,
+          accountOwner: null,
+          domainName: 'qonto.com',
+          address: '',
+          previousEmployees: null,
+          position: 3,
+          linkedinLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+        },
+      },
+      {
+        __typename: 'CompanyEdge',
+        cursor: 'WzQsICIyMDIwMjAyMC1lZDg5LTQxM2EtYjMxYS05NjI5ODZlNjdiYjQiXQ==',
+        node: {
+          __typename: 'Company',
+          id: '20202020-ed89-413a-b31a-962986e67bb4',
+          employees: null,
+          createdAt: '2024-06-05T09:00:20.412Z',
+          name: 'Microsoft',
+          idealCustomerProfile: true,
+          accountOwner: null,
+          domainName: 'microsoft.com',
+          address: '',
+          previousEmployees: null,
+          position: 4,
+          linkedinLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+        },
+      },
+      {
+        __typename: 'CompanyEdge',
+        cursor: 'WzUsICIyMDIwMjAyMC0xNzFlLTRiY2MtOWNmNy00MzQ0OGQ2ZmIyNzgiXQ==',
+        node: {
+          __typename: 'Company',
+          id: '20202020-171e-4bcc-9cf7-43448d6fb278',
+          employees: null,
+          createdAt: '2024-06-05T09:00:20.412Z',
+          name: 'Airbnb',
+          idealCustomerProfile: true,
+          accountOwner: null,
+          domainName: 'airbnb.com',
+          address: '',
+          previousEmployees: null,
+          position: 5,
+          linkedinLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+        },
+      },
+      {
+        __typename: 'CompanyEdge',
+        cursor: 'WzYsICIyMDIwMjAyMC1jMjFlLTRlYzItODczYi1kZTQyNjRkODkwMjUiXQ==',
+        node: {
+          __typename: 'Company',
+          id: '20202020-c21e-4ec2-873b-de4264d89025',
+          employees: null,
+          createdAt: '2024-06-05T09:00:20.412Z',
+          name: 'Google',
+          idealCustomerProfile: false,
+          accountOwner: null,
+          domainName: 'google.com',
+          address: '',
+          previousEmployees: null,
+          position: 6,
+          linkedinLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+        },
+      },
+      {
+        __typename: 'CompanyEdge',
+        cursor: 'WzcsICIyMDIwMjAyMC03MDdlLTQ0ZGMtYTFkMi0zMDAzMGJmMWE5NDQiXQ==',
+        node: {
+          __typename: 'Company',
+          id: '20202020-707e-44dc-a1d2-30030bf1a944',
+          employees: null,
+          createdAt: '2024-06-05T09:00:20.412Z',
+          name: 'Netflix',
+          idealCustomerProfile: true,
+          accountOwner: null,
+          domainName: 'netflix.com',
+          address: '',
+          previousEmployees: null,
+          position: 7,
+          linkedinLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+        },
+      },
+      {
+        __typename: 'CompanyEdge',
+        cursor: 'WzgsICIyMDIwMjAyMC0zZjc0LTQ5MmQtYTEwMS0yYTcwZjUwYTE2NDUiXQ==',
+        node: {
+          __typename: 'Company',
+          id: '20202020-3f74-492d-a101-2a70f50a1645',
+          employees: null,
+          createdAt: '2024-06-05T09:00:20.412Z',
+          name: 'Libeo',
+          idealCustomerProfile: false,
+          accountOwner: null,
+          domainName: 'libeo.io',
+          address: '',
+          previousEmployees: null,
+          position: 8,
+          linkedinLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+        },
+      },
+      {
+        __typename: 'CompanyEdge',
+        cursor: 'WzksICIyMDIwMjAyMC1jZmJmLTQxNTYtYTc5MC1lMzk4NTRkY2Q0ZWIiXQ==',
+        node: {
+          __typename: 'Company',
+          id: '20202020-cfbf-4156-a790-e39854dcd4eb',
+          employees: null,
+          createdAt: '2024-06-05T09:00:20.412Z',
+          name: 'Claap',
+          idealCustomerProfile: false,
+          accountOwner: null,
+          domainName: 'claap.io',
+          address: '',
+          previousEmployees: null,
+          position: 9,
+          linkedinLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+        },
+      },
+      {
+        __typename: 'CompanyEdge',
+        cursor: 'WzEwLCAiMjAyMDIwMjAtZjg2Yi00MTlmLWI3OTQtMDIzMTlhYmU4NjM3Il0=',
+        node: {
+          __typename: 'Company',
+          id: '20202020-f86b-419f-b794-02319abe8637',
+          employees: null,
+          createdAt: '2024-06-05T09:00:20.412Z',
+          name: 'Hasura',
+          idealCustomerProfile: false,
+          accountOwner: null,
+          domainName: 'hasura.io',
+          address: '',
+          previousEmployees: null,
+          position: 10,
+          linkedinLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+        },
+      },
+      {
+        __typename: 'CompanyEdge',
+        cursor: 'WzExLCAiMjAyMDIwMjAtNTUxOC00NTUzLTk0MzMtNDJkOGViODI4MzRiIl0=',
+        node: {
+          __typename: 'Company',
+          id: '20202020-5518-4553-9433-42d8eb82834b',
+          employees: null,
+          createdAt: '2024-06-05T09:00:20.412Z',
+          name: 'Wework',
+          idealCustomerProfile: false,
+          accountOwner: null,
+          domainName: 'wework.com',
+          address: '',
+          previousEmployees: null,
+          position: 11,
+          linkedinLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+        },
+      },
+      {
+        __typename: 'CompanyEdge',
+        cursor: 'WzEyLCAiMjAyMDIwMjAtZjc5ZS00MGRkLWJkMDYtYzM2ZTZhYmI0Njc4Il0=',
+        node: {
+          __typename: 'Company',
+          id: '20202020-f79e-40dd-bd06-c36e6abb4678',
+          employees: null,
+          createdAt: '2024-06-05T09:00:20.412Z',
+          name: 'Samsung',
+          idealCustomerProfile: false,
+          accountOwner: null,
+          domainName: 'samsung.com',
+          address: '',
+          previousEmployees: null,
+          position: 12,
+          linkedinLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+        },
+      },
+      {
+        __typename: 'CompanyEdge',
+        cursor: 'WzEzLCAiMjAyMDIwMjAtMTQ1NS00YzU3LWFmYWYtZGQ1ZGMwODYzNjFkIl0=',
+        node: {
+          __typename: 'Company',
+          id: '20202020-1455-4c57-afaf-dd5dc086361d',
+          employees: null,
+          createdAt: '2024-06-05T09:00:20.412Z',
+          name: 'Algolia',
+          idealCustomerProfile: false,
+          accountOwner: null,
+          domainName: 'algolia.com',
+          address: '',
+          previousEmployees: null,
+          position: 13,
+          linkedinLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+        },
+      },
+    ],
  },
-  {
-    __typename: 'Company',
-    id: 'b396e6b9-dc5c-4643-bcff-61b6cf7523ae',
-    domainName: 'aircall.io',
-    name: 'Aircall',
-    createdAt: '2023-04-26T10:12:42.33625+00:00',
-    updatedAt: '2023-04-26T10:23:42.33625+00:00',
-    address: '',
-    employees: 1,
-    accountOwnerId: null,
-    linkedinLink: {
-      url: 'https://www.linkedin.com/company/aircall/',
-      label: 'https://www.linkedin.com/company/aircall/',
-    },
-    xLink: {
-      url: 'https://twitter.com/aircall',
-      label: 'https://twitter.com/aircall',
-    },
-    annualRecurringRevenue: { amountMicros: 500000, currencyCode: 'USD' },
-    idealCustomerProfile: false,
-    accountOwner: null,
-    Favorite: null,
-  },
-  {
-    __typename: 'Company',
-    id: 'a674fa6c-1455-4c57-afaf-dd5dc086361d',
-    domainName: 'algolia.com',
-    name: 'Algolia',
-    createdAt: '2023-04-26T10:10:32.530184+00:00',
-    updatedAt: '2023-04-26T10:23:42.33625+00:00',
-    address: '',
-    employees: 1,
-    linkedinLink: {
-      url: 'https://www.linkedin.com/company/algolia/',
-      label: 'https://www.linkedin.com/company/algolia/',
-    },
-    xLink: {
-      url: 'https://twitter.com/algolia',
-      label: 'https://twitter.com/algolia',
-    },
-    annualRecurringRevenue: { amountMicros: 5000000, currencyCode: 'USD' },
-    idealCustomerProfile: true,
-    accountOwner: null,
-    Favorite: null,
-    accountOwnerId: null,
-  },
-  {
-    __typename: 'Company',
-    id: 'b1cfd51b-a831-455f-ba07-4e30671e1dc3',
-    domainName: 'apple.com',
-    name: 'Apple',
-    createdAt: '2023-03-21T06:30:25.39474+00:00',
-    updatedAt: '2023-04-26T10:23:42.33625+00:00',
-    address: '',
-    employees: 10,
-    linkedinLink: {
-      url: 'https://www.linkedin.com/company/apple/',
-      label: 'https://www.linkedin.com/company/apple/',
-    },
-    xLink: {
-      url: 'https://twitter.com/apple',
-      label: 'https://twitter.com/apple',
-    },
-    annualRecurringRevenue: { amountMicros: 1000000, currencyCode: 'USD' },
-    idealCustomerProfile: false,
-    accountOwner: null,
-    Favorite: null,
-    accountOwnerId: null,
-  },
-  {
-    __typename: 'Company',
-    id: '5c21e19e-e049-4393-8c09-3e3f8fb09ecb',
-    domainName: 'qonto.com',
-    name: 'Qonto',
-    createdAt: '2023-04-26T10:13:29.712485+00:00',
-    updatedAt: '2023-04-26T10:23:42.33625+00:00',
-    address: '10 rue de la Paix',
-    employees: 1,
-    linkedinLink: {
-      url: 'https://www.linkedin.com/company/qonto/',
-      label: 'https://www.linkedin.com/company/qonto/',
-    },
-    xLink: {
-      url: 'https://twitter.com/qonto',
-      label: 'https://twitter.com/qonto',
-    },
-    annualRecurringRevenue: { amountMicros: 5000000, currencyCode: 'USD' },
-    idealCustomerProfile: false,
-    accountOwner: null,
-    Favorite: null,
-    accountOwnerId: null,
-  },
-  {
-    __typename: 'Company',
-    id: '9d162de6-cfbf-4156-a790-e39854dcd4eb',
-    domainName: 'facebook.com',
-    name: 'Facebook',
-    createdAt: '2023-04-26T10:09:25.656555+00:00',
-    updatedAt: '2023-04-26T10:23:42.33625+00:00',
-    address: '',
-    employees: 1,
-    linkedinLink: {
-      url: 'https://www.linkedin.com/company/facebook/',
-      label: 'https://www.linkedin.com/company/facebook/',
-    },
-    xLink: {
-      url: 'https://twitter.com/facebook',
-      label: 'https://twitter.com/facebook',
-    },
-    annualRecurringRevenue: { amountMicros: 5000000, currencyCode: 'USD' },
-    idealCustomerProfile: true,
-    accountOwner: null,
-    Favorite: null,
-    accountOwnerId: null,
-  },
-  {
-    __typename: 'Company',
-    id: '9d162de6-cfbf-4156-a790-e39854dcd4ef',
-    domainName: 'sequoia.com',
-    name: 'Sequoia',
-    createdAt: '2023-04-26T10:09:25.656555+00:00',
-    updatedAt: '2023-04-26T10:23:42.33625+00:00',
-    address: '',
-    employees: 1,
-    linkedinLink: {
-      url: 'https://www.linkedin.com/company/sequoia/',
-      label: 'https://www.linkedin.com/company/sequoia/',
-    },
-    xLink: {
-      url: 'https://twitter.com/sequoia',
-      label: 'https://twitter.com/sequoia',
-    },
-    annualRecurringRevenue: { amountMicros: 5000000, currencyCode: 'USD' },
-    idealCustomerProfile: true,
-    accountOwner: null,
-    Favorite: null,
-    accountOwnerId: null,
-  },
-];
-
-export const mockedDuplicateCompanyData: MockedCompany = {
-  ...mockedCompaniesData[0],
-  id: '8b40856a-2ec9-4c03-8bc0-c032c89e1824',
-};
-
-export const mockedEmptyCompanyData = {
-  id: '9231e6ee-4cc2-4c7b-8c55-dff16f4d968a',
-  name: '',
-  domainName: '',
-  address: '',
-  accountOwner: null,
-  annualRecurringRevenue: null,
-  createdAt: null,
-  updatedAt: null,
-  employees: null,
-  idealCustomerProfile: null,
-  linkedinLink: null,
-  xLink: null,
-  _activityCount: null,
-  __typename: 'Company',
 };