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

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,

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)}
               />
             )}
 

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;

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 } =
+  const {
-    useChipFieldDisplay();
+    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} />

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,

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,
   };
 };

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}

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(

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,

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,

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,

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,