Merge branch '197491-move-issue-epic-hierarchy-items-to-a-tool-tip' into 'master'

Move issue/epic hierarchy items to a tooltip

Closes #197491

See merge request gitlab-org/gitlab!27969

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,
@@ -68,13 +72,15 @@ export default {
 
 <template>
   <gl-tooltip :target="getTargetRef()">
-    <span class="bold">
-      {{ stateText }}
-    </span>
-    {{ stateTimeInWords }}
-    <br />
-    <span class="text-tertiary">
-      {{ stateTimestamp }}
-    </span>
+    <div ref="statePath" class="bold">
+      {{ path }}
+    </div>
+    <div class="text-tertiary">
+      <span ref="stateText" class="bold">
+        {{ stateText }}
+      </span>
+      {{ stateTimeInWords }}
+      <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,6 +130,7 @@ export default {
           />
           <state-tooltip
             :get-target-ref="() => $refs.stateIconLg"
+            :path="itemHierarchy"
             :is-open="isOpen"
             :state="item.state"
             :created-at="item.createdAt"
@@ -157,15 +161,12 @@ export default {
             />
             <state-tooltip
               :get-target-ref="() => $refs.stateIconMd"
+              :path="itemHierarchy"
               :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,10 +156,19 @@ describe('RelatedItemsTree', () => {
         expect(wrapper.find(GlTooltip).isVisible()).toBe(true);
       });
 
+      it('renders path in bold', () => {
+        expect(
+          wrapper
+            .find({ ref: 'statePath' })
+            .text()
+            .trim(),
+        ).toBe('/foo/bar#1');
+      });
+
       it('renders stateText in bold', () => {
         expect(
           wrapper
-            .find('span.bold')
+            .find({ ref: 'stateText' })
             .text()
             .trim(),
         ).toBe('Closed');
@@ -170,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

@@ -287,6 +287,15 @@ 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;
+        const path = itemPath + mockItem.pathIdSeparator + itemId;
+
+        expect(stateTooltip.props('path')).toBe(path);
+      });
+
       it('renders confidential icon when `item.confidential` is true', () => {
         const confidentialIcon = wrapper.findAll(Icon).at(1);
 
@@ -313,19 +322,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);