feat: add New Field Step 2 form (#2138)

Closes #2001

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -1,10 +1,13 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsObjectFieldFormSection } from '@/settings/data-model/components/SettingsObjectFieldFormSection';
+import { SettingsObjectFieldTypeSelectSection } from '@/settings/data-model/components/SettingsObjectFieldTypeSelectSection';
 import { activeObjectItems } from '@/settings/data-model/constants/mockObjects';
+import { ObjectFieldDataType } from '@/settings/data-model/types/ObjectFieldDataType';
 import { AppPath } from '@/types/AppPath';
 import { IconSettings } from '@/ui/display/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
@@ -21,6 +24,16 @@ export const SettingsObjectNewFieldStep2 = () => {
     if (!activeObject) navigate(AppPath.NotFound);
   }, [activeObject, navigate]);
 
+  const [formValues, setFormValues] = useState<
+    Partial<{
+      iconKey: string;
+      name: string;
+      description: string;
+    }> & { type: ObjectFieldDataType }
+  >({ type: 'number' });
+
+  const canSave = !!formValues.name;
+
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
@@ -36,13 +49,30 @@ export const SettingsObjectNewFieldStep2 = () => {
             ]}
           />
           <SaveAndCancelButtons
-            isSaveDisabled
+            isSaveDisabled={!canSave}
             onCancel={() => {
               navigate('/settings/objects');
             }}
-            onSave={() => {}}
+            onSave={() => undefined}
           />
         </SettingsHeaderContainer>
+        <SettingsObjectFieldFormSection
+          iconKey={formValues.iconKey}
+          name={formValues.name}
+          description={formValues.description}
+          onChange={(values) =>
+            setFormValues((previousValues) => ({
+              ...previousValues,
+              ...values,
+            }))
+          }
+        />
+        <SettingsObjectFieldTypeSelectSection
+          type={formValues.type}
+          onChange={(type) =>
+            setFormValues((previousValues) => ({ ...previousValues, type }))
+          }
+        />
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );