From 985c2330abc61cb007a4f0392bf7fcb0be18199e Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 12 Jul 2017 16:26:54 -0500 Subject: [PATCH 1/2] Refactor filtered search dropdown parameters --- .../filtered_search/dropdown_hint.js | 5 ++-- .../filtered_search/dropdown_non_user.js | 5 ++-- .../filtered_search/dropdown_user.js | 5 ++-- .../filtered_search_dropdown.js | 4 ++- .../filtered_search_dropdown_manager.js | 25 +++++++++++++------ .../filtered_search/dropdown_user_spec.js | 9 +++++-- 6 files changed, 37 insertions(+), 16 deletions(-) diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js index 5838b1bdbb7bcd..a81389ab088549 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 34a9e34070c856..2615d626c4ce03 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 19fed7711978f1..7246ccbb2819ac 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 809e7848d13d2c..c6f4b664c881bc 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js @@ -1,7 +1,9 @@ const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger'; class FilteredSearchDropdown { - constructor(droplab, dropdown, input, filter) { + constructor(options = {}) { + const { droplab, dropdown, input, filter } = options; + 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 93616bd19cde01..5000352fdc543b 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js @@ -46,13 +46,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: { @@ -109,13 +115,18 @@ 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]()` - mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))(); + mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], [null, glArguments]))(); } if (firstLoad) { diff --git a/spec/javascripts/filtered_search/dropdown_user_spec.js b/spec/javascripts/filtered_search/dropdown_user_spec.js index 0132f4b7c93c3e..b3c9bca64cc897 100644 --- a/spec/javascripts/filtered_search/dropdown_user_spec.js +++ b/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'); -- GitLab From eacdf8fcb80901b85a1b42293e481a9c38788f28 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Thu, 13 Jul 2017 12:23:33 -0500 Subject: [PATCH 2/2] Fix eslint --- .../filtered_search/filtered_search_dropdown_manager.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 5000352fdc543b..40b3e1fb1d76ac 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js @@ -126,7 +126,8 @@ class FilteredSearchDropdownManager { const glArguments = Object.assign(defaultArguments, extraArguments); // Passing glArguments to `new gl[glClass]()` - mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], [null, glArguments]))(); + mappingKey.reference = + new (Function.prototype.bind.apply(gl[glClass], [null, glArguments]))(); } if (firstLoad) { -- GitLab