Cosmetic refactoring on context menu (#1209)

* Cosmetic refactoring on context menu * Fix lint * Fix lint * Fix lint * Fix lint * Fix lint * Fix lint
2023-08-15 02:34:23 +02:00
parent 444d9a9ca1
commit e3dc3b3e4a
30 changed files with 196 additions and 210 deletions
--- a/front/src/modules/companies/components/HooksCompanyBoard.tsx
+++ b/front/src/modules/companies/components/HooksCompanyBoard.tsx
@ -2,6 +2,7 @@ import { useEffect, useMemo } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';

 import { pipelineViewFields } from '@/pipeline/constants/pipelineViewFields';
+import { useBoardActionBarEntries } from '@/ui/board/hooks/useBoardActionBarEntries';
 import { isBoardLoadedState } from '@/ui/board/states/isBoardLoadedState';
 import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
 import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState';
@ -27,8 +28,6 @@ import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/

 export function HooksCompanyBoard({
  orderBy,
-  setActionBar,
-  setContextMenu,
 }: {
  orderBy: PipelineProgresses_Order_By[];
  setActionBar?: () => void;
@ -117,15 +116,11 @@ export function HooksCompanyBoard({
  const loading =
    loadingGetPipelines || loadingGetPipelineProgress || loadingGetCompanies;

-  if (setActionBar) {
-    setActionBar();
-  }
-  if (setContextMenu) {
-    setContextMenu();
-  }
+  const { setActionBarEntries } = useBoardActionBarEntries();

  useEffect(() => {
    if (!loading && pipeline && pipelineProgresses && companiesData) {
+      setActionBarEntries();
      updateCompanyBoard(pipeline, pipelineProgresses, companiesData.companies);
    }
  }, [
@ -134,6 +129,7 @@ export function HooksCompanyBoard({
    pipelineProgresses,
    companiesData,
    updateCompanyBoard,
+    setActionBarEntries,
  ]);

  return <></>;
--- a/front/src/modules/companies/hooks/useCompanyTableActionBarEntries.tsx
+++ b/front/src/modules/companies/hooks/useCompanyTableActionBarEntries.tsx
@ -3,13 +3,13 @@ import { useSetRecoilState } from 'recoil';
 import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry';
-import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState';
+import { actionBarEntriesState } from '@/ui/action-bar/states/actionBarEntriesState';
 import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
 import { ActivityType } from '~/generated/graphql';

 import { useDeleteSelectedComapnies } from './useDeleteCompanies';

-export function useActionBarEntries() {
+export function useCompanyTableActionBarEntries() {
  const setActionBarEntries = useSetRecoilState(actionBarEntriesState);

  const openCreateActivityRightDrawer =
@ -20,27 +20,28 @@ export function useActionBarEntries() {
  }

  const deleteSelectedCompanies = useDeleteSelectedComapnies();
-  return () => {
-    setActionBarEntries([
-      <ActionBarEntry
-        label="Note"
-        icon={<IconNotes size={16} />}
-        onClick={() => handleActivityClick(ActivityType.Note)}
-        key="note"
-      />,
-      <ActionBarEntry
-        label="Task"
-        icon={<IconCheckbox size={16} />}
-        onClick={() => handleActivityClick(ActivityType.Task)}
-        key="task"
-      />,
-      <ActionBarEntry
-        label="Delete"
-        icon={<IconTrash size={16} />}
-        type="danger"
-        onClick={() => deleteSelectedCompanies()}
-        key="delete"
-      />,
-    ]);
+  return {
+    setActionBarEntries: () =>
+      setActionBarEntries([
+        <ActionBarEntry
+          label="Note"
+          icon={<IconNotes size={16} />}
+          onClick={() => handleActivityClick(ActivityType.Note)}
+          key="note"
+        />,
+        <ActionBarEntry
+          label="Task"
+          icon={<IconCheckbox size={16} />}
+          onClick={() => handleActivityClick(ActivityType.Task)}
+          key="task"
+        />,
+        <ActionBarEntry
+          label="Delete"
+          icon={<IconTrash size={16} />}
+          type="danger"
+          onClick={() => deleteSelectedCompanies()}
+          key="delete"
+        />,
+      ]),
  };
 }
--- a/front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx
+++ b/front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx
@ -4,12 +4,12 @@ import { useSetRecoilState } from 'recoil';
 import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
-import { contextMenuEntriesState } from '@/ui/context-menu/states/ContextMenuEntriesState';
+import { contextMenuEntriesState } from '@/ui/context-menu/states/contextMenuEntriesState';
 import { ActivityType } from '~/generated/graphql';

 import { useDeleteSelectedComapnies } from './useDeleteCompanies';

-export function useContextMenuEntries() {
+export function useCompanyTableContextMenuEntries() {
  const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);

  const openCreateActivityRightDrawer =
@ -21,27 +21,28 @@ export function useContextMenuEntries() {

  const deleteSelectedCompanies = useDeleteSelectedComapnies();

-  return () => {
-    setContextMenuEntries([
-      <ContextMenuEntry
-        label="Note"
-        icon={<IconNotes size={16} />}
-        onClick={() => handleButtonClick(ActivityType.Note)}
-        key="note"
-      />,
-      <ContextMenuEntry
-        label="Task"
-        icon={<IconCheckbox size={16} />}
-        onClick={() => handleButtonClick(ActivityType.Task)}
-        key="task"
-      />,
-      <ContextMenuEntry
-        label="Delete"
-        icon={<IconTrash size={16} />}
-        type="danger"
-        onClick={() => deleteSelectedCompanies()}
-        key="delete"
-      />,
-    ]);
+  return {
+    setContextMenuEntries: () =>
+      setContextMenuEntries([
+        <ContextMenuEntry
+          label="Note"
+          icon={<IconNotes size={16} />}
+          onClick={() => handleButtonClick(ActivityType.Note)}
+          key="note"
+        />,
+        <ContextMenuEntry
+          label="Task"
+          icon={<IconCheckbox size={16} />}
+          onClick={() => handleButtonClick(ActivityType.Task)}
+          key="task"
+        />,
+        <ContextMenuEntry
+          label="Delete"
+          icon={<IconTrash size={16} />}
+          accent="danger"
+          onClick={() => deleteSelectedCompanies()}
+          key="delete"
+        />,
+      ]),
  };
 }
--- a/front/src/modules/companies/table/components/CompanyTable.tsx
+++ b/front/src/modules/companies/table/components/CompanyTable.tsx
@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';

 import { companyViewFields } from '@/companies/constants/companyViewFields';
-import { useActionBarEntries } from '@/companies/hooks/useActionBarEntries';
-import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries';
+import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
+import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
@ -53,8 +53,8 @@ export function CompanyTable() {
    return { AND: filters.map(turnFilterIntoWhereClause) };
  }, [filters]) as any;

-  const setContextMenu = useContextMenuEntries();
-  const setActionBar = useActionBarEntries();
+  const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
+  const { setActionBarEntries } = useCompanyTableActionBarEntries();

  return (
    <>
@ -64,8 +64,8 @@ export function CompanyTable() {
        orderBy={orderBy.length ? orderBy : defaultOrderBy}
        whereFilters={whereFilters}
        filterDefinitionArray={companiesFilters}
-        setContextMenu={setContextMenu}
-        setActionBar={setActionBar}
+        setContextMenuEntries={setContextMenuEntries}
+        setActionBarEntries={setActionBarEntries}
      />
      <EntityTable
        viewName="All Companies"
--- a/front/src/modules/people/hooks/usePeopleTableContextMenuEntries.tsx
+++ b/front/src/modules/people/hooks/usePeopleTableContextMenuEntries.tsx
@ -5,7 +5,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
-import { contextMenuEntriesState } from '@/ui/context-menu/states/ContextMenuEntriesState';
+import { contextMenuEntriesState } from '@/ui/context-menu/states/contextMenuEntriesState';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
 import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
@ -13,7 +13,7 @@ import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql';

 import { GET_PEOPLE } from '../queries';

-export function useContextMenuEntries() {
+export function usePersonTableContextMenuEntries() {
  const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);

  const openCreateActivityRightDrawer =
@ -55,27 +55,28 @@ export function useContextMenuEntries() {
    });
  }

-  return () => {
-    setContextMenuEntries([
-      <ContextMenuEntry
-        label="Note"
-        icon={<IconNotes size={16} />}
-        onClick={() => handleActivityClick(ActivityType.Note)}
-        key="note"
-      />,
-      <ContextMenuEntry
-        label="Task"
-        icon={<IconCheckbox size={16} />}
-        onClick={() => handleActivityClick(ActivityType.Task)}
-        key="task"
-      />,
-      <ContextMenuEntry
-        label="Delete"
-        icon={<IconTrash size={16} />}
-        type="danger"
-        onClick={handleDeleteClick}
-        key="delete"
-      />,
-    ]);
+  return {
+    setContextMenuEntries: () =>
+      setContextMenuEntries([
+        <ContextMenuEntry
+          label="Note"
+          icon={<IconNotes size={16} />}
+          onClick={() => handleActivityClick(ActivityType.Note)}
+          key="note"
+        />,
+        <ContextMenuEntry
+          label="Task"
+          icon={<IconCheckbox size={16} />}
+          onClick={() => handleActivityClick(ActivityType.Task)}
+          key="task"
+        />,
+        <ContextMenuEntry
+          label="Delete"
+          icon={<IconTrash size={16} />}
+          accent="danger"
+          onClick={handleDeleteClick}
+          key="delete"
+        />,
+      ]),
  };
 }
--- a/front/src/modules/people/hooks/usePersonTableActionBarEntries.tsx
+++ b/front/src/modules/people/hooks/usePersonTableActionBarEntries.tsx
@ -4,7 +4,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry';
-import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState';
+import { actionBarEntriesState } from '@/ui/action-bar/states/actionBarEntriesState';
 import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
@ -13,7 +13,7 @@ import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql';

 import { GET_PEOPLE } from '../queries';

-export function useActionBarEntries() {
+export function usePersonTableActionBarEntries() {
  const setActionBarEntries = useSetRecoilState(actionBarEntriesState);

  const openCreateActivityRightDrawer =
@ -55,27 +55,28 @@ export function useActionBarEntries() {
    });
  }

-  return () => {
-    setActionBarEntries([
-      <ActionBarEntry
-        label="Note"
-        icon={<IconNotes size={16} />}
-        onClick={() => handleActivityClick(ActivityType.Note)}
-        key="note"
-      />,
-      <ActionBarEntry
-        label="Task"
-        icon={<IconCheckbox size={16} />}
-        onClick={() => handleActivityClick(ActivityType.Task)}
-        key="task"
-      />,
-      <ActionBarEntry
-        label="Delete"
-        icon={<IconTrash size={16} />}
-        type="danger"
-        onClick={handleDeleteClick}
-        key="delte"
-      />,
-    ]);
+  return {
+    setActionBarEntries: () =>
+      setActionBarEntries([
+        <ActionBarEntry
+          label="Note"
+          icon={<IconNotes size={16} />}
+          onClick={() => handleActivityClick(ActivityType.Note)}
+          key="note"
+        />,
+        <ActionBarEntry
+          label="Task"
+          icon={<IconCheckbox size={16} />}
+          onClick={() => handleActivityClick(ActivityType.Task)}
+          key="task"
+        />,
+        <ActionBarEntry
+          label="Delete"
+          icon={<IconTrash size={16} />}
+          type="danger"
+          onClick={handleDeleteClick}
+          key="delete"
+        />,
+      ]),
  };
 }
--- a/front/src/modules/people/table/components/PeopleTable.tsx
+++ b/front/src/modules/people/table/components/PeopleTable.tsx
@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';

 import { peopleViewFields } from '@/people/constants/peopleViewFields';
-import { useActionBarEntries } from '@/people/hooks/useActionBarEntries';
-import { useContextMenuEntries } from '@/people/hooks/useContextMenuEntries';
+import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries';
+import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
@ -53,8 +53,8 @@ export function PeopleTable() {
    return { AND: filters.map(turnFilterIntoWhereClause) };
  }, [filters]) as any;

-  const setContextMenu = useContextMenuEntries();
-  const setActionBar = useActionBarEntries();
+  const { setContextMenuEntries } = usePersonTableContextMenuEntries();
+  const { setActionBarEntries } = usePersonTableActionBarEntries();

  return (
    <>
@ -64,8 +64,8 @@ export function PeopleTable() {
        orderBy={orderBy.length ? orderBy : defaultOrderBy}
        whereFilters={whereFilters}
        filterDefinitionArray={peopleFilters}
-        setContextMenu={setContextMenu}
-        setActionBar={setActionBar}
+        setContextMenuEntries={setContextMenuEntries}
+        setActionBarEntries={setActionBarEntries}
      />
      <EntityTable
        viewName="All People"
--- a/front/src/modules/ui/action-bar/components/ActionBar.tsx
+++ b/front/src/modules/ui/action-bar/components/ActionBar.tsx
@ -2,10 +2,10 @@ import React, { useRef } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';

-import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState';
-import { contextMenuOpenState } from '@/ui/context-menu/states/ContextMenuIsOpenState';
+import { actionBarEntriesState } from '@/ui/action-bar/states/actionBarEntriesState';
+import { contextMenuIsOpenState } from '@/ui/context-menu/states/contextMenuIsOpenState';

-import { actionBarOpenState } from '../states/ActionBarIsOpenState';
+import { actionBarOpenState } from '../states/actionBarIsOpenState';

 type OwnProps = {
  selectedIds: string[];
@ -33,7 +33,7 @@ const StyledContainerActionBar = styled.div`

 export function ActionBar({ selectedIds }: OwnProps) {
  const actionBarOpen = useRecoilValue(actionBarOpenState);
-  const contextMenuOpen = useRecoilValue(contextMenuOpenState);
+  const contextMenuOpen = useRecoilValue(contextMenuIsOpenState);
  const actionBarEntries = useRecoilValue(actionBarEntriesState);
  const wrapperRef = useRef(null);

--- a/front/src/modules/ui/action-bar/components/stories/ActionBar.stories.tsx
+++ b/front/src/modules/ui/action-bar/components/stories/ActionBar.stories.tsx
@ -2,18 +2,18 @@ import { MemoryRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useSetRecoilState } from 'recoil';

-import { useActionBarEntries } from '@/companies/hooks/useActionBarEntries';
+import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
 import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';

-import { actionBarOpenState } from '../../states/ActionBarIsOpenState';
+import { actionBarOpenState } from '../../states/actionBarIsOpenState';
 import { ActionBar } from '../ActionBar';

 function FilledActionBar(props: { selectedIds: string[] }) {
-  const setActionBar = useActionBarEntries();
-  setActionBar();
+  const { setActionBarEntries } = useCompanyTableActionBarEntries();
+  setActionBarEntries();
  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
  setActionBarOpenState(true);
  return <ActionBar selectedIds={props.selectedIds} />;
@ -25,7 +25,7 @@ const meta: Meta<typeof ActionBar> = {
  decorators: [
    (Story) => (
      <RecoilScope SpecificContext={TableRecoilScopeContext}>
-        <CompanyTableMockMode></CompanyTableMockMode>
+        <CompanyTableMockMode />
        <MemoryRouter>
          <Story />
        </MemoryRouter>
--- a/front/src/modules/ui/action-bar/states/actionBarEntriesState.ts
+++ b/front/src/modules/ui/action-bar/states/actionBarEntriesState.ts
--- a/front/src/modules/ui/action-bar/states/actionBarIsOpenState.ts
+++ b/front/src/modules/ui/action-bar/states/actionBarIsOpenState.ts
--- a/front/src/modules/ui/board/hooks/useBoardActionBarEntries.tsx
+++ b/front/src/modules/ui/board/hooks/useBoardActionBarEntries.tsx
@ -1,13 +1,16 @@
 import { useSetRecoilState } from 'recoil';

-import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState';
+import { actionBarEntriesState } from '@/ui/action-bar/states/actionBarEntriesState';

 import { BoardActionBarButtonDeleteBoardCard } from '../components/BoardActionBarButtonDeleteBoardCard';

-export function useActionBarEntries() {
+export function useBoardActionBarEntries() {
  const setActionBarEntries = useSetRecoilState(actionBarEntriesState);

-  return () => {
-    setActionBarEntries([<BoardActionBarButtonDeleteBoardCard key="delete" />]);
+  return {
+    setActionBarEntries: () =>
+      setActionBarEntries([
+        <BoardActionBarButtonDeleteBoardCard key="delete" />,
+      ]),
  };
 }
--- a/front/src/modules/ui/board/hooks/useCurrentCardSelected.ts
+++ b/front/src/modules/ui/board/hooks/useCurrentCardSelected.ts
@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';

-import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState';
+import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState';

 import { BoardCardIdContext } from '../contexts/BoardCardIdContext';
 import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
--- a/front/src/modules/ui/board/hooks/useSetCardSelected.ts
+++ b/front/src/modules/ui/board/hooks/useSetCardSelected.ts
@ -1,6 +1,6 @@
 import { useRecoilCallback, useSetRecoilState } from 'recoil';

-import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState';
+import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState';

 import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';

--- a/front/src/modules/ui/context-menu/components/ContextMenu.tsx
+++ b/front/src/modules/ui/context-menu/components/ContextMenu.tsx
@ -2,12 +2,14 @@ import React, { useRef } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue, useSetRecoilState } from 'recoil';

-import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState';
-import { contextMenuPositionState } from '@/ui/context-menu/states/ContextMenuPositionState';
+import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState';
+import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPositionState';
+import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';

-import { contextMenuEntriesState } from '../states/ContextMenuEntriesState';
-import { contextMenuOpenState } from '../states/ContextMenuIsOpenState';
+import { contextMenuEntriesState } from '../states/contextMenuEntriesState';
+import { contextMenuIsOpenState } from '../states/contextMenuIsOpenState';
 import { PositionType } from '../types/PositionType';

 type OwnProps = {
@ -39,9 +41,9 @@ const StyledContainerContextMenu = styled.div<StyledContainerProps>`

 export function ContextMenu({ selectedIds }: OwnProps) {
  const position = useRecoilValue(contextMenuPositionState);
-  const contextMenuOpen = useRecoilValue(contextMenuOpenState);
+  const contextMenuOpen = useRecoilValue(contextMenuIsOpenState);
  const contextMenuEntries = useRecoilValue(contextMenuEntriesState);
-  const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState);
+  const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
  const wrapperRef = useRef(null);

@ -58,7 +60,11 @@ export function ContextMenu({ selectedIds }: OwnProps) {
  }
  return (
    <StyledContainerContextMenu ref={wrapperRef} position={position}>
-      {contextMenuEntries}
+      <DropdownMenu>
+        <DropdownMenuItemsContainer>
+          {contextMenuEntries}
+        </DropdownMenuItemsContainer>
+      </DropdownMenu>
    </StyledContainerContextMenu>
  );
 }
--- a/front/src/modules/ui/context-menu/components/ContextMenuEntry.tsx
+++ b/front/src/modules/ui/context-menu/components/ContextMenuEntry.tsx
@ -1,41 +1,17 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';

+import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
+
+type ContextMenuEntryAccent = 'regular' | 'danger';
+
 type OwnProps = {
  icon: ReactNode;
  label: string;
-  type?: 'standard' | 'danger';
+  accent?: ContextMenuEntryAccent;
  onClick: () => void;
 };

-type StyledButtonProps = {
-  type: 'standard' | 'danger';
-};
-
-const StyledButton = styled.div<StyledButtonProps>`
-  align-items: center;
-  align-self: stretch;
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${(props) =>
-    props.type === 'danger'
-      ? props.theme.color.red
-      : props.theme.font.color.secondary};
-  cursor: pointer;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-
-  height: 32px;
-  padding-left: ${({ theme }) => theme.spacing(1)};
-  padding-right: ${({ theme }) => theme.spacing(1)};
-  transition: background 0.1s ease;
-  user-select: none;
-
-  &:hover {
-    background: ${({ theme, type }) =>
-      type === 'danger' ? theme.tag.background.red : theme.background.tertiary};
-  }
-`;
-
 const StyledButtonLabel = styled.div`
  font-weight: ${({ theme }) => theme.font.weight.medium};
  margin-left: ${({ theme }) => theme.spacing(2)};
@ -44,13 +20,13 @@ const StyledButtonLabel = styled.div`
 export function ContextMenuEntry({
  label,
  icon,
-  type = 'standard',
+  accent = 'regular',
  onClick,
 }: OwnProps) {
  return (
-    <StyledButton type={type} onClick={onClick}>
+    <DropdownMenuItem onClick={onClick} accent={accent}>
      {icon}
      <StyledButtonLabel>{label}</StyledButtonLabel>
-    </StyledButton>
+    </DropdownMenuItem>
  );
 }
--- a/front/src/modules/ui/context-menu/components/stories/ContextMenu.stories.tsx
+++ b/front/src/modules/ui/context-menu/components/stories/ContextMenu.stories.tsx
@ -2,25 +2,25 @@ import { MemoryRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useSetRecoilState } from 'recoil';

-import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries';
+import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
 import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';

-import { contextMenuOpenState } from '../../states/ContextMenuIsOpenState';
-import { contextMenuPositionState } from '../../states/ContextMenuPositionState';
+import { contextMenuIsOpenState } from '../../states/contextMenuIsOpenState';
+import { contextMenuPositionState } from '../../states/contextMenuPositionState';
 import { ContextMenu } from '../ContextMenu';

 function FilledContextMenu(props: { selectedIds: string[] }) {
-  const setContextMenu = useContextMenuEntries();
-  setContextMenu();
+  const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
+  setContextMenuEntries();
  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
  setContextMenuPosition({
    x: 100,
    y: 10,
  });
-  const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState);
+  const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
  setContextMenuOpenState(true);
  return <ContextMenu selectedIds={props.selectedIds} />;
 }
--- a/front/src/modules/ui/context-menu/states/ContextMenuIsOpenState.ts
+++ b/front/src/modules/ui/context-menu/states/ContextMenuIsOpenState.ts
@ -1,6 +0,0 @@
-import { atom } from 'recoil';
-
-export const contextMenuOpenState = atom<boolean>({
-  key: 'contextMenuOpenState',
-  default: false,
-});
--- a/front/src/modules/ui/context-menu/states/contextMenuEntriesState.ts
+++ b/front/src/modules/ui/context-menu/states/contextMenuEntriesState.ts
--- a/front/src/modules/ui/context-menu/states/contextMenuIsOpenState.ts
+++ b/front/src/modules/ui/context-menu/states/contextMenuIsOpenState.ts
@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const contextMenuIsOpenState = atom<boolean>({
+  key: 'contextMenuIsOpenState',
+  default: false,
+});
--- a/front/src/modules/ui/context-menu/states/contextMenuPositionState.ts
+++ b/front/src/modules/ui/context-menu/states/contextMenuPositionState.ts
--- a/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx
+++ b/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx
@ -9,14 +9,17 @@ import { hoverBackground } from '@/ui/theme/constants/effects';

 const styledIconButtonGroupClassName = 'dropdown-menu-item-actions';

-const StyledItem = styled.li`
+export type DropdownMenuItemAccent = 'regular' | 'danger';
+
+const StyledItem = styled.li<{ accent: DropdownMenuItemAccent }>`
  --horizontal-padding: ${({ theme }) => theme.spacing(1)};
  --vertical-padding: ${({ theme }) => theme.spacing(2)};

  align-items: center;

  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ theme }) => theme.font.color.secondary};
+  color: ${({ theme, accent }) =>
+    accent === 'danger' ? theme.color.red : theme.font.color.secondary};

  cursor: pointer;
  display: flex;
@ -52,14 +55,16 @@ const StyledActions = styled(IconButtonGroup)`

 export type DropdownMenuItemProps = ComponentProps<'li'> & {
  actions?: IconButtonGroupProps['children'];
+  accent?: DropdownMenuItemAccent;
 };

 export const DropdownMenuItem = ({
  actions,
  children,
+  accent = 'regular',
  ...props
 }: DropdownMenuItemProps) => (
-  <StyledItem {...props}>
+  <StyledItem {...props} accent={accent}>
    {children}
    {actions && (
      <StyledActions
--- a/front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx
+++ b/front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx
@ -8,5 +8,5 @@ import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSel
 export function EntityTableActionBar() {
  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);

-  return <ActionBar selectedIds={selectedRowIds}></ActionBar>;
+  return <ActionBar selectedIds={selectedRowIds} />;
 }
--- a/front/src/modules/ui/table/components/CheckboxCell.tsx
+++ b/front/src/modules/ui/table/components/CheckboxCell.tsx
@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';

-import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState';
+import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState';
 import { Checkbox } from '@/ui/input/checkbox/components/Checkbox';

 import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
--- a/front/src/modules/ui/table/components/EntityTableCell.tsx
+++ b/front/src/modules/ui/table/components/EntityTableCell.tsx
@ -1,8 +1,8 @@
 import { useContext } from 'react';
 import { useSetRecoilState } from 'recoil';

-import { contextMenuOpenState } from '@/ui/context-menu/states/ContextMenuIsOpenState';
-import { contextMenuPositionState } from '@/ui/context-menu/states/ContextMenuPositionState';
+import { contextMenuIsOpenState } from '@/ui/context-menu/states/contextMenuIsOpenState';
+import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPositionState';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';

 import { ColumnIndexContext } from '../contexts/ColumnIndexContext';
@ -12,7 +12,7 @@ import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';

 export function EntityTableCell({ cellIndex }: { cellIndex: number }) {
  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
-  const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState);
+  const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);

  const { setCurrentRowSelected } = useCurrentRowSelected();

--- a/front/src/modules/ui/table/components/GenericEntityTableData.tsx
+++ b/front/src/modules/ui/table/components/GenericEntityTableData.tsx
@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+
 import { defaultOrderBy } from '@/people/queries';
 import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
 import { useSetEntityTableData } from '@/ui/table/hooks/useSetEntityTableData';
@ -8,16 +10,16 @@ export function GenericEntityTableData({
  orderBy = defaultOrderBy,
  whereFilters,
  filterDefinitionArray,
-  setActionBar,
-  setContextMenu,
+  setActionBarEntries,
+  setContextMenuEntries,
 }: {
  useGetRequest: any;
  getRequestResultKey: string;
  orderBy?: any;
  whereFilters?: any;
  filterDefinitionArray: FilterDefinition[];
-  setActionBar?: () => void;
-  setContextMenu?: () => void;
+  setActionBarEntries?: () => void;
+  setContextMenuEntries?: () => void;
 }) {
  const setEntityTableData = useSetEntityTableData();
  useGetRequest({
@ -28,11 +30,10 @@ export function GenericEntityTableData({
    },
  });

-  if (setActionBar) {
-    setActionBar();
-  }
-  if (setContextMenu) {
-    setContextMenu();
-  }
+  useEffect(() => {
+    setActionBarEntries?.();
+    setContextMenuEntries?.();
+  }, [setActionBarEntries, setContextMenuEntries]);
+
  return <></>;
 }
--- a/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx
+++ b/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx
@ -7,5 +7,5 @@ import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSel

 export function EntityTableContextMenu() {
  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
-  return <ContextMenu selectedIds={selectedRowIds}></ContextMenu>;
+  return <ContextMenu selectedIds={selectedRowIds} />;
 }