Commit 394ab119 authored by Jan Provaznik's avatar Jan Provaznik

Merge branch '38144-replace-labels-in-haml-with-gitlab-ui-css' into 'master'

Replace labels in HAML with gitlab-ui CSS

See merge request gitlab-org/gitlab!21377
parents b9ca78b3 b28414e8
import $ from 'jquery'; import $ from 'jquery';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
import Vue from 'vue'; import Vue from 'vue';
import { GlButtonGroup, GlButton, GlTooltip } from '@gitlab/ui'; import { GlButtonGroup, GlButton, GlLabel, GlTooltip } from '@gitlab/ui';
import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits'; import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
import { s__, __, sprintf } from '~/locale'; import { s__, __, sprintf } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
...@@ -14,6 +14,7 @@ import IssueCount from './issue_count.vue'; ...@@ -14,6 +14,7 @@ import IssueCount from './issue_count.vue';
import boardsStore from '../stores/boards_store'; import boardsStore from '../stores/boards_store';
import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options'; import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options';
import { ListType } from '../constants'; import { ListType } from '../constants';
import { isScopedLabel } from '~/lib/utils/common_utils';
export default Vue.extend({ export default Vue.extend({
components: { components: {
...@@ -24,6 +25,7 @@ export default Vue.extend({ ...@@ -24,6 +25,7 @@ export default Vue.extend({
GlButtonGroup, GlButtonGroup,
IssueCount, IssueCount,
GlButton, GlButton,
GlLabel,
GlTooltip, GlTooltip,
}, },
directives: { directives: {
...@@ -95,6 +97,9 @@ export default Vue.extend({ ...@@ -95,6 +97,9 @@ export default Vue.extend({
// eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
return `boards.${this.boardId}.${this.list.type}.${this.list.id}`; return `boards.${this.boardId}.${this.list.type}.${this.list.id}`;
}, },
helpLink() {
return boardsStore.scopedLabels.helpLink;
},
}, },
watch: { watch: {
filter: { filter: {
...@@ -145,6 +150,10 @@ export default Vue.extend({ ...@@ -145,6 +150,10 @@ export default Vue.extend({
} }
}, },
methods: { methods: {
showScopedLabels(label) {
return boardsStore.scopedLabels.enabled && isScopedLabel(label);
},
showNewIssueForm() { showNewIssueForm() {
this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm; this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
}, },
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import $ from 'jquery'; import $ from 'jquery';
import Vue from 'vue'; import Vue from 'vue';
import { GlLabel } from '@gitlab/ui';
import Flash from '~/flash'; import Flash from '~/flash';
import { sprintf, __ } from '~/locale'; import { sprintf, __ } from '~/locale';
import Sidebar from '~/right_sidebar'; import Sidebar from '~/right_sidebar';
...@@ -22,6 +23,7 @@ export default Vue.extend({ ...@@ -22,6 +23,7 @@ export default Vue.extend({
components: { components: {
AssigneeTitle, AssigneeTitle,
Assignees, Assignees,
GlLabel,
SidebarEpicsSelect: () => SidebarEpicsSelect: () =>
import('ee_component/sidebar/components/sidebar_item_epics_select.vue'), import('ee_component/sidebar/components/sidebar_item_epics_select.vue'),
RemoveBtn, RemoveBtn,
...@@ -67,6 +69,9 @@ export default Vue.extend({ ...@@ -67,6 +69,9 @@ export default Vue.extend({
selectedLabels() { selectedLabels() {
return this.hasLabels ? this.issue.labels.map(l => l.title).join(',') : ''; return this.hasLabels ? this.issue.labels.map(l => l.title).join(',') : '';
}, },
helpLink() {
return boardsStore.scopedLabels.helpLink;
},
}, },
watch: { watch: {
detail: { detail: {
...@@ -147,8 +152,5 @@ export default Vue.extend({ ...@@ -147,8 +152,5 @@ export default Vue.extend({
showScopedLabels(label) { showScopedLabels(label) {
return boardsStore.scopedLabels.enabled && isScopedLabel(label); return boardsStore.scopedLabels.enabled && isScopedLabel(label);
}, },
helpLink() {
return boardsStore.scopedLabels.helpLink;
},
}, },
}); });
...@@ -13,16 +13,14 @@ ...@@ -13,16 +13,14 @@
.page-title, .page-title,
.modal-title { .modal-title {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
.modal-title-with-label span { .modal-title-with-label span {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
} }
.color-label {
font-size: $gl-font-size;
padding: $gl-vert-padding $label-padding-modal;
vertical-align: middle;
}
} }
.modal-title { .modal-title {
......
...@@ -86,14 +86,19 @@ ...@@ -86,14 +86,19 @@
} }
.issuable-show-labels { .issuable-show-labels {
a { .gl-label {
margin-bottom: 5px; margin-bottom: 5px;
margin-right: 5px; margin-right: 5px;
}
a {
display: inline-block; display: inline-block;
.color-label { .color-label {
padding: 4px $grid-size; padding: 4px $grid-size;
border-radius: $label-border-radius; border-radius: $label-border-radius;
margin-right: 4px;
margin-bottom: 4px;
} }
&:hover .color-label { &:hover .color-label {
...@@ -159,9 +164,25 @@ ...@@ -159,9 +164,25 @@
.avatar { .avatar {
border-color: rgba($gray-normal, 0.2); border-color: rgba($gray-normal, 0.2);
} }
}
}
a.gl-label-icon {
color: $gray-500;
}
.gl-label .gl-label-link:hover {
text-decoration: none;
color: inherit;
.gl-label-text:last-of-type {
text-decoration: underline;
} }
}
.gl-label .gl-label-icon:hover {
text-decoration: none;
color: $gray-500;
} }
.btn-link { .btn-link {
...@@ -800,11 +821,23 @@ ...@@ -800,11 +821,23 @@
a { a {
color: $gl-text-color; color: $gl-text-color;
}
.fa { .gl-label-link {
color: $gl-text-color-secondary; color: inherit;
&:hover {
text-decoration: none;
.gl-label-text:last-of-type {
text-decoration: underline;
}
} }
} }
.gl-label-icon {
color: $gray-500;
}
} }
@media(max-width: map-get($grid-breakpoints, lg)-1) { @media(max-width: map-get($grid-breakpoints, lg)-1) {
......
...@@ -127,6 +127,11 @@ ...@@ -127,6 +127,11 @@
.color-label { .color-label {
padding: $gl-padding-4 $grid-size; padding: $gl-padding-4 $grid-size;
} }
.prepend-description-left {
vertical-align: top;
line-height: 24px;
}
} }
.prioritized-labels { .prioritized-labels {
...@@ -305,10 +310,13 @@ ...@@ -305,10 +310,13 @@
width: 150px; width: 150px;
flex-shrink: 0; flex-shrink: 0;
.badge { .scoped-label-wrapper,
overflow: hidden; .gl-label {
text-overflow: ellipsis; line-height: $gl-line-height;
max-width: 100%; }
.gl-label-scoped .gl-label-text:last-of-type {
padding-right: 22px;
} }
} }
...@@ -445,10 +453,19 @@ ...@@ -445,10 +453,19 @@
} }
} }
.gl-label-scoped {
box-shadow: 0 0 0 2px currentColor inset;
&.gl-label-sm {
box-shadow: 0 0 0 1px inset;
}
}
// Label inside title of Delete Label Modal // Label inside title of Delete Label Modal
.modal-header .page-title { .modal-header .page-title {
.scoped-label-wrapper { .scoped-label-wrapper {
.scoped-label { .scoped-label,
.gl-label-icon {
line-height: 20px; line-height: 20px;
} }
......
...@@ -59,9 +59,19 @@ $status-box-line-height: 26px; ...@@ -59,9 +59,19 @@ $status-box-line-height: 26px;
} }
.issuable-row { .issuable-row {
span a { span {
color: $gl-text-color; a {
word-wrap: break-word; color: $gl-text-color;
word-wrap: break-word;
}
.gl-label-link {
color: inherit;
}
.gl-label-icon {
color: $gray-500;
}
} }
} }
......
...@@ -283,7 +283,7 @@ $note-form-margin-left: 72px; ...@@ -283,7 +283,7 @@ $note-form-margin-left: 72px;
text-transform: lowercase; text-transform: lowercase;
} }
a { a:not(.gl-link) {
color: $blue-600; color: $blue-600;
} }
...@@ -671,6 +671,16 @@ $note-form-margin-left: 72px; ...@@ -671,6 +671,16 @@ $note-form-margin-left: 72px;
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
.gl-label-link:hover,
.gl-label-icon:hover {
text-decoration: none;
color: inherit;
.gl-label-text:last-of-type {
text-decoration: underline;
}
}
} }
/** /**
......
...@@ -36,37 +36,42 @@ module LabelsHelper ...@@ -36,37 +36,42 @@ module LabelsHelper
# link_to_label(label) { "My Custom Label Text" } # link_to_label(label) { "My Custom Label Text" }
# #
# Returns a String # Returns a String
def link_to_label(label, type: :issue, tooltip: true, css_class: nil, &block) def link_to_label(label, type: :issue, tooltip: true, small: false, &block)
link = label.filter_path(type: type) link = label.filter_path(type: type)
if block_given? if block_given?
link_to link, class: css_class, &block link_to link, &block
else else
render_label(label, tooltip: tooltip, link: link, css: css_class) render_label(label, link: link, tooltip: tooltip, small: small)
end end
end end
def render_label(label, tooltip: true, link: nil, css: nil, dataset: nil) def render_label(label, link: nil, tooltip: true, dataset: nil, small: false)
# if scoped label is used then EE wraps label tag with scoped label html = render_colored_label(label)
# doc link
html = render_colored_label(label, tooltip: tooltip)
html = link_to(html, link, class: css, data: dataset) if link
html if link
title = label_tooltip_title(label) if tooltip
html = render_label_link(html, link: link, title: title, dataset: dataset)
end
wrap_label_html(html, small: small, label: label)
end end
def render_colored_label(label, label_suffix: '', tooltip: true, title: nil) def render_colored_label(label, suffix: '')
text_color = text_color_for_bg(label.color) render_label_text(
title ||= tooltip ? label_tooltip_title(label) : label.name label.name,
suffix: suffix,
css_class: text_color_class_for_bg(label.color),
bg_color: label.color
)
end
# Intentionally not using content_tag here so that this method can be called # We need the `label` argument here for EE
# by LabelReferenceFilter def wrap_label_html(label_html, small:, label:)
span = %(<span class="badge color-label #{"has-tooltip" if tooltip}" ) + wrapper_classes = %w(gl-label)
%(data-html="true" style="background-color: #{label.color}; color: #{text_color}" ) + wrapper_classes << 'gl-label-sm' if small
%(title="#{ERB::Util.html_escape_once(title)}" data-container="body">) +
%(#{ERB::Util.html_escape_once(label.name)}#{label_suffix}</span>)
span.html_safe %(<span class="#{wrapper_classes.join(' ')}">#{label_html}</span>).html_safe
end end
def label_tooltip_title(label) def label_tooltip_title(label)
...@@ -109,6 +114,20 @@ module LabelsHelper ...@@ -109,6 +114,20 @@ module LabelsHelper
end end
end end
def text_color_class_for_bg(bg_color)
if bg_color.length == 4
r, g, b = bg_color[1, 4].scan(/./).map { |v| (v * 2).hex }
else
r, g, b = bg_color[1, 7].scan(/.{2}/).map(&:hex)
end
if (r + g + b) > 500
'gl-label-text-dark'
else
'gl-label-text-light'
end
end
def text_color_for_bg(bg_color) def text_color_for_bg(bg_color)
if bg_color.length == 4 if bg_color.length == 4
r, g, b = bg_color[1, 4].scan(/./).map { |v| (v * 2).hex } r, g, b = bg_color[1, 4].scan(/./).map { |v| (v * 2).hex }
...@@ -246,6 +265,31 @@ module LabelsHelper ...@@ -246,6 +265,31 @@ module LabelsHelper
def issuable_types def issuable_types
['issues', 'merge requests'] ['issues', 'merge requests']
end end
private
def render_label_link(label_html, link:, title:, dataset:)
classes = %w(gl-link gl-label-link)
dataset ||= {}
if title.present?
classes << 'has-tooltip'
dataset.merge!(html: true, title: title)
end
link_to(label_html, link, class: classes.join(' '), data: dataset)
end
def render_label_text(name, suffix: '', css_class: nil, bg_color: nil)
<<~HTML.chomp.html_safe
<span
class="gl-label-text #{css_class}"
data-container="body"
data-html="true"
#{"style=\"background-color: #{bg_color}\"" if bg_color}
>#{ERB::Util.html_escape_once(name)}#{suffix}</span>
HTML
end
end end
LabelsHelper.prepend_if_ee('EE::LabelsHelper') LabelsHelper.prepend_if_ee('EE::LabelsHelper')
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
- if issue.labels.any? - if issue.labels.any?
&nbsp; &nbsp;
- presented_labels_sorted_by_title(issue.labels, issue.project).each do |label| - presented_labels_sorted_by_title(issue.labels, issue.project).each do |label|
= link_to_label(label, css_class: 'label-link') = link_to_label(label, small: true)
= render_if_exists "projects/issues/issue_weight", issue: issue = render_if_exists "projects/issues/issue_weight", issue: issue
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
- if merge_request.labels.any? - if merge_request.labels.any?
&nbsp; &nbsp;
- presented_labels_sorted_by_title(merge_request.labels, merge_request.project).each do |label| - presented_labels_sorted_by_title(merge_request.labels, merge_request.project).each do |label|
= link_to_label(label, type: :merge_request, css_class: 'label-link') = link_to_label(label, type: :merge_request, small: true)
.issuable-meta .issuable-meta
%ul.controls.d-flex.align-items-end %ul.controls.d-flex.align-items-end
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.modal-dialog .modal-dialog
.modal-content .modal-content
.modal-header .modal-header
%h3.page-title Delete #{render_label(label, tooltip: false)} ? %h3.page-title Delete label: #{label.name} ?
%button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') } %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
%span{ "aria-hidden": true } &times; %span{ "aria-hidden": true } &times;
......
...@@ -29,11 +29,14 @@ ...@@ -29,11 +29,14 @@
":title" => '(list.assignee && list.assignee.username || "")' } ":title" => '(list.assignee && list.assignee.username || "")' }
@{{ list.assignee.username }} @{{ list.assignee.username }}
%span.has-tooltip.badge.color-label.title.d-inline-block.mw-100.text-truncate.align-middle{ "v-if": "list.type === \"label\"", %gl-label{ "v-if" => " list.type === \"label\"",
":title" => '(list.label ? list.label.description : "")', ":background-color" => "list.label.color",
data: { container: "body", placement: "bottom" }, ":title" => "list.label.title",
":style" => "{ backgroundColor: (list.label && list.label.color ? list.label.color : null), color: (list.label && list.label.textColor ? list.label.textColor : \"#2e2e2e\") }" } ":description" => "list.label.description",
{{ list.title }} "tooltipPlacement" => "bottom",
":size" => '(!list.isExpanded ? "sm" : "")',
":scoped" => "showScopedLabels(list.label)",
":scoped-labels-documentation-link" => "helpLink" }
- if can?(current_user, :admin_list, current_board_parent) - if can?(current_user, :admin_list, current_board_parent)
%board-delete{ "inline-template" => true, %board-delete{ "inline-template" => true,
......
...@@ -8,15 +8,12 @@ ...@@ -8,15 +8,12 @@
%span.no-value{ "v-if" => "issue.labels && issue.labels.length === 0" } %span.no-value{ "v-if" => "issue.labels && issue.labels.length === 0" }
= _("None") = _("None")
%span{ "v-for" => "label in issue.labels" } %span{ "v-for" => "label in issue.labels" }
%span.d-inline-block.position-relative.scoped-label-wrapper{ "v-if" => "showScopedLabels(label)" } %gl-label{ ":key" => "label.id",
%a{ href: '#' } ":background-color" => "label.color",
%span.badge.color-label.label{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" } ":title" => "label.title",
{{ label.title }} ":description" => "label.description",
%a.label.scoped-label{ ":href" => "helpLink()" } ":scoped" => "showScopedLabels(label)",
%i.fa.fa-question-circle{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" } ":scoped-labels-documentation-link" => "helpLink" }
%a{ href: "#", "v-else" => true }
.badge.color-label.has-tooltip{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
{{ label.title }}
- if can_admin_issue? - if can_admin_issue?
.selectbox .selectbox
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
%span.issuable-number= issuable.to_reference %span.issuable-number= issuable.to_reference
- labels.each do |label| - labels.each do |label|
= render_label(label.present(issuable_subject: project), link: polymorphic_path(issuable_type_args, { milestone_title: @milestone.title, label_name: label.title, state: 'all' })) = render_label(label.present(issuable_subject: project), link: polymorphic_path(issuable_type_args, { milestone_title: @milestone.title, label_name: label.title, state: 'all' }), small: true)
%span.assignee-icon %span.assignee-icon
- assignees.each do |assignee| - assignees.each do |assignee|
......
...@@ -3,11 +3,9 @@ ...@@ -3,11 +3,9 @@
- options = { milestone_title: @milestone.title, label_name: label.title } - options = { milestone_title: @milestone.title, label_name: label.title }
%li.no-border %li.no-border
%span.label-row = render_label(label, tooltip: false, link: milestones_label_path(options))
%span.label-name %span.prepend-description-left
= render_label(label, tooltip: false, link: milestones_label_path(options)) = markdown_field(label, :description)
%span.prepend-description-left
= markdown_field(label, :description)
.float-right.d-none.d-lg-block.d-xl-block .float-right.d-none.d-lg-block.d-xl-block
= link_to milestones_label_path(options.merge(state: 'opened')), class: 'btn btn-transparent btn-action' do = link_to milestones_label_path(options.merge(state: 'opened')), class: 'btn btn-transparent btn-action' do
......
---
title: New styles for scoped labels
merge_request: 21377
author:
type: changed
...@@ -8,15 +8,32 @@ module EE ...@@ -8,15 +8,32 @@ module EE
singleton_class.prepend self singleton_class.prepend self
end end
def render_label(label, tooltip: true, link: nil, css: nil, dataset: nil) def render_colored_label(label, suffix: '')
content = super return super unless label.scoped_label?
content = scoped_label_wrapper(content, label) if label.scoped_label?
scope_name, label_name = label.name.split(Label::SCOPED_LABEL_SEPARATOR)
content
render_label_text(
scope_name,
css_class: text_color_class_for_bg(label.color),
bg_color: label.color
) + render_label_text(
label_name,
suffix: suffix
)
end end
def scoped_label_wrapper(link, label) def wrap_label_html(label_html, small:, label:)
%(<span class="d-inline-block position-relative scoped-label-wrapper">#{link}#{scoped_labels_doc_link(label)}</span>).html_safe return super unless label.scoped_label?
wrapper_classes = %w(gl-label gl-label-scoped)
wrapper_classes << 'gl-label-sm' if small
<<~HTML.chomp.html_safe
<span class="d-inline-block position-relative scoped-label-wrapper">
<span class="#{wrapper_classes.join(' ')}" style="color: #{label.color}">#{label_html + scoped_labels_doc_link}</span>
</span>
HTML
end end
def label_tooltip_title(label) def label_tooltip_title(label)
...@@ -57,12 +74,10 @@ module EE ...@@ -57,12 +74,10 @@ module EE
private private
def scoped_labels_doc_link(label) def scoped_labels_doc_link
text_color = text_color_for_bg(label.color) help_url = ::Gitlab::Routing.url_helpers.help_page_path('user/project/labels.md', anchor: 'scoped-labels')
content = %(<i class="fa fa-question-circle" style="background-color: #{label.color}; color: #{text_color}"></i>)
help_url = ::Gitlab::Routing.url_helpers.help_page_url('user/project/labels.md', anchor: 'scoped-labels')
%(<a href="#{help_url}" class="label scoped-label" target="_blank" rel="noopener">#{content}</a>) %(<a href="#{help_url}" class="gl-link gl-label-icon" target="_blank" rel="noopener"><i class="fa fa-question-circle"></i></a>).html_safe
end end
end end
end end
...@@ -4,7 +4,8 @@ module EE ...@@ -4,7 +4,8 @@ module EE
module Label module Label
extend ActiveSupport::Concern extend ActiveSupport::Concern
SCOPED_LABEL_PATTERN = /^.*::/.freeze SCOPED_LABEL_SEPARATOR = '::'
SCOPED_LABEL_PATTERN = /^.*#{SCOPED_LABEL_SEPARATOR}/.freeze
def scoped_label? def scoped_label?
SCOPED_LABEL_PATTERN.match?(name) SCOPED_LABEL_PATTERN.match?(name)
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
- if epic.labels.any? - if epic.labels.any?
&nbsp; &nbsp;
- epic.labels.each do |label| - epic.labels.each do |label|
= render_label(label.present(issuable_subject: @group), tooltip: true, link: group_epics_path(@group, label_name:[label.name]), css: 'label-link') = render_label(label.present(issuable_subject: @group), tooltip: true, link: group_epics_path(@group, label_name:[label.name]), small: true)
.issuable-meta .issuable-meta
%ul.controls %ul.controls
......
# frozen_string_literal: true
module EE
module Banzai
module Filter
module LabelReferenceFilter
extend ::Gitlab::Utils::Override
override :wrap_link
def wrap_link(link, label)
content = super
parent = project || group
if label.scoped_label? && parent && parent.feature_available?(:scoped_labels)
presenter = label.present(issuable_parent: parent)
content = ::LabelsHelper.scoped_label_wrapper(content, presenter)
end
content
end
def tooltip_title(label)
::LabelsHelper.label_tooltip_title(label)
end
end
end
end
end
...@@ -263,6 +263,9 @@ describe 'Issue Boards', :js do ...@@ -263,6 +263,9 @@ describe 'Issue Boards', :js do
end end
it 'removes existing scoped label' do it 'removes existing scoped label' do
scoped1 = scoped_label_1.title.split(Label::SCOPED_LABEL_SEPARATOR)
scoped2 = scoped_label_2.title.split(Label::SCOPED_LABEL_SEPARATOR)
click_card(card1) click_card(card1)
page.within('.labels') do page.within('.labels') do
...@@ -281,9 +284,10 @@ describe 'Issue Boards', :js do ...@@ -281,9 +284,10 @@ describe 'Issue Boards', :js do
find('.dropdown-menu-close-icon').click find('.dropdown-menu-close-icon').click
page.within('.value') do page.within('.value') do
expect(page).to have_selector('.scoped-label-wrapper', count: 1) expect(page).to have_selector('.gl-label-scoped', count: 1)
expect(page).not_to have_content(scoped_label_1.title) expect(page).not_to have_content(scoped1.last)
expect(page).to have_content(scoped_label_2.title) expect(page).to have_content(scoped2.first)
expect(page).to have_content(scoped2.last)
end end
end end
......
...@@ -14,11 +14,13 @@ describe LabelsHelper do ...@@ -14,11 +14,13 @@ describe LabelsHelper do
end end
it 'includes link to scoped labels documentation' do it 'includes link to scoped labels documentation' do
expect(render_label(scoped_label)).to match(%r(<span.+>#{scoped_label.name}</span><a.+>.*question-circle.*</a>)) scope, name = scoped_label.title.split(Label::SCOPED_LABEL_SEPARATOR)
expect(render_label(scoped_label)).to match(%r(<span.+>#{scope}</span><span.+>#{name}</span><a.+>.*question-circle.*</a>)m)
end end
it 'does not include link to scoped label documentation for common labels' do it 'does not include link to scoped label documentation for common labels' do
expect(render_label(label)).to match(%r(<span.+>#{label.name}</span>$)) expect(render_label(label)).to match(%r(<span.+><span.+>#{label.name}</span></span>$)m)
end end
end end
...@@ -28,7 +30,7 @@ describe LabelsHelper do ...@@ -28,7 +30,7 @@ describe LabelsHelper do
end end
it 'does not include link to scoped documentation' do it 'does not include link to scoped documentation' do
expect(render_label(scoped_label)).to match(%r(<span.+>#{scoped_label.name}</span>$)) expect(render_label(scoped_label)).to match(%r(<span.+><span.+>#{scoped_label.name}</span></span>$)m)
end end
end end
end end
......
...@@ -16,14 +16,15 @@ describe Banzai::Filter::LabelReferenceFilter do ...@@ -16,14 +16,15 @@ describe Banzai::Filter::LabelReferenceFilter do
it 'includes link to scoped documentation' do it 'includes link to scoped documentation' do
doc = reference_filter("See #{scoped_label.to_reference}") doc = reference_filter("See #{scoped_label.to_reference}")
scope, name = scoped_label.name.split(Label::SCOPED_LABEL_SEPARATOR)
expect(doc.to_html).to match(%r(<a.+><span.+>#{scoped_label.name}</span></a><a.+>.*question-circle.*</a>)) expect(doc.to_html).to match(%r(<span.+><a.+><span.+>#{scope}</span><span.+>#{name}</span></a><a.+>.*question-circle.*</a></span>))
end end
it 'does not include link to scoped documentation for common labels' do it 'does not include link to scoped documentation for common labels' do
doc = reference_filter("See #{label.to_reference}") doc = reference_filter("See #{label.to_reference}")
expect(doc.to_html).to match(%r(<a.+><span.+>#{label.name}</span></a>$)) expect(doc.to_html).to match(%r(<span.+><a.+><span.+>#{label.name}</span></a></span>$))
end end
end end
...@@ -32,10 +33,10 @@ describe Banzai::Filter::LabelReferenceFilter do ...@@ -32,10 +33,10 @@ describe Banzai::Filter::LabelReferenceFilter do
stub_licensed_features(scoped_labels: false) stub_licensed_features(scoped_labels: false)
end end
it 'does not include link to scoped labels documentation' do it 'renders label as a common label' do
doc = reference_filter("See #{scoped_label.to_reference}") doc = reference_filter("See #{scoped_label.to_reference}")
expect(doc.to_html).to match(%r(<a.+><span.+>#{scoped_label.name}</span></a>$)) expect(doc.to_html).to match(%r(<span.+><a.+><span.+>#{scoped_label.name}</span></a></span>$))
end end
end end
end end
...@@ -93,23 +93,26 @@ module Banzai ...@@ -93,23 +93,26 @@ module Banzai
end end
presenter = object.present(issuable_subject: parent) presenter = object.present(issuable_subject: parent)
LabelsHelper.render_colored_label(presenter, label_suffix: label_suffix, title: tooltip_title(presenter)) LabelsHelper.render_colored_label(presenter, suffix: label_suffix)
end end
def tooltip_title(label) def wrap_link(link, label)
nil presenter = label.present(issuable_subject: project || group)
LabelsHelper.wrap_label_html(link, small: true, label: presenter)
end end
def full_path_ref?(matches) def full_path_ref?(matches)
matches[:namespace] && matches[:project] matches[:namespace] && matches[:project]
end end
def reference_class(type, tooltip: true)
super + ' gl-link gl-label-link'
end
def object_link_title(object, matches) def object_link_title(object, matches)
# use title of wrapped element instead presenter = object.present(issuable_subject: project || group)
nil LabelsHelper.label_tooltip_title(presenter)
end end
end end
end end
end end
Banzai::Filter::LabelReferenceFilter.prepend_if_ee('EE::Banzai::Filter::LabelReferenceFilter')
...@@ -37,7 +37,8 @@ module Banzai ...@@ -37,7 +37,8 @@ module Banzai
attributes[:reference_type] ||= self.class.reference_type attributes[:reference_type] ||= self.class.reference_type
attributes[:container] ||= 'body' attributes[:container] ||= 'body'
attributes[:placement] ||= 'bottom' attributes[:placement] ||= 'top'
attributes[:html] ||= 'true'
attributes.delete(:original) if context[:no_original_data] attributes.delete(:original) if context[:no_original_data]
attributes.map do |key, value| attributes.map do |key, value|
%Q(data-#{key.to_s.dasherize}="#{escape_once(value)}") %Q(data-#{key.to_s.dasherize}="#{escape_once(value)}")
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
module Gitlab module Gitlab
module MarkdownCache module MarkdownCache
# Increment this number every time the renderer changes its output # Increment this number every time the renderer changes its output
CACHE_COMMONMARK_VERSION = 18 CACHE_COMMONMARK_VERSION = 19
CACHE_COMMONMARK_VERSION_START = 10 CACHE_COMMONMARK_VERSION_START = 10
BaseError = Class.new(StandardError) BaseError = Class.new(StandardError)
......
...@@ -277,7 +277,7 @@ describe 'Issue Boards', :js do ...@@ -277,7 +277,7 @@ describe 'Issue Boards', :js do
wait_for_requests wait_for_requests
page.within('.value') do page.within('.value') do
expect(page).to have_selector('.badge', count: 2) expect(page).to have_selector('.gl-label-text', count: 2)
expect(page).to have_content(development.title) expect(page).to have_content(development.title)
expect(page).to have_content(stretch.title) expect(page).to have_content(stretch.title)
end end
...@@ -299,7 +299,7 @@ describe 'Issue Boards', :js do ...@@ -299,7 +299,7 @@ describe 'Issue Boards', :js do
find('.dropdown-menu-close-icon').click find('.dropdown-menu-close-icon').click
page.within('.value') do page.within('.value') do
expect(page).to have_selector('.badge', count: 3) expect(page).to have_selector('.gl-label-text', count: 3)
expect(page).to have_content(bug.title) expect(page).to have_content(bug.title)
end end
end end
...@@ -328,7 +328,7 @@ describe 'Issue Boards', :js do ...@@ -328,7 +328,7 @@ describe 'Issue Boards', :js do
find('.dropdown-menu-close-icon').click find('.dropdown-menu-close-icon').click
page.within('.value') do page.within('.value') do
expect(page).to have_selector('.badge', count: 4) expect(page).to have_selector('.gl-label-text', count: 4)
expect(page).to have_content(bug.title) expect(page).to have_content(bug.title)
expect(page).to have_content(regression.title) expect(page).to have_content(regression.title)
end end
...@@ -357,13 +357,13 @@ describe 'Issue Boards', :js do ...@@ -357,13 +357,13 @@ describe 'Issue Boards', :js do
find('.dropdown-menu-close-icon').click find('.dropdown-menu-close-icon').click
page.within('.value') do page.within('.value') do
expect(page).to have_selector('.badge', count: 1) expect(page).to have_selector('.gl-label-text', count: 1)
expect(page).not_to have_content(stretch.title) expect(page).not_to have_content(stretch.title)
end end
end end
# 'Development' label does not show since the card is in a 'Development' list label # 'Development' label does not show since the card is in a 'Development' list label
expect(card).to have_selector('.badge', count: 0) expect(card).to have_selector('.gl-label-text', count: 0)
expect(card).not_to have_content(stretch.title) expect(card).not_to have_content(stretch.title)
end end
......
...@@ -41,10 +41,10 @@ describe 'issuable list' do ...@@ -41,10 +41,10 @@ describe 'issuable list' do
visit_issuable_list(issuable_type) visit_issuable_list(issuable_type)
expect(all('.label-link')[0].text).to have_content('B') expect(all('.gl-label-text')[0].text).to have_content('B')
expect(all('.label-link')[1].text).to have_content('X') expect(all('.gl-label-text')[1].text).to have_content('X')
expect(all('.label-link')[2].text).to have_content('a') expect(all('.gl-label-text')[2].text).to have_content('a')
expect(all('.label-link')[3].text).to have_content('z') expect(all('.gl-label-text')[3].text).to have_content('z')
end end
end end
......
...@@ -332,7 +332,7 @@ describe 'Filter issues', :js do ...@@ -332,7 +332,7 @@ describe 'Filter issues', :js do
context 'issue label clicked' do context 'issue label clicked' do
it 'filters and displays in search bar' do it 'filters and displays in search bar' do
find('.issues-list .issue .issuable-main-info .issuable-info a .badge', text: multiple_words_label.title).click find('.issues-list .issue .issuable-main-info .issuable-info a .gl-label-text', text: multiple_words_label.title).click
expect_issues_list_count(1) expect_issues_list_count(1)
expect_tokens([label_token("\"#{multiple_words_label.title}\"")]) expect_tokens([label_token("\"#{multiple_words_label.title}\"")])
......
...@@ -161,9 +161,9 @@ describe 'Labels Hierarchy', :js do ...@@ -161,9 +161,9 @@ describe 'Labels Hierarchy', :js do
find('.btn-success').click find('.btn-success').click
expect(page.find('.issue-details h2.title')).to have_content('new created issue') expect(page.find('.issue-details h2.title')).to have_content('new created issue')
expect(page).to have_selector('span.badge', text: grandparent_group_label.title) expect(page).to have_selector('span.gl-label-text', text: grandparent_group_label.title)
expect(page).to have_selector('span.badge', text: parent_group_label.title) expect(page).to have_selector('span.gl-label-text', text: parent_group_label.title)
expect(page).to have_selector('span.badge', text: project_label_1.title) expect(page).to have_selector('span.gl-label-text', text: project_label_1.title)
end end
end end
......
...@@ -56,7 +56,7 @@ describe LabelsHelper do ...@@ -56,7 +56,7 @@ describe LabelsHelper do
context 'without subject' do context 'without subject' do
it "uses the label's project" do it "uses the label's project" do
expect(link_to_label(label_presenter)).to match %r{<a href="/#{label.project.full_path}/issues\?label_name%5B%5D=#{label.name}">.*</a>} expect(link_to_label(label_presenter)).to match %r{<a.*href="/#{label.project.full_path}/issues\?label_name%5B%5D=#{label.name}".*>.*</a>}m
end end
end end
...@@ -65,7 +65,7 @@ describe LabelsHelper do ...@@ -65,7 +65,7 @@ describe LabelsHelper do
let(:subject) { build(:project, namespace: namespace, name: 'bar3') } let(:subject) { build(:project, namespace: namespace, name: 'bar3') }
it 'links to project issues page' do it 'links to project issues page' do
expect(link_to_label(label_presenter)).to match %r{<a href="/foo3/bar3/issues\?label_name%5B%5D=#{label.name}">.*</a>} expect(link_to_label(label_presenter)).to match %r{<a.*href="/foo3/bar3/issues\?label_name%5B%5D=#{label.name}".*>.*</a>}m
end end
end end
...@@ -73,7 +73,7 @@ describe LabelsHelper do ...@@ -73,7 +73,7 @@ describe LabelsHelper do
let(:subject) { build(:group, name: 'bar') } let(:subject) { build(:group, name: 'bar') }
it 'links to group issues page' do it 'links to group issues page' do
expect(link_to_label(label_presenter)).to match %r{<a href="/groups/bar/-/issues\?label_name%5B%5D=#{label.name}">.*</a>} expect(link_to_label(label_presenter)).to match %r{<a.*href="/groups/bar/-/issues\?label_name%5B%5D=#{label.name}".*>.*</a>}m
end end
end end
...@@ -81,7 +81,7 @@ describe LabelsHelper do ...@@ -81,7 +81,7 @@ describe LabelsHelper do
['issue', :issue].each do |type| ['issue', :issue].each do |type|
context "set to #{type}" do context "set to #{type}" do
it 'links to correct page' do it 'links to correct page' do
expect(link_to_label(label_presenter, type: type)).to match %r{<a href="/#{label.project.full_path}/#{type.to_s.pluralize}\?label_name%5B%5D=#{label.name}">.*</a>} expect(link_to_label(label_presenter, type: type)).to match %r{<a.*href="/#{label.project.full_path}/#{type.to_s.pluralize}\?label_name%5B%5D=#{label.name}".*>.*</a>}m
end end
end end
end end
...@@ -89,7 +89,7 @@ describe LabelsHelper do ...@@ -89,7 +89,7 @@ describe LabelsHelper do
['merge_request', :merge_request].each do |type| ['merge_request', :merge_request].each do |type|
context "set to #{type}" do context "set to #{type}" do
it 'links to correct page' do it 'links to correct page' do
expect(link_to_label(label_presenter, type: type)).to match %r{<a href="/#{label.project.full_path}/-/#{type.to_s.pluralize}\?label_name%5B%5D=#{label.name}">.*</a>} expect(link_to_label(label_presenter, type: type)).to match %r{<a.*href="/#{label.project.full_path}/-/#{type.to_s.pluralize}\?label_name%5B%5D=#{label.name}".*>.*</a>}m
end end
end end
end end
...@@ -113,7 +113,7 @@ describe LabelsHelper do ...@@ -113,7 +113,7 @@ describe LabelsHelper do
context 'without block' do context 'without block' do
it 'uses render_colored_label as the link content' do it 'uses render_colored_label as the link content' do
expect(self).to receive(:render_colored_label) expect(self).to receive(:render_colored_label)
.with(label_presenter, tooltip: true).and_return('Foo') .with(label_presenter).and_return('Foo')
expect(link_to_label(label_presenter)).to match('Foo') expect(link_to_label(label_presenter)).to match('Foo')
end end
end end
......
...@@ -537,8 +537,10 @@ describe MarkupHelper do ...@@ -537,8 +537,10 @@ describe MarkupHelper do
it 'does not style a label that can not be accessed by current_user' do it 'does not style a label that can not be accessed by current_user' do
project = create(:project, :private) project = create(:project, :private)
label = create_and_format_label(project)
expect(create_and_format_label(project)).to eq("<p>#{label_title}</p>") expect(label).to include("~label_1")
expect(label).not_to match(/span class=.*style=.*/)
end end
end end
......
...@@ -28,7 +28,7 @@ describe Banzai::Filter::LabelReferenceFilter do ...@@ -28,7 +28,7 @@ describe Banzai::Filter::LabelReferenceFilter do
it 'includes default classes' do it 'includes default classes' do
doc = reference_filter("Label #{reference}") doc = reference_filter("Label #{reference}")
expect(doc.css('a').first.attr('class')).to eq 'gfm gfm-label has-tooltip' expect(doc.css('a').first.attr('class')).to eq 'gfm gfm-label has-tooltip gl-link gl-label-link'
end end
it 'includes a data-project attribute' do it 'includes a data-project attribute' do
...@@ -66,12 +66,12 @@ describe Banzai::Filter::LabelReferenceFilter do ...@@ -66,12 +66,12 @@ describe Banzai::Filter::LabelReferenceFilter do
describe 'label span element' do describe 'label span element' do
it 'includes default classes' do it 'includes default classes' do
doc = reference_filter("Label #{reference}") doc = reference_filter("Label #{reference}")
expect(doc.css('a span').first.attr('class')).to eq 'badge color-label has-tooltip' expect(doc.css('a span').first.attr('class')).to include 'gl-label-text'
end end
it 'includes a style attribute' do it 'includes a style attribute' do
doc = reference_filter("Label #{reference}") doc = reference_filter("Label #{reference}")
expect(doc.css('a span').first.attr('style')).to match(/\Abackground-color: #\h{6}; color: #\h{6}\z/) expect(doc.css('a span').first.attr('style')).to match(/\Abackground-color: #\h{6}\z/)
end end
end end
...@@ -85,7 +85,7 @@ describe Banzai::Filter::LabelReferenceFilter do ...@@ -85,7 +85,7 @@ describe Banzai::Filter::LabelReferenceFilter do
it 'links with adjacent text' do it 'links with adjacent text' do
doc = reference_filter("Label (#{reference}.)") doc = reference_filter("Label (#{reference}.)")
expect(doc.to_html).to match(%r(\(<a.+><span.+>#{label.name}</span></a>\.\))) expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>#{label.name}</span></a></span>\.\)))
end end
it 'ignores invalid label IDs' do it 'ignores invalid label IDs' do
...@@ -109,7 +109,7 @@ describe Banzai::Filter::LabelReferenceFilter do ...@@ -109,7 +109,7 @@ describe Banzai::Filter::LabelReferenceFilter do
it 'links with adjacent text' do it 'links with adjacent text' do
doc = reference_filter("Label (#{reference}).") doc = reference_filter("Label (#{reference}).")
expect(doc.to_html).to match(%r(\(<a.+><span.+>#{label.name}</span></a>\)\.)) expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>#{label.name}</span></a></span>\)\.))
end end
it 'ignores invalid label names' do it 'ignores invalid label names' do
...@@ -133,7 +133,7 @@ describe Banzai::Filter::LabelReferenceFilter do ...@@ -133,7 +133,7 @@ describe Banzai::Filter::LabelReferenceFilter do
it 'links with adjacent text' do it 'links with adjacent text' do
doc = reference_filter("Label (#{reference}).") doc = reference_filter("Label (#{reference}).")
expect(doc.to_html).to match(%r(\(<a.+><span.+>#{label.name}</span></a>\)\.)) expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>#{label.name}</span></a></span>\)\.))
end end
it 'ignores invalid label names' do it 'ignores invalid label names' do
...@@ -158,7 +158,7 @@ describe Banzai::Filter::LabelReferenceFilter do ...@@ -158,7 +158,7 @@ describe Banzai::Filter::LabelReferenceFilter do
it 'does not include trailing punctuation', :aggregate_failures do it 'does not include trailing punctuation', :aggregate_failures do
['.', ', ok?', '...', '?', '!', ': is that ok?'].each do |trailing_punctuation| ['.', ', ok?', '...', '?', '!', ': is that ok?'].each do |trailing_punctuation|
doc = filter("Label #{reference}#{trailing_punctuation}") doc = filter("Label #{reference}#{trailing_punctuation}")
expect(doc.to_html).to match(%r(<a.+><span.+>\?g\.fm&amp;</span></a>#{Regexp.escape(trailing_punctuation)})) expect(doc.to_html).to match(%r(<span.+><a.+><span.+>\?g\.fm&amp;</span></a></span>#{Regexp.escape(trailing_punctuation)}))
end end
end end
...@@ -184,7 +184,7 @@ describe Banzai::Filter::LabelReferenceFilter do ...@@ -184,7 +184,7 @@ describe Banzai::Filter::LabelReferenceFilter do
it 'links with adjacent text' do it 'links with adjacent text' do
doc = reference_filter("Label (#{reference}.)") doc = reference_filter("Label (#{reference}.)")
expect(doc.to_html).to match(%r(\(<a.+><span.+>#{label.name}</span></a>\.\))) expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>#{label.name}</span></a></span>\.\)))
end end
it 'ignores invalid label names' do it 'ignores invalid label names' do
...@@ -208,7 +208,7 @@ describe Banzai::Filter::LabelReferenceFilter do ...@@ -208,7 +208,7 @@ describe Banzai::Filter::LabelReferenceFilter do
it 'links with adjacent text' do it 'links with adjacent text' do
doc = reference_filter("Label (#{reference}.)") doc = reference_filter("Label (#{reference}.)")
expect(doc.to_html).to match(%r(\(<a.+><span.+>#{label.name}</span></a>\.\))) expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>#{label.name}</span></a></span>\.\)))
end end
it 'ignores invalid label names' do it 'ignores invalid label names' do
...@@ -232,7 +232,7 @@ describe Banzai::Filter::LabelReferenceFilter do ...@@ -232,7 +232,7 @@ describe Banzai::Filter::LabelReferenceFilter do
it 'links with adjacent text' do it 'links with adjacent text' do
doc = reference_filter("Label (#{reference}.)") doc = reference_filter("Label (#{reference}.)")
expect(doc.to_html).to match(%r(\(<a.+><span.+>g\.fm &amp; references\?</span></a>\.\))) expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>g\.fm &amp; references\?</span></a></span>\.\)))
end end
it 'ignores invalid label names' do it 'ignores invalid label names' do
...@@ -320,7 +320,7 @@ describe Banzai::Filter::LabelReferenceFilter do ...@@ -320,7 +320,7 @@ describe Banzai::Filter::LabelReferenceFilter do
it 'links with adjacent text' do it 'links with adjacent text' do
doc = reference_filter("Label (#{reference}.)") doc = reference_filter("Label (#{reference}.)")
expect(doc.to_html).to match(%r(\(<a.+>Label</a>\.\))) expect(doc.to_html).to match(%r(\(<span.+><a.+>Label</a></span>\.\)))
end end
it 'includes a data-project attribute' do it 'includes a data-project attribute' do
...@@ -358,7 +358,7 @@ describe Banzai::Filter::LabelReferenceFilter do ...@@ -358,7 +358,7 @@ describe Banzai::Filter::LabelReferenceFilter do
it 'links with adjacent text' do it 'links with adjacent text' do
doc = reference_filter("Label (#{reference}.)") doc = reference_filter("Label (#{reference}.)")
expect(doc.to_html).to match(%r(\(<a.+><span.+>#{group_label.name}</span></a>\.\))) expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>#{group_label.name}</span></a></span>\.\)))
end end
it 'ignores invalid label names' do it 'ignores invalid label names' do
...@@ -381,7 +381,7 @@ describe Banzai::Filter::LabelReferenceFilter do ...@@ -381,7 +381,7 @@ describe Banzai::Filter::LabelReferenceFilter do
it 'links with adjacent text' do it 'links with adjacent text' do
doc = reference_filter("Label (#{reference}.)") doc = reference_filter("Label (#{reference}.)")
expect(doc.to_html).to match(%r(\(<a.+><span.+>#{group_label.name}</span></a>\.\))) expect(doc.to_html).to match(%r(\(<span.+><a.+><span.+>#{group_label.name}</span></a></span>\.\)))
end end
it 'ignores invalid label names' do it 'ignores invalid label names' do
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment