Merge branch 'feature/runner-tag-filter-for-admin-view' into 'master'

Feature: Runner tag filter for admin view

See merge request gitlab-org/gitlab-ce!19740

4 files changed, 110 insertions, 63 deletions

diff --git a/app/assets/javascripts/filtered_search/admin_runners_filtered_search_token_keys.js b/app/assets/javascripts/filtered_search/admin_runners_filtered_search_token_keys.js
index 934375023ba..691d165c585 100644
--- a/app/assets/javascripts/filtered_search/admin_runners_filtered_search_token_keys.js
+++ b/app/assets/javascripts/filtered_search/admin_runners_filtered_search_token_keys.js
@@ -17,6 +17,14 @@ const tokenKeys = [
     icon: 'cube',
     tag: 'type',
   },
+  {
+    key: 'tag',
+    type: 'array',
+    param: 'name[]',
+    symbol: '~',
+    icon: 'tag',
+    tag: '~tag',
+  },
 ];
 
 const AdminRunnersFilteredSearchTokenKeys = new FilteredSearchTokenKeys(tokenKeys);
diff --git a/app/assets/javascripts/filtered_search/dropdown_ajax_filter.js b/app/assets/javascripts/filtered_search/dropdown_ajax_filter.js
new file mode 100644
index 00000000000..b27bb63c220
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/dropdown_ajax_filter.js
@@ -0,0 +1,68 @@
+import createFlash from '../flash';
+import AjaxFilter from '../droplab/plugins/ajax_filter';
+import FilteredSearchDropdown from './filtered_search_dropdown';
+import DropdownUtils from './dropdown_utils';
+import FilteredSearchTokenizer from './filtered_search_tokenizer';
+import { __ } from '~/locale';
+
+export default class DropdownAjaxFilter extends FilteredSearchDropdown {
+  constructor(options = {}) {
+    const { tokenKeys, endpoint, symbol } = options;
+
+    super(options);
+
+    this.tokenKeys = tokenKeys;
+    this.endpoint = endpoint;
+    this.symbol = symbol;
+
+    this.config = {
+      AjaxFilter: this.ajaxFilterConfig(),
+    };
+  }
+
+  ajaxFilterConfig() {
+    return {
+      endpoint: `${gon.relative_url_root || ''}${this.endpoint}`,
+      searchKey: 'search',
+      searchValueFunction: this.getSearchInput.bind(this),
+      loadingTemplate: this.loadingTemplate,
+      onError() {
+        createFlash(__('An error occurred fetching the dropdown data.'));
+      },
+    };
+  }
+
+  itemClicked(e) {
+    super.itemClicked(e, selected =>
+      selected.querySelector('.dropdown-light-content').innerText.trim(),
+    );
+  }
+
+  renderContent(forceShowList = false) {
+    this.droplab.changeHookList(this.hookId, this.dropdown, [AjaxFilter], this.config);
+    super.renderContent(forceShowList);
+  }
+
+  getSearchInput() {
+    const query = DropdownUtils.getSearchInput(this.input);
+    const { lastToken } = FilteredSearchTokenizer.processTokens(query, this.tokenKeys.get());
+
+    let value = lastToken || '';
+
+    if (value[0] === this.symbol) {
+      value = value.slice(1);
+    }
+
+    // Removes the first character if it is a quotation so that we can search
+    // with multiple words
+    if (value[0] === '"' || value[0] === "'") {
+      value = value.slice(1);
+    }
+
+    return value;
+  }
+
+  init() {
+    this.droplab.addHook(this.input, this.dropdown, [AjaxFilter], this.config).init();
+  }
+}
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js
index d5027590bb7..f1e7be6bde1 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js
@@ -1,54 +1,34 @@
-import Flash from '../flash';
-import AjaxFilter from '../droplab/plugins/ajax_filter';
-import FilteredSearchDropdown from './filtered_search_dropdown';
 import { addClassIfElementExists } from '../lib/utils/dom_utils';
-import DropdownUtils from './dropdown_utils';
-import FilteredSearchTokenizer from './filtered_search_tokenizer';
+import DropdownAjaxFilter from './dropdown_ajax_filter';
 
-export default class DropdownUser extends FilteredSearchDropdown {
+export default class DropdownUser extends DropdownAjaxFilter {
   constructor(options = {}) {
-    const { tokenKeys } = options;
-    super(options);
-    this.config = {
-      AjaxFilter: {
-        endpoint: `${gon.relative_url_root || ''}/autocomplete/users.json`,
-        searchKey: 'search',
-        params: {
-          active: true,
-          group_id: this.getGroupId(),
-          project_id: this.getProjectId(),
-          current_user: true,
-        },
-        searchValueFunction: this.getSearchInput.bind(this),
-        loadingTemplate: this.loadingTemplate,
-        onLoadingFinished: () => {
-          this.hideCurrentUser();
-        },
-        onError() {
-          /* eslint-disable no-new */
-          new Flash('An error occurred fetching the dropdown data.');
-          /* eslint-enable no-new */
-        },
+    super({
+      ...options,
+      endpoint: '/autocomplete/users.json',
+      symbol: '@',
+    });
+  }
+
+  ajaxFilterConfig() {
+    return {
+      ...super.ajaxFilterConfig(),
+      params: {
+        active: true,
+        group_id: this.getGroupId(),
+        project_id: this.getProjectId(),
+        current_user: true,
+      },
+      onLoadingFinished: () => {
+        this.hideCurrentUser();
       },
     };
-    this.tokenKeys = tokenKeys;
   }
 
   hideCurrentUser() {
     addClassIfElementExists(this.dropdown.querySelector('.js-current-user'), 'hidden');
   }
 
-  itemClicked(e) {
-    super.itemClicked(e, selected =>
-      selected.querySelector('.dropdown-light-content').innerText.trim(),
-    );
-  }
-
-  renderContent(forceShowList = false) {
-    this.droplab.changeHookList(this.hookId, this.dropdown, [AjaxFilter], this.config);
-    super.renderContent(forceShowList);
-  }
-
   getGroupId() {
     return this.input.getAttribute('data-group-id');
   }
@@ -56,27 +36,4 @@ export default class DropdownUser extends FilteredSearchDropdown {
   getProjectId() {
     return this.input.getAttribute('data-project-id');
   }
-
-  getSearchInput() {
-    const query = DropdownUtils.getSearchInput(this.input);
-    const { lastToken } = FilteredSearchTokenizer.processTokens(query, this.tokenKeys.get());
-
-    let value = lastToken || '';
-
-    if (value[0] === '@') {
-      value = value.slice(1);
-    }
-
-    // Removes the first character if it is a quotation so that we can search
-    // with multiple words
-    if (value[0] === '"' || value[0] === "'") {
-      value = value.slice(1);
-    }
-
-    return value;
-  }
-
-  init() {
-    this.droplab.addHook(this.input, this.dropdown, [AjaxFilter], this.config).init();
-  }
 }
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 4d05f46ed17..57847d4ad9f 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
@@ -7,6 +7,7 @@ import DropdownHint from './dropdown_hint';
 import DropdownEmoji from './dropdown_emoji';
 import DropdownNonUser from './dropdown_non_user';
 import DropdownUser from './dropdown_user';
+import DropdownAjaxFilter from './dropdown_ajax_filter';
 import NullDropdown from './null_dropdown';
 import FilteredSearchVisualTokens from './filtered_search_visual_tokens';
 
@@ -111,6 +112,15 @@ export default class FilteredSearchDropdownManager {
         gl: NullDropdown,
         element: this.container.querySelector('#js-dropdown-admin-runner-type'),
       },
+      tag: {
+        reference: null,
+        gl: DropdownAjaxFilter,
+        extraArguments: {
+          endpoint: this.getRunnerTagsEndpoint(),
+          symbol: '~',
+        },
+        element: this.container.querySelector('#js-dropdown-runner-tag'),
+      },
     };
 
     supportedTokens.forEach(type => {
@@ -146,6 +156,10 @@ export default class FilteredSearchDropdownManager {
     return endpoint;
   }
 
+  getRunnerTagsEndpoint() {
+    return `${this.baseEndpoint}/admin/runners/tag_list.json`;
+  }
+
   static addWordToInput(tokenName, tokenValue = '', clicked = false, options = {}) {
     const { uppercaseTokenName = false, capitalizeTokenValue = false } = options;
     const input = FilteredSearchContainer.container.querySelector('.filtered-search');