Add keyset pagination to the artifact registry repositories list

Rahul Chanilarequested to merge
602638-repositories-list-step-10 into master

What does this MR do and why?

Pages the Artifact Registry repositories list.

  • The pager renders from the connection's pageInfo.
  • The active cursor lives in the route query, so a page is shareable and survives a reload.
  • The smart query's variables point at that cursor and a fixed page size (GRAPHQL_PAGE_SIZE). The pager exposes previous and next only, so there is no page-size selector.
  • A filter or sort change drops the active cursor, so a new selection renders from its first page.
  • A page change re-announces the result set through the live region, even when the result state is unchanged.

The cache keys the connection on its filters alone, so every page of one selection shares a cache entry and a cache-first read would answer a page change with the page it already holds. The query uses cache-and-network instead, which is what makes the cursor take effect. This follows the container registry's tags_list.vue.

The mock resolvers page too (base64 cursor carrying the row's name, forward and backward slicing, a full pageInfo), so the routed view moves through pages in a browser before the schema-backed connection exists.

Behind the artifact_registry_ui flag, which is off by default, so no changelog entry.

References

  • Spec: monolith/S04 repositories list, acceptance criteria 9 (paging) and 12 (page announcement)
  • The pager is the last step of the S04 Phase 1 slice, after !247731 (merged) (route and page shell) and !248084 (merged) (table)

Screenshots or screen recordings

Before After

How to set up and validate locally

  1. Enable the feature flag in the Rails console:

    Feature.enable(:artifact_registry_ui)

  2. Lower the page size so the pager renders. graphql/seed_data.js seeds one repository per format (4 rows), and GRAPHQL_PAGE_SIZE is 20, so hasNextPage is always false against the mock data and the pager stays hidden. Set it to 1 or 2 in ee/app/assets/javascripts/packages_and_registries/artifact_registry/constants.js:

    export const GRAPHQL_PAGE_SIZE = 1;

    Keep this as a local edit; do not commit it. The view still reads the constant everywhere, so nothing else needs changing. Wait for the webpack rebuild before reloading, or the browser keeps serving the old bundle.

  3. Visit the repositories list at /o/<organization-path>/-/artifact_registry/<slug>/repositories.

  4. Click Next. The URL gains an after=<cursor> parameter and the next page renders.

  5. Click Previous. The after parameter is replaced by before=<cursor> and the first page renders again. This is what proves the cache policy replaces the page rather than appending to it.

  6. Reload on a non-first page. The same page renders, from the cursor in the URL.

  7. With a cursor active, change the format or type filter. The cursor is dropped from the URL and the new selection renders from its first page.

  8. With a screen reader (or by watching the live region in devtools), page forward between two pages that land in the same result state. The result set is announced again.

  9. Restore GRAPHQL_PAGE_SIZE to 20 when you are done.

Tests

yarn jest ee/spec/frontend/packages_and_registries/artifact_registry
VUE_VERSION=3 yarn jest ee/spec/frontend/packages_and_registries/artifact_registry

Both pass: 29 suites, 602 tests.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #602638 (closed)

Merge request reports