diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue index fe29fa8fdd7fe0235e569473310b2826b04b833a..6881f914e3149540faf6978b71188ac1d7c4c8d6 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue @@ -12,6 +12,7 @@ import { get } from 'lodash'; import getContainerRepositoriesQuery from 'shared_queries/container_registry/get_container_repositories.query.graphql'; import { createAlert } from '~/alert'; import { WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants'; +import { fetchPolicies } from '~/lib/graphql'; import Tracking from '~/tracking'; import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue'; import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants'; @@ -87,6 +88,7 @@ export default { return !this.fetchBaseQuery; }, query: getContainerRepositoriesQuery, + fetchPolicy: fetchPolicies.CACHE_AND_NETWORK, variables() { return this.queryVariables; }, @@ -109,6 +111,7 @@ export default { return !this.fetchAdditionalDetails; }, query: getContainerRepositoriesDetails, + fetchPolicy: fetchPolicies.CACHE_AND_NETWORK, variables() { return this.queryVariables; }, @@ -133,6 +136,7 @@ export default { mutationLoading: false, fetchBaseQuery: false, fetchAdditionalDetails: false, + pageParams: {}, }; }, computed: { @@ -158,6 +162,7 @@ export default { fullPath: this.config.isGroupPage ? this.config.groupPath : this.config.projectPath, isGroupPage: this.config.isGroupPage, first: GRAPHQL_PAGE_SIZE, + ...this.pageParams, }; }, tracking() { @@ -193,54 +198,25 @@ export default { this.deleteAlertType = null; this.itemToDelete = {}; }, - updateQuery(_, { fetchMoreResult }) { - return fetchMoreResult; - }, async fetchNextPage() { - if (this.pageInfo?.hasNextPage) { - const variables = { - after: this.pageInfo?.endCursor, - first: GRAPHQL_PAGE_SIZE, - }; - - this.$apollo.queries.baseImages.fetchMore({ - variables, - updateQuery: this.updateQuery, - }); - - await this.$nextTick(); - - this.$apollo.queries.additionalDetails.fetchMore({ - variables, - updateQuery: this.updateQuery, - }); - } + this.pageParams = { + after: this.pageInfo?.endCursor, + first: GRAPHQL_PAGE_SIZE, + }; }, async fetchPreviousPage() { - if (this.pageInfo?.hasPreviousPage) { - const variables = { - first: null, - before: this.pageInfo?.startCursor, - last: GRAPHQL_PAGE_SIZE, - }; - this.$apollo.queries.baseImages.fetchMore({ - variables, - updateQuery: this.updateQuery, - }); - - await this.$nextTick(); - - this.$apollo.queries.additionalDetails.fetchMore({ - variables, - updateQuery: this.updateQuery, - }); - } + this.pageParams = { + first: null, + before: this.pageInfo?.startCursor, + last: GRAPHQL_PAGE_SIZE, + }; }, startDelete() { this.track('confirm_delete'); this.mutationLoading = true; }, handleSearchUpdate({ sort, filters }) { + this.pageParams = {}; this.sorting = sort; const search = filters.find((i) => i.type === FILTERED_SEARCH_TERM); diff --git a/spec/features/projects/container_registry_spec.rb b/spec/features/projects/container_registry_spec.rb index 493435d3439909e69685b056bfca93a8712b53b6..c3c660e5ebbb4b8ea60c2799350a3eef4298f1fc 100644 --- a/spec/features/projects/container_registry_spec.rb +++ b/spec/features/projects/container_registry_spec.rb @@ -185,14 +185,6 @@ visit_next_page expect(page).to have_content 'my/image' end - - it 'pagination is preserved after navigating back from details' do - visit_next_page - click_link 'my/image' - breadcrumb = find '.breadcrumbs' - breadcrumb.click_link 'Container Registry' - expect(page).to have_content 'my/image' - end end def visit_container_registry diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js index 1823bbfe53306297d60d318f539a94696c25fc2a..211c52a25bee570c1c2c8ca77818b8f8274842b6 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js @@ -15,6 +15,7 @@ import RegistryHeader from '~/packages_and_registries/container_registry/explore import { DELETE_IMAGE_SUCCESS_MESSAGE, DELETE_IMAGE_ERROR_MESSAGE, + GRAPHQL_PAGE_SIZE, SORT_FIELDS, SETTINGS_TEXT, } from '~/packages_and_registries/container_registry/explorer/constants'; @@ -474,10 +475,18 @@ describe('List Page', () => { await waitForPromises(); expect(resolver).toHaveBeenCalledWith( - expect.objectContaining({ before: pageInfo.startCursor }), + expect.objectContaining({ + before: pageInfo.startCursor, + first: null, + last: GRAPHQL_PAGE_SIZE, + }), ); expect(detailsResolver).toHaveBeenCalledWith( - expect.objectContaining({ before: pageInfo.startCursor }), + expect.objectContaining({ + before: pageInfo.startCursor, + first: null, + last: GRAPHQL_PAGE_SIZE, + }), ); }); @@ -494,10 +503,16 @@ describe('List Page', () => { await waitForPromises(); expect(resolver).toHaveBeenCalledWith( - expect.objectContaining({ after: pageInfo.endCursor }), + expect.objectContaining({ + after: pageInfo.endCursor, + first: GRAPHQL_PAGE_SIZE, + }), ); expect(detailsResolver).toHaveBeenCalledWith( - expect.objectContaining({ after: pageInfo.endCursor }), + expect.objectContaining({ + after: pageInfo.endCursor, + first: GRAPHQL_PAGE_SIZE, + }), ); }); });