Shows error messages when trying to create label in dropdown menulabel-dropdown-errors

Closes #14495

4 files changed, 21 insertions, 1 deletions

diff --git a/app/assets/javascripts/api.js.coffee b/app/assets/javascripts/api.js.coffee
index 2ddf8612db3..f3ed9a66715 100644
--- a/app/assets/javascripts/api.js.coffee
+++ b/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) ->
diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index 4a0c18a99a6..f3cb1e3bc09 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/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) ->
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 61ee34b695e..3c13573c8fe 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/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;
+}
diff --git a/app/views/shared/issuable/_label_dropdown.html.haml b/app/views/shared/issuable/_label_dropdown.html.haml
index 87617315181..186087e8f89 100644
--- a/app/views/shared/issuable/_label_dropdown.html.haml
+++ b/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