1 files changed, 49 insertions, 32 deletions

diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index df751a3f37e..fc7cfffc22c 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -1,15 +1,17 @@
 <script>
-import { GlTooltipDirective, GlButton, GlModalDirective } from '@gitlab/ui';
+import { GlTooltipDirective, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { COMMON_STR } from '../constants';
 import eventHub from '../event_hub';
 
+const { LEAVE_BTN_TITLE, EDIT_BTN_TITLE, REMOVE_BTN_TITLE, OPTIONS_DROPDOWN_TITLE } = COMMON_STR;
+
 export default {
   components: {
-    GlButton,
+    GlDropdown,
+    GlDropdownItem,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
-    GlModal: GlModalDirective,
   },
   props: {
     parentGroup: {
@@ -28,11 +30,8 @@ export default {
     },
   },
   computed: {
-    leaveBtnTitle() {
-      return COMMON_STR.LEAVE_BTN_TITLE;
-    },
-    editBtnTitle() {
-      return COMMON_STR.EDIT_BTN_TITLE;
+    removeButtonHref() {
+      return `${this.group.editPath}#js-remove-group-form`;
     },
   },
   methods: {
@@ -40,33 +39,51 @@ export default {
       eventHub.$emit(`${this.action}showLeaveGroupModal`, this.group, this.parentGroup);
     },
   },
+  i18n: {
+    leaveBtnTitle: LEAVE_BTN_TITLE,
+    editBtnTitle: EDIT_BTN_TITLE,
+    removeBtnTitle: REMOVE_BTN_TITLE,
+    optionsDropdownTitle: OPTIONS_DROPDOWN_TITLE,
+  },
 };
 </script>
 
 <template>
-  <div class="controls d-flex justify-content-end">
-    <gl-button
-      v-if="group.canLeave"
-      v-gl-tooltip.top
-      v-gl-modal.leave-group-modal
-      :title="leaveBtnTitle"
-      :aria-label="leaveBtnTitle"
-      data-testid="leave-group-btn"
-      size="small"
-      icon="leave"
-      class="leave-group gl-ml-3"
-      @click.stop="onLeaveGroup"
-    />
-    <gl-button
-      v-if="group.canEdit"
-      v-gl-tooltip.top
-      :href="group.editPath"
-      :title="editBtnTitle"
-      :aria-label="editBtnTitle"
-      data-testid="edit-group-btn"
-      size="small"
-      icon="pencil"
-      class="edit-group gl-ml-3"
-    />
+  <div class="gl-display-flex gl-justify-content-end gl-ml-5">
+    <gl-dropdown
+      v-gl-tooltip.hover.focus="$options.i18n.optionsDropdownTitle"
+      right
+      category="tertiary"
+      icon="ellipsis_v"
+      no-caret
+      :data-testid="`group-${group.id}-dropdown-button`"
+      data-qa-selector="group_dropdown_button"
+      :data-qa-group-id="group.id"
+    >
+      <gl-dropdown-item
+        v-if="group.canEdit"
+        :data-testid="`edit-group-${group.id}-btn`"
+        :href="group.editPath"
+        @click.stop
+      >
+        {{ $options.i18n.editBtnTitle }}
+      </gl-dropdown-item>
+      <gl-dropdown-item
+        v-if="group.canLeave"
+        :data-testid="`leave-group-${group.id}-btn`"
+        @click.stop="onLeaveGroup"
+      >
+        {{ $options.i18n.leaveBtnTitle }}
+      </gl-dropdown-item>
+      <gl-dropdown-item
+        v-if="group.canRemove"
+        :href="removeButtonHref"
+        :data-testid="`remove-group-${group.id}-btn`"
+        variant="danger"
+        @click.stop
+      >
+        {{ $options.i18n.removeBtnTitle }}
+      </gl-dropdown-item>
+    </gl-dropdown>
   </div>
 </template>