Added filtered search bar to issue boards

Closes #28312

8 files changed, 37 insertions, 21 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js
index 55d13be6e5f..951cb854ce8 100644
--- a/app/assets/javascripts/boards/boards_bundle.js
+++ b/app/assets/javascripts/boards/boards_bundle.js
@@ -4,6 +4,7 @@
 
 window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
+import FilteredSearchBoards from './filtered_search_boards';
 require('./models/issue');
 require('./models/label');
 require('./models/list');
@@ -26,6 +27,8 @@ $(() => {
   const Store = gl.issueBoards.BoardsStore;
   const ModalStore = gl.issueBoards.ModalStore;
 
+  new FilteredSearchBoards();
+
   window.gl = window.gl || {};
 
   if (gl.IssueBoardsApp) {
diff --git a/app/assets/javascripts/boards/filtered_search_boards.js b/app/assets/javascripts/boards/filtered_search_boards.js
new file mode 100644
index 00000000000..6a00d84faf1
--- /dev/null
+++ b/app/assets/javascripts/boards/filtered_search_boards.js
@@ -0,0 +1,5 @@
+export default class FilteredSearchBoards extends gl.FilteredSearchManager {
+  constructor() {
+    super('boards');
+  }
+}
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index 3866c6bbfc6..c902a1d8bfc 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -19,8 +19,8 @@
     create () {
       this.state.lists = [];
       this.state.filters = {
-        author_id: gl.utils.getParameterValues('author_id')[0],
-        assignee_id: gl.utils.getParameterValues('assignee_id')[0],
+        author_username: gl.utils.getParameterValues('author_username')[0],
+        assignee_username: gl.utils.getParameterValues('assignee_username')[0],
         milestone_title: gl.utils.getParameterValues('milestone_title')[0],
         label_name: gl.utils.getParameterValues('label_name[]'),
         search: ''
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 8f2150066c7..bf0e8e2b891 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -219,6 +219,11 @@
   }
 }
 
+.filter-dropdown-container {
+  display: -webkit-flex;
+  display: flex;
+}
+
 .dropdown-menu .filter-dropdown-item {
   padding: 0;
 }
diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml
index 3ae78387938..a3593c9f5db 100644
--- a/app/views/projects/boards/_show.html.haml
+++ b/app/views/projects/boards/_show.html.haml
@@ -4,6 +4,7 @@
 
 - content_for :page_specific_javascripts do
   = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag('filtered_search')
   = page_specific_javascript_bundle_tag('boards')
   = page_specific_javascript_bundle_tag('simulate_drag') if Rails.env.test?
 
@@ -12,7 +13,7 @@
 
 = render "projects/issues/head"
 
-= render 'shared/issuable/filter', type: :boards
+= render 'shared/issuable/search_bar', type: :boards
 
 #board-app.boards-app{ "v-cloak" => true, data: board_data }
   .boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index f17ae9f28eb..f0bad69a989 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -1,4 +1,4 @@
-- finder = controller.controller_name == 'issues' || controller.controller_name == 'boards' ? issues_finder : merge_requests_finder
+- finder = controller.controller_name == 'issues' ? issues_finder : merge_requests_finder
 - boards_page = controller.controller_name == 'boards'
 
 .issues-filters
@@ -34,21 +34,7 @@
             %a{ href: page_filter_path(without: issuable_filter_params) } Reset filters
 
         .pull-right
-          - if boards_page
-            #js-boards-search.issue-boards-search
-              %input.pull-left.form-control{ type: "search", placeholder: "Filter by name...", "v-model" => "filters.search", "debounce" => "250" }
-              - if can?(current_user, :admin_list, @project)
-                #js-add-issues-btn.pull-right.prepend-left-10
-                .dropdown.pull-right
-                  %button.btn.btn-create.btn-inverted.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) } }
-                    Add list
-                  .dropdown-menu.dropdown-menu-paging.dropdown-menu-align-right.dropdown-menu-issues-board-new.dropdown-menu-selectable
-                    = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }
-                    - if can?(current_user, :admin_label, @project)
-                      = render partial: "shared/issuable/label_page_create"
-                    = dropdown_loading
-          - else
-            = render 'shared/sort_dropdown'
+          = render 'shared/sort_dropdown'
 
     - if @bulk_edit
       .issues_bulk_update.hide
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index 32128f3b3dc..515c3d4258e 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -85,8 +85,20 @@
                   %span.dropdown-label-box{ style: 'background: {{color}}' }
                   %span.label-title.js-data-value
                     {{title}}
-        .pull-right.filter-dropdown-container
-          = render 'shared/sort_dropdown'
+        .filter-dropdown-container
+          - if type == :boards
+            - if can?(current_user, :admin_list, @project)
+              .dropdown.prepend-left-10
+                %button.btn.btn-create.btn-inverted.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) } }
+                  Add list
+                .dropdown-menu.dropdown-menu-paging.dropdown-menu-align-right.dropdown-menu-issues-board-new.dropdown-menu-selectable
+                  = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }
+                  - if can?(current_user, :admin_label, @project)
+                    = render partial: "shared/issuable/label_page_create"
+                  = dropdown_loading
+              #js-add-issues-btn.prepend-left-10
+          - else
+            = render 'shared/sort_dropdown'
 
     - if @bulk_edit
       .issues_bulk_update.hide
diff --git a/changelogs/unreleased/issue-boards-new-search-bar.yml b/changelogs/unreleased/issue-boards-new-search-bar.yml
new file mode 100644
index 00000000000..b02be70c470
--- /dev/null
+++ b/changelogs/unreleased/issue-boards-new-search-bar.yml
@@ -0,0 +1,4 @@
+---
+title: Added new filtered search bar to issue boards
+merge_request:
+author: