Can create new label from dropdown

3 files changed, 43 insertions, 3 deletions

diff --git a/app/assets/javascripts/api.js.coffee b/app/assets/javascripts/api.js.coffee
index 987815b6bda..36c6a76e09c 100644
--- a/app/assets/javascripts/api.js.coffee
+++ b/app/assets/javascripts/api.js.coffee
@@ -75,6 +75,20 @@
     ).done (labels) ->
       callback(labels)
 
+  newLabel: (project_id, data, callback) ->
+    url = Api.buildUrl(Api.labels_path)
+    url = url.replace(':id', project_id)
+
+    data.private_token = gon.api_token
+    $.ajax(
+      url: url
+      type: "POST"
+      data: data
+      dataType: "json"
+    ).done (label) ->
+      callback(label)
+
+
   milestones: (project_id, callback) ->
     url = Api.buildUrl(Api.milestones_path)
     url = url.replace(':id', project_id)
diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 18b90d32c96..2d69280c9e5 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -2,7 +2,7 @@ class GitLabDropdownFilter
   BLUR_KEYCODES = [27, 40]
 
   constructor: (@dropdown, @remote, @query, @data, @callback) ->
-    @input = @dropdown.find(".dropdown-input-field")
+    @input = @dropdown.find(".dropdown-input .dropdown-input-field")
 
     # Key events
     timeout = ""
@@ -108,10 +108,10 @@ class GitLabDropdown
         @togglePage()
 
     if @options.selectable
-      selector = "a"
+      selector = ".dropdown-content a"
 
       if @dropdown.find(".dropdown-toggle-page").length
-        selector = ".dropdown-page-one a"
+        selector = ".dropdown-page-one .dropdown-content a"
 
       @dropdown.on "click", selector, (e) ->
         self.rowClicked $(@)
diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index 56fe6dc9a7a..5582bf457e3 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/app/assets/javascripts/labels_select.js.coffee
@@ -3,6 +3,32 @@ class @LabelsSelect
     $('.js-label-select').each (i, dropdown) ->
       projectId = $(dropdown).data('project-id')
       selectedLabel = $(dropdown).data('selected')
+      newLabelField = $('#new_label_name')
+      newColorField = $('#new_label_color')
+
+      if newLabelField.length
+        $('.suggest-colors-dropdown a').on "click", (e) ->
+          e.preventDefault()
+          e.stopPropagation()
+          newColorField.val $(this).data("color")
+          $('.js-dropdown-label-color-preview')
+            .css 'background-color', $(this).data("color")
+            .addClass 'is-active'
+
+        $('.js-new-label-btn').on "click", (e) ->
+          e.preventDefault()
+          e.stopPropagation()
+
+          if newLabelField.val() isnt "" && newColorField.val() isnt ""
+            $('.js-new-label-btn').disable()
+
+            # Create new label with API
+            Api.newLabel projectId, {
+              name: newLabelField.val()
+              color: newColorField.val()
+            }, (label) ->
+              $('.js-new-label-btn').enable()
+              $('.dropdown-menu-back', $(dropdown).parent()).trigger "click"
 
       $(dropdown).glDropdown(
         data: (term, callback) ->