Move issue/apic hierarchy items to a tooltip

- Review feedback

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

@@ -72,17 +72,15 @@ export default {
 
 <template>
   <gl-tooltip :target="getTargetRef()">
-    <span class="bold">
+    <div ref="statePath" class="bold">
       {{ path }}
-    </span>
-    <br />
-    <span class="text-tertiary">
-      <span class="bold">
+    </div>
+    <div class="text-tertiary">
+      <span ref="stateText" class="bold">
         {{ stateText }}
       </span>
       {{ stateTimeInWords }}
-      <br />
-      {{ stateTimestamp }}
-    </span>
+      <div ref="stateTimestamp">{{ stateTimestamp }}</div>
+    </div>
   </gl-tooltip>
 </template>

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

@@ -79,6 +79,9 @@ export default {
     itemId() {
       return this.itemReference.split(this.item.pathIdSeparator).pop();
     },
+    itemHierarchy() {
+      return this.itemPath + this.item.pathIdSeparator + this.itemId;
+    },
     computedPath() {
       return this.itemWebPath.length ? this.itemWebPath : null;
     },
@@ -127,7 +130,7 @@ export default {
           />
           <state-tooltip
             :get-target-ref="() => $refs.stateIconLg"
-            :path="itemPath + item.pathIdSeparator + itemId"
+            :path="itemHierarchy"
             :is-open="isOpen"
             :state="item.state"
             :created-at="item.createdAt"
@@ -158,7 +161,7 @@ export default {
             />
             <state-tooltip
               :get-target-ref="() => $refs.stateIconMd"
-              :path="itemPath + item.pathIdSeparator + itemId"
+              :path="itemHierarchy"
               :is-open="isOpen"
               :state="item.state"
               :created-at="item.createdAt"

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

@@ -159,7 +159,7 @@ describe('RelatedItemsTree', () => {
       it('renders path in bold', () => {
         expect(
           wrapper
-            .find('span.bold')
+            .find({ ref: 'statePath' })
             .text()
             .trim(),
         ).toBe('/foo/bar#1');
@@ -168,7 +168,7 @@ describe('RelatedItemsTree', () => {
       it('renders stateText in bold', () => {
         expect(
           wrapper
-            .find('span.text-tertiary span.bold')
+            .find({ ref: 'stateText' })
             .text()
             .trim(),
         ).toBe('Closed');
@@ -181,7 +181,7 @@ describe('RelatedItemsTree', () => {
       it('renders stateTimestamp in muted', () => {
         expect(
           wrapper
-            .find('span.text-tertiary')
+            .find({ ref: 'stateTimestamp' })
             .text()
             .trim(),
         ).toContain(mockClosedAtYear);

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

@@ -291,8 +291,9 @@ describe('RelatedItemsTree', () => {
         const stateTooltip = wrapper.findAll(StateTooltip).at(0);
 
         const { itemPath, itemId } = wrapper.vm;
+        const path = itemPath + mockItem.pathIdSeparator + itemId;
 
-        expect(stateTooltip.props('path')).toBe(itemPath + mockItem.pathIdSeparator + itemId);
+        expect(stateTooltip.props('path')).toBe(path);
       });
 
       it('renders confidential icon when `item.confidential` is true', () => {