diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-03 21:09:22 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-03 21:09:22 +0300 |
commit | 62baa95f25f1cc56b100d2b64b0a3906f47dcfe1 (patch) | |
tree | 0bee30bc13c3cb7444f1d89d2647719718a31d76 /app/assets/javascripts/groups | |
parent | ff8eb438401fc82b883fc4ae69626f0035b69236 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/groups')
-rw-r--r-- | app/assets/javascripts/groups/components/app.vue | 58 | ||||
-rw-r--r-- | app/assets/javascripts/groups/components/item_actions.vue | 29 | ||||
-rw-r--r-- | app/assets/javascripts/groups/index.js | 3 |
3 files changed, 50 insertions, 40 deletions
diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue index 871f5c9a845..e057012a246 100644 --- a/app/assets/javascripts/groups/components/app.vue +++ b/app/assets/javascripts/groups/components/app.vue @@ -3,9 +3,8 @@ import $ from 'jquery'; import 'vendor/jquery.scrollTo'; -import { GlLoadingIcon } from '@gitlab/ui'; -import { s__, sprintf } from '~/locale'; -import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; +import { GlLoadingIcon, GlModal } from '@gitlab/ui'; +import { __, s__, sprintf } from '~/locale'; import { HIDDEN_CLASS } from '~/lib/utils/constants'; import { getParameterByName } from '~/lib/utils/common_utils'; import { mergeUrlParams } from '~/lib/utils/url_utility'; @@ -16,8 +15,8 @@ import groupsComponent from './groups.vue'; export default { components: { - DeprecatedModal, groupsComponent, + GlModal, GlLoadingIcon, }, props: { @@ -49,13 +48,30 @@ export default { isLoading: true, isSearchEmpty: false, searchEmptyMessage: '', - showModal: false, - groupLeaveConfirmationMessage: '', targetGroup: null, targetParentGroup: null, }; }, computed: { + primaryProps() { + return { + text: __('Leave group'), + attributes: [{ variant: 'warning' }, { category: 'primary' }], + }; + }, + cancelProps() { + return { + text: __('Cancel'), + }; + }, + groupLeaveConfirmationMessage() { + if (!this.targetGroup) { + return ''; + } + return sprintf(s__('GroupsTree|Are you sure you want to leave the "%{fullName}" group?'), { + fullName: this.targetGroup.fullName, + }); + }, groups() { return this.store.getGroups(); }, @@ -171,27 +187,17 @@ export default { } }, showLeaveGroupModal(group, parentGroup) { - const { fullName } = group; this.targetGroup = group; this.targetParentGroup = parentGroup; - this.showModal = true; - this.groupLeaveConfirmationMessage = sprintf( - s__('GroupsTree|Are you sure you want to leave the "%{fullName}" group?'), - { fullName }, - ); - }, - hideLeaveGroupModal() { - this.showModal = false; }, leaveGroup() { - this.showModal = false; this.targetGroup.isBeingRemoved = true; this.service .leaveGroup(this.targetGroup.leavePath) .then(res => { $.scrollTo(0); this.store.removeGroup(this.targetGroup, this.targetParentGroup); - Flash(res.data.notice, 'notice'); + this.$toast.show(res.data.notice); }) .catch(err => { let message = COMMON_STR.FAILURE; @@ -245,21 +251,21 @@ export default { class="loading-animation prepend-top-20" /> <groups-component - v-if="!isLoading" + v-else :groups="groups" :search-empty="isSearchEmpty" :search-empty-message="searchEmptyMessage" :page-info="pageInfo" :action="action" /> - <deprecated-modal - v-show="showModal" - :primary-button-label="__('Leave')" + <gl-modal + modal-id="leave-group-modal" :title="__('Are you sure?')" - :text="groupLeaveConfirmationMessage" - kind="warning" - @cancel="hideLeaveGroupModal" - @submit="leaveGroup" - /> + :action-primary="primaryProps" + :action-cancel="cancelProps" + @primary="leaveGroup" + > + {{ groupLeaveConfirmationMessage }} + </gl-modal> </div> </template> diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue index 07c90de1e6e..ff52f5ef51c 100644 --- a/app/assets/javascripts/groups/components/item_actions.vue +++ b/app/assets/javascripts/groups/components/item_actions.vue @@ -1,14 +1,15 @@ <script> -import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlTooltipDirective, GlButton, GlModalDirective } from '@gitlab/ui'; import eventHub from '../event_hub'; import { COMMON_STR } from '../constants'; export default { components: { - GlIcon, + GlButton, }, directives: { GlTooltip: GlTooltipDirective, + GlModal: GlModalDirective, }, props: { parentGroup: { @@ -44,28 +45,28 @@ export default { <template> <div class="controls d-flex justify-content-end"> - <a + <gl-button v-if="group.canLeave" v-gl-tooltip.top - :href="group.leavePath" + v-gl-modal.leave-group-modal :title="leaveBtnTitle" :aria-label="leaveBtnTitle" data-testid="leave-group-btn" - class="leave-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5" - @click.prevent="onLeaveGroup" - > - <gl-icon name="leave" class="position-top-0" /> - </a> - <a + 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" - class="edit-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5" - > - <gl-icon name="settings" class="position-top-0 align-middle" /> - </a> + size="small" + icon="pencil" + class="edit-group gl-ml-3" + /> </div> </template> diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js index 928f1fe409f..0e2f2cf9d27 100644 --- a/app/assets/javascripts/groups/index.js +++ b/app/assets/javascripts/groups/index.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import { GlToast } from '@gitlab/ui'; import { parseBoolean } from '~/lib/utils/common_utils'; import Translate from '../vue_shared/translate'; import GroupFilterableList from './groups_filterable_list'; @@ -31,6 +32,8 @@ export default (containerId = 'js-groups-tree', endpoint, action = '') => { Vue.component('group-folder', groupFolderComponent); Vue.component('group-item', groupItemComponent); + Vue.use(GlToast); + // eslint-disable-next-line no-new new Vue({ el, |