Started adding filters to issues modal

app/assets/javascripts/boards/components/modal/filters.js.es6

+/* global Vue */
+(() => {
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  gl.issueBoards.ModalFilters = Vue.extend({
+    template: `
+      <div class="modal-filters">
+        <div class="dropdown">
+          <button
+            class="dropdown-menu-toggle js-user-search js-author-search"
+            type="button"
+            data-toggle="dropdown">
+            Author
+            <i class="fa fa-chevron-down"></i>
+          </button>
+        </div>
+        <div class="dropdown">
+          <button
+            class="dropdown-menu-toggle js-user-search js-assignee-search"
+            type="button"
+            data-toggle="dropdown">
+            Assignee
+            <i class="fa fa-chevron-down"></i>
+          </button>
+        </div>
+        <div class="dropdown">
+          <button
+            class="dropdown-menu-toggle js-milestone-select"
+            type="button"
+            data-toggle="dropdown">
+            Milestone
+            <i class="fa fa-chevron-down"></i>
+          </button>
+        </div>
+        <div class="dropdown">
+          <button
+            class="dropdown-menu-toggle js-label-select js-multiselect"
+            type="button"
+            data-toggle="dropdown">
+            Label
+            <i class="fa fa-chevron-down"></i>
+          </button>
+        </div>
+      </div>
+    `,
+  });
+})();

app/assets/javascripts/boards/components/modal/header.js.es6

 /* global Vue */
 //= require ./tabs
+//= require ./filters
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
@@ -49,6 +50,7 @@
         <div
           class="add-issues-search append-bottom-10"
           v-if="showSearch">
+          <modal-filters></modal-filters>
           <input
             placeholder="Search issues..."
             class="form-control"

app/assets/stylesheets/pages/boards.scss

@@ -416,6 +416,11 @@
 .add-issues-search {
   display: -webkit-flex;
   display: flex;
+
+  .form-control {
+    max-width: 200px;
+    margin-left: auto;
+  }
 }
 .add-issues-list-column {
@@ -486,3 +491,15 @@
   line-height: 15px;
   border-radius: 50%;
 }
+
+.modal-filters {
+  display: flex;
+
+  > .dropdown {
+    margin-right: 10px;
+  }
+
+  .dropdown-menu-toggle {
+    width: 140px;
+  }
+}