Add/comingsoon v2 calypso

[lsl]

Changes proposed in this Pull Request

• Calypso part of Add/editing toolkit coming soon #45167 / Add/etk coming soon v2 #45581

Testing instructions

Fixes #

[matticbot]

Test live: https://calypso.live/?branch=add/comingsoon-v2-calypso

[matticbot]

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

Webpack Runtime (~88 bytes removed 📉 [gzipped])

name      parsed_size           gzip_size
manifest       -168 B  (-0.2%)      -88 B  (-0.6%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

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

name                 parsed_size           gzip_size
entry-main                +123 B  (+0.0%)      +20 B  (+0.0%)
entry-login                +13 B  (+0.0%)       +7 B  (+0.0%)
entry-gutenboarding        +13 B  (+0.0%)     +107 B  (+0.0%)

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

Sections (~54709 bytes added 📈 [gzipped])

name                    parsed_size            gzip_size
settings                  +237828 B  (+47.8%)   +53996 B  (+39.9%)
pages                       +1550 B   (+0.6%)     +243 B   (+0.3%)
settings-writing             +263 B   (+0.0%)     +144 B   (+0.1%)
checkout                     +247 B   (+0.0%)     -308 B   (-0.1%)
settings-security            +215 B   (+0.1%)      +36 B   (+0.0%)
settings-discussion          +215 B   (+0.1%)      +37 B   (+0.1%)
marketing                    +215 B   (+0.0%)      +36 B   (+0.0%)
home                         +215 B   (+0.0%)      +42 B   (+0.0%)
comments                     +215 B   (+0.0%)      +38 B   (+0.0%)
activity                     +215 B   (+0.0%)      +46 B   (+0.0%)
themes                       +204 B   (+0.1%)     -191 B   (-0.2%)
settings-performance         +178 B   (+0.1%)      +24 B   (+0.0%)
plugins                      +178 B   (+0.0%)      +31 B   (+0.0%)
hosting                      +178 B   (+0.1%)      +31 B   (+0.0%)
scan                         +171 B   (+0.0%)      +31 B   (+0.0%)
gutenberg-editor             +171 B   (+0.0%)     -234 B   (-0.1%)
backup                       +171 B   (+0.0%)      +31 B   (+0.0%)
media                        +153 B   (+0.0%)      -26 B   (-0.0%)
post-editor                  +144 B   (+0.0%)     +583 B   (+0.1%)
woocommerce                  +137 B   (+0.0%)      -42 B   (-0.0%)
jetpack-connect               +89 B   (+0.0%)     -166 B   (-0.1%)
site-blocks                   +78 B   (+0.0%)       +7 B   (+0.0%)
reader                        +78 B   (+0.0%)       +6 B   (+0.0%)
notification-settings         +78 B   (+0.0%)       +7 B   (+0.0%)
zoninator                     +73 B   (+0.0%)      +50 B   (+0.1%)
wp-super-cache                +73 B   (+0.0%)       -2 B   (-0.0%)
stats                         +73 B   (+0.0%)      -15 B   (-0.0%)
sites                         +73 B   (+0.1%)       -2 B   (-0.0%)
settings-jetpack              +73 B   (+0.0%)       -2 B   (-0.0%)
sensei                        +73 B   (+0.1%)       -2 B   (-0.0%)
security                      +73 B   (+0.0%)       -2 B   (-0.0%)
purchases                     +73 B   (+0.0%)      -89 B   (-0.0%)
privacy                       +73 B   (+0.0%)       -2 B   (-0.0%)
preview                       +73 B   (+0.0%)       -2 B   (-0.0%)
posts-custom                  +73 B   (+0.0%)       -4 B   (-0.0%)
posts                         +73 B   (+0.0%)       -4 B   (-0.0%)
plans                         +73 B   (+0.0%)       -2 B   (-0.0%)
migrate                       +73 B   (+0.0%)       -2 B   (-0.0%)
me                            +73 B   (+0.0%)       -2 B   (-0.0%)
jetpack-cloud-settings        +73 B   (+0.0%)       -2 B   (-0.0%)
jetpack-cloud                 +73 B   (+0.1%)       -2 B   (-0.0%)
help                          +73 B   (+0.0%)       -2 B   (-0.0%)
hello-dolly                   +73 B   (+0.1%)       -2 B   (-0.0%)
happychat                     +73 B   (+0.0%)       -2 B   (-0.0%)
google-my-business            +73 B   (+0.0%)       -2 B   (-0.0%)
export                        +73 B   (+0.0%)       -2 B   (-0.0%)
email                         +73 B   (+0.0%)      -45 B   (-0.0%)
earn                          +73 B   (+0.0%)       -3 B   (-0.0%)
domains                       +73 B   (+0.0%)      +44 B   (+0.0%)
customize                     +73 B   (+0.0%)       -2 B   (-0.0%)
concierge                     +73 B   (+0.0%)       -2 B   (-0.0%)
account-close                 +73 B   (+0.0%)       -2 B   (-0.0%)
import                        +69 B   (+0.0%)       +0 B
account                       +64 B   (+0.0%)      -38 B   (-0.0%)
people                        +44 B   (+0.0%)     +341 B   (+0.3%)
signup                        +14 B   (+0.0%)       +2 B   (+0.0%)
devdocs                       -14 B   (-0.0%)      -20 B   (-0.0%)
accept-invite                 +14 B   (+0.0%)     +128 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 (~2200 bytes removed 📉 [gzipped])

name                                         parsed_size           gzip_size
async-load-post-editor-media-modal              -10409 B  (-3.1%)    -2219 B  (-2.4%)
async-load-signup-steps-clone-point               +142 B  (+0.1%)      +49 B  (+0.1%)
async-load-blocks-calendar-popover                +142 B  (+0.1%)      +40 B  (+0.1%)
async-load-design-blocks                          +135 B  (+0.0%)      -85 B  (-0.0%)
async-load-blocks-inline-help-popover             +108 B  (+0.0%)       +8 B  (+0.0%)
async-load-signup-steps-site-picker                +73 B  (+0.1%)       -2 B  (-0.0%)
async-load-components-web-preview-component        +73 B  (+0.0%)       -1 B  (-0.0%)
async-load-components-sites-popover                +73 B  (+0.1%)       -2 B  (-0.0%)
async-load-layout-masterbar-checkout               +18 B  (+0.0%)      +12 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.

[ramonjd]

@roo2 made an additional commit in the test PR: 71ea337

I think it's basically renaming wpcom_coming_soon to wpcom_public_coming_soon

I was going to reinstate it tonight, but decided to wait until we talk about whether we need to completely feature flag v2

[lsl]

Fixed some broken tests then fixed a couple of logic errors moving from v1 to v2.

I think I have this right but definitely need some eyes on it, was testing the difference between what happens when loading settings on wpcom vs calypso and swapping between the two to see the difference. I applied the filters in #45604 to my 0-sandbox.php for testing without needing anything from #45581.

I'm glad we've split these / kept them separate now as I think it would have confused things a fair bit.

... Just watching the full test suite run, looks like some integration tests need updating after the UI change:

SiteSettingsFormGeneral Privacy picker - simple sites Coming soon option should be selectable
--
SiteSettingsFormGeneral Privacy picker - simple sites Hidden checkbox should be possible to unselect
SiteSettingsFormGeneral Privacy picker - simple sites Hidden option should be selectable
SiteSettingsFormGeneral Privacy picker - simple sites Private option should be selectable
SiteSettingsFormGeneral Privacy picker - simple sites Public option should be selectable
SiteSettingsFormGeneral Privacy picker - simple sites Selecting Hidden should switch radio to Public
SiteSettingsFormGeneral Privacy picker - simple sites Should have 4 visibility options

[lsl]

Testing D49571-code got myself into a WSOD on wpcom (live) using a test account. Suspect my testing here caused/got the settings into an incompatible format. (calypso.localhost worked fine) See slack for user info if you want to have a look.

I think if we want to feature flag this we may need to support both old and new settings at the same time. Feature flag would just control which settings UI is displayed. Thoughts?

[lsl]

Bit of a WIP state, trying to get tests to pass before adding v1 support back in behind a feature flag. (I have a hunch its going to be easier to add v1 support to v2 than the otherway around)

Phil's Visibility enum from #45428 is helping a lot here.