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/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx

@@ -0,0 +1,9 @@
+import { LightButton } from '@/ui/input/button/components/LightButton';
+
+type CancelButtonProps = {
+  onCancel?: () => void;
+};
+
+export const CancelButton = ({ onCancel }: CancelButtonProps) => {
+  return <LightButton title="Cancel" accent="tertiary" onClick={onCancel} />;
+};

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

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+
+import { CancelButton } from './CancelButton';
+import { SaveButton } from './SaveButton';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+type SaveAndCancelButtonsProps = {
+  onSave?: () => void;
+  onCancel?: () => void;
+  isSaveDisabled?: boolean;
+};
+
+export const SaveAndCancelButtons = ({
+  onSave,
+  onCancel,
+  isSaveDisabled,
+}: SaveAndCancelButtonsProps) => {
+  return (
+    <StyledContainer>
+      <CancelButton onCancel={onCancel} />
+      <SaveButton onSave={onSave} disabled={isSaveDisabled} />
+    </StyledContainer>
+  );
+};

front/src/modules/settings/components/SaveAndCancelButtons/SaveButton.tsx

@@ -0,0 +1,21 @@
+import { Button } from '@/ui/input/button/components/Button';
+import { IconDeviceFloppy } from '@/ui/input/constants/icons';
+
+type SaveButtonProps = {
+  onSave?: () => void;
+  disabled?: boolean;
+};
+
+export const SaveButton = ({ onSave, disabled }: SaveButtonProps) => {
+  return (
+    <Button
+      title="Save"
+      variant="primary"
+      size="small"
+      accent="blue"
+      disabled={disabled}
+      onClick={onSave}
+      Icon={IconDeviceFloppy}
+    />
+  );
+};

front/src/modules/settings/components/__stories__/CancelButton.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CancelButton } from '../SaveAndCancelButtons/CancelButton';
+
+const meta: Meta<typeof CancelButton> = {
+  title: 'Modules/Settings/CancelButton',
+  component: CancelButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof CancelButton>;
+
+export const Default: Story = {
+  argTypes: {
+    onCancel: { control: false },
+  },
+  args: {
+    onCancel: () => {},
+  },
+};

front/src/modules/settings/components/__stories__/SaveButton.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { SaveButton } from '../SaveAndCancelButtons/SaveButton';
+
+const meta: Meta<typeof SaveButton> = {
+  title: 'Modules/Settings/SaveButton',
+  component: SaveButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof SaveButton>;
+
+export const Default: Story = {
+  argTypes: {
+    onSave: { control: false },
+  },
+  args: {
+    onSave: () => {},
+    disabled: false,
+  },
+};
+
+export const Disabled: Story = {
+  argTypes: {
+    onSave: { control: false },
+  },
+  args: {
+    onSave: () => {},
+    disabled: true,
+  },
+};

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
+        <StyledContainer>
-          links={[
+          <Breadcrumb
-            { children: 'Objects', href: '/settings/objects' },
+            links={[
-            { children: 'New' },
+              { children: 'Objects', href: '/settings/objects' },
-          ]}
+              { children: 'New' },
-        />
+            ]}
+          />
+          <SaveAndCancelButtons
+            isSaveDisabled
+            onCancel={() => {
+              navigate('/settings/objects');
+            }}
+            onSave={() => {}}
+          />
+        </StyledContainer>
         <Section>
           <H2Title
             title="Object Type"