milestone dropdown

app/assets/javascripts/api.js.coffee

@@ -5,6 +5,7 @@
   group_projects_path: "/api/:version/groups/:id/projects.json"
   projects_path: "/api/:version/projects.json"
   labels_path: "/api/:version/projects/:id/labels"
+  milestones_path: "/api/:version/projects/:id/milestones"
 
   group: (group_id, callback) ->
     url = Api.buildUrl(Api.group_path)
@@ -74,6 +75,18 @@
     ).done (labels) ->
       callback(labels)
 
+  milestones: (project_id, callback) ->
+    url = Api.buildUrl(Api.milestones_path)
+    url = url.replace(':id', project_id)
+
+    $.ajax(
+      url: url
+      data:
+        private_token: gon.api_token
+      dataType: "json"
+    ).done (milestones) ->
+      callback(milestones)
+
   # Return group projects list. Filtered by query
   groupProjects: (group_id, query, callback) ->
     url = Api.buildUrl(Api.group_projects_path)

app/assets/javascripts/gl_dropdown.js.coffee

@@ -148,7 +148,7 @@ class GitLabDropdown
       html = @options.renderRow(data)
     else
       selected = if @options.isSelected then @options.isSelected(data) else false
-      url = if @options.url then @options.url(data) else ""
+      url = if @options.url then @options.url(data) else "#"
       text = if @options.text then @options.text(data) else ""
       cssClass = "";
 

app/assets/javascripts/labels_select.js.coffee

@@ -2,13 +2,16 @@ class @LabelsSelect
   constructor: ->
     $('.js-label-select').each (i, dropdown) ->
       projectId = $(dropdown).data('project-id')
+      selectedLabel = $(dropdown).data('selected')
 
       $(dropdown).glDropdown(
         data: (callback) ->
           Api.projectLabels 8, callback
         renderRow: (label) ->
+          selected = if label.name is selectedLabel then "is-active" else ""
+
           "<li>
-            <a href='#'>
+            <a href='#' class='#{selected}'>
               #{label.name}
             </a>
           </li>"

app/assets/javascripts/milestone_select.js.coffee

@@ -0,0 +1,23 @@
+class @MilestoneSelect
+  constructor: ->
+    $('.js-milestone-select').each (i, dropdown) ->
+      projectId = $(dropdown).data('project-id')
+      selectedMilestone = $(dropdown).data('selected')
+
+      $(dropdown).glDropdown(
+        data: (callback) ->
+          Api.milestones projectId, callback
+        filterable: true
+        search:
+          fields: ['name']
+        selectable: true
+        fieldName: $(dropdown).data('field-name')
+        text: (milestone) ->
+          milestone.title
+        id: (milestone) ->
+          milestone.title
+        isSelected: (milestone) ->
+          milestone.title is selectedMilestone
+        clicked: ->
+          $(dropdown).parents('form').submit()
+      )

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

@@ -15,13 +15,8 @@
             placeholder: "Search assignee", data: {any_user: "Any Author", first_user: true, null_user: true, current_user: true, project_id: @project.id, selected: params[:assignee_id], field_name: "assignee_id"})
 
         .filter-item.inline.milestone-filter
-          = dropdown_tag("Milestone", title: "Filter by milestone", filter: true, dropdown_class: "dropdown-menu-selectable",
-            placeholder: "Search milestones", data: {field_name: "milestone_title"}) do
-            %ul
-              - @project.milestones.each do |milestone|
-                %li
-                  %a{href: "#", data: {id: milestone.id}}
-                    = milestone.name
+          = dropdown_tag("Milestone", title: "Filter by milestone", toggle_class: 'js-milestone-select', filter: true, dropdown_class: "dropdown-menu-selectable",
+            placeholder: "Search milestones", data: {field_name: "milestone_title", selected: params[:milestone_title], project_id: @project.id})
 
         .filter-item.inline.labels-filter
           = dropdown_tag("Label", title: "Filter by label", toggle_class: "js-label-select", filter: true, dropdown_class: "dropdown-menu-labels dropdown-menu-selectable",
@@ -55,6 +50,7 @@
 :javascript
   new UsersSelect();
   new LabelsSelect();
+  new MilestoneSelect();
   $('form.filter-form').on('submit', function (event) {
     event.preventDefault();
     Turbolinks.visit(this.action + '&' + $(this).serialize());