Merge branch '54514-tooltips' into 'master'

Fixes tooltip overflowing in mini pipeline

Closes #54514

See merge request gitlab-org/gitlab-ce!23486

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

@@ -84,10 +84,6 @@ export default {
 
       return textBuilder.join(' ');
     },
-
-    tooltipBoundary() {
-      return this.dropdownLength < 5 ? 'viewport' : null;
-    },
     /**
      * Verifies if the provided job has an action path
      *
@@ -108,7 +104,7 @@ export default {
   <div class="ci-job-component">
     <gl-link
       v-if="status.has_details"
-      v-gl-tooltip="{ boundary: tooltipBoundary }"
+      v-gl-tooltip
       :href="status.details_path"
       :title="tooltipText"
       :class="cssClassJobName"

spec/javascripts/pipelines/graph/job_item_spec.js

@@ -139,57 +139,17 @@ describe('pipeline graph job item', () => {
     });
   });
 
-  describe('tooltip placement', () => {
-    it('does not set tooltip boundary by default', () => {
-      component = mountComponent(JobComponent, {
-        job: mockJob,
-      });
-
-      expect(component.tooltipBoundary).toBeNull();
-    });
-
-    it('sets tooltip boundary to viewport for small dropdowns', () => {
-      component = mountComponent(JobComponent, {
-        job: mockJob,
-        dropdownLength: 1,
-      });
-
-      expect(component.tooltipBoundary).toEqual('viewport');
-    });
-
-    it('does not set tooltip boundary for large lists', () => {
-      component = mountComponent(JobComponent, {
-        job: mockJob,
-        dropdownLength: 7,
-      });
-
-      expect(component.tooltipBoundary).toBeNull();
-    });
-  });
-
   describe('for delayed job', () => {
-    beforeEach(() => {
-      const fifteenMinutesInMilliseconds = 900000;
-      spyOn(Date, 'now').and.callFake(
-        () => new Date(delayedJobFixture.scheduled_at).getTime() - fifteenMinutesInMilliseconds,
-      );
-    });
-
-    it('displays remaining time in tooltip', done => {
+    it('displays remaining time in tooltip', () => {
       component = mountComponent(JobComponent, {
         job: delayedJobFixture,
       });
 
-      Vue.nextTick()
-        .then(() => {
-          expect(
-            component.$el
-              .querySelector('.js-pipeline-graph-job-link')
-              .getAttribute('data-original-title'),
-          ).toEqual('delayed job - delayed manual action (00:15:00)');
-        })
-        .then(done)
-        .catch(done.fail);
+      expect(
+        component.$el
+          .querySelector('.js-pipeline-graph-job-link')
+          .getAttribute('data-original-title'),
+      ).toEqual(`delayed job - delayed manual action (${component.remainingTime})`);
     });
   });
 });