From 44099cf8fdd902b574e677f02dea5acf0de17d16 Mon Sep 17 00:00:00 2001
From: bosiraphael <71827178+bosiraphael@users.noreply.github.com>
Date: Wed, 18 Oct 2023 18:21:03 +0200
Subject: [PATCH] 1801 objects settings add activate option to disabled menu
 (#2104)

* wip creating dropdown

* wip styling the dropdown

* wip

* Fix wrong gap in MenuItems

* add handleActivate and handleErase functions

* remove unused styled component

* add story

* modified according to comment
---
 .../SettingsObjectDisabledMenuDropDown.tsx    | 52 ++++++++++++
 ...ingsObjectDisabledMenuDropDown.stories.tsx | 84 +++++++++++++++++++
 .../components/StyledMenuItemBase.tsx         |  2 +-
 .../settings/data-model/SettingsObjects.tsx   | 19 ++---
 4 files changed, 143 insertions(+), 14 deletions(-)
 create mode 100644 front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx
 create mode 100644 front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx

diff --git a/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx b/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx
new file mode 100644
index 000000000..d090ac454
--- /dev/null
+++ b/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx
@@ -0,0 +1,52 @@
+import { IconDotsVertical, IconTrash } from '@/ui/display/icon';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { IconArchiveOff } from '@/ui/input/constants/icons';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { StyledDropdownMenu } from '@/ui/layout/dropdown/components/StyledDropdownMenu';
+import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+
+type SettingsObjectDisabledMenuDropDownProps = {
+  scopeKey: string;
+  handleActivate: () => void;
+  handleErase: () => void;
+};
+
+export const SettingsObjectDisabledMenuDropDown = ({
+  scopeKey,
+  handleActivate,
+  handleErase,
+}: SettingsObjectDisabledMenuDropDownProps) => {
+  return (
+    <DropdownScope
+      dropdownScopeId={scopeKey + '-settings-object-disabled-menu-dropdown'}
+    >
+      <DropdownMenu
+        clickableComponent={
+          <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+        }
+        dropdownComponents={
+          <StyledDropdownMenu width="160px">
+            <DropdownMenuItemsContainer>
+              <MenuItem
+                text="Activate"
+                LeftIcon={IconArchiveOff}
+                onClick={handleActivate}
+              />
+              <MenuItem
+                text="Erase"
+                LeftIcon={IconTrash}
+                accent="danger"
+                onClick={handleErase}
+              />
+            </DropdownMenuItemsContainer>
+          </StyledDropdownMenu>
+        }
+        dropdownHotkeyScope={{
+          scope: scopeKey + '-settings-object-disabled-menu-dropdown',
+        }}
+      />
+    </DropdownScope>
+  );
+};
diff --git a/front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx b/front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx
new file mode 100644
index 000000000..97e67f749
--- /dev/null
+++ b/front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx
@@ -0,0 +1,84 @@
+import { expect } from '@storybook/jest';
+import { jest } from '@storybook/jest';
+import { Decorator, Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { SettingsObjectDisabledMenuDropDown } from '../SettingsObjectDisabledMenuDropDown';
+
+const handleActivateMockFunction = jest.fn();
+const handleEraseMockFunction = jest.fn();
+
+const ClearMocksDecorator: Decorator = (Story, context) => {
+  if (context.parameters.clearMocks) {
+    handleActivateMockFunction.mockClear();
+    handleEraseMockFunction.mockClear();
+  }
+  return <Story />;
+};
+
+const meta: Meta<typeof SettingsObjectDisabledMenuDropDown> = {
+  title: 'Modules/Settings/DataModel/SettingsObjectDisabledMenuDropDown',
+  component: SettingsObjectDisabledMenuDropDown,
+  args: {
+    scopeKey: 'settings-object-disabled-menu-dropdown',
+    handleActivate: handleActivateMockFunction,
+    handleErase: handleEraseMockFunction,
+  },
+  decorators: [ComponentDecorator, ClearMocksDecorator],
+  parameters: {
+    clearMocks: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SettingsObjectDisabledMenuDropDown>;
+
+export const Default: Story = {};
+
+export const WithOpen: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const dropdownButton = await canvas.findByRole('button');
+
+    await userEvent.click(dropdownButton);
+  },
+};
+
+export const WithActivate: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const dropdownButton = await canvas.findByRole('button');
+
+    await userEvent.click(dropdownButton);
+
+    await expect(handleActivateMockFunction).toHaveBeenCalledTimes(0);
+
+    const activateMenuItem = await canvas.findByText('Activate');
+
+    await userEvent.click(activateMenuItem);
+
+    await expect(handleActivateMockFunction).toHaveBeenCalledTimes(1);
+  },
+};
+
+export const WithErase: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const dropdownButton = await canvas.findByRole('button');
+
+    await userEvent.click(dropdownButton);
+
+    await expect(handleEraseMockFunction).toHaveBeenCalledTimes(0);
+
+    const eraseMenuItem = await canvas.findByText('Erase');
+
+    await userEvent.click(eraseMenuItem);
+
+    await expect(handleEraseMockFunction).toHaveBeenCalledTimes(1);
+  },
+};
diff --git a/front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
index d6d4aae80..2f5ffeb51 100644
--- a/front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
+++ b/front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
@@ -82,7 +82,7 @@ export const StyledMenuItemLeftContent = styled.div`
 
   flex-direction: row;
 
-  gap: ${({ theme }) => theme.spacing(1)};
+  gap: ${({ theme }) => theme.spacing(2)};
   min-width: 0;
   width: 100%;
 `;
diff --git a/front/src/pages/settings/data-model/SettingsObjects.tsx b/front/src/pages/settings/data-model/SettingsObjects.tsx
index e447861cd..80eb1da4a 100644
--- a/front/src/pages/settings/data-model/SettingsObjects.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjects.tsx
@@ -9,12 +9,8 @@ import {
   disabledObjectItems,
 } from '@/settings/data-model/constants/mockObjects';
 import { SettingsObjectCoverImage } from '@/settings/data-model/objects/SettingsObjectCoverImage';
-import {
-  IconChevronRight,
-  IconDotsVertical,
-  IconPlus,
-  IconSettings,
-} from '@/ui/display/icon';
+import { SettingsObjectDisabledMenuDropDown } from '@/settings/data-model/objects/SettingsObjectDisabledMenuDropDown';
+import { IconChevronRight, IconPlus, IconSettings } from '@/ui/display/icon';
 import { Tag } from '@/ui/display/tag/components/Tag';
 import { H1Title } from '@/ui/display/typography/components/H1Title';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
@@ -50,10 +46,6 @@ const StyledIconChevronRight = styled(IconChevronRight)`
   color: ${({ theme }) => theme.font.color.tertiary};
 `;
 
-const StyledIconDotsVertical = styled(IconDotsVertical)`
-  color: ${({ theme }) => theme.font.color.tertiary};
-`;
-
 const StyledH1Title = styled(H1Title)`
   margin-bottom: 0;
 `;
@@ -141,9 +133,10 @@ export const SettingsObjects = () => {
                         {objectItem.instances}
                       </TableCell>
                       <StyledIconTableCell>
-                        <StyledIconDotsVertical
-                          size={theme.icon.size.md}
-                          stroke={theme.icon.stroke.sm}
+                        <SettingsObjectDisabledMenuDropDown
+                          scopeKey={objectItem.name}
+                          handleActivate={() => {}}
+                          handleErase={() => {}}
                         />
                       </StyledIconTableCell>
                     </StyledTableRow>