diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries')
3 files changed, 122 insertions, 13 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue new file mode 100644 index 00000000000..efc60c9c037 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/details/package_versions_list.vue @@ -0,0 +1,57 @@ +<script> +import { GlKeysetPagination } from '@gitlab/ui'; +import VersionRow from '~/packages_and_registries/package_registry/components/details/version_row.vue'; +import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue'; + +export default { + components: { + VersionRow, + GlKeysetPagination, + PackagesListLoader, + }, + props: { + versions: { + type: Array, + required: true, + default: () => [], + }, + pageInfo: { + type: Object, + required: true, + }, + isLoading: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + showPagination() { + return this.pageInfo.hasPreviousPage || this.pageInfo.hasNextPage; + }, + isListEmpty() { + return this.versions.length === 0; + }, + }, +}; +</script> +<template> + <div> + <div v-if="isLoading"> + <packages-list-loader /> + </div> + <slot v-else-if="isListEmpty" name="empty-state"></slot> + <div v-else> + <version-row v-for="version in versions" :key="version.id" :package-entity="version" /> + <div class="gl-display-flex gl-justify-content-center"> + <gl-keyset-pagination + v-if="showPagination" + v-bind="pageInfo" + class="gl-mt-3" + @prev="$emit('prev-page')" + @next="$emit('next-page')" + /> + </div> + </div> + </div> +</template> 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 8e50c95b10b..51e0ab5aba8 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 @@ -1,4 +1,10 @@ -query getPackageDetails($id: PackagesPackageID!) { +query getPackageDetails( + $id: PackagesPackageID! + $first: Int + $last: Int + $after: String + $before: String +) { package(id: $id) { id name @@ -55,7 +61,7 @@ query getPackageDetails($id: PackagesPackageID!) { downloadPath } } - versions(first: 100) { + versions(after: $after, before: $before, first: $first, last: $last) { nodes { id name @@ -69,6 +75,12 @@ query getPackageDetails($id: PackagesPackageID!) { } } } + pageInfo { + hasNextPage + hasPreviousPage + endCursor + startCursor + } } dependencyLinks { nodes { 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 eeed56b77c3..c59dcaee411 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 @@ -22,7 +22,7 @@ import InstallationCommands from '~/packages_and_registries/package_registry/com 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 VersionRow from '~/packages_and_registries/package_registry/components/details/version_row.vue'; +import PackageVersionsList from '~/packages_and_registries/package_registry/components/details/package_versions_list.vue'; import DeletePackage from '~/packages_and_registries/package_registry/components/functional/delete_package.vue'; import { PACKAGE_TYPE_NUGET, @@ -48,6 +48,7 @@ import { 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'; @@ -65,13 +66,13 @@ export default { GlTabs, GlSprintf, PackageTitle, - VersionRow, DependencyRow, PackageHistory, AdditionalMetadata, InstallationCommands, PackageFiles, DeletePackage, + PackageVersionsList, }, directives: { GlTooltip: GlTooltipDirective, @@ -132,6 +133,7 @@ export default { queryVariables() { return { id: convertToGraphQLId('Packages::Package', this.packageId), + first: GRAPHQL_PAGE_SIZE, }; }, packageFiles() { @@ -157,6 +159,9 @@ export default { hasVersions() { return this.packageEntity.versions?.nodes?.length > 0; }, + versionPageInfo() { + return this.packageEntity?.versions?.pageInfo ?? {}; + }, packageDependencies() { return this.packageEntity.dependencyLinks?.nodes || []; }, @@ -264,6 +269,34 @@ export default { resetDeleteModalContent() { this.deletePackageModalContent = DELETE_MODAL_CONTENT; }, + updateQuery(_, { fetchMoreResult }) { + return fetchMoreResult; + }, + fetchPreviousVersionsPage() { + const variables = { + ...this.queryVariables, + first: null, + last: GRAPHQL_PAGE_SIZE, + before: this.versionPageInfo?.startCursor, + }; + this.$apollo.queries.packageEntity.fetchMore({ + variables, + updateQuery: this.updateQuery, + }); + }, + fetchNextVersionsPage() { + const variables = { + ...this.queryVariables, + first: GRAPHQL_PAGE_SIZE, + last: null, + after: this.versionPageInfo?.endCursor, + }; + + this.$apollo.queries.packageEntity.fetchMore({ + variables, + updateQuery: this.updateQuery, + }); + }, }, i18n: { DELETE_MODAL_TITLE, @@ -271,6 +304,7 @@ export default { deleteFileModalContent: s__( `PackageRegistry|You are about to delete %{filename}. This is a destructive action that may render your package unusable. Are you sure?`, ), + otherVersionsTabTitle: __('Other versions'), }, modal: { packageDeletePrimaryAction: { @@ -303,7 +337,7 @@ export default { :description="s__('PackageRegistry|There was a problem fetching the details for this package.')" :svg-path="emptyListIllustration" /> - <div v-else-if="!isLoading" class="packages-app"> + <div v-else-if="projectName" class="packages-app"> <package-title :package-entity="packageEntity"> <template #delete-button> <gl-button @@ -358,14 +392,20 @@ export default { </p> </gl-tab> - <gl-tab :title="__('Other versions')" title-item-class="js-versions-tab"> - <template v-if="hasVersions"> - <version-row v-for="v in packageEntity.versions.nodes" :key="v.id" :package-entity="v" /> - </template> - - <p v-else class="gl-mt-3" data-testid="no-versions-message"> - {{ s__('PackageRegistry|There are no other versions of this package.') }} - </p> + <gl-tab :title="$options.i18n.otherVersionsTabTitle" title-item-class="js-versions-tab" lazy> + <package-versions-list + :is-loading="isLoading" + :page-info="versionPageInfo" + :versions="packageEntity.versions.nodes" + @prev-page="fetchPreviousVersionsPage" + @next-page="fetchNextVersionsPage" + > + <template #empty-state> + <p class="gl-mt-3" data-testid="no-versions-message"> + {{ s__('PackageRegistry|There are no other versions of this package.') }} + </p> + </template> + </package-versions-list> </gl-tab> </gl-tabs> |