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' ? (
-              <StyledTag color="blue" text="Standard" />
-            ) : (
+            {isCustom ? (
               <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} />
-        {fieldItem.name}
+        {!!Icon && <Icon size={theme.icon.size.md} />}
+        {fieldItem.label}
       </StyledNameTableCell>
+      <TableCell>{fieldItem.isCustom ? 'Custom' : 'Standard'}</TableCell>
       <TableCell>
-        {fieldItem.type === 'standard' ? 'Standard' : 'Custom'}
-      </TableCell>
-      <TableCell>
-        <SettingsObjectFieldDataType value={fieldItem.dataType} />
+        <SettingsObjectFieldDataType
+          value={fieldItem.type as ObjectFieldDataType}
+        />
       </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(() => {
-    import('../constants/icons').then((lazyLoadedIcons) => {
-      setIcons(lazyLoadedIcons);
-      setIsLoading(false);
-    });
-  }, []);
+  const { icons, isLoadingIcons: isLoading } = useLazyLoadIcons();
 
   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 };
+};