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/App.tsx

@@ -29,6 +29,7 @@ import { Tasks } from '~/pages/tasks/Tasks';
 import { getPageTitleFromPath } from '~/utils/title-utils';
 
 import { ObjectTablePage } from './pages/companies/ObjectsTable';
+import { SettingsObjectNewFieldStep1 } from './pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1';
 
 export const App = () => {
   const { pathname } = useLocation();
@@ -102,6 +103,10 @@ export const App = () => {
                   path={SettingsPath.NewObject}
                   element={<SettingsNewObject />}
                 />
+                <Route
+                  path={SettingsPath.ObjectNewFieldStep1}
+                  element={<SettingsObjectNewFieldStep1 />}
+                />
               </Routes>
             }
           />

front/src/modules/settings/components/SettingsPageContainer.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+import { objectSettingsWidth } from '../data-model/constants/objectSettings';
+
+const StyledSettingsPageContainer = styled.div<{ width?: number }>`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(8)};
+  padding: ${({ theme }) => theme.spacing(8)};
+  width: ${({ width }) => (width ? width + 'px' : objectSettingsWidth)};
+`;
+
+export { StyledSettingsPageContainer as SettingsPageContainer };

front/src/modules/types/SettingsPath.ts

@@ -4,6 +4,7 @@ export enum SettingsPath {
   Objects = 'objects',
   ObjectDetail = 'objects/:pluralObjectName',
   ObjectEdit = 'objects/:pluralObjectName/edit',
+  ObjectNewFieldStep1 = 'objects/:pluralObjectName/new-field/step-1',
   NewObject = 'objects/new',
   WorkspaceMembersPage = 'workspace-members',
   Workspace = 'workspace',

front/src/modules/ui/layout/section/components/Section.tsx

@@ -25,8 +25,6 @@ const StyledSection = styled.div<{
   fontColor: SectionFontColor;
 }>`
   color: ${({ theme, fontColor }) => theme.font.color[fontColor]};
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
-  margin-top: ${({ theme }) => theme.spacing(4)};
   text-align: ${({ alignment }) => alignment};
   width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
 `;

front/src/pages/auth/__stories__/CreateProfile.stories.tsx

@@ -19,7 +19,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.CreateProfile },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: [
       graphql.query(
         getOperationName(GET_CURRENT_USER) ?? '',

front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx

@@ -19,7 +19,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.CreateWorkspace },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: [
       graphql.query(
         getOperationName(GET_CURRENT_USER) ?? '',

front/src/pages/auth/__stories__/SignInUp.stories.tsx

@@ -16,7 +16,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.SignIn },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
     cookie: {
       tokenPair: '{}',

front/src/pages/companies/__stories__/Companies.add.stories.tsx

@@ -20,7 +20,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.CompaniesPage },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx

@@ -21,7 +21,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.CompaniesPage },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx

@@ -19,7 +19,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.CompaniesPage },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/companies/__stories__/Companies.stories.tsx

@@ -15,7 +15,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.CompaniesPage },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/companies/__stories__/Company.stories.tsx

@@ -29,7 +29,6 @@ const meta: Meta<PageDecoratorArgs> = {
     routeParams: { ':companyId': mockedCompaniesData[0].id },
   },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: [
       ...graphqlMocks,
       graphql.query(

front/src/pages/not-found/__stories__/NotFound.stories.tsx

@@ -14,7 +14,6 @@ const meta: Meta<PageDecoratorArgs> = {
     routePath: 'toto-not-found',
   },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/opportunities/__stories__/Opportunities.stories.tsx

@@ -16,7 +16,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.OpportunitiesPage },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/people/__stories__/People.add.stories.tsx

@@ -20,7 +20,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.PeoplePage },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/people/__stories__/People.filterBy.stories.tsx

@@ -21,7 +21,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.PeoplePage },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/people/__stories__/People.inputs.stories.tsx

@@ -28,7 +28,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.PeoplePage },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/people/__stories__/People.sortBy.stories.tsx

@@ -20,7 +20,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.PeoplePage },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/people/__stories__/People.stories.tsx

@@ -15,7 +15,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.PeoplePage },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/people/__stories__/Person.stories.tsx

@@ -19,7 +19,6 @@ const meta: Meta<PageDecoratorArgs> = {
     routeParams: { ':personId': mockedPeopleData[0].id },
   },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/settings/SettingsExperience.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { IconSettings } from '@/ui/display/icon';
 import { H1Title } from '@/ui/display/typography/components/H1Title';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
@@ -8,12 +9,8 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
 import { Section } from '@/ui/layout/section/components/Section';
 import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
 
-const StyledContainer = styled.div`
+const StyledH1Title = styled(H1Title)`
-  display: flex;
+  margin-bottom: 0;
-  flex-direction: column;
-  padding: ${({ theme }) => theme.spacing(8)};
-  padding-bottom: ${({ theme }) => theme.spacing(10)};
-  width: 350px;
 `;
 
 export const SettingsExperience = () => {
@@ -21,13 +18,13 @@ export const SettingsExperience = () => {
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <StyledContainer>
+      <SettingsPageContainer width={350}>
-        <H1Title title="Experience" />
+        <StyledH1Title title="Experience" />
         <Section>
           <H2Title title="Appearance" />
           <ColorSchemePicker value={colorScheme} onChange={setColorScheme} />
         </Section>
-      </StyledContainer>
+      </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );
 };

front/src/pages/settings/SettingsProfile.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { DeleteAccount } from '@/settings/profile/components/DeleteAccount';
 import { EmailField } from '@/settings/profile/components/EmailField';
 import { NameFields } from '@/settings/profile/components/NameFields';
@@ -11,50 +12,39 @@ import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 
-const StyledContainer = styled.div`
+const StyledH1Title = styled(H1Title)`
-  display: flex;
+  margin-bottom: 0;
-  flex-direction: column;
-  height: fit-content;
-  padding: ${({ theme }) => theme.spacing(8)};
-  padding-bottom: ${({ theme }) => theme.spacing(10)};
-  padding-bottom: 30px;
-  width: 350px;
 `;
 
 export const SettingsProfile = () => (
   <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-    <>
+    <SettingsPageContainer width={350}>
-      <StyledContainer>
+      <StyledH1Title title="Profile" />
-        <H1Title title="Profile" />
+      <Section>
-        <Section>
+        <H2Title title="Picture" />
-          <H2Title title="Picture" />
+        <ProfilePictureUploader />
-          <ProfilePictureUploader />
+      </Section>
-        </Section>
+      <Section>
-        <Section>
+        <H2Title title="Name" description="Your name as it will be displayed" />
-          <H2Title
+        <NameFields />
-            title="Name"
+      </Section>
-            description="Your name as it will be displayed"
+      <Section>
-          />
+        <H2Title
-          <NameFields />
+          title="Email"
-        </Section>
+          description="The email associated to your account"
-        <Section>
+        />
-          <H2Title
+        <EmailField />
-            title="Email"
+      </Section>
-            description="The email associated to your account"
+      <Section>
-          />
+        <H2Title
-          <EmailField />
+          title="Support"
-        </Section>
+          addornment={<ToggleField />}
-        <Section>
+          description="Grant Twenty support temporary access to your account so we can troubleshoot problems or recover content on your behalf. You can revoke access at any time."
-          <H2Title
+        />
-            title="Support"
+      </Section>
-            addornment={<ToggleField />}
+      <Section>
-            description="Grant Twenty support temporary access to your account so we can troubleshoot problems or recover content on your behalf. You can revoke access at any time."
+        <DeleteAccount />
-          />
+      </Section>
-        </Section>
+    </SettingsPageContainer>
-        <Section>
-          <DeleteAccount />
-        </Section>
-      </StyledContainer>
-    </>
   </SubMenuTopBarContainer>
 );

front/src/pages/settings/SettingsWorkspace.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
 import { NameField } from '@/settings/workspace/components/NameField';
 import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
@@ -9,31 +10,26 @@ import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 
-const StyledContainer = styled.div`
+const StyledH1Title = styled(H1Title)`
-  display: flex;
+  margin-bottom: 0;
-  flex-direction: column;
-  padding: ${({ theme }) => theme.spacing(8)};
-  width: 350px;
 `;
 
 export const SettingsWorkspace = () => (
   <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-    <div>
+    <SettingsPageContainer width={350}>
-      <StyledContainer>
+      <StyledH1Title title="General" />
-        <H1Title title="General" />
+      <Section>
-        <Section>
+        <H2Title title="Picture" />
-          <H2Title title="Picture" />
+        <WorkspaceLogoUploader />
-          <WorkspaceLogoUploader />
+      </Section>
-        </Section>
+      <Section>
-        <Section>
+        <H2Title title="Name" description="Name of your workspace" />
-          <H2Title title="Name" description="Name of your workspace" />
+        <NameField />
-          <NameField />
+      </Section>
-        </Section>
 
-        <Section>
+      <Section>
-          <DeleteWorkspace />
+        <DeleteWorkspace />
-        </Section>
+      </Section>
-      </StyledContainer>
+    </SettingsPageContainer>
-    </div>
   </SubMenuTopBarContainer>
 );

front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { IconSettings, IconTrash } from '@/ui/display/icon';
 import { H1Title } from '@/ui/display/typography/components/H1Title';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
@@ -17,12 +18,8 @@ import {
   useRemoveWorkspaceMemberMutation,
 } from '~/generated/graphql';
 
-const StyledContainer = styled.div`
+const StyledH1Title = styled(H1Title)`
-  display: flex;
+  margin-bottom: 0;
-  flex-direction: column;
-  height: fit-content;
-  padding: ${({ theme }) => theme.spacing(8)};
-  width: 350px;
 `;
 
 const StyledButtonContainer = styled.div`
@@ -84,8 +81,8 @@ export const SettingsWorkspaceMembers = () => {
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <StyledContainer>
+      <SettingsPageContainer width={350}>
-        <H1Title title="Members" />
+        <StyledH1Title title="Members" />
         {workspace?.inviteHash && (
           <Section>
             <H2Title
@@ -124,7 +121,7 @@ export const SettingsWorkspaceMembers = () => {
             />
           ))}
         </Section>
-      </StyledContainer>
+      </SettingsPageContainer>
       <ConfirmationModal
         isOpen={isConfirmationModalOpen}
         setIsOpen={setIsConfirmationModalOpen}

front/src/pages/settings/__stories__/SettingsExperience.stories.tsx

@@ -14,7 +14,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: '/settings/experience' },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/settings/__stories__/SettingsProfile.stories.tsx

@@ -15,7 +15,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: '/settings/profile' },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/settings/__stories__/SettingsWorkspace.stories.tsx

@@ -14,7 +14,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: '/settings/workspace' },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx

@@ -16,7 +16,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: '/settings/workspace-members' },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };

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

@@ -1,6 +1,4 @@
-import styled from '@emotion/styled';
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-
-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';
@@ -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>
   );
 };

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;
+  justify-content: flex-end;
-  height: fit-content;
+  padding-top: ${({ theme }) => theme.spacing(2)};
-  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 = () => {
@@ -54,8 +44,8 @@ export const SettingsObjectDetail = () => {
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <StyledContainer>
+      <SettingsPageContainer>
-        <StyledBreadcrumb
+        <Breadcrumb
           links={[
             { children: 'Objects', href: '/settings/objects' },
             { children: activeObject?.name ?? '' },
@@ -68,43 +58,54 @@ export const SettingsObjectDetail = () => {
             type={activeObject.type}
           />
         )}
-        <H2Title
+        <Section>
-          title="Fields"
+          <H2Title
-          description={`Customise the fields available in the ${activeObject?.singularName} views and their display order in the ${activeObject?.singularName} detail view and menus.`}
+            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>
+          <Table>
-            <TableHeader>Name</TableHeader>
+            <StyledObjectFieldTableRow>
-            <TableHeader>Field type</TableHeader>
+              <TableHeader>Name</TableHeader>
-            <TableHeader>Data type</TableHeader>
+              <TableHeader>Field type</TableHeader>
-            <TableHeader></TableHeader>
+              <TableHeader>Data type</TableHeader>
-          </StyledObjectFieldTableRow>
+              <TableHeader></TableHeader>
-          <TableSection title="Active">
+            </StyledObjectFieldTableRow>
-            {activeFieldItems.map((fieldItem) => (
+            <TableSection title="Active">
-              <SettingsObjectFieldItemTableRow
+              {activeFieldItems.map((fieldItem) => (
-                key={fieldItem.name}
-                fieldItem={fieldItem}
-              />
-            ))}
-          </TableSection>
-          {!!disabledFieldItems.length && (
-            <TableSection isInitiallyExpanded={false} title="Disabled">
-              {disabledFieldItems.map((fieldItem) => (
                 <SettingsObjectFieldItemTableRow
                   key={fieldItem.name}
                   fieldItem={fieldItem}
                 />
               ))}
             </TableSection>
-          )}
+            {!!disabledFieldItems.length && (
-        </Table>
+              <TableSection isInitiallyExpanded={false} title="Disabled">
-        <StyledAddFieldButton
+                {disabledFieldItems.map((fieldItem) => (
-          Icon={IconPlus}
+                  <SettingsObjectFieldItemTableRow
-          title="Add Field"
+                    key={fieldItem.name}
-          size="small"
+                    fieldItem={fieldItem}
-          variant="secondary"
+                  />
-        />
+                ))}
-      </StyledContainer>
+              </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>
   );
 };

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

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

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" />
+        <Section>
-        <Table>
+          <H2Title title="Existing objects" />
-          <StyledTableRow>
+          <Table>
-            <TableHeader>Name</TableHeader>
+            <StyledTableRow>
-            <TableHeader>Type</TableHeader>
+              <TableHeader>Name</TableHeader>
-            <TableHeader align="right">Fields</TableHeader>
+              <TableHeader>Type</TableHeader>
-            <TableHeader align="right">Instances</TableHeader>
+              <TableHeader align="right">Fields</TableHeader>
-            <TableHeader></TableHeader>
+              <TableHeader align="right">Instances</TableHeader>
-          </StyledTableRow>
+              <TableHeader></TableHeader>
-          <TableSection title="Active">
+            </StyledTableRow>
-            {activeObjectItems.map((objectItem) => (
+            <TableSection title="Active">
-              <StyledTableRow
+              {activeObjectItems.map((objectItem) => (
-                key={objectItem.name}
+                <StyledTableRow
-                onClick={() =>
+                  key={objectItem.name}
-                  navigate(`/settings/objects/${objectItem.name.toLowerCase()}`)
+                  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}
@@ -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>
-          )}
+            {!!disabledObjectItems.length && (
-        </Table>
+              <TableSection title="Disabled">
-      </StyledContainer>
+                {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>
   );
 };

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

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

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

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 = {};

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

front/src/pages/tasks/__stories__/Tasks.stories.tsx

@@ -15,7 +15,6 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.TasksPage },
   parameters: {
-    docs: { story: 'inline', iframeHeight: '500px' },
     msw: graphqlMocks,
   },
 };