diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-06-02 18:09:59 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-06-02 18:09:59 +0300 |
commit | 1c2ff01b694fd06be15bc20279eef71ee5adf402 (patch) | |
tree | 98a588172ab8021790538a515933cf83552c5086 /app/assets/javascripts/packages/details/components/app.vue | |
parent | 2e4e6e9bb63212c628e67c6865fa39f62217a83d (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/packages/details/components/app.vue')
-rw-r--r-- | app/assets/javascripts/packages/details/components/app.vue | 86 |
1 files changed, 64 insertions, 22 deletions
diff --git a/app/assets/javascripts/packages/details/components/app.vue b/app/assets/javascripts/packages/details/components/app.vue index bcfb17a1529..9d7ba83c001 100644 --- a/app/assets/javascripts/packages/details/components/app.vue +++ b/app/assets/javascripts/packages/details/components/app.vue @@ -13,7 +13,7 @@ import { import { mapActions, mapState } from 'vuex'; import { objectToQueryString } from '~/lib/utils/common_utils'; import { numberToHumanSize } from '~/lib/utils/number_utils'; -import { s__ } from '~/locale'; +import { s__, __ } from '~/locale'; import Tracking from '~/tracking'; import PackageListRow from '../../shared/components/package_list_row.vue'; import PackagesListLoader from '../../shared/components/packages_list_loader.vue'; @@ -51,6 +51,11 @@ export default { }, mixins: [Tracking.mixin()], trackingActions: { ...TrackingActions }, + data() { + return { + fileToDelete: null, + }; + }, computed: { ...mapState([ 'projectName', @@ -86,13 +91,10 @@ export default { }, }, methods: { - ...mapActions(['deletePackage', 'fetchPackageVersions']), + ...mapActions(['deletePackage', 'fetchPackageVersions', 'deletePackageFile']), formatSize(size) { return numberToHumanSize(size); }, - cancelDelete() { - this.$refs.deleteModal.hide(); - }, getPackageVersions() { if (!this.packageEntity.versions) { this.fetchPackageVersions(); @@ -108,12 +110,43 @@ export default { const modalQuery = objectToQueryString({ [SHOW_DELETE_SUCCESS_ALERT]: true }); window.location.replace(`${returnTo}?${modalQuery}`); }, + handleFileDelete(file) { + this.track(TrackingActions.REQUEST_DELETE_PACKAGE_FILE); + this.fileToDelete = { ...file }; + this.$refs.deleteFileModal.show(); + }, + confirmFileDelete() { + this.track(TrackingActions.DELETE_PACKAGE_FILE); + this.deletePackageFile(this.fileToDelete.id); + this.fileToDelete = null; + }, }, i18n: { deleteModalTitle: s__(`PackageRegistry|Delete Package Version`), deleteModalContent: s__( `PackageRegistry|You are about to delete version %{version} of %{name}. Are you sure?`, ), + deleteFileModalTitle: s__(`PackageRegistry|Delete Package File`), + deleteFileModalContent: s__( + `PackageRegistry|You are about to delete %{filename}. This is a destructive action that may render your package unusable. Are you sure?`, + ), + }, + modal: { + packageDeletePrimaryAction: { + text: __('Delete'), + attributes: [ + { variant: 'danger' }, + { category: 'primary' }, + { 'data-qa-selector': 'delete_modal_button' }, + ], + }, + fileDeletePrimaryAction: { + text: __('Delete'), + attributes: [{ variant: 'danger' }, { category: 'primary' }], + }, + cancelAction: { + text: __('Cancel'), + }, }, }; </script> @@ -159,7 +192,9 @@ export default { <package-files v-if="showFiles" :package-files="packageFiles" + :can-delete="canDelete" @download-file="track($options.trackingActions.PULL_PACKAGE)" + @delete-file="handleFileDelete" /> </gl-tab> @@ -210,7 +245,15 @@ export default { </gl-tab> </gl-tabs> - <gl-modal ref="deleteModal" class="js-delete-modal" modal-id="delete-modal"> + <gl-modal + ref="deleteModal" + class="js-delete-modal" + modal-id="delete-modal" + :action-primary="$options.modal.packageDeletePrimaryAction" + :action-cancel="$options.modal.cancelAction" + @primary="confirmPackageDeletion" + @canceled="track($options.trackingActions.CANCEL_DELETE_PACKAGE)" + > <template #modal-title>{{ $options.i18n.deleteModalTitle }}</template> <gl-sprintf :message="$options.i18n.deleteModalContent"> <template #version> @@ -221,23 +264,22 @@ export default { <strong>{{ packageEntity.name }}</strong> </template> </gl-sprintf> + </gl-modal> - <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> - </template> + <gl-modal + ref="deleteFileModal" + modal-id="delete-file-modal" + :action-primary="$options.modal.fileDeletePrimaryAction" + :action-cancel="$options.modal.cancelAction" + @primary="confirmFileDelete" + @canceled="track($options.trackingActions.CANCEL_DELETE_PACKAGE_FILE)" + > + <template #modal-title>{{ $options.i18n.deleteFileModalTitle }}</template> + <gl-sprintf v-if="fileToDelete" :message="$options.i18n.deleteFileModalContent"> + <template #filename> + <strong>{{ fileToDelete.file_name }}</strong> + </template> + </gl-sprintf> </gl-modal> </div> </template> |