feat: create custom object and update edited object names (#2220)

Closes #2155, Closes #2153

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

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+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';
@@ -21,19 +22,33 @@ export const SettingsNewObject = () => {
   const [selectedObjectType, setSelectedObjectType] =
     useState<NewObjectType>('Standard');
 
-  const [customFormValues, setCustomFormValues] = useState<
-    Partial<{
-      labelPlural: string;
-      labelSingular: string;
-      description: string;
-    }>
-  >({});
+  const { createObject } = useObjectMetadata();
+
+  const [customFormValues, setCustomFormValues] = useState<{
+    description?: string;
+    icon?: string;
+    labelPlural: string;
+    labelSingular: string;
+  }>({ labelPlural: '', labelSingular: '' });
 
   const canSave =
     selectedObjectType === 'Custom' &&
     !!customFormValues.labelPlural &&
     !!customFormValues.labelSingular;
 
+  const handleSave = async () => {
+    if (selectedObjectType === 'Custom') {
+      await createObject({
+        labelPlural: customFormValues.labelPlural,
+        labelSingular: customFormValues.labelSingular,
+        description: customFormValues.description,
+        icon: customFormValues.icon,
+      });
+    }
+
+    navigate('/settings/objects');
+  };
+
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
@@ -49,7 +64,7 @@ export const SettingsNewObject = () => {
             onCancel={() => {
               navigate('/settings/objects');
             }}
-            onSave={() => undefined}
+            onSave={handleSave}
           />
         </SettingsHeaderContainer>
         <Section>
@@ -64,7 +79,16 @@ export const SettingsNewObject = () => {
         </Section>
         {selectedObjectType === 'Custom' && (
           <>
-            <SettingsObjectIconSection label={customFormValues.labelPlural} />
+            <SettingsObjectIconSection
+              label={customFormValues.labelPlural}
+              iconKey={customFormValues.icon}
+              onChange={({ iconKey }) => {
+                setCustomFormValues((previousValues) => ({
+                  ...previousValues,
+                  icon: iconKey,
+                }));
+              }}
+            />
             <SettingsObjectFormSection
               singularName={customFormValues.labelSingular}
               pluralName={customFormValues.labelPlural}