Add Jetpack Settings Host Detection

[cbauerman]

Changes proposed in this Pull Request

Motivation: Add the host detection step from the SSH credentials host specific instructions project ( p1HpG7-9Nd-p2 ).

• Add the host detection/guess/selection step from the project
• Support new WPCOM Host Guess API
• Add new routes for host detection and credentials step in the Jetpack Cloud settings module
• Rejigger file structure in the Jetpack Cloud settings module
• Minor update to StepProgress Component to accept translation results as well as strings

Testing instructions

1. boot branch w/ env ENABLE_FEATURES=jetpack/server-credentials-advanced-flow yarn run start-jetpack-cloud
2. Navigate to "Settings" for a site.
3. Verify your screen matches "Host Selection w/out guess" above"
4. Chose a host, verify it now match "Credentials Placeholder"
5. Apply 49131-code & sandbox public-api.wordpress.com
6. redo steps 2-4, this time expecting "Host Selection w/ guess" if your host matches one on the list

[matticbot]

Test live: https://calypso.live/?branch=add/jetpack-cloud-host-detection

[matticbot]

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

Sections (~4973 bytes added 📈 [gzipped])

name                    parsed_size            gzip_size
jetpack-cloud-settings     +17010 B  (+12.2%)    +4379 B  (+11.0%)
settings                     +380 B   (+0.1%)      +84 B   (+0.1%)
backup                       +380 B   (+0.1%)      +81 B   (+0.1%)
activity                     +380 B   (+0.1%)      +80 B   (+0.1%)
woocommerce                  +245 B   (+0.0%)      +47 B   (+0.0%)
signup                       +245 B   (+0.1%)      +51 B   (+0.1%)
reader                       +245 B   (+0.0%)      +57 B   (+0.0%)
people                       +245 B   (+0.1%)      +49 B   (+0.0%)
account                      +245 B   (+0.1%)      +49 B   (+0.0%)
stats                        +135 B   (+0.0%)      +40 B   (+0.0%)
plans                        +135 B   (+0.0%)      +56 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 (~291 bytes added 📈 [gzipped])

name                                   parsed_size           gzip_size
async-load-design-playground                +409 B  (+0.0%)      +63 B  (+0.0%)
async-load-design                           +409 B  (+0.0%)      +57 B  (+0.0%)
async-load-design-blocks                    +245 B  (+0.0%)      +39 B  (+0.0%)
async-load-signup-steps-clone-point         +135 B  (+0.1%)      +45 B  (+0.1%)
async-load-my-sites-sidebar                 +135 B  (+0.1%)      +44 B  (+0.1%)
async-load-components-jetpack-sidebar       +135 B  (+0.4%)      +43 B  (+0.4%)

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.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/4347718

Thank you @cbauerman for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.