use filtered search bar for admin runners

8 files changed, 87 insertions, 27 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
new file mode 100644
index 00000000000..1f9c3f41e52
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/admin_runners_filtered_search_token_keys.js
@@ -0,0 +1,14 @@
+import FilteredSearchTokenKeys from './filtered_search_token_keys';
+
+const tokenKeys = [{
+  key: 'status',
+  type: 'string',
+  param: 'status',
+  symbol: '',
+  icon: 'signal',
+  tag: 'status',
+}];
+
+const AdminRunnersFilteredSearchTokenKeys = new FilteredSearchTokenKeys(tokenKeys);
+
+export default AdminRunnersFilteredSearchTokenKeys;
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 296571606d6..a750647f8be 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 NullDropdown from './null_dropdown';
 import FilteredSearchVisualTokens from './filtered_search_visual_tokens';
 
 export default class FilteredSearchDropdownManager {
@@ -90,6 +91,11 @@ export default class FilteredSearchDropdownManager {
         gl: DropdownEmoji,
         element: this.container.querySelector('#js-dropdown-my-reaction'),
       },
+      status: {
+        reference: null,
+        gl: NullDropdown,
+        element: this.container.querySelector('#js-dropdown-admin-runner-status'),
+      },
     };
 
     supportedTokens.forEach((type) => {
diff --git a/app/assets/javascripts/filtered_search/null_dropdown.js b/app/assets/javascripts/filtered_search/null_dropdown.js
new file mode 100644
index 00000000000..4cfce2a5beb
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/null_dropdown.js
@@ -0,0 +1,9 @@
+import FilteredSearchDropdown from './filtered_search_dropdown';
+
+export default class NullDropdown extends FilteredSearchDropdown {
+  renderContent(forceShowList = false) {
+    this.droplab.changeHookList(this.hookId, this.dropdown, [], this.config);
+
+    super.renderContent(forceShowList);
+  }
+}
diff --git a/app/assets/javascripts/pages/admin/runners/index.js b/app/assets/javascripts/pages/admin/runners/index.js
new file mode 100644
index 00000000000..ce8fd18b6a2
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/runners/index.js
@@ -0,0 +1,10 @@
+import initFilteredSearch from '~/pages/search/init_filtered_search';
+import AdminRunnersFilteredSearchTokenKeys from '~/filtered_search/admin_runners_filtered_search_token_keys';
+import { FILTERED_SEARCH } from '~/pages/constants';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initFilteredSearch({
+    page: FILTERED_SEARCH.ADMIN_RUNNERS,
+    filteredSearchTokenKeys: AdminRunnersFilteredSearchTokenKeys,
+  });
+});
diff --git a/app/assets/javascripts/pages/constants.js b/app/assets/javascripts/pages/constants.js
index 328b6541636..5e119454ce1 100644
--- a/app/assets/javascripts/pages/constants.js
+++ b/app/assets/javascripts/pages/constants.js
@@ -3,4 +3,5 @@
 export const FILTERED_SEARCH = {
   MERGE_REQUESTS: 'merge_requests',
   ISSUES: 'issues',
+  ADMIN_RUNNERS: 'admin/runners',
 };
diff --git a/app/finders/admin/runners_finder.rb b/app/finders/admin/runners_finder.rb
index 22dd6e0ce6e..19e1dc5e477 100644
--- a/app/finders/admin/runners_finder.rb
+++ b/app/finders/admin/runners_finder.rb
@@ -26,8 +26,9 @@ class Admin::RunnersFinder < UnionFinder
   end
 
   def filter_by_status!
-    if @params[:status].present? && Ci::Runner::AVAILABLE_STATUSES.include?(@params[:status])
-      @runners = @runners.public_send(@params[:status]) # rubocop:disable GitlabSecurity/PublicSend
+    status = @params[:status_status]
+    if status.present? && Ci::Runner::AVAILABLE_STATUSES.include?(status)
+      @runners = @runners.public_send(status) # rubocop:disable GitlabSecurity/PublicSend
     end
   end
 
diff --git a/app/views/admin/runners/_statuses.html.haml b/app/views/admin/runners/_statuses.html.haml
deleted file mode 100644
index 4e91b6be6c4..00000000000
--- a/app/views/admin/runners/_statuses.html.haml
+++ /dev/null
@@ -1,13 +0,0 @@
-- active_status = params[:status].presence
-
-- toggle_text = 'Status'
-- if active_status
-  = hidden_field_tag :status, params[:status]
-  - toggle_text = params[:status].titleize
-
-= dropdown_tag(toggle_text, options: { wrapper_class: 'dropdown-menu-selectable', title: 'Statuses' }) do
-  %ul
-    %li= link_to 'Any Status', admin_runners_path(safe_params.slice(:search)), class: ('is-active' unless active_status)
-    %li.divider
-    - Ci::Runner::AVAILABLE_STATUSES.each do |status|
-      %li= link_to status.titleize, admin_runners_path(safe_params.slice(:search).merge(status: status)), class: ('is-active' if active_status == status)
diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml
index 81dfc23641b..0b4253286de 100644
--- a/app/views/admin/runners/index.html.haml
+++ b/app/views/admin/runners/index.html.haml
@@ -41,18 +41,50 @@
   = render partial: 'ci/runner/how_to_setup_shared_runner',
            locals: { registration_token: Gitlab::CurrentSettings.runners_registration_token }
 
-  .append-bottom-20.clearfix
-    = form_tag admin_runners_path, id: 'runners-search', method: :get do
-      .float-left
-        .form-inline
-          .form-group
-            = search_field_tag :search, params[:search], class: 'form-control input-short', placeholder: 'Runner description or token', spellcheck: false
-          = submit_tag 'Search', class: 'btn'
-
-      .float-left.prepend-left-10
-        = render 'statuses'
-
-      .float-right.light
+  .row-content-block.second-block
+    = form_tag admin_runners_path, id: 'runners-search', method: :get, class: 'filter-form js-filter-form' do
+      .filtered-search-wrapper
+        .filtered-search-box
+          = dropdown_tag(custom_icon('icon_history'),
+            options: { wrapper_class: "filtered-search-history-dropdown-wrapper",
+            toggle_class: "filtered-search-history-dropdown-toggle-button",
+            dropdown_class: "filtered-search-history-dropdown",
+            content_class: "filtered-search-history-dropdown-content",
+            title: "Recent searches" }) do
+            .js-filtered-search-history-dropdown{ data: { full_path: admin_runners_path } }
+          .filtered-search-box-input-container.droplab-dropdown
+            .scroll-container
+              %ul.tokens-container.list-unstyled
+                %li.input-token
+                  %input.form-control.filtered-search{ { id: 'filtered-search-runners', placeholder: 'Search or filter results...' } }
+            #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
+              %ul{ data: { dropdown: true } }
+                %li.filter-dropdown-item{ data: { action: 'submit' } }
+                  = button_tag class: %w[btn btn-link] do
+                    = icon('search')
+                    %span
+                      Press Enter or click to search
+              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+                %li.filter-dropdown-item
+                  = button_tag class: %w[btn btn-link] do
+                    -# Encapsulate static class name `{{icon}}` inside #{} to bypass
+                    -# haml lint's ClassAttributeWithStaticValue
+                    %i.fa{ class: "#{'{{icon}}'}" }
+                    %span.js-filter-hint
+                      {{hint}}
+                    %span.js-filter-tag.dropdown-light-content
+                      {{tag}}
+            #js-dropdown-admin-runner-status.filtered-search-input-dropdown-menu.dropdown-menu
+              %ul{ data: { dropdown: true } }
+                - Ci::Runner::AVAILABLE_STATUSES.each do |status|
+                  %li.filter-dropdown-item{ data: { value: status } }
+                    = button_tag class: %w[btn btn-link] do
+                      = status.titleize
+          = button_tag class: %w[clear-search hidden] do
+            = icon('times')
+  .clearfix
+    .float-right.light
+      .prepend-top-10
         Runners currently online: #{@active_runners_cnt}
 
   %br