1 files changed, 38 insertions, 3 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue
index 655ceb5f700..b76d5d90ead 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlButton, GlDropdown, GlDropdownItem, GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, __ } from '~/locale';
 
 export default {
@@ -8,6 +8,9 @@ export default {
     GlDropdown,
     GlDropdownItem,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     widget: {
       type: String,
@@ -19,6 +22,12 @@ export default {
       default: () => [],
     },
   },
+  data: () => {
+    return {
+      timeout: null,
+      updatingTooltip: false,
+    };
+  },
   computed: {
     dropdownLabel() {
       return sprintf(__('%{widget} options'), { widget: this.widget });
@@ -27,9 +36,29 @@ export default {
   methods: {
     onClickAction(action) {
       this.$emit('clickedAction', action);
+
       if (action.onClick) {
         action.onClick();
       }
+
+      if (action.tooltipOnClick) {
+        this.updatingTooltip = true;
+        this.$root.$emit('bv::show::tooltip', action.id);
+
+        clearTimeout(this.timeout);
+
+        this.timeout = setTimeout(() => {
+          this.updatingTooltip = false;
+          this.$root.$emit('bv::hide::tooltip', action.id);
+        }, 1000);
+      }
+    },
+    setTooltip(btn) {
+      if (this.updatingTooltip && btn.tooltipOnClick) {
+        return btn.tooltipOnClick;
+      }
+
+      return btn.tooltipText;
     },
   },
 };
@@ -55,6 +84,7 @@ export default {
         :key="index"
         :href="btn.href"
         :target="btn.target"
+        :data-clipboard-text="btn.dataClipboardText"
         @click="onClickAction(btn)"
       >
         {{ btn.text }}
@@ -63,15 +93,20 @@ export default {
     <template v-if="tertiaryButtons.length">
       <gl-button
         v-for="(btn, index) in tertiaryButtons"
+        :id="btn.id"
         :key="index"
+        v-gl-tooltip.hover
+        :title="setTooltip(btn)"
         :href="btn.href"
         :target="btn.target"
         :class="{ 'gl-mr-3': index !== tertiaryButtons.length - 1 }"
+        :data-clipboard-text="btn.dataClipboardText"
+        :icon="btn.icon"
+        :data-testid="btn.testId || 'extension-actions-button'"
+        :variant="btn.variant || 'confirm'"
         category="tertiary"
-        variant="confirm"
         size="small"
         class="gl-display-none gl-md-display-block gl-float-left"
-        data-testid="extension-actions-button"
         @click="onClickAction(btn)"
       >
         {{ btn.text }}