Commit 934dabaf authored by Sean McGivern's avatar Sean McGivern

Merge branch 'keyval-labels' into 'master'

[CE] Add mutually exclusive labels

See merge request gitlab-org/gitlab-ce!26804
parents 39eb16aa ea383198
...@@ -119,7 +119,17 @@ class ListIssue { ...@@ -119,7 +119,17 @@ class ListIssue {
} }
const projectPath = this.project ? this.project.path : ''; const projectPath = this.project ? this.project.path : '';
return Vue.http.patch(`${this.path}.json`, data); return Vue.http.patch(`${this.path}.json`, data).then(({ body = {} } = {}) => {
/**
* Since post implementation of Scoped labels, server can reject
* same key-ed labels. To keep the UI and server Model consistent,
* we're just assigning labels that server echo's back to us when we
* PATCH the said object.
*/
if (body) {
this.labels = body.labels;
}
});
} }
} }
......
...@@ -11,6 +11,7 @@ import CreateLabelDropdown from './create_label'; ...@@ -11,6 +11,7 @@ import CreateLabelDropdown from './create_label';
import flash from './flash'; import flash from './flash';
import ModalStore from './boards/stores/modal_store'; import ModalStore from './boards/stores/modal_store';
import boardsStore from './boards/stores/boards_store'; import boardsStore from './boards/stores/boards_store';
import { isEE } from '~/lib/utils/common_utils';
export default class LabelsSelect { export default class LabelsSelect {
constructor(els, options = {}) { constructor(els, options = {}) {
...@@ -86,8 +87,9 @@ export default class LabelsSelect { ...@@ -86,8 +87,9 @@ export default class LabelsSelect {
return this.value; return this.value;
}) })
.get(); .get();
const scopedLabels = $dropdown.data('scopedLabels');
const scopedLabelsDocumentationLink = $dropdown.data('scopedLabelsDocumentationLink');
const { handleClick } = options; const { handleClick } = options;
$sidebarLabelTooltip.tooltip(); $sidebarLabelTooltip.tooltip();
if ($dropdown.closest('.dropdown').find('.dropdown-new-label').length) { if ($dropdown.closest('.dropdown').find('.dropdown-new-label').length) {
...@@ -132,8 +134,49 @@ export default class LabelsSelect { ...@@ -132,8 +134,49 @@ export default class LabelsSelect {
template = LabelsSelect.getLabelTemplate({ template = LabelsSelect.getLabelTemplate({
labels: data.labels, labels: data.labels,
issueUpdateURL, issueUpdateURL,
enableScopedLabels: scopedLabels,
scopedLabelsDocumentationLink,
}); });
labelCount = data.labels.length; labelCount = data.labels.length;
// EE Specific
if (isEE) {
/**
* For Scoped labels, the last label selected with the
* same key will be applied to the current issueable.
*
* If these are the labels - priority::1, priority::2; and if
* we apply them in the same order, only priority::2 will stick
* with the issuable.
*
* In the current dropdown implementation, we keep track of all
* the labels selected via a hidden DOM element. Since a User
* can select priority::1 and priority::2 at the same time, the
* DOM will have 2 hidden input and the dropdown will show both
* the items selected but in reality server only applied
* priority::2.
*
* We find all the labels then find all the labels server accepted
* and then remove the excess ones.
*/
const toRemoveIds = Array.from(
$form.find(`input[type="hidden"][name="${fieldName}"]`),
)
.map(el => el.value)
.map(Number);
data.labels.forEach(label => {
const index = toRemoveIds.indexOf(label.id);
toRemoveIds.splice(index, 1);
});
toRemoveIds.forEach(id => {
$form
.find(`input[type="hidden"][name="${fieldName}"][value="${id}"]`)
.last()
.remove();
});
}
} else { } else {
template = '<span class="no-value">None</span>'; template = '<span class="no-value">None</span>';
} }
...@@ -358,6 +401,7 @@ export default class LabelsSelect { ...@@ -358,6 +401,7 @@ export default class LabelsSelect {
} else { } else {
if (!$dropdown.hasClass('js-filter-bulk-update')) { if (!$dropdown.hasClass('js-filter-bulk-update')) {
saveLabelData(); saveLabelData();
$dropdown.data('glDropdown').clearMenu();
} }
} }
} }
...@@ -471,19 +515,62 @@ export default class LabelsSelect { ...@@ -471,19 +515,62 @@ export default class LabelsSelect {
// so best approach is to use traditional way of // so best approach is to use traditional way of
// concatenation // concatenation
// see: http://2ality.com/2016/05/template-literal-whitespace.html#joining-arrays // see: http://2ality.com/2016/05/template-literal-whitespace.html#joining-arrays
const tpl = _.template(
const labelTemplate = _.template(
[ [
'<% _.each(labels, function(label){ %>',
'<a href="<%- issueUpdateURL.slice(0, issueUpdateURL.lastIndexOf("/")) %>?label_name[]=<%- encodeURIComponent(label.title) %>">', '<a href="<%- issueUpdateURL.slice(0, issueUpdateURL.lastIndexOf("/")) %>?label_name[]=<%- encodeURIComponent(label.title) %>">',
'<span class="badge label has-tooltip color-label" title="<%- label.description %>" style="background-color: <%- label.color %>; color: <%- label.text_color %>;">', '<span class="badge label has-tooltip color-label" <%= linkAttrs %> title="<%= tooltipTitleTemplate({ label, isScopedLabel, enableScopedLabels, escapeStr }) %>" style="background-color: <%= escapeStr(label.color) %>; color: <%= escapeStr(label.text_color) %>;">',
'<%- label.title %>', '<%- label.title %>',
'</span>', '</span>',
'</a>', '</a>',
].join(''),
);
const infoIconTemplate = _.template(
[
'<a href="<%= scopedLabelsDocumentationLink %>" class="label scoped-label" target="_blank" rel="noopener">',
'<i class="fa fa-question-circle" style="background-color: <%= escapeStr(label.color) %>; color: <%= escapeStr(label.text_color) %>;"></i>',
'</a>',
].join(''),
);
const tooltipTitleTemplate = _.template(
[
'<% if (isScopedLabel(label) && enableScopedLabels) { %>',
"<span class='font-weight-bold scoped-label-tooltip-title'>Scoped label</span>",
'<br />',
'<%= escapeStr(label.description) %>',
'<% } else { %>',
'<%= escapeStr(label.description) %>',
'<% } %>',
].join(''),
);
const isScopedLabel = label => label.title.indexOf('::') !== -1;
const tpl = _.template(
[
'<% _.each(labels, function(label){ %>',
'<% if (isScopedLabel(label) && enableScopedLabels) { %>',
'<span class="d-inline-block position-relative scoped-label-wrapper">',
'<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>',
'<%= infoIconTemplate({ label, scopedLabelsDocumentationLink, escapeStr }) %>',
'</span>',
'<% } else { %>',
'<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, tooltipTitleTemplate, escapeStr, linkAttrs: "" }) %>',
'<% } %>',
'<% }); %>', '<% }); %>',
].join(''), ].join(''),
); );
return tpl(tplData); return tpl({
...tplData,
labelTemplate,
infoIconTemplate,
tooltipTitleTemplate,
isScopedLabel,
escapeStr: _.escape,
});
} }
bindEvents() { bindEvents() {
......
import Labels from '~/labels'; import Labels from 'ee_else_ce/labels';
document.addEventListener('DOMContentLoaded', () => new Labels()); document.addEventListener('DOMContentLoaded', () => new Labels());
import Labels from '~/labels'; import Labels from 'ee_else_ce/labels';
document.addEventListener('DOMContentLoaded', () => new Labels()); document.addEventListener('DOMContentLoaded', () => new Labels());
import Labels from '~/labels'; import Labels from 'ee_else_ce/labels';
document.addEventListener('DOMContentLoaded', () => new Labels()); document.addEventListener('DOMContentLoaded', () => new Labels());
import Labels from '~/labels'; import Labels from 'ee_else_ce/labels';
document.addEventListener('DOMContentLoaded', () => new Labels()); document.addEventListener('DOMContentLoaded', () => new Labels());
...@@ -75,6 +75,16 @@ export default { ...@@ -75,6 +75,16 @@ export default {
required: false, required: false,
default: false, default: false,
}, },
enableScopedLabels: {
type: Boolean,
require: false,
default: false,
},
scopedLabelsDocumentationLink: {
type: String,
require: false,
default: '#',
},
}, },
computed: { computed: {
hiddenInputName() { hiddenInputName() {
...@@ -123,7 +133,12 @@ export default { ...@@ -123,7 +133,12 @@ export default {
@onValueClick="handleCollapsedValueClick" @onValueClick="handleCollapsedValueClick"
/> />
<dropdown-title :can-edit="canEdit" /> <dropdown-title :can-edit="canEdit" />
<dropdown-value :labels="context.labels" :label-filter-base-path="labelFilterBasePath"> <dropdown-value
:labels="context.labels"
:label-filter-base-path="labelFilterBasePath"
:scoped-labels-documentation-link="scopedLabelsDocumentationLink"
:enable-scoped-labels="enableScopedLabels"
>
<slot></slot> <slot></slot>
</dropdown-value> </dropdown-value>
<div v-if="canEdit" class="selectbox js-selectbox" style="display: none;"> <div v-if="canEdit" class="selectbox js-selectbox" style="display: none;">
...@@ -142,6 +157,8 @@ export default { ...@@ -142,6 +157,8 @@ export default {
:namespace="namespace" :namespace="namespace"
:labels="context.labels" :labels="context.labels"
:show-extra-options="!showCreate" :show-extra-options="!showCreate"
:scoped-labels-documentation-link="scopedLabelsDocumentationLink"
:enable-scoped-labels="enableScopedLabels"
/> />
<div <div
class="dropdown-menu dropdown-select dropdown-menu-paging class="dropdown-menu dropdown-select dropdown-menu-paging
......
...@@ -31,6 +31,16 @@ export default { ...@@ -31,6 +31,16 @@ export default {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
enableScopedLabels: {
type: Boolean,
require: false,
default: false,
},
scopedLabelsDocumentationLink: {
type: String,
require: false,
default: '#',
},
}, },
computed: { computed: {
dropdownToggleText() { dropdownToggleText() {
...@@ -61,6 +71,8 @@ export default { ...@@ -61,6 +71,8 @@ export default {
:data-labels="labelsPath" :data-labels="labelsPath"
:data-namespace-path="namespace" :data-namespace-path="namespace"
:data-show-any="showExtraOptions" :data-show-any="showExtraOptions"
:data-scoped-labels="enableScopedLabels"
:data-scoped-labels-documentation-link="scopedLabelsDocumentationLink"
type="button" type="button"
class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal" class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal"
data-toggle="dropdown" data-toggle="dropdown"
......
<script> <script>
import tooltip from '~/vue_shared/directives/tooltip'; import DropdownValueScopedLabel from './dropdown_value_scoped_label.vue';
import DropdownValueRegularLabel from './dropdown_value_regular_label.vue';
export default { export default {
directives: { components: {
tooltip, DropdownValueScopedLabel,
DropdownValueRegularLabel,
}, },
props: { props: {
labels: { labels: {
...@@ -14,6 +16,16 @@ export default { ...@@ -14,6 +16,16 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
enableScopedLabels: {
type: Boolean,
required: false,
default: false,
},
scopedLabelsDocumentationLink: {
type: String,
required: false,
default: '#',
},
}, },
computed: { computed: {
isEmpty() { isEmpty() {
...@@ -30,6 +42,12 @@ export default { ...@@ -30,6 +42,12 @@ export default {
backgroundColor: label.color, backgroundColor: label.color,
}; };
}, },
scopedLabelsDescription({ description = '' }) {
return `<span class="font-weight-bold scoped-label-tooltip-title">Scoped label</span><br />${description}`;
},
showScopedLabels({ title = '' }) {
return this.enableScopedLabels && title.indexOf('::') !== -1;
},
}, },
}; };
</script> </script>
...@@ -44,17 +62,24 @@ export default { ...@@ -44,17 +62,24 @@ export default {
<span v-if="isEmpty" class="text-secondary"> <span v-if="isEmpty" class="text-secondary">
<slot>{{ __('None') }}</slot> <slot>{{ __('None') }}</slot>
</span> </span>
<a v-for="label in labels" v-else :key="label.id" :href="labelFilterUrl(label)">
<span <template v-for="label in labels" v-else>
v-tooltip <dropdown-value-scoped-label
:style="labelStyle(label)" v-if="showScopedLabels(label)"
:title="label.description" :key="label.id"
class="badge color-label" :label="label"
data-placement="bottom" :label-filter-url="labelFilterUrl(label)"
data-container="body" :label-style="labelStyle(label)"
> :scoped-labels-documentation-link="scopedLabelsDocumentationLink"
{{ label.title }} />
</span>
</a> <dropdown-value-regular-label
v-else
:key="label.id"
:label="label"
:label-filter-url="labelFilterUrl(label)"
:label-style="labelStyle(label)"
/>
</template>
</div> </div>
</template> </template>
<script>
import { GlLink, GlTooltip } from '@gitlab/ui';
export default {
components: {
GlTooltip,
GlLink,
},
props: {
label: {
type: Object,
required: true,
},
labelStyle: {
type: Object,
required: true,
},
labelFilterUrl: {
type: String,
required: true,
},
},
};
</script>
<template>
<a ref="regularLabelRef" :href="labelFilterUrl">
<span :style="labelStyle" class="badge color-label">
{{ label.title }}
</span>
<gl-tooltip :target="() => $refs.regularLabelRef" placement="top" boundary="viewport">
{{ label.description }}
</gl-tooltip>
</a>
</template>
<script>
import { GlLink, GlTooltip } from '@gitlab/ui';
export default {
components: {
GlTooltip,
GlLink,
},
props: {
label: {
type: Object,
required: true,
},
labelStyle: {
type: Object,
required: true,
},
scopedLabelsDocumentationLink: {
type: String,
required: true,
},
labelFilterUrl: {
type: String,
required: true,
},
},
};
</script>
<template>
<span class="d-inline-block position-relative scoped-label-wrapper">
<a :href="labelFilterUrl">
<span :ref="`labelTitleRef`" :style="labelStyle" class="badge color-label label">
{{ label.title }}
</span>
<gl-tooltip :target="() => $refs.labelTitleRef" placement="top" boundary="viewport">
<span class="font-weight-bold scoped-label-tooltip-title">{{ __('Scoped label') }}</span
><br />
{{ label.description }}
</gl-tooltip>
</a>
<gl-link :href="scopedLabelsDocumentationLink" target="_blank" class="label scoped-label"
><i class="fa fa-question-circle" :style="labelStyle"></i
></gl-link>
</span>
</template>
...@@ -110,6 +110,16 @@ ...@@ -110,6 +110,16 @@
font-size: 0; font-size: 0;
margin-bottom: -5px; margin-bottom: -5px;
} }
.scoped-label-wrapper {
.color-label {
padding-right: $gl-padding-24;
}
.scoped-label {
right: 12px;
}
}
} }
.right-sidebar { .right-sidebar {
......
...@@ -402,3 +402,39 @@ ...@@ -402,3 +402,39 @@
.priority-labels-empty-state .svg-content img { .priority-labels-empty-state .svg-content img {
max-width: $priority-label-empty-state-width; max-width: $priority-label-empty-state-width;
} }
.scoped-label-tooltip-title {
color: $indigo-300;
}
.scoped-label-wrapper {
&.label-link .color-label a {
color: inherit;
}
.color-label {
padding-right: $gl-padding-24;
}
.scoped-label {
position: absolute;
top: 4px;
right: 8px;
padding: 0;
margin: 0;
line-height: $gl-line-height;
}
}
// Label inside title of Delete Label Modal
.modal-header .page-title {
.scoped-label-wrapper {
.scoped-label {
line-height: 20px;
}
span.color-label {
padding-right: $gl-padding-24;
}
}
}
...@@ -7,6 +7,9 @@ module IssuableActions ...@@ -7,6 +7,9 @@ module IssuableActions
included do included do
before_action :authorize_destroy_issuable!, only: :destroy before_action :authorize_destroy_issuable!, only: :destroy
before_action :authorize_admin_issuable!, only: :bulk_update before_action :authorize_admin_issuable!, only: :bulk_update
before_action only: :show do
push_frontend_feature_flag(:scoped_labels, default_enabled: true)
end
end end
def permitted_keys def permitted_keys
......
...@@ -46,7 +46,7 @@ module LabelsHelper ...@@ -46,7 +46,7 @@ module LabelsHelper
if block_given? if block_given?
link_to link, class: css_class, &block link_to link, class: css_class, &block
else else
link_to render_colored_label(label, tooltip: tooltip), link, class: css_class render_label(label, tooltip: tooltip, link: link, css: css_class)
end end
end end
...@@ -78,19 +78,33 @@ module LabelsHelper ...@@ -78,19 +78,33 @@ module LabelsHelper
end end
end end
def render_colored_label(label, label_suffix = '', tooltip: true) def render_label(label, tooltip: true, link: nil, css: nil)
# if scoped label is used then EE wraps label tag with scoped label
# doc link
html = render_colored_label(label, tooltip: tooltip)
html = link_to(html, link, class: css) if link
html
end
def render_colored_label(label, label_suffix: '', tooltip: true, title: nil)
text_color = text_color_for_bg(label.color) text_color = text_color_for_bg(label.color)
title ||= tooltip ? label_tooltip_title(label) : ''
# Intentionally not using content_tag here so that this method can be called # Intentionally not using content_tag here so that this method can be called
# by LabelReferenceFilter # by LabelReferenceFilter
span = %(<span class="badge color-label #{"has-tooltip" if tooltip}" ) + span = %(<span class="badge color-label #{"has-tooltip" if tooltip}" ) +
%(style="background-color: #{label.color}; color: #{text_color}" ) + %(data-html="true" style="background-color: #{label.color}; color: #{text_color}" ) +
%(title="#{escape_once(label.description)}" data-container="body">) + %(title="#{escape_once(title)}" data-container="body">) +
%(#{escape_once(label.name)}#{label_suffix}</span>) %(#{escape_once(label.name)}#{label_suffix}</span>)
span.html_safe span.html_safe
end end
def label_tooltip_title(label)
label.description
end
def suggested_colors def suggested_colors
[ [
'#0033CC', '#0033CC',
...@@ -231,6 +245,37 @@ module LabelsHelper ...@@ -231,6 +245,37 @@ module LabelsHelper
labels.sort_by(&:title) labels.sort_by(&:title)
end end
def label_dropdown_data(project, opts = {})
{
toggle: "dropdown",
field_name: opts[:field_name] || "label_name[]",
show_no: "true",
show_any: "true",
project_id: project&.try(:id),
namespace_path: project&.try(:namespace)&.try(:full_path),
project_path: project&.try(:path)
}.merge(opts)
end
def sidebar_label_dropdown_data(issuable_type, issuable_sidebar)
label_dropdown_data(nil, {
default_label: "Labels",
field_name: "#{issuable_type}[label_names][]",
ability_name: issuable_type,
namespace_path: issuable_sidebar[:namespace_path],
project_path: issuable_sidebar[:project_path],
issue_update: issuable_sidebar[:issuable_json_path],
labels: issuable_sidebar[:project_labels_path],
display: 'static'
})
end
def label_from_hash(hash)
klass = hash[:group_id] ? GroupLabel : ProjectLabel
klass.new(hash.slice(:color, :description, :title, :group_id, :project_id))
end
# Required for Banzai::Filter::LabelReferenceFilter # Required for Banzai::Filter::LabelReferenceFilter
module_function :render_colored_label, :text_color_for_bg, :escape_once module_function :render_colored_label, :text_color_for_bg, :escape_once, :label_tooltip_title
end end
...@@ -4,7 +4,7 @@ class GlobalLabel ...@@ -4,7 +4,7 @@ class GlobalLabel
attr_accessor :title, :labels attr_accessor :title, :labels
alias_attribute :name, :title alias_attribute :name, :title
delegate :color, :text_color, :description, to: :@first_label delegate :color, :text_color, :description, :scoped_label?, to: :@first_label
def for_display def for_display
@first_label @first_label
......
...@@ -107,12 +107,13 @@ class IssuableBaseService < BaseService ...@@ -107,12 +107,13 @@ class IssuableBaseService < BaseService
@labels_service ||= ::Labels::AvailableLabelsService.new(current_user, parent, params) @labels_service ||= ::Labels::AvailableLabelsService.new(current_user, parent, params)
end end
def process_label_ids(attributes, existing_label_ids: nil) def process_label_ids(attributes, existing_label_ids: nil, extra_label_ids: [])
label_ids = attributes.delete(:label_ids) label_ids = attributes.delete(:label_ids)
add_label_ids = attributes.delete(:add_label_ids) add_label_ids = attributes.delete(:add_label_ids)
remove_label_ids = attributes.delete(:remove_label_ids) remove_label_ids = attributes.delete(:remove_label_ids)
new_label_ids = existing_label_ids || label_ids || [] new_label_ids = existing_label_ids || label_ids || []
new_label_ids |= extra_label_ids
if add_label_ids.blank? && remove_label_ids.blank? if add_label_ids.blank? && remove_label_ids.blank?
new_label_ids = label_ids if label_ids new_label_ids = label_ids if label_ids
...@@ -147,7 +148,7 @@ class IssuableBaseService < BaseService ...@@ -147,7 +148,7 @@ class IssuableBaseService < BaseService
params.delete(:state_event) params.delete(:state_event)
params[:author] ||= current_user params[:author] ||= current_user
params[:label_ids] = issuable.label_ids.to_a + process_label_ids(params) params[:label_ids] = process_label_ids(params, extra_label_ids: issuable.label_ids.to_a)
issuable.assign_attributes(params) issuable.assign_attributes(params)
......
...@@ -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_colored_label(label, tooltip: false)} ? %h3.page-title Delete #{render_label(label, tooltip: false)} ?
%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;
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
- if defined?(@project) - if defined?(@project)
= link_to_label(label, subject: @project, tooltip: false) = link_to_label(label, subject: @project, tooltip: false)
- else - else
= render_colored_label(label, tooltip: false) = render_label(label, tooltip: false)
.label-description .label-description
.append-right-default.prepend-left-default .append-right-default.prepend-left-default
- if label.description.present? - if label.description.present?
......
...@@ -21,13 +21,7 @@ ...@@ -21,13 +21,7 @@
%button.dropdown-menu-toggle.js-label-select.js-multiselect.js-issue-board-sidebar{ type: "button", %button.dropdown-menu-toggle.js-label-select.js-multiselect.js-issue-board-sidebar{ type: "button",
":data-selected" => "selectedLabels", ":data-selected" => "selectedLabels",
":data-labels" => "issue.assignableLabelsEndpoint", ":data-labels" => "issue.assignableLabelsEndpoint",
data: { toggle: "dropdown", data: label_dropdown_data(@project, namespace_path: @namespace_path, field_name: "issue[label_names][]") }
field_name: "issue[label_names][]",
show_no: "true",
show_any: "true",
project_id: @project&.try(:id),
namespace_path: @namespace_path,
project_path: @project.try(:path) } }
%span.dropdown-toggle-text %span.dropdown-toggle-text
{{ labelDropdownTitle }} {{ labelDropdownTitle }}
= icon('chevron-down') = icon('chevron-down')
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
- classes = local_assigns.fetch(:classes, []) - classes = local_assigns.fetch(:classes, [])
- selected = local_assigns.fetch(:selected, nil) - selected = local_assigns.fetch(:selected, nil)
- dropdown_title = local_assigns.fetch(:dropdown_title, "Filter by label") - dropdown_title = local_assigns.fetch(:dropdown_title, "Filter by label")
- dropdown_data = {toggle: 'dropdown', field_name: "label_name[]", show_no: "true", show_any: "true", namespace_path: @project.try(:namespace).try(:full_path), project_path: @project.try(:path), labels: labels_filter_path_with_defaults, default_label: "Labels"} - dropdown_data = label_dropdown_data(@project, labels: labels_filter_path_with_defaults, default_label: "Labels")
- dropdown_data.merge!(data_options) - dropdown_data.merge!(data_options)
- label_name = local_assigns.fetch(:label_name, "Labels") - label_name = local_assigns.fetch(:label_name, "Labels")
- no_default_styles = local_assigns.fetch(:no_default_styles, false) - no_default_styles = local_assigns.fetch(:no_default_styles, false)
......
...@@ -105,10 +105,8 @@ ...@@ -105,10 +105,8 @@
= link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right' = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right'
.value.issuable-show-labels.dont-hide.hide-collapsed.qa-labels-block{ class: ("has-labels" if selected_labels.any?) } .value.issuable-show-labels.dont-hide.hide-collapsed.qa-labels-block{ class: ("has-labels" if selected_labels.any?) }
- if selected_labels.any? - if selected_labels.any?
- selected_labels.each do |label| - selected_labels.each do |label_hash|
= link_to sidebar_label_filter_path(issuable_sidebar[:project_issuables_path], label[:title]) do = render_label(label_from_hash(label_hash), link: sidebar_label_filter_path(issuable_sidebar[:project_issuables_path], label_hash[:title]))
%span.badge.color-label.has-tooltip{ style: "background-color: #{label[:color]}; color: #{label[:text_color]}", title: label[:description], data: { container: "body" } }
= label[:title]
- else - else
%span.no-value %span.no-value
= _('None') = _('None')
...@@ -116,7 +114,7 @@ ...@@ -116,7 +114,7 @@
- selected_labels.each do |label| - selected_labels.each do |label|
= hidden_field_tag "#{issuable_type}[label_names][]", label[:id], id: nil = hidden_field_tag "#{issuable_type}[label_names][]", label[:id], id: nil
.dropdown .dropdown
%button.dropdown-menu-toggle.js-label-select.js-multiselect.js-label-sidebar-dropdown{ type: "button", data: {toggle: "dropdown", default_label: "Labels", field_name: "#{issuable_type}[label_names][]", ability_name: issuable_type, show_no: "true", show_any: "true", namespace_path: issuable_sidebar[:namespace_path], project_path: issuable_sidebar[:project_path], issue_update: issuable_sidebar[:issuable_json_path], labels: issuable_sidebar[:project_labels_path], display: 'static' } } %button.dropdown-menu-toggle.js-label-select.js-multiselect.js-label-sidebar-dropdown{ type: "button", data: sidebar_label_dropdown_data(issuable_type, issuable_sidebar) }
%span.dropdown-toggle-text{ class: ("is-default" if selected_labels.empty?) } %span.dropdown-toggle-text{ class: ("is-default" if selected_labels.empty?) }
= multi_label_name(selected_labels, "Labels") = multi_label_name(selected_labels, "Labels")
= icon('chevron-down', 'aria-hidden': 'true') = icon('chevron-down', 'aria-hidden': 'true')
......
...@@ -4,7 +4,9 @@ ...@@ -4,7 +4,9 @@
.form-group.row .form-group.row
= f.label :title, class: 'col-form-label col-sm-2' = f.label :title, class: 'col-form-label col-sm-2'
.col-sm-10 .col-sm-10
= f.text_field :title, class: "form-control qa-label-title", required: true, autofocus: true = f.text_field :title, class: "form-control js-label-title qa-label-title", required: true, autofocus: true
= render_if_exists 'shared/labels/create_label_help_text'
.form-group.row .form-group.row
= f.label :description, class: 'col-form-label col-sm-2' = f.label :description, class: 'col-form-label col-sm-2'
.col-sm-10 .col-sm-10
......
...@@ -21,8 +21,7 @@ ...@@ -21,8 +21,7 @@
%span.issuable-number= issuable.to_reference %span.issuable-number= issuable.to_reference
- labels.each do |label| - labels.each do |label|
= link_to polymorphic_path(issuable_type_args, { milestone_title: @milestone.title, label_name: label.title, state: 'all' }) do = render_label(label, link: polymorphic_path(issuable_type_args, { milestone_title: @milestone.title, label_name: label.title, state: 'all' }))
- render_colored_label(label)
%span.assignee-icon %span.assignee-icon
- assignees.each do |assignee| - assignees.each do |assignee|
......
...@@ -5,8 +5,7 @@ ...@@ -5,8 +5,7 @@
%li.is-not-draggable %li.is-not-draggable
%span.label-row %span.label-row
%span.label-name %span.label-name
= link_to milestones_label_path(options) do = render_label(label, tooltip: false, link: milestones_label_path(options))
- render_colored_label(label, tooltip: false)
%span.prepend-description-left %span.prepend-description-left
= markdown_field(label, :description) = markdown_field(label, :description)
......
...@@ -195,15 +195,21 @@ module Banzai ...@@ -195,15 +195,21 @@ module Banzai
content = link_content || object_link_text(object, matches) content = link_content || object_link_text(object, matches)
%(<a href="#{url}" #{data} link = %(<a href="#{url}" #{data}
title="#{escape_once(title)}" title="#{escape_once(title)}"
class="#{klass}">#{content}</a>) class="#{klass}">#{content}</a>)
wrap_link(link, object)
else else
match match
end end
end end
end end
def wrap_link(link, object)
link
end
def data_attributes_for(text, parent, object, link_content: false, link_reference: false) def data_attributes_for(text, parent, object, link_content: false, link_reference: false)
object_parent_type = parent.is_a?(Group) ? :group : :project object_parent_type = parent.is_a?(Group) ? :group : :project
......
...@@ -91,7 +91,11 @@ module Banzai ...@@ -91,7 +91,11 @@ module Banzai
label_suffix = " <i>in #{reference}</i>" if reference.present? label_suffix = " <i>in #{reference}</i>" if reference.present?
end end
LabelsHelper.render_colored_label(object, label_suffix) LabelsHelper.render_colored_label(object, label_suffix: label_suffix, title: tooltip_title(object))
end
def tooltip_title(label)
nil
end end
def full_path_ref?(matches) def full_path_ref?(matches)
......
...@@ -7031,6 +7031,9 @@ msgstr "" ...@@ -7031,6 +7031,9 @@ msgstr ""
msgid "Scope not supported with disabled 'users_search' feature!" msgid "Scope not supported with disabled 'users_search' feature!"
msgstr "" msgstr ""
msgid "Scoped label"
msgstr ""
msgid "Scroll down to <strong>Google Code Project Hosting</strong> and enable the switch on the right." msgid "Scroll down to <strong>Google Code Project Hosting</strong> and enable the switch on the right."
msgstr "" msgstr ""
......
...@@ -51,6 +51,5 @@ ...@@ -51,6 +51,5 @@
"toggle_subscription_path": { "type": "string" }, "toggle_subscription_path": { "type": "string" },
"move_issue_path": { "type": "string" }, "move_issue_path": { "type": "string" },
"projects_autocomplete_path": { "type": "string" } "projects_autocomplete_path": { "type": "string" }
}, }
"additionalProperties": false
} }
...@@ -13,40 +13,104 @@ const mockLabels = [ ...@@ -13,40 +13,104 @@ const mockLabels = [
}, },
]; ];
const mockScopedLabels = [
{
id: 27,
title: 'Foo::Bar',
description: 'Foobar',
color: '#333ABC',
text_color: '#FFFFFF',
},
];
describe('LabelsSelect', () => { describe('LabelsSelect', () => {
describe('getLabelTemplate', () => { describe('getLabelTemplate', () => {
const label = mockLabels[0]; describe('when normal label is present', () => {
let $labelEl; const label = mockLabels[0];
let $labelEl;
beforeEach(() => {
$labelEl = $(
LabelsSelect.getLabelTemplate({
labels: mockLabels,
issueUpdateURL: mockUrl,
}),
);
});
it('generated label item template has correct label URL', () => { beforeEach(() => {
expect($labelEl.attr('href')).toBe('/foo/bar?label_name[]=Foo%20Label'); $labelEl = $(
}); LabelsSelect.getLabelTemplate({
labels: mockLabels,
issueUpdateURL: mockUrl,
enableScopedLabels: true,
scopedLabelsDocumentationLink: 'docs-link',
}),
);
});
it('generated label item template has correct label title', () => { it('generated label item template has correct label URL', () => {
expect($labelEl.find('span.label').text()).toBe(label.title); expect($labelEl.attr('href')).toBe('/foo/bar?label_name[]=Foo%20Label');
}); });
it('generated label item template has label description as title attribute', () => { it('generated label item template has correct label title', () => {
expect($labelEl.find('span.label').attr('title')).toBe(label.description); expect($labelEl.find('span.label').text()).toBe(label.title);
}); });
it('generated label item template has label description as title attribute', () => {
expect($labelEl.find('span.label').attr('title')).toBe(label.description);
});
it('generated label item template has correct label styles', () => { it('generated label item template has correct label styles', () => {
expect($labelEl.find('span.label').attr('style')).toBe( expect($labelEl.find('span.label').attr('style')).toBe(
`background-color: ${label.color}; color: ${label.text_color};`, `background-color: ${label.color}; color: ${label.text_color};`,
); );
});
it('generated label item has a badge class', () => {
expect($labelEl.find('span').hasClass('badge')).toEqual(true);
});
it('generated label item template does not have scoped-label class', () => {
expect($labelEl.find('.scoped-label')).toHaveLength(0);
});
}); });
it('generated label item has a badge class', () => { describe('when scoped label is present', () => {
expect($labelEl.find('span').hasClass('badge')).toEqual(true); const label = mockScopedLabels[0];
let $labelEl;
beforeEach(() => {
$labelEl = $(
LabelsSelect.getLabelTemplate({
labels: mockScopedLabels,
issueUpdateURL: mockUrl,
enableScopedLabels: true,
scopedLabelsDocumentationLink: 'docs-link',
}),
);
});
it('generated label item template has correct label URL', () => {
expect($labelEl.find('a').attr('href')).toBe('/foo/bar?label_name[]=Foo%3A%3ABar');
});
it('generated label item template has correct label title', () => {
expect($labelEl.find('span.label').text()).toBe(label.title);
});
it('generated label item template has html flag as true', () => {
expect($labelEl.find('span.label').attr('data-html')).toBe('true');
});
it('generated label item template has question icon', () => {
expect($labelEl.find('i.fa-question-circle')).toHaveLength(1);
});
it('generated label item template has scoped-label class', () => {
expect($labelEl.find('.scoped-label')).toHaveLength(1);
});
it('generated label item template has correct label styles', () => {
expect($labelEl.find('span.label').attr('style')).toBe(
`background-color: ${label.color}; color: ${label.text_color};`,
);
});
it('generated label item has a badge class', () => {
expect($labelEl.find('span').hasClass('badge')).toEqual(true);
});
}); });
}); });
}); });
...@@ -249,4 +249,24 @@ describe LabelsHelper do ...@@ -249,4 +249,24 @@ describe LabelsHelper do
.to match_array([label2, label4, label1, label3]) .to match_array([label2, label4, label1, label3])
end end
end end
describe 'label_from_hash' do
it 'builds a group label with whitelisted attributes' do
label = label_from_hash({ title: 'foo', color: 'bar', id: 1, group_id: 1 })
expect(label).to be_a(GroupLabel)
expect(label.id).to be_nil
expect(label.title).to eq('foo')
expect(label.color).to eq('bar')
end
it 'builds a project label with whitelisted attributes' do
label = label_from_hash({ title: 'foo', color: 'bar', id: 1, project_id: 1 })
expect(label).to be_a(ProjectLabel)
expect(label.id).to be_nil
expect(label.title).to eq('foo')
expect(label.color).to eq('bar')
end
end
end end
...@@ -178,6 +178,7 @@ describe('Issue model', () => { ...@@ -178,6 +178,7 @@ describe('Issue model', () => {
spyOn(Vue.http, 'patch').and.callFake((url, data) => { spyOn(Vue.http, 'patch').and.callFake((url, data) => {
expect(data.issue.assignee_ids).toEqual([1]); expect(data.issue.assignee_ids).toEqual([1]);
done(); done();
return Promise.resolve();
}); });
issue.update('url'); issue.update('url');
...@@ -187,6 +188,7 @@ describe('Issue model', () => { ...@@ -187,6 +188,7 @@ describe('Issue model', () => {
spyOn(Vue.http, 'patch').and.callFake((url, data) => { spyOn(Vue.http, 'patch').and.callFake((url, data) => {
expect(data.issue.assignee_ids).toEqual([0]); expect(data.issue.assignee_ids).toEqual([0]);
done(); done();
return Promise.resolve();
}); });
issue.removeAllAssignees(); issue.removeAllAssignees();
......
...@@ -45,12 +45,21 @@ describe('DropdownButtonComponent', () => { ...@@ -45,12 +45,21 @@ describe('DropdownButtonComponent', () => {
}); });
const vmMoreLabels = createComponent(mockMoreLabels); const vmMoreLabels = createComponent(mockMoreLabels);
expect(vmMoreLabels.dropdownToggleText).toBe('Foo Label +1 more'); expect(vmMoreLabels.dropdownToggleText).toBe(
`Foo Label +${mockMoreLabels.labels.length - 1} more`,
);
vmMoreLabels.$destroy(); vmMoreLabels.$destroy();
}); });
it('returns first label name when `labels` prop has only one item present', () => { it('returns first label name when `labels` prop has only one item present', () => {
expect(vm.dropdownToggleText).toBe('Foo Label'); const singleLabel = Object.assign({}, componentConfig, {
labels: [mockLabels[0]],
});
const vmSingleLabel = createComponent(singleLabel);
expect(vmSingleLabel.dropdownToggleText).toBe(mockLabels[0].title);
vmSingleLabel.$destroy();
}); });
}); });
}); });
...@@ -73,7 +82,7 @@ describe('DropdownButtonComponent', () => { ...@@ -73,7 +82,7 @@ describe('DropdownButtonComponent', () => {
const dropdownToggleTextEl = vm.$el.querySelector('.dropdown-toggle-text'); const dropdownToggleTextEl = vm.$el.querySelector('.dropdown-toggle-text');
expect(dropdownToggleTextEl).not.toBeNull(); expect(dropdownToggleTextEl).not.toBeNull();
expect(dropdownToggleTextEl.innerText.trim()).toBe('Foo Label'); expect(dropdownToggleTextEl.innerText.trim()).toBe('Foo Label +1 more');
}); });
it('renders dropdown button icon', () => { it('renders dropdown button icon', () => {
......
...@@ -35,9 +35,12 @@ describe('DropdownValueCollapsedComponent', () => { ...@@ -35,9 +35,12 @@ describe('DropdownValueCollapsedComponent', () => {
}); });
it('returns labels names separated by coma when `labels` prop has more than one item', () => { it('returns labels names separated by coma when `labels` prop has more than one item', () => {
const vmMoreLabels = createComponent(mockLabels.concat(mockLabels)); const labels = mockLabels.concat(mockLabels);
const vmMoreLabels = createComponent(labels);
expect(vmMoreLabels.labelsList).toBe('Foo Label, Foo Label'); const expectedText = labels.map(label => label.title).join(', ');
expect(vmMoreLabels.labelsList).toBe(expectedText);
vmMoreLabels.$destroy(); vmMoreLabels.$destroy();
}); });
...@@ -49,14 +52,19 @@ describe('DropdownValueCollapsedComponent', () => { ...@@ -49,14 +52,19 @@ describe('DropdownValueCollapsedComponent', () => {
const vmMoreLabels = createComponent(mockMoreLabels); const vmMoreLabels = createComponent(mockMoreLabels);
expect(vmMoreLabels.labelsList).toBe( const expectedText = `${mockMoreLabels
'Foo Label, Foo Label, Foo Label, Foo Label, Foo Label, and 2 more', .slice(0, 5)
); .map(label => label.title)
.join(', ')}, and ${mockMoreLabels.length - 5} more`;
expect(vmMoreLabels.labelsList).toBe(expectedText);
vmMoreLabels.$destroy(); vmMoreLabels.$destroy();
}); });
it('returns first label name when `labels` prop has only one item present', () => { it('returns first label name when `labels` prop has only one item present', () => {
expect(vm.labelsList).toBe('Foo Label'); const text = mockLabels.map(label => label.title).join(', ');
expect(vm.labelsList).toBe(text);
}); });
}); });
}); });
......
import Vue from 'vue'; import Vue from 'vue';
import $ from 'jquery';
import dropdownValueComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value.vue'; import dropdownValueComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value.vue';
...@@ -15,6 +16,7 @@ const createComponent = ( ...@@ -15,6 +16,7 @@ const createComponent = (
return mountComponent(Component, { return mountComponent(Component, {
labels, labels,
labelFilterBasePath, labelFilterBasePath,
enableScopedLabels: true,
}); });
}; };
...@@ -67,6 +69,26 @@ describe('DropdownValueComponent', () => { ...@@ -67,6 +69,26 @@ describe('DropdownValueComponent', () => {
expect(styleObj.backgroundColor).toBe(label.color); expect(styleObj.backgroundColor).toBe(label.color);
}); });
}); });
describe('scopedLabelsDescription', () => {
it('returns html for tooltip', () => {
const html = vm.scopedLabelsDescription(mockLabels[1]);
const $el = $.parseHTML(html);
expect($el[0]).toHaveClass('scoped-label-tooltip-title');
expect($el[2].textContent).toEqual(mockLabels[1].description);
});
});
describe('showScopedLabels', () => {
it('returns true if the label is scoped label', () => {
expect(vm.showScopedLabels(mockLabels[1])).toBe(true);
});
it('returns false when label is a regular label', () => {
expect(vm.showScopedLabels(mockLabels[0])).toBe(false);
});
});
}); });
describe('template', () => { describe('template', () => {
...@@ -91,15 +113,25 @@ describe('DropdownValueComponent', () => { ...@@ -91,15 +113,25 @@ describe('DropdownValueComponent', () => {
); );
}); });
it('renders label element with tooltip and styles based on label details', () => { it('renders label element and styles based on label details', () => {
const labelEl = vm.$el.querySelector('a span.badge.color-label'); const labelEl = vm.$el.querySelector('a span.badge.color-label');
expect(labelEl).not.toBeNull(); expect(labelEl).not.toBeNull();
expect(labelEl.dataset.placement).toBe('bottom');
expect(labelEl.dataset.container).toBe('body');
expect(labelEl.dataset.originalTitle).toBe(mockLabels[0].description);
expect(labelEl.getAttribute('style')).toBe('background-color: rgb(186, 218, 85);'); expect(labelEl.getAttribute('style')).toBe('background-color: rgb(186, 218, 85);');
expect(labelEl.innerText.trim()).toBe(mockLabels[0].title); expect(labelEl.innerText.trim()).toBe(mockLabels[0].title);
}); });
describe('label is of scoped-label type', () => {
it('renders a scoped-label-wrapper span to incorporate 2 anchors', () => {
expect(vm.$el.querySelector('span.scoped-label-wrapper')).not.toBeNull();
});
it('renders anchor tag containing question icon', () => {
const anchor = vm.$el.querySelector('.scoped-label-wrapper a.scoped-label');
expect(anchor).not.toBeNull();
expect(anchor.querySelector('i.fa-question-circle')).not.toBeNull();
});
});
}); });
}); });
...@@ -6,6 +6,13 @@ export const mockLabels = [ ...@@ -6,6 +6,13 @@ export const mockLabels = [
color: '#BADA55', color: '#BADA55',
text_color: '#FFFFFF', text_color: '#FFFFFF',
}, },
{
id: 27,
title: 'Foo::Bar',
description: 'Foobar',
color: '#0033CC',
text_color: '#FFFFFF',
},
]; ];
export const mockSuggestedColors = [ export const mockSuggestedColors = [
......
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