Increase items per page on A4A Development sites page.

[andregardi]

Closes https://github.com/Automattic/dotcom-forge/issues/9193

Proposed Changes

On A4A sites dashboard we list 50 sites per page, that are requested by the /wpcom/v2/jetpack-agency/sites API. It uses Elastic Search under the hood.

When filtering for Development sites, the server does not fetch the 50 development sites, but rather fetch the first 50 sites and within that array it filters the result to include only development sites.

If the agency has less than 50 sites, user will never miss any development site on the list.
But if the agency has 51 sites or more and created a new development site, the first page of https://agencies.automattic.com/sites?is_development will not include the new development site.

As a temporary fix, we are increasing the items per page for development sites to 100.
We are planning to work on a better fix on server side, but could not found a good solution yet.

Testing Instructions

Pull this branch to your local environment.
If you agency already has 50 sites, you can easily test by creating a new development site and check that it appears on http://agencies.localhost:3000/sites?is_development

If you don't have so many sites, you can still test it by reducing the default per page constant for the overall dashboard.

• Have at least a couple development sites. If you have all 5 even better.
• On client/a8c-for-agencies/components/items-dashboard/constants.ts reduce the perPage from 50 to 1.
• Navigate on different dashboard, you should see only 1 site per page.
• When navigating, specifically on Development page, you should be able to see all development sites.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-120155&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

• notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug agardi/a4a-increase-development-sites-per-page on your sandbox.

[matticbot]

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

Sections (~20 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
a8c-for-agencies-sites        +21 B  (+0.0%)      +20 B  (+0.0%)

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.

[ivan-ottinger]

The change looks good and works as expected. 👌🏼🙂

I left just one minor idea on how we could adjust the comment.

[mashikag]

Based on the issue definition we should apply the same fetch logic for:

"Favourites", "Needs attention", and "Development sites".

But I believe the request for development sites is the only one facing the issue. @andregardi , that is also why you implemented the "quick" fix for dev sites only, right?