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,
+});

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<SettingsDataModelObjectIdentifiersFormValues>();
@@ -58,7 +60,6 @@ export const SettingsDataModelObjectIdentifiersForm = ({
     label: 'None',
     value: null,
   };
-
   return (
     <StyledContainer>
       {[
@@ -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 (
               <Select

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx

@@ -1,6 +1,6 @@
+import styled from '@emotion/styled';
 import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
-import styled from '@emotion/styled';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
@@ -78,6 +78,9 @@ export const SettingsDataModelObjectSettingsFormCard = ({
       <CardContent>
         <SettingsDataModelObjectIdentifiersForm
           objectMetadataItem={objectMetadataItem}
+          defaultLabelIdentifierFieldMetadataId={
+            labelIdentifierFieldMetadataItem?.id
+          }
         />
       </CardContent>
     </Card>

packages/twenty-front/src/modules/ui/input/components/Select.tsx

@@ -1,6 +1,6 @@
-import { useMemo, useRef, useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useMemo, useRef, useState } from 'react';
 import { IconChevronDown, IconComponent } from 'twenty-ui';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';