diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/package_registry')
7 files changed, 77 insertions, 38 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue index 11fd0db3106..cee976656f9 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_title.vue @@ -2,7 +2,8 @@ import { GlSprintf, GlBadge, GlResizeObserverDirective } from '@gitlab/ui'; import { GlBreakpointInstance } from '@gitlab/ui/dist/utils'; import { numberToHumanSize } from '~/lib/utils/number_utils'; -import { __ } from '~/locale'; +import { __, s__, sprintf } from '~/locale'; +import { formatDate } from '~/lib/utils/datetime_utility'; import PackageTags from '~/packages_and_registries/shared/components/package_tags.vue'; import { PACKAGE_TYPE_NUGET } from '~/packages_and_registries/package_registry/constants'; import { getPackageTypeLabel } from '~/packages_and_registries/package_registry/utils'; @@ -25,6 +26,7 @@ export default { }, inject: ['isGroupPage'], i18n: { + lastDownloadedAt: s__('PackageRegistry|Last downloaded %{dateTime}'), packageInfo: __('v%{version} published %{timeAgo}'), }, props: { @@ -39,6 +41,11 @@ export default { }; }, computed: { + packageLastDownloadedAtDisplay() { + return sprintf(this.$options.i18n.lastDownloadedAt, { + dateTime: formatDate(this.packageEntity.lastDownloadedAt, 'mmm d, yyyy'), + }); + }, packageTypeDisplay() { return getPackageTypeLabel(this.packageEntity.packageType); }, @@ -136,6 +143,15 @@ export default { <metadata-item data-testid="package-ref" icon="branch" :text="packagePipeline.ref" /> </template> + <template v-if="packageEntity.lastDownloadedAt" #metadata-last-downloaded-at> + <metadata-item + data-testid="package-last-downloaded-at" + icon="download" + :text="packageLastDownloadedAtDisplay" + size="m" + /> + </template> + <template #right-actions> <slot name="delete-button"></slot> </template> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/functional/delete_package.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/functional/delete_package.vue index 7a85fd3052e..e1cf4883029 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/functional/delete_package.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/functional/delete_package.vue @@ -1,6 +1,6 @@ <script> import destroyPackageMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package.mutation.graphql'; -import createFlash from '~/flash'; +import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash'; import { s__ } from '~/locale'; import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages_and_registries/package_registry/constants'; @@ -39,15 +39,15 @@ export default { throw data.destroyPackage.errors[0]; } if (this.showSuccessAlert) { - createFlash({ + createAlert({ message: this.$options.i18n.successMessage, - type: 'success', + variant: VARIANT_SUCCESS, }); } } catch (error) { - createFlash({ + createAlert({ message: this.$options.i18n.errorMessage, - type: 'warning', + variant: VARIANT_WARNING, captureError: true, error, }); diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue index e84f181e9b2..c6583b8f09f 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/packages_list.vue @@ -122,10 +122,9 @@ export default { }, }, i18n: { - deleteModalContent: s__( - 'PackageRegistry|You are about to delete %{name}, this operation is irreversible, are you sure?', - ), - modalAction: s__('PackageRegistry|Delete package'), + deleteModalContent: s__('PackageRegistry|You are about to delete %{name}, are you sure?'), + modalTitle: s__('PackageRegistry|Delete package'), + modalAction: s__('PackageRegistry|Permanently delete'), errorMessageBodyAlert: s__( 'PackageRegistry|There was a timeout and the package was not published. Delete this package and try again.', ), @@ -172,14 +171,14 @@ export default { <gl-modal v-model="showDeleteModal" - modal-id="confirm-delete-pacakge" + modal-id="confirm-delete-package" size="sm" :action-primary="deleteModalActionPrimaryProps" :action-cancel="deleteModalActionCancelProps" @ok="deleteItemConfirmation" @cancel="deleteItemCanceled" > - <template #modal-title>{{ $options.i18n.modalAction }}</template> + <template #modal-title>{{ $options.i18n.modalTitle }}</template> <gl-sprintf :message="$options.i18n.deleteModalContent"> <template #name> <strong>{{ deletePackageName }}</strong> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/constants.js b/app/assets/javascripts/packages_and_registries/package_registry/constants.js index 06a04ee248a..4e35176c757 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/constants.js +++ b/app/assets/javascripts/packages_and_registries/package_registry/constants.js @@ -78,6 +78,17 @@ export const TRACKING_ACTION_CLICK_COMMIT_LINK = 'click_commit_link_from_package export const TRACKING_LABEL_PACKAGE_HISTORY = 'package_history'; export const SHOW_DELETE_SUCCESS_ALERT = 'showSuccessDeleteAlert'; + +export const DELETE_MODAL_TITLE = s__('PackageRegistry|Delete package version'); +export const DELETE_MODAL_CONTENT = s__( + `PackageRegistry|You are about to delete version %{version} of %{name}. Are you sure?`, +); +export const DELETE_ALL_PACKAGE_FILES_MODAL_CONTENT = s__( + `PackageRegistry|Deleting all package assets will remove version %{version} of %{name}. Are you sure?`, +); +export const DELETE_LAST_PACKAGE_FILE_MODAL_CONTENT = s__( + `PackageRegistry|Deleting the last package asset will remove version %{version} of %{name}. Are you sure?`, +); export const DELETE_PACKAGE_FILE_ERROR_MESSAGE = s__( 'PackageRegistry|Something went wrong while deleting the package asset.', ); diff --git a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql index f3f0d096d10..8e50c95b10b 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql +++ b/app/assets/javascripts/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql @@ -4,6 +4,7 @@ query getPackageDetails($id: PackagesPackageID!) { name packageType version + lastDownloadedAt createdAt updatedAt status 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> diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue index 38df701157a..ed9ab0367dd 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue @@ -1,6 +1,6 @@ <script> import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui'; -import createFlash from '~/flash'; +import { createAlert, VARIANT_INFO } from '~/flash'; import { historyReplaceState } from '~/lib/utils/common_utils'; import { s__ } from '~/locale'; import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages_and_registries/shared/constants'; @@ -105,7 +105,7 @@ export default { const showAlert = urlParams.get(SHOW_DELETE_SUCCESS_ALERT); if (showAlert) { // to be refactored to use gl-alert - createFlash({ message: DELETE_PACKAGE_SUCCESS_MESSAGE, type: 'notice' }); + createAlert({ message: DELETE_PACKAGE_SUCCESS_MESSAGE, variant: VARIANT_INFO }); const cleanUrl = window.location.href.split('?')[0]; historyReplaceState(cleanUrl); } |