Purchase Management: Add pagination and search to purchases DataViews

[sirbrillig]

Proposed Changes

This PR adds support for pagination and search to the DataViews version of the purchases list.

Note

This version of the purchases list is still behind a feature flag. To test this you will need to manually enable the purchases/purchase-list-dataview flag in your local development.json config before starting calypso.

Part of https://linear.app/a8c/project/replace-calypsos-active-upgrades-subscriptions-with-dataviews-a7b39dea5417/overview / #86616
Tracked by https://linear.app/a8c/issue/CHE-152/implement-pagination-on-dataviews-subscription-list

Screenshots

Testing Instructions

• Use an account which has a number of purchases, the more the better.
• Visit /me/purchases with the DataView enabled (see above).
• Verify that entering text into the search field for the purchases list (and the memberships list, if you have any) filters the list by that text. You can use the product name and type (eg "Plan"), the site name, the site domain, and the site primary domain (if different).
• Verify that using the pagination controls (next, previous, and the page selector) works as expected.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-146083

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-146083&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-146083&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• help-center

To test WordPress.com changes, run install-plugin.sh $pluginSlug add-pagination-to-purchases-dataviews on your sandbox.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~662 bytes added 📈 [gzipped])

name       parsed_size           gzip_size
purchases      +2080 B  (+0.1%)     +662 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.