Applied new dropdowns to issue filters

app/assets/javascripts/api.js.coffee

@@ -4,6 +4,7 @@
   namespaces_path: "/api/:version/namespaces.json"
   group_projects_path: "/api/:version/groups/:id/projects.json"
   projects_path: "/api/:version/projects.json"
+  labels_path: "/api/:version/projects/:id/labels"
 
   group: (group_id, callback) ->
     url = Api.buildUrl(Api.group_path)
@@ -61,6 +62,18 @@
     ).done (projects) ->
       callback(projects)
 
+  projectLabels: (project_id, callback) ->
+    url = Api.buildUrl(Api.labels_path)
+    url = url.replace(':id', project_id)
+
+    $.ajax(
+      url: url
+      data:
+        private_token: gon.api_token
+      dataType: "json"
+    ).done (labels) ->
+      callback(labels)
+
   # 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

@@ -185,9 +185,10 @@ class GitLabDropdown
     # Toggle active class for the tick mark
     el.toggleClass "is-active"
 
-    # Create hidden input for form
-    input = "<input type='hidden' name='#{fieldName}' value='#{value}' />"
-    @dropdown.before input
+    if value isnt 0
+      # Create hidden input for form
+      input = "<input type='hidden' name='#{fieldName}' value='#{value}' />"
+      @dropdown.before input
 
 $.fn.glDropdown = (opts) ->
   return @.each ->

app/assets/javascripts/labels_select.js.coffee

+class @LabelsSelect
+  constructor: ->
+    $('.js-label-select').each (i, dropdown) ->
+      projectId = $(dropdown).data('project-id')
+
+      $(dropdown).glDropdown(
+        data: (callback) ->
+          Api.projectLabels 8, callback
+        renderRow: (label) ->
+          "<li>
+            <a href='#'>
+              <span class='label' style='background-color: #{label.color}'>#{label.name}</span>
+              #{label.name}
+            </a>
+          </li>"
+        filterable: true
+        search:
+          fields: ['name']
+        selectable: true
+        fieldName: $(dropdown).data('field-name')
+        id: (label) ->
+          label.name
+        clicked: ->
+          $(dropdown).parents('form').submit()
+      )

app/assets/javascripts/users_select.js.coffee

@@ -3,6 +3,47 @@ class @UsersSelect
     @usersPath = "/autocomplete/users.json"
     @userPath = "/autocomplete/users/:id.json"
 
+    $('.js-user-search').each (i, dropdown) =>
+      projectId = $(dropdown).data('project-id')
+      showNullUser = $(dropdown).data('null-user')
+      selectedId = $(dropdown).data('selected')
+
+      $(dropdown).glDropdown(
+        data: (callback) =>
+          @users "", (users) =>
+            if showNullUser
+              users.unshift(
+                name: 'Unassigned',
+                id: 0
+              )
+
+            # Send the data back
+            callback users
+        filterable: true
+        search:
+          fields: ['name', 'username']
+        selectable: true
+        fieldName: $(dropdown).data('field-name')
+        clicked: ->
+          $(dropdown).parents('form').submit()
+        renderRow: (user) ->
+          username = if user.username then "@#{user.username}" else ""
+          avatar = if user.avatar_url then user.avatar_url else gon.default_avatar_url
+          selected = if user.id is selectedId then "is-active" else ""
+
+          "<li>
+            <a href='#' class='dropdown-menu-user-link #{selected}'>
+              <img src='#{avatar}' class='avatar avatar-inline' width='30' />
+              <strong class='dropdown-menu-user-full-name'>
+                #{user.name}
+              </strong>
+              <span class='dropdown-menu-user-username'>
+                #{username}
+              </span>
+            </a>
+          </li>"
+      )
+
     $('.ajax-users-select').each (i, select) =>
       @projectId = $(select).data('project-id')
       @groupId = $(select).data('group-id')

app/assets/stylesheets/framework/dropdowns.scss

@@ -320,3 +320,14 @@
     margin-left: -14px;
   }
 }
+
+.dropdown-menu-labels {
+  .label {
+    position: relative;
+    top: 5px;
+    width: 30px;
+    margin-right: 5px;
+    text-indent: -99999px;
+    overflow: hidden;
+  }
+}

app/helpers/dropdowns_helper.rb

 module DropdownsHelper
-  def dropdown_tag(toggle_text, id: nil, toggle_class: nil, title: false, filter: false, placeholder: "", &block)
+  def dropdown_tag(toggle_text, id: nil, toggle_class: nil, dropdown_class: nil, title: false, filter: false, placeholder: "", data: {}, &block)
     content_tag :div, class: "dropdown" do
+      toggle_hash = data.merge({toggle: "dropdown"})
+
       dropdown_output = ""
-      dropdown_output += content_tag :button, class: "dropdown-menu-toggle #{toggle_class}", id: id, type: "button", data: {toggle: "dropdown"} do
+      dropdown_output += content_tag :button, class: "dropdown-menu-toggle #{toggle_class}", id: id, type: "button", data: toggle_hash do
         output = toggle_text
         output << icon('chevron-down')
         output.html_safe
       end
 
-      dropdown_output += content_tag :div, class: "dropdown-menu dropdown-select dropdown-menu-selectable" do
+      dropdown_output += content_tag :div, class: "dropdown-menu dropdown-select #{dropdown_class}" do
         output = ""
 
         if title

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

@@ -7,22 +7,25 @@
             class: "check_all_issues left"
       .issues-other-filters
         .filter-item.inline
-          = users_select_tag(:author_id, selected: params[:author_id],
-            placeholder: 'Author', class: 'trigger-submit', any_user: "Any Author", first_user: true, current_user: true)
+          = dropdown_tag("Author", toggle_class: "js-user-search", title: "Filter by author", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable",
+            placeholder: "Search authors", data: {any_user: "Any Author", first_user: true, current_user: true, project_id: @project.id, selected: params[:author_id], field_name: "author_id"})
 
         .filter-item.inline
-          = users_select_tag(:assignee_id, selected: params[:assignee_id],
-          placeholder: 'Assignee', class: 'trigger-submit', any_user: "Any Assignee", null_user: true, first_user: true, current_user: true)
+          = dropdown_tag("Assignee", toggle_class: "js-user-search", title: "Filter by assignee", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable",
+            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
-          = select_tag('milestone_title', projects_milestones_options,
-            class: 'select2 trigger-submit', include_blank: true,
-            data: {placeholder: 'Milestone'})
+          = 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
 
         .filter-item.inline.labels-filter
-          = select_tag('label_name', projects_labels_options,
-            class: 'select2 trigger-submit', include_blank: true,
-            data: {placeholder: 'Label'})
+          = dropdown_tag("Label", title: "Filter by label", toggle_class: "js-label-select", filter: true, dropdown_class: "dropdown-menu-labels dropdown-menu-selectable",
+            placeholder: "Search labels", data: {field_name: "label_name", selected: params[:label_name], project_id: @project.id})
 
         .pull-right
           = render 'shared/sort_dropdown'
@@ -47,6 +50,7 @@
 
 :javascript
   new UsersSelect();
+  new LabelsSelect();
   $('form.filter-form').on('submit', function (event) {
     event.preventDefault();
     Turbolinks.visit(this.action + '&' + $(this).serialize());