admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix broken chips on timelin eActivity on show pages (#9057)

Browse Source 
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
This commit is contained in:
Charles Bochet
2024-12-13 15:34:00 +01:00
committed by GitHub
parent 257834ea71
commit 57869d3c8c
12 changed files with 21 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/object-record/hooks/useFieldContext.tsx
View File

@ -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,

3
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
View File

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

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

@ -26,7 +26,7 @@ export type GenericFieldContextType = {
recoilScopeId?: string;
hotkeyScope: string;
isLabelIdentifier: boolean;
basePathToShowPage?: string;
labelIdentifierLink?: string;
clearable?: boolean;
maxWidth?: number;
isCentered?: boolean;

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

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

1
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx
View File

@ -65,7 +65,6 @@ const meta: Meta = {
<FieldContext.Provider
value={{
recordId: relationFromManyFieldDisplayMock.recordId,
basePathToShowPage: '/object-record/',
isLabelIdentifier: false,
fieldDefinition: {
...relationFromManyFieldDisplayMock.fieldDefinition,

3
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts
View File

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

6
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx
View File

@ -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}

1
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailRelationSection.stories.tsx
View File

@ -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(

1
packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx
View File

@ -122,7 +122,6 @@ const meta: Meta = {
<FieldContext.Provider
value={{
recordId: mockPerformance.recordId,
basePathToShowPage: '/object-record/',
isLabelIdentifier: false,
fieldDefinition: {
...mockPerformance.fieldDefinition,

7
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx
View File

@ -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,

1
packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx
View File

@ -128,7 +128,6 @@ export const getFieldDecorator =
<FieldContext.Provider
value={{
recordId: record.id,
basePathToShowPage: '/object-record/',
isLabelIdentifier,
fieldDefinition: formatFieldMetadataItemAsColumnDefinition({
field: fieldMetadataItem,

8
packages/twenty-front/src/testing/hooks/useMockFieldContext.tsx
View File

@ -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,