houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 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
packages/twenty-front/src/modules/object-record/hooks/useFieldContext.tsx
-8
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,
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
+3
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)}
/>
)}
packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts
+1 -1
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;
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx
+7 -2
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} />
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/RelationFromManyFieldDisplay.perf.stories.tsx
-1
View File
@@ -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
+2 -1
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,
};
};
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx
+3 -3
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}
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/__stories__/RecordDetailRelationSection.stories.tsx
-1
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(
packages/twenty-front/src/modules/object-record/record-table/components/__stories__/perf/RecordTableCell.perf.stories.tsx
-1
View File
@@ -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
+5 -2
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,
packages/twenty-front/src/testing/decorators/getFieldDecorator.tsx
-1
View File
@@ -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
-8
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,