From 57869d3c8c5f395f4d8dce1d122bb30619aeef32 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:34:00 +0100
Subject: [PATCH] Fix broken chips on timelin eActivity on show pages (#9057)

We were using RecordIndexContext in FieldDisplays components which is
wrong as the FieldDisplays could be used in locations not providing this
context (not being indexes pages).

Instead, we are passing it within FieldContext which the context that
will always be there for FieldDisplays and we need indexes to fill this
FieldContext with their RecordIndexContext value when needed
---
 .../src/modules/object-record/hooks/useFieldContext.tsx  | 8 --------
 .../record-board-card/components/RecordBoardCard.tsx     | 3 +++
 .../object-record/record-field/contexts/FieldContext.ts  | 2 +-
 .../meta-types/display/components/ChipFieldDisplay.tsx   | 9 +++++++--
 .../perf/RelationFromManyFieldDisplay.perf.stories.tsx   | 1 -
 .../record-field/meta-types/hooks/useChipFieldDisplay.ts | 3 ++-
 .../record-index/components/RecordIndexRecordChip.tsx    | 6 +++---
 .../__stories__/RecordDetailRelationSection.stories.tsx  | 1 -
 .../__stories__/perf/RecordTableCell.perf.stories.tsx    | 1 -
 .../components/RecordTableCellFieldContextWrapper.tsx    | 7 +++++--
 .../src/testing/decorators/getFieldDecorator.tsx         | 1 -
 .../src/testing/hooks/useMockFieldContext.tsx            | 8 --------
 12 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/hooks/useFieldContext.tsx b/packages/twenty-front/src/modules/object-record/hooks/useFieldContext.tsx
index 659986868..4c14e9f17 100644
--- a/packages/twenty-front/src/modules/object-record/hooks/useFieldContext.tsx
+++ b/packages/twenty-front/src/modules/object-record/hooks/useFieldContext.tsx
@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
-import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import {
   FieldContext,
@@ -34,10 +33,6 @@ export const useFieldContext = ({
     objectNameSingular,
   });
 
-  const basePathToShowPage = getBasePathToShowPage({
-    objectNameSingular,
-  });
-
   const fieldMetadataItem = objectMetadataItem?.fields.find(
     (field) => field.name === fieldMetadataName,
   );
@@ -63,9 +58,6 @@ export const useFieldContext = ({
           <FieldContext.Provider
             key={objectRecordId + fieldMetadataItem.id}
             value={{
-              basePathToShowPage: isLabelIdentifier
-                ? basePathToShowPage
-                : undefined,
               recordId: objectRecordId,
               recoilScopeId: objectRecordId + fieldMetadataItem.id,
               isLabelIdentifier,
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
index 67968652f..5e7e27713 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
@@ -15,6 +15,7 @@ import {
 } from '@/object-record/record-field/contexts/FieldContext';
 import { getFieldButtonIcon } from '@/object-record/record-field/utils/getFieldButtonIcon';
 import { RecordIdentifierChip } from '@/object-record/record-index/components/RecordIndexRecordChip';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
 import { RecordInlineCellEditMode } from '@/object-record/record-inline-cell/components/RecordInlineCellEditMode';
 import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
@@ -187,6 +188,7 @@ export const RecordBoardCard = ({
     );
 
   const record = useRecoilValue(recordStoreFamilyState(recordId));
+  const { indexIdentifierUrl } = useRecordIndexContextOrThrow();
 
   const recordBoardId = useAvailableScopeIdOrThrow(
     RecordBoardScopeInternalContext,
@@ -308,6 +310,7 @@ export const RecordBoardCard = ({
                 record={record as ObjectRecord}
                 variant={AvatarChipVariant.Transparent}
                 maxWidth={150}
+                to={indexIdentifierUrl(recordId)}
               />
             )}
 
diff --git a/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts b/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts
index e5b31be1c..85aedd618 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts
@@ -26,7 +26,7 @@ export type GenericFieldContextType = {
   recoilScopeId?: string;
   hotkeyScope: string;
   isLabelIdentifier: boolean;
-  basePathToShowPage?: string;
+  labelIdentifierLink?: string;
   clearable?: boolean;
   maxWidth?: number;
   isCentered?: boolean;
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx
index 851460f5d..d43dc8f6b 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx
@@ -4,8 +4,12 @@ import { RecordIdentifierChip } from '@/object-record/record-index/components/Re
 import { ChipSize } from 'twenty-ui';
 
 export const ChipFieldDisplay = () => {
-  const { recordValue, objectNameSingular, isLabelIdentifier } =
-    useChipFieldDisplay();
+  const {
+    recordValue,
+    objectNameSingular,
+    isLabelIdentifier,
+    labelIdentifierLink,
+  } = useChipFieldDisplay();
 
   if (!recordValue) {
     return null;
@@ -16,6 +20,7 @@ export const ChipFieldDisplay = () => {
       objectNameSingular={objectNameSingular}
       record={recordValue}
       size={ChipSize.Small}
+      to={labelIdentifierLink}
     />
   ) : (
     <RecordChip objectNameSingular={objectNameSingular} record={recordValue} />
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx
index 2c6b1977a..270b36a1a 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx
@@ -65,7 +65,6 @@ const meta: Meta = {
         <FieldContext.Provider
           value={{
             recordId: relationFromManyFieldDisplayMock.recordId,
-            basePathToShowPage: '/object-record/',
             isLabelIdentifier: false,
             fieldDefinition: {
               ...relationFromManyFieldDisplayMock.fieldDefinition,
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts
index 6569e987c..e9b10179e 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts
@@ -12,7 +12,7 @@ import { isFieldActor } from '@/object-record/record-field/types/guards/isFieldA
 import { FieldContext } from '../../contexts/FieldContext';
 
 export const useChipFieldDisplay = () => {
-  const { recordId, fieldDefinition, isLabelIdentifier } =
+  const { recordId, fieldDefinition, isLabelIdentifier, labelIdentifierLink } =
     useContext(FieldContext);
 
   const { chipGeneratorPerObjectPerField } = useContext(
@@ -41,5 +41,6 @@ export const useChipFieldDisplay = () => {
     objectNameSingular,
     recordValue,
     isLabelIdentifier,
+    labelIdentifierLink,
   };
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx
index c2fe3344e..e0ffd86d9 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx
@@ -1,6 +1,5 @@
 import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
 import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
-import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { AvatarChip, AvatarChipVariant, ChipSize } from 'twenty-ui';
 
@@ -9,6 +8,7 @@ export type RecordIdentifierChipProps = {
   record: ObjectRecord;
   variant?: AvatarChipVariant;
   size?: ChipSize;
+  to?: string;
   maxWidth?: number;
 };
 
@@ -17,9 +17,9 @@ export const RecordIdentifierChip = ({
   record,
   variant,
   size,
+  to,
   maxWidth,
 }: RecordIdentifierChipProps) => {
-  const { indexIdentifierUrl } = useRecordIndexContextOrThrow();
   const { recordChipData } = useRecordChipData({
     objectNameSingular,
     record,
@@ -33,7 +33,7 @@ export const RecordIdentifierChip = ({
       name={recordChipData.name}
       avatarType={recordChipData.avatarType}
       avatarUrl={recordChipData.avatarUrl ?? ''}
-      to={indexIdentifierUrl ? indexIdentifierUrl(record.id) : undefined}
+      to={to}
       variant={variant}
       LeftIcon={LeftIcon}
       LeftIconColor={LeftIconColor}
diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailRelationSection.stories.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailRelationSection.stories.tsx
index aca53588e..929d9db39 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailRelationSection.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailRelationSection.stories.tsx
@@ -35,7 +35,6 @@ const meta: Meta<typeof RecordDetailRelationSection> = {
       <FieldContext.Provider
         value={{
           recordId: companiesMock[0].id,
-          basePathToShowPage: '/object-record/',
           isLabelIdentifier: false,
           fieldDefinition: formatFieldMetadataItemAsFieldDefinition({
             field: mockedCompanyObjectMetadataItem.fields.find(
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx
index acbff482d..9c9e9567d 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx
@@ -122,7 +122,6 @@ const meta: Meta = {
                       <FieldContext.Provider
                         value={{
                           recordId: mockPerformance.recordId,
-                          basePathToShowPage: '/object-record/',
                           isLabelIdentifier: false,
                           fieldDefinition: {
                             ...mockPerformance.fieldDefinition,
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx
index 9fad3b90d..85dc17ab5 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx
@@ -4,6 +4,7 @@ import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifie
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
 import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordUpdateContext } from '@/object-record/record-table/contexts/EntityUpdateMutationHookContext';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
@@ -20,9 +21,11 @@ export const RecordTableCellFieldContextWrapper = ({
 }) => {
   const { objectMetadataItem } = useRecordTableContextOrThrow();
 
+  const { indexIdentifierUrl } = useRecordIndexContextOrThrow();
+
   const { columnDefinition } = useContext(RecordTableCellContext);
 
-  const { recordId, pathToShowPage } = useRecordTableRowContextOrThrow();
+  const { recordId } = useRecordTableRowContextOrThrow();
 
   const updateRecord = useContext(RecordUpdateContext);
 
@@ -44,7 +47,7 @@ export const RecordTableCellFieldContextWrapper = ({
         fieldDefinition: columnDefinition,
         useUpdateRecord: () => [updateRecord, {}],
         hotkeyScope: customHotkeyScope,
-        basePathToShowPage: pathToShowPage,
+        labelIdentifierLink: indexIdentifierUrl(recordId),
         isLabelIdentifier: isLabelIdentifierField({
           fieldMetadataItem: {
             id: columnDefinition.fieldMetadataId,
diff --git a/packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx b/packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx
index e61885ed9..ee2906b3b 100644
--- a/packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx
+++ b/packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx
@@ -128,7 +128,6 @@ export const getFieldDecorator =
         <FieldContext.Provider
           value={{
             recordId: record.id,
-            basePathToShowPage: '/object-record/',
             isLabelIdentifier,
             fieldDefinition: formatFieldMetadataItemAsColumnDefinition({
               field: fieldMetadataItem,
diff --git a/packages/twenty-front/src/testing/hooks/useMockFieldContext.tsx b/packages/twenty-front/src/testing/hooks/useMockFieldContext.tsx
index 6222861d1..dbf606fa5 100644
--- a/packages/twenty-front/src/testing/hooks/useMockFieldContext.tsx
+++ b/packages/twenty-front/src/testing/hooks/useMockFieldContext.tsx
@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
-import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage';
 import {
   FieldContext,
   RecordUpdateHook,
@@ -30,10 +29,6 @@ export const useMockFieldContext = ({
     objectNameSingular,
   });
 
-  const basePathToShowPage = getBasePathToShowPage({
-    objectNameSingular,
-  });
-
   const fieldMetadataItem = objectMetadataItem?.fields.find(
     (field) => field.name === fieldMetadataName,
   );
@@ -50,9 +45,6 @@ export const useMockFieldContext = ({
           <FieldContext.Provider
             key={objectRecordId + fieldMetadataItem.id}
             value={{
-              basePathToShowPage: isLabelIdentifier
-                ? basePathToShowPage
-                : undefined,
               recordId: objectRecordId,
               recoilScopeId: objectRecordId + fieldMetadataItem.id,
               isLabelIdentifier,