Subscribers: add plan filtering and sorting

[arcangelini]

Related to #

Proposed Changes

• Add query to check paid subscriptions
• Add paid and free to filter options for query and use state instead of query args to store value

Filter	Sort

Why are these changes being made?

This allows us to filter in the dataview component by plan and sort as well. This is only available if the user has subscribers otherwise subscriptions is not filter/sort-able.

This also need the API update to accommodate this request. 170845-ghe-Automattic/wpcom [ MERGED ] ✅

Testing Instructions

1. Go to /subscribers/[ YOUR_SITE ]?flags=subscribers-dataviews
2. If you have subscribers you should be able to filter and sort by them.
3. Go to /subscribers/[ YOUR_SITE ]
4. Make sure there are no regressions

[matticbot]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-130997&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 (~22 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
entry-subscriptions        +42 B  (+0.0%)      +22 B  (+0.0%)

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

Sections (~363 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
subscribers       +896 B  (+0.1%)     +337 B  (+0.1%)
reader             +42 B  (+0.0%)      +26 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 (~134 bytes added 📈 [gzipped])

name                                                 parsed_size           gzip_size
async-load-calypso-my-sites-stats-pages-subscribers       +481 B  (+0.3%)     +134 B  (+0.3%)

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

• notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug subscriber-dataview/add-filter on your sandbox.

[arcangelini]

Just merged the API update. This should be good to test now 👍👍

[allilevine]

@arcangelini Does this initially filter out email subscribers for sites with many subscribers, and then add the filtering option to Dataviews?