Merge branch...

Merge branch '229004-replace-vue_shared-tooltip-with-gitlab-ui-s-tooltip-in-ee-app-assets-javascripts-vue_shared' into 'master'

Resolve "Replace vue_shared with GitLab UI’s tooltip in components/linked_pipelines_mini_list.vue"

Closes #229004

See merge request gitlab-org/gitlab!43822

ee/app/assets/javascripts/vue_shared/components/linked_pipelines_mini_list.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
-import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   components: {
     GlIcon,
@@ -91,25 +90,20 @@ export default {
     <a
       v-for="pipeline in linkedPipelinesTrimmed"
       :key="pipeline.id"
-      v-tooltip
+      v-gl-tooltip="{ title: pipelineTooltipText(pipeline) }"
       :href="pipeline.path"
-      :title="pipelineTooltipText(pipeline)"
       :class="triggerButtonClass(pipeline.details.status.group)"
       class="linked-pipeline-mini-item"
-      data-placement="top"
-      data-container="body"
     >
       <gl-icon :name="getStatusIcon(pipeline.details.status.icon)" />
     </a>
 
     <a
       v-if="shouldRenderCounter"
-      v-tooltip
+      v-gl-tooltip="{ title: counterTooltipText }"
       :title="counterTooltipText"
       :href="pipelinePath"
       class="linked-pipelines-counter linked-pipeline-mini-item"
-      data-placement="top"
-      data-container="body"
     >
       {{ counterLabel }}
     </a>

ee/spec/frontend/vue_shared/components/linked_pipelines_mini_list_spec.js

 import Vue from 'vue';
 import LinkedPipelinesMiniList from 'ee/vue_shared/components/linked_pipelines_mini_list.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import mockData from './linked_pipelines_mock_data';
 
 const ListComponent = Vue.extend(LinkedPipelinesMiniList);
@@ -13,6 +14,9 @@ describe('Linked pipeline mini list', () => {
         propsData: {
           triggeredBy: [mockData.triggered_by],
         },
+        directives: {
+          GlTooltip: createMockDirective(),
+        },
       }).$mount();
     });
 
@@ -46,8 +50,9 @@ describe('Linked pipeline mini list', () => {
 
     it('should have an activated tooltip', () => {
       const itemElement = component.$el.querySelector('.linked-pipeline-mini-item');
+      const tooltip = getBinding(itemElement, 'gl-tooltip');
 
-      expect(itemElement.getAttribute('data-original-title')).toBe('GitLabCE - running');
+      expect(tooltip.value.title).toBe('GitLabCE - running');
     });
 
     it('should correctly set is-upstream', () => {
@@ -70,6 +75,9 @@ describe('Linked pipeline mini list', () => {
           triggered: mockData.triggered,
           pipelinePath: 'my/pipeline/path',
         },
+        directives: {
+          GlTooltip: createMockDirective(),
+        },
       }).$mount();
     });
 
@@ -100,8 +108,9 @@ describe('Linked pipeline mini list', () => {
 
     it('should have prepped tooltips', () => {
       const itemElement = component.$el.querySelectorAll('.linked-pipeline-mini-item')[2];
+      const tooltip = getBinding(itemElement, 'gl-tooltip');
 
-      expect(itemElement.getAttribute('data-original-title')).toBe('GitLabCE - running');
+      expect(tooltip.value.title).toBe('GitLabCE - running');
     });
 
     it('should correctly set is-downstream', () => {
@@ -128,11 +137,10 @@ describe('Linked pipeline mini list', () => {
     });
 
     it('should render the correct counterTooltipText', () => {
-      expect(
-        component.$el
-          .querySelector('.linked-pipelines-counter')
-          .getAttribute('data-original-title'),
-      ).toBe(component.counterTooltipText);
+      const counter = component.$el.querySelector('.linked-pipelines-counter');
+      const tooltip = getBinding(counter, 'gl-tooltip');
+
+      expect(tooltip.value.title).toBe(component.counterTooltipText);
     });
   });
 });