1 files changed, 60 insertions, 52 deletions

diff --git a/app/assets/javascripts/vue_shared/components/actions_button.vue b/app/assets/javascripts/vue_shared/components/actions_button.vue
index c6c22f9c61f..175aef59ae5 100644
--- a/app/assets/javascripts/vue_shared/components/actions_button.vue
+++ b/app/assets/javascripts/vue_shared/components/actions_button.vue
@@ -1,11 +1,5 @@
 <script>
-import {
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownDivider,
-  GlButton,
-  GlTooltipDirective,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlButton, GlTooltip } from '@gitlab/ui';
 
 export default {
   components: {
@@ -13,11 +7,14 @@ export default {
     GlDropdownItem,
     GlDropdownDivider,
     GlButton,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
+    GlTooltip,
   },
   props: {
+    id: {
+      type: String,
+      required: false,
+      default: '',
+    },
     actions: {
       type: Array,
       required: true,
@@ -37,6 +34,11 @@ export default {
       required: false,
       default: 'default',
     },
+    showActionTooltip: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     hasMultipleActions() {
@@ -51,6 +53,7 @@ export default {
       this.$emit('select', action.key);
     },
     handleClick(action, evt) {
+      this.$emit('actionClicked', { action });
       return action.handle?.(evt);
     },
   },
@@ -58,46 +61,51 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown
-    v-if="hasMultipleActions"
-    v-gl-tooltip="selectedAction.tooltip"
-    :text="selectedAction.text"
-    :split-href="selectedAction.href"
-    :variant="variant"
-    :category="category"
-    split
-    data-qa-selector="action_dropdown"
-    @click="handleClick(selectedAction, $event)"
-  >
-    <template #button-content>
-      <span class="gl-new-dropdown-button-text" v-bind="selectedAction.attrs">
-        {{ selectedAction.text }}
-      </span>
-    </template>
-    <template v-for="(action, index) in actions">
-      <gl-dropdown-item
-        :key="action.key"
-        is-check-item
-        :is-checked="action.key === selectedAction.key"
-        :secondary-text="action.secondaryText"
-        :data-qa-selector="`${action.key}_menu_item`"
-        :data-testid="`action_${action.key}`"
-        @click="handleItemClick(action)"
-      >
-        <span class="gl-font-weight-bold">{{ action.text }}</span>
-      </gl-dropdown-item>
-      <gl-dropdown-divider v-if="index != actions.length - 1" :key="action.key + '_divider'" />
-    </template>
-  </gl-dropdown>
-  <gl-button
-    v-else-if="selectedAction"
-    v-gl-tooltip="selectedAction.tooltip"
-    v-bind="selectedAction.attrs"
-    :variant="variant"
-    :category="category"
-    :href="selectedAction.href"
-    @click="handleClick(selectedAction, $event)"
-  >
-    {{ selectedAction.text }}
-  </gl-button>
+  <span>
+    <gl-dropdown
+      v-if="hasMultipleActions"
+      :id="id"
+      :text="selectedAction.text"
+      :split-href="selectedAction.href"
+      :variant="variant"
+      :category="category"
+      split
+      data-qa-selector="action_dropdown"
+      @click="handleClick(selectedAction, $event)"
+    >
+      <template #button-content>
+        <span class="gl-dropdown-button-text" v-bind="selectedAction.attrs">
+          {{ selectedAction.text }}
+        </span>
+      </template>
+      <template v-for="(action, index) in actions">
+        <gl-dropdown-item
+          :key="action.key"
+          is-check-item
+          :is-checked="action.key === selectedAction.key"
+          :secondary-text="action.secondaryText"
+          :data-qa-selector="`${action.key}_menu_item`"
+          :data-testid="`action_${action.key}`"
+          @click="handleItemClick(action)"
+        >
+          <span class="gl-font-weight-bold">{{ action.text }}</span>
+        </gl-dropdown-item>
+        <gl-dropdown-divider v-if="index != actions.length - 1" :key="action.key + '_divider'" />
+      </template>
+    </gl-dropdown>
+    <gl-button
+      v-else-if="selectedAction"
+      :id="id"
+      v-bind="selectedAction.attrs"
+      :variant="variant"
+      :category="category"
+      :href="selectedAction.href"
+      @click="handleClick(selectedAction, $event)"
+    >
+      {{ selectedAction.text }}
+    </gl-button>
+    <gl-tooltip v-if="selectedAction.tooltip && showActionTooltip" :target="id">
+      {{ selectedAction.tooltip }}
+    </gl-tooltip>
+  </span>
 </template>