Shows error messages when trying to create label in dropdown menu

Closes #14495

app/assets/javascripts/api.js.coffee

@@ -74,6 +74,8 @@
       dataType: "json"
     ).done (label) ->
       callback(label)
+    .error (message) ->
+      callback(message.responseJSON)
 
   # Return group projects list. Filtered by query
   groupProjects: (group_id, query, callback) ->

app/assets/javascripts/labels_select.js.coffee

@@ -14,6 +14,9 @@ class @LabelsSelect
       defaultLabel = $dropdown.data('default-label')
 
       if newLabelField.length
+        $newLabelError = $dropdown.parent().find('.js-label-error')
+        $newLabelError.hide()
+
         $('.suggest-colors-dropdown a').on 'click', (e) ->
           e.preventDefault()
           e.stopPropagation()
@@ -27,6 +30,7 @@ class @LabelsSelect
           e.stopPropagation()
 
           if newLabelField.val() isnt '' and newColorField.val() isnt ''
+            $newLabelError.hide()
             $('.js-new-label-btn').disable()
 
             # Create new label with API
@@ -35,7 +39,13 @@ class @LabelsSelect
               color: newColorField.val()
             }, (label) ->
               $('.js-new-label-btn').enable()
-              $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
+
+              if label.message?
+                $newLabelError
+                  .text label.message
+                  .show()
+              else
+                $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
 
       $dropdown.glDropdown(
         data: (term, callback) ->

app/assets/stylesheets/pages/labels.scss

@@ -45,3 +45,10 @@
 .label-subscription {
   display: inline-block;
 }
+
+.dropdown-labels-error {
+  padding: 5px 10px;
+  margin-bottom: 10px;
+  background-color: $gl-danger;
+  color: $white-light;
+}

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

@@ -27,6 +27,7 @@
       .dropdown-page-two
         = dropdown_title("Create new label", back: true)
         = dropdown_content do
+          .dropdown-labels-error.js-label-error
           %input#new_label_color{type: "hidden"}
           %input#new_label_name.dropdown-input-field{type: "text", placeholder: "Name new label"}
           .dropdown-label-color-preview.js-dropdown-label-color-preview