Step-by-step credentials: full verification screen

[delan]

• context and past patches
• #47898 (original data-layer changes, now reverted)
• #47614 (i4 verification screen with progress only)
• you are here: #48106 (full i4 verification screen)
• #48492 (data-layer with wpcom-proxy-request fix)

Changes proposed

This patch builds on #47614 + #47898 by replacing the success and failure notices with the full i4 verification screen (Finish up on success, Review credentials and more details on failure). These changes affect the “advanced credentials” flow, which is currently green only, so blue should be unaffected.

• incorporate design feedback from @scottsweb into error component

Testing instructions

Please set up your environment as described in #47614 before testing.

Open green and choose a Rewind-enabled site, then click Settings.

Verify that you can save working credentials successfully, with progress displayed similarly to the screen recording below.

Now try to save the same credentials, first with an incorrect password or private key, and then with the port number changed to 99999. Verify that progress is displayed similarly to the screen recording below, followed by the usual localised error message (first) or an appropriate error message under More details (second).

Screen recording (click to play)

This recording also illustrates a bug where Calypso would submit both a password and a private key if they were ever provided, which should be fixed in a subsequent patch.

[matticbot]

Test live: https://calypso.live/?branch=add/full-credentials-verification-flow

[a8ci18n]

🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.

[rcanepa]

This works fantastic. I love how much better is this new UX.

Thanks for working on this!

[matticbot]

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

Sections (~840 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
settings-security           +2749 B  (+0.8%)     +811 B  (+0.9%)
settings-jetpack            +2749 B  (+1.1%)     +809 B  (+1.1%)
scan                        +2749 B  (+0.7%)     +809 B  (+0.8%)
jetpack-cloud-settings      +2210 B  (+1.1%)     +672 B  (+1.1%)
stats                        +225 B  (+0.0%)      +33 B  (+0.0%)
settings-writing             +225 B  (+0.0%)      +33 B  (+0.0%)
settings-performance         +225 B  (+0.1%)      +33 B  (+0.0%)
settings-discussion          +225 B  (+0.1%)      +33 B  (+0.0%)
settings                     +225 B  (+0.0%)      +43 B  (+0.0%)
posts-custom                 +225 B  (+0.1%)      +33 B  (+0.0%)
posts                        +225 B  (+0.1%)      +33 B  (+0.0%)
people                       +225 B  (+0.1%)      +33 B  (+0.0%)
pages                        +225 B  (+0.1%)      +33 B  (+0.0%)
media                        +225 B  (+0.0%)      +32 B  (+0.0%)
marketing                    +225 B  (+0.0%)      +33 B  (+0.0%)
activity                     +225 B  (+0.0%)      +29 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 (~998 bytes added 📈 [gzipped])

name                                               parsed_size           gzip_size
async-load-signup-steps-rewind-form-creds              +2749 B  (+5.3%)     +807 B  (+5.7%)
async-load-signup-steps-creds-permission               +2749 B  (+7.9%)     +810 B  (+8.1%)
async-load-signup-steps-creds-confirm                  +2749 B  (+7.9%)     +809 B  (+8.1%)
async-load-signup-steps-clone-credentials              +2749 B  (+4.0%)     +808 B  (+4.3%)
async-load-design-blocks                                +225 B  (+0.0%)      +34 B  (+0.0%)
async-load-calypso-post-editor-editor-media-modal       +225 B  (+0.1%)      +31 B  (+0.0%)
async-load-calypso-layout-guided-tours-component        +225 B  (+0.3%)      +33 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.

[elliottprogrammer]

Tested and works great! Tested with correct server info and also with combination of incorrect creds and server info. Progress indicators all looked correct and all error messages looked correct. LGTM! 👍

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.