Fix Data model object setting page not loading (#16308)

Regression introduced by
https://github.com/twentyhq/twenty/pull/16244/files

Why:
- `ChipFieldDisplay` component is using a `recoilComponentState` and
`ContextStoreComponentContext` is not provided on Settings page

This fix
- does not use the componentState in the `ChipFieldDisplay` but in the
RecordIndex area where the `ContextStoreComponentContext` is provided
- this also improve the performance as recoilState access is not free
This commit is contained in:
Charles Bochet
2025-12-04 08:09:38 +01:00
committed by GitHub
parent f1c2ac33b3
commit 38fc14cb3e
4 changed files with 12 additions and 9 deletions
@@ -26,6 +26,7 @@ export type GenericFieldContextType = {
fieldDefinition: FieldDefinition<FieldMetadata>;
useUpdateRecord?: RecordUpdateHook;
isLabelIdentifier: boolean;
isLabelIdentifierCompact?: boolean;
clearable?: boolean;
maxWidth?: number;
isCentered?: boolean;
@@ -1,7 +1,5 @@
import { RecordChip } from '@/object-record/components/RecordChip';
import { useChipFieldDisplay } from '@/object-record/record-field/ui/meta-types/hooks/useChipFieldDisplay';
import { shouldCompactRecordIndexLabelIdentifierComponentState } from '@/object-record/record-index/states/shouldCompactRecordIndexLabelIdentifierComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { isDefined } from 'twenty-shared/utils';
import { ChipSize } from 'twenty-ui/components';
@@ -14,14 +12,9 @@ export const ChipFieldDisplay = () => {
maxWidth,
triggerEvent,
onRecordChipClick,
isLabelIdentifierCompact,
} = useChipFieldDisplay();
const shouldCompactRecordIndexLabelIdentifier = useRecoilComponentValue(
shouldCompactRecordIndexLabelIdentifierComponentState,
);
const isLabelIdentifierCompact = shouldCompactRecordIndexLabelIdentifier;
if (!isDefined(recordValue)) {
return null;
}
@@ -33,7 +26,7 @@ export const ChipFieldDisplay = () => {
record={recordValue}
size={ChipSize.Small}
to={labelIdentifierLink}
isLabelHidden={isLabelIdentifierCompact}
isLabelHidden={isLabelIdentifierCompact ?? false}
forceDisableClick={disableChipClick}
triggerEvent={triggerEvent}
onClick={onRecordChipClick}
@@ -21,6 +21,7 @@ export const useChipFieldDisplay = () => {
maxWidth,
triggerEvent,
onRecordChipClick,
isLabelIdentifierCompact,
} = useContext(FieldContext);
const { indexIdentifierUrl, labelIdentifierFieldMetadataItem } =
@@ -62,5 +63,6 @@ export const useChipFieldDisplay = () => {
maxWidth,
triggerEvent,
onRecordChipClick,
isLabelIdentifierCompact,
};
};
@@ -2,10 +2,12 @@ import { getObjectPermissionsForObject } from '@/object-metadata/utils/getObject
import { isRecordFieldReadOnly } from '@/object-record/read-only/utils/isRecordFieldReadOnly';
import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { shouldCompactRecordIndexLabelIdentifierComponentState } from '@/object-record/record-index/states/shouldCompactRecordIndexLabelIdentifierComponentState';
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';
import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useContext, type ReactNode } from 'react';
type RecordTableCellFieldContextLabelIdentifierProps = {
@@ -31,6 +33,10 @@ export const RecordTableCellFieldContextLabelIdentifier = ({
objectMetadataItem.id,
);
const shouldCompactRecordIndexLabelIdentifier = useRecoilComponentValue(
shouldCompactRecordIndexLabelIdentifierComponentState,
);
const hasObjectReadPermissions = objectPermissions.canReadObjectRecords;
const updateRecord = useContext(RecordUpdateContext);
@@ -49,6 +55,7 @@ export const RecordTableCellFieldContextLabelIdentifier = ({
fieldDefinition,
useUpdateRecord: () => [updateRecord, {}],
isLabelIdentifier: true,
isLabelIdentifierCompact: shouldCompactRecordIndexLabelIdentifier,
displayedMaxRows: 1,
isRecordFieldReadOnly: isRecordFieldReadOnly({
isRecordReadOnly: isRecordReadOnly ?? false,