Merge branch 'refactor-dropdown-parameters-ce' into 'master'

Refactor filtered search dropdown parameters

Closes #32814

See merge request !12877

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',

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: {

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`,

app/assets/javascripts/filtered_search/filtered_search_dropdown.js

 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;

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) {

spec/javascripts/filtered_search/dropdown_user_spec.js

@@ -12,7 +12,9 @@ describe('Dropdown User', () => {
       spyOn(gl.DropdownUser.prototype, 'getProjectId').and.callFake(() => {});
       spyOn(gl.DropdownUtils, 'getSearchInput').and.callFake(() => {});
-      dropdownUser = new gl.DropdownUser(null, null, null, gl.FilteredSearchTokenKeys);
+      dropdownUser = new gl.DropdownUser({
+        tokenKeys: gl.FilteredSearchTokenKeys,
+      });
     });
     it('should not return the double quote found in value', () => {
@@ -78,7 +80,10 @@ describe('Dropdown User', () => {
       loadFixtures(fixtureTemplate);
       authorFilterDropdownElement = document.querySelector('#js-dropdown-author');
       const dummyInput = document.createElement('div');
-      dropdown = new gl.DropdownUser(null, authorFilterDropdownElement, dummyInput);
+      dropdown = new gl.DropdownUser({
+        dropdown: authorFilterDropdownElement,
+        input: dummyInput,
+      });
     });
     const findCurrentUserElement = () => authorFilterDropdownElement.querySelector('.js-current-user');