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 dcffc95b6..31b78cd0d 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
@@ -96,7 +96,10 @@ export const SettingsDataModelFieldPreview = ({
return (
<>
{previewRecord ? (
-
+
) : (
{
+ const previewRecordId = useRecoilValue(previewRecordIdState);
+
+ const upsertedPreviewRecord = useRecoilValue(
+ recordStoreFamilyState(previewRecordId ?? ''),
+ );
+
const setFieldValue = useSetRecoilState(
recordStoreFamilySelector({
recordId,
fieldName,
}),
);
-
const setRecordFieldValue = useSetRecordFieldValue();
useEffect(() => {
- setFieldValue(value);
- setRecordFieldValue(recordId, fieldName, value);
- }, [value, setFieldValue, setRecordFieldValue, recordId, fieldName]);
+ if (
+ isDefined(upsertedPreviewRecord) &&
+ !!upsertedPreviewRecord[fieldName]
+ ) {
+ setFieldValue(upsertedPreviewRecord[fieldName]);
+ setRecordFieldValue(
+ recordId,
+ fieldName,
+ upsertedPreviewRecord[fieldName],
+ );
+ } else {
+ setFieldValue(value);
+ setRecordFieldValue(recordId, fieldName, value);
+ }
+ }, [
+ value,
+ setFieldValue,
+ setRecordFieldValue,
+ recordId,
+ fieldName,
+ upsertedPreviewRecord,
+ ]);
return null;
};
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect.tsx
index 7ef2d28c7..e5ceaf22f 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect.tsx
@@ -1,20 +1,35 @@
-import { useEffect } from 'react';
-
+import { useSetRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { previewRecordIdState } from '@/settings/data-model/fields/preview/states/previewRecordIdState';
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
type SettingsDataModelSetRecordEffectProps = {
record: ObjectRecord;
+ fieldName: string;
};
export const SettingsDataModelSetRecordEffect = ({
record,
+ fieldName,
}: SettingsDataModelSetRecordEffectProps) => {
const { upsertRecords: upsertRecordsInStore } = useUpsertRecordsInStore();
+ const setRecordFieldValue = useSetRecordFieldValue();
+
+ const setPreviewRecordId = useSetRecoilState(previewRecordIdState);
useEffect(() => {
upsertRecordsInStore([record]);
- }, [record, upsertRecordsInStore]);
+ setRecordFieldValue(record.id, fieldName, record[fieldName]);
+ setPreviewRecordId(record.id);
+ }, [
+ record,
+ upsertRecordsInStore,
+ setRecordFieldValue,
+ fieldName,
+ setPreviewRecordId,
+ ]);
return null;
};
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/previewRecordIdState.ts b/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/previewRecordIdState.ts
new file mode 100644
index 000000000..3d37a853a
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/previewRecordIdState.ts
@@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui';
+
+export const previewRecordIdState = createState({
+ key: 'previewRecordId',
+ defaultValue: null,
+});
diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx
index 5a7b7cb1f..29f5512e5 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx
@@ -1,7 +1,7 @@
+import styled from '@emotion/styled';
import { useMemo } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
-import styled from '@emotion/styled';
-import { IconCircleOff, useIcons } from 'twenty-ui';
+import { IconCircleOff, isDefined, useIcons } from 'twenty-ui';
import { z } from 'zod';
import { LABEL_IDENTIFIER_FIELD_METADATA_TYPES } from '@/object-metadata/constants/LabelIdentifierFieldMetadataTypes';
@@ -22,6 +22,7 @@ export type SettingsDataModelObjectIdentifiersFormValues = z.infer<
type SettingsDataModelObjectIdentifiersFormProps = {
objectMetadataItem: ObjectMetadataItem;
+ defaultLabelIdentifierFieldMetadataId: string;
};
const StyledContainer = styled.div`
@@ -31,6 +32,7 @@ const StyledContainer = styled.div`
export const SettingsDataModelObjectIdentifiersForm = ({
objectMetadataItem,
+ defaultLabelIdentifierFieldMetadataId,
}: SettingsDataModelObjectIdentifiersFormProps) => {
const { control } =
useFormContext();
@@ -58,7 +60,6 @@ export const SettingsDataModelObjectIdentifiersForm = ({
label: 'None',
value: null,
};
-
return (
{[
@@ -77,7 +78,13 @@ export const SettingsDataModelObjectIdentifiersForm = ({
key={fieldName}
name={fieldName}
control={control}
- defaultValue={objectMetadataItem[fieldName]}
+ defaultValue={
+ fieldName === 'labelIdentifierFieldMetadataId'
+ ? isDefined(objectMetadataItem[fieldName])
+ ? objectMetadataItem[fieldName]
+ : defaultLabelIdentifierFieldMetadataId
+ : objectMetadataItem[fieldName]
+ }
render={({ field: { onBlur, onChange, value } }) => {
return (