feat: create custom object field (#2225)

Closes #2171

front/src/pages/settings/data-model/SettingsNewObject.tsx

@@ -26,10 +26,10 @@ export const SettingsNewObject = () => {
 
   const [customFormValues, setCustomFormValues] = useState<{
     description?: string;
-    icon?: string;
+    icon: string;
     labelPlural: string;
     labelSingular: string;
-  }>({ labelPlural: '', labelSingular: '' });
+  }>({ icon: 'IconPigMoney', labelPlural: '', labelSingular: '' });
 
   const canSave =
     selectedObjectType === 'Custom' &&

front/src/pages/settings/data-model/SettingsObjectDetail.tsx

@@ -75,7 +75,7 @@ export const SettingsObjectDetail = () => {
         <Section>
           <H2Title
             title="Fields"
-            description={`Customise the fields available in the ${activeObject?.nameSingular} views and their display order in the ${activeObject?.nameSingular} detail view and menus.`}
+            description={`Customise the fields available in the ${activeObject?.labelSingular} views and their display order in the ${activeObject?.labelSingular} detail view and menus.`}
           />
           <Table>
             <StyledObjectFieldTableRow>

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

@@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import { useFieldMetadata } from '@/metadata/hooks/useFieldMetadata';
+import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
 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';
@@ -16,23 +17,30 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 export const SettingsObjectNewFieldStep2 = () => {
   const navigate = useNavigate();
   const { objectSlug = '' } = useParams();
-  const activeObject = activeObjectItems.find(
-    (activeObject) => activeObject.name.toLowerCase() === objectSlug,
-  );
+  const { findActiveObjectBySlug } = useObjectMetadata();
+  const activeObject = findActiveObjectBySlug(objectSlug);
+  const { createField } = useFieldMetadata();
 
   useEffect(() => {
     if (!activeObject) navigate(AppPath.NotFound);
   }, [activeObject, navigate]);
 
-  const [formValues, setFormValues] = useState<
-    Partial<{
-      iconKey: string;
-      name: string;
-      description: string;
-    }> & { type: ObjectFieldDataType }
-  >({ type: 'number' });
+  const [formValues, setFormValues] = useState<{
+    description?: string;
+    icon: string;
+    label: string;
+    type: ObjectFieldDataType;
+  }>({ icon: 'IconUsers', label: '', type: 'number' });
 
-  const canSave = !!formValues.name;
+  const canSave = !!formValues.label;
+
+  const handleSave = async () => {
+    if (!activeObject) return;
+
+    await createField({ ...formValues, objectId: activeObject.id });
+
+    navigate(`/settings/objects/${objectSlug}`);
+  };
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@@ -42,7 +50,7 @@ export const SettingsObjectNewFieldStep2 = () => {
             links={[
               { children: 'Objects', href: '/settings/objects' },
               {
-                children: activeObject?.name ?? '',
+                children: activeObject?.labelPlural ?? '',
                 href: `/settings/objects/${objectSlug}`,
               },
               { children: 'New Field' },
@@ -51,14 +59,14 @@ export const SettingsObjectNewFieldStep2 = () => {
           <SaveAndCancelButtons
             isSaveDisabled={!canSave}
             onCancel={() => {
-              navigate('/settings/objects');
+              navigate(`/settings/objects/${objectSlug}`);
             }}
-            onSave={() => undefined}
+            onSave={handleSave}
           />
         </SettingsHeaderContainer>
         <SettingsObjectFieldFormSection
-          iconKey={formValues.iconKey}
-          name={formValues.name}
+          iconKey={formValues.icon}
+          name={formValues.label}
           description={formValues.description}
           onChange={(values) =>
             setFormValues((previousValues) => ({