feat: get object metadata from backend in Object Detail and New Field… (#2122)

* feat: get object metadata from backend in Object Detail and New Field - Step 1

Closes #2008

* refactor: add useLazyLoadIcon hook

front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx

@@ -2,17 +2,17 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconDotsVertical } from '@/ui/display/icon';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Tag } from '@/ui/display/tag/components/Tag';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
 import { Section } from '@/ui/layout/section/components/Section';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 
 type SettingsAboutSectionProps = {
-  Icon: IconComponent;
+  iconKey?: string;
+  isCustom: boolean;
   name: string;
-  type: string;
 };
 
 const StyledIconTableCell = styled(TableCell)`
@@ -45,25 +45,27 @@ const StyledFlexContainer = styled.div`
 `;
 
 export const SettingsAboutSection = ({
-  Icon,
+  iconKey = '',
+  isCustom,
   name,
-  type,
 }: SettingsAboutSectionProps) => {
   const theme = useTheme();
+  const { Icon } = useLazyLoadIcon(iconKey);
+
   return (
     <Section>
-      <H2Title title="About" description={`Manage you object`} />
+      <H2Title title="About" description="Manage your object" />
       <StyledTableRow>
         <StyledNameTableCell>
-          <Icon size={theme.icon.size.md} />
+          {!!Icon && <Icon size={theme.icon.size.md} />}
           {name}
         </StyledNameTableCell>
         <StyledFlexContainer>
           <TableCell>
-            {type === 'standard' ? (
+            {isCustom ? (
-              <StyledTag color="blue" text="Standard" />
-            ) : (
               <StyledTag color="orange" text="Custom" />
+            ) : (
+              <StyledTag color="blue" text="Standard" />
             )}
           </TableCell>
           <StyledIconTableCell>

front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx

@@ -11,9 +11,9 @@ import {
 } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
-import { ObjectFieldItem } from '../../types/ObjectFieldItem';
+import { ObjectFieldDataType } from '../../types/ObjectFieldDataType';
 
-const StyledDataType = styled.div<{ value: ObjectFieldItem['dataType'] }>`
+const StyledDataType = styled.div<{ value: ObjectFieldDataType }>`
   align-items: center;
   border: 1px solid transparent;
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -33,7 +33,7 @@ const StyledDataType = styled.div<{ value: ObjectFieldItem['dataType'] }>`
 `;
 
 const dataTypes: Record<
-  ObjectFieldItem['dataType'],
+  ObjectFieldDataType,
   { label: string; Icon: IconComponent }
 > = {
   boolean: { label: 'True/False', Icon: IconCheck },
@@ -45,7 +45,7 @@ const dataTypes: Record<
 };
 
 type SettingsObjectFieldDataTypeProps = {
-  value: ObjectFieldItem['dataType'];
+  value: ObjectFieldDataType;
 };
 
 export const SettingsObjectFieldDataType = ({

front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx

@@ -3,16 +3,18 @@ import styled from '@emotion/styled';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { Field } from '~/generated-metadata/graphql';
 
-import { ObjectFieldItem } from '../../types/ObjectFieldItem';
+import { ObjectFieldDataType } from '../../types/ObjectFieldDataType';
 
 import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
 
 type SettingsObjectFieldItemTableRowProps = {
   ActionIcon: IconComponent;
-  fieldItem: ObjectFieldItem;
+  fieldItem: Field;
 };
 
 export const StyledObjectFieldTableRow = styled(TableRow)`
@@ -34,18 +36,19 @@ export const SettingsObjectFieldItemTableRow = ({
   fieldItem,
 }: SettingsObjectFieldItemTableRowProps) => {
   const theme = useTheme();
+  const { Icon } = useLazyLoadIcon(fieldItem.icon ?? '');
 
   return (
     <StyledObjectFieldTableRow>
       <StyledNameTableCell>
-        <fieldItem.Icon size={theme.icon.size.md} />
+        {!!Icon && <Icon size={theme.icon.size.md} />}
-        {fieldItem.name}
+        {fieldItem.label}
       </StyledNameTableCell>
+      <TableCell>{fieldItem.isCustom ? 'Custom' : 'Standard'}</TableCell>
       <TableCell>
-        {fieldItem.type === 'standard' ? 'Standard' : 'Custom'}
+        <SettingsObjectFieldDataType
-      </TableCell>
+          value={fieldItem.type as ObjectFieldDataType}
-      <TableCell>
+        />
-        <SettingsObjectFieldDataType value={fieldItem.dataType} />
       </TableCell>
       <StyledIconTableCell>
         <LightIconButton Icon={ActionIcon} accent="tertiary" />

front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx

@@ -4,14 +4,13 @@ import styled from '@emotion/styled';
 
 import { useFindManyObjects } from '@/metadata/hooks/useFindManyObjects';
 import { MetadataObject } from '@/metadata/types/MetadataObject';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Tag } from '@/ui/display/tag/components/Tag';
+import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 
 type SettingsObjectItemTableRowProps = {
   action: ReactNode;
-  Icon?: IconComponent;
   objectItem: MetadataObject;
   onClick?: () => void;
 };
@@ -37,7 +36,6 @@ const StyledActionTableCell = styled(TableCell)`
 
 export const SettingsObjectItemTableRow = ({
   action,
-  Icon,
   objectItem,
   onClick,
 }: SettingsObjectItemTableRowProps) => {
@@ -47,6 +45,8 @@ export const SettingsObjectItemTableRow = ({
     objectNamePlural: objectItem.namePlural,
   });
 
+  const { Icon } = useLazyLoadIcon(objectItem.icon ?? '');
+
   return (
     <StyledObjectTableRow key={objectItem.namePlural} onClick={onClick}>
       <StyledNameTableCell>

front/src/modules/settings/data-model/types/ObjectFieldDataType.ts

@@ -0,0 +1,7 @@
+export type ObjectFieldDataType =
+  | 'boolean'
+  | 'number'
+  | 'relation'
+  | 'social'
+  | 'teammate'
+  | 'text';

front/src/modules/settings/data-model/types/ObjectFieldItem.ts

@@ -1,8 +1,10 @@
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
+import { ObjectFieldDataType } from './ObjectFieldDataType';
+
 export type ObjectFieldItem = {
   name: string;
   Icon: IconComponent;
   type: 'standard' | 'custom';
-  dataType: 'boolean' | 'number' | 'relation' | 'social' | 'teammate' | 'text';
+  dataType: ObjectFieldDataType;
 };

front/src/modules/ui/input/components/IconPicker.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
@@ -13,6 +13,7 @@ import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { IconButton } from '../button/components/IconButton';
 import { LightIconButton } from '../button/components/LightIconButton';
 import { IconApps } from '../constants/icons';
+import { useLazyLoadIcons } from '../hooks/useLazyLoadIcons';
 import { DropdownMenuSkeletonItem } from '../relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope';
 
@@ -48,17 +49,10 @@ export const IconPicker = ({
   onOpen,
 }: IconPickerProps) => {
   const [searchString, setSearchString] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-  const [icons, setIcons] = useState<Record<string, IconComponent>>({});
 
   const { closeDropdown } = useDropdown({ dropdownScopeId: 'icon-picker' });
 
-  useEffect(() => {
+  const { icons, isLoadingIcons: isLoading } = useLazyLoadIcons();
-    import('../constants/icons').then((lazyLoadedIcons) => {
-      setIcons(lazyLoadedIcons);
-      setIsLoading(false);
-    });
-  }, []);
 
   const iconKeys = useMemo(() => {
     const filteredIconKeys = Object.keys(icons).filter(

front/src/modules/ui/input/hooks/useLazyLoadIcon.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+
+export const useLazyLoadIcon = (iconKey: string) => {
+  const [Icon, setIcon] = useState<IconComponent | undefined>();
+  const [isLoadingIcon, setIsLoadingIcon] = useState(true);
+
+  useEffect(() => {
+    if (!iconKey) return;
+
+    import(`@tabler/icons-react/dist/esm/icons/${iconKey}.js`).then(
+      (lazyLoadedIcon) => {
+        setIcon(lazyLoadedIcon.default);
+        setIsLoadingIcon(false);
+      },
+    );
+  }, [iconKey]);
+
+  return { Icon, isLoadingIcon };
+};

front/src/modules/ui/input/hooks/useLazyLoadIcons.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+
+export const useLazyLoadIcons = () => {
+  const [icons, setIcons] = useState<Record<string, IconComponent>>({});
+  const [isLoadingIcons, setIsLoadingIcons] = useState(true);
+
+  useEffect(() => {
+    import('../constants/icons').then((lazyLoadedIcons) => {
+      setIcons(lazyLoadedIcons);
+      setIsLoadingIcons(false);
+    });
+  }, []);
+
+  return { icons, isLoadingIcons };
+};

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

@@ -2,12 +2,8 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 
+import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import {
-  activeFieldItems,
-  activeObjectItems,
-  disabledFieldItems,
-} from '@/settings/data-model/constants/mockObjects';
 import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection';
 import {
   SettingsObjectFieldItemTableRow,
@@ -34,13 +30,23 @@ export const SettingsObjectDetail = () => {
   const navigate = useNavigate();
 
   const { pluralObjectName = '' } = useParams();
-  const activeObject = activeObjectItems.find(
+  const { activeObjects } = useObjectMetadata();
-    (activeObject) => activeObject.name.toLowerCase() === pluralObjectName,
+  const activeObject = activeObjects.find(
+    (activeObject) => activeObject.namePlural === pluralObjectName,
   );
 
   useEffect(() => {
-    if (!activeObject) navigate(AppPath.NotFound);
+    if (activeObjects.length && !activeObject) {
-  }, [activeObject, navigate]);
+      navigate(AppPath.NotFound);
+    }
+  }, [activeObject, activeObjects.length, navigate]);
+
+  const activeFields = activeObject?.fields.filter(
+    (fieldItem) => fieldItem.isActive,
+  );
+  const disabledFields = activeObject?.fields.filter(
+    (fieldItem) => !fieldItem.isActive,
+  );
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@@ -48,20 +54,20 @@ export const SettingsObjectDetail = () => {
         <Breadcrumb
           links={[
             { children: 'Objects', href: '/settings/objects' },
-            { children: activeObject?.name ?? '' },
+            { children: activeObject?.labelPlural ?? '' },
           ]}
         />
         {activeObject && (
           <SettingsAboutSection
-            Icon={activeObject?.Icon}
+            iconKey={activeObject.icon ?? undefined}
-            name={activeObject.name}
+            name={activeObject.labelPlural || ''}
-            type={activeObject.type}
+            isCustom={activeObject.isCustom}
           />
         )}
         <Section>
           <H2Title
             title="Fields"
-            description={`Customise the fields available in the ${activeObject?.singularName} views and their display order in the ${activeObject?.singularName} detail view and menus.`}
+            description={`Customise the fields available in the ${activeObject?.nameSingular} views and their display order in the ${activeObject?.nameSingular} detail view and menus.`}
           />
           <Table>
             <StyledObjectFieldTableRow>
@@ -71,21 +77,21 @@ export const SettingsObjectDetail = () => {
               <TableHeader></TableHeader>
             </StyledObjectFieldTableRow>
             <TableSection title="Active">
-              {activeFieldItems.map((fieldItem) => (
+              {activeFields?.map((fieldItem) => (
                 <SettingsObjectFieldItemTableRow
-                  key={fieldItem.name}
+                  key={fieldItem.id}
-                  ActionIcon={IconDotsVertical}
                   fieldItem={fieldItem}
+                  ActionIcon={IconDotsVertical}
                 />
               ))}
             </TableSection>
-            {!!disabledFieldItems.length && (
+            {!!disabledFields?.length && (
               <TableSection isInitiallyExpanded={false} title="Disabled">
-                {disabledFieldItems.map((fieldItem) => (
+                {disabledFields.map((fieldItem) => (
                   <SettingsObjectFieldItemTableRow
-                    key={fieldItem.name}
+                    key={fieldItem.id}
-                    ActionIcon={IconDotsVertical}
                     fieldItem={fieldItem}
+                    ActionIcon={IconDotsVertical}
                   />
                 ))}
               </TableSection>
@@ -99,7 +105,7 @@ export const SettingsObjectDetail = () => {
               variant="secondary"
               onClick={() =>
                 navigate(
-                  disabledFieldItems.length
+                  disabledFields?.length
                     ? './new-field/step-1'
                     : './new-field/step-2',
                 )

front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx

@@ -2,14 +2,10 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 
+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 {
-  activeFieldItems,
-  activeObjectItems,
-  disabledFieldItems,
-} from '@/settings/data-model/constants/mockObjects';
 import {
   SettingsObjectFieldItemTableRow,
   StyledObjectFieldTableRow,
@@ -37,14 +33,25 @@ const StyledAddCustomFieldButton = styled(Button)`
 
 export const SettingsObjectNewFieldStep1 = () => {
   const navigate = useNavigate();
+
   const { pluralObjectName = '' } = useParams();
-  const activeObject = activeObjectItems.find(
+  const { activeObjects } = useObjectMetadata();
-    (activeObject) => activeObject.name.toLowerCase() === pluralObjectName,
+  const activeObject = activeObjects.find(
+    (activeObject) => activeObject.namePlural === pluralObjectName,
   );
 
   useEffect(() => {
-    if (!activeObject) navigate(AppPath.NotFound);
+    if (activeObjects.length && !activeObject) {
-  }, [activeObject, navigate]);
+      navigate(AppPath.NotFound);
+    }
+  }, [activeObject, activeObjects.length, navigate]);
+
+  const activeFields = activeObject?.fields.filter(
+    (fieldItem) => fieldItem.isActive,
+  );
+  const disabledFields = activeObject?.fields.filter(
+    (fieldItem) => !fieldItem.isActive,
+  );
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@@ -54,7 +61,7 @@ export const SettingsObjectNewFieldStep1 = () => {
             links={[
               { children: 'Objects', href: '/settings/objects' },
               {
-                children: activeObject?.name ?? '',
+                children: activeObject?.labelPlural ?? '',
                 href: `/settings/objects/${pluralObjectName}`,
               },
               { children: 'New Field' },
@@ -65,7 +72,7 @@ export const SettingsObjectNewFieldStep1 = () => {
             onCancel={() => {
               navigate(`/settings/objects/${pluralObjectName}`);
             }}
-            onSave={() => {}}
+            onSave={() => undefined}
           />
         </SettingsHeaderContainer>
         <StyledSection>
@@ -81,21 +88,21 @@ export const SettingsObjectNewFieldStep1 = () => {
               <TableHeader></TableHeader>
             </StyledObjectFieldTableRow>
             <TableSection isInitiallyExpanded={false} title="Active">
-              {activeFieldItems.map((fieldItem) => (
+              {activeFields?.map((fieldItem) => (
                 <SettingsObjectFieldItemTableRow
-                  key={fieldItem.name}
+                  key={fieldItem.id}
-                  ActionIcon={IconMinus}
                   fieldItem={fieldItem}
+                  ActionIcon={IconMinus}
                 />
               ))}
             </TableSection>
-            {!!disabledFieldItems.length && (
+            {!!disabledFields?.length && (
               <TableSection title="Disabled">
-                {disabledFieldItems.map((fieldItem) => (
+                {disabledFields.map((fieldItem) => (
                   <SettingsObjectFieldItemTableRow
                     key={fieldItem.name}
-                    ActionIcon={IconPlus}
                     fieldItem={fieldItem}
+                    ActionIcon={IconPlus}
                   />
                 ))}
               </TableSection>

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

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -13,7 +12,6 @@ import {
 import { SettingsObjectCoverImage } from '@/settings/data-model/objects/SettingsObjectCoverImage';
 import { SettingsObjectDisabledMenuDropDown } from '@/settings/data-model/objects/SettingsObjectDisabledMenuDropDown';
 import { IconChevronRight, IconPlus, IconSettings } from '@/ui/display/icon';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { H1Title } from '@/ui/display/typography/components/H1Title';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Button } from '@/ui/input/button/components/Button';
@@ -37,14 +35,6 @@ export const SettingsObjects = () => {
 
   const { activeObjects, disabledObjects } = useObjectMetadata();
 
-  const [icons, setIcons] = useState<Record<string, IconComponent>>({});
-
-  useEffect(() => {
-    import('@/ui/input/constants/icons').then((lazyLoadedIcons) => {
-      setIcons(lazyLoadedIcons);
-    });
-  }, []);
-
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
@@ -76,7 +66,6 @@ export const SettingsObjects = () => {
                 {activeObjects.map((objectItem) => (
                   <SettingsObjectItemTableRow
                     key={objectItem.namePlural}
-                    Icon={icons[objectItem.icon || '']}
                     objectItem={objectItem}
                     action={
                       <StyledIconChevronRight
@@ -95,7 +84,6 @@ export const SettingsObjects = () => {
                   {disabledObjects.map((objectItem) => (
                     <SettingsObjectItemTableRow
                       key={objectItem.namePlural}
-                      Icon={icons[objectItem.icon || '']}
                       objectItem={objectItem}
                       action={
                         <SettingsObjectDisabledMenuDropDown