feat: add New Object Custom form (#2105)

* feat: add New Object Custom form

Closes #1808

* fix: fix lint error

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

@@ -1,9 +1,15 @@
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { SettingsNewObjectType } from '@/settings/data-model/new-object/components/SettingsNewObjectType';
+import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection';
+import {
+  NewObjectType,
+  SettingsNewObjectType,
+} from '@/settings/data-model/new-object/components/SettingsNewObjectType';
+import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/SettingsObjectIconSection';
 import { IconSettings } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
@@ -12,6 +18,22 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 export const SettingsNewObject = () => {
   const navigate = useNavigate();
+  const [selectedObjectType, setSelectedObjectType] =
+    useState<NewObjectType>('Standard');
+
+  const [customFormValues, setCustomFormValues] = useState<
+    Partial<{
+      pluralName: string;
+      singularName: string;
+      description: string;
+    }>
+  >({});
+
+  const canSave =
+    selectedObjectType === 'Custom' &&
+    !!customFormValues.pluralName &&
+    !!customFormValues.singularName;
+
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
@@ -23,11 +45,11 @@ export const SettingsNewObject = () => {
             ]}
           />
           <SaveAndCancelButtons
-            isSaveDisabled
+            isSaveDisabled={!canSave}
             onCancel={() => {
               navigate('/settings/objects');
             }}
-            onSave={() => {}}
+            onSave={() => undefined}
           />
         </SettingsHeaderContainer>
         <Section>
@@ -35,8 +57,27 @@ export const SettingsNewObject = () => {
             title="Object Type"
             description="The type of object you want to add"
           />
-          <SettingsNewObjectType />
+          <SettingsNewObjectType
+            selectedType={selectedObjectType}
+            onTypeSelect={setSelectedObjectType}
+          />
         </Section>
+        {selectedObjectType === 'Custom' && (
+          <>
+            <SettingsObjectIconSection label={customFormValues.pluralName} />
+            <SettingsObjectFormSection
+              singularName={customFormValues.singularName}
+              pluralName={customFormValues.pluralName}
+              description={customFormValues.description}
+              onChange={(formValues) => {
+                setCustomFormValues((previousValues) => ({
+                  ...previousValues,
+                  ...formValues,
+                }));
+              }}
+            />
+          </>
+        )}
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );

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

@@ -40,10 +40,13 @@ export const SettingsObjectEdit = () => {
         {activeObject && (
           <>
             <SettingsObjectIconSection
+              disabled={activeObject.type === 'standard'}
               Icon={activeObject.Icon}
               iconKey={activeObject.Icon.name}
+              label={activeObject.name}
             />
             <SettingsObjectFormSection
+              disabled={activeObject.type === 'standard'}
               singularName={activeObject.singularName}
               pluralName={activeObject.name}
               description={activeObject.description}
@@ -51,12 +54,12 @@ export const SettingsObjectEdit = () => {
           </>
         )}
         <Section>
-          <H2Title title="Danger zone" description={`Disable object`} />
+          <H2Title title="Danger zone" description="Disable object" />
           <Button
             Icon={IconArchive}
             title="Disable"
             size="small"
-            onClick={() => {}}
+            onClick={() => undefined}
           />
         </Section>
       </SettingsPageContainer>