- rename entries hooks

- tests
- move useeffects to sub components

front/src/modules/companies/components/HooksCompanyBoard.tsx

@@ -27,8 +27,12 @@ import { CompanyBoardContext } from '../states/CompanyBoardContext';
 
 export function HooksCompanyBoard({
   orderBy,
+  setActionBar,
+  setContextMenu,
 }: {
   orderBy: PipelineProgresses_Order_By[];
+  setActionBar?: () => void;
+  setContextMenu?: () => void;
 }) {
   const setFieldsDefinitionsState = useSetRecoilState(
     viewFieldsDefinitionsState,
@@ -110,6 +114,13 @@ export function HooksCompanyBoard({
   const loading =
     loadingGetPipelines || loadingGetPipelineProgress || loadingGetCompanies;
 
+  if (setActionBar) {
+    setActionBar();
+  }
+  if (setContextMenu) {
+    setContextMenu();
+  }
+
   useEffect(() => {
     if (!loading && pipeline && pipelineProgresses && companiesData) {
       updateCompanyBoard(pipeline, pipelineProgresses, companiesData.companies);

front/src/modules/companies/hooks/useActionBarEntries.tsx

@@ -0,0 +1,46 @@
+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 { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
+import { ActivityType } from '~/generated/graphql';
+
+import { useDeleteSelectedComapnies } from './useDeleteCompanies';
+
+export function useActionBarEntries() {
+  const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
+
+  const openCreateActivityRightDrawer =
+    useOpenCreateActivityDrawerForSelectedRowIds();
+
+  async function handleActivityClick(type: ActivityType) {
+    openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
+  }
+
+  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"
+      />,
+    ]);
+  };
+}

front/src/modules/companies/hooks/useContextMenuEntries.tsx

@@ -0,0 +1,47 @@
+import { IconCheckbox, IconNotes, IconTrash } from '@tabler/icons-react';
+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 { ActivityType } from '~/generated/graphql';
+
+import { useDeleteSelectedComapnies } from './useDeleteCompanies';
+
+export function useContextMenuEntries() {
+  const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
+
+  const openCreateActivityRightDrawer =
+    useOpenCreateActivityDrawerForSelectedRowIds();
+
+  async function handleButtonClick(type: ActivityType) {
+    openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
+  }
+
+  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"
+      />,
+    ]);
+  };
+}

front/src/modules/companies/hooks/useDeleteCompanies.ts

@@ -2,14 +2,12 @@ import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { GET_PIPELINES } from '@/pipeline/queries';
-import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
-import { IconTrash } from '@/ui/icon/index';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
 import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
 import { useDeleteManyCompaniesMutation } from '~/generated/graphql';
 
-export function TableContextMenuEntryDeleteCompanies() {
+export function useDeleteSelectedComapnies() {
   const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
 
   const resetRowSelection = useResetTableRowSelection();
@@ -20,7 +18,7 @@ export function TableContextMenuEntryDeleteCompanies() {
 
   const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
 
-  async function handleDeleteClick() {
+  async function deleteSelectedCompanies() {
     const rowIdsToDelete = selectedRowIds;
 
     resetRowSelection();
@@ -43,12 +41,5 @@ export function TableContextMenuEntryDeleteCompanies() {
     });
   }
 
-  return (
+  return deleteSelectedCompanies;
-    <ContextMenuEntry
-      label="Delete"
-      icon={<IconTrash size={16} />}
-      type="danger"
-      onClick={handleDeleteClick}
-    />
-  );
 }

front/src/modules/companies/hooks/useOpenActionBar.tsx

@@ -1,81 +0,0 @@
-import { getOperationName } from '@apollo/client/utilities';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-
-import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
-import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
-import { GET_PIPELINES } from '@/pipeline/queries';
-import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry';
-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/selectedRowIdsSelector';
-import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
-import {
-  ActivityType,
-  useDeleteManyCompaniesMutation,
-} from '~/generated/graphql';
-
-export function useOpenActionBar() {
-  const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
-
-  const openCreateActivityRightDrawer =
-    useOpenCreateActivityDrawerForSelectedRowIds();
-
-  async function handleActivityClick(type: ActivityType) {
-    openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
-  }
-
-  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
-
-  const resetRowSelection = useResetTableRowSelection();
-
-  const [deleteCompanies] = useDeleteManyCompaniesMutation({
-    refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
-  });
-
-  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
-
-  async function handleDeleteClick() {
-    const rowIdsToDelete = selectedRowIds;
-
-    resetRowSelection();
-
-    await deleteCompanies({
-      variables: {
-        ids: rowIdsToDelete,
-      },
-      optimisticResponse: {
-        __typename: 'Mutation',
-        deleteManyCompany: {
-          count: rowIdsToDelete.length,
-        },
-      },
-      update: () => {
-        setTableRowIds(
-          tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
-        );
-      },
-    });
-  }
-
-  return () => {
-    setActionBarEntries([
-      <ActionBarEntry
-        label="Note"
-        icon={<IconNotes size={16} />}
-        onClick={() => handleActivityClick(ActivityType.Note)}
-      />,
-      <ActionBarEntry
-        label="Task"
-        icon={<IconCheckbox size={16} />}
-        onClick={() => handleActivityClick(ActivityType.Task)}
-      />,
-      <ActionBarEntry
-        label="Delete"
-        icon={<IconTrash size={16} />}
-        type="danger"
-        onClick={handleDeleteClick}
-      />,
-    ]);
-  };
-}

front/src/modules/companies/hooks/useOpenContextMenu.tsx

@@ -1,81 +0,0 @@
-import { getOperationName } from '@apollo/client/utilities';
-import { IconCheckbox, IconNotes, IconTrash } from '@tabler/icons-react';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-
-import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
-import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
-import { GET_PIPELINES } from '@/pipeline/queries';
-import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
-import { contextMenuEntriesState } from '@/ui/context-menu/states/ContextMenuEntriesState';
-import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
-import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
-import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
-import {
-  ActivityType,
-  useDeleteManyCompaniesMutation,
-} from '~/generated/graphql';
-
-export function useOpenContextMenu() {
-  const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
-
-  const openCreateActivityRightDrawer =
-    useOpenCreateActivityDrawerForSelectedRowIds();
-
-  async function handleButtonClick(type: ActivityType) {
-    openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
-  }
-
-  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
-
-  const resetRowSelection = useResetTableRowSelection();
-
-  const [deleteCompanies] = useDeleteManyCompaniesMutation({
-    refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
-  });
-
-  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
-
-  async function handleDeleteClick() {
-    const rowIdsToDelete = selectedRowIds;
-
-    resetRowSelection();
-
-    await deleteCompanies({
-      variables: {
-        ids: rowIdsToDelete,
-      },
-      optimisticResponse: {
-        __typename: 'Mutation',
-        deleteManyCompany: {
-          count: rowIdsToDelete.length,
-        },
-      },
-      update: () => {
-        setTableRowIds(
-          tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
-        );
-      },
-    });
-  }
-
-  return () => {
-    setContextMenuEntries([
-      <ContextMenuEntry
-        label="Note"
-        icon={<IconNotes size={16} />}
-        onClick={() => handleButtonClick(ActivityType.Note)}
-      />,
-      <ContextMenuEntry
-        label="Task"
-        icon={<IconCheckbox size={16} />}
-        onClick={() => handleButtonClick(ActivityType.Task)}
-      />,
-      <ContextMenuEntry
-        label="Delete"
-        icon={<IconTrash size={16} />}
-        type="danger"
-        onClick={handleDeleteClick}
-      />,
-    ]);
-  };
-}

front/src/modules/companies/table/components/CompanyTable.tsx

@@ -2,6 +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 { 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';
@@ -45,6 +47,9 @@ export function CompanyTable() {
     return { AND: filters.map(turnFilterIntoWhereClause) };
   }, [filters]) as any;
 
+  const setContextMenu = useContextMenuEntries();
+  const setActionBar = useActionBarEntries();
+
   return (
     <>
       <GenericEntityTableData
@@ -53,6 +58,8 @@ export function CompanyTable() {
         orderBy={orderBy.length ? orderBy : defaultOrderBy}
         whereFilters={whereFilters}
         filterDefinitionArray={companiesFilters}
+        setContextMenu={setContextMenu}
+        setActionBar={setActionBar}
       />
       <EntityTable
         viewName="All Companies"

front/src/modules/people/hooks/useActionBarEntries.tsx

@@ -13,7 +13,7 @@ import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql';
 
 import { GET_PEOPLE } from '../queries';
 
-export function useOpenActionBar() {
+export function useActionBarEntries() {
   const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
 
   const openCreateActivityRightDrawer =
@@ -61,17 +61,20 @@ export function useOpenActionBar() {
         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"
       />,
     ]);
   };

front/src/modules/people/hooks/useContextMenuEntries.tsx

@@ -13,7 +13,7 @@ import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql';
 
 import { GET_PEOPLE } from '../queries';
 
-export function useOpenContextMenu() {
+export function useContextMenuEntries() {
   const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
 
   const openCreateActivityRightDrawer =
@@ -61,17 +61,20 @@ export function useOpenContextMenu() {
         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"
       />,
     ]);
   };

front/src/modules/people/table/components/PeopleTable.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 
+import { useActionBarEntries } from '@/companies/hooks/useActionBarEntries';
+import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries';
 import { peopleViewFields } from '@/people/constants/peopleViewFields';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
@@ -45,6 +47,9 @@ export function PeopleTable() {
     return { AND: filters.map(turnFilterIntoWhereClause) };
   }, [filters]) as any;
 
+  const setContextMenu = useContextMenuEntries();
+  const setActionBar = useActionBarEntries();
+
   return (
     <>
       <GenericEntityTableData
@@ -53,6 +58,8 @@ export function PeopleTable() {
         orderBy={orderBy.length ? orderBy : defaultOrderBy}
         whereFilters={whereFilters}
         filterDefinitionArray={peopleFilters}
+        setContextMenu={setContextMenu}
+        setActionBar={setActionBar}
       />
       <EntityTable
         viewName="All People"

front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx

@@ -3,12 +3,39 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { ActionBar } from '../ActionBar';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { MemoryRouter } from 'react-router-dom';
+import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
+import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu';
+import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
+import { TableContext } from '@/ui/table/states/TableContext';
+import { useActionBarEntries } from '@/companies/hooks/useActionBarEntries';
+import { useSetRecoilState } from 'recoil';
+import { actionBarOpenState } from '../../states/ActionBarIsOpenState';
+
+function FilledActionBar(props: { selectedIds: string[] }) {
+  const setActionBar = useActionBarEntries();
+  setActionBar();
+  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
+  setActionBarOpenState(true);
+  return <ActionBar selectedIds={props.selectedIds} />;
+}
 
 const meta: Meta<typeof ActionBar> = {
   title: 'UI/ActionBar/ActionBar',
-  component: ActionBar,
+  component: FilledActionBar,
-  decorators: [ComponentDecorator],
+  decorators: [
-  args: { selectedIds: [] },
+    (Story) => (
+      <RecoilScope SpecificContext={TableContext}>
+        <CompanyTableMockMode></CompanyTableMockMode>
+        <MemoryRouter>
+          <Story />
+        </MemoryRouter>
+      </RecoilScope>
+    ),
+    ComponentDecorator,
+  ],
+  args: { selectedIds: ['TestId'] },
 };
 
 export default meta;

front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx

@@ -43,6 +43,7 @@ export function BoardActionBarButtonDeleteBoardCard() {
       icon={<IconTrash size={16} />}
       type="danger"
       onClick={handleDelete}
+      key="delete"
     />
   );
 }

front/src/modules/ui/board/hooks/useActionBarEntries.tsx

@@ -4,10 +4,10 @@ import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesSt
 
 import { BoardActionBarButtonDeleteBoardCard } from '../components/BoardActionBarButtonDeleteBoardCard';
 
-export function useOpenActionBar() {
+export function useActionBarEntries() {
   const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
 
   return () => {
-    setActionBarEntries([<BoardActionBarButtonDeleteBoardCard />]);
+    setActionBarEntries([<BoardActionBarButtonDeleteBoardCard key="delete" />]);
   };
 }

front/src/modules/ui/board/hooks/useCurrentCardSelected.ts

@@ -1,5 +1,7 @@
 import { useContext } from 'react';
-import { useRecoilCallback, useRecoilState } from 'recoil';
+import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
+
+import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState';
 
 import { BoardCardIdContext } from '../states/BoardCardIdContext';
 import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
@@ -10,6 +12,7 @@ export function useCurrentCardSelected() {
   const [isCardSelected] = useRecoilState(
     isCardSelectedFamilyState(currentCardId ?? ''),
   );
+  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
 
   const setCurrentCardSelected = useRecoilCallback(
     ({ set }) =>
@@ -17,6 +20,7 @@ export function useCurrentCardSelected() {
         if (!currentCardId) return;
 
         set(isCardSelectedFamilyState(currentCardId), selected);
+        setActionBarOpenState(true);
       },
     [],
   );

front/src/modules/ui/board/hooks/useSetCardSelected.ts

@@ -1,9 +1,14 @@
-import { useRecoilCallback } from 'recoil';
+import { useRecoilCallback, useSetRecoilState } from 'recoil';
+
+import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState';
 
 import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
 
 export function useSetCardSelected() {
+  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
+
   return useRecoilCallback(({ set }) => (cardId: string, selected: boolean) => {
     set(isCardSelectedFamilyState(cardId), selected);
+    setActionBarOpenState(true);
   });
 }

front/src/modules/ui/context-menu/components/__stories__/ActionBar.stories.tsx

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
-
-import { ContextMenu } from '../ContextMenu';
-
-const meta: Meta<typeof ContextMenu> = {
-  title: 'UI/ContextMenu/ContextMenu',
-  component: ContextMenu,
-  decorators: [ComponentDecorator],
-  args: { selectedIds: [] },
-};
-
-export default meta;
-type Story = StoryObj<typeof ContextMenu>;
-
-export const Default: Story = {};

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

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { ContextMenu } from '../ContextMenu';
+import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries';
+import { useSetRecoilState } from 'recoil';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { TableContext } from '@/ui/table/states/TableContext';
+import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
+import { MemoryRouter } from 'react-router-dom';
+import { contextMenuOpenState } from '../../states/ContextMenuIsOpenState';
+import { contextMenuPositionState } from '../../states/ContextMenuPositionState';
+
+function FilledContextMenu(props: { selectedIds: string[] }) {
+  const setContextMenu = useContextMenuEntries();
+  setContextMenu();
+  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
+  setContextMenuPosition({
+    x: 100,
+    y: 10,
+  });
+  const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState);
+  setContextMenuOpenState(true);
+  return <ContextMenu selectedIds={props.selectedIds} />;
+}
+
+const meta: Meta<typeof ContextMenu> = {
+  title: 'UI/ContextMenu/ContextMenu',
+  component: FilledContextMenu,
+  decorators: [
+    (Story) => (
+      <RecoilScope SpecificContext={TableContext}>
+        <CompanyTableMockMode></CompanyTableMockMode>
+        <MemoryRouter>
+          <Story />
+        </MemoryRouter>
+      </RecoilScope>
+    ),
+    ComponentDecorator,
+  ],
+  args: { selectedIds: ['TestId'] },
+};
+
+export default meta;
+type Story = StoryObj<typeof ContextMenu>;
+
+export const Default: Story = {};

front/src/modules/ui/table/components/GenericEntityTableData.tsx

@@ -8,12 +8,16 @@ export function GenericEntityTableData({
   orderBy = defaultOrderBy,
   whereFilters,
   filterDefinitionArray,
+  setActionBar,
+  setContextMenu,
 }: {
   useGetRequest: any;
   getRequestResultKey: string;
   orderBy?: any;
   whereFilters?: any;
   filterDefinitionArray: FilterDefinition[];
+  setActionBar?: () => void;
+  setContextMenu?: () => void;
 }) {
   const setEntityTableData = useSetEntityTableData();
   useGetRequest({
@@ -24,5 +28,11 @@ export function GenericEntityTableData({
     },
   });
 
+  if (setActionBar) {
+    setActionBar();
+  }
+  if (setContextMenu) {
+    setContextMenu();
+  }
   return <></>;
 }

front/src/pages/companies/Companies.tsx

@@ -1,11 +1,8 @@
-import { useEffect } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { v4 } from 'uuid';
 
-import { useOpenActionBar } from '@/companies/hooks/useOpenActionBar';
-import { useOpenContextMenu } from '@/companies/hooks/useOpenContextMenu';
 import { CompanyTable } from '@/companies/table/components/CompanyTable';
 import { SEARCH_COMPANY_QUERY } from '@/search/queries/search';
 import { IconBuildingSkyscraper } from '@/ui/icon';
@@ -65,14 +62,6 @@ export function Companies() {
 
   const theme = useTheme();
 
-  const setContextMenu = useOpenContextMenu();
-  const setActionBar = useOpenActionBar();
-
-  useEffect(() => {
-    setContextMenu();
-    setActionBar();
-  }, [setContextMenu, setActionBar]);
-
   return (
     <WithTopBarContainer
       title="Companies"

front/src/pages/opportunities/Opportunities.tsx

@@ -9,6 +9,7 @@ import {
 } from '@/pipeline/queries';
 import { EntityBoard } from '@/ui/board/components/EntityBoard';
 import { EntityBoardActionBar } from '@/ui/board/components/EntityBoardActionBar';
+import { useActionBarEntries } from '@/ui/board/hooks/useActionBarEntries';
 import { BoardOptionsContext } from '@/ui/board/states/BoardOptionsContext';
 import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
 import { IconTargetArrow } from '@/ui/icon/index';
@@ -62,6 +63,8 @@ export function Opportunities() {
     });
   }
 
+  const setActionBar = useActionBarEntries();
+
   return (
     <WithTopBarContainer
       title="Opportunities"
@@ -69,7 +72,7 @@ export function Opportunities() {
     >
       <BoardOptionsContext.Provider value={opportunitiesBoardOptions}>
         <RecoilScope SpecificContext={CompanyBoardContext}>
-          <HooksCompanyBoard orderBy={orderBy} />
+          <HooksCompanyBoard orderBy={orderBy} setActionBar={setActionBar} />
           <EntityBoard
             boardOptions={opportunitiesBoardOptions}
             updateSorts={updateSorts}

front/src/pages/people/People.tsx

@@ -1,10 +1,7 @@
-import { useEffect } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { v4 } from 'uuid';
 
-import { useOpenActionBar } from '@/people/hooks/useOpenActionBar';
-import { useOpenContextMenu } from '@/people/hooks/useOpenContextMenu';
 import { PeopleTable } from '@/people/table/components/PeopleTable';
 import { IconUser } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
@@ -58,14 +55,6 @@ export function People() {
 
   const theme = useTheme();
 
-  const setContextMenu = useOpenContextMenu();
-  const setActionBar = useOpenActionBar();
-
-  useEffect(() => {
-    setContextMenu();
-    setActionBar();
-  }, [setContextMenu, setActionBar]);
-
   return (
     <RecoilScope SpecificContext={TableContext}>
       <WithTopBarContainer