From a342af74d17392411e5f265ac45c6fe3c2cb9e7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Wed, 11 Oct 2023 15:34:10 +0200
Subject: [PATCH] feat: add Object Edit page (#1968)

Closes #1907
---
 front/src/App.tsx                             |  5 +++
 front/src/modules/types/SettingsPath.ts       |  1 +
 .../src/pages/settings/SettingsObjectEdit.tsx | 45 +++++++++++++++++++
 .../SettingsObjectEdit.stories.tsx            | 29 ++++++++++++
 4 files changed, 80 insertions(+)
 create mode 100644 front/src/pages/settings/SettingsObjectEdit.tsx
 create mode 100644 front/src/pages/settings/__stories__/SettingsObjectEdit.stories.tsx

diff --git a/front/src/App.tsx b/front/src/App.tsx
index 0c46cd511..188302e35 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -19,6 +19,7 @@ import { People } from '~/pages/people/People';
 import { PersonShow } from '~/pages/people/PersonShow';
 import { SettingsExperience } from '~/pages/settings/SettingsExperience';
 import { SettingsObjectDetail } from '~/pages/settings/SettingsObjectDetail';
+import { SettingsObjectEdit } from '~/pages/settings/SettingsObjectEdit';
 import { SettingsObjects } from '~/pages/settings/SettingsObjects';
 import { SettingsProfile } from '~/pages/settings/SettingsProfile';
 import { SettingsWorkspace } from '~/pages/settings/SettingsWorkspace';
@@ -80,6 +81,10 @@ export const App = () => {
                   path={SettingsPath.ObjectDetail}
                   element={<SettingsObjectDetail />}
                 />
+                <Route
+                  path={SettingsPath.ObjectEdit}
+                  element={<SettingsObjectEdit />}
+                />
               </Routes>
             }
           />
diff --git a/front/src/modules/types/SettingsPath.ts b/front/src/modules/types/SettingsPath.ts
index 6606a2d59..c89d5dd11 100644
--- a/front/src/modules/types/SettingsPath.ts
+++ b/front/src/modules/types/SettingsPath.ts
@@ -3,6 +3,7 @@ export enum SettingsPath {
   Experience = 'profile/experience',
   Objects = 'objects',
   ObjectDetail = 'objects/:pluralObjectName',
+  ObjectEdit = 'objects/:pluralObjectName/edit',
   WorkspaceMembersPage = 'workspace-members',
   Workspace = 'workspace',
 }
diff --git a/front/src/pages/settings/SettingsObjectEdit.tsx b/front/src/pages/settings/SettingsObjectEdit.tsx
new file mode 100644
index 000000000..e07b6896b
--- /dev/null
+++ b/front/src/pages/settings/SettingsObjectEdit.tsx
@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { AppPath } from '@/types/AppPath';
+import { Breadcrumb } from '@/ui/breadcrumb/components/Breadcrumb';
+import { IconSettings } from '@/ui/icon';
+import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
+
+import { activeObjectItems } from './constants/mockObjects';
+import { objectSettingsWidth } from './constants/objectSettings';
+
+const StyledContainer = styled.div`
+  padding: ${({ theme }) => theme.spacing(8)};
+  width: ${objectSettingsWidth};
+`;
+
+export const SettingsObjectEdit = () => {
+  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">
+      <StyledContainer>
+        <Breadcrumb
+          links={[
+            { children: 'Objects', href: '/settings/objects' },
+            {
+              children: activeObject?.name ?? '',
+              href: `/settings/objects/${pluralObjectName}`,
+            },
+            { children: 'Edit' },
+          ]}
+        />
+      </StyledContainer>
+    </SubMenuTopBarContainer>
+  );
+};
diff --git a/front/src/pages/settings/__stories__/SettingsObjectEdit.stories.tsx b/front/src/pages/settings/__stories__/SettingsObjectEdit.stories.tsx
new file mode 100644
index 000000000..e5c66badd
--- /dev/null
+++ b/front/src/pages/settings/__stories__/SettingsObjectEdit.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { SettingsObjectEdit } from '../SettingsObjectEdit';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/SettingsObjectEdit',
+  component: SettingsObjectEdit,
+  decorators: [PageDecorator],
+  args: {
+    routePath: '/settings/objects/:pluralObjectName/edit',
+    routeParams: { ':pluralObjectName': 'companies' },
+  },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsObjectEdit>;
+
+export const Default: Story = {};