Move issue/apic hierarchy items to a tooltip

- Move epic/issue path in tree view to tooltip

ee/app/assets/javascripts/related_items_tree/components/state_tooltip.vue

@@ -15,6 +15,10 @@ export default {
       type: Function,
       required: true,
     },
+    path: {
+      type: String,
+      required: true,
+    },
     isOpen: {
       type: Boolean,
       required: true,
@@ -69,11 +73,15 @@ export default {
 <template>
   <gl-tooltip :target="getTargetRef()">
     <span class="bold">
-      {{ stateText }}
+      {{ path }}
     </span>
-    {{ stateTimeInWords }}
     <br />
     <span class="text-tertiary">
+      <span class="bold">
+        {{ stateText }}
+      </span>
+      {{ stateTimeInWords }}
+      <br />
       {{ stateTimestamp }}
     </span>
   </gl-tooltip>

ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue

@@ -127,6 +127,7 @@ export default {
           />
           <state-tooltip
             :get-target-ref="() => $refs.stateIconLg"
+            :path="itemPath + item.pathIdSeparator + itemId"
             :is-open="isOpen"
             :state="item.state"
             :created-at="item.createdAt"
@@ -157,15 +158,12 @@ export default {
             />
             <state-tooltip
               :get-target-ref="() => $refs.stateIconMd"
+              :path="itemPath + item.pathIdSeparator + itemId"
               :is-open="isOpen"
               :state="item.state"
               :created-at="item.createdAt"
               :closed-at="item.closedAt || ''"
             />
-            <span v-gl-tooltip :title="itemPath" class="path-id-text d-inline-block">{{
-              itemPath
-            }}</span
-            >{{ item.pathIdSeparator }}{{ itemId }}
           </div>
           <div
             class="item-meta-child d-flex align-items-center order-0 flex-wrap mr-md-1 ml-md-auto ml-xl-2 mt-2 mt-md-0 flex-xl-nowrap"

ee/changelogs/unreleased/197491-move-issue-epic-hierarchy-items-to-a-tool-tip.yml

+---
+title: Move issue/apic hierarchy items to a tooltip
+merge_request: 27969
+author:
+type: changed

ee/spec/frontend/related_items_tree/components/state_tooltip_spec.js

@@ -17,6 +17,7 @@ const mockClosedAtYear = currentDate.getFullYear() - 1;
 const createComponent = ({
   getTargetRef = () => {},
   isOpen = false,
+  path = '/foo/bar#1',
   state = 'closed',
   createdAt = mockCreatedAt,
   closedAt = mockClosedAt,
@@ -25,6 +26,7 @@ const createComponent = ({
     propsData: {
       getTargetRef,
       isOpen,
+      path,
       state,
       createdAt,
       closedAt,
@@ -154,12 +156,21 @@ describe('RelatedItemsTree', () => {
         expect(wrapper.find(GlTooltip).isVisible()).toBe(true);
       });
 
-      it('renders stateText in bold', () => {
+      it('renders path in bold', () => {
         expect(
           wrapper
             .find('span.bold')
             .text()
             .trim(),
+        ).toBe('/foo/bar#1');
+      });
+
+      it('renders stateText in bold', () => {
+        expect(
+          wrapper
+            .find('span.text-tertiary span.bold')
+            .text()
+            .trim(),
         ).toBe('Closed');
       });
 

ee/spec/frontend/related_items_tree/components/tree_item_body_spec.js

@@ -287,6 +287,14 @@ describe('RelatedItemsTree', () => {
         expect(stateTooltip.props('state')).toBe(mockItem.state);
       });
 
+      it('renders item path in tooltip for large screens', () => {
+        const stateTooltip = wrapper.findAll(StateTooltip).at(0);
+
+        const { itemPath, itemId } = wrapper.vm;
+
+        expect(stateTooltip.props('path')).toBe(itemPath + mockItem.pathIdSeparator + itemId);
+      });
+
       it('renders confidential icon when `item.confidential` is true', () => {
         const confidentialIcon = wrapper.findAll(Icon).at(1);
 
@@ -313,19 +321,6 @@ describe('RelatedItemsTree', () => {
         expect(stateTooltip.props('state')).toBe(mockItem.state);
       });
 
-      it('renders item path', () => {
-        const pathEl = wrapper.find('.path-id-text');
-
-        expect(pathEl.attributes('title')).toBe('gitlab-org/gitlab-shell');
-        expect(pathEl.text()).toBe('gitlab-org/gitlab-shell');
-      });
-
-      it('renders item id with separator', () => {
-        const pathIdEl = wrapper.find('.item-path-id');
-
-        expect(pathIdEl.text()).toBe(mockItem.reference);
-      });
-
       it('renders item milestone when it has milestone', () => {
         const milestone = wrapper.find(ItemMilestone);