Read site features from the generic site object, stop querying them separately

[jsnajdr]

Since D160707-code every site's features.active data are available on the site object fetched from the generic /me/sites and /sites/:site endpoints. Checking whether site A has feature B is a generic task used across the entire Calypso app, across all screens. So it's only natural that the features info is easily available by default.

This PR is a very unfinished draft patch that shows how this will lead to simplifying Calypso code.

Screens that show site-specific information run the siteSelection routing middleware that postpones rendering the React UI until the site in the route is really fetched. That means that the React UI can reliably read from getSelectedSite and doesn't need to wait for anything or explicitly query anything. The QuerySiteFeatures code can be completely removed.

Things that need to be done before this patch is ready:

• there are few places that look at features.available. That's not part of the /sites response because the .available field is expensive, big, and rarely used. These places currently don't work, we'll need to fetch the data there explicitly. It's the getPlansForFeature selector. Find where it's used and you'll the places that are currently broken.
• verify site fetching in Stepper. The siteSelection routing middleware is on classic Calypso screens, but Stepper is different. It uses a somewhat convoluted combination of Redux and a wp/data store for fetching sites.
• verify also Jetpack Cloud, another area where I'm not very confident.

@tyxla will be interested to see this, and also @obenland

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-ca01f6fce6a35005f59ef9e5fcbf20d9ff2f81b9

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

name                 parsed_size           gzip_size
entry-stepper            -2971 B  (-0.1%)     -619 B  (-0.1%)
entry-main               -2932 B  (-0.1%)     -597 B  (-0.1%)
entry-subscriptions       -105 B  (-0.0%)     -482 B  (-0.1%)

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

Sections (~656 bytes removed 📉 [gzipped])

name                               parsed_size           gzip_size
sites-dashboard                        -5291 B  (-0.4%)    -2266 B  (-0.6%)
site-performance                       -5291 B  (-0.3%)    -2276 B  (-0.5%)
site-monitoring                        -5291 B  (-0.4%)    -2278 B  (-0.6%)
site-logs                              -5291 B  (-0.4%)    -2278 B  (-0.6%)
hosting-features                       -5291 B  (-0.4%)    -2273 B  (-0.6%)
github-deployments                     -5291 B  (-0.4%)    -2277 B  (-0.6%)
staging-site                           -4613 B  (-0.3%)    -2082 B  (-0.5%)
plugin-bundle-flow                      +900 B  (+0.5%)     +215 B  (+0.3%)
checkout                                +873 B  (+0.0%)     +206 B  (+0.0%)
backup                                  -857 B  (-0.1%)     -225 B  (-0.1%)
themes                                  +829 B  (+0.1%)     +182 B  (+0.1%)
google-my-business                      +829 B  (+0.2%)     +206 B  (+0.1%)
transferring-hosted-site-flow           +678 B  (+0.7%)     +218 B  (+0.7%)
scan                                    -539 B  (-0.1%)     -170 B  (-0.1%)
jetpack-cloud                           -419 B  (-0.1%)     -190 B  (-0.2%)
jetpack-social                          +373 B  (+0.1%)      +37 B  (+0.0%)
earn                                    -338 B  (-0.0%)     -112 B  (-0.0%)
hosting                                 +311 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud-agency-sites-v2           +289 B  (+0.0%)      +16 B  (+0.0%)
settings                                -270 B  (-0.0%)     -136 B  (-0.1%)
home                                    -270 B  (-0.0%)     -151 B  (-0.0%)
copy-site-flow                          -270 B  (-0.0%)     -136 B  (-0.1%)
woocommerce                             +195 B  (+0.1%)      +14 B  (+0.0%)
site-blocks                             +195 B  (+0.0%)      +19 B  (+0.0%)
settings-reading                        +195 B  (+0.0%)      +14 B  (+0.0%)
settings-newsletter                     +195 B  (+0.0%)      +14 B  (+0.0%)
security                                +195 B  (+0.0%)      +18 B  (+0.0%)
reader                                  +195 B  (+0.0%)      +14 B  (+0.0%)
promote-post-i2                         +195 B  (+0.0%)      +14 B  (+0.0%)
privacy                                 +195 B  (+0.0%)      +19 B  (+0.0%)
preview                                 +195 B  (+0.1%)      +14 B  (+0.0%)
pages                                   +195 B  (+0.0%)      +14 B  (+0.0%)
notification-settings                   +195 B  (+0.0%)      +27 B  (+0.0%)
migrate                                 +195 B  (+0.1%)      +14 B  (+0.0%)
me                                      +195 B  (+0.0%)      +19 B  (+0.0%)
jetpack-search                          +195 B  (+0.0%)      +14 B  (+0.0%)
jetpack-cloud-pricing                   +195 B  (+0.0%)      +14 B  (+0.0%)
jetpack-cloud-partner-portal            +195 B  (+0.0%)      +14 B  (+0.0%)
jetpack-cloud-overview                  +195 B  (+0.0%)      +14 B  (+0.0%)
jetpack-cloud-features-comparison       +195 B  (+0.0%)      +14 B  (+0.0%)
import-hosted-site-flow                 +195 B  (+0.0%)      +17 B  (+0.0%)
import                                  +195 B  (+0.0%)      +14 B  (+0.0%)
help                                    +195 B  (+0.0%)      +20 B  (+0.0%)
gutenberg-editor                        +195 B  (+0.0%)      +14 B  (+0.0%)
export                                  +195 B  (+0.1%)      +14 B  (+0.0%)
developer                               +195 B  (+0.0%)      +17 B  (+0.0%)
customize                               +195 B  (+0.1%)      +14 B  (+0.0%)
concierge                               +195 B  (+0.0%)      +14 B  (+0.0%)
comments                                +195 B  (+0.0%)      +13 B  (+0.0%)
add-ons                                 +195 B  (+0.1%)      +14 B  (+0.0%)
account-close                           +195 B  (+0.0%)      +18 B  (+0.0%)
account                                 +195 B  (+0.0%)      +14 B  (+0.0%)
activity                                +177 B  (+0.0%)      +11 B  (+0.0%)
a8c-for-agencies-sites                  -167 B  (-0.0%)      -91 B  (-0.0%)
write-flow                              +151 B  (+0.0%)      -23 B  (-0.0%)
woocommerce-installation                +151 B  (+0.0%)       -6 B  (-0.0%)
videopress-flow                         +151 B  (+0.0%)      -23 B  (-0.0%)
update-design-flow                      +151 B  (+0.0%)       +3 B  (+0.0%)
theme                                   +151 B  (+0.0%)       -9 B  (-0.0%)
subscribers                             +151 B  (+0.0%)      -12 B  (-0.0%)
site-purchases                          +151 B  (+0.0%)       -4 B  (-0.0%)
settings-writing                        +151 B  (+0.0%)      -10 B  (-0.0%)
settings-podcast                        +151 B  (+0.0%)      -14 B  (-0.0%)
settings-performance                    +151 B  (+0.0%)       -9 B  (-0.0%)
settings-discussion                     +151 B  (+0.0%)      -13 B  (-0.0%)
sensei-flow                             +151 B  (+0.0%)      +14 B  (+0.0%)
purchases                               +151 B  (+0.0%)       -4 B  (-0.0%)
posts-custom                            +151 B  (+0.0%)      -23 B  (-0.0%)
posts                                   +151 B  (+0.0%)      -23 B  (-0.0%)
plans                                   +151 B  (+0.0%)      -11 B  (-0.0%)
people                                  +151 B  (+0.0%)      -14 B  (-0.0%)
media                                   +151 B  (+0.0%)      -15 B  (-0.0%)
marketplace                             +151 B  (+0.0%)       -9 B  (-0.0%)
marketing                               +151 B  (+0.0%)      -13 B  (-0.0%)
link-in-bio-tld-flow                    +151 B  (+0.0%)      -24 B  (-0.0%)
jetpack-cloud-settings                  +151 B  (+0.0%)       -4 B  (-0.0%)
email                                   +151 B  (+0.0%)      -18 B  (-0.0%)
domains                                 +151 B  (+0.0%)       -4 B  (-0.0%)
build-flow                              +151 B  (+0.0%)      -23 B  (-0.0%)
settings-jetpack                         +69 B  (+0.0%)      -21 B  (-0.0%)
jetpack-connect                          +66 B  (+0.0%)      -33 B  (-0.0%)
settings-security                        +60 B  (+0.0%)      -46 B  (-0.0%)
plugins                                  -39 B  (-0.0%)      +39 B  (+0.0%)
jetpack-cloud-plugin-management          -39 B  (-0.0%)      +39 B  (+0.0%)
stats                                    +24 B  (+0.0%)      -38 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 (~187 bytes removed 📉 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-signup-steps-page-picker                                                    +678 B  (+0.2%)     +192 B  (+0.2%)
async-load-purchase-modal-wrapper                                                      +678 B  (+0.2%)     +192 B  (+0.2%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...       +678 B  (+0.2%)     +192 B  (+0.2%)
async-load-calypso-my-sites-checkout-modal                                             +678 B  (+0.1%)     +192 B  (+0.1%)
async-load-calypso-blocks-editor-checkout-modal                                        +678 B  (+0.1%)     +192 B  (+0.1%)
async-load-calypso-state-lib-automated-transfer-middleware                             -278 B  (-1.0%)      -68 B  (-0.8%)
async-load-signup-steps-site-picker                                                    +195 B  (+0.1%)      +14 B  (+0.0%)
async-load-signup-steps-difm-site-picker                                               +195 B  (+0.1%)      +14 B  (+0.0%)
async-load-design-playground                                                           +195 B  (+0.0%)      +33 B  (+0.0%)
async-load-calypso-components-sites-popover                                            +195 B  (+0.2%)      +14 B  (+0.0%)
async-load-signup-steps-store-features                                                 -161 B  (-0.4%)      -59 B  (-0.4%)
async-load-signup-steps-domains                                                        +151 B  (+0.0%)       +8 B  (+0.0%)
async-load-design-blocks                                                               +151 B  (+0.0%)      -23 B  (-0.0%)
async-load-design                                                                      +151 B  (+0.0%)       +8 B  (+0.0%)
async-load-calypso-blocks-jitm-templates-sidebar-banner                                +151 B  (+0.3%)       -7 B  (-0.0%)
async-load-calypso-blocks-jitm-templates-notice                                        +151 B  (+0.3%)       -6 B  (-0.0%)
async-load-calypso-blocks-jitm-templates-default                                       +151 B  (+0.3%)       -6 B  (-0.0%)
async-load-calypso-jetpack-cloud-sections-sidebar-navigation-manage-selected-...       -124 B  (-0.1%)      -33 B  (-0.1%)
async-load-store-app-store-stats-listview                                               -44 B  (-0.0%)      -18 B  (-0.0%)
async-load-store-app-store-stats                                                        -44 B  (-0.0%)      -19 B  (-0.0%)
async-load-signup-steps-woocommerce-install-confirm                                     -44 B  (-0.1%)      -20 B  (-0.1%)
async-load-signup-steps-theme-selection                                                 -44 B  (-0.0%)      -33 B  (-0.0%)
async-load-signup-steps-design-picker                                                   -44 B  (-0.1%)      -23 B  (-0.1%)
async-load-calypso-reader-sidebar                                                       -44 B  (-0.0%)      -24 B  (-0.1%)
async-load-calypso-post-editor-editor-media-modal                                       -44 B  (-0.0%)      -28 B  (-0.0%)
async-load-calypso-my-sites-current-site-notice                                         -44 B  (-0.1%)      -28 B  (-0.1%)
async-load-calypso-components-web-preview-component                                     -44 B  (-0.0%)      -37 B  (-0.0%)

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.

[tyxla]

This is nice work @jsnajdr 👍

I wonder if we can split this one into multiple pieces, based on the people we can ping for review/testing. Testing this big of a PR altogether would be a nightmare 😅

[jsnajdr]

Yes, at this moment I wanted to share a rough draft so that folks have an idea how the impact looks like.

I'm not sure if we'll be able to patch one screen at a time. Once the siteHasFeature selector is modifed to read from state.sites.items, the most important change is done and it affects the whole app. But we could temporarily have two selectors 🙂

[tyxla]

Yes, at this moment I wanted to share a rough draft so that folks have an idea how the impact looks like.

I'm not sure if we'll be able to patch one screen at a time. Once the siteHasFeature selector is modifed to read from state.sites.items, the most important change is done and it affects the whole app. But we could temporarily have two selectors 🙂

Definitely not suggesting one screen at a time. But we could split out Jetpack Cloud from A4a, and then by entry point for example. And the instances that are global, we can just test thoroughly, but have them in separate PR(s).