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

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