diff options
author | Phil Hughes <me@iamphill.com> | 2017-05-24 12:00:26 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-05-24 12:00:26 +0300 |
commit | 6cbc69aa7eb9fc054b62ad6e20bda10f12228c18 (patch) | |
tree | c7d1f58ead48e8fbb245d52d7a18c99fec97fec1 /app/assets | |
parent | a5f435098ee5db95ab5f9251ef5739193f6c2694 (diff) | |
parent | 681f3296448c12a3dc53392647b794b51f1ec817 (diff) |
Merge branch '32563-remove-duplicated-config-code-for-filtered-search-dropdowns' into 'master'
Resolve "Remove duplicated config code for filtered search dropdowns"
Closes #32563
See merge request !11512
Diffstat (limited to 'app/assets')
11 files changed, 48 insertions, 32 deletions
diff --git a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js index 15052dbd362..c51d4b056af 100644 --- a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js +++ b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js @@ -13,13 +13,17 @@ export default { required: false, default: true, }, + allowedKeys: { + type: Array, + required: true, + }, }, computed: { processedItems() { return this.items.map((item) => { const { tokens, searchToken } - = gl.FilteredSearchTokenizer.processTokens(item); + = gl.FilteredSearchTokenizer.processTokens(item, this.allowedKeys); const resultantTokens = tokens.map(token => ({ prefix: `${token.key}:`, diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js index 5d92d29c399..2af242a69df 100644 --- a/app/assets/javascripts/filtered_search/dropdown_hint.js +++ b/app/assets/javascripts/filtered_search/dropdown_hint.js @@ -2,14 +2,18 @@ import Filter from '~/droplab/plugins/filter'; import './filtered_search_dropdown'; class DropdownHint extends gl.FilteredSearchDropdown { - constructor(droplab, dropdown, input, filter) { + constructor(droplab, dropdown, input, tokenKeys, filter) { super(droplab, dropdown, input, filter); this.config = { Filter: { template: 'hint', - filterFunction: gl.DropdownUtils.filterHint.bind(null, input), + filterFunction: gl.DropdownUtils.filterHint.bind(null, { + input, + allowedKeys: tokenKeys.getKeys(), + }), }, }; + this.tokenKeys = tokenKeys; } itemClicked(e) { @@ -52,20 +56,13 @@ class DropdownHint extends gl.FilteredSearchDropdown { } renderContent() { - const dropdownData = []; - - [].forEach.call(this.input.closest('.filtered-search-box-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => { - const { icon, hint, tag, type } = dropdownMenu.dataset; - if (icon && hint && tag) { - dropdownData.push( - Object.assign({ - icon: `fa-${icon}`, - hint, - tag: `<${tag}>`, - }, type && { type }), - ); - } - }); + const dropdownData = gl.FilteredSearchTokenKeys.get() + .map(tokenKey => ({ + icon: `fa-${tokenKey.icon}`, + hint: tokenKey.key, + tag: `<${tokenKey.symbol}${tokenKey.key}>`, + type: tokenKey.type, + })); this.droplab.changeHookList(this.hookId, this.dropdown, [Filter], this.config); this.droplab.setData(this.hookId, dropdownData); diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js b/app/assets/javascripts/filtered_search/dropdown_non_user.js index f20193eecba..34a9e34070c 100644 --- a/app/assets/javascripts/filtered_search/dropdown_non_user.js +++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js @@ -5,7 +5,7 @@ import Filter from '~/droplab/plugins/filter'; import './filtered_search_dropdown'; class DropdownNonUser extends gl.FilteredSearchDropdown { - constructor(droplab, dropdown, input, filter, endpoint, symbol) { + constructor(droplab, dropdown, input, tokenKeys, filter, endpoint, symbol) { super(droplab, dropdown, input, filter); this.symbol = symbol; this.config = { diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js index 42538780e50..6b4338ca1d6 100644 --- a/app/assets/javascripts/filtered_search/dropdown_user.js +++ b/app/assets/javascripts/filtered_search/dropdown_user.js @@ -4,7 +4,7 @@ import AjaxFilter from '~/droplab/plugins/ajax_filter'; import './filtered_search_dropdown'; class DropdownUser extends gl.FilteredSearchDropdown { - constructor(droplab, dropdown, input, filter) { + constructor(droplab, dropdown, input, tokenKeys, filter) { super(droplab, dropdown, input, filter); this.config = { AjaxFilter: { @@ -25,6 +25,7 @@ class DropdownUser extends gl.FilteredSearchDropdown { }, }, }; + this.tokenKeys = tokenKeys; } itemClicked(e) { @@ -43,7 +44,7 @@ class DropdownUser extends gl.FilteredSearchDropdown { getSearchInput() { const query = gl.DropdownUtils.getSearchInput(this.input); - const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query); + const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query, this.tokenKeys.get()); let value = lastToken || ''; diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js index bc7c1dffece..5c02a7a53d3 100644 --- a/app/assets/javascripts/filtered_search/dropdown_utils.js +++ b/app/assets/javascripts/filtered_search/dropdown_utils.js @@ -50,10 +50,12 @@ class DropdownUtils { return updatedItem; } - static filterHint(input, item) { + static filterHint(config, item) { + const { input, allowedKeys } = config; const updatedItem = item; const searchInput = gl.DropdownUtils.getSearchQuery(input); - const { lastToken, tokens } = gl.FilteredSearchTokenizer.processTokens(searchInput); + const { lastToken, tokens } = + gl.FilteredSearchTokenizer.processTokens(searchInput, allowedKeys); const lastKey = lastToken.key || lastToken || ''; const allowMultiple = item.type === 'array'; const itemInExistingTokens = tokens.some(t => t.key === item.hint); 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 49a6cd1ac77..6bc6bc43f51 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js @@ -2,10 +2,10 @@ import DropLab from '~/droplab/drop_lab'; import FilteredSearchContainer from './container'; class FilteredSearchDropdownManager { - constructor(baseEndpoint = '', page) { + constructor(baseEndpoint = '', tokenizer, page) { this.container = FilteredSearchContainer.container; this.baseEndpoint = baseEndpoint.replace(/\/$/, ''); - this.tokenizer = gl.FilteredSearchTokenizer; + this.tokenizer = tokenizer; this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys; this.filteredSearchInput = this.container.querySelector('.filtered-search'); this.page = page; @@ -98,7 +98,8 @@ class FilteredSearchDropdownManager { if (!mappingKey.reference) { const dl = this.droplab; - const defaultArguments = [null, dl, element, this.filteredSearchInput, key]; + const defaultArguments = + [null, dl, element, this.filteredSearchInput, this.filteredSearchTokenKeys, key]; const glArguments = defaultArguments.concat(mappingKey.extraArguments || []); // Passing glArguments to `new gl[glClass](<arguments>)` @@ -141,7 +142,8 @@ class FilteredSearchDropdownManager { setDropdown() { const query = gl.DropdownUtils.getSearchQuery(true); - const { lastToken, searchToken } = this.tokenizer.processTokens(query); + const { lastToken, searchToken } = + this.tokenizer.processTokens(query, this.filteredSearchTokenKeys.getKeys()); if (this.currentDropdown) { this.updateCurrentDropdownOffset(); diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js index 57d247e11a9..58f2b75bd50 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js @@ -15,6 +15,7 @@ class FilteredSearchManager { this.recentSearchesStore = new RecentSearchesStore({ isLocalStorageAvailable: RecentSearchesService.isAvailable(), + allowedKeys: this.filteredSearchTokenKeys.getKeys(), }); const searchHistoryDropdownElement = document.querySelector('.js-filtered-search-history-dropdown'); const projectPath = searchHistoryDropdownElement ? @@ -46,7 +47,7 @@ class FilteredSearchManager { if (this.filteredSearchInput) { this.tokenizer = gl.FilteredSearchTokenizer; - this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page); + this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', this.tokenizer, page); this.recentSearchesRoot = new RecentSearchesRoot( this.recentSearchesStore, @@ -318,7 +319,7 @@ class FilteredSearchManager { handleInputVisualToken() { const input = this.filteredSearchInput; const { tokens, searchToken } - = gl.FilteredSearchTokenizer.processTokens(input.value); + = this.tokenizer.processTokens(input.value, this.filteredSearchTokenKeys.getKeys()); const { isLastVisualTokenValid } = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput(); @@ -444,7 +445,7 @@ class FilteredSearchManager { this.saveCurrentSearchQuery(); const { tokens, searchToken } - = this.tokenizer.processTokens(searchQuery); + = this.tokenizer.processTokens(searchQuery, this.filteredSearchTokenKeys.getKeys()); const currentState = gl.utils.getParameterByName('state') || 'opened'; paths.push(`state=${currentState}`); diff --git a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js index 1abad9d1b73..025d4d8795b 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js +++ b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js @@ -3,21 +3,25 @@ const tokenKeys = [{ type: 'string', param: 'username', symbol: '@', + icon: 'pencil', }, { key: 'assignee', type: 'string', param: 'username', symbol: '@', + icon: 'user', }, { key: 'milestone', type: 'string', param: 'title', symbol: '%', + icon: 'clock-o', }, { key: 'label', type: 'array', param: 'name[]', symbol: '~', + icon: 'tag', }]; const alternativeTokenKeys = [{ @@ -56,6 +60,10 @@ class FilteredSearchTokenKeys { return tokenKeys; } + static getKeys() { + return tokenKeys.map(i => i.key); + } + static getAlternatives() { return alternativeTokenKeys; } diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js index aa513b3aeae..f2e66503e5e 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js +++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js @@ -1,8 +1,7 @@ import './filtered_search_token_keys'; class FilteredSearchTokenizer { - static processTokens(input) { - const allowedKeys = gl.FilteredSearchTokenKeys.get().map(i => i.key); + static processTokens(input, allowedKeys) { // Regex extracts `(token):(symbol)(value)` // Values that start with a double quote must end in a double quote (same for single) const tokenRegex = new RegExp(`(${allowedKeys.join('|')}):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\\S+))`, 'g'); diff --git a/app/assets/javascripts/filtered_search/recent_searches_root.js b/app/assets/javascripts/filtered_search/recent_searches_root.js index b2e6f63aacf..27e49d4fb96 100644 --- a/app/assets/javascripts/filtered_search/recent_searches_root.js +++ b/app/assets/javascripts/filtered_search/recent_searches_root.js @@ -37,6 +37,7 @@ class RecentSearchesRoot { <recent-searches-dropdown-content :items="recentSearches" :is-local-storage-available="isLocalStorageAvailable" + :allowed-keys="allowedKeys" /> `, components: { diff --git a/app/assets/javascripts/filtered_search/stores/recent_searches_store.js b/app/assets/javascripts/filtered_search/stores/recent_searches_store.js index 35fc15e4c87..aaa0c349d93 100644 --- a/app/assets/javascripts/filtered_search/stores/recent_searches_store.js +++ b/app/assets/javascripts/filtered_search/stores/recent_searches_store.js @@ -1,10 +1,11 @@ import _ from 'underscore'; class RecentSearchesStore { - constructor(initialState = {}) { + constructor(initialState = {}, allowedKeys) { this.state = Object.assign({ isLocalStorageAvailable: true, recentSearches: [], + allowedKeys, }, initialState); } |