diff options
Diffstat (limited to 'app/assets/javascripts/groups/components')
-rw-r--r-- | app/assets/javascripts/groups/components/app.vue | 58 | ||||
-rw-r--r-- | app/assets/javascripts/groups/components/group_item.vue | 8 | ||||
-rw-r--r-- | app/assets/javascripts/groups/components/item_actions.vue | 40 |
3 files changed, 53 insertions, 53 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/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue index 44349b33386..6e99b6ad4fa 100644 --- a/app/assets/javascripts/groups/components/group_item.vue +++ b/app/assets/javascripts/groups/components/group_item.vue @@ -1,8 +1,7 @@ <script> /* eslint-disable vue/no-v-html */ -import { GlLoadingIcon, GlBadge } from '@gitlab/ui'; +import { GlLoadingIcon, GlBadge, GlTooltipDirective } from '@gitlab/ui'; import { visitUrl } from '../../lib/utils/url_utility'; -import tooltip from '../../vue_shared/directives/tooltip'; import identicon from '../../vue_shared/components/identicon.vue'; import eventHub from '../event_hub'; import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '../constants'; @@ -17,7 +16,7 @@ import { showLearnGitLabGroupItemPopover } from '~/onboarding_issues'; export default { directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, components: { GlBadge, @@ -127,11 +126,10 @@ export default { <div class="group-text flex-grow-1 flex-shrink-1"> <div class="d-flex align-items-center flex-wrap title namespace-title gl-mr-3"> <a - v-tooltip + v-gl-tooltip.bottom :href="group.relativePath" :title="group.fullName" class="no-expand gl-mt-3 gl-mr-3 gl-text-gray-900!" - data-placement="bottom" >{{ // ending bracket must be by closing tag to prevent // link hover text-decoration from over-extending diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue index 2e92a608f76..ff52f5ef51c 100644 --- a/app/assets/javascripts/groups/components/item_actions.vue +++ b/app/assets/javascripts/groups/components/item_actions.vue @@ -1,15 +1,15 @@ <script> -import { GlIcon } from '@gitlab/ui'; -import tooltip from '~/vue_shared/directives/tooltip'; +import { GlTooltipDirective, GlButton, GlModalDirective } from '@gitlab/ui'; import eventHub from '../event_hub'; import { COMMON_STR } from '../constants'; export default { components: { - GlIcon, + GlButton, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, + GlModal: GlModalDirective, }, props: { parentGroup: { @@ -45,32 +45,28 @@ export default { <template> <div class="controls d-flex justify-content-end"> - <a + <gl-button v-if="group.canLeave" - v-tooltip - :href="group.leavePath" + v-gl-tooltip.top + v-gl-modal.leave-group-modal :title="leaveBtnTitle" :aria-label="leaveBtnTitle" - data-container="body" - data-placement="bottom" 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-tooltip + v-gl-tooltip.top :href="group.editPath" :title="editBtnTitle" :aria-label="editBtnTitle" - data-container="body" - data-placement="bottom" 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> |