diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue index a7f46dc93256b7088e3dfe63072bdd33f5f668af..2c9ff3105bfac2fc215c5b047465972df60bc377 100644 --- a/app/assets/javascripts/boards/components/board_card_inner.vue +++ b/app/assets/javascripts/boards/components/board_card_inner.vue @@ -15,7 +15,6 @@ import { isScopedLabel } from '~/lib/utils/common_utils'; import { updateHistory } from '~/lib/utils/url_utility'; import { sprintf, __, n__ } from '~/locale'; import isShowingLabelsQuery from '~/graphql_shared/client/is_showing_labels.query.graphql'; -import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue'; import IssuableBlockedIcon from '~/vue_shared/components/issuable_blocked_icon/issuable_blocked_icon.vue'; @@ -32,7 +31,6 @@ export default { GlLoadingIcon, GlIcon, UserAvatarLink, - TooltipOnTruncate, IssueDueDate, IssueTimeEstimate, IssueCardWeight: () => import('ee_component/boards/components/issue_card_weight.vue'), @@ -155,6 +153,9 @@ export default { const { referencePath } = this.item; return referencePath.split(this.itemPrefix)[0]; }, + directNamespaceReference() { + return this.itemReferencePath.split('/').slice(-1)[0]; + }, orderedLabels() { return sortBy(this.item.labels.filter(this.isNonListLabel), 'title'); }, @@ -308,13 +309,15 @@ export default { :work-item-type="item.type" show-tooltip-on-hover /> - <tooltip-on-truncate + <span v-if="showReferencePath" + v-gl-tooltip :title="itemReferencePath" - placement="bottom" - class="board-item-path gl-text-truncate gl-font-weight-bold" - >{{ itemReferencePath }}</tooltip-on-truncate + data-placement="bottom" + class="board-item-path gl-text-truncate gl-font-weight-bold gl-cursor-help" > + {{ directNamespaceReference }} + </span> {{ itemId }} </span> <span class="board-info-items gl-mt-3 gl-display-inline-block"> diff --git a/spec/frontend/boards/board_card_inner_spec.js b/spec/frontend/boards/board_card_inner_spec.js index c70e461da83d78b232d2d38b058083279bc27ffe..6312b6694ed4dd73f2765b1844aa42c1f55e6fc3 100644 --- a/spec/frontend/boards/board_card_inner_spec.js +++ b/spec/frontend/boards/board_card_inner_spec.js @@ -16,7 +16,7 @@ import eventHub from '~/boards/eventhub'; import defaultStore from '~/boards/stores'; import { TYPE_ISSUE } from '~/issues/constants'; import { updateHistory } from '~/lib/utils/url_utility'; -import { mockLabelList, mockIssue, mockIssueFullPath } from './mock_data'; +import { mockLabelList, mockIssue, mockIssueFullPath, mockIssueDirectNamespace } from './mock_data'; jest.mock('~/lib/utils/url_utility'); jest.mock('~/boards/eventhub'); @@ -162,11 +162,13 @@ describe('Board card component', () => { createStore(); createWrapper({ isGroupBoard: false }); - expect(wrapper.find('.board-card-number').text()).not.toContain(mockIssueFullPath); + expect(wrapper.find('.board-card-number').text()).not.toContain(mockIssueDirectNamespace); + expect(wrapper.find('.board-item-path').exists()).toBe(false); }); - it('renders item reference path', () => { - expect(wrapper.find('.board-card-number').text()).toContain(mockIssueFullPath); + it('renders item direct namespace path with full reference path in a tooltip', () => { + expect(wrapper.find('.board-item-path').text()).toBe(mockIssueDirectNamespace); + expect(wrapper.find('.board-item-path').attributes('title')).toBe(mockIssueFullPath); }); describe('blocked', () => { diff --git a/spec/frontend/boards/mock_data.js b/spec/frontend/boards/mock_data.js index 0be17db9450334517aeb9a6efe6b1c9300fdf4a8..3aaf4b7ae3f92775a5d56ed421e180d33a6160bc 100644 --- a/spec/frontend/boards/mock_data.js +++ b/spec/frontend/boards/mock_data.js @@ -275,6 +275,7 @@ export const labels = [ ]; export const mockIssueFullPath = 'gitlab-org/test-subgroup/gitlab-test'; +export const mockIssueDirectNamespace = 'gitlab-test'; export const mockEpicFullPath = 'gitlab-org/test-subgroup'; export const rawIssue = {