diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-11 21:18:58 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-11 21:18:58 +0300 |
commit | e57809ded8e4e64c0528d33a5f59e9160e310d14 (patch) | |
tree | e51a328a522b165b6b2465529b0adae0272b03dd /app/assets/javascripts/groups | |
parent | ec377e41624fb83f0e5e51286c7aad24a22eefb1 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/groups')
5 files changed, 76 insertions, 41 deletions
diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue index a1ec5942d64..e3147065d5c 100644 --- a/app/assets/javascripts/groups/components/app.vue +++ b/app/assets/javascripts/groups/components/app.vue @@ -41,6 +41,7 @@ export default { }, data() { return { + isModalVisible: false, isLoading: true, isSearchEmpty: false, searchEmptyMessage: '', @@ -101,6 +102,12 @@ export default { eventHub.$off(`${this.action}updateGroups`, this.updateGroups); }, methods: { + hideModal() { + this.isModalVisible = false; + }, + showModal() { + this.isModalVisible = true; + }, fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) { return this.service .getGroups(parentId, page, filterGroupsBy, sortBy, archived) @@ -185,6 +192,7 @@ export default { showLeaveGroupModal(group, parentGroup) { this.targetGroup = group; this.targetParentGroup = parentGroup; + this.showModal(); }, leaveGroup() { this.targetGroup.isBeingRemoved = true; @@ -256,10 +264,12 @@ export default { /> <gl-modal modal-id="leave-group-modal" + :visible="isModalVisible" :title="__('Are you sure?')" :action-primary="primaryProps" :action-cancel="cancelProps" @primary="leaveGroup" + @hide="hideModal" > {{ groupLeaveConfirmationMessage }} </gl-modal> diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue index 10c45abbfa2..707008ec493 100644 --- a/app/assets/javascripts/groups/components/group_item.vue +++ b/app/assets/javascripts/groups/components/group_item.vue @@ -34,8 +34,8 @@ export default { ), itemCaret, itemTypeIcon, - itemStats, itemActions, + itemStats, }, props: { parentGroup: { @@ -92,6 +92,9 @@ export default { complianceFramework() { return this.group.complianceFramework; }, + showActionsMenu() { + return this.isGroup && (this.group.canEdit || this.group.canRemove || this.group.canLeave); + }, }, methods: { onClickRowGroup(e) { @@ -197,17 +200,19 @@ export default { <div v-if="isGroupPendingRemoval"> <gl-badge variant="warning">{{ __('pending deletion') }}</gl-badge> </div> - <div class="metadata d-flex flex-grow-1 flex-shrink-0 flex-wrap justify-content-md-between"> + <div + class="metadata gl-display-flex gl-flex-grow-1 gl-flex-shrink-0 gl-flex-wrap justify-content-md-between" + > + <item-stats + :item="group" + class="group-stats gl-mt-2 gl-display-none gl-md-display-flex gl-align-items-center" + /> <item-actions - v-if="isGroup" + v-if="showActionsMenu" :group="group" :parent-group="parentGroup" :action="action" /> - <item-stats - :item="group" - class="group-stats gl-mt-2 d-none d-md-flex gl-align-items-center" - /> </div> </div> </div> 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> diff --git a/app/assets/javascripts/groups/constants.js b/app/assets/javascripts/groups/constants.js index e2722d780dc..005bac1e7b5 100644 --- a/app/assets/javascripts/groups/constants.js +++ b/app/assets/javascripts/groups/constants.js @@ -15,8 +15,10 @@ export const COMMON_STR = { LEAVE_FORBIDDEN: s__( 'GroupsTree|Failed to leave the group. Please make sure you are not the only owner.', ), - LEAVE_BTN_TITLE: s__('GroupsTree|Leave this group'), - EDIT_BTN_TITLE: s__('GroupsTree|Edit group'), + LEAVE_BTN_TITLE: s__('GroupsTree|Leave group'), + EDIT_BTN_TITLE: s__('GroupsTree|Edit'), + REMOVE_BTN_TITLE: s__('GroupsTree|Delete'), + OPTIONS_DROPDOWN_TITLE: s__('GroupsTree|Options'), GROUP_SEARCH_EMPTY: s__('GroupsTree|No groups matched your search'), GROUP_PROJECT_SEARCH_EMPTY: s__('GroupsTree|No groups or projects matched your search'), }; diff --git a/app/assets/javascripts/groups/store/groups_store.js b/app/assets/javascripts/groups/store/groups_store.js index d3600bd223a..0917b9ceccf 100644 --- a/app/assets/javascripts/groups/store/groups_store.js +++ b/app/assets/javascripts/groups/store/groups_store.js @@ -83,6 +83,7 @@ export default class GroupsStore { leavePath: rawGroupItem.leave_path, canEdit: rawGroupItem.can_edit, canLeave: rawGroupItem.can_leave, + canRemove: rawGroupItem.can_remove, type: rawGroupItem.type, permission: rawGroupItem.permission, children: groupChildren, |