Filtered search support for Epics list page

app/assets/javascripts/dispatcher.js

@@ -178,6 +178,11 @@ var Dispatcher;
         case 'groups:epics:show':
           new ZenMode();
           break;
+        case 'groups:epics:index':
+          import(/* webpackChunkName: "ee_epics_show" */ 'ee/pages/epics')
+            .then(callDefault)
+            .catch(fail);
+          break;
         case 'projects:compare:show':
           import('./pages/projects/compare/show')
             .then(callDefault)

ee/app/assets/javascripts/pages/epics/index.js

+import FilteredSearchTokenKeysEpics from 'ee/filtered_search/filtered_search_token_keys_epics';
+
+export default () => {
+  const filteredSearchEnabled = gl.FilteredSearchManager && document.querySelector('.filtered-search');
+  if (filteredSearchEnabled) {
+    const filteredSearchManager = new gl.FilteredSearchManager({
+      page: 'epics',
+      filteredSearchTokenKeys: FilteredSearchTokenKeysEpics,
+      stateFiltersSelector: '.epics-state-filters',
+    });
+    filteredSearchManager.setup();
+  }
+};

ee/app/views/shared/epic/_search_bar.html.haml

+- type = local_assigns.fetch(:type)
+- full_path = @project.present? ? @project.full_path : @group.full_path
+
+.epics-filters
+  .epics-details-filters.filtered-search-block.row-content-block.second-block
+    = form_tag page_filter_path(without: [:author_id, :search]), method: :get, class: 'filter-form js-filter-form' do
+      - if params[:search].present?
+        = hidden_field_tag :search, params[:search]
+      .epics-other-filters.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: full_path } }
+          .filtered-search-box-input-container.droplab-dropdown
+            .scroll-container
+              %ul.tokens-container.list-unstyled
+                %li.input-token
+                  %input.form-control.filtered-search{ search_filter_input_options(type) }
+            #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
+              %ul{ data: { dropdown: true } }
+                %li.filter-dropdown-item{ data: { action: 'submit' } }
+                  %button.btn.btn-link{ type: 'button' }
+                    = icon('search')
+                    %span
+                      Press Enter or click to search
+              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+                %li.filter-dropdown-item
+                  %button.btn.btn-link{ type: 'button' }
+                    -# 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-author.filtered-search-input-dropdown-menu.dropdown-menu
+              - if current_user
+                %ul{ data: { dropdown: true } }
+                  = render 'shared/issuable/user_dropdown_item',
+                    user: current_user
+              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+                = render 'shared/issuable/user_dropdown_item',
+                  user: User.new(username: '{{username}}', name: '{{name}}'),
+                  avatar: { lazy: true, url: '{{avatar_url}}' }
+
+          %button.clear-search.hidden{ type: 'button' }
+            = icon('times')
+        .filter-dropdown-container
+          = render 'shared/epic/sort_dropdown'

ee/app/views/shared/epic/_sort_dropdown.html.haml

+- sorted_by = sort_options_hash[@sort]
+
+.dropdown.inline.prepend-left-10
+  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+    = sorted_by
+    = icon('chevron-down')
+  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable.dropdown-menu-sort
+    %li
+      = sortable_item(sort_title_created_date,     page_filter_path(sort: sort_value_created_date,     label: true), sorted_by)
+      = sortable_item(sort_title_recently_updated, page_filter_path(sort: sort_value_recently_updated, label: true), sorted_by)

ee/app/views/shared/issuable/_epic_nav.html.haml

 - type = local_assigns.fetch(:type, :epics)
 - page_context_word = type.to_s.humanize(capitalize: false)
 
-%ul.nav-links.issues-state-filters
+%ul.nav-links.epics-state-filters
   = render 'shared/issuable/nav_links/all', page_context_word: page_context_word, counter: issuables_state_counter_text(type, :all)