diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx index 38e0ca2da7e..624b74d0502 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx @@ -8,7 +8,9 @@ import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldCont import { BooleanFieldInput } from '@/object-record/record-field/ui/meta-types/input/components/BooleanFieldInput'; import { RatingFieldInput } from '@/object-record/record-field/ui/meta-types/input/components/RatingFieldInput'; import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/ui/states/contexts/RecordFieldComponentInstanceContext'; +import { SettingsDataModelLabelIdentifierPreviewContextWrapper } from '@/settings/data-model/fields/preview/components/SettingsDataModelLabelIdentifierPreviewContextWrapper'; import { SettingsDataModelSetFieldValueEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetFieldValueEffect'; +import { SettingsDataModelSetLabelIdentifierRecordEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetLabelIdentifierRecordEffect'; import { useFieldPreviewValue } from '@/settings/data-model/fields/preview/hooks/useFieldPreviewValue'; import { useIcons } from 'twenty-ui/display'; import { FieldMetadataType } from '~/generated-metadata/graphql'; @@ -57,7 +59,7 @@ export const SettingsDataModelFieldPreview = ({ const theme = useTheme(); const { labelIdentifierFieldMetadataItem } = useLabelIdentifierFieldMetadataItem({ - objectNameSingular, + objectNameSingular: objectNameSingular, }); const { getIcon } = useIcons(); @@ -83,56 +85,68 @@ export const SettingsDataModelFieldPreview = ({ return ( <> - - - - {!!withFieldLabel && ( - - - {fieldMetadataItem.label}: - + + {isLabelIdentifier ? ( + + ) : ( + )} - - {fieldMetadataItem.type === FieldMetadataType.BOOLEAN ? ( - - ) : fieldMetadataItem.type === FieldMetadataType.RATING ? ( - - ) : ( - + + {!!withFieldLabel && ( + + + {fieldMetadataItem.label}: + )} - - - + + {fieldMetadataItem.type === FieldMetadataType.BOOLEAN ? ( + + ) : fieldMetadataItem.type === FieldMetadataType.RATING ? ( + + ) : ( + + )} + + + + ); }; diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewWidget.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewWidget.tsx index fd80d6513f1..2d56fe5eb92 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewWidget.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewWidget.tsx @@ -49,7 +49,7 @@ export const SettingsDataModelFieldPreviewWidget = ({ pluralizeLabel={pluralizeLabel} /> { + const { objectMetadataItem } = useObjectMetadataItem({ + objectNameSingular: objectNameSingular, + }); + + return ( + + '', + onIndexRecordsLoaded: () => {}, + objectNamePlural: objectMetadataItem.namePlural, + objectNameSingular: objectMetadataItem.nameSingular, + objectMetadataItem, + objectPermissionsByObjectMetadataId: {}, + recordIndexId: '', + recordFieldByFieldMetadataItemId: {}, + labelIdentifierFieldMetadataItem, + fieldMetadataItemByFieldMetadataItemId: {}, + fieldDefinitionByFieldMetadataItemId: {}, + }} + > + {children} + + + ); +}; diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetLabelIdentifierRecordEffect.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetLabelIdentifierRecordEffect.tsx new file mode 100644 index 00000000000..c62260996ea --- /dev/null +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetLabelIdentifierRecordEffect.tsx @@ -0,0 +1,26 @@ +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; +import { usePreviewRecord } from '@/settings/data-model/fields/preview/hooks/usePreviewRecord'; +import { useEffect } from 'react'; +import { useSetRecoilState } from 'recoil'; + +type SettingsDataModelSetLabelIdentifierRecordEffectProps = { + objectNameSingular: string; + recordId: string; +}; + +export const SettingsDataModelSetLabelIdentifierRecordEffect = ({ + objectNameSingular, + recordId, +}: SettingsDataModelSetLabelIdentifierRecordEffectProps) => { + const recordPreviewForLabelIdentifier = usePreviewRecord({ + objectNameSingular: objectNameSingular, + }); + + const setRecord = useSetRecoilState(recordStoreFamilyState(recordId)); + + useEffect(() => { + setRecord(recordPreviewForLabelIdentifier); + }, [recordPreviewForLabelIdentifier, setRecord, recordId]); + + return null; +};