From 05856199031e869e7c60b5da8b949ccbcecec0cb Mon Sep 17 00:00:00 2001
From: Jacob Schatz <jschatz1@gmail.com>
Date: Tue, 22 Mar 2016 19:45:25 +0000
Subject: [PATCH] Merge branch 'label-dropdown-errors' into 'master'

Shows error messages when trying to create label in dropdown menu

Closes #14495

![Screen_Shot_2016-03-22_at_14.46.10](/uploads/cdcaa51f4d41237f8027efbd0f894bcd/Screen_Shot_2016-03-22_at_14.46.10.png)

See merge request !3345
---
 CHANGELOG                                           |  1 +
 app/assets/javascripts/api.js.coffee                |  2 ++
 app/assets/javascripts/labels_select.js.coffee      | 12 +++++++++++-
 app/assets/stylesheets/pages/labels.scss            |  7 +++++++
 app/views/shared/issuable/_label_dropdown.html.haml |  1 +
 5 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG b/CHANGELOG
index ca5fb8b0d7..a0c55ebe8e 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -7,6 +7,7 @@ v 8.6.1 (unreleased)
   - Add a confirmation step before deleting an issuable. !3341
   - Fixes issue with signin button overflowing on mobile. !3342
   - Auto collapses the navigation sidebar when resizing. !3343
+  - Shows error messages when trying to create label in dropdown menu. !3345
 
 v 8.6.0
   - Add ability to move issue to another project
diff --git a/app/assets/javascripts/api.js.coffee b/app/assets/javascripts/api.js.coffee
index 2ddf8612db..f3ed9a6671 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 4a0c18a99a..f3cb1e3bc0 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 61ee34b695..3c13573c8f 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 8761731518..186087e8f8 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