Subscribers Dataview: add sort order

[arcangelini]

Closes https://github.com/Automattic/loop/issues/303
Closes https://github.com/Automattic/loop/issues/305
Closes https://github.com/Automattic/loop/issues/307

Proposed Changes

• Adds sort order to the subscriber dataviews
• Extends the subscription context to include the sort order
• Update the query args on sort order update

Why are these changes being made?

• This is needed to accommodate the sorting in data views

Testing Instructions

1. Open live link and go to /subscribers?flags=subscribers-dataviews
2. Sort by name or date ascending and descending
3. Remove flag and test for regressions

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

App Entrypoints (~24 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
entry-subscriptions        +63 B  (+0.0%)      +24 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~202 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
subscribers       +536 B  (+0.0%)     +181 B  (+0.0%)
reader             +63 B  (+0.0%)      +21 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.

Async-loaded Components (~102 bytes added 📈 [gzipped])

name                                                 parsed_size           gzip_size
async-load-calypso-my-sites-stats-pages-subscribers       +272 B  (+0.2%)     +102 B  (+0.2%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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.

[matticbot]

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

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

• blaze-dashboard
• command-palette-wp-admin
• help-center
• notifications
• odyssey-stats
• whats-new
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug subscribers/dataview-sorting on your sandbox.

[allilevine]

Looks good overall! Two things:

1. I can click Subscription Type to sort, but I think it's actually using the Since column. Did you want to add that sorting in this PR?
2. When I first sort, I see the loading circle for a millisecond before the subscribers load. I'm not sure why this would be any slower than what's on staging now, though. An extra check for the sort order?