Feat/performance-refactor-styled-component (#5516)

In this PR I'm optimizing a whole RecordTableCell in real conditions
with a complex RelationFieldDisplay component :
- Broke down getObjectRecordIdentifier into multiple utils
- Precompute memoized function for getting chip data per field with
useRecordChipDataGenerator()
- Refactored RelationFieldDisplay
- Use CSS modules where performance is needed instead of styled
components
- Create a CSS theme with global CSS variables to be used by CSS modules

packages/twenty-front/src/modules/object-metadata/utils/getAvatarType.ts

@@ -0,0 +1,13 @@
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+
+export const getAvatarType = (objectNameSingular: string) => {
+  if (objectNameSingular === CoreObjectNameSingular.WorkspaceMember) {
+    return 'rounded';
+  }
+
+  if (objectNameSingular === CoreObjectNameSingular.Company) {
+    return 'squared';
+  }
+
+  return 'rounded';
+};

packages/twenty-front/src/modules/object-metadata/utils/getAvatarUrl.ts

@@ -0,0 +1,36 @@
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { getLogoUrlFromDomainName } from '~/utils';
+import { isDefined } from '~/utils/isDefined';
+
+import { getImageIdentifierFieldValue } from './getImageIdentifierFieldValue';
+
+export const getAvatarUrl = (
+  objectNameSingular: string,
+  record: ObjectRecord,
+  imageIdentifierFieldMetadataItem: FieldMetadataItem | undefined,
+) => {
+  if (objectNameSingular === CoreObjectNameSingular.WorkspaceMember) {
+    return record.avatarUrl ?? undefined;
+  }
+
+  if (objectNameSingular === CoreObjectNameSingular.Company) {
+    return getLogoUrlFromDomainName(record.domainName ?? '');
+  }
+
+  if (objectNameSingular === CoreObjectNameSingular.Person) {
+    return record.avatarUrl ?? '';
+  }
+
+  const imageIdentifierFieldValue = getImageIdentifierFieldValue(
+    record,
+    imageIdentifierFieldMetadataItem,
+  );
+
+  if (isDefined(imageIdentifierFieldValue)) {
+    return imageIdentifierFieldValue;
+  }
+
+  return '';
+};

packages/twenty-front/src/modules/object-metadata/utils/getImageIdentifierFieldValue.ts

@@ -0,0 +1,14 @@
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { isDefined } from '~/utils/isDefined';
+
+export const getImageIdentifierFieldValue = (
+  record: ObjectRecord,
+  imageIdentifierFieldMetadataItem: FieldMetadataItem | undefined,
+) => {
+  if (isDefined(imageIdentifierFieldMetadataItem?.name)) {
+    return record[imageIdentifierFieldMetadataItem.name] as string;
+  }
+
+  return null;
+};

packages/twenty-front/src/modules/object-metadata/utils/getLabelIdentifierFieldValue.ts

@@ -0,0 +1,24 @@
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
+import { isDefined } from '~/utils/isDefined';
+
+export const getLabelIdentifierFieldValue = (
+  record: ObjectRecord,
+  labelIdentifierFieldMetadataItem: FieldMetadataItem | undefined,
+  objectNameSingular: string,
+) => {
+  if (
+    objectNameSingular === CoreObjectNameSingular.WorkspaceMember ||
+    labelIdentifierFieldMetadataItem?.type === FieldMetadataType.FullName
+  ) {
+    return `${record.name?.firstName ?? ''} ${record.name?.lastName ?? ''}`;
+  }
+
+  if (isDefined(labelIdentifierFieldMetadataItem?.name)) {
+    return record[labelIdentifierFieldMetadataItem.name] as string | number;
+  }
+
+  return '';
+};

packages/twenty-front/src/modules/object-metadata/utils/getLinkToShowPage.ts

@@ -0,0 +1,22 @@
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+
+export const getLinkToShowPage = (
+  objectNameSingular: string,
+  record: ObjectRecord,
+) => {
+  const basePathToShowPage = getBasePathToShowPage({
+    objectNameSingular,
+  });
+
+  const isWorkspaceMemberObjectMetadata =
+    objectNameSingular === CoreObjectNameSingular.WorkspaceMember;
+
+  const linkToShowPage =
+    isWorkspaceMemberObjectMetadata || !record.id
+      ? ''
+      : `${basePathToShowPage}${record.id}`;
+
+  return linkToShowPage;
+};

packages/twenty-front/src/modules/object-metadata/utils/getObjectRecordIdentifier.ts

@@ -1,12 +1,12 @@
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage';
 import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
-import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
-import { FieldMetadataType } from '~/generated-metadata/graphql';
-import { getLogoUrlFromDomainName } from '~/utils';
+
+import { getAvatarType } from './getAvatarType';
+import { getAvatarUrl } from './getAvatarUrl';
+import { getLabelIdentifierFieldValue } from './getLabelIdentifierFieldValue';
+import { getLinkToShowPage } from './getLinkToShowPage';
 
 export const getObjectRecordIdentifier = ({
   objectMetadataItem,
@@ -15,69 +15,32 @@ export const getObjectRecordIdentifier = ({
   objectMetadataItem: ObjectMetadataItem;
   record: ObjectRecord;
 }): ObjectRecordIdentifier => {
-  switch (objectMetadataItem.nameSingular) {
-    case CoreObjectNameSingular.WorkspaceMember: {
-      const workspaceMember = record as Partial<WorkspaceMember> & {
-        id: string;
-      };
-
-      const name = workspaceMember.name
-        ? `${workspaceMember.name?.firstName ?? ''} ${
-            workspaceMember.name?.lastName ?? ''
-          }`
-        : '';
-
-      return {
-        id: workspaceMember.id,
-        name,
-        avatarUrl: workspaceMember.avatarUrl ?? undefined,
-        avatarType: 'rounded',
-      };
-    }
-  }
-
   const labelIdentifierFieldMetadataItem =
     getLabelIdentifierFieldMetadataItem(objectMetadataItem);
 
-  const labelIdentifierFieldValue =
-    labelIdentifierFieldMetadataItem?.type === FieldMetadataType.FullName
-      ? `${record.name?.firstName ?? ''} ${record.name?.lastName ?? ''}`
-      : labelIdentifierFieldMetadataItem?.name
-        ? (record[labelIdentifierFieldMetadataItem.name] as string | number)
-        : '';
+  const labelIdentifierFieldValue = getLabelIdentifierFieldValue(
+    record,
+    labelIdentifierFieldMetadataItem,
+    objectMetadataItem.nameSingular,
+  );
 
   const imageIdentifierFieldMetadata = objectMetadataItem.fields.find(
     (field) => field.id === objectMetadataItem.imageIdentifierFieldMetadataId,
   );
 
-  const imageIdentifierFieldValue = imageIdentifierFieldMetadata
-    ? (record[imageIdentifierFieldMetadata.name] as string)
-    : null;
-
-  const avatarType =
-    objectMetadataItem.nameSingular === CoreObjectNameSingular.Company
-      ? 'squared'
-      : 'rounded';
+  const avatarType = getAvatarType(objectMetadataItem.nameSingular);
 
   // TODO: This is a temporary solution before we seed imageIdentifierFieldMetadataId in the database
-  const avatarUrl =
-    (objectMetadataItem.nameSingular === CoreObjectNameSingular.Company
-      ? getLogoUrlFromDomainName(record.domainName ?? '')
-      : objectMetadataItem.nameSingular === CoreObjectNameSingular.Person
-        ? record.avatarUrl ?? ''
-        : imageIdentifierFieldValue) ?? '';
+  const avatarUrl = getAvatarUrl(
+    objectMetadataItem.nameSingular,
+    record,
+    imageIdentifierFieldMetadata,
+  );
 
-  const basePathToShowPage = getBasePathToShowPage({
-    objectNameSingular: objectMetadataItem.nameSingular,
-  });
-
-  const isWorkspaceMemberObjectMetadata =
-    objectMetadataItem.nameSingular === CoreObjectNameSingular.WorkspaceMember;
-
-  const linkToShowPage =
-    isWorkspaceMemberObjectMetadata || !record.id
-      ? ''
-      : `${basePathToShowPage}${record.id}`;
+  const linkToShowPage = getLinkToShowPage(
+    objectMetadataItem.nameSingular,
+    record,
+  );
 
   return {
     id: record.id,