Added RecordValue use-context-selector to settings field's logic (#5851)

In the settings part of the app, where display fields are used as in
table cell and board cards, we didn't have the new context selector
logic implemented, due to the recent performance optimization.

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

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
 
+import { useSetRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 
 type SettingsDataModelSetFieldValueEffectProps = {
@@ -21,9 +22,12 @@ export const SettingsDataModelSetFieldValueEffect = ({
     }),
   );
 
+  const setRecordFieldValue = useSetRecordFieldValue();
+
   useEffect(() => {
     setFieldValue(value);
-  }, [value, setFieldValue]);
+    setRecordFieldValue(entityId, fieldName, value);
+  }, [value, setFieldValue, setRecordFieldValue, entityId, fieldName]);
 
   return null;
 };

packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx

@@ -18,6 +18,7 @@ import { formatFieldMetadataItemInput } from '@/object-metadata/utils/formatFiel
 import { getFieldSlug } from '@/object-metadata/utils/getFieldSlug';
 import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
 import { useFindManyRecordsQuery } from '@/object-record/hooks/useFindManyRecordsQuery';
+import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@@ -169,70 +170,72 @@ export const SettingsObjectFieldEdit = () => {
     canPersistFieldMetadataItemUpdate(activeMetadataField);
 
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <FormProvider {...formConfig}>
-      <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-        <SettingsPageContainer>
-          <SettingsHeaderContainer>
-            <Breadcrumb
-              links={[
-                { children: 'Objects', href: '/settings/objects' },
-                {
-                  children: activeObjectMetadataItem.labelPlural,
-                  href: `/settings/objects/${objectSlug}`,
-                },
-                { children: activeMetadataField.label },
-              ]}
-            />
-            {shouldDisplaySaveAndCancel && (
-              <SaveAndCancelButtons
-                isSaveDisabled={!canSave}
-                onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
-                onSave={formConfig.handleSubmit(handleSave)}
+    <RecordFieldValueSelectorContextProvider>
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <FormProvider {...formConfig}>
+        <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+          <SettingsPageContainer>
+            <SettingsHeaderContainer>
+              <Breadcrumb
+                links={[
+                  { children: 'Objects', href: '/settings/objects' },
+                  {
+                    children: activeObjectMetadataItem.labelPlural,
+                    href: `/settings/objects/${objectSlug}`,
+                  },
+                  { children: activeMetadataField.label },
+                ]}
               />
-            )}
-          </SettingsHeaderContainer>
-          <Section>
-            <H2Title
-              title="Name and description"
-              description="The name and description of this field"
-            />
-            <SettingsDataModelFieldAboutForm
-              disabled={!activeMetadataField.isCustom}
-              fieldMetadataItem={activeMetadataField}
-            />
-          </Section>
-          <Section>
-            <H2Title
-              title="Type and values"
-              description="The field's type and values."
-            />
-            <StyledSettingsObjectFieldTypeSelect
-              disabled
-              fieldMetadataItem={activeMetadataField}
-            />
-            <SettingsDataModelFieldSettingsFormCard
-              disableCurrencyForm
-              fieldMetadataItem={activeMetadataField}
-              objectMetadataItem={activeObjectMetadataItem}
-            />
-          </Section>
-          {!isLabelIdentifier && (
+              {shouldDisplaySaveAndCancel && (
+                <SaveAndCancelButtons
+                  isSaveDisabled={!canSave}
+                  onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
+                  onSave={formConfig.handleSubmit(handleSave)}
+                />
+              )}
+            </SettingsHeaderContainer>
             <Section>
               <H2Title
-                title="Danger zone"
-                description="Deactivate this field"
+                title="Name and description"
+                description="The name and description of this field"
               />
-              <Button
-                Icon={IconArchive}
-                title="Deactivate"
-                size="small"
-                onClick={handleDeactivate}
+              <SettingsDataModelFieldAboutForm
+                disabled={!activeMetadataField.isCustom}
+                fieldMetadataItem={activeMetadataField}
               />
             </Section>
-          )}
-        </SettingsPageContainer>
-      </SubMenuTopBarContainer>
-    </FormProvider>
+            <Section>
+              <H2Title
+                title="Type and values"
+                description="The field's type and values."
+              />
+              <StyledSettingsObjectFieldTypeSelect
+                disabled
+                fieldMetadataItem={activeMetadataField}
+              />
+              <SettingsDataModelFieldSettingsFormCard
+                disableCurrencyForm
+                fieldMetadataItem={activeMetadataField}
+                objectMetadataItem={activeObjectMetadataItem}
+              />
+            </Section>
+            {!isLabelIdentifier && (
+              <Section>
+                <H2Title
+                  title="Danger zone"
+                  description="Deactivate this field"
+                />
+                <Button
+                  Icon={IconArchive}
+                  title="Deactivate"
+                  size="small"
+                  onClick={handleDeactivate}
+                />
+              </Section>
+            )}
+          </SettingsPageContainer>
+        </SubMenuTopBarContainer>
+      </FormProvider>
+    </RecordFieldValueSelectorContextProvider>
   );
 };

packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx

@@ -13,6 +13,7 @@ import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataIt
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@@ -172,55 +173,57 @@ export const SettingsObjectNewFieldStep2 = () => {
   ).filter(isDefined);
 
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <FormProvider {...formConfig}>
-      <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-        <SettingsPageContainer>
-          <SettingsHeaderContainer>
-            <Breadcrumb
-              links={[
-                { children: 'Objects', href: '/settings/objects' },
-                {
-                  children: activeObjectMetadataItem.labelPlural,
-                  href: `/settings/objects/${objectSlug}`,
-                },
-                { children: 'New Field' },
-              ]}
-            />
-            {!activeObjectMetadataItem.isRemote && (
-              <SaveAndCancelButtons
-                isSaveDisabled={!canSave}
-                onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
-                onSave={formConfig.handleSubmit(handleSave)}
+    <RecordFieldValueSelectorContextProvider>
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <FormProvider {...formConfig}>
+        <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+          <SettingsPageContainer>
+            <SettingsHeaderContainer>
+              <Breadcrumb
+                links={[
+                  { children: 'Objects', href: '/settings/objects' },
+                  {
+                    children: activeObjectMetadataItem.labelPlural,
+                    href: `/settings/objects/${objectSlug}`,
+                  },
+                  { children: 'New Field' },
+                ]}
               />
-            )}
-          </SettingsHeaderContainer>
-          <Section>
-            <H2Title
-              title="Name and description"
-              description="The name and description of this field"
-            />
-            <SettingsDataModelFieldAboutForm />
-          </Section>
-          <Section>
-            <H2Title
-              title="Type and values"
-              description="The field's type and values."
-            />
-            <StyledSettingsObjectFieldTypeSelect
-              excludedFieldTypes={excludedFieldTypes}
-            />
-            <SettingsDataModelFieldSettingsFormCard
-              fieldMetadataItem={{
-                icon: formConfig.watch('icon'),
-                label: formConfig.watch('label') || 'Employees',
-                type: formConfig.watch('type'),
-              }}
-              objectMetadataItem={activeObjectMetadataItem}
-            />
-          </Section>
-        </SettingsPageContainer>
-      </SubMenuTopBarContainer>
-    </FormProvider>
+              {!activeObjectMetadataItem.isRemote && (
+                <SaveAndCancelButtons
+                  isSaveDisabled={!canSave}
+                  onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
+                  onSave={formConfig.handleSubmit(handleSave)}
+                />
+              )}
+            </SettingsHeaderContainer>
+            <Section>
+              <H2Title
+                title="Name and description"
+                description="The name and description of this field"
+              />
+              <SettingsDataModelFieldAboutForm />
+            </Section>
+            <Section>
+              <H2Title
+                title="Type and values"
+                description="The field's type and values."
+              />
+              <StyledSettingsObjectFieldTypeSelect
+                excludedFieldTypes={excludedFieldTypes}
+              />
+              <SettingsDataModelFieldSettingsFormCard
+                fieldMetadataItem={{
+                  icon: formConfig.watch('icon'),
+                  label: formConfig.watch('label') || 'Employees',
+                  type: formConfig.watch('type'),
+                }}
+                objectMetadataItem={activeObjectMetadataItem}
+              />
+            </Section>
+          </SettingsPageContainer>
+        </SubMenuTopBarContainer>
+      </FormProvider>
+    </RecordFieldValueSelectorContextProvider>
   );
 };