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
twentyhq · Dec 13, 2024 · 57869d3 · 57869d3
1 parent 257834e
commit 57869d3
Show file tree

Hide file tree

Showing 12 changed files with 21 additions and 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
@@ -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/...t/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/...t/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
@@ -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/...src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx b/...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/...a-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx b/...a-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/...enty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts b/...enty-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/.../twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx b/.../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/...show/record-detail-section/components/__stories__/RecordDetailRelationSection.stories.tsx b/...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/...s/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx b/...s/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/...t-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx b/...t-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
@@ -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
@@ -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,