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

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>
+  );
+};

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);
+  },
+};