diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue')
-rw-r--r-- | app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue | 60 |
1 files changed, 36 insertions, 24 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue index c10fc914d56..eeed56b77c3 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue @@ -10,7 +10,7 @@ import { GlTabs, GlSprintf, } from '@gitlab/ui'; -import createFlash from '~/flash'; +import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import { numberToHumanSize } from '~/lib/utils/number_utils'; import { objectToQuery } from '~/lib/utils/url_utility'; @@ -44,6 +44,10 @@ import { DELETE_PACKAGE_FILES_ERROR_MESSAGE, DELETE_PACKAGE_FILES_SUCCESS_MESSAGE, DOWNLOAD_PACKAGE_ASSET_TRACKING_ACTION, + DELETE_MODAL_TITLE, + DELETE_MODAL_CONTENT, + DELETE_ALL_PACKAGE_FILES_MODAL_CONTENT, + DELETE_LAST_PACKAGE_FILE_MODAL_CONTENT, } from '~/packages_and_registries/package_registry/constants'; import destroyPackageFilesMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package_files.mutation.graphql'; @@ -86,6 +90,7 @@ export default { }, data() { return { + deletePackageModalContent: DELETE_MODAL_CONTENT, filesToDelete: [], mutationLoading: false, packageEntity: {}, @@ -101,7 +106,7 @@ export default { return data.package || {}; }, error(error) { - createFlash({ + createAlert({ message: FETCH_PACKAGE_DETAILS_ERROR_MESSAGE, captureError: true, error, @@ -205,20 +210,18 @@ export default { if (data?.destroyPackageFiles?.errors[0]) { throw data.destroyPackageFiles.errors[0]; } - createFlash({ - message: - ids.length === 1 - ? DELETE_PACKAGE_FILE_SUCCESS_MESSAGE - : DELETE_PACKAGE_FILES_SUCCESS_MESSAGE, - type: 'success', + createAlert({ + message: this.isLastItem(ids) + ? DELETE_PACKAGE_FILE_SUCCESS_MESSAGE + : DELETE_PACKAGE_FILES_SUCCESS_MESSAGE, + variant: VARIANT_SUCCESS, }); } catch (error) { - createFlash({ - message: - ids.length === 1 - ? DELETE_PACKAGE_FILE_ERROR_MESSAGE - : DELETE_PACKAGE_FILES_ERROR_MESSAGE, - type: 'warning', + createAlert({ + message: this.isLastItem(ids) + ? DELETE_PACKAGE_FILE_ERROR_MESSAGE + : DELETE_PACKAGE_FILES_ERROR_MESSAGE, + variant: VARIANT_WARNING, captureError: true, error, }); @@ -231,18 +234,26 @@ export default { files.length === this.packageFiles.length && !this.packageEntity.packageFiles?.pageInfo?.hasNextPage ) { + if (this.isLastItem(files)) { + this.deletePackageModalContent = DELETE_LAST_PACKAGE_FILE_MODAL_CONTENT; + } else { + this.deletePackageModalContent = DELETE_ALL_PACKAGE_FILES_MODAL_CONTENT; + } this.$refs.deleteModal.show(); } else { this.filesToDelete = files; - if (files.length === 1) { + if (this.isLastItem(files)) { this.$refs.deleteFileModal.show(); } else if (files.length > 1) { this.$refs.deleteFilesModal.show(); } } }, + isLastItem(items) { + return items.length === 1; + }, confirmFilesDelete() { - if (this.filesToDelete.length === 1) { + if (this.isLastItem(this.filesToDelete)) { this.track(DELETE_PACKAGE_FILE_TRACKING_ACTION); } else { this.track(DELETE_PACKAGE_FILES_TRACKING_ACTION); @@ -250,12 +261,12 @@ export default { this.deletePackageFiles(this.filesToDelete.map((file) => file.id)); this.filesToDelete = []; }, + resetDeleteModalContent() { + this.deletePackageModalContent = DELETE_MODAL_CONTENT; + }, }, i18n: { - deleteModalTitle: s__(`PackageRegistry|Delete Package Version`), - deleteModalContent: s__( - `PackageRegistry|You are about to delete version %{version} of %{name}. Are you sure?`, - ), + DELETE_MODAL_TITLE, deleteFileModalTitle: s__(`PackageRegistry|Delete package asset`), deleteFileModalContent: s__( `PackageRegistry|You are about to delete %{filename}. This is a destructive action that may render your package unusable. Are you sure?`, @@ -263,7 +274,7 @@ export default { }, modal: { packageDeletePrimaryAction: { - text: __('Delete'), + text: s__('PackageRegistry|Permanently delete'), attributes: [ { variant: 'danger' }, { category: 'primary' }, @@ -371,10 +382,11 @@ export default { :action-primary="$options.modal.packageDeletePrimaryAction" :action-cancel="$options.modal.cancelAction" @primary="deletePackage(packageEntity)" + @hidden="resetDeleteModalContent" @canceled="track($options.trackingActions.CANCEL_DELETE_PACKAGE)" > - <template #modal-title>{{ $options.i18n.deleteModalTitle }}</template> - <gl-sprintf :message="$options.i18n.deleteModalContent"> + <template #modal-title>{{ $options.i18n.DELETE_MODAL_TITLE }}</template> + <gl-sprintf :message="deletePackageModalContent"> <template #version> <strong>{{ packageEntity.version }}</strong> </template> @@ -398,7 +410,7 @@ export default { @canceled="track($options.trackingActions.CANCEL_DELETE_PACKAGE_FILE)" > <template #modal-title>{{ $options.i18n.deleteFileModalTitle }}</template> - <gl-sprintf v-if="filesToDelete.length === 1" :message="$options.i18n.deleteFileModalContent"> + <gl-sprintf v-if="isLastItem(filesToDelete)" :message="$options.i18n.deleteFileModalContent"> <template #filename> <strong>{{ filesToDelete[0].fileName }}</strong> </template> |