Merge branch 'issue-board-new-label-new-list' into 'master'

Creates new list from a new label

## What does this MR do?

After creating a new label in the new list dropdown it automatically creates a new list.

## Screenshots (if relevant)

![new-label](/uploads/87940e364dc075ea8cc08d97bc1f1eff/new-label.gif)

## What are the relevant issue numbers?

Closes #23026

See merge request !6744

4 files changed, 35 insertions, 0 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee0b31356e8..7ed09fb1db8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ entry.
 - Adds support for the `token` attribute in project hooks API (Gauvain Pocentek)
 - Adds an optional path parameter to the Commits API to filter commits by path (Luis HGO)
 - Fix Markdown styling inside reference links (Jan Zdráhal)
+- Create new issue board list after creating a new label
 - Fix extra space on Build sidebar on Firefox !7060
 - Fail gracefully when creating merge request with non-existing branch (alexsanford)
 - Fix mobile layout issues in admin user overview page !7087
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js.es6 b/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
index fe1a6dc7ea0..14f618fd5d5 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
@@ -2,6 +2,19 @@
 $(() => {
   const Store = gl.issueBoards.BoardsStore;
 
+  $(document).off('created.label').on('created.label', (e, label) => {
+    Store.new({
+      title: label.title,
+      position: Store.state.lists.length - 2,
+      list_type: 'label',
+      label: {
+        id: label.id,
+        title: label.title,
+        color: label.color
+      }
+    });
+  });
+
   $('.js-new-board-list').each(function () {
     const $this = $(this);
     new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path'));
diff --git a/app/assets/javascripts/create_label.js.es6 b/app/assets/javascripts/create_label.js.es6
index f20580b1279..744aa0afa03 100644
--- a/app/assets/javascripts/create_label.js.es6
+++ b/app/assets/javascripts/create_label.js.es6
@@ -115,6 +115,8 @@
             .show();
         } else {
           this.$dropdownBack.trigger('click');
+
+          $(document).trigger('created.label', label);
         }
       });
     }
diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb
index a92075fec8f..6cb8753e8fc 100644
--- a/spec/features/boards/boards_spec.rb
+++ b/spec/features/boards/boards_spec.rb
@@ -380,6 +380,25 @@ describe 'Issue Boards', feature: true, js: true do
 
           wait_for_board_cards(1, 5)
         end
+
+        it 'creates new list from a new label' do
+          click_button 'Create new list'
+
+          wait_for_ajax
+
+          click_link 'Create new label'
+
+          fill_in('new_label_name', with: 'Testing New Label')
+
+          first('.suggest-colors a').click
+
+          click_button 'Create'
+
+          wait_for_ajax
+          wait_for_vue_resource
+
+          expect(page).to have_selector('.board', count: 5)
+        end
       end
     end