diff options
Diffstat (limited to 'app/assets/javascripts/groups/components/item_actions.vue')
-rw-r--r-- | app/assets/javascripts/groups/components/item_actions.vue | 81 |
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> |