Resolve "Tooltips scroll along the list within Pipeline jobs dropdown on MR widget"

app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue

@@ -109,6 +109,7 @@ export default {
             :key="i"
           >
             <job-component
+              :dropdown-length="job.size"
               :job="item"
               css-class-job-name="mini-pipeline-graph-dropdown-item"
               @pipelineActionRequestComplete="pipelineActionRequestComplete"

app/assets/javascripts/pipelines/components/graph/job_component.vue

@@ -46,6 +46,11 @@ export default {
       required: false,
       default: '',
     },
+    dropdownLength: {
+      type: Number,
+      required: false,
+      default: Infinity,
+    },
   },
   computed: {
     status() {
@@ -70,6 +75,10 @@ export default {
       return textBuilder.join(' ');
     },
 
+    tooltipBoundary() {
+      return this.dropdownLength < 5 ? 'viewport' : null;
+    },
+
     /**
      * Verifies if the provided job has an action path
      *
@@ -94,9 +103,9 @@ export default {
       :href="status.details_path"
       :title="tooltipText"
       :class="cssClassJobName"
+      :data-boundary="tooltipBoundary"
       data-container="body"
       data-html="true"
-      data-boundary="viewport"
       class="js-pipeline-graph-job-link"
     >
 

app/assets/javascripts/pipelines/components/stage.vue

@@ -186,32 +186,27 @@ export default {
       </i>
     </button>
 
-    <ul
+    <div
       class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container"
       aria-labelledby="stageDropdown"
     >
-
+      <loading-icon v-if="isLoading"/>
-      <li
+      <ul
+        v-else
         class="js-builds-dropdown-list scrollable-menu"
       >
-
+        <li
-        <loading-icon v-if="isLoading"/>
+          v-for="job in dropdownContent"
-
+          :key="job.id"
-        <ul
-          v-else
         >
-          <li
+          <job-component
-            v-for="job in dropdownContent"
+            :dropdown-length="dropdownContent.length"
-            :key="job.id"
+            :job="job"
-          >
+            css-class-job-name="mini-pipeline-graph-dropdown-item"
-            <job-component
+            @pipelineActionRequestComplete="pipelineActionRequestComplete"
-              :job="job"
+          />
-              css-class-job-name="mini-pipeline-graph-dropdown-item"
+        </li>
-              @pipelineActionRequestComplete="pipelineActionRequestComplete"
+      </ul>
-            />
+    </div>
-          </li>
-        </ul>
-      </li>
-    </ul>
   </div>
 </template>

changelogs/unreleased/47516-pipe-scroll.yml

@@ -0,0 +1,5 @@
+---
+title: Prevent pipeline job tooltip from scrolling off dropdown container
+merge_request:
+author:
+type: fixed

spec/javascripts/pipelines/graph/job_component_spec.js

@@ -135,4 +135,34 @@ describe('pipeline graph job component', () => {
       expect(component.$el.querySelector('.js-job-component-tooltip').getAttribute('data-original-title')).toEqual('test - success');
     });
   });
+
+  describe('tooltip placement', () => {
+    const tooltipBoundary = 'a[data-boundary="viewport"]';
+
+    it('does not set tooltip boundary by default', () => {
+      component = mountComponent(JobComponent, {
+        job: mockJob,
+      });
+
+      expect(component.$el.querySelector(tooltipBoundary)).toBeNull();
+    });
+
+    it('sets tooltip boundary to viewport for small dropdowns', () => {
+      component = mountComponent(JobComponent, {
+        job: mockJob,
+        dropdownLength: 1,
+      });
+
+      expect(component.$el.querySelector(tooltipBoundary)).not.toBeNull();
+    });
+
+    it('does not set tooltip boundary for large lists', () => {
+      component = mountComponent(JobComponent, {
+        job: mockJob,
+        dropdownLength: 7,
+      });
+
+      expect(component.$el.querySelector(tooltipBoundary)).toBeNull();
+    });
+  });
 });