From b5ab1d91e377787e0711effebce073af76becc56 Mon Sep 17 00:00:00 2001 From: Rajat Jain Date: Mon, 15 Apr 2019 09:58:30 +0000 Subject: Display scoped labels in Issue Boards This change brings new Scoped labels to Issue board as well. With the last change, this was missed. --- .../javascripts/boards/components/board_sidebar.js | 7 ++++ .../boards/components/issue_card_inner.vue | 45 +++++++++++++++------- .../components/issue_card_inner_scoped_label.vue | 45 ++++++++++++++++++++++ app/assets/javascripts/boards/models/issue.js | 4 +- .../javascripts/boards/stores/boards_store.js | 4 ++ app/assets/javascripts/labels_select.js | 4 +- app/assets/javascripts/lib/utils/common_utils.js | 12 ++++++ .../sidebar/labels_select/dropdown_value.vue | 5 ++- app/assets/stylesheets/pages/labels.scss | 6 +++ .../boards/components/sidebar/_labels.html.haml | 15 ++++++-- 10 files changed, 123 insertions(+), 24 deletions(-) create mode 100644 app/assets/javascripts/boards/components/issue_card_inner_scoped_label.vue (limited to 'app') diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js index 3c683e88cf3..915d1676e62 100644 --- a/app/assets/javascripts/boards/components/board_sidebar.js +++ b/app/assets/javascripts/boards/components/board_sidebar.js @@ -16,6 +16,7 @@ import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue'; import MilestoneSelect from '~/milestone_select'; import RemoveBtn from './sidebar/remove_issue.vue'; import boardsStore from '../stores/boards_store'; +import { isScopedLabel } from '~/lib/utils/common_utils'; export default Vue.extend({ components: { @@ -140,5 +141,11 @@ export default Vue.extend({ Flash(__('An error occurred while saving assignees')); }); }, + showScopedLabels(label) { + return boardsStore.scopedLabels.enabled && isScopedLabel(label); + }, + helpLink() { + return boardsStore.scopedLabels.helpLink; + }, }, }); diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue index 206573dd444..be0de63e772 100644 --- a/app/assets/javascripts/boards/components/issue_card_inner.vue +++ b/app/assets/javascripts/boards/components/issue_card_inner.vue @@ -9,6 +9,8 @@ import eventHub from '../eventhub'; import IssueDueDate from './issue_due_date.vue'; import IssueTimeEstimate from './issue_time_estimate.vue'; import boardsStore from '../stores/boards_store'; +import IssueCardInnerScopedLabel from './issue_card_inner_scoped_label.vue'; +import { isScopedLabel } from '~/lib/utils/common_utils'; export default { components: { @@ -17,6 +19,7 @@ export default { TooltipOnTruncate, IssueDueDate, IssueTimeEstimate, + IssueCardInnerScopedLabel, }, directives: { GlTooltip: GlTooltipDirective, @@ -96,6 +99,9 @@ export default { orderedLabels() { return _.sortBy(this.issue.labels, 'title'); }, + helpLink() { + return boardsStore.scopedLabels.helpLink; + }, }, methods: { isIndexLessThanlimit(index) { @@ -159,6 +165,9 @@ export default { color: label.textColor, }; }, + showScopedLabel(label) { + return boardsStore.scopedLabels.enabled && isScopedLabel(label); + }, }, }; @@ -179,19 +188,29 @@ export default {
- +
+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, + }, + }, +}; + + + diff --git a/app/assets/javascripts/boards/models/issue.js b/app/assets/javascripts/boards/models/issue.js index b4d913f5d69..f8ff20cb0cd 100644 --- a/app/assets/javascripts/boards/models/issue.js +++ b/app/assets/javascripts/boards/models/issue.js @@ -5,7 +5,7 @@ import Vue from 'vue'; import '~/vue_shared/models/label'; -import { isEE } from '~/lib/utils/common_utils'; +import { isEE, convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import IssueProject from './project'; import boardsStore from '../stores/boards_store'; @@ -141,7 +141,7 @@ class ListIssue { * PATCH the said object. */ if (body) { - this.labels = body.labels; + this.labels = convertObjectPropsToCamelCase(body.labels, { deep: true }); } }); } diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js index 802796208c2..6b1e37d3f24 100644 --- a/app/assets/javascripts/boards/stores/boards_store.js +++ b/app/assets/javascripts/boards/stores/boards_store.js @@ -9,6 +9,10 @@ import { getUrlParamsArray, parseBoolean } from '~/lib/utils/common_utils'; const boardsStore = { disabled: false, + scopedLabels: { + helpLink: '', + enabled: false, + }, filter: { path: '', }, diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js index 7d21a216443..2c30b4ea587 100644 --- a/app/assets/javascripts/labels_select.js +++ b/app/assets/javascripts/labels_select.js @@ -11,7 +11,7 @@ import CreateLabelDropdown from './create_label'; import flash from './flash'; import ModalStore from './boards/stores/modal_store'; import boardsStore from './boards/stores/boards_store'; -import { isEE } from '~/lib/utils/common_utils'; +import { isEE, isScopedLabel } from '~/lib/utils/common_utils'; export default class LabelsSelect { constructor(els, options = {}) { @@ -546,8 +546,6 @@ export default class LabelsSelect { ].join(''), ); - const isScopedLabel = label => label.title.indexOf('::') !== -1; - const tpl = _.template( [ '<% _.each(labels, function(label){ %>', diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 2906604da57..b236daff1e0 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -724,6 +724,18 @@ export const NavigationType = { */ export const isEE = () => window.gon && window.gon.ee; +/** + * Checks if the given Label has a special syntax `::` in + * it's title. + * + * Expected Label to be an Object with `title` as a key: + * { title: 'LabelTitle', ...otherProperties }; + * + * @param {Object} label + * @returns Boolean + */ +export const isScopedLabel = ({ title = '' }) => title.indexOf('::') !== -1; + window.gl = window.gl || {}; window.gl.utils = { ...(window.gl.utils || {}), diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue index ddc488adbcb..4abf7c478ee 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue @@ -1,6 +1,7 @@