Merge branch 'issue-boards-search' into 'master'

Added search for all lists on issue boards

## What does this MR do?

Adds a search box to allow the user to search all lists in issue boards rather than just the backlog.

## Screenshots (if relevant)

![Screen_Shot_2016-08-30_at_10.33.15](/uploads/67e96055d60a9b3209ce3831a1980c09/Screen_Shot_2016-08-30_at_10.33.15.png)

![Screen_Shot_2016-08-30_at_10.33.19](/uploads/8d5253b8f2ecf1cf9a69d70be8ccf1f9/Screen_Shot_2016-08-30_at_10.33.19.png)

## What are the relevant issue numbers?

Closes #21139

See merge request !6101

5 files changed, 19 insertions, 55 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index a612cf0f1ae..91c12570e09 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -54,4 +54,11 @@ $(() => {
         });
     }
   });
+
+  gl.IssueBoardsSearch = new Vue({
+    el: '#js-boards-seach',
+    data: {
+      filters: Store.state.filters
+    }
+  });
 });
diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index d7f4107cb02..7e86f001f44 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/app/assets/javascripts/boards/components/board.js.es6
@@ -21,15 +21,10 @@
     },
     data () {
       return {
-        query: '',
         filters: Store.state.filters
       };
     },
     watch: {
-      query () {
-        this.list.filters = this.getFilterData();
-        this.list.getIssues(true);
-      },
       filters: {
         handler () {
           this.list.page = 1;
@@ -38,16 +33,6 @@
         deep: true
       }
     },
-    methods: {
-      getFilterData () {
-        const filters = this.filters;
-        let queryData = { search: this.query };
-
-        Object.keys(filters).forEach((key) => { queryData[key] = filters[key]; });
-
-        return queryData;
-      }
-    },
     ready () {
       const options = gl.issueBoards.getBoardSortableDefaultOptions({
         disabled: this.disabled,
diff --git a/app/assets/javascripts/boards/models/list.js.es6 b/app/assets/javascripts/boards/models/list.js.es6
index be2b8c568a8..816fa49516c 100644
--- a/app/assets/javascripts/boards/models/list.js.es6
+++ b/app/assets/javascripts/boards/models/list.js.es6
@@ -58,10 +58,6 @@ class List {
     }
   }
 
-  canSearch () {
-    return this.type === 'backlog';
-  }
-
   getIssues (emptyIssues = true) {
     const filters = this.filters;
     let data = { page: this.page };
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index 18f26a1f911..bd07ee0c161 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -15,7 +15,8 @@
         author_id: gl.utils.getParameterValues('author_id')[0],
         assignee_id: gl.utils.getParameterValues('assignee_id')[0],
         milestone_title: gl.utils.getParameterValues('milestone_title')[0],
-        label_name: gl.utils.getParameterValues('label_name[]')
+        label_name: gl.utils.getParameterValues('label_name[]'),
+        search: ''
       };
     },
     addList (listObj) {
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 9ac4d801ac4..d91558bc672 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -10,7 +10,7 @@
 .is-dragging {
   // Important because plugin sets inline CSS
   opacity: 1!important;
-  
+
   * {
     // !important to make sure no style can override this when dragging
     cursor: -webkit-grabbing!important;
@@ -160,40 +160,6 @@
   border-bottom: 1px solid $border-color;
 }
 
-.board-search-container {
-  position: relative;
-  background-color: #fff;
-
-  .form-control {
-    padding-right: 30px;
-  }
-}
-
-.board-search-icon,
-.board-search-clear-btn {
-  position: absolute;
-  right: $gl-padding + 10px;
-  top: 50%;
-  margin-top: -7px;
-  font-size: 14px;
-}
-
-.board-search-icon {
-  color: $gl-placeholder-color;
-}
-
-.board-search-clear-btn {
-  padding: 0;
-  line-height: 1;
-  background: transparent;
-  border: 0;
-  outline: 0;
-
-  &:hover {
-    color: $gl-link-color;
-  }
-}
-
 .board-delete {
   margin-right: 10px;
   padding: 0;
@@ -304,3 +270,12 @@
   margin-right: 8px;
   font-weight: 500;
 }
+
+.issue-boards-search {
+  width: 335px;
+
+  .form-control {
+    display: inline-block;
+    width: 210px;
+  }
+}