feat: get object metadata from backend in Object Edit

Closes #2009

Author: thaisguigon

front/src/modules/settings/data-model/object-edit/SettingsObjectIconSection.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 
-import { IconPigMoney } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { IconPicker } from '@/ui/input/components/IconPicker';
+import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
 import { Section } from '@/ui/layout/section/components/Section';
 
 import ArrowRight from '../assets/ArrowRight.svg';
@@ -25,19 +25,19 @@ const StyledArrowContainer = styled.div`
 
 type SettingsObjectIconSectionProps = {
   disabled?: boolean;
-  Icon?: IconComponent;
   iconKey?: string;
   label?: string;
   onChange?: (icon: { Icon: IconComponent; iconKey: string }) => void;
 };
 
 export const SettingsObjectIconSection = ({
   disabled,
-  Icon = IconPigMoney,
   iconKey = 'IconPigMoney',
   label,
   onChange,
 }: SettingsObjectIconSectionProps) => {
+  const { Icon } = useLazyLoadIcon(iconKey);
+
   return (
     <Section>
       <H2Title

front/src/modules/settings/data-model/object-edit/SettingsObjectIconWithLabel.tsx

@@ -24,7 +24,7 @@ const StyledItemLabel = styled.div`
 `;
 
 type SettingsObjectIconWithLabelProps = {
-  Icon: IconComponent;
+  Icon?: IconComponent;
   label: string;
 };
 
@@ -37,7 +37,9 @@ export const SettingsObjectIconWithLabel = ({
   return (
     <StyledContainer>
       <StyledSubContainer>
-        <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+        {!!Icon && (
+          <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+        )}
         <StyledItemLabel>{label}</StyledItemLabel>
       </StyledSubContainer>
     </StyledContainer>

front/src/modules/ui/display/icon/index.ts

@@ -69,7 +69,6 @@ export {
   IconNumbers,
   IconPencil,
   IconPhone,
-  IconPigMoney,
   IconPlane,
   IconPlug,
   IconPlus,

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

@@ -1,9 +1,9 @@
 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';
@@ -15,14 +15,16 @@ 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]);
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@@ -31,7 +33,7 @@ export const SettingsObjectEdit = () => {
           links={[
             { children: 'Objects', href: '/settings/objects' },
             {
-              children: activeObject?.name ?? '',
+              children: activeObject?.labelPlural ?? '',
               href: `/settings/objects/${pluralObjectName}`,
             },
             { children: 'Edit' },
@@ -40,16 +42,15 @@ export const SettingsObjectEdit = () => {
         {activeObject && (
           <>
             <SettingsObjectIconSection
-              disabled={activeObject.type === 'standard'}
-              Icon={activeObject.Icon}
-              iconKey={activeObject.Icon.name}
-              label={activeObject.name}
+              disabled={!activeObject.isCustom}
+              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}
             />
           </>
         )}