Add label and milestone dropdowns

app/assets/javascripts/filtered_search/dropdown_label.js.es6

@@ -0,0 +1,22 @@
+/* eslint-disable no-param-reassign */
+/*= require filtered_search/filtered_search_dropdown */
+
+((global) => {
+  class DropdownLabel extends gl.FilteredSearchDropdown {
+    constructor(dropdown, input) {
+      super(dropdown, input);
+      this.listId = 'js-dropdown-label';
+    }
+
+    itemClicked(e) {
+      console.log('label clicked');
+    }
+
+    renderContent() {
+      super.renderContent();
+      droplab.setData(this.hookId, 'labels.json');
+    }
+  }
+
+  global.DropdownLabel = DropdownLabel;
+})(window.gl || (window.gl = {}));

app/assets/javascripts/filtered_search/dropdown_milestone.js.es6

@@ -0,0 +1,22 @@
+/* eslint-disable no-param-reassign */
+/*= require filtered_search/filtered_search_dropdown */
+
+((global) => {
+  class DropdownMilestone extends gl.FilteredSearchDropdown {
+    constructor(dropdown, input) {
+      super(dropdown, input);
+      this.listId = 'js-dropdown-milestone';
+    }
+
+    itemClicked(e) {
+      console.log('milestone clicked');
+    }
+
+    renderContent() {
+      super.renderContent();
+      droplab.setData(this.hookId, 'milestones.json');
+    }
+  }
+
+  global.DropdownMilestone = DropdownMilestone;
+})(window.gl || (window.gl = {}));

app/assets/javascripts/filtered_search/filtered_search_manager.js.es6

@@ -80,6 +80,8 @@
   let dropdownHint;
   let dropdownAuthor;
   let dropdownAssignee;
+  let dropdownMilestone;
+  let dropdownLabel;
 
   class FilteredSearchManager {
     constructor() {
@@ -116,6 +118,18 @@
           }
 
           dropdownAssignee.render();
+        } else if (match.key === 'milestone') {
+          if (!dropdownMilestone) {
+            dropdownMilestone = new gl.DropdownMilestone(document.querySelector('#js-dropdown-milestone'), document.querySelector('.filtered-search'));
+          }
+
+          dropdownMilestone.render();
+        } else if (match.key === 'label') {
+          if (!dropdownLabel) {
+            dropdownLabel = new gl.DropdownLabel(document.querySelector('#js-dropdown-label'), document.querySelector('.filtered-search'));
+          }
+
+          dropdownLabel.render();
         }
 
       } else if (!match && this.currentDropdown !== 'hint') {

app/views/shared/issuable/_search_bar.html.haml

@@ -42,6 +42,17 @@
                     {{name}}
                   %span
                     {{username}}
+          #js-dropdown-milestone.dropdown-menu{ 'data-dropdown' => true }
+            %ul{ 'data-dynamic' => true }
+              %li
+                %button.btn.btn-link
+                  {{title}}
+          #js-dropdown-label.dropdown-menu{ 'data-dropdown' => true }
+            %ul{ 'data-dynamic' => true }
+              %li
+                %button.btn.btn-link
+                  %span.dropdown-label-box{ 'style': 'background: {{color}}'}
+                    {{title}}
         .pull-right
           - if boards_page
             #js-boards-seach.issue-boards-search