Use SaveAndCancelButtons in SettingsObjectNewFieldStep1 (#2088)

* Use SaveAndCancelButtons in SettingsObjectNewFieldStep1

* refactor to introduce SettingsHeaderContainer

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

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+const StyledSettingsHeaderContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export { StyledSettingsHeaderContainer as SettingsHeaderContainer };

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

@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
-import styled from '@emotion/styled';
 
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
+import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsNewObjectType } from '@/settings/data-model/new-object/components/SettingsNewObjectType';
 import { IconSettings } from '@/ui/display/icon';
@@ -10,19 +10,12 @@ 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: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-
 export const SettingsNewObject = () => {
   const navigate = useNavigate();
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
-        <StyledContainer>
+        <SettingsHeaderContainer>
           <Breadcrumb
             links={[
               { children: 'Objects', href: '/settings/objects' },
@@ -36,7 +29,7 @@ export const SettingsNewObject = () => {
             }}
             onSave={() => {}}
           />
-        </StyledContainer>
+        </SettingsHeaderContainer>
         <Section>
           <H2Title
             title="Object Type"

front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx

@@ -2,6 +2,8 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 
+import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
+import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import {
   activeFieldItems,
@@ -47,16 +49,25 @@ export const SettingsObjectNewFieldStep1 = () => {
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
-        <Breadcrumb
+        <SettingsHeaderContainer>
-          links={[
+          <Breadcrumb
-            { children: 'Objects', href: '/settings/objects' },
+            links={[
-            {
+              { children: 'Objects', href: '/settings/objects' },
-              children: activeObject?.name ?? '',
+              {
-              href: `/settings/objects/${pluralObjectName}`,
+                children: activeObject?.name ?? '',
-            },
+                href: `/settings/objects/${pluralObjectName}`,
-            { children: 'New Field' },
+              },
-          ]}
+              { children: 'New Field' },
-        />
+            ]}
+          />
+          <SaveAndCancelButtons
+            isSaveDisabled
+            onCancel={() => {
+              navigate(`/settings/objects/${pluralObjectName}`);
+            }}
+            onSave={() => {}}
+          />
+        </SettingsHeaderContainer>
         <StyledSection>
           <H2Title
             title="Check disabled fields"

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

@@ -2,6 +2,7 @@ import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import {
   activeObjectItems,
@@ -52,12 +53,6 @@ const StyledIconDotsVertical = styled(IconDotsVertical)`
   color: ${({ theme }) => theme.font.color.tertiary};
 `;
 
-const StyledHeader = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-`;
-
 const StyledH1Title = styled(H1Title)`
   margin-bottom: 0;
 `;
@@ -69,7 +64,7 @@ export const SettingsObjects = () => {
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
-        <StyledHeader>
+        <SettingsHeaderContainer>
           <StyledH1Title title="Objects" />
           <Button
             Icon={IconPlus}
@@ -80,7 +75,7 @@ export const SettingsObjects = () => {
               navigate('/settings/objects/new');
             }}
           />
-        </StyledHeader>
+        </SettingsHeaderContainer>
         <Section>
           <H2Title title="Existing objects" />
           <Table>