From d19011f882a5e6b678270f5bb7e0285bba82db42 Mon Sep 17 00:00:00 2001
From: bosiraphael <71827178+bosiraphael@users.noreply.github.com>
Date: Tue, 17 Oct 2023 16:32:21 +0200
Subject: [PATCH] Use SaveAndCancelButtons in SettingsObjectNewFieldStep1
 (#2088)

* Use SaveAndCancelButtons in SettingsObjectNewFieldStep1

* refactor to introduce SettingsHeaderContainer
---
 .../components/SettingsHeaderContainer.tsx    |  9 ++++++
 .../settings/data-model/SettingsNewObject.tsx | 13 ++------
 .../SettingsObjectNewFieldStep1.tsx           | 31 +++++++++++++------
 .../settings/data-model/SettingsObjects.tsx   | 11 ++-----
 4 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 front/src/modules/settings/components/SettingsHeaderContainer.tsx

diff --git a/front/src/modules/settings/components/SettingsHeaderContainer.tsx b/front/src/modules/settings/components/SettingsHeaderContainer.tsx
new file mode 100644
index 000000000..f6d0cfd0e
--- /dev/null
+++ b/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 };
diff --git a/front/src/pages/settings/data-model/SettingsNewObject.tsx b/front/src/pages/settings/data-model/SettingsNewObject.tsx
index fd7e37930..9259b735c 100644
--- a/front/src/pages/settings/data-model/SettingsNewObject.tsx
+++ b/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"
diff --git a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
index 9aaccc490..62dcc1d52 100644
--- a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
+++ b/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
-          links={[
-            { children: 'Objects', href: '/settings/objects' },
-            {
-              children: activeObject?.name ?? '',
-              href: `/settings/objects/${pluralObjectName}`,
-            },
-            { children: 'New Field' },
-          ]}
-        />
+        <SettingsHeaderContainer>
+          <Breadcrumb
+            links={[
+              { children: 'Objects', href: '/settings/objects' },
+              {
+                children: activeObject?.name ?? '',
+                href: `/settings/objects/${pluralObjectName}`,
+              },
+              { children: 'New Field' },
+            ]}
+          />
+          <SaveAndCancelButtons
+            isSaveDisabled
+            onCancel={() => {
+              navigate(`/settings/objects/${pluralObjectName}`);
+            }}
+            onSave={() => {}}
+          />
+        </SettingsHeaderContainer>
         <StyledSection>
           <H2Title
             title="Check disabled fields"
diff --git a/front/src/pages/settings/data-model/SettingsObjects.tsx b/front/src/pages/settings/data-model/SettingsObjects.tsx
index e0c30e03a..352898657 100644
--- a/front/src/pages/settings/data-model/SettingsObjects.tsx
+++ b/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>