Feat/improve table cell recoil value

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+# name: Playwright Tests
+# on:
+#   push:
+#     branches: [ main, master ]
+#   pull_request:
+#     branches: [ main, master ]
+# jobs:
+#   test:
+#     timeout-minutes: 60
+#     runs-on: ubuntu-latest
+#     steps:
+#     - uses: actions/checkout@v4
+#     - uses: actions/setup-node@v4
+#       with:
+#         node-version: lts/*
+#     - name: Install dependencies
+#       run: npm install -g yarn && yarn
+#     - name: Install Playwright Browsers
+#       run: yarn playwright install --with-deps
+#     - name: Run Playwright tests
+#       run: yarn playwright test
+#     - uses: actions/upload-artifact@v4
+#       if: always()
+#       with:
+#         name: playwright-report
+#         path: playwright-report/
+#         retention-days: 30

.gitignore

@@ -26,3 +26,7 @@ storybook-static
 *.tsbuildinfo
 .eslintcache
 .cache
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -87,6 +87,7 @@
     "drizzle-orm": "^0.29.3",
     "esbuild-plugin-svgr": "^2.1.0",
     "facepaint": "^1.2.1",
+    "fast-deep-equal": "^3.1.3",
     "file-type": "16.5.4",
     "framer-motion": "^10.12.17",
     "googleapis": "105",
@@ -104,6 +105,8 @@
     "iframe-resizer-react": "^1.1.0",
     "immer": "^10.0.2",
     "jest-mock-extended": "^3.0.4",
+    "jotai": "^2.8.0",
+    "jotai-devtools": "^0.9.1",
     "js-cookie": "^3.0.5",
     "js-levenshtein": "^1.1.6",
     "json-2-csv": "^5.4.0",
@@ -169,6 +172,7 @@
     "remark-gfm": "^3.0.1",
     "rimraf": "^3.0.2",
     "rxjs": "^7.2.0",
+    "scheduler": "^0.23.2",
     "scroll-into-view": "^1.16.2",
     "semver": "^7.5.4",
     "sharp": "^0.32.1",
@@ -178,6 +182,7 @@
     "tsup": "^8.0.1",
     "type-fest": "4.10.1",
     "typeorm": "^0.3.17",
+    "use-context-selector": "^1.4.4",
     "use-debounce": "^10.0.0",
     "uuid": "^9.0.0",
     "vite-tsconfig-paths": "^4.2.1",
@@ -206,6 +211,7 @@
     "@nx/storybook": "18.3.3",
     "@nx/vite": "18.3.3",
     "@nx/web": "18.3.3",
+    "@playwright/test": "^1.43.1",
     "@sentry/types": "^7.109.0",
     "@storybook/addon-actions": "^7.6.3",
     "@storybook/addon-coverage": "^1.0.0",
@@ -297,7 +303,6 @@
     "msw": "^2.0.11",
     "msw-storybook-addon": "2.0.0--canary.122.b3ed3b1.0",
     "nx": "18.3.3",
-    "playwright": "^1.40.1",
     "prettier": "^3.1.1",
     "raw-loader": "^4.0.2",
     "rimraf": "^5.0.5",

packages/twenty-front/src/index.tsx

@@ -11,6 +11,7 @@ import { ClientConfigProvider } from '@/client-config/components/ClientConfigPro
 import { ClientConfigProviderEffect } from '@/client-config/components/ClientConfigProviderEffect';
 import { ApolloDevLogEffect } from '@/debug/components/ApolloDevLogEffect';
 import { RecoilDebugObserverEffect } from '@/debug/components/RecoilDebugObserver';
+import { ProfilerReporter } from '@/debug/profiling/components/ProfilerReporter';
 import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import { ExceptionHandlerProvider } from '@/error-handler/components/ExceptionHandlerProvider';
 import { PromiseRejectionEffect } from '@/error-handler/components/PromiseRejectionEffect';
@@ -43,6 +44,7 @@ root.render(
       <CaptchaProvider>
         <RecoilDebugObserverEffect />
         <ApolloDevLogEffect />
+        <ProfilerReporter />
         <BrowserRouter>
           <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
             <IconsProvider>

packages/twenty-front/src/modules/debug/profiling/components/ProfilerReporter.tsx

@@ -0,0 +1,15 @@
+import { useRecoilState } from 'recoil';
+
+import { profilingSessionState } from '@/debug/profiling/states/profilingSessionState';
+
+export const ProfilerReporter = () => {
+  const [profilingSession] = useRecoilState(profilingSessionState);
+
+  return (
+    <div
+      style={{ width: 0, height: 0, visibility: 'hidden' }}
+      data-profiling-report={JSON.stringify(profilingSession)}
+      id="profiling-report"
+    ></div>
+  );
+};

packages/twenty-front/src/modules/debug/profiling/components/ProfilerWrapper.tsx

@@ -0,0 +1,39 @@
+import { Profiler, ProfilerOnRenderCallback } from 'react';
+import { useRecoilCallback } from 'recoil';
+
+import { profilingSessionState } from '@/debug/profiling/states/profilingSessionState';
+import { ProfilingDataPoint } from '@/debug/profiling/types/ProfilingDataPoint';
+
+export const ProfilerWrapper = ({
+  id,
+  componentName,
+  children,
+}: {
+  id: string;
+  componentName: string;
+  children: React.ReactNode;
+}) => {
+  const handleRender: ProfilerOnRenderCallback = useRecoilCallback(
+    ({ set }) =>
+      (id, phase, actualDurationInMs) => {
+        const newDataPoint: ProfilingDataPoint = {
+          componentName,
+          id,
+          phase,
+          durationInMs: actualDurationInMs,
+        };
+
+        set(profilingSessionState, (currentProfilingSession) => ({
+          ...currentProfilingSession,
+          [id]: [...(currentProfilingSession[id] ?? []), newDataPoint],
+        }));
+      },
+    [componentName],
+  );
+
+  return (
+    <Profiler id={id} onRender={handleRender}>
+      {children}
+    </Profiler>
+  );
+};

packages/twenty-front/src/modules/debug/profiling/states/profilingSessionState.ts

@@ -0,0 +1,10 @@
+import { atom } from 'recoil';
+
+import { ProfilingDataPoint } from '@/debug/profiling/types/ProfilingDataPoint';
+
+export const profilingSessionState = atom<Record<string, ProfilingDataPoint[]>>(
+  {
+    key: 'profilingSessionState',
+    default: {},
+  },
+);

packages/twenty-front/src/modules/debug/profiling/types/ProfilingDataPoint.ts

@@ -0,0 +1,6 @@
+export type ProfilingDataPoint = {
+  id: string;
+  componentName: string;
+  phase: string;
+  durationInMs: number;
+};

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

@@ -1,12 +1,103 @@
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 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 { 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 '';
+};
+
+const getImageIdentifierFieldValue = (
+  record: ObjectRecord,
+  imageIdentifierFieldMetadataItem: FieldMetadataItem | undefined,
+) => {
+  if (isDefined(imageIdentifierFieldMetadataItem?.name)) {
+    return record[imageIdentifierFieldMetadataItem.name] as string;
+  }
+
+  return null;
+};
+
+export const getAvatarType = (objectNameSingular: string) => {
+  if (objectNameSingular === CoreObjectNameSingular.WorkspaceMember) {
+    return 'rounded';
+  }
+
+  if (objectNameSingular === CoreObjectNameSingular.Company) {
+    return 'squared';
+  }
+
+  return 'rounded';
+};
+
+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 '';
+};
+
+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;
+};
 
 export const getObjectRecordIdentifier = ({
   objectMetadataItem,
@@ -15,69 +106,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 basePathToShowPage = getBasePathToShowPage({
-    objectNameSingular: objectMetadataItem.nameSingular,
-  });
-
-  const isWorkspaceMemberObjectMetadata =
-    objectMetadataItem.nameSingular === CoreObjectNameSingular.WorkspaceMember;
+  const avatarUrl = getAvatarUrl(
+    objectMetadataItem.nameSingular,
+    record,
+    imageIdentifierFieldMetadata,
+  );
 
-  const linkToShowPage =
-    isWorkspaceMemberObjectMetadata || !record.id
-      ? ''
-      : `${basePathToShowPage}${record.id}`;
+  const linkToShowPage = getLinkToShowPage(
+    objectMetadataItem.nameSingular,
+    record,
+  );
 
   return {
     id: record.id,

packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts

@@ -29,6 +29,7 @@ export type GenericFieldContextType = {
   basePathToShowPage?: string;
   clearable?: boolean;
   maxWidth?: number;
+  isFieldInputOnly?: boolean;
 };
 
 export const FieldContext = createContext<GenericFieldContextType>(

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx

@@ -1,12 +1,22 @@
-import { RecordChip } from '@/object-record/components/RecordChip';
+import { EntityChip } from 'twenty-ui';
+
 import { useChipField } from '@/object-record/record-field/meta-types/hooks/useChipField';
+import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 export const ChipFieldDisplay = () => {
-  const { objectNameSingular, record } = useChipField();
+  const { record, generateRecordChipData } = useChipField();
+
+  if (!record || !generateRecordChipData) return null;
 
-  if (!record) return null;
+  const chipData = generateRecordChipData(record);
 
   return (
-    <RecordChip objectNameSingular={objectNameSingular || ''} record={record} />
+    <EntityChip
+      entityId={record.id}
+      name={chipData.name as any}
+      avatarType={chipData.avatarType}
+      avatarUrl={getImageAbsoluteURIOrBase64(chipData.avatarUrl) || ''}
+      linkToEntity={chipData.linkToShowPage}
+    />
   );
 };