Merge branch 'issue_18575' into 'master'

Improve usability for prioritized labels

## What does this MR do?
- Adds an icon next to prioritized label rows serving as a hint to the user that the labels can be sorted by dragging them.
- Adds description about prioritized labels.
- Restores empty message when removing all prioritized labels.

## Screenshots (if relevant)

![labels](/uploads/1da16c4c54a894fa45ccc47e3a5bdf7a/labels.gif)

Closes #18575 

See merge request !4652

6 files changed, 32 insertions, 7 deletions

diff --git a/app/assets/javascripts/LabelManager.js.coffee b/app/assets/javascripts/LabelManager.js.coffee
index 365a062bb81..b06bcf0fcbf 100644
--- a/app/assets/javascripts/LabelManager.js.coffee
+++ b/app/assets/javascripts/LabelManager.js.coffee
@@ -42,10 +42,10 @@ class @LabelManager
       $from = @prioritizedLabels
 
     if $from.find('li').length is 1
-      $from.find('.empty-message').show()
+      $from.find('.empty-message').removeClass('hidden')
 
     if not $target.find('li').length
-      $target.find('.empty-message').hide()
+      $target.find('.empty-message').addClass('hidden')
 
     $label.detach().appendTo($target)
 
@@ -54,6 +54,9 @@ class @LabelManager
 
     if action is 'remove'
       xhr = $.ajax url: url, type: 'DELETE'
+
+      # Restore empty message
+      $from.find('.empty-message').removeClass('hidden') unless $from.find('li').length
     else
       xhr = @savePrioritySort($label, action)
 
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index b34ec16cdba..a12c0bba44a 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -159,7 +159,7 @@ ul.content-list {
       background-color: $gray-light;
       border: dotted 1px $gray-dark;
       margin: 1px 0;
-      min-height: 30px;
+      min-height: 52px;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index c1a860b0d74..4b7cb7097a9 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -242,6 +242,12 @@
       }
     }
   }
+
+  &.adjust {
+    .nav-text, .nav-controls {
+      width: auto;
+    }
+  }
 }
 
 .layout-nav {
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index bc65404a741..046c38aba44 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -115,6 +115,13 @@
   }
 }
 
+.draggable-handler {
+  display: inline-block;
+  opacity: 0;
+  transition: opacity .3s;
+  color: $gray-darkest;
+}
+
 .prioritized-labels {
   margin-bottom: 30px;
 
@@ -122,6 +129,13 @@
     display: none;
     color: $gray-light;
   }
+
+  li:hover {
+    .draggable-handler {
+      display: inline-block;
+      opacity: 1;
+    }
+  }
 }
 
 .other-labels {
diff --git a/app/views/projects/labels/index.html.haml b/app/views/projects/labels/index.html.haml
index 6e1baa46b05..aa4d69550ec 100644
--- a/app/views/projects/labels/index.html.haml
+++ b/app/views/projects/labels/index.html.haml
@@ -4,9 +4,10 @@
 = render "projects/issues/head"
 
 %div{ class: (container_class) }
-  .top-area
+  .top-area.adjust
     .nav-text
-      Labels can be applied to issues and merge requests.
+      Labels can be applied to issues and merge requests. Star a label to make it a priority label. Order the prioritized labels to change their relative priority, by dragging.
+
     .nav-controls
       - if can?(current_user, :admin_label, @project)
         = link_to new_namespace_project_label_path(@project.namespace, @project), class: "btn btn-new" do
@@ -19,10 +20,9 @@
       .prioritized-labels{ class: ('hide' if hide) }
         %h5 Prioritized Labels
         %ul.content-list.manage-labels-list.js-prioritized-labels{ "data-url" => set_priorities_namespace_project_labels_path(@project.namespace, @project) }
+          %p.empty-message{ class: ('hidden' unless @prioritized_labels.empty?) } No prioritized labels yet
           - if @prioritized_labels.present?
             = render @prioritized_labels
-          - else
-            %p.empty-message No prioritized labels yet
     .other-labels
       - if can?(current_user, :admin_label, @project)
         %h5{ class: ('hide' if hide) } Other Labels
diff --git a/app/views/shared/_label_row.html.haml b/app/views/shared/_label_row.html.haml
index 478c04318c6..77676454b57 100644
--- a/app/views/shared/_label_row.html.haml
+++ b/app/views/shared/_label_row.html.haml
@@ -1,5 +1,7 @@
 %span.label-row
   - if can?(current_user, :admin_label, @project)
+    .draggable-handler
+      = icon('bars')
     .js-toggle-priority.toggle-priority{ data: { url: remove_priority_namespace_project_label_path(@project.namespace, @project, label),
       dom_id: dom_id(label) } }
       %button.add-priority.btn.has-tooltip{ title: 'Prioritize', :'data-placement' => 'top' }