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 | 180 |
1 files changed, 20 insertions, 160 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 6d4979ac785..d96418571e1 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 @@ -11,7 +11,7 @@ import { GlTabs, GlSprintf, } from '@gitlab/ui'; -import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/alert'; +import { createAlert } from '~/alert'; import { TYPENAME_PACKAGES_PACKAGE } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import { numberToHumanSize } from '~/lib/utils/number_utils'; @@ -21,10 +21,8 @@ import { packageTypeToTrackCategory } from '~/packages_and_registries/package_re import AdditionalMetadata from '~/packages_and_registries/package_registry/components/details/additional_metadata.vue'; import DependencyRow from '~/packages_and_registries/package_registry/components/details/dependency_row.vue'; import InstallationCommands from '~/packages_and_registries/package_registry/components/details/installation_commands.vue'; -import PackageFiles from '~/packages_and_registries/package_registry/components/details/package_files.vue'; import PackageHistory from '~/packages_and_registries/package_registry/components/details/package_history.vue'; import PackageTitle from '~/packages_and_registries/package_registry/components/details/package_title.vue'; -import PackageVersionsList from '~/packages_and_registries/package_registry/components/details/package_versions_list.vue'; import DeletePackages from '~/packages_and_registries/package_registry/components/functional/delete_packages.vue'; import { PACKAGE_TYPE_NUGET, @@ -35,27 +33,15 @@ import { DELETE_PACKAGE_TRACKING_ACTION, REQUEST_DELETE_PACKAGE_TRACKING_ACTION, CANCEL_DELETE_PACKAGE_TRACKING_ACTION, - DELETE_PACKAGE_FILE_TRACKING_ACTION, - DELETE_PACKAGE_FILES_TRACKING_ACTION, - REQUEST_DELETE_PACKAGE_FILE_TRACKING_ACTION, REQUEST_FORWARDING_HELP_PAGE_PATH, - CANCEL_DELETE_PACKAGE_FILE_TRACKING_ACTION, SHOW_DELETE_SUCCESS_ALERT, FETCH_PACKAGE_DETAILS_ERROR_MESSAGE, - DELETE_PACKAGE_FILE_ERROR_MESSAGE, - DELETE_PACKAGE_FILE_SUCCESS_MESSAGE, - DELETE_PACKAGE_FILES_ERROR_MESSAGE, - DELETE_PACKAGE_FILES_SUCCESS_MESSAGE, DELETE_PACKAGE_REQUEST_FORWARDING_MODAL_CONTENT, - DOWNLOAD_PACKAGE_ASSET_TRACKING_ACTION, DELETE_MODAL_TITLE, DELETE_MODAL_CONTENT, - DELETE_ALL_PACKAGE_FILES_MODAL_CONTENT, - DELETE_LAST_PACKAGE_FILE_MODAL_CONTENT, GRAPHQL_PAGE_SIZE, } from '~/packages_and_registries/package_registry/constants'; -import destroyPackageFilesMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package_files.mutation.graphql'; import getPackageDetails from '~/packages_and_registries/package_registry/graphql/queries/get_package_details.query.graphql'; import getPackageVersionsQuery from '~/packages_and_registries/package_registry/graphql/queries/get_package_versions.query.graphql'; import Tracking from '~/tracking'; @@ -76,9 +62,13 @@ export default { PackageHistory, AdditionalMetadata, InstallationCommands, - PackageFiles, + PackageFiles: () => + import('~/packages_and_registries/package_registry/components/details/package_files.vue'), DeletePackages, - PackageVersionsList, + PackageVersionsList: () => + import( + '~/packages_and_registries/package_registry/components/details/package_versions_list.vue' + ), }, directives: { GlTooltip: GlTooltipDirective, @@ -90,10 +80,6 @@ export default { DELETE_PACKAGE_TRACKING_ACTION, REQUEST_DELETE_PACKAGE_TRACKING_ACTION, CANCEL_DELETE_PACKAGE_TRACKING_ACTION, - DELETE_PACKAGE_FILE_TRACKING_ACTION, - REQUEST_DELETE_PACKAGE_FILE_TRACKING_ACTION, - CANCEL_DELETE_PACKAGE_FILE_TRACKING_ACTION, - DOWNLOAD_PACKAGE_ASSET_TRACKING_ACTION, }, data() { return { @@ -147,18 +133,12 @@ export default { id: convertToGraphQLId(TYPENAME_PACKAGES_PACKAGE, this.packageId), }; }, - packageFiles() { - return this.packageEntity.packageFiles?.nodes; - }, packageType() { return this.packageEntity.packageType; }, isLoading() { return this.$apollo.queries.packageEntity.loading; }, - packageFilesLoading() { - return this.isLoading || this.mutationLoading; - }, isValidPackage() { return this.isLoading || Boolean(this.packageEntity.name); }, @@ -194,14 +174,6 @@ export default { PACKAGE_TYPE_PYPI, ].includes(this.packageType); }, - refetchQueriesData() { - return [ - { - query: getPackageDetails, - variables: this.queryVariables, - }, - ]; - }, refetchVersionsQueryData() { return [ { @@ -228,71 +200,9 @@ export default { window.location.replace(`${returnTo}?${modalQuery}`); }, - async deletePackageFiles(ids) { - this.mutationLoading = true; - try { - const { data } = await this.$apollo.mutate({ - mutation: destroyPackageFilesMutation, - variables: { - projectPath: this.projectPath, - ids, - }, - awaitRefetchQueries: true, - refetchQueries: this.refetchQueriesData, - }); - if (data?.destroyPackageFiles?.errors[0]) { - throw data.destroyPackageFiles.errors[0]; - } - createAlert({ - message: this.isLastItem(ids) - ? DELETE_PACKAGE_FILE_SUCCESS_MESSAGE - : DELETE_PACKAGE_FILES_SUCCESS_MESSAGE, - variant: VARIANT_SUCCESS, - }); - } catch (error) { - createAlert({ - message: this.isLastItem(ids) - ? DELETE_PACKAGE_FILE_ERROR_MESSAGE - : DELETE_PACKAGE_FILES_ERROR_MESSAGE, - variant: VARIANT_WARNING, - captureError: true, - error, - }); - } - this.mutationLoading = false; - }, - handleFileDelete(files) { - this.track(REQUEST_DELETE_PACKAGE_FILE_TRACKING_ACTION); - if ( - 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 (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.isLastItem(this.filesToDelete)) { - this.track(DELETE_PACKAGE_FILE_TRACKING_ACTION); - } else { - this.track(DELETE_PACKAGE_FILES_TRACKING_ACTION); - } - this.deletePackageFiles(this.filesToDelete.map((file) => file.id)); - this.filesToDelete = []; + handleAllFilesDelete(content) { + this.deletePackageModalContent = content; + this.$refs.deleteModal.show(); }, resetDeleteModalContent() { this.deletePackageModalContent = DELETE_MODAL_CONTENT; @@ -300,10 +210,6 @@ export default { }, i18n: { 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?`, - ), otherVersionsTabTitle: s__('PackageRegistry|Other versions'), }, links: { @@ -358,7 +264,7 @@ export default { <gl-tabs> <gl-tab :title="__('Detail')"> - <div v-if="!isLoading" data-qa-selector="package_information_content"> + <div data-qa-selector="package_information_content"> <package-history :package-entity="packageEntity" :project-name="projectName" /> <installation-commands :package-entity="packageEntity" /> @@ -368,16 +274,16 @@ export default { :package-id="packageEntity.id" :package-type="packageType" /> - </div> - <package-files - v-if="showFiles" - :can-delete="packageEntity.canDestroy" - :is-loading="packageFilesLoading" - :package-files="packageFiles" - @download-file="track($options.trackingActions.DOWNLOAD_PACKAGE_ASSET_TRACKING_ACTION)" - @delete-files="handleFileDelete" - /> + <package-files + v-if="showFiles" + :can-delete="packageEntity.canDestroy" + :package-id="packageEntity.id" + :package-type="packageType" + :project-path="projectPath" + @delete-all-files="handleAllFilesDelete" + /> + </div> </gl-tab> <gl-tab v-if="showDependencies"> @@ -468,51 +374,5 @@ export default { </gl-modal> </template> </delete-packages> - - <gl-modal - ref="deleteFileModal" - size="sm" - modal-id="delete-file-modal" - :action-primary="$options.modal.fileDeletePrimaryAction" - :action-cancel="$options.modal.cancelAction" - data-testid="delete-file-modal" - @primary="confirmFilesDelete" - @canceled="track($options.trackingActions.CANCEL_DELETE_PACKAGE_FILE)" - > - <template #modal-title>{{ $options.i18n.deleteFileModalTitle }}</template> - <gl-sprintf v-if="isLastItem(filesToDelete)" :message="$options.i18n.deleteFileModalContent"> - <template #filename> - <strong>{{ filesToDelete[0].fileName }}</strong> - </template> - </gl-sprintf> - </gl-modal> - - <gl-modal - ref="deleteFilesModal" - size="sm" - modal-id="delete-files-modal" - :action-primary="$options.modal.filesDeletePrimaryAction" - :action-cancel="$options.modal.cancelAction" - data-testid="delete-files-modal" - @primary="confirmFilesDelete" - @canceled="track($options.trackingActions.CANCEL_DELETE_PACKAGE_FILE)" - > - <template #modal-title>{{ - n__( - `PackageRegistry|Delete 1 asset`, - `PackageRegistry|Delete %d assets`, - filesToDelete.length, - ) - }}</template> - <span v-if="filesToDelete.length > 0"> - {{ - n__( - `PackageRegistry|You are about to delete 1 asset. This operation is irreversible.`, - `PackageRegistry|You are about to delete %d assets. This operation is irreversible.`, - filesToDelete.length, - ) - }} - </span> - </gl-modal> </div> </template> |