Added tooltip to label value in collapsed sidebar

Closes #19398

CHANGELOG

@@ -163,6 +163,8 @@ v 8.10.0
   - Reduce size of HTML used by diff comment forms
   - Protected branches have a "Developers can Merge" setting. !4892 (original implementation by Mathias Vestergaard)
   - Fix user creation with stronger minimum password requirements. !4054 (nathan-pmt)
+  - 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
   - Track a user who created a pipeline

app/assets/javascripts/labels_select.js

@@ -4,7 +4,7 @@
       var _this;
       _this = this;
       $('.js-label-select').each(function(i, dropdown) {
-        var $block, $colorPreview, $dropdown, $form, $loading, $newLabelCreateButton, $newLabelError, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, newColorField, newLabelField, projectId, resetForm, saveLabel, saveLabelData, selectedLabel, showAny, showNo;
+        var $block, $colorPreview, $dropdown, $form, $loading, $newLabelCreateButton, $newLabelError, $selectbox, $sidebarCollapsedValue, $sidebarLabelTooltip, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, newColorField, newLabelField, projectId, resetForm, saveLabel, saveLabelData, selectedLabel, showAny, showNo;
         $dropdown = $(dropdown);
         projectId = $dropdown.data('project-id');
         labelUrl = $dropdown.data('labels');
@@ -23,10 +23,13 @@
         $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();
         if (issueUpdateURL != null) {
@@ -109,7 +112,7 @@
             dataType: 'JSON',
             data: data
           }).done(function(data) {
-            var labelCount, template;
+            var labelCount, template, labelTooltipTitle;
             $loading.fadeOut();
             $dropdown.trigger('loaded.gl.dropdown');
             $selectbox.hide();
@@ -123,6 +126,31 @@
             }
             $value.removeAttr('style').html(template);
             $sidebarCollapsedValue.text(labelCount);
+
+						if (data.labels.length) {
+							labelTooltipTitle = _.chain(data.labels)
+								.map(function (label, i) {
+									if (i < 5) {
+										return label.title;
+									}
+								})
+								.compact()
+								.values();
+
+							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');
+
             $('.has-tooltip', $value).tooltip({
               container: 'body'
             });

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