Add Jetpack Cloud Settings Host Credentials Status

[cbauerman]

Changes proposed in this Pull Request

Motivation: Add component for top status durning new host-specific credential flow

• Add <ConnectionStatus /> component to new credentials settings page
• A couple file org changes

Testing instructions

1. boot env ENABLE_FEATURES=jetpack/server-credentials-advanced-flow yarn run start-jetpack-cloud
2. verify the settings page now matches the "after" screenshot above

[matticbot]

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

[matticbot]

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

Sections (~306 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
jetpack-cloud-settings      +1228 B  (+0.8%)     +306 B  (+0.7%)

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.

[rcanepa]

LGTM!

I noticed two small issues.

1. On a small viewport, the Providers container is wider than the rest of the pieces of the UI. Is that expected?

2. The content inside the <ConnectionStatus /> component is almost overlapping.

[cbauerman]

LGTM!

On a small viewport, the Providers container is wider than the rest of the pieces of the UI. Is that expected?

There are a couple outstanding issues w/ styling, especially at the narrower screen sizes. The strategy is too get the functionality done first then circle back to pick up those sort of issues

[rcanepa]

LGTM!
On a small viewport, the Providers container is wider than the rest of the pieces of the UI. Is that expected?

There are a couple outstanding issues w/ styling, especially at the narrower screen sizes. The strategy is too get the functionality done first then circle back to pick up those sort of issues

Agree! I would do the same. Just pointing them out in case you didn't see them 🙂

[a8ci18n]

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

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.