Boards - Show direct namespace on card

Display item's direct namespace on card instead of full reference path
that may get truncated
Changelog: changed

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">

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', () => {

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 = {