Hardcoded author, assignee & milestone dropdowns

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

 /* global Vue */
+/* global UsersSelect */
+/* global MilestoneSelect */
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
   gl.issueBoards.ModalFilters = Vue.extend({
+    computed: {
+      currentUsername() {
+        return gon.current_username;
+      },
+    },
+    mounted() {
+      new UsersSelect();
+      new MilestoneSelect();
+    },
     template: `
       <div class="modal-filters">
         <div class="dropdown">
           <button
             class="dropdown-menu-toggle js-user-search js-author-search"
             type="button"
-            data-toggle="dropdown">
+            data-toggle="dropdown"
+            data-any-user="Any Author"
+            data-current-user="true"
+            data-field-name="author_id"
+            :data-project-id="12"
+            :data-first-user="currentUsername">
             Author
             <i class="fa fa-chevron-down"></i>
           </button>
+          <div class="dropdown-menu dropdown-select dropdown-menu-user dropdown-menu-selectable dropdown-menu-author">
+            <div class="dropdown-title">
+              <span>Filter by author</span>
+              <button
+                class="dropdown-title-button dropdown-menu-close"
+                aria-label="Close"
+                type="button">
+                <i class="fa fa-times dropdown-menu-close-icon"></i>
+              </button>
+            </div>
+            <div class="dropdown-input">
+              <input
+                type="search"
+                class="dropdown-input-field"
+                placeholder="Search authors"
+                autocomplete="off" />
+              <i class="fa fa-search dropdown-input-search"></i>
+              <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
+            </div>
+            <div class="dropdown-content"></div>
+            <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
+          </div>
         </div>
         <div class="dropdown">
           <button
             class="dropdown-menu-toggle js-user-search js-assignee-search"
             type="button"
-            data-toggle="dropdown">
+            data-toggle="dropdown"
+            data-any-user="Any Assignee"
+            data-null-user="true"
+            data-current-user="true"
+            data-field-name="assignee_id"
+            :data-project-id="12"
+            :data-first-user="currentUsername">
             Assignee
             <i class="fa fa-chevron-down"></i>
           </button>
+          <div class="dropdown-menu dropdown-select dropdown-menu-user dropdown-menu-selectable dropdown-menu-author">
+            <div class="dropdown-title">
+              <span>Filter by assignee</span>
+              <button
+                class="dropdown-title-button dropdown-menu-close"
+                aria-label="Close"
+                type="button">
+                <i class="fa fa-times dropdown-menu-close-icon"></i>
+              </button>
+            </div>
+            <div class="dropdown-input">
+              <input
+                type="search"
+                class="dropdown-input-field"
+                placeholder="Search assignee"
+                autocomplete="off" />
+              <i class="fa fa-search dropdown-input-search"></i>
+              <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
+            </div>
+            <div class="dropdown-content"></div>
+            <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
+          </div>
         </div>
         <div class="dropdown">
           <button
             class="dropdown-menu-toggle js-milestone-select"
             type="button"
-            data-toggle="dropdown">
+            data-toggle="dropdown"
+            data-show-any="true"
+            data-show-upcoming="true"
+            data-field-name="milestone_title"
+            :data-project-id="12"
+            :data-milestones="'/root/test/milestones.json'">
             Milestone
             <i class="fa fa-chevron-down"></i>
           </button>
+          <div class="dropdown-menu dropdown-select dropdown-menu-selectable dropdown-menu-milestone">
+            <div class="dropdown-title">
+              <span>Filter by milestone</span>
+              <button
+                class="dropdown-title-button dropdown-menu-close"
+                aria-label="Close"
+                type="button">
+                <i class="fa fa-times dropdown-menu-close-icon"></i>
+              </button>
+            </div>
+            <div class="dropdown-input">
+              <input
+                type="search"
+                class="dropdown-input-field"
+                placeholder="Search milestones"
+                autocomplete="off" />
+              <i class="fa fa-search dropdown-input-search"></i>
+              <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
+            </div>
+            <div class="dropdown-content"></div>
+            <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
+          </div>
         </div>
         <div class="dropdown">
           <button

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

@@ -50,17 +50,26 @@
           this.issuesCount = false;
         }
       },
+      filter: {
+        handler() {
+          this.issues = [];
+          this.loadIssues();
+        },
+        deep: true,
+      }
     },
     methods: {
       searchOperation: _.debounce(function searchOperationDebounce() {
         this.loadIssues(true);
       }, 500),
       loadIssues(clearIssues = false) {
-        return gl.boardService.getBacklog({
+        const data = Object.assign({}, this.filter, {
           search: this.searchTerm,
           page: this.page,
           per: this.perPage,
-        }).then((res) => {
+        });
+
+        return gl.boardService.getBacklog(data).then((res) => {
           const data = res.json();
           if (clearIssues) {

app/assets/javascripts/boards/stores/modal_store.js.es6

@@ -17,6 +17,11 @@
         loadingNewPage: false,
         page: 1,
         perPage: 50,
+        filter: {
+          author_id: '',
+          assignee_id: '',
+          milestone_title: '',
+        },
       };
     }

app/assets/javascripts/milestone_select.js

@@ -116,7 +116,9 @@
               e.preventDefault();
               return;
             }
-            if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar')) {
+            if ($el.closest('.add-issues-modal').length) {
+              gl.issueBoards.ModalStore.store.filter[$dropdown.data('field-name')] = selected.name;
+            } else if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar')) {
               gl.issueBoards.BoardsStore.state.filters[$dropdown.data('field-name')] = selected.name;
               gl.issueBoards.BoardsStore.updateFiltersUrl();
               e.preventDefault();

app/assets/javascripts/users_select.js

@@ -193,7 +193,9 @@
                 selectedId = user.id;
                 return;
               }
-              if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar')) {
+              if ($el.closest('.add-issues-modal').length) {
+                gl.issueBoards.ModalStore.store.filter[$dropdown.data('field-name')] = user.id;
+              } else if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar')) {
                 selectedId = user.id;
                 gl.issueBoards.BoardsStore.state.filters[$dropdown.data('field-name')] = user.id;
                 gl.issueBoards.BoardsStore.updateFiltersUrl();

app/views/projects/boards/_show.html.haml

@@ -30,4 +30,5 @@
   %board-add-issues-modal{ "blank-state-image" => render('shared/empty_states/icons/issues.svg'),
     "new-issue-path" => new_namespace_project_issue_path(@project.namespace, @project),
     ":issue-link-base" => "issueLinkBase",
-    ":root-path" => "rootPath" }
+    ":root-path" => "rootPath",
+    ":project-id" => @project.try(:id) }