1 files changed, 8 insertions, 16 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index b82e28a0735..3a39dfe181d 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -1,10 +1,9 @@
 <script>
-import $ from 'jquery';
+import { GlTooltipDirective, GlButton } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { dasherize } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
 import createFlash from '~/flash';
-import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 
 /**
@@ -20,23 +19,20 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   components: {
     Icon,
+    GlButton,
   },
-
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
-
   props: {
     tooltipText: {
       type: String,
       required: true,
     },
-
     link: {
       type: String,
       required: true,
     },
-
     actionIcon: {
       type: String,
       required: true,
@@ -47,7 +43,6 @@ export default {
       isDisabled: false,
     };
   },
-
   computed: {
     cssClass() {
       const actionIconDash = dasherize(this.actionIcon);
@@ -62,8 +57,7 @@ export default {
      *
      */
     onClickAction() {
-      $(this.$el).tooltip('hide');
-
+      this.$root.$emit('bv::hide::tooltip', `js-ci-action-${this.link}`);
       this.isDisabled = true;
 
       axios
@@ -82,18 +76,16 @@ export default {
 };
 </script>
 <template>
-  <button
-    v-tooltip
+  <gl-button
+    :id="`js-ci-action-${link}`"
+    v-gl-tooltip="{ boundary: 'viewport' }"
     :title="tooltipText"
     :class="cssClass"
     :disabled="isDisabled"
-    type="button"
     class="js-ci-action btn btn-blank
 btn-transparent ci-action-icon-container ci-action-icon-wrapper"
-    data-container="body"
-    data-boundary="viewport"
     @click="onClickAction"
   >
     <icon :name="actionIcon"/>
-  </button>
+  </gl-button>
 </template>