From 8453a3a3ea38a7b26a1faad1f1054690e25af7eb Mon Sep 17 00:00:00 2001
From: Florie Guibert <fguibert@gitlab.com>
Date: Wed, 22 Nov 2023 03:04:54 +0000
Subject: [PATCH] Boards - Show direct namespace on card
Display item's direct namespace on card instead of full reference path
that may get truncated
Changelog: changed
---
.../boards/components/board_card_inner.vue | 15 +++++++++------
spec/frontend/boards/board_card_inner_spec.js | 10 ++++++----
spec/frontend/boards/mock_data.js | 1 +
3 files changed, 16 insertions(+), 10 deletions(-)
diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue
index a7f46dc93256b..2c9ff3105bfac 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 c70e461da83d7..6312b6694ed4d 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 0be17db945033..3aaf4b7ae3f92 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 = {
--
GitLab