1997 new object field step 1 create page (#2054)

* add ObjectNewField page * add story * refactored to include step1 * replaced step1 by step-1 and fix onCLick behavior * refactor stories * refactoring in progress * refactor SettingsPageContainer * refactor SettingsPageContainer
2023-10-16 17:11:09 +02:00
parent 525603227a
commit e147e7aebb
39 changed files with 254 additions and 236 deletions
--- a/front/src/pages/settings/data-model/SettingsNewObject.tsx
+++ b/front/src/pages/settings/data-model/SettingsNewObject.tsx
@ -1,6 +1,4 @@
-import styled from '@emotion/styled';
-
-import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsNewObjectType } from '@/settings/data-model/new-object/components/SettingsNewObjectType';
 import { IconSettings } from '@/ui/display/icon';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
@ -8,20 +6,10 @@ 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>
+      <SettingsPageContainer>
        <Breadcrumb
          links={[
            { children: 'Objects', href: '/settings/objects' },
@ -35,7 +23,7 @@ export const SettingsNewObject = () => {
          />
          <SettingsNewObjectType />
        </Section>
-      </StyledContainer>
+      </SettingsPageContainer>
    </SubMenuTopBarContainer>
  );
 };
--- a/front/src/pages/settings/data-model/SettingsObjectDetail.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx
@ -2,12 +2,12 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';

+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 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,
@ -18,26 +18,16 @@ 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 { Section } from '@/ui/layout/section/components/Section';
 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`
+const StyledDiv = 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)};
+  justify-content: flex-end;
+  padding-top: ${({ theme }) => theme.spacing(2)};
 `;

 export const SettingsObjectDetail = () => {
@ -54,8 +44,8 @@ export const SettingsObjectDetail = () => {

  return (
    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <StyledContainer>
-        <StyledBreadcrumb
+      <SettingsPageContainer>
+        <Breadcrumb
          links={[
            { children: 'Objects', href: '/settings/objects' },
            { children: activeObject?.name ?? '' },
@ -68,43 +58,54 @@ export const SettingsObjectDetail = () => {
            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) => (
+        <Section>
+          <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>
-          )}
-        </Table>
-        <StyledAddFieldButton
-          Icon={IconPlus}
-          title="Add Field"
-          size="small"
-          variant="secondary"
-        />
-      </StyledContainer>
+            {!!disabledFieldItems.length && (
+              <TableSection isInitiallyExpanded={false} title="Disabled">
+                {disabledFieldItems.map((fieldItem) => (
+                  <SettingsObjectFieldItemTableRow
+                    key={fieldItem.name}
+                    fieldItem={fieldItem}
+                  />
+                ))}
+              </TableSection>
+            )}
+          </Table>
+          <StyledDiv>
+            <Button
+              Icon={IconPlus}
+              title="Add Field"
+              size="small"
+              variant="secondary"
+              onClick={() =>
+                navigate(
+                  disabledFieldItems.length
+                    ? './new-field/step-1'
+                    : './new-field/step-2',
+                )
+              }
+            />
+          </StyledDiv>
+        </Section>
+      </SettingsPageContainer>
    </SubMenuTopBarContainer>
  );
 };
--- a/front/src/pages/settings/data-model/SettingsObjectEdit.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectEdit.tsx
@ -1,21 +1,14 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import styled from '@emotion/styled';

+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 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();
@ -29,7 +22,7 @@ export const SettingsObjectEdit = () => {

  return (
    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <StyledContainer>
+      <SettingsPageContainer>
        <Breadcrumb
          links={[
            { children: 'Objects', href: '/settings/objects' },
@ -46,7 +39,7 @@ export const SettingsObjectEdit = () => {
            iconKey={activeObject.Icon.name}
          />
        )}
-      </StyledContainer>
+      </SettingsPageContainer>
    </SubMenuTopBarContainer>
  );
 };
--- a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { activeObjectItems } from '@/settings/data-model/constants/mockObjects';
+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';
+
+export const SettingsObjectNewFieldStep1 = () => {
+  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">
+      <SettingsPageContainer>
+        <Breadcrumb
+          links={[
+            { children: 'Objects', href: '/settings/objects' },
+            {
+              children: activeObject?.name ?? '',
+              href: `/settings/objects/${pluralObjectName}`,
+            },
+            { children: 'New Field' },
+          ]}
+        />
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
+  );
+};
--- a/front/src/pages/settings/data-model/SettingsObjects.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjects.tsx
@ -2,11 +2,11 @@ import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';

+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import {
  activeObjectItems,
  disabledObjectItems,
 } from '@/settings/data-model/constants/mockObjects';
-import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
 import {
  IconChevronRight,
  IconDotsVertical,
@ -18,18 +18,13 @@ 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 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;
 `;
@ -61,7 +56,6 @@ const StyledHeader = styled.div`
  align-items: center;
  display: flex;
  justify-content: space-between;
-  margin-bottom: ${({ theme }) => theme.spacing(8)};
 `;

 const StyledH1Title = styled(H1Title)`
@ -74,7 +68,7 @@ export const SettingsObjects = () => {

  return (
    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <StyledContainer>
+      <SettingsPageContainer>
        <StyledHeader>
          <StyledH1Title title="Objects" />
          <Button
@ -87,49 +81,26 @@ export const SettingsObjects = () => {
            }}
          />
        </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}>
+        <Section>
+          <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}
@ -144,7 +115,7 @@ export const SettingsObjects = () => {
                  <TableCell align="right">{objectItem.fields}</TableCell>
                  <TableCell align="right">{objectItem.instances}</TableCell>
                  <StyledIconTableCell>
-                    <StyledIconDotsVertical
+                    <StyledIconChevronRight
                      size={theme.icon.size.md}
                      stroke={theme.icon.stroke.sm}
                    />
@ -152,9 +123,36 @@ export const SettingsObjects = () => {
                </StyledTableRow>
              ))}
            </TableSection>
-          )}
-        </Table>
-      </StyledContainer>
+            {!!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>
+        </Section>
+      </SettingsPageContainer>
    </SubMenuTopBarContainer>
  );
 };
--- a/front/src/pages/settings/data-model/stories/SettingsNewObject.stories.tsx
+++ b/front/src/pages/settings/data-model/stories/SettingsNewObject.stories.tsx
@ -16,7 +16,6 @@ const meta: Meta<PageDecoratorArgs> = {
    routePath: '/settings/objects/new',
  },
  parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
    msw: graphqlMocks,
  },
 };
--- a/front/src/pages/settings/data-model/stories/SettingsObjectDetail.stories.tsx
+++ b/front/src/pages/settings/data-model/stories/SettingsObjectDetail.stories.tsx
@ -17,7 +17,6 @@ const meta: Meta<PageDecoratorArgs> = {
    routeParams: { ':pluralObjectName': 'companies' },
  },
  parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
    msw: graphqlMocks,
  },
 };
--- a/front/src/pages/settings/data-model/stories/SettingsObjectEdit.stories.tsx
+++ b/front/src/pages/settings/data-model/stories/SettingsObjectEdit.stories.tsx
@ -17,7 +17,6 @@ const meta: Meta<PageDecoratorArgs> = {
    routeParams: { ':pluralObjectName': 'companies' },
  },
  parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
    msw: graphqlMocks,
  },
 };
--- a/front/src/pages/settings/data-model/stories/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx
+++ b/front/src/pages/settings/data-model/stories/SettingsObjectNewField/SettingsObjectNewFieldStep1.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 { SettingsObjectNewFieldStep1 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep1';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/SettingsObjectNewField/SettingsObjectNewFieldStep1',
+  component: SettingsObjectNewFieldStep1,
+  decorators: [PageDecorator],
+  args: {
+    routePath: '/settings/objects/:pluralObjectName/new-field/step-1',
+    routeParams: { ':pluralObjectName': 'companies' },
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsObjectNewFieldStep1>;
+
+export const Default: Story = {};
--- a/front/src/pages/settings/data-model/stories/SettingsObjects.stories.tsx
+++ b/front/src/pages/settings/data-model/stories/SettingsObjects.stories.tsx
@ -16,7 +16,6 @@ const meta: Meta<PageDecoratorArgs> = {
  decorators: [PageDecorator],
  args: { routePath: '/settings/objects' },
  parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
    msw: graphqlMocks,
  },
 };