diff options
Diffstat (limited to 'app/assets/javascripts/packages/details/components/app.vue')
-rw-r--r-- | app/assets/javascripts/packages/details/components/app.vue | 63 |
1 files changed, 35 insertions, 28 deletions
diff --git a/app/assets/javascripts/packages/details/components/app.vue b/app/assets/javascripts/packages/details/components/app.vue index dbb5f7be0a0..af3220840a6 100644 --- a/app/assets/javascripts/packages/details/components/app.vue +++ b/app/assets/javascripts/packages/details/components/app.vue @@ -25,8 +25,9 @@ import { numberToHumanSize } from '~/lib/utils/number_utils'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import FileIcon from '~/vue_shared/components/file_icon.vue'; import { __, s__ } from '~/locale'; -import { PackageType, TrackingActions } from '../../shared/constants'; +import { PackageType, TrackingActions, SHOW_DELETE_SUCCESS_ALERT } from '../../shared/constants'; import { packageTypeToTrackCategory } from '../../shared/utils'; +import { objectToQueryString } from '~/lib/utils/common_utils'; export default { name: 'PackagesApp', @@ -62,17 +63,15 @@ export default { 'packageFiles', 'isLoading', 'canDelete', - 'destroyPath', 'svgPath', 'npmPath', 'npmHelpPath', + 'projectListUrl', + 'groupListUrl', ]), isValidPackage() { return Boolean(this.packageEntity.name); }, - canDeletePackage() { - return this.canDelete && this.destroyPath; - }, filesTableRows() { return this.packageFiles.map(x => ({ name: x.file_name, @@ -100,7 +99,7 @@ export default { }, }, methods: { - ...mapActions(['fetchPackageVersions']), + ...mapActions(['deletePackage', 'fetchPackageVersions']), formatSize(size) { return numberToHumanSize(size); }, @@ -112,6 +111,16 @@ export default { this.fetchPackageVersions(); } }, + async confirmPackageDeletion() { + this.track(TrackingActions.DELETE_PACKAGE); + await this.deletePackage(); + const returnTo = + !this.groupListUrl || document.referrer.includes(this.projectName) + ? this.projectListUrl + : this.groupListUrl; // to avoid security issue url are supplied from backend + const modalQuery = objectToQueryString({ [SHOW_DELETE_SUCCESS_ALERT]: true }); + window.location.replace(`${returnTo}?${modalQuery}`); + }, }, i18n: { deleteModalTitle: s__(`PackageRegistry|Delete Package Version`), @@ -147,12 +156,10 @@ export default { /> <div v-else class="packages-app"> - <div class="detail-page-header d-flex justify-content-between flex-column flex-sm-row"> - <package-title /> - - <div class="mt-sm-2"> + <package-title> + <template #delete-button> <gl-button - v-if="canDeletePackage" + v-if="canDelete" v-gl-modal="'delete-modal'" class="js-delete-button" variant="danger" @@ -161,8 +168,8 @@ export default { > {{ __('Delete') }} </gl-button> - </div> - </div> + </template> + </package-title> <gl-tabs> <gl-tab :title="__('Detail')"> @@ -268,22 +275,22 @@ export default { </template> </gl-sprintf> - <div slot="modal-footer" class="w-100"> - <div class="float-right"> - <gl-button @click="cancelDelete()">{{ __('Cancel') }}</gl-button> - <gl-button - ref="modal-delete-button" - data-method="delete" - :to="destroyPath" - variant="danger" - category="primary" - data-qa-selector="delete_modal_button" - @click="track($options.trackingActions.DELETE_PACKAGE)" - > - {{ __('Delete') }} - </gl-button> + <template #modal-footer> + <div class="gl-w-full"> + <div class="float-right"> + <gl-button @click="cancelDelete">{{ __('Cancel') }}</gl-button> + <gl-button + ref="modal-delete-button" + variant="danger" + category="primary" + data-qa-selector="delete_modal_button" + @click="confirmPackageDeletion" + > + {{ __('Delete') }} + </gl-button> + </div> </div> - </div> + </template> </gl-modal> </div> </template> |