1 files changed, 26 insertions, 15 deletions

diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js b/app/assets/javascripts/boards/components/new_list_dropdown.js
index 2bc54155163..2fd16f06455 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js
@@ -1,15 +1,15 @@
 /* eslint-disable func-names, no-new */
 
 import $ from 'jquery';
-import { __ } from '~/locale';
-import axios from '~/lib/utils/axios_utils';
+import store from '~/boards/stores';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import { deprecatedCreateFlash as flash } from '~/flash';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
 import CreateLabelDropdown from '../../create_label';
-import boardsStore from '../stores/boards_store';
 import { fullLabelId } from '../boards_util';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import store from '~/boards/stores';
-import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
+import boardsStore from '../stores/boards_store';
 
 function shouldCreateListGraphQL(label) {
   return store.getters.shouldUseGraphQL && !store.getters.getListByLabelId(fullLabelId(label));
@@ -51,16 +51,27 @@ export default function initNewListDropdown() {
 
     initDeprecatedJQueryDropdown($dropdownToggle, {
       data(term, callback) {
-        axios
-          .get($dropdownToggle.attr('data-list-labels-path'))
-          .then(({ data }) => callback(data))
-          .catch(() => {
-            $dropdownToggle.data('bs.dropdown').hide();
-            flash(__('Error fetching labels.'));
-          });
+        const reqFailed = () => {
+          $dropdownToggle.data('bs.dropdown').hide();
+          flash(__('Error fetching labels.'));
+        };
+
+        if (store.getters.shouldUseGraphQL) {
+          store
+            .dispatch('fetchLabels')
+            .then((data) => callback(data))
+            .catch(reqFailed);
+        } else {
+          axios
+            .get($dropdownToggle.attr('data-list-labels-path'))
+            .then(({ data }) => callback(data))
+            .catch(reqFailed);
+        }
       },
       renderRow(label) {
-        const active = boardsStore.findListByLabelId(label.id);
+        const active = store.getters.shouldUseGraphQL
+          ? store.getters.getListByLabelId(label.id)
+          : boardsStore.findListByLabelId(label.id);
         const $li = $('<li />');
         const $a = $('<a />', {
           class: active ? `is-active js-board-list-${getIdFromGraphQLId(active.id)}` : '',
@@ -87,7 +98,7 @@ export default function initNewListDropdown() {
         e.preventDefault();
 
         if (shouldCreateListGraphQL(label)) {
-          store.dispatch('createList', { labelId: fullLabelId(label) });
+          store.dispatch('createList', { labelId: label.id });
         } else if (!boardsStore.findListByLabelId(label.id)) {
           boardsStore.new({
             title: label.title,