Refactor filtered search dropdown parameters

5 files changed, 29 insertions, 14 deletions

diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js
index 5838b1bdbb7..a81389ab088 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js
@@ -2,8 +2,9 @@ import Filter from '~/droplab/plugins/filter';
 import './filtered_search_dropdown';
 
 class DropdownHint extends gl.FilteredSearchDropdown {
-  constructor(droplab, dropdown, input, tokenKeys, filter) {
-    super(droplab, dropdown, input, filter);
+  constructor(options = {}) {
+    const { input, tokenKeys } = options;
+    super(options);
     this.config = {
       Filter: {
         template: 'hint',
diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js b/app/assets/javascripts/filtered_search/dropdown_non_user.js
index 34a9e34070c..2615d626c4c 100644
--- a/app/assets/javascripts/filtered_search/dropdown_non_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js
@@ -5,8 +5,9 @@ import Filter from '~/droplab/plugins/filter';
 import './filtered_search_dropdown';
 
 class DropdownNonUser extends gl.FilteredSearchDropdown {
-  constructor(droplab, dropdown, input, tokenKeys, filter, endpoint, symbol) {
-    super(droplab, dropdown, input, filter);
+  constructor(options = {}) {
+    const { input, endpoint, symbol } = options;
+    super(options);
     this.symbol = symbol;
     this.config = {
       Ajax: {
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js
index 19fed771197..7246ccbb281 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js
@@ -5,8 +5,9 @@ import './filtered_search_dropdown';
 import { addClassIfElementExists } from '../lib/utils/dom_utils';
 
 class DropdownUser extends gl.FilteredSearchDropdown {
-  constructor(droplab, dropdown, input, tokenKeys, filter) {
-    super(droplab, dropdown, input, filter);
+  constructor(options = {}) {
+    const { tokenKeys } = options;
+    super(options);
     this.config = {
       AjaxFilter: {
         endpoint: `${gon.relative_url_root || ''}/autocomplete/users.json`,
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
index 4209ca0d6e2..9e9a9ef74be 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
@@ -1,7 +1,7 @@
 const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
 
 class FilteredSearchDropdown {
-  constructor(droplab, dropdown, input, filter) {
+  constructor({ droplab, dropdown, input, filter }) {
     this.droplab = droplab;
     this.hookId = input && input.id;
     this.input = input;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
index 6bc6bc43f51..61cef435209 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
@@ -42,13 +42,19 @@ class FilteredSearchDropdownManager {
       milestone: {
         reference: null,
         gl: 'DropdownNonUser',
-        extraArguments: [`${this.baseEndpoint}/milestones.json`, '%'],
+        extraArguments: {
+          endpoint: `${this.baseEndpoint}/milestones.json`,
+          symbol: '%',
+        },
         element: this.container.querySelector('#js-dropdown-milestone'),
       },
       label: {
         reference: null,
         gl: 'DropdownNonUser',
-        extraArguments: [`${this.baseEndpoint}/labels.json`, '~'],
+        extraArguments: {
+          endpoint: `${this.baseEndpoint}/labels.json`,
+          symbol: '~',
+        },
         element: this.container.querySelector('#js-dropdown-label'),
       },
       hint: {
@@ -97,13 +103,19 @@ class FilteredSearchDropdownManager {
     let forceShowList = false;
 
     if (!mappingKey.reference) {
-      const dl = this.droplab;
-      const defaultArguments =
-        [null, dl, element, this.filteredSearchInput, this.filteredSearchTokenKeys, key];
-      const glArguments = defaultArguments.concat(mappingKey.extraArguments || []);
+      const defaultArguments = {
+        droplab: this.droplab,
+        dropdown: element,
+        input: this.filteredSearchInput,
+        tokenKeys: this.filteredSearchTokenKeys,
+        filter: key,
+      };
+      const extraArguments = mappingKey.extraArguments || {};
+      const glArguments = Object.assign({}, defaultArguments, extraArguments);
 
       // Passing glArguments to `new gl[glClass](<arguments>)`
-      mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))();
+      mappingKey.reference =
+        new (Function.prototype.bind.apply(gl[glClass], [null, glArguments]))();
     }
 
     if (firstLoad) {