Refactor action bar entries and context menu entries (#1608)

- refactored actionbar entries / context menu entries

front/src/modules/ui/context-menu/components/ContextMenu.tsx

@@ -12,6 +12,8 @@ import { contextMenuEntriesState } from '../states/contextMenuEntriesState';
 import { contextMenuIsOpenState } from '../states/contextMenuIsOpenState';
 import { PositionType } from '../types/PositionType';
 
+import { ContextMenuItem } from './ContextMenuItem';
+
 type OwnProps = {
   selectedIds: string[];
 };
@@ -66,7 +68,15 @@ export function ContextMenu({ selectedIds }: OwnProps) {
     >
       <StyledDropdownMenu>
         <StyledDropdownMenuItemsContainer>
-          {contextMenuEntries}
+          {contextMenuEntries.map((item) => (
+            <ContextMenuItem
+              Icon={item.Icon}
+              label={item.label}
+              accent={item.accent}
+              onClick={item.onClick}
+              key={item.label}
+            />
+          ))}
         </StyledDropdownMenuItemsContainer>
       </StyledDropdownMenu>
     </StyledContainerContextMenu>

front/src/modules/ui/context-menu/components/ContextMenuItem.tsx

@@ -1,16 +1,16 @@
 import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 
-type ContextMenuEntryAccent = 'default' | 'danger';
+import { ContextMenuItemAccent } from '../types/ContextMenuItemAccent';
 
 type OwnProps = {
   Icon: IconComponent;
   label: string;
-  accent?: ContextMenuEntryAccent;
+  accent?: ContextMenuItemAccent;
   onClick: () => void;
 };
 
-export function ContextMenuEntry({
+export function ContextMenuItem({
   label,
   Icon,
   accent = 'default',

front/src/modules/ui/context-menu/states/contextMenuEntriesState.ts

@@ -1,7 +1,8 @@
-import { ReactElement } from 'react';
 import { atom } from 'recoil';
 
-export const contextMenuEntriesState = atom<ReactElement[]>({
+import { ContextMenuEntry } from '../types/ContextMenuEntry';
+
+export const contextMenuEntriesState = atom<ContextMenuEntry[]>({
   key: 'contextMenuEntriesState',
   default: [],
 });

front/src/modules/ui/context-menu/types/ContextMenuEntry.ts

@@ -0,0 +1,10 @@
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+
+import { ContextMenuItemAccent } from './ContextMenuItemAccent';
+
+export type ContextMenuEntry = {
+  label: string;
+  Icon: IconComponent;
+  accent?: ContextMenuItemAccent;
+  onClick: () => void;
+};

front/src/modules/ui/context-menu/types/ContextMenuItemAccent.ts

@@ -0,0 +1 @@
+export type ContextMenuItemAccent = 'default' | 'danger';