feat: add Fields table to Object Detail page (#1988)

* feat: add Fields table to Object Detail page

Closes #1815

* refactor: add ObjectFieldDataType

front/src/pages/settings/SettingsNewObject.tsx

@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
 
+import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings';
 import { Breadcrumb } from '@/ui/breadcrumb/components/Breadcrumb';
 import { IconSettings } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
 
-import { objectSettingsWidth } from './constants/objectSettings';
-
 const StyledContainer = styled.div`
+  height: fit-content;
   padding: ${({ theme }) => theme.spacing(8)};
   width: ${objectSettingsWidth};
 `;

front/src/pages/settings/SettingsObjectDetail.tsx

@@ -2,19 +2,43 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 
+import {
+  ObjectFieldItemTableRow,
+  StyledObjectFieldTableRow,
+} from '@/settings/objects/components/ObjectFieldItemTableRow';
+import {
+  activeFieldItems,
+  activeObjectItems,
+  disabledFieldItems,
+} from '@/settings/objects/constants/mockObjects';
+import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings';
 import { AppPath } from '@/types/AppPath';
 import { Breadcrumb } from '@/ui/breadcrumb/components/Breadcrumb';
-import { IconSettings } from '@/ui/icon';
+import { Button } from '@/ui/button/components/Button';
+import { IconPlus, IconSettings } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
-
-import { activeObjectItems } from './constants/mockObjects';
-import { objectSettingsWidth } from './constants/objectSettings';
+import { Table } from '@/ui/table/components/Table';
+import { TableHeader } from '@/ui/table/components/TableHeader';
+import { TableSection } from '@/ui/table/components/TableSection';
+import { H2Title } from '@/ui/typography/components/H2Title';
 
 const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: fit-content;
   padding: ${({ theme }) => theme.spacing(8)};
   width: ${objectSettingsWidth};
 `;
 
+const StyledBreadcrumb = styled(Breadcrumb)`
+  margin-bottom: ${({ theme }) => theme.spacing(8)};
+`;
+
+const StyledAddFieldButton = styled(Button)`
+  align-self: flex-end;
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+
 export const SettingsObjectDetail = () => {
   const navigate = useNavigate();
   const { pluralObjectName = '' } = useParams();
@@ -29,12 +53,48 @@ export const SettingsObjectDetail = () => {
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <StyledContainer>
-        <Breadcrumb
+        <StyledBreadcrumb
           links={[
             { children: 'Objects', href: '/settings/objects' },
             { children: activeObject?.name ?? '' },
           ]}
         />
+        <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.`}
+        />
+        <Table>
+          <StyledObjectFieldTableRow>
+            <TableHeader>Name</TableHeader>
+            <TableHeader>Field type</TableHeader>
+            <TableHeader>Data type</TableHeader>
+            <TableHeader></TableHeader>
+          </StyledObjectFieldTableRow>
+          <TableSection title="Active">
+            {activeFieldItems.map((fieldItem) => (
+              <ObjectFieldItemTableRow
+                key={fieldItem.name}
+                fieldItem={fieldItem}
+              />
+            ))}
+          </TableSection>
+          {!!disabledFieldItems.length && (
+            <TableSection isInitiallyExpanded={false} title="Disabled">
+              {disabledFieldItems.map((fieldItem) => (
+                <ObjectFieldItemTableRow
+                  key={fieldItem.name}
+                  fieldItem={fieldItem}
+                />
+              ))}
+            </TableSection>
+          )}
+        </Table>
+        <StyledAddFieldButton
+          Icon={IconPlus}
+          title="Add Field"
+          size="small"
+          variant="secondary"
+        />
       </StyledContainer>
     </SubMenuTopBarContainer>
   );

front/src/pages/settings/SettingsObjectEdit.tsx

@@ -2,15 +2,15 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 
+import { activeObjectItems } from '@/settings/objects/constants/mockObjects';
+import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings';
 import { AppPath } from '@/types/AppPath';
 import { Breadcrumb } from '@/ui/breadcrumb/components/Breadcrumb';
 import { IconSettings } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
 
-import { activeObjectItems } from './constants/mockObjects';
-import { objectSettingsWidth } from './constants/objectSettings';
-
 const StyledContainer = styled.div`
+  height: fit-content;
   padding: ${({ theme }) => theme.spacing(8)};
   width: ${objectSettingsWidth};
 `;

front/src/pages/settings/SettingsObjects.tsx

@@ -2,6 +2,11 @@ import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {
+  activeObjectItems,
+  disabledObjectItems,
+} from '@/settings/objects/constants/mockObjects';
+import { objectSettingsWidth } from '@/settings/objects/constants/objectSettings';
 import { Button } from '@/ui/button/components/Button';
 import {
   IconChevronRight,
@@ -19,13 +24,8 @@ import { Tag } from '@/ui/tag/components/Tag';
 import { H1Title } from '@/ui/typography/components/H1Title';
 import { H2Title } from '@/ui/typography/components/H2Title';
 
-import {
-  activeObjectItems,
-  disabledObjectItems,
-} from './constants/mockObjects';
-import { objectSettingsWidth } from './constants/objectSettings';
-
 const StyledContainer = styled.div`
+  height: fit-content;
   padding: ${({ theme }) => theme.spacing(8)};
   width: ${objectSettingsWidth};
 `;

front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -20,6 +20,7 @@ import {
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
+  height: fit-content;
   padding: ${({ theme }) => theme.spacing(8)};
   width: 350px;
 `;

front/src/pages/settings/constants/mockObjects.ts

@@ -1,40 +0,0 @@
-import {
-  IconBuildingSkyscraper,
-  IconLuggage,
-  IconPlane,
-  IconUser,
-} from '@/ui/icon';
-
-export const activeObjectItems = [
-  {
-    name: 'Companies',
-    Icon: IconBuildingSkyscraper,
-    type: 'standard',
-    fields: 23,
-    instances: 165,
-  },
-  {
-    name: 'People',
-    Icon: IconUser,
-    type: 'standard',
-    fields: 16,
-    instances: 462,
-  },
-];
-
-export const disabledObjectItems = [
-  {
-    name: 'Travels',
-    Icon: IconLuggage,
-    type: 'custom',
-    fields: 23,
-    instances: 165,
-  },
-  {
-    name: 'Flights',
-    Icon: IconPlane,
-    type: 'custom',
-    fields: 23,
-    instances: 165,
-  },
-];

front/src/pages/settings/constants/objectSettings.ts

@@ -1 +0,0 @@
-export const objectSettingsWidth = '512px';