Woo Installer: Convert transfer step to use v2 endpoint data-layer #58848

lsl · 2021-12-06T05:46:52Z

Changes proposed in this Pull Request

Reworking transfer step for making use of:
Woo installer: use new transfer endpoints in Calypso #58709 (merged)
~~D70860-code~~ - software endpoint
~~D71460-code~~ ~~D70856-code~~ - transfer endpoint
~~D71447-code~~ ~~D70867-code~~ - transfer endpoint software install job
Rework error handling to close out Woo Installer: Add error handling to transfer step #58331

Testing instructions

Start an install flow with a simple site via /woocommerce-installation, it should kick off a transfer and install WooCommerce and Woo Payments. It will also require an upgrade if needed.
Start an install flow with an Atomic site from /woocommerce-installation, it should install WooCommerce and Woo Payments.

Related to #58227

matticbot · 2021-12-06T05:48:14Z

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-22327
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-22327&env=jetpack

github-actions · 2021-12-06T05:49:03Z

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:commit-1e95e1895f0d4fe94d15af3f425476ba875527a1
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:commit-1e95e1895f0d4fe94d15af3f425476ba875527a1&env=jetpack
(These links may take a few minutes to be available)

matticbot · 2021-12-06T05:55:14Z

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

App Entrypoints (~173 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-main                 +1052 B  (+0.1%)     +173 B  (+0.1%)
entry-login                 +550 B  (+0.1%)     +129 B  (+0.0%)
entry-gutenboarding         +271 B  (+0.0%)      +40 B  (+0.0%)
entry-domains-landing       +271 B  (+0.0%)      +40 B  (+0.0%)
entry-browsehappy           +271 B  (+0.3%)      +40 B  (+0.1%)

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

Sections (~16097 bytes removed 📉 [gzipped])

name                                 parsed_size           gzip_size
signup                                   -1220 B  (-0.3%)      -34 B  (-0.0%)
themes                                    -519 B  (-0.1%)    +2388 B  (+1.7%)
plugins                                   +447 B  (+0.1%)    +2587 B  (+1.4%)
scan                                      +419 B  (+0.1%)     -316 B  (-0.2%)
automated-transfer-state-middleware       -334 B  (-1.7%)     -254 B  (-4.0%)
devdocs                                   +216 B  (+0.1%)      +27 B  (+0.1%)
hosting                                   +213 B  (+0.1%)    +1167 B  (+1.0%)
marketing                                 -141 B  (-0.0%)     -462 B  (-0.3%)
woocommerce-installation                  -112 B  (-0.1%)     -426 B  (-0.6%)
email                                      +92 B  (+0.0%)     -402 B  (-0.3%)
marketplace                                +91 B  (+0.0%)     -150 B  (-0.1%)
settings-performance                       +81 B  (+0.0%)     -944 B  (-0.8%)
woocommerce                                +55 B  (+0.0%)      +13 B  (+0.0%)
theme                                      +55 B  (+0.0%)      +13 B  (+0.0%)
stats                                      +55 B  (+0.0%)      +12 B  (+0.0%)
sites                                      +55 B  (+0.0%)      +13 B  (+0.0%)
site-purchases                             +55 B  (+0.0%)      +13 B  (+0.0%)
settings-writing                           +55 B  (+0.0%)      +13 B  (+0.0%)
settings-security                          +55 B  (+0.0%)      +13 B  (+0.0%)
settings-jetpack                           +55 B  (+0.0%)      +13 B  (+0.0%)
settings-discussion                        +55 B  (+0.0%)      +13 B  (+0.0%)
purchases                                  +55 B  (+0.0%)      +13 B  (+0.0%)
preview                                    +55 B  (+0.0%)      +13 B  (+0.0%)
posts-custom                               +55 B  (+0.0%)      +13 B  (+0.0%)
posts                                      +55 B  (+0.0%)      +13 B  (+0.0%)
plans                                      +55 B  (+0.0%)      +13 B  (+0.0%)
people                                     +55 B  (+0.0%)      +13 B  (+0.0%)
pages                                      +55 B  (+0.0%)      +13 B  (+0.0%)
migrate                                    +55 B  (+0.0%)      +13 B  (+0.0%)
media                                      +55 B  (+0.0%)      +16 B  (+0.0%)
jetpack-search                             +55 B  (+0.0%)      +13 B  (+0.0%)
jetpack-connect                            +55 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud-settings                     +55 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud-pricing                      +55 B  (+0.0%)      +13 B  (+0.0%)
jetpack-cloud                              +55 B  (+0.0%)      +13 B  (+0.0%)
import                                     +55 B  (+0.0%)      +13 B  (+0.0%)
home                                       +55 B  (+0.0%)      +13 B  (+0.0%)
google-my-business                         +55 B  (+0.0%)      +13 B  (+0.0%)
export                                     +55 B  (+0.0%)      +13 B  (+0.0%)
earn                                       +55 B  (+0.0%)      +12 B  (+0.0%)
domains                                    +55 B  (+0.0%)      +13 B  (+0.0%)
customize                                  +55 B  (+0.0%)      +13 B  (+0.0%)
concierge                                  +55 B  (+0.0%)      +13 B  (+0.0%)
comments                                   +55 B  (+0.0%)      +13 B  (+0.0%)
backup                                     +55 B  (+0.0%)     +131 B  (+0.1%)
activity                                   +55 B  (+0.0%)      +32 B  (+0.0%)
settings                                   +17 B  (+0.0%)       -1 B  (-0.0%)
gutenberg-editor                           +14 B  (+0.0%)       +0 B
checkout                                   -14 B  (-0.0%)     -352 B  (-0.1%)

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 (~6722 bytes removed 📉 [gzipped])

name                                                  parsed_size            gzip_size
async-load-signup-steps-woocommerce-install-transfer     -39523 B  (-33.1%)   -12315 B  (-32.7%)
async-load-signup-steps-woocommerce-install-confirm        -227 B   (-0.2%)     -452 B   (-1.3%)
async-load-calypso-my-sites-sidebar-unified                +143 B   (+0.1%)     +608 B   (+2.0%)
async-load-calypso-blocks-editor-checkout-modal             -41 B   (-0.0%)      -32 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.

client/state/atomic-transfer-with-plugin/selectors/index.ts

client/signup/steps/woocommerce-install/confirm/index.tsx

client/signup/steps/woocommerce-install/transfer/install-plugins.tsx

client/signup/steps/woocommerce-install/transfer/index.tsx

client/signup/steps/woocommerce-install/transfer/transfer-site.tsx

lsl · 2021-12-13T06:29:09Z

Happy path is now pretty stable for both existing atomic sites and non atomic sites.

You can test by starting an install flow with a simple site, it will kick off a transfer (which will complete) but until D70856-code is merged it won't install software. The transfer component will poll until both transfer is complete and software is applied.

Since D70860-code is merged, you can test the existing atomic site flow in another tab, it will auto confirm, "re-install" the software set, and redirect to wc-admin.

At the same time, your original tab should complete and redirect to wc-admin.

Once D70856-code testing each flow individually will be possible.

Error handling needs confirming end to end, both transfer failures and http request failures need checking how they're handled.

I think we should just rely on errorNotice for request failures (e.g. this, not this), that pops up a notice bar in the top right of the page. For transfer failures we should set an error state and show it in place of the progress bar.

Code is sort of set up for all this already but I think it just needs testing / working out any bugs. (We can/should do all this in a follow up)

retrofox · 2021-12-13T18:50:04Z

Tested the whole process, according to PR instructions and it works as expected.

The title shown on the install flow was kind of weird as the loading ellipsis matches the prelim loading checks pre-confirm but then the title shows up half way through "loading" during the install phase.

retrofox

LGTM. Although it shows an error when installing software when it's an atomic site, it works as expected. We can iterate later in follow-up PRs .

allilevine

This is working great now that the endpoint changes are merged. I updated the testing instructions.

a8ci18n · 2021-12-14T19:23:34Z

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

Hi @lsl, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:

We've hit a snag
It looks like something went wrong while setting up your store. Please contact support so that we can help you out.

Thank you in advance!

a8ci18n · 2021-12-24T10:28:50Z

Translation for this Pull Request has now been finished.

lsl self-assigned this Dec 6, 2021

allilevine reviewed Dec 8, 2021

View reviewed changes

client/state/atomic-transfer-with-plugin/selectors/index.ts Outdated Show resolved Hide resolved

lsl force-pushed the update/woop-install branch 2 times, most recently from 8becad8 to 26edb6b Compare December 10, 2021 06:18

lsl commented Dec 10, 2021

View reviewed changes

client/signup/steps/woocommerce-install/confirm/index.tsx Show resolved Hide resolved

lsl commented Dec 10, 2021

View reviewed changes

client/signup/steps/woocommerce-install/transfer/install-plugins.tsx Outdated Show resolved Hide resolved

lsl commented Dec 10, 2021

View reviewed changes

client/signup/steps/woocommerce-install/transfer/install-plugins.tsx Show resolved Hide resolved

lsl commented Dec 10, 2021

View reviewed changes

client/signup/steps/woocommerce-install/transfer/index.tsx Outdated Show resolved Hide resolved

lsl commented Dec 13, 2021

View reviewed changes

client/signup/steps/woocommerce-install/transfer/transfer-site.tsx Show resolved Hide resolved

lsl mentioned this pull request Dec 13, 2021

Woo installer: use new transfer endpoints in Calypso #58709

Merged

lsl mentioned this pull request Dec 13, 2021

Woo Installer: Add error handling to transfer step #58331

Closed

2 tasks

lsl marked this pull request as ready for review December 13, 2021 21:30

lsl added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 13, 2021

lsl changed the title ~~Update/woop install~~ Woo Installer: Convert transfer step to use v2 endpoint data-layer Dec 13, 2021

Woo Installer: Convert transfer step to use v2 endpoint data-layer

eca94d2

lsl force-pushed the update/woop-install branch from fe1b7da to eca94d2 Compare December 14, 2021 02:15

lsl and others added 9 commits December 14, 2021 13:18

Dep not required

6ea55c0

Make title optional

b83cc0b

The title shown on the install flow was kind of weird as the loading ellipsis matches the prelim loading checks pre-confirm but then the title shows up half way through "loading" during the install phase.

Bugfix progress bar progress

5329e83

Transfer style tidy up

7fc1fc5

Go back to progress bar + fix smoothing

59f01a2

Tidy up handling of software status

c738dc7

dl: fix reducers

ad48464

softwareApplied

71192bb

woop: update support link

73ade8a

retrofox added 3 commits December 14, 2021 08:59

woop: Don't consider Atomic site an error

3b9a66b

woop: minod comment change

2b9f05f

woop: enable flow from landing for Atomic sites too

425a207

retrofox approved these changes Dec 14, 2021

View reviewed changes

retrofox added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Dec 14, 2021

allilevine approved these changes Dec 14, 2021

View reviewed changes

retrofox merged commit 727d1f4 into trunk Dec 14, 2021

retrofox deleted the update/woop-install branch December 14, 2021 18:28

github-actions bot removed the [Status] Ready to Merge label Dec 14, 2021

allilevine mentioned this pull request Dec 14, 2021

Woo Installer: plugin install and activate #58227

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Woo Installer: Convert transfer step to use v2 endpoint data-layer #58848

Woo Installer: Convert transfer step to use v2 endpoint data-layer #58848

lsl commented Dec 6, 2021 •

edited by allilevine

Loading

matticbot commented Dec 6, 2021 •

edited

Loading

github-actions bot commented Dec 6, 2021

matticbot commented Dec 6, 2021 •

edited

Loading

lsl commented Dec 13, 2021 •

edited

Loading

retrofox commented Dec 13, 2021

retrofox left a comment •

edited

Loading

allilevine left a comment

a8ci18n commented Dec 14, 2021 •

edited

Loading

a8ci18n commented Dec 24, 2021

Woo Installer: Convert transfer step to use v2 endpoint data-layer #58848

Woo Installer: Convert transfer step to use v2 endpoint data-layer #58848

Conversation

lsl commented Dec 6, 2021 • edited by allilevine Loading

Changes proposed in this Pull Request

Testing instructions

matticbot commented Dec 6, 2021 • edited Loading

github-actions bot commented Dec 6, 2021

matticbot commented Dec 6, 2021 • edited Loading

lsl commented Dec 13, 2021 • edited Loading

retrofox commented Dec 13, 2021

retrofox left a comment • edited Loading

Choose a reason for hiding this comment

allilevine left a comment

Choose a reason for hiding this comment

a8ci18n commented Dec 14, 2021 • edited Loading

a8ci18n commented Dec 24, 2021

lsl commented Dec 6, 2021 •

edited by allilevine

Loading

matticbot commented Dec 6, 2021 •

edited

Loading

matticbot commented Dec 6, 2021 •

edited

Loading

lsl commented Dec 13, 2021 •

edited

Loading

retrofox left a comment •

edited

Loading

a8ci18n commented Dec 14, 2021 •

edited

Loading