1809 new object add cancel and save buttons (#2081)

* create save and cancel buttons and their stories

* add SaveAndCancelButtons to the New Object page

* add onSave and onCancel

* modified according to comments

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

@@ -1,3 +1,7 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsNewObjectType } from '@/settings/data-model/new-object/components/SettingsNewObjectType';
 import { IconSettings } from '@/ui/display/icon';
@@ -6,16 +10,33 @@ 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>
-        <Breadcrumb
-          links={[
-            { children: 'Objects', href: '/settings/objects' },
-            { children: 'New' },
-          ]}
-        />
+        <StyledContainer>
+          <Breadcrumb
+            links={[
+              { children: 'Objects', href: '/settings/objects' },
+              { children: 'New' },
+            ]}
+          />
+          <SaveAndCancelButtons
+            isSaveDisabled
+            onCancel={() => {
+              navigate('/settings/objects');
+            }}
+            onSave={() => {}}
+          />
+        </StyledContainer>
         <Section>
           <H2Title
             title="Object Type"