Added tooltip to label value in collapsed sidebar

Closes #19398

CHANGELOG

@@ -300,6 +300,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, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, projectId, saveLabelData, selectedLabel, showAny, showNo;
+        var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, projectId, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip;
         $dropdown = $(dropdown);
         projectId = $dropdown.data('project-id');
         labelUrl = $dropdown.data('labels');
@@ -21,6 +21,7 @@
         $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');
         $loading = $block.find('.block-loading').fadeOut();
         if (issueUpdateURL != null) {
@@ -52,7 +53,7 @@
             dataType: 'JSON',
             data: data
           }).done(function(data) {
-            var labelCount, template;
+            var labelCount, template, labelTooltipTitle;
             $loading.fadeOut();
             $dropdown.trigger('loaded.gl.dropdown');
             $selectbox.hide();
@@ -66,6 +67,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

spec/features/issues/issue_sidebar_spec.rb

@@ -73,6 +73,44 @@ feature 'Issue Sidebar', feature: true do
     end
   end
 
+  context 'update labels', js: true do
+    before do
+      project.team << [user, :developer]
+      visit_issue(project, issue)
+    end
+
+    context 'more than 5' do
+      before do
+        create(:label, project: project, title: 'a')
+        create(:label, project: project, title: 'b')
+        create(:label, project: project, title: 'c')
+        create(:label, project: project, title: 'd')
+        create(:label, project: project, title: 'e')
+        create(:label, project: project, title: 'f')
+      end
+
+      it 'should update the tooltip for collapsed sidebar' do
+        page.within('.block.labels') do
+          find('.edit-link').click
+
+          page.within('.dropdown-menu-labels') do
+            click_link 'a'
+            click_link 'b'
+            click_link 'c'
+            click_link 'd'
+            click_link 'e'
+            click_link 'f'
+          end
+
+          find('.edit-link').click
+          sleep 1
+
+          expect(find('.js-sidebar-labels-tooltip', visible: false)['data-original-title']).to eq('a, b, c, d, e, and 1 more')
+        end
+      end
+    end
+  end
+
   def visit_issue(project, issue)
     visit namespace_project_issue_path(project.namespace, project, issue)
   end