From 0d6386bc8d9d608eff21220076147561916098d9 Mon Sep 17 00:00:00 2001
From: bosiraphael <71827178+bosiraphael@users.noreply.github.com>
Date: Tue, 17 Oct 2023 14:55:41 +0200
Subject: [PATCH] 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
---
 .../SaveAndCancelButtons/CancelButton.tsx     |  9 +++++
 .../SaveAndCancelButtons.tsx                  | 29 ++++++++++++++++
 .../SaveAndCancelButtons/SaveButton.tsx       | 21 ++++++++++++
 .../__stories__/CancelButton.stories.tsx      | 20 +++++++++++
 .../__stories__/SaveButton.stories.tsx        | 31 +++++++++++++++++
 .../settings/data-model/SettingsNewObject.tsx | 33 +++++++++++++++----
 6 files changed, 137 insertions(+), 6 deletions(-)
 create mode 100644 front/src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx
 create mode 100644 front/src/modules/settings/components/SaveAndCancelButtons/SaveAndCancelButtons.tsx
 create mode 100644 front/src/modules/settings/components/SaveAndCancelButtons/SaveButton.tsx
 create mode 100644 front/src/modules/settings/components/__stories__/CancelButton.stories.tsx
 create mode 100644 front/src/modules/settings/components/__stories__/SaveButton.stories.tsx

diff --git a/front/src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx b/front/src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx
new file mode 100644
index 000000000..f20d8737d
--- /dev/null
+++ b/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} />;
+};
diff --git a/front/src/modules/settings/components/SaveAndCancelButtons/SaveAndCancelButtons.tsx b/front/src/modules/settings/components/SaveAndCancelButtons/SaveAndCancelButtons.tsx
new file mode 100644
index 000000000..069e8aa20
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/front/src/modules/settings/components/SaveAndCancelButtons/SaveButton.tsx b/front/src/modules/settings/components/SaveAndCancelButtons/SaveButton.tsx
new file mode 100644
index 000000000..d1adfe674
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/front/src/modules/settings/components/__stories__/CancelButton.stories.tsx b/front/src/modules/settings/components/__stories__/CancelButton.stories.tsx
new file mode 100644
index 000000000..7a67047d8
--- /dev/null
+++ b/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: () => {},
+  },
+};
diff --git a/front/src/modules/settings/components/__stories__/SaveButton.stories.tsx b/front/src/modules/settings/components/__stories__/SaveButton.stories.tsx
new file mode 100644
index 000000000..1feffe8f6
--- /dev/null
+++ b/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,
+  },
+};
diff --git a/front/src/pages/settings/data-model/SettingsNewObject.tsx b/front/src/pages/settings/data-model/SettingsNewObject.tsx
index 2bcd4db0f..fd7e37930 100644
--- a/front/src/pages/settings/data-model/SettingsNewObject.tsx
+++ b/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"