feat: get active and disabled objects from backend in Objects Setting… (#2119)

* feat: get active and disabled objects from backend in Objects Settings page

Closes #2005

* refactor: add useObjectMetadata hook

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

@@ -0,0 +1,16 @@
+import { useRecoilValue } from 'recoil';
+
+import { activeMetadataObjectsSelector } from '../states/selectors/activeMetadataObjectsSelector';
+import { disabledMetadataObjectsSelector } from '../states/selectors/disabledMetadataObjectsSelector';
+
+export const useObjectMetadata = () => {
+  const activeMetadataObjects = useRecoilValue(activeMetadataObjectsSelector);
+  const disabledMetadataObjects = useRecoilValue(
+    disabledMetadataObjectsSelector,
+  );
+
+  return {
+    activeObjects: activeMetadataObjects,
+    disabledObjects: disabledMetadataObjects,
+  };
+};

front/src/modules/metadata/states/selectors/activeMetadataObjectsSelector.ts

@@ -0,0 +1,10 @@
+import { selector } from 'recoil';
+
+import { MetadataObject } from '../../types/MetadataObject';
+import { metadataObjectsState } from '../metadataObjectsState';
+
+export const activeMetadataObjectsSelector = selector<MetadataObject[]>({
+  key: 'activeMetadataObjectsSelector',
+  get: ({ get }) =>
+    get(metadataObjectsState).filter(({ isActive }) => isActive),
+});

front/src/modules/metadata/states/selectors/disabledMetadataObjectsSelector.ts

@@ -0,0 +1,10 @@
+import { selector } from 'recoil';
+
+import { MetadataObject } from '../../types/MetadataObject';
+import { metadataObjectsState } from '../metadataObjectsState';
+
+export const disabledMetadataObjectsSelector = selector<MetadataObject[]>({
+  key: 'disabledMetadataObjectsSelector',
+  get: ({ get }) =>
+    get(metadataObjectsState).filter(({ isActive }) => !isActive),
+});

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

@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+import { useTheme } from '@emotion/react';
+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 { 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;
+};
+
+export const StyledObjectTableRow = styled(TableRow)`
+  grid-template-columns: 180px 98.7px 98.7px 98.7px 36px;
+`;
+
+const StyledNameTableCell = styled(TableCell)`
+  color: ${({ theme }) => theme.font.color.primary};
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledTag = styled(Tag)`
+  box-sizing: border-box;
+  height: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledActionTableCell = styled(TableCell)`
+  justify-content: center;
+  padding-right: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const SettingsObjectItemTableRow = ({
+  action,
+  Icon,
+  objectItem,
+  onClick,
+}: SettingsObjectItemTableRowProps) => {
+  const theme = useTheme();
+
+  const { objects } = useFindManyObjects({
+    objectNamePlural: objectItem.namePlural,
+  });
+
+  return (
+    <StyledObjectTableRow key={objectItem.namePlural} onClick={onClick}>
+      <StyledNameTableCell>
+        {!!Icon && <Icon size={theme.icon.size.md} />}
+        {objectItem.labelPlural}
+      </StyledNameTableCell>
+      <TableCell>
+        {objectItem.isCustom ? (
+          <StyledTag color="orange" text="Custom" />
+        ) : (
+          <StyledTag color="blue" text="Standard" />
+        )}
+      </TableCell>
+      <TableCell align="right">{objectItem.fields.length}</TableCell>
+      <TableCell align="right">{objects.length}</TableCell>
+      <StyledActionTableCell>{action}</StyledActionTableCell>
+    </StyledObjectTableRow>
+  );
+};

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

@@ -1,47 +1,28 @@
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { useObjectMetadata } from '@/metadata/hooks/useObjectMetadata';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import {
-  activeObjectItems,
-  disabledObjectItems,
-} from '@/settings/data-model/constants/mockObjects';
+  SettingsObjectItemTableRow,
+  StyledObjectTableRow,
+} from '@/settings/data-model/object-details/components/SettingsObjectItemTableRow';
 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 { Tag } from '@/ui/display/tag/components/Tag';
+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';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { Table } from '@/ui/layout/table/components/Table';
-import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
-import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { TableSection } from '@/ui/layout/table/components/TableSection';
 
-const StyledTableRow = styled(TableRow)`
-  grid-template-columns: 180px 98.7px 98.7px 98.7px 36px;
-`;
-
-const StyledNameTableCell = styled(TableCell)`
-  color: ${({ theme }) => theme.font.color.primary};
-  gap: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledTag = styled(Tag)`
-  box-sizing: border-box;
-  height: ${({ theme }) => theme.spacing(4)};
-`;
-
-const StyledIconTableCell = styled(TableCell)`
-  justify-content: center;
-  padding-right: ${({ theme }) => theme.spacing(1)};
-`;
-
 const StyledIconChevronRight = styled(IconChevronRight)`
   color: ${({ theme }) => theme.font.color.tertiary};
 `;
@@ -54,6 +35,16 @@ export const SettingsObjects = () => {
   const theme = useTheme();
   const navigate = useNavigate();
 
+  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>
@@ -74,72 +65,46 @@ export const SettingsObjects = () => {
           <Section>
             <H2Title title="Existing objects" />
             <Table>
-              <StyledTableRow>
+              <StyledObjectTableRow>
                 <TableHeader>Name</TableHeader>
                 <TableHeader>Type</TableHeader>
                 <TableHeader align="right">Fields</TableHeader>
                 <TableHeader align="right">Instances</TableHeader>
                 <TableHeader></TableHeader>
-              </StyledTableRow>
+              </StyledObjectTableRow>
               <TableSection title="Active">
-                {activeObjectItems.map((objectItem) => (
-                  <StyledTableRow
-                    key={objectItem.name}
-                    onClick={() =>
-                      navigate(
-                        `/settings/objects/${objectItem.name.toLowerCase()}`,
-                      )
-                    }
-                  >
-                    <StyledNameTableCell>
-                      <objectItem.Icon size={theme.icon.size.md} />
-                      {objectItem.name}
-                    </StyledNameTableCell>
-                    <TableCell>
-                      {objectItem.type === 'standard' ? (
-                        <StyledTag color="blue" text="Standard" />
-                      ) : (
-                        <StyledTag color="orange" text="Custom" />
-                      )}
-                    </TableCell>
-                    <TableCell align="right">{objectItem.fields}</TableCell>
-                    <TableCell align="right">{objectItem.instances}</TableCell>
-                    <StyledIconTableCell>
+                {activeObjects.map((objectItem) => (
+                  <SettingsObjectItemTableRow
+                    key={objectItem.namePlural}
+                    Icon={icons[objectItem.icon || '']}
+                    objectItem={objectItem}
+                    action={
                       <StyledIconChevronRight
                         size={theme.icon.size.md}
                         stroke={theme.icon.stroke.sm}
                       />
-                    </StyledIconTableCell>
-                  </StyledTableRow>
+                    }
+                    onClick={() =>
+                      navigate(`/settings/objects/${objectItem.namePlural}`)
+                    }
+                  />
                 ))}
               </TableSection>
-              {!!disabledObjectItems.length && (
+              {!!disabledObjects.length && (
                 <TableSection title="Disabled">
-                  {disabledObjectItems.map((objectItem) => (
-                    <StyledTableRow key={objectItem.name}>
-                      <StyledNameTableCell>
-                        <objectItem.Icon size={theme.icon.size.md} />
-                        {objectItem.name}
-                      </StyledNameTableCell>
-                      <TableCell>
-                        {objectItem.type === 'standard' ? (
-                          <StyledTag color="blue" text="Standard" />
-                        ) : (
-                          <StyledTag color="orange" text="Custom" />
-                        )}
-                      </TableCell>
-                      <TableCell align="right">{objectItem.fields}</TableCell>
-                      <TableCell align="right">
-                        {objectItem.instances}
-                      </TableCell>
-                      <StyledIconTableCell>
+                  {disabledObjects.map((objectItem) => (
+                    <SettingsObjectItemTableRow
+                      key={objectItem.namePlural}
+                      Icon={icons[objectItem.icon || '']}
+                      objectItem={objectItem}
+                      action={
                         <SettingsObjectDisabledMenuDropDown
-                          scopeKey={objectItem.name}
-                          handleActivate={() => {}}
-                          handleErase={() => {}}
+                          scopeKey={objectItem.namePlural}
+                          handleActivate={() => undefined}
+                          handleErase={() => undefined}
                         />
-                      </StyledIconTableCell>
-                    </StyledTableRow>
+                      }
+                    />
                   ))}
                 </TableSection>
               )}