From 931274baab8357fca15094f7f82fd78f35f70c2c Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 13 Jul 2016 11:53:27 +0100
Subject: [PATCH] Added tooltip to label value in collapsed sidebar
Closes #19398
---
CHANGELOG | 2 ++
app/assets/javascripts/labels_select.js | 30 ++++++++++++++--
app/helpers/issuables_helper.rb | 14 ++++++++
app/views/shared/issuable/_sidebar.html.haml | 2 +-
spec/features/issues/issue_sidebar_spec.rb | 38 ++++++++++++++++++++
5 files changed, 83 insertions(+), 3 deletions(-)
diff --git a/CHANGELOG b/CHANGELOG
index fec7c56c32d..d7b561f8922 100644
--- a/CHANGELOG
+++ b/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
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index 0526430989f..c26d902bac1 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/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'
});
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index 47d174361db..b95a3e95001 100644
--- a/app/helpers/issuables_helper.rb
+++ b/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?
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 8e2fcbdfab8..c1b50e65af5 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/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
diff --git a/spec/features/issues/issue_sidebar_spec.rb b/spec/features/issues/issue_sidebar_spec.rb
index 4b1aec8bf71..a6acbd5a701 100644
--- a/spec/features/issues/issue_sidebar_spec.rb
+++ b/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
--
GitLab