Refactor settings > data model section (#2031)

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

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled';
+
+import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
+import { SettingsNewObjectType } from '@/settings/data-model/new-object/components/SettingsNewObjectType';
+import { IconSettings } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Section } from '@/ui/layout/section/components/Section';
+import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+
+const StyledContainer = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(8)};
+  height: fit-content;
+  padding: ${({ theme }) => theme.spacing(8)};
+  width: ${objectSettingsWidth};
+`;
+
+export const SettingsNewObject = () => {
+  return (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <StyledContainer>
+        <Breadcrumb
+          links={[
+            { children: 'Objects', href: '/settings/objects' },
+            { children: 'New' },
+          ]}
+        />
+        <Section>
+          <H2Title
+            title="Object Type"
+            description="The type of object you want to add"
+          />
+          <SettingsNewObjectType />
+        </Section>
+      </StyledContainer>
+    </SubMenuTopBarContainer>
+  );
+};

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

@@ -0,0 +1,110 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import {
+  activeFieldItems,
+  activeObjectItems,
+  disabledFieldItems,
+} from '@/settings/data-model/constants/mockObjects';
+import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
+import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection';
+import {
+  SettingsObjectFieldItemTableRow,
+  StyledObjectFieldTableRow,
+} from '@/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow';
+import { AppPath } from '@/types/AppPath';
+import { IconPlus, IconSettings } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Button } from '@/ui/input/button/components/Button';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+import { TableSection } from '@/ui/layout/table/components/TableSection';
+import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+
+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();
+  const activeObject = activeObjectItems.find(
+    (activeObject) => activeObject.name.toLowerCase() === pluralObjectName,
+  );
+
+  useEffect(() => {
+    if (!activeObject) navigate(AppPath.NotFound);
+  }, [activeObject, navigate]);
+
+  return (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <StyledContainer>
+        <StyledBreadcrumb
+          links={[
+            { children: 'Objects', href: '/settings/objects' },
+            { children: activeObject?.name ?? '' },
+          ]}
+        />
+        {activeObject && (
+          <SettingsAboutSection
+            Icon={activeObject?.Icon}
+            name={activeObject.name}
+            type={activeObject.type}
+          />
+        )}
+        <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) => (
+              <SettingsObjectFieldItemTableRow
+                key={fieldItem.name}
+                fieldItem={fieldItem}
+              />
+            ))}
+          </TableSection>
+          {!!disabledFieldItems.length && (
+            <TableSection isInitiallyExpanded={false} title="Disabled">
+              {disabledFieldItems.map((fieldItem) => (
+                <SettingsObjectFieldItemTableRow
+                  key={fieldItem.name}
+                  fieldItem={fieldItem}
+                />
+              ))}
+            </TableSection>
+          )}
+        </Table>
+        <StyledAddFieldButton
+          Icon={IconPlus}
+          title="Add Field"
+          size="small"
+          variant="secondary"
+        />
+      </StyledContainer>
+    </SubMenuTopBarContainer>
+  );
+};

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

@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { activeObjectItems } from '@/settings/data-model/constants/mockObjects';
+import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
+import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/SettingsObjectIconSection';
+import { AppPath } from '@/types/AppPath';
+import { IconSettings } from '@/ui/display/icon';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+
+const StyledContainer = styled.div`
+  height: fit-content;
+  padding: ${({ theme }) => theme.spacing(8)};
+  width: ${objectSettingsWidth};
+`;
+
+export const SettingsObjectEdit = () => {
+  const navigate = useNavigate();
+  const { pluralObjectName = '' } = useParams();
+  const activeObject = activeObjectItems.find(
+    (activeObject) => activeObject.name.toLowerCase() === pluralObjectName,
+  );
+
+  useEffect(() => {
+    if (!activeObject) navigate(AppPath.NotFound);
+  }, [activeObject, navigate]);
+
+  return (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <StyledContainer>
+        <Breadcrumb
+          links={[
+            { children: 'Objects', href: '/settings/objects' },
+            {
+              children: activeObject?.name ?? '',
+              href: `/settings/objects/${pluralObjectName}`,
+            },
+            { children: 'Edit' },
+          ]}
+        />
+        {activeObject && (
+          <SettingsObjectIconSection
+            Icon={activeObject.Icon}
+            iconKey={activeObject.Icon.name}
+          />
+        )}
+      </StyledContainer>
+    </SubMenuTopBarContainer>
+  );
+};

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

@@ -0,0 +1,160 @@
+import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import {
+  activeObjectItems,
+  disabledObjectItems,
+} from '@/settings/data-model/constants/mockObjects';
+import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
+import {
+  IconChevronRight,
+  IconDotsVertical,
+  IconPlus,
+  IconSettings,
+} from '@/ui/display/icon';
+import { Tag } from '@/ui/display/tag/components/Tag';
+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 { 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 StyledContainer = styled.div`
+  height: fit-content;
+  padding: ${({ theme }) => theme.spacing(8)};
+  width: ${objectSettingsWidth};
+`;
+
+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};
+`;
+
+const StyledIconDotsVertical = styled(IconDotsVertical)`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
+const StyledHeader = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: ${({ theme }) => theme.spacing(8)};
+`;
+
+const StyledH1Title = styled(H1Title)`
+  margin-bottom: 0;
+`;
+
+export const SettingsObjects = () => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+
+  return (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <StyledContainer>
+        <StyledHeader>
+          <StyledH1Title title="Objects" />
+          <Button
+            Icon={IconPlus}
+            title="New object"
+            accent="blue"
+            size="small"
+            onClick={() => {
+              navigate('/settings/objects/new');
+            }}
+          />
+        </StyledHeader>
+        <H2Title title="Existing objects" />
+        <Table>
+          <StyledTableRow>
+            <TableHeader>Name</TableHeader>
+            <TableHeader>Type</TableHeader>
+            <TableHeader align="right">Fields</TableHeader>
+            <TableHeader align="right">Instances</TableHeader>
+            <TableHeader></TableHeader>
+          </StyledTableRow>
+          <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>
+                  <StyledIconChevronRight
+                    size={theme.icon.size.md}
+                    stroke={theme.icon.stroke.sm}
+                  />
+                </StyledIconTableCell>
+              </StyledTableRow>
+            ))}
+          </TableSection>
+          {!!disabledObjectItems.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>
+                    <StyledIconDotsVertical
+                      size={theme.icon.size.md}
+                      stroke={theme.icon.stroke.sm}
+                    />
+                  </StyledIconTableCell>
+                </StyledTableRow>
+              ))}
+            </TableSection>
+          )}
+        </Table>
+      </StyledContainer>
+    </SubMenuTopBarContainer>
+  );
+};

front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { SettingsNewObject } from '../SettingsNewObject';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/SettingsNewObject',
+  component: SettingsNewObject,
+  decorators: [PageDecorator],
+  args: {
+    routePath: '/settings/objects/new',
+  },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsNewObject>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { SettingsObjectDetail } from '../SettingsObjectDetail';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/SettingsObjectDetail',
+  component: SettingsObjectDetail,
+  decorators: [PageDecorator],
+  args: {
+    routePath: '/settings/objects/:pluralObjectName',
+    routeParams: { ':pluralObjectName': 'companies' },
+  },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsObjectDetail>;
+
+export const Default: Story = {};

front/src/pages/settings/data-model/__stories__/SettingsObjectEdit.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { SettingsObjectEdit } from '../SettingsObjectEdit';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/SettingsObjectEdit',
+  component: SettingsObjectEdit,
+  decorators: [PageDecorator],
+  args: {
+    routePath: '/settings/objects/:pluralObjectName/edit',
+    routeParams: { ':pluralObjectName': 'companies' },
+  },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsObjectEdit>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
+
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
+
+import { SettingsObjects } from '../SettingsObjects';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/SettingsObjects',
+  component: SettingsObjects,
+  decorators: [PageDecorator],
+  args: { routePath: '/settings/objects' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsObjects>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await sleep(1000);
+
+    await canvas.getByRole('heading', {
+      level: 2,
+      name: 'Objects',
+    });
+  },
+};