3 files changed, 66 insertions, 0 deletions
diff --git a/app/assets/javascripts/boards/components/modal/filters.js.es6 b/app/assets/javascripts/boards/components/modal/filters.js.es6
new file mode 100644
index 00000000000..f36d3c9ffe6
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/filters.js.es6
@@ -0,0 +1,47 @@
+/* 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>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index dbbcd73f1fe..87c407f5fec 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -1,5 +1,6 @@
 /* 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"
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 9b413f3e61c..415eccf1764 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/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;
+  }
+}