- refactored to use multiple states

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

@@ -1,6 +1,6 @@
 import { ReactNode, useContext } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
 import { fieldsDefinitionsState } from '@/ui/board/states/fieldsDefinitionsState';
@@ -12,6 +12,7 @@ import {
   Checkbox,
   CheckboxVariant,
 } from '@/ui/input/checkbox/components/Checkbox';
+import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState';
 import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
 import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
@@ -114,10 +115,12 @@ export function CompanyBoardCard() {
   const fieldsDefinitions = useRecoilValue(fieldsDefinitionsState);
 
   const selected = selectedBoardCards.includes(boardCardId ?? '');
+  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
 
   function setSelected(isSelected: boolean) {
     if (isSelected) {
       setSelectedBoardCards([...selectedBoardCards, boardCardId ?? '']);
+      setActionBarOpenState(true);
     } else {
       setSelectedBoardCards(
         selectedBoardCards.filter((id) => id !== boardCardId),

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

@@ -2,8 +2,8 @@ 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 { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
 import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
@@ -44,10 +44,10 @@ export function TableContextMenuEntryDeleteCompanies() {
   }
 
   return (
-    <EntityTableContextMenuEntry
+    <ContextMenuEntry
       label="Delete"
       icon={<IconTrash size={16} />}
-      type="warning"
+      type="danger"
       onClick={handleDeleteClick}
     />
   );

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

@@ -0,0 +1,81 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+
+import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
+import { GET_PIPELINES } from '@/pipeline/queries';
+import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry';
+import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
+import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
+import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState';
+import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
+import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
+import {
+  ActivityType,
+  CommentableType,
+  useDeleteManyCompaniesMutation,
+} from '~/generated/graphql';
+
+export function useOpenActionBar() {
+  const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
+
+  const openCreateActivityRightDrawer =
+    useOpenCreateActivityDrawerForSelectedRowIds();
+
+  async function handleActivityClick(type: ActivityType) {
+    openCreateActivityRightDrawer(type, CommentableType.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

@@ -0,0 +1,81 @@
+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 { GET_PIPELINES } from '@/pipeline/queries';
+import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
+import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
+import { contextMenuEntriesState } from '@/ui/table/states/ContextMenuEntriesState';
+import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
+import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
+import {
+  ActivityType,
+  CommentableType,
+  useDeleteManyCompaniesMutation,
+} from '~/generated/graphql';
+
+export function useOpenContextMenu() {
+  const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
+
+  const openCreateActivityRightDrawer =
+    useOpenCreateActivityDrawerForSelectedRowIds();
+
+  async function handleButtonClick(type: ActivityType) {
+    openCreateActivityRightDrawer(type, CommentableType.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/TableActionBarButtonCreateActivityCompany.tsx

@@ -1,29 +0,0 @@
-import { IconCheckbox, IconNotes } from '@tabler/icons-react';
-
-import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
-import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
-import { ActivityType, CommentableType } from '~/generated/graphql';
-
-export function TableActionBarButtonCreateActivityCompany() {
-  const openCreateActivityRightDrawer =
-    useOpenCreateActivityDrawerForSelectedRowIds();
-
-  async function handleButtonClick(type: ActivityType) {
-    openCreateActivityRightDrawer(type, CommentableType.Company);
-  }
-
-  return (
-    <>
-      <EntityTableActionBarButton
-        label="Note"
-        icon={<IconNotes size={16} />}
-        onClick={() => handleButtonClick(ActivityType.Note)}
-      />
-      <EntityTableActionBarButton
-        label="Task"
-        icon={<IconCheckbox size={16} />}
-        onClick={() => handleButtonClick(ActivityType.Task)}
-      />
-    </>
-  );
-}

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

@@ -1,54 +0,0 @@
-import { getOperationName } from '@apollo/client/utilities';
-import { useRecoilState, useRecoilValue } from 'recoil';
-
-import { GET_PIPELINES } from '@/pipeline/queries';
-import { IconTrash } from '@/ui/icon/index';
-import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
-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 TableActionBarButtonDeleteCompanies() {
-  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 (
-    <EntityTableActionBarButton
-      label="Delete"
-      icon={<IconTrash size={16} />}
-      type="warning"
-      onClick={handleDeleteClick}
-    />
-  );
-}

front/src/modules/companies/table/components/TableContextMenuEntryCreateActivityCompany copy.tsx

@@ -1,29 +0,0 @@
-import { IconCheckbox, IconNotes } from '@tabler/icons-react';
-
-import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
-import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
-import { ActivityType, CommentableType } from '~/generated/graphql';
-
-export function TableContextMenuEntryCreateActivityCompany() {
-  const openCreateActivityRightDrawer =
-    useOpenCreateActivityDrawerForSelectedRowIds();
-
-  async function handleButtonClick(type: ActivityType) {
-    openCreateActivityRightDrawer(type, CommentableType.Company);
-  }
-
-  return (
-    <>
-      <EntityTableContextMenuEntry
-        label="Note"
-        icon={<IconNotes size={16} />}
-        onClick={() => handleButtonClick(ActivityType.Note)}
-      />
-      <EntityTableContextMenuEntry
-        label="Task"
-        icon={<IconCheckbox size={16} />}
-        onClick={() => handleButtonClick(ActivityType.Task)}
-      />
-    </>
-  );
-}

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

@@ -0,0 +1,81 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+
+import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
+import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry';
+import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
+import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
+import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState';
+import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
+import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
+import {
+  ActivityType,
+  CommentableType,
+  useDeleteManyPersonMutation,
+} from '~/generated/graphql';
+
+import { GET_PEOPLE } from '../queries';
+
+export function useOpenActionBar() {
+  const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
+
+  const openCreateActivityRightDrawer =
+    useOpenCreateActivityDrawerForSelectedRowIds();
+
+  async function handleActivityClick(type: ActivityType) {
+    openCreateActivityRightDrawer(type, CommentableType.Person);
+  }
+
+  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
+  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
+
+  const resetRowSelection = useResetTableRowSelection();
+
+  const [deleteManyPerson] = useDeleteManyPersonMutation({
+    refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
+  });
+
+  async function handleDeleteClick() {
+    const rowIdsToDelete = selectedRowIds;
+
+    resetRowSelection();
+
+    await deleteManyPerson({
+      variables: {
+        ids: rowIdsToDelete,
+      },
+      optimisticResponse: {
+        __typename: 'Mutation',
+        deleteManyPerson: {
+          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/people/hooks/useOpenContextMenu.tsx

@@ -0,0 +1,81 @@
+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 { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
+import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
+import { contextMenuEntriesState } from '@/ui/table/states/ContextMenuEntriesState';
+import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
+import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
+import {
+  ActivityType,
+  CommentableType,
+  useDeleteManyPersonMutation,
+} from '~/generated/graphql';
+
+import { GET_PEOPLE } from '../queries';
+
+export function useOpenContextMenu() {
+  const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
+
+  const openCreateActivityRightDrawer =
+    useOpenCreateActivityDrawerForSelectedRowIds();
+
+  async function handleActivityClick(type: ActivityType) {
+    openCreateActivityRightDrawer(type, CommentableType.Person);
+  }
+
+  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
+  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
+
+  const resetRowSelection = useResetTableRowSelection();
+
+  const [deleteManyPerson] = useDeleteManyPersonMutation({
+    refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
+  });
+
+  async function handleDeleteClick() {
+    const rowIdsToDelete = selectedRowIds;
+
+    resetRowSelection();
+
+    await deleteManyPerson({
+      variables: {
+        ids: rowIdsToDelete,
+      },
+      optimisticResponse: {
+        __typename: 'Mutation',
+        deleteManyPerson: {
+          count: rowIdsToDelete.length,
+        },
+      },
+      update: () => {
+        setTableRowIds(
+          tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
+        );
+      },
+    });
+  }
+
+  return () => {
+    setContextMenuEntries([
+      <ContextMenuEntry
+        label="Note"
+        icon={<IconNotes size={16} />}
+        onClick={() => handleActivityClick(ActivityType.Note)}
+      />,
+      <ContextMenuEntry
+        label="Task"
+        icon={<IconCheckbox size={16} />}
+        onClick={() => handleActivityClick(ActivityType.Task)}
+      />,
+      <ContextMenuEntry
+        label="Delete"
+        icon={<IconTrash size={16} />}
+        type="danger"
+        onClick={handleDeleteClick}
+      />,
+    ]);
+  };
+}

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

@@ -1,29 +0,0 @@
-import { IconCheckbox, IconNotes } from '@tabler/icons-react';
-
-import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
-import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
-import { ActivityType, CommentableType } from '~/generated/graphql';
-
-export function TableActionBarButtonCreateActivityPeople() {
-  const openCreateActivityRightDrawer =
-    useOpenCreateActivityDrawerForSelectedRowIds();
-
-  async function handleButtonClick(type: ActivityType) {
-    openCreateActivityRightDrawer(type, CommentableType.Person);
-  }
-
-  return (
-    <>
-      <EntityTableActionBarButton
-        label="Note"
-        icon={<IconNotes size={16} />}
-        onClick={() => handleButtonClick(ActivityType.Note)}
-      />
-      <EntityTableActionBarButton
-        label="Task"
-        icon={<IconCheckbox size={16} />}
-        onClick={() => handleButtonClick(ActivityType.Task)}
-      />
-    </>
-  );
-}

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

@@ -1,53 +0,0 @@
-import { getOperationName } from '@apollo/client/utilities';
-import { useRecoilState, useRecoilValue } from 'recoil';
-
-import { GET_PEOPLE } from '@/people/queries';
-import { IconTrash } from '@/ui/icon/index';
-import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
-import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
-import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
-import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
-import { useDeleteManyPersonMutation } from '~/generated/graphql';
-
-export function TableActionBarButtonDeletePeople() {
-  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
-  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
-
-  const resetRowSelection = useResetTableRowSelection();
-
-  const [deleteManyPerson] = useDeleteManyPersonMutation({
-    refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
-  });
-
-  async function handleDeleteClick() {
-    const rowIdsToDelete = selectedRowIds;
-
-    resetRowSelection();
-
-    await deleteManyPerson({
-      variables: {
-        ids: rowIdsToDelete,
-      },
-      optimisticResponse: {
-        __typename: 'Mutation',
-        deleteManyPerson: {
-          count: rowIdsToDelete.length,
-        },
-      },
-      update: () => {
-        setTableRowIds(
-          tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
-        );
-      },
-    });
-  }
-
-  return (
-    <EntityTableActionBarButton
-      label="Delete"
-      icon={<IconTrash size={16} />}
-      type="warning"
-      onClick={handleDeleteClick}
-    />
-  );
-}

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

@@ -1,53 +0,0 @@
-import { getOperationName } from '@apollo/client/utilities';
-import { useRecoilState, useRecoilValue } from 'recoil';
-
-import { GET_PEOPLE } from '@/people/queries';
-import { IconTrash } from '@/ui/icon/index';
-import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
-import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
-import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
-import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
-import { useDeleteManyPersonMutation } from '~/generated/graphql';
-
-export function TableContextMenuEntryDeletePeople() {
-  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
-  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
-
-  const resetRowSelection = useResetTableRowSelection();
-
-  const [deleteManyPerson] = useDeleteManyPersonMutation({
-    refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
-  });
-
-  async function handleDeleteClick() {
-    const rowIdsToDelete = selectedRowIds;
-
-    resetRowSelection();
-
-    await deleteManyPerson({
-      variables: {
-        ids: rowIdsToDelete,
-      },
-      optimisticResponse: {
-        __typename: 'Mutation',
-        deleteManyPerson: {
-          count: rowIdsToDelete.length,
-        },
-      },
-      update: () => {
-        setTableRowIds(
-          tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
-        );
-      },
-    });
-  }
-
-  return (
-    <EntityTableContextMenuEntry
-      label="Delete"
-      icon={<IconTrash size={16} />}
-      type="warning"
-      onClick={handleDeleteClick}
-    />
-  );
-}

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

@@ -1,29 +0,0 @@
-import { IconCheckbox, IconNotes } from '@tabler/icons-react';
-
-import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
-import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
-import { ActivityType, CommentableType } from '~/generated/graphql';
-
-export function TableContextMenuEntryCreateActivityPeople() {
-  const openCreateActivityRightDrawer =
-    useOpenCreateActivityDrawerForSelectedRowIds();
-
-  async function handleButtonClick(type: ActivityType) {
-    openCreateActivityRightDrawer(type, CommentableType.Person);
-  }
-
-  return (
-    <>
-      <EntityTableContextMenuEntry
-        label="Note"
-        icon={<IconNotes size={16} />}
-        onClick={() => handleButtonClick(ActivityType.Note)}
-      />
-      <EntityTableContextMenuEntry
-        label="Task"
-        icon={<IconCheckbox size={16} />}
-        onClick={() => handleButtonClick(ActivityType.Task)}
-      />
-    </>
-  );
-}

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

@@ -1,11 +1,12 @@
-import React, { useEffect } from 'react';
+import React, { useRef } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
-import { contextMenuPositionState } from '@/ui/table/states/contextMenuPositionState';
+import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState';
+import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState';
+import { contextMenuOpenState } from '@/ui/table/states/ContextMenuIsOpenState';
 
 type OwnProps = {
-  children: React.ReactNode | React.ReactNode[];
   selectedIds: string[];
 };
 
@@ -29,31 +30,18 @@ const StyledContainerActionBar = styled.div`
   z-index: 1;
 `;
 
-export function ActionBar({ children, selectedIds }: OwnProps) {
-  const position = useRecoilValue(contextMenuPositionState);
-  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
+export function ActionBar({ selectedIds }: OwnProps) {
+  const actionBarOpen = useRecoilValue(actionBarOpenState);
+  const contextMenuOpen = useRecoilValue(contextMenuOpenState);
+  const actionBarEntries = useRecoilValue(actionBarEntriesState);
+  const wrapperRef = useRef(null);
 
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (!(event.target as HTMLElement).closest('.action-bar')) {
-        setContextMenuPosition({ x: null, y: null });
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside);
-
-    // Cleanup the event listener when the component unmounts
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [setContextMenuPosition]);
-
-  if (selectedIds.length === 0 || position.x || position.y) {
+  if (selectedIds.length === 0 || !actionBarOpen || contextMenuOpen) {
     return null;
   }
   return (
-    <StyledContainerActionBar className="action-bar">
-      {children}
+    <StyledContainerActionBar ref={wrapperRef}>
+      {actionBarEntries}
     </StyledContainerActionBar>
   );
 }

front/src/modules/ui/action-bar/components/ActionBarEntry.tsx

@@ -4,18 +4,18 @@ import styled from '@emotion/styled';
 type OwnProps = {
   icon: ReactNode;
   label: string;
-  type?: 'standard' | 'warning';
+  type?: 'standard' | 'danger';
   onClick: () => void;
 };
 
 type StyledButtonProps = {
-  type: 'standard' | 'warning';
+  type: 'standard' | 'danger';
 };
 
 const StyledButton = styled.div<StyledButtonProps>`
   border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${(props) =>
-    props.type === 'warning'
+    props.type === 'danger'
       ? props.theme.color.red
       : props.theme.font.color.secondary};
   cursor: pointer;
@@ -28,9 +28,7 @@ const StyledButton = styled.div<StyledButtonProps>`
 
   &:hover {
     background: ${({ theme, type }) =>
-      type === 'warning'
-        ? theme.tag.background.red
-        : theme.background.tertiary};
+      type === 'danger' ? theme.tag.background.red : theme.background.tertiary};
   }
 `;
 
@@ -39,7 +37,7 @@ const StyledButtonLabel = styled.div`
   margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 
-export function EntityTableActionBarButton({
+export function ActionBarEntry({
   label,
   icon,
   type = 'standard',

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

@@ -8,7 +8,7 @@ const meta: Meta<typeof ActionBar> = {
   title: 'UI/ActionBar/ActionBar',
   component: ActionBar,
   decorators: [ComponentDecorator],
-  args: { children: 'Lorem ipsum', selectedIds: [] },
+  args: { selectedIds: [] },
 };
 
 export default meta;

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

@@ -1,10 +1,10 @@
 import { useRecoilCallback } from 'recoil';
 
+import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry';
 import { boardCardIdsByColumnIdFamilyState } from '@/ui/board/states/boardCardIdsByColumnIdFamilyState';
 import { boardColumnsState } from '@/ui/board/states/boardColumnsState';
 import { selectedBoardCardIdsState } from '@/ui/board/states/selectedBoardCardIdsState';
 import { IconTrash } from '@/ui/icon/index';
-import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
 
 export function BoardActionBarButtonDeleteBoardCard({
   onDelete,
@@ -51,10 +51,10 @@ export function BoardActionBarButtonDeleteBoardCard({
   }
 
   return (
-    <EntityTableActionBarButton
+    <ActionBarEntry
       label="Delete"
       icon={<IconTrash size={16} />}
-      type="warning"
+      type="danger"
       onClick={handleDeleteClick}
     />
   );

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

@@ -4,7 +4,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350
 import { IconList } from '@tabler/icons-react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 
 import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
 import { BoardHeader } from '@/ui/board/components/BoardHeader';
@@ -12,6 +12,7 @@ import { StyledBoard } from '@/ui/board/components/StyledBoard';
 import { useUpdateBoardCardIds } from '@/ui/board/hooks/useUpdateBoardCardIds';
 import { BoardColumnIdContext } from '@/ui/board/states/BoardColumnIdContext';
 import { SelectedSortType } from '@/ui/filter-n-sort/types/interface';
+import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import {
@@ -107,10 +108,12 @@ export function EntityBoard({
   const [selectedBoardCards, setSelectedBoardCards] = useRecoilState(
     selectedBoardCardIdsState,
   );
+  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
 
   function setRowSelectedState(boardCardId: string, selected: boolean) {
     if (selected && !selectedBoardCards.includes(boardCardId)) {
       setSelectedBoardCards([...selectedBoardCards, boardCardId ?? '']);
+      setActionBarOpenState(true);
     } else if (!selected && selectedBoardCards.includes(boardCardId)) {
       setSelectedBoardCards(
         selectedBoardCards.filter((id) => id !== boardCardId),

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

@@ -5,11 +5,7 @@ import { ActionBar } from '@/ui/action-bar/components/ActionBar';
 
 import { selectedBoardCardIdsState } from '../states/selectedBoardCardIdsState';
 
-type OwnProps = {
-  children: React.ReactNode | React.ReactNode[];
-};
-
-export function EntityBoardActionBar({ children }: OwnProps) {
+export function EntityBoardActionBar() {
   const selectedBoardCards = useRecoilValue(selectedBoardCardIdsState);
-  return <ActionBar selectedIds={selectedBoardCards}>{children}</ActionBar>;
+  return <ActionBar selectedIds={selectedBoardCards}></ActionBar>;
 }

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

@@ -0,0 +1,30 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { useSetRecoilState } from 'recoil';
+
+import { GET_PIPELINES } from '@/pipeline/queries';
+import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState';
+import { useDeleteManyPipelineProgressMutation } from '~/generated/graphql';
+
+import { BoardActionBarButtonDeleteBoardCard } from '../components/BoardActionBarButtonDeleteBoardCard';
+
+export function useOpenActionBar() {
+  const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
+
+  const [deletePipelineProgress] = useDeleteManyPipelineProgressMutation({
+    refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
+  });
+
+  async function handleDelete(cardIdsToDelete: string[]) {
+    await deletePipelineProgress({
+      variables: {
+        ids: cardIdsToDelete,
+      },
+    });
+  }
+
+  return () => {
+    setActionBarEntries([
+      <BoardActionBarButtonDeleteBoardCard onDelete={handleDelete} />,
+    ]);
+  };
+}

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

@@ -1,13 +1,16 @@
-import React, { useEffect } from 'react';
+import React, { useRef } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
+import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState';
+import { contextMenuEntriesState } from '@/ui/table/states/ContextMenuEntriesState';
+import { contextMenuOpenState } from '@/ui/table/states/ContextMenuIsOpenState';
 import { contextMenuPositionState } from '@/ui/table/states/contextMenuPositionState';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 import { PositionType } from '../types/PositionType';
 
 type OwnProps = {
-  children: React.ReactNode | React.ReactNode[];
   selectedIds: string[];
 };
 
@@ -34,31 +37,28 @@ const StyledContainerContextMenu = styled.div<StyledContainerProps>`
   z-index: 1;
 `;
 
-export function ContextMenu({ children, selectedIds }: OwnProps) {
+export function ContextMenu({ selectedIds }: OwnProps) {
   const position = useRecoilValue(contextMenuPositionState);
-  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
+  const contextMenuOpen = useRecoilValue(contextMenuOpenState);
+  const contextMenuEntries = useRecoilValue(contextMenuEntriesState);
+  const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState);
+  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
+  const wrapperRef = useRef(null);
 
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (!(event.target as HTMLElement).closest('.action-bar')) {
-        setContextMenuPosition({ x: null, y: null });
-      }
-    }
+  useListenClickOutside({
+    refs: [wrapperRef],
+    callback: () => {
+      setContextMenuOpenState(false);
+      setActionBarOpenState(true);
+    },
+  });
 
-    document.addEventListener('mousedown', handleClickOutside);
-
-    // Cleanup the event listener when the component unmounts
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [setContextMenuPosition]);
-
-  if (selectedIds.length === 0 || (!position.x && !position.y)) {
+  if (selectedIds.length === 0 || !contextMenuOpen) {
     return null;
   }
   return (
-    <StyledContainerContextMenu className="action-bar" position={position}>
-      {children}
+    <StyledContainerContextMenu ref={wrapperRef} position={position}>
+      {contextMenuEntries}
     </StyledContainerContextMenu>
   );
 }

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

@@ -4,12 +4,12 @@ import styled from '@emotion/styled';
 type OwnProps = {
   icon: ReactNode;
   label: string;
-  type?: 'standard' | 'warning';
+  type?: 'standard' | 'danger';
   onClick: () => void;
 };
 
 type StyledButtonProps = {
-  type: 'standard' | 'warning';
+  type: 'standard' | 'danger';
 };
 
 const StyledButton = styled.div<StyledButtonProps>`
@@ -17,7 +17,7 @@ const StyledButton = styled.div<StyledButtonProps>`
   align-self: stretch;
   border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${(props) =>
-    props.type === 'warning'
+    props.type === 'danger'
       ? props.theme.color.red
       : props.theme.font.color.secondary};
   cursor: pointer;
@@ -32,9 +32,7 @@ const StyledButton = styled.div<StyledButtonProps>`
 
   &:hover {
     background: ${({ theme, type }) =>
-      type === 'warning'
-        ? theme.tag.background.red
-        : theme.background.tertiary};
+      type === 'danger' ? theme.tag.background.red : theme.background.tertiary};
   }
 `;
 
@@ -43,7 +41,7 @@ const StyledButtonLabel = styled.div`
   margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 
-export function EntityTableContextMenuEntry({
+export function ContextMenuEntry({
   label,
   icon,
   type = 'standard',

front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx

@@ -5,12 +5,8 @@ import { ActionBar } from '@/ui/action-bar/components/ActionBar';
 
 import { selectedRowIdsSelector } from '../../states/selectedRowIdsSelector';
 
-type OwnProps = {
-  children: React.ReactNode | React.ReactNode[];
-};
-
-export function EntityTableActionBar({ children }: OwnProps) {
+export function EntityTableActionBar() {
   const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
 
-  return <ActionBar selectedIds={selectedRowIds}>{children}</ActionBar>;
+  return <ActionBar selectedIds={selectedRowIds}></ActionBar>;
 }

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

@@ -5,7 +5,7 @@ import { useSetRecoilState } from 'recoil';
 import { Checkbox } from '@/ui/input/checkbox/components/Checkbox';
 
 import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
-import { contextMenuPositionState } from '../states/contextMenuPositionState';
+import { actionBarOpenState } from '../states/ActionBarIsOpenState';
 
 const StyledContainer = styled.div`
   align-items: center;
@@ -18,14 +18,13 @@ const StyledContainer = styled.div`
 `;
 
 export function CheckboxCell() {
-  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
-
+  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
   const { currentRowSelected, setCurrentRowSelected } = useCurrentRowSelected();
 
   const handleClick = useCallback(() => {
     setCurrentRowSelected(!currentRowSelected);
-    setContextMenuPosition({ x: null, y: null });
-  }, [currentRowSelected, setContextMenuPosition, setCurrentRowSelected]);
+    setActionBarOpenState(true);
+  }, [currentRowSelected, setActionBarOpenState, setCurrentRowSelected]);
 
   return (
     <StyledContainer onClick={handleClick}>

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

@@ -6,23 +6,24 @@ import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'
 import { GenericEditableCell } from '../editable-cell/components/GenericEditableCell';
 import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
 import { ColumnIndexContext } from '../states/ColumnIndexContext';
+import { contextMenuOpenState } from '../states/ContextMenuIsOpenState';
 import { contextMenuPositionState } from '../states/contextMenuPositionState';
 import { ViewFieldContext } from '../states/ViewFieldContext';
 
 export function EntityTableCell({ cellIndex }: { cellIndex: number }) {
   const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
+  const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState);
 
   const { setCurrentRowSelected } = useCurrentRowSelected();
 
   function handleContextMenu(event: React.MouseEvent) {
     event.preventDefault();
-
     setCurrentRowSelected(true);
-
     setContextMenuPosition({
       x: event.clientX,
       y: event.clientY,
     });
+    setContextMenuOpenState(true);
   }
 
   const viewField = useContext(ViewFieldContext);

front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx

@@ -5,12 +5,7 @@ import { ContextMenu } from '@/ui/context-menu/components/ContextMenu';
 
 import { selectedRowIdsSelector } from '../../states/selectedRowIdsSelector';
 
-type OwnProps = {
-  children: React.ReactNode | React.ReactNode[];
-};
-
-export function EntityTableContextMenu({ children }: OwnProps) {
+export function EntityTableContextMenu() {
   const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
-
-  return <ContextMenu selectedIds={selectedRowIds}>{children}</ContextMenu>;
+  return <ContextMenu selectedIds={selectedRowIds}></ContextMenu>;
 }

front/src/modules/ui/table/states/ActionBarEntriesState.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { atom } from 'recoil';
+
+export const actionBarEntriesState = atom<ReactElement[]>({
+  key: 'actionBarEntriesState',
+  default: [],
+});

front/src/modules/ui/table/states/ActionBarIsOpenState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const actionBarOpenState = atom<boolean>({
+  key: 'actionBarOpenState',
+  default: false,
+});

front/src/modules/ui/table/states/ContextMenuEntriesState.ts

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

front/src/modules/ui/table/states/ContextMenuIsOpenState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const contextMenuOpenState = atom<boolean>({
+  key: 'contextMenuOpenState',
+  default: false,
+});

front/src/pages/companies/Companies.tsx

@@ -1,14 +1,13 @@
+import { useEffect } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 import { v4 } from 'uuid';
 
+import { useOpenActionBar } from '@/companies/hooks/useOpenActionBar';
+import { useOpenContextMenu } from '@/companies/hooks/useOpenContextMenu';
 import { CompanyTable } from '@/companies/table/components/CompanyTable';
-import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany';
-import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies';
-import { TableContextMenuEntryDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies copy';
-import { TableContextMenuEntryCreateActivityCompany } from '@/companies/table/components/TableContextMenuEntryCreateActivityCompany copy';
 import { SEARCH_COMPANY_QUERY } from '@/search/queries/search';
 import { IconBuildingSkyscraper } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
@@ -60,6 +59,14 @@ export function Companies() {
 
   const theme = useTheme();
 
+  const setContextMenu = useOpenContextMenu();
+  const setActionBar = useOpenActionBar();
+
+  useEffect(() => {
+    setContextMenu();
+    setActionBar();
+  }, [setContextMenu, setActionBar]);
+
   return (
     <>
       <WithTopBarContainer
@@ -71,14 +78,8 @@ export function Companies() {
           <StyledTableContainer>
             <CompanyTable />
           </StyledTableContainer>
-          <EntityTableActionBar>
-            <TableActionBarButtonCreateActivityCompany />
-            <TableActionBarButtonDeleteCompanies />
-          </EntityTableActionBar>
-          <EntityTableContextMenu>
-            <TableContextMenuEntryCreateActivityCompany />
-            <TableContextMenuEntryDeleteCompanies />
-          </EntityTableContextMenu>
+          <EntityTableActionBar></EntityTableActionBar>
+          <EntityTableContextMenu></EntityTableContextMenu>
         </RecoilScope>
       </WithTopBarContainer>
     </>

front/src/pages/companies/CompaniesMockMode.tsx

@@ -2,8 +2,6 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
-import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany';
-import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies';
 import { IconBuildingSkyscraper } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
 import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
@@ -28,10 +26,7 @@ export function CompaniesMockMode() {
           <StyledTableContainer>
             <CompanyTableMockMode />
           </StyledTableContainer>
-          <EntityTableActionBar>
-            <TableActionBarButtonCreateActivityCompany />
-            <TableActionBarButtonDeleteCompanies />
-          </EntityTableActionBar>
+          <EntityTableActionBar></EntityTableActionBar>
         </RecoilScope>
       </WithTopBarContainer>
     </>

front/src/pages/opportunities/Opportunities.tsx

@@ -1,17 +1,15 @@
-import { useCallback, useState } from 'react';
-import { getOperationName } from '@apollo/client/utilities';
+import { useCallback, useEffect, useState } from 'react';
 import { useTheme } from '@emotion/react';
 
 import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard';
 import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
 import {
   defaultPipelineProgressOrderBy,
-  GET_PIPELINES,
   PipelineProgressesSelectedSortType,
 } from '@/pipeline/queries';
-import { BoardActionBarButtonDeleteBoardCard } from '@/ui/board/components/BoardActionBarButtonDeleteBoardCard';
 import { EntityBoard } from '@/ui/board/components/EntityBoard';
 import { EntityBoardActionBar } from '@/ui/board/components/EntityBoardActionBar';
+import { useOpenActionBar } from '@/ui/board/hooks/useActionBar';
 import { BoardOptionsContext } from '@/ui/board/states/BoardOptionsContext';
 import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
 import { AvailableFiltersContext } from '@/ui/filter-n-sort/states/AvailableFiltersContext';
@@ -20,7 +18,6 @@ import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import {
   PipelineProgressOrderByWithRelationInput,
-  useDeleteManyPipelineProgressMutation,
   useUpdatePipelineStageMutation,
 } from '~/generated/graphql';
 import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
@@ -67,17 +64,11 @@ export function Opportunities() {
     });
   }
 
-  const [deletePipelineProgress] = useDeleteManyPipelineProgressMutation({
-    refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
-  });
+  const setActionBar = useOpenActionBar();
 
-  async function handleDelete(cardIdsToDelete: string[]) {
-    await deletePipelineProgress({
-      variables: {
-        ids: cardIdsToDelete,
-      },
-    });
-  }
+  useEffect(() => {
+    setActionBar();
+  }, [setActionBar]);
 
   return (
     <WithTopBarContainer
@@ -95,9 +86,7 @@ export function Opportunities() {
               updateSorts={updateSorts}
               onEditColumnTitle={handleEditColumnTitle}
             />
-            <EntityBoardActionBar>
-              <BoardActionBarButtonDeleteBoardCard onDelete={handleDelete} />
-            </EntityBoardActionBar>
+            <EntityBoardActionBar></EntityBoardActionBar>
           </AvailableFiltersContext.Provider>
         </RecoilScope>
       </BoardOptionsContext.Provider>

front/src/pages/people/People.tsx

@@ -1,13 +1,12 @@
+import { useEffect } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 import { v4 } from 'uuid';
 
+import { useOpenActionBar } from '@/people/hooks/useOpenActionBar';
+import { useOpenContextMenu } from '@/people/hooks/useOpenContextMenu';
 import { PeopleTable } from '@/people/table/components/PeopleTable';
-import { TableActionBarButtonCreateActivityPeople } from '@/people/table/components/TableActionBarButtonCreateActivityPeople';
-import { TableActionBarButtonDeletePeople } from '@/people/table/components/TableActionBarButtonDeletePeople';
-import { TableContextMenuEntryDeletePeople } from '@/people/table/components/TableActionContextMenuEntryDeletePeople';
-import { TableContextMenuEntryCreateActivityPeople } from '@/people/table/components/TableContextMenuEntryCreateActivityPeople';
 import { IconUser } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
 import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
@@ -56,6 +55,14 @@ export function People() {
 
   const theme = useTheme();
 
+  const setContextMenu = useOpenContextMenu();
+  const setActionBar = useOpenActionBar();
+
+  useEffect(() => {
+    setContextMenu();
+    setActionBar();
+  }, [setContextMenu, setActionBar]);
+
   return (
     <RecoilScope SpecificContext={TableContext}>
       <WithTopBarContainer
@@ -66,14 +73,8 @@ export function People() {
         <StyledTableContainer>
           <PeopleTable />
         </StyledTableContainer>
-        <EntityTableActionBar>
-          <TableActionBarButtonCreateActivityPeople />
-          <TableActionBarButtonDeletePeople />
-        </EntityTableActionBar>
-        <EntityTableContextMenu>
-          <TableContextMenuEntryCreateActivityPeople />
-          <TableContextMenuEntryDeletePeople />
-        </EntityTableContextMenu>
+        <EntityTableActionBar></EntityTableActionBar>
+        <EntityTableContextMenu></EntityTableContextMenu>
       </WithTopBarContainer>
     </RecoilScope>
   );