Boards add context menu (#1223)

* - add context menu to boards

* - delete unused file

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

@@ -1,49 +0,0 @@
-import { getOperationName } from '@apollo/client/utilities';
-import { useRecoilValue } from 'recoil';
-
-import { GET_PIPELINES } from '@/pipeline/graphql/queries/getPipelines';
-import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry';
-import { IconTrash } from '@/ui/icon/index';
-import { useDeleteManyPipelineProgressMutation } from '~/generated/graphql';
-
-import { useRemoveCardIds } from '../hooks/useRemoveCardIds';
-import { selectedCardIdsSelector } from '../states/selectors/selectedCardIdsSelector';
-
-export function BoardActionBarButtonDeleteBoardCard() {
-  const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
-  const removeCardIds = useRemoveCardIds();
-
-  const [deletePipelineProgress] = useDeleteManyPipelineProgressMutation({
-    refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
-  });
-
-  async function handleDelete() {
-    await deletePipelineProgress({
-      variables: {
-        ids: selectedCardIds,
-      },
-      optimisticResponse: {
-        __typename: 'Mutation',
-        deleteManyPipelineProgress: {
-          count: selectedCardIds.length,
-        },
-      },
-      update: (cache) => {
-        removeCardIds(selectedCardIds);
-        selectedCardIds.forEach((id) => {
-          cache.evict({ id: `PipelineProgress:${id}` });
-        });
-      },
-    });
-  }
-
-  return (
-    <ActionBarEntry
-      label="Delete"
-      icon={<IconTrash size={16} />}
-      type="danger"
-      onClick={handleDelete}
-      key="delete"
-    />
-  );
-}

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

@@ -1,5 +1,10 @@
 import { Draggable } from '@hello-pangea/dnd';
+import { useSetRecoilState } from 'recoil';
 
+import { contextMenuIsOpenState } from '@/ui/context-menu/states/contextMenuIsOpenState';
+import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPositionState';
+
+import { useCurrentCardSelected } from '../hooks/useCurrentCardSelected';
 import { BoardOptions } from '../types/BoardOptions';
 
 export function EntityBoardCard({
@@ -11,6 +16,21 @@ export function EntityBoardCard({
   cardId: string;
   index: number;
 }) {
+  const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
+  const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
+
+  const { setCurrentCardSelected } = useCurrentCardSelected();
+
+  function handleContextMenu(event: React.MouseEvent) {
+    event.preventDefault();
+    setCurrentCardSelected(true);
+    setContextMenuPosition({
+      x: event.clientX,
+      y: event.clientY,
+    });
+    setContextMenuOpenState(true);
+  }
+
   return (
     <Draggable key={cardId} draggableId={cardId} index={index}>
       {(draggableProvided) => (
@@ -20,6 +40,7 @@ export function EntityBoardCard({
           {...draggableProvided?.draggableProps}
           data-selectable-id={cardId}
           data-select-disable
+          onContextMenu={handleContextMenu}
         >
           {boardOptions.cardComponent}
         </div>

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { ContextMenu } from '@/ui/context-menu/components/ContextMenu';
+
+import { selectedCardIdsSelector } from '../states/selectors/selectedCardIdsSelector';
+
+export function EntityBoardContextMenu() {
+  const selectedBoardCards = useRecoilValue(selectedCardIdsSelector);
+  return <ContextMenu selectedIds={selectedBoardCards}></ContextMenu>;
+}