Place multiselect drag drop behind a feature flag

The Vue library we use for the refactored boards
does not support multi-item drag&drop.

Until we complete the implementation of drag and drop
in the refactored boards, we will disable multi select
in boards by placing it behind a feature flag.

Docs change:
Add a section on 'board_multi_select'
and update Multi-select issue cards section.

Changelog: other

app/assets/javascripts/boards/components/board_card.vue

@@ -54,7 +54,7 @@ export default {
       if (e.target.closest('.js-no-trigger')) return;
 
       const isMultiSelect = e.ctrlKey || e.metaKey;
-      if (isMultiSelect) {
+      if (isMultiSelect && gon?.features?.boardMultiSelect) {
         this.toggleBoardItemMultiSelection(this.item);
       } else {
         this.toggleBoardItem({ boardItem: this.item });

app/controllers/groups/boards_controller.rb

@@ -8,6 +8,7 @@ class Groups::BoardsController < Groups::ApplicationController
   before_action :assign_endpoint_vars
   before_action do
     push_frontend_feature_flag(:graphql_board_lists, group, default_enabled: false)
+    push_frontend_feature_flag(:board_multi_select, group, default_enabled: :yaml)
     push_frontend_feature_flag(:swimlanes_buffered_rendering, group, default_enabled: :yaml)
   end
 

app/controllers/projects/boards_controller.rb

@@ -9,6 +9,7 @@ class Projects::BoardsController < Projects::ApplicationController
   before_action do
     push_frontend_feature_flag(:swimlanes_buffered_rendering, project, default_enabled: :yaml)
     push_frontend_feature_flag(:graphql_board_lists, project, default_enabled: :yaml)
+    push_frontend_feature_flag(:board_multi_select, project, default_enabled: :yaml)
   end
 
   feature_category :boards

config/feature_flags/development/board_multi_select.yml

+---
+name: board_multi_select
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/61955
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/331189
+milestone: '14.0'
+type: development
+group: group::product planning
+default_enabled: false

doc/user/project/issue_board.md

@@ -583,7 +583,15 @@ When dragging issues between lists, different behavior occurs depending on the s
 
 ### Multi-select issue cards
 
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/18954) in GitLab 12.4.
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/18954) in GitLab 12.4.
+> - [Placed](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/61955) behind a [feature flag](../feature_flags.md), disabled by default in GitLab 14.0.
+> - Disabled on GitLab.com.
+> - Not recommended for production use.
+> - To use in GitLab self-managed instances, ask a GitLab administrator to [enable it](#enable-or-disable-multi-selecting-issue-cards). **(FREE SELF)**
+
+This in-development feature might not be available for your use. There can be
+[risks when enabling features still in development](../feature_flags.md#risks-when-enabling-features-still-in-development).
+Refer to this feature's version history for more details.
 
 You can select multiple issue cards, then drag the group to another position within the list, or to
 another list. This makes it faster to reorder many issues at once.
@@ -685,3 +693,22 @@ To disable it:
 ```ruby
 Feature.disable(:iteration_board_lists)
 ```
+
+### Enable or disable multi-selecting issue cards **(FREE SELF)**
+
+Multi-selecting issue cards is under development and not ready for production use. It is
+deployed behind a feature flag that is **disabled by default**.
+[GitLab administrators with access to the GitLab Rails console](../../administration/feature_flags.md)
+can enable it.
+
+To enable it:
+
+```ruby
+Feature.enable(:board_multi_select)
+```
+
+To disable it:
+
+```ruby
+Feature.disable(:board_multi_select)
+```

spec/features/boards/multi_select_spec.rb

@@ -41,9 +41,9 @@ RSpec.describe 'Multi Select Issue', :js do
   before do
     project.add_maintainer(user)
 
-    # multi-drag disabled with feature flag for now
+    # Multi select drag&drop support is temporarily disabled
     # https://gitlab.com/gitlab-org/gitlab/-/issues/289797
-    stub_feature_flags(graphql_board_lists: false)
+    stub_feature_flags(graphql_board_lists: false, board_multi_select: project)
 
     sign_in(user)
   end

spec/frontend/boards/components/board_card_spec.js

@@ -72,6 +72,10 @@ describe('Board card', () => {
     await wrapper.vm.$nextTick();
   };
 
+  beforeEach(() => {
+    window.gon = { features: {} };
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -140,6 +144,10 @@ describe('Board card', () => {
     });
 
     describe('when using multi-select', () => {
+      beforeEach(() => {
+        window.gon = { features: { boardMultiSelect: true } };
+      });
+
       it('should call vuex action "multiSelectBoardItem" with correct parameters', async () => {
         await multiSelectCard();