Skip to content

Step 4/4: Add pagination to GraphQL release page

Nathan Friend requested to merge nfriend-add-graphql-releases-page-pagination into master

What does this MR do?

Adds pagination to the Releases page when the graphql_releases_page feature flag is enabled.

Currently, when this feature flag is enabled, the page looks identical to the REST version of the page except that the pagination controls are missing.

Feature flag

Since this is the last step of #214241 (closed), this MR also enables the graphql_releases_page feature flag by default, effectively making the GraphQL version of the Releases page the default.

Screenshots

Before (or when graphql_releases_page is disabled) After
Screen_Shot_2020-09-04_at_9.28.24_PM image

Other user-facing changes

The only other user-facing change is the URL structure:

Description Before After
Initial navigation to the Releases page (no change) /-/releases /-/releases
Clicking the Next button /-/releases?page=2 /-/releases?after=eyJpZCI6IjIiLCJyZWxlYXNlZF9hdCI6IjIwMjAtMDctMDkgMTk6MjA6MDYuOTY3NDM3MDAwIFVUQyJ9
Clicking the Prev button /-/releases?page=1 /-/releases?before=eyJpZCI6IjIiLCJyZWxlYXNlZF9hdCI6IjIwMjAtMDctMDkgMTk6MjA6MDYuOTY3NDM3MDAwIFVUQyJ9

The Big PictureTM

This MR is one piece of a larger effort (#214241 (closed)):

  • Step 1 (!33095 (merged)): Update the frontend to fetch its data from the GraphQL endpoint (without any pagination)
  • Step 2 (!41621 (merged)): Add pagination components (but don't use them yet)
  • Step 3 (!41636 (merged)): Pass data through Vuex store instead of through props
  • Step 4 (this MR): Begin using the components from step 2

Each of these steps are dependent on the preceding step.

Edited by Nathan Friend

Merge request reports