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 @@ + + 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" /> -
+