Drag to select boards (#1127)

- drag to select boards

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

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -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 { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import {
   PipelineProgress,
@@ -23,6 +24,7 @@ import {
 import { GET_PIPELINE_PROGRESS } from '../../../pipeline/queries';
 import { BoardColumnContext } from '../states/BoardColumnContext';
 import { boardColumnsState } from '../states/boardColumnsState';
+import { selectedBoardCardIdsState } from '../states/selectedBoardCardIdsState';
 import { BoardOptions } from '../types/BoardOptions';
 
 import { EntityBoardColumn } from './EntityBoardColumn';
@@ -103,6 +105,21 @@ export function EntityBoard({
     return a.index - b.index;
   });
 
+  const boardRef = useRef(null);
+  const [selectedBoardCards, setSelectedBoardCards] = useRecoilState(
+    selectedBoardCardIdsState,
+  );
+
+  function setRowSelectedState(boardCardId: string, selected: boolean) {
+    if (selected && !selectedBoardCards.includes(boardCardId)) {
+      setSelectedBoardCards([...selectedBoardCards, boardCardId ?? '']);
+    } else if (!selected && selectedBoardCards.includes(boardCardId)) {
+      setSelectedBoardCards(
+        selectedBoardCards.filter((id) => id !== boardCardId),
+      );
+    }
+  }
+
   return (boardColumns?.length ?? 0) > 0 ? (
     <StyledBoardWithHeader>
       <BoardHeader
@@ -112,7 +129,7 @@ export function EntityBoard({
         onSortsUpdate={updateSorts}
         context={CompanyBoardContext}
       />
-      <StyledBoard>
+      <StyledBoard ref={boardRef}>
         <DragDropContext onDragEnd={onDragEnd}>
           {sortedBoardColumns.map((column) => (
             <BoardColumnIdContext.Provider value={column.id} key={column.id}>
@@ -128,6 +145,10 @@ export function EntityBoard({
           ))}
         </DragDropContext>
       </StyledBoard>
+      <DragSelect
+        dragSelectable={boardRef}
+        onDragSelectionChange={setRowSelectedState}
+      />
     </StyledBoardWithHeader>
   ) : (
     <></>

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

@@ -18,6 +18,8 @@ export function EntityBoardCard({
           ref={draggableProvided?.innerRef}
           {...draggableProvided?.dragHandleProps}
           {...draggableProvided?.draggableProps}
+          data-selectable-id={cardId}
+          data-select-disable
         >
           {boardOptions.cardComponent}
         </div>

front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx

@@ -7,7 +7,7 @@ import {
 type OwnProps = {
   dragSelectable: RefObject<HTMLElement>;
   onDragSelectionChange: (id: string, selected: boolean) => void;
-  onDragSelectionStart: () => void;
+  onDragSelectionStart?: () => void;
 };
 
 export function DragSelect({