Fixes Empty Label Identifer Preview in Settings/DataModel/Object/Edit (#6370)

fixes #6143

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx

@@ -96,7 +96,10 @@ export const SettingsDataModelFieldPreview = ({
   return (
     <>
       {previewRecord ? (
-        <SettingsDataModelSetRecordEffect record={previewRecord} />
+        <SettingsDataModelSetRecordEffect
+          fieldName={fieldName}
+          record={previewRecord}
+        />
       ) : (
         <SettingsDataModelSetFieldValueEffect
           recordId={recordId}

packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelSetFieldValueEffect.tsx

@@ -1,8 +1,10 @@
-import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
-
 import { useSetRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { previewRecordIdState } from '@/settings/data-model/fields/preview/states/previewRecordIdState';
+import { useEffect } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { isDefined } from '~/utils/isDefined';
 
 type SettingsDataModelSetFieldValueEffectProps = {
   recordId: string;
@@ -15,19 +17,43 @@ export const SettingsDataModelSetFieldValueEffect = ({
   fieldName,
   value,
 }: SettingsDataModelSetFieldValueEffectProps) => {
+  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;
 };

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

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<string | null>({
+  key: 'previewRecordId',
+  defaultValue: null,
+});