Added tooltip to label value in collapsed sidebar

Closes #19398

CHANGELOG

@@ -55,6 +55,8 @@ v 8.10.0 (unreleased)
   - Add "Enabled Git access protocols" to Application Settings
   - Diffs will create button/diff form on demand no on server side
   - Reduce size of HTML used by diff comment forms
+  - Protected branches have a "Developers can Merge" setting. !4892 (original implementation by Mathias Vestergaard)
+  - Added tooltip listing label names to the labels value in the collapsed issuable sidebar
   - Fix user creation with stronger minimum password requirements !4054 (nathan-pmt)
   - Only show New Snippet button to users that can create snippets.
   - PipelinesFinder uses git cache data

app/assets/javascripts/labels_select.js.coffee

@@ -20,11 +20,13 @@ class @LabelsSelect
       $block = $selectbox.closest('.block')
       $form = $dropdown.closest('form')
       $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span')
+      $sidebarLabelTooltip = $block.find('.js-sidebar-labels-tooltip')
       $value = $block.find('.value')
       $newLabelError = $('.js-label-error')
       $colorPreview = $('.js-dropdown-label-color-preview')
       $newLabelCreateButton = $('.js-new-label-btn')
+      $sidebarLabelTooltip.tooltip()
       $newLabelError.hide()
       $loading = $block.find('.block-loading').fadeOut()
@@ -151,7 +153,24 @@ class @LabelsSelect
             .html(template)
           $sidebarCollapsedValue.text(labelCount)
-          $('.has-tooltip', $value).tooltip(container: 'body')
+          if data.labels.length
+            labelTooltipTitle = _.chain data.labels
+              .map (label, i) ->
+                label.title unless i >= 5
+              .compact()
+              .value()
+
+            if data.labels.length > 5
+              labelTooltipTitle.push "and #{data.labels.length - 5} more"
+
+            labelTooltipTitle = labelTooltipTitle.join(', ')
+          else
+            labelTooltipTitle = ''
+            $sidebarLabelTooltip.tooltip('destroy')
+
+          $sidebarLabelTooltip
+            .attr 'title', labelTooltipTitle
+            .tooltip 'fixTitle'
           $value
             .find('a')

app/helpers/issuables_helper.rb

@@ -72,6 +72,20 @@ module IssuablesHelper
     end
   end
+  def issuable_labels_tooltip(labels)
+    max_labels = 5
+    label_size = labels.size
+    label_names = labels.each_with_index.map do |label, i|
+      label.name unless i >= max_labels
+    end
+
+    if label_size > max_labels
+      label_names << "and #{label_size - max_labels} more"
+    end
+
+    label_names.compact.join(', ')
+  end
+
   private
   def sidebar_gutter_collapsed?

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

@@ -109,7 +109,7 @@
       - if issuable.project.labels.any?
         .block.labels
-          .sidebar-collapsed-icon
+          .sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(issuable.labels_array), data: { placement: "left", container: "body" } }
             = icon('tags')
             %span
               = issuable.labels_array.size