Add milestone sidebar update via JSON

app/assets/javascripts/gl_dropdown.js.coffee

@@ -185,7 +185,8 @@ class GitLabDropdown
     if @options.filterable
       @dropdown.find(".dropdown-input-field").focus()
 
-  hidden: =>
+  hidden: (e) =>
+
     if @options.filterable
       @dropdown
         .find(".dropdown-input-field")
@@ -196,6 +197,9 @@ class GitLabDropdown
     if @dropdown.find(".dropdown-toggle-page").length
       $('.dropdown-menu', @dropdown).removeClass PAGE_TWO_CLASS
 
+    if @options.hidden
+      @options.hidden.call(@,e)
+
 
   # Render the full menu
   renderMenu: (html) ->

app/assets/javascripts/labels_select.js.coffee

@@ -4,6 +4,7 @@ class @LabelsSelect
       $dropdown = $(dropdown)
       projectId = $dropdown.data('project-id')
       labelUrl = $dropdown.data('labels')
+      issueUpdateURL = $dropdown.data('issueUpdate')
       selectedLabel = $dropdown.data('selected')
       if selectedLabel
         selectedLabel = selectedLabel.toString().split(',')
@@ -12,6 +13,23 @@ class @LabelsSelect
       showNo = $dropdown.data('show-no')
       showAny = $dropdown.data('show-any')
       defaultLabel = $dropdown.data('default-label')
+      $selectbox = $dropdown.closest('.selectbox')
+      $block = $selectbox.closest('.block')
+      $value = $block.find('.value')
+      $loading = $block.find('.block-loading').fadeOut()
+      issueURLSplit = issueUpdateURL.split('/')
+      labelHTMLTemplate = _.template(
+          '<% _.each(labels, function(label){ %>'+
+          '<a href="'+ 
+          ['',issueURLSplit[1], issueURLSplit[2],''].join('/') +
+          'issues?label_name=<%= label.title %>">'+
+          '<span class="label color-label" '+
+          'style="background-color: <%= label.color %>; '+
+          'color: #FFFFFF">'+
+          '<%= label.title %>'+
+          '</span>'+
+          '</a>'+
+          '<% }); %>');
 
       if newLabelField.length
         $newLabelCreateButton = $('.js-new-label-btn')
@@ -133,6 +151,7 @@ class @LabelsSelect
         search:
           fields: ['title']
         selectable: true
+
         toggleLabel: (selected) ->
           if selected and selected.title isnt 'Any Label'
             selected.title
@@ -142,8 +161,15 @@ class @LabelsSelect
         id: (label) ->
           if label.isAny?
             ''
-          else
+          else if $dropdown.hasClass "js-filter-submit"
             label.title
+          else
+            label.id
+
+        hidden: ->
+          $selectbox.hide()
+          $value.show()
+
         clicked: ->
           page = $('body').data 'page'
           isIssueIndex = page is 'projects:issues:index'
@@ -153,4 +179,25 @@ class @LabelsSelect
             Issues.filterResults $dropdown.closest('form')
           else if $dropdown.hasClass 'js-filter-submit'
             $dropdown.closest('form').submit()
+          else
+            selected = $dropdown
+              .closest('.selectbox')
+              .find('input[type="hidden"]')
+              .val()
+            # need inline-block here instead of show, 
+            # which will default to the element's style in this case inline.
+            $loading
+              .fadeIn()
+            $.ajax(
+              type: 'PUT'
+              url: issueUpdateURL
+              data:
+                issue: 
+                  label_ids: [selected]
+            ).done (data) ->
+              $loading.fadeOut()
+              $selectbox.hide()
+              href = $value
+                      .show()
+                      .html(labelHTMLTemplate(data))
       )

app/assets/javascripts/milestone_select.js.coffee

@@ -59,7 +59,9 @@ class @MilestoneSelect
             milestone.id
         isSelected: (milestone) ->
           milestone.title is selectedMilestone
-
+        hidden: ->
+          $selectbox.hide()
+          $value.show()
         clicked: (e) ->
           if $dropdown.hasClass "js-filter-submit"
             $dropdown.parents('form').submit()
@@ -68,8 +70,6 @@ class @MilestoneSelect
               .closest('.selectbox')
               .find('input[type="hidden"]')
               .val()
-            # need inline-block here instead of show, 
-            # which will default to the element's style in this case inline.
             $loading
               .fadeIn()
             $.ajax(

app/assets/stylesheets/pages/issuable.scss

@@ -255,6 +255,7 @@
   
   .dropdown-menu-toggle {
     width: 100%;
+    padding-top: 0;
   }
 
   .open .dropdown-menu {

app/controllers/projects/issues_controller.rb

@@ -108,7 +108,7 @@ class Projects::IssuesController < Projects::ApplicationController
         end
       end
       format.json do
-        render json: @issue.to_json(include: :milestone )
+        render json: @issue.to_json(include: [:milestone, :labels])
       end
     end
   end

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

@@ -75,6 +75,7 @@
               = issuable.labels.count
           .title.hide-collapsed
             Labels
+            =icon('spinner spin', class: 'block-loading')
             - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
               = link_to 'Edit', '#', class: 'edit-link pull-right'
           .value.bold.issuable-show-labels.hide-collapsed{ class: ("has-labels" if issuable.labels.any?) }
@@ -84,8 +85,29 @@
             - else
               .light None
           .selectbox.hide-collapsed
-            = f.collection_select :label_ids, issuable.project.labels.all, :id, :name,
-              { selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" }
+            .dropdown
+              %button.dropdown-menu-toggle.js-label-select{type: "button", data: {toggle: "dropdown", field_name: "label_name", show_no: "true", show_any: "true", selected: params[:label_name], project_id: (@project.id if @project), issue_update: namespace_project_issue_path(@project.namespace, @project, issuable.id, :json), labels: (namespace_project_labels_path(@project.namespace, @project, :json) if @project)}}
+                %span.dropdown-toggle-text
+                  Label
+                = icon('chevron-down')
+              .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
+                .dropdown-page-one
+                  = dropdown_title("Filter by label")
+                  = dropdown_filter("Search labels")
+                  = dropdown_content
+                  - if @project
+                    = dropdown_footer do
+                      %ul.dropdown-footer-list
+                        - if can? current_user, :admin_label, @project
+                          %li
+                            %a.dropdown-toggle-page{href: "#"}
+                              Create new
+                        %li
+                          = link_to namespace_project_labels_path(@project.namespace, @project) do
+                            - if can? current_user, :admin_label, @project
+                              Manage labels
+                            - else
+                              View labels
 
       = render "shared/issuable/participants", participants: issuable.participants(current_user)
       - if current_user
@@ -116,6 +138,6 @@
           = clipboard_button(clipboard_text: project_ref)
 
     :javascript
-      new Subscription('.subscription');
       new MilestoneSelect();
+      new LabelsSelect();
       new IssuableContext();