[WEB-1184] feat: issue bulk operations

[aaryan610]

Issue Bulk Operations

Users can now perform bulk operations on project level issues. Actions that can be performed-

1. Archive.
2. Delete.
3. Change properties(State, assignees, priority, start date, due date and labels).

Functionality:

Bulk operations are available in the List, Spreadsheet and Gantt layouts. There are various ways to select an issue-

1. By clicking on the checkbox which appears while hovering over an issue.
2. By using arrow keys to navigate between issues and using Shift + ArrowDown/ArrowUp to select issues.
3. By using Shift + left mouse click to select all the issues between the last selected issue and the clicked issue.

Media:

Various ways to select issues-

Screen.Recording.2024-05-23.at.15.08.52.mov

Implementation

MultipleSelectGroup HOC

Created a HOC <MultipleSelectGroup /> which accepts the following 2 props-

1. groups- Array of group ids.
2. entities- Object of the following structure-

{
  [groupId: string]: string[] // entity ids
}

This HOC makes use of the MultipleSelectStore to manage selected entities state. This HOC can be reused to implement multiple select functionality anywhere.

MultipleSelectGroupAction

This component takes care of rendering the checkbox for each group.

MultipleSelectEntityAction

This component takes care of rendering the checkbox and adds extra attributes to the checkbox element to handle DOM manipulation for each entity(issue, in this case), if needed, and handle auto-scroll when using keyboard navigation.

useMultipleSelect hook

This custom hook contains all the logic to manage selected entities and returns the following two objects-

1. helpers- A list of all the helper functions.
2. snapshot- A list of current status of the select group.

Plane issue: WEB-1184

[SatishGandham]

We should profile this. Snapshot changes when you select, right?