feat: save edited custom object (#2204)

Closes #2153

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

front/src/modules/metadata/hooks/useObjectMetadata.ts

@@ -15,6 +15,17 @@ export const useObjectMetadata = () => {
 
   const { updateOneMetadataObject } = useUpdateOneMetadataObject();
 
+  const editObject = (metadataObject: MetadataObject) =>
+    updateOneMetadataObject({
+      idToUpdate: metadataObject.id,
+      updatePayload: {
+        description: metadataObject.description ?? null,
+        icon: metadataObject.icon,
+        labelPlural: metadataObject.labelPlural,
+        labelSingular: metadataObject.labelSingular,
+      },
+    });
+
   const activateObject = (metadataObject: MetadataObject) =>
     updateOneMetadataObject({
       idToUpdate: metadataObject.id,
@@ -32,5 +43,6 @@ export const useObjectMetadata = () => {
     disableObject,
     activeObjects: activeMetadataObjects,
     disabledObjects: disabledMetadataObjects,
+    editObject,
   };
 };

front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx

@@ -12,8 +12,8 @@ type SettingsObjectFormSectionProps = {
   description?: string;
   onChange?: (
     formValues: Partial<{
-      singularName: string;
+      labelSingular: string;
-      pluralName: string;
+      labelPlural: string;
       description: string;
     }>,
   ) => void;
@@ -43,7 +43,7 @@ export const SettingsObjectFormSection = ({
         label="Singular"
         placeholder="Investor"
         value={singularName}
-        onChange={(value) => onChange?.({ singularName: value })}
+        onChange={(value) => onChange?.({ labelSingular: value })}
         disabled={disabled}
         fullWidth
       />
@@ -51,7 +51,7 @@ export const SettingsObjectFormSection = ({
         label="Plural"
         placeholder="Investors"
         value={pluralName}
-        onChange={(value) => onChange?.({ pluralName: value })}
+        onChange={(value) => onChange?.({ labelPlural: value })}
         disabled={disabled}
         fullWidth
       />

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

@@ -23,16 +23,16 @@ export const SettingsNewObject = () => {
 
   const [customFormValues, setCustomFormValues] = useState<
     Partial<{
-      pluralName: string;
+      labelPlural: string;
-      singularName: string;
+      labelSingular: string;
       description: string;
     }>
   >({});
 
   const canSave =
     selectedObjectType === 'Custom' &&
-    !!customFormValues.pluralName &&
+    !!customFormValues.labelPlural &&
-    !!customFormValues.singularName;
+    !!customFormValues.labelSingular;
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@@ -64,10 +64,10 @@ export const SettingsNewObject = () => {
         </Section>
         {selectedObjectType === 'Custom' && (
           <>
-            <SettingsObjectIconSection label={customFormValues.pluralName} />
+            <SettingsObjectIconSection label={customFormValues.labelPlural} />
             <SettingsObjectFormSection
-              singularName={customFormValues.singularName}
+              singularName={customFormValues.labelSingular}
-              pluralName={customFormValues.pluralName}
+              pluralName={customFormValues.labelPlural}
               description={customFormValues.description}
               onChange={(formValues) => {
                 setCustomFormValues((previousValues) => ({

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

@@ -1,7 +1,9 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate, useParams } 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';
 import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection';
 import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/SettingsObjectIconSection';
@@ -17,40 +19,100 @@ export const SettingsObjectEdit = () => {
   const navigate = useNavigate();
 
   const { pluralObjectName = '' } = useParams();
-  const { activeObjects, disableObject } = useObjectMetadata();
+  const { activeObjects, disableObject, editObject } = useObjectMetadata();
   const activeObject = activeObjects.find(
     (activeObject) => activeObject.namePlural === pluralObjectName,
   );
 
+  const [formValues, setFormValues] = useState<
+    Partial<{
+      icon: string;
+      labelSingular: string;
+      labelPlural: string;
+      description: string;
+    }>
+  >({});
+
   useEffect(() => {
-    if (activeObjects.length && !activeObject) navigate(AppPath.NotFound);
+    if (!activeObjects.length) return;
-  }, [activeObject, activeObjects.length, navigate]);
+
+    if (!activeObject) {
+      navigate(AppPath.NotFound);
+      return;
+    }
+
+    if (!Object.keys(formValues).length) {
+      setFormValues({
+        icon: activeObject.icon ?? undefined,
+        labelSingular: activeObject.labelSingular,
+        labelPlural: activeObject.labelPlural,
+        description: activeObject.description ?? undefined,
+      });
+    }
+  }, [activeObject, activeObjects.length, formValues, navigate]);
+
+  const areRequiredFieldsFilled =
+    !!formValues.labelSingular && !!formValues.labelPlural;
+
+  const hasChanges =
+    formValues.description !== activeObject?.description ||
+    formValues.icon !== activeObject?.icon ||
+    formValues.labelPlural !== activeObject?.labelPlural ||
+    formValues.labelSingular !== activeObject?.labelSingular;
+
+  const canSave = areRequiredFieldsFilled && hasChanges;
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
-        <Breadcrumb
+        <SettingsHeaderContainer>
-          links={[
+          <Breadcrumb
-            { children: 'Objects', href: '/settings/objects' },
+            links={[
-            {
+              { children: 'Objects', href: '/settings/objects' },
-              children: activeObject?.labelPlural ?? '',
+              {
-              href: `/settings/objects/${pluralObjectName}`,
+                children: activeObject?.labelPlural ?? '',
-            },
+                href: `/settings/objects/${pluralObjectName}`,
-            { children: 'Edit' },
+              },
-          ]}
+              { children: 'Edit' },
-        />
+            ]}
+          />
+          {!!activeObject?.isCustom && (
+            <SaveAndCancelButtons
+              isSaveDisabled={!canSave}
+              onCancel={() => {
+                navigate(`/settings/objects/${pluralObjectName}`);
+              }}
+              onSave={() => {
+                editObject({ ...activeObject, ...formValues });
+                navigate(`/settings/objects/${pluralObjectName}`);
+              }}
+            />
+          )}
+        </SettingsHeaderContainer>
         {activeObject && (
           <>
             <SettingsObjectIconSection
               disabled={!activeObject.isCustom}
-              iconKey={activeObject.icon ?? undefined}
+              iconKey={formValues.icon}
-              label={activeObject.labelPlural}
+              label={formValues.labelPlural}
+              onChange={({ iconKey }) =>
+                setFormValues((previousFormValues) => ({
+                  ...previousFormValues,
+                  icon: iconKey,
+                }))
+              }
             />
             <SettingsObjectFormSection
               disabled={!activeObject.isCustom}
-              singularName={activeObject.labelSingular}
+              singularName={formValues.labelSingular}
-              pluralName={activeObject.labelPlural}
+              pluralName={formValues.labelPlural}
-              description={activeObject.description ?? undefined}
+              description={formValues.description}
+              onChange={(values) =>
+                setFormValues((previousFormValues) => ({
+                  ...previousFormValues,
+                  ...values,
+                }))
+              }
             />
             <Section>
               <H2Title title="Danger zone" description="Disable object" />