Add board_new_list feature flag and placeholder

Button currently doesn't do anything

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

+<script>
+import { GlButton } from '@gitlab/ui';
+import { mapActions } from 'vuex';
+
+export default {
+  components: {
+    GlButton,
+  },
+  methods: {
+    ...mapActions(['setAddColumnFormVisibility']),
+  },
+};
+</script>
+
+<template>
+  <span class="gl-ml-4">
+    <gl-button variant="success" @click="setAddColumnFormVisibility(true)"
+      >{{ __('Create list') }}
+    </gl-button>
+  </span>
+</template>

app/assets/javascripts/boards/index.js

@@ -16,6 +16,7 @@ import {
   getBoardsModalData,
 } from 'ee_else_ce/boards/ee_functions';
 
+import BoardAddNewColumnTrigger from '~/boards/components/board_add_new_column_trigger.vue';
 import BoardContent from '~/boards/components/board_content.vue';
 import BoardExtraActions from '~/boards/components/board_extra_actions.vue';
 import createDefaultClient from '~/lib/graphql';
@@ -288,6 +289,21 @@ export default () => {
     },
   });
 
+  const createColumnTriggerEl = document.querySelector('.js-create-column-trigger');
+  if (createColumnTriggerEl) {
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: createColumnTriggerEl,
+      components: {
+        BoardAddNewColumnTrigger,
+      },
+      store,
+      render(createElement) {
+        return createElement('board-add-new-column-trigger');
+      },
+    });
+  }
+
   boardConfigToggle(boardsStore);
 
   const issueBoardsModal = document.getElementById('js-add-issues-btn');

app/assets/javascripts/boards/stores/actions.js

@@ -547,6 +547,10 @@ export default {
     }
   },
 
+  setAddColumnFormVisibility: ({ commit }, visible) => {
+    commit(types.SET_ADD_COLUMN_FORM_VISIBLE, visible);
+  },
+
   fetchBacklog: () => {
     notImplemented();
   },

app/assets/javascripts/boards/stores/mutation_types.js

@@ -42,3 +42,4 @@ export const RECEIVE_GROUP_PROJECTS_FAILURE = 'RECEIVE_GROUP_PROJECTS_FAILURE';
 export const SET_SELECTED_PROJECT = 'SET_SELECTED_PROJECT';
 export const ADD_BOARD_ITEM_TO_SELECTION = 'ADD_BOARD_ITEM_TO_SELECTION';
 export const REMOVE_BOARD_ITEM_FROM_SELECTION = 'REMOVE_BOARD_ITEM_FROM_SELECTION';
+export const SET_ADD_COLUMN_FORM_VISIBLE = 'SET_ADD_COLUMN_FORM_VISIBLE';

app/assets/javascripts/boards/stores/mutations.js

@@ -270,4 +270,8 @@ export default {
       state.selectedBoardItems.filter((obj) => obj !== boardItem),
     );
   },
+
+  [mutationTypes.SET_ADD_COLUMN_FORM_VISIBLE]: (state, visible) => {
+    state.addColumnFormVisible = visible;
+  },
 };

app/assets/javascripts/boards/stores/state.js

@@ -24,6 +24,7 @@ export default () => ({
   },
   selectedProject: {},
   error: undefined,
+  addColumnFormVisible: false,
   // TODO: remove after ce/ee split of board_content.vue
   isShowingEpicsSwimlanes: false,
 });

app/views/shared/issuable/_search_bar.html.haml

@@ -195,7 +195,10 @@
         #js-board-labels-toggle
         .js-board-config{ data: { can_admin_list: user_can_admin_list, has_scope: board.scoped? } }
         - if user_can_admin_list
-          = render 'shared/issuable/board_create_list_dropdown', board: board
+          - if Feature.enabled?(:board_new_list, board.resource_parent, default_enabled: :yaml)
+            .js-create-column-trigger{ data: board_list_data }
+          - else
+            = render 'shared/issuable/board_create_list_dropdown', board: board
           - if @project
             #js-add-issues-btn.gl-ml-3{ data: { can_admin_list: can?(current_user, :admin_list, @project) } }
         - if current_user

config/feature_flags/development/board_new_list.yml

+---
+name: board_new_list
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/52061
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/299366
+milestone: '13.8'
+type: development
+group: group::project management
+default_enabled: false

ee/spec/features/boards/boards_spec.rb

@@ -40,6 +40,7 @@ RSpec.describe 'issue boards', :js do
     let(:project) { create(:project, :public, namespace: group) }
 
     before do
+      stub_feature_flags(board_new_list: false)
       project.add_maintainer(user)
       group.add_reporter(user)
       login_as(user)

locale/gitlab.pot

@@ -8314,6 +8314,9 @@ msgstr ""
 msgid "Create iteration"
 msgstr ""
 
+msgid "Create list"
+msgstr ""
+
 msgid "Create lists from labels. Issues with that label appear in that list."
 msgstr ""
 

spec/features/boards/boards_spec.rb

@@ -13,6 +13,8 @@ RSpec.describe 'Issue Boards', :js do
   let_it_be(:user2)   { create(:user) }
 
   before do
+    stub_feature_flags(board_new_list: false)
+
     project.add_maintainer(user)
     project.add_maintainer(user2)
 

spec/features/labels_hierarchy_spec.rb

@@ -18,6 +18,7 @@ RSpec.describe 'Labels Hierarchy', :js do
 
   before do
     stub_feature_flags(graphql_board_lists: false)
+    stub_feature_flags(board_new_list: false)
     grandparent.add_owner(user)
 
     sign_in(user)
@@ -270,6 +271,10 @@ RSpec.describe 'Labels Hierarchy', :js do
   end
 
   context 'creating boards lists' do
+    before do
+      stub_feature_flags(board_new_list: false)
+    end
+
     context 'on project boards' do
       let(:board) { create(:board, project: project_1) }
 

spec/support/shared_examples/boards/multiple_issue_boards_shared_examples.rb

@@ -3,6 +3,8 @@
 RSpec.shared_examples 'multiple issue boards' do
   context 'authorized user' do
     before do
+      stub_feature_flags(board_new_list: false)
+
       parent.add_maintainer(user)
 
       login_as(user)