From e84176dc0d027d0a1b4c1a5c998dfe4c130db8fa Mon Sep 17 00:00:00 2001
From: Mantey <nanakofilarbimantey@gmail.com>
Date: Thu, 19 Dec 2024 10:22:13 +0000
Subject: [PATCH] Reactive form preview (#8663)

## Description

This PR fixes issues with field previews not updating immediately when
settings are changed in the Data Model Editor. The changes affect number
field types, ensuring that the preview updates in real-time as settings
are modified.

### Fixed Issues
- Number field preview not updating when changing decimals or number
type (e.g., percentage)

Recording

https://www.loom.com/share/14a30f67266d4a08a694c759ae06b0f3?sid=c0de35ef-9982-438b-b822-94ed106f6891

~~Fixes #8663~~
Fixes #8556

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../SettingsDataModelFieldSettingsFormCard.tsx       |  2 +-
 .../SettingsDataModelFieldTextSettingsFormCard.tsx   |  8 +++++++-
 .../SettingsDataModelFieldNumberSettingsFormCard.tsx | 12 ++++++++++--
 .../SettingsObjectNewFieldConfigure.tsx              |  1 +
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx
index f0d7f4bdc8..f475ce1b76 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx
@@ -117,7 +117,7 @@ export const settingsDataModelFieldSettingsFormSchema = z.discriminatedUnion(
 type SettingsDataModelFieldSettingsFormCardProps = {
   fieldMetadataItem: Pick<
     FieldMetadataItem,
-    'icon' | 'label' | 'type' | 'isCustom'
+    'icon' | 'label' | 'type' | 'isCustom' | 'settings'
   > &
     Partial<Omit<FieldMetadataItem, 'icon' | 'label' | 'type'>>;
 } & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextSettingsFormCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextSettingsFormCard.tsx
index 7dea460046..1f3c4f3951 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextSettingsFormCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextSettingsFormCard.tsx
@@ -8,6 +8,7 @@ import {
   SettingsDataModelFieldPreviewCard,
   SettingsDataModelFieldPreviewCardProps,
 } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
+import { useFormContext } from 'react-hook-form';
 
 type SettingsDataModelFieldTextSettingsFormCardProps = {
   disabled?: boolean;
@@ -26,11 +27,16 @@ export const SettingsDataModelFieldTextSettingsFormCard = ({
   fieldMetadataItem,
   objectMetadataItem,
 }: SettingsDataModelFieldTextSettingsFormCardProps) => {
+  const { watch } = useFormContext();
+
   return (
     <SettingsDataModelPreviewFormCard
       preview={
         <StyledFieldPreviewCard
-          fieldMetadataItem={fieldMetadataItem}
+          fieldMetadataItem={{
+            ...fieldMetadataItem,
+            settings: watch('settings'),
+          }}
           objectMetadataItem={objectMetadataItem}
         />
       }
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberSettingsFormCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberSettingsFormCard.tsx
index edea86760f..3a0ef61a3c 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberSettingsFormCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberSettingsFormCard.tsx
@@ -7,12 +7,13 @@ import {
   SettingsDataModelFieldPreviewCard,
   SettingsDataModelFieldPreviewCardProps,
 } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
+import { useFormContext } from 'react-hook-form';
 
 type SettingsDataModelFieldNumberSettingsFormCardProps = {
   disabled?: boolean;
   fieldMetadataItem: Pick<
     FieldMetadataItem,
-    'icon' | 'label' | 'type' | 'defaultValue'
+    'icon' | 'label' | 'type' | 'defaultValue' | 'settings'
   >;
 } & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
 
@@ -26,11 +27,18 @@ export const SettingsDataModelFieldNumberSettingsFormCard = ({
   fieldMetadataItem,
   objectMetadataItem,
 }: SettingsDataModelFieldNumberSettingsFormCardProps) => {
+  const { watch } = useFormContext();
+
   return (
     <SettingsDataModelPreviewFormCard
       preview={
         <StyledFieldPreviewCard
-          fieldMetadataItem={fieldMetadataItem}
+          fieldMetadataItem={{
+            icon: watch('icon'),
+            label: watch('label') || 'New Field',
+            settings: watch('settings') || null,
+            type: fieldMetadataItem.type,
+          }}
           objectMetadataItem={objectMetadataItem}
         />
       }
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx
index 3f47131204..3ccfb6e15f 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx
@@ -227,6 +227,7 @@ export const SettingsObjectNewFieldConfigure = () => {
                 fieldMetadataItem={{
                   icon: formConfig.watch('icon'),
                   label: formConfig.watch('label') || 'New Field',
+                  settings: formConfig.watch('settings') || null,
                   type: fieldType as FieldMetadataType,
                 }}
                 objectMetadataItem={activeObjectMetadataItem}