feat: get object metadata from backend in Object Edit

Closes #2009

Author: thaisguigon

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

@@ -1,28 +1,33 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsObjectFormSection } from '@/settings/data-model/components/SettingsObjectFormSection';
-import { activeObjectItems } from '@/settings/data-model/constants/mockObjects';
 import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/SettingsObjectIconSection';
 import { AppPath } from '@/types/AppPath';
 import { IconArchive, IconSettings } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Button } from '@/ui/input/button/components/Button';
+import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 export const SettingsObjectEdit = () => {
   const navigate = useNavigate();
+
   const { pluralObjectName = '' } = useParams();
-  const activeObject = activeObjectItems.find(
-    (activeObject) => activeObject.name.toLowerCase() === pluralObjectName,
+  const { activeObjects } = useObjectMetadata();
+  const activeObject = activeObjects.find(
+    (activeObject) => activeObject.namePlural === pluralObjectName,
   );
 
   useEffect(() => {
-    if (!activeObject) navigate(AppPath.NotFound);
-  }, [activeObject, navigate]);
+    if (activeObjects.length && !activeObject) navigate(AppPath.NotFound);
+  }, [activeObject, activeObjects.length, navigate]);
+
+  const { icons } = useLazyLoadIcons();
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@@ -31,7 +36,7 @@ export const SettingsObjectEdit = () => {
           links={[
             { children: 'Objects', href: '/settings/objects' },
             {
-              children: activeObject?.name ?? '',
+              children: activeObject?.labelPlural ?? '',
               href: `/settings/objects/${pluralObjectName}`,
             },
             { children: 'Edit' },
@@ -40,16 +45,16 @@ export const SettingsObjectEdit = () => {
         {activeObject && (
           <>
             <SettingsObjectIconSection
-              disabled={activeObject.type === 'standard'}
-              Icon={activeObject.Icon}
-              iconKey={activeObject.Icon.name}
-              label={activeObject.name}
+              disabled={!activeObject.isCustom}
+              Icon={icons[activeObject.icon || '']}
+              iconKey={activeObject.icon ?? undefined}
+              label={activeObject.labelPlural}
             />
             <SettingsObjectFormSection
-              disabled={activeObject.type === 'standard'}
-              singularName={activeObject.singularName}
-              pluralName={activeObject.name}
-              description={activeObject.description}
+              disabled={!activeObject.isCustom}
+              singularName={activeObject.labelSingular}
+              pluralName={activeObject.labelPlural}
+              description={activeObject.description ?? undefined}
             />
           </>
         )}