From 3dae11b6e495ddfe12d2dce7c503b8bee9d60b69 Mon Sep 17 00:00:00 2001
From: bosiraphael <71827178+bosiraphael@users.noreply.github.com>
Date: Mon, 16 Oct 2023 18:02:39 +0200
Subject: [PATCH] Create page Object Field Step 2 (#2068)

* create page

* change runs-on param
---
 .github/workflows/ci-front.yaml               |  2 +-
 front/src/App.tsx                             |  5 +++
 front/src/modules/types/SettingsPath.ts       |  1 +
 .../SettingsObjectNewFieldStep2.tsx           | 38 +++++++++++++++++++
 .../SettingsObjectNewFieldStep2.stories.tsx   | 28 ++++++++++++++
 5 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
 create mode 100644 front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep2.stories.tsx

diff --git a/.github/workflows/ci-front.yaml b/.github/workflows/ci-front.yaml
index 4782aa316..885e10cb2 100644
--- a/.github/workflows/ci-front.yaml
+++ b/.github/workflows/ci-front.yaml
@@ -69,7 +69,7 @@ jobs:
             "yarn storybook:pages:coverage"
   front-modules-sb-test:
     needs: front-yarn-install
-    runs-on: ubuntu-latest
+    runs-on: ci-4-cores
     env:
       REACT_APP_SERVER_BASE_URL: http://localhost:3000
     steps:
diff --git a/front/src/App.tsx b/front/src/App.tsx
index 1eeb307ce..271f1096c 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -30,6 +30,7 @@ import { getPageTitleFromPath } from '~/utils/title-utils';
 
 import { ObjectTablePage } from './pages/companies/ObjectsTable';
 import { SettingsObjectNewFieldStep1 } from './pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1';
+import { SettingsObjectNewFieldStep2 } from './pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2';
 
 export const App = () => {
   const { pathname } = useLocation();
@@ -107,6 +108,10 @@ export const App = () => {
                   path={SettingsPath.ObjectNewFieldStep1}
                   element={<SettingsObjectNewFieldStep1 />}
                 />
+                <Route
+                  path={SettingsPath.ObjectNewFieldStep2}
+                  element={<SettingsObjectNewFieldStep2 />}
+                />
               </Routes>
             }
           />
diff --git a/front/src/modules/types/SettingsPath.ts b/front/src/modules/types/SettingsPath.ts
index 0dd23d596..7e180135c 100644
--- a/front/src/modules/types/SettingsPath.ts
+++ b/front/src/modules/types/SettingsPath.ts
@@ -5,6 +5,7 @@ export enum SettingsPath {
   ObjectDetail = 'objects/:pluralObjectName',
   ObjectEdit = 'objects/:pluralObjectName/edit',
   ObjectNewFieldStep1 = 'objects/:pluralObjectName/new-field/step-1',
+  ObjectNewFieldStep2 = 'objects/:pluralObjectName/new-field/step-2',
   NewObject = 'objects/new',
   WorkspaceMembersPage = 'workspace-members',
   Workspace = 'workspace',
diff --git a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
new file mode 100644
index 000000000..173cc31f8
--- /dev/null
+++ b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { activeObjectItems } from '@/settings/data-model/constants/mockObjects';
+import { AppPath } from '@/types/AppPath';
+import { IconSettings } from '@/ui/display/icon';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+
+export const SettingsObjectNewFieldStep2 = () => {
+  const navigate = useNavigate();
+  const { pluralObjectName = '' } = useParams();
+  const activeObject = activeObjectItems.find(
+    (activeObject) => activeObject.name.toLowerCase() === pluralObjectName,
+  );
+
+  useEffect(() => {
+    if (!activeObject) navigate(AppPath.NotFound);
+  }, [activeObject, navigate]);
+
+  return (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <SettingsPageContainer>
+        <Breadcrumb
+          links={[
+            { children: 'Objects', href: '/settings/objects' },
+            {
+              children: activeObject?.name ?? '',
+              href: `/settings/objects/${pluralObjectName}`,
+            },
+            { children: 'New Field' },
+          ]}
+        />
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
+  );
+};
diff --git a/front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep2.stories.tsx b/front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep2.stories.tsx
new file mode 100644
index 000000000..b572ad9df
--- /dev/null
+++ b/front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep2.stories.tsx
@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { SettingsObjectNewFieldStep2 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep2';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/SettingsObjectNewField/SettingsObjectNewFieldStep2',
+  component: SettingsObjectNewFieldStep2,
+  decorators: [PageDecorator],
+  args: {
+    routePath: '/settings/objects/:pluralObjectName/new-field/step-2',
+    routeParams: { ':pluralObjectName': 'companies' },
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsObjectNewFieldStep2>;
+
+export const Default: Story = {};