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>
+  );
+};