- refactored to use multiple states

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