Migrating import flow to StepContainerV2

[paulopmt1]

Related to #101191

Proposed Changes

• Added support to the new stepper flow v2 on import screen

Before	After

Testing Instructions

• Go to the /setup/onboarding flow locally or use the feature flag ?flags=onboarding/step-container-v2-migration-flow in testing servers.
• Advance until you're at the Goals screen
• Select Import or migrate an existing site

This work is partial

To make our reviews easier, I split the work into another three extra steps:

• Convert "Import content only" to step container v2 #101798
• Onboarding style consistency: Take your site to the next level #101910
• Onboarding style consistency: Import content from another platform or file #101912

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-138885

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-138885&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-138885&env=a8c-for-agencies

[matticbot]

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

App Entrypoints (~25 bytes removed 📉 [gzipped])

Details

name                   parsed_size           gzip_size
entry-stepper               -127 B  (-0.0%)      -25 B  (-0.0%)
entry-main                   +50 B  (+0.0%)      -23 B  (-0.0%)
entry-login                  +50 B  (+0.0%)      -23 B  (-0.0%)
entry-subscriptions          -45 B  (-0.0%)      -43 B  (-0.0%)
entry-domains-landing        -45 B  (-0.0%)      -43 B  (-0.0%)
entry-browsehappy            -45 B  (-0.0%)      -43 B  (-0.1%)

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

Sections (~4459 bytes added 📈 [gzipped])

Details

name                      parsed_size           gzip_size
stepper-user-step              -196 B  (-0.1%)     -776 B  (-1.0%)
async-step-use-my-domain       -196 B  (-0.0%)     -539 B  (-0.3%)
checkout                        +39 B  (+0.0%)      +19 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 (~84 bytes added 📈 [gzipped])

Details

name                                             parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected        +39 B  (+0.0%)      +21 B  (+0.0%)
async-load-signup-steps-plans                          +39 B  (+0.0%)      +21 B  (+0.0%)
async-load-signup-steps-domains                        +39 B  (+0.0%)      +23 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal        +39 B  (+0.0%)      +19 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.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/step-container-v2-for-import-flow on your sandbox.

[alshakero]

Left two tiny but important comments.

[daledupreez]

For reviewers without context, please specify why they need to run it against a local dev instance -- it took me a while to work out why I wasn't seeing the changes in the calypso.live branch. TL;DR: the feature is currently gated by the onboarding/step-container-v2 feature flag. I was able to test this with that flag explicitly enabled.

Along with the comments in the page, is there a reason we aren't migrating any additional screens as part of this PR? We have a large number of steps in the screen that are not included at the moment, so the experience is going to be janky with a partial transition to the new steps.

[daledupreez]

We explicitly narrowed this layout as part of the recent Code Blue V0 work -- see #100861 and #101519.

I see that we can either aim for a width of 4 or 6. 6 has a max-width of 615px, and the 4 case is really narrow with a max-width of 404px -- see the screenshot below. The current layout has a max-width almost exactly in the middle of that at 502px. @fditrapani, could you weigh in on what would be good for our use case and/or the CenteredColumnLayout wrapper?

[fditrapani]

Thanks for the ping @daledupreez. Unfortunately neither of these options looks great. The wide one is too wide and hinders readability and the other one is too short making it looked cramped. Can we go with the wider one and then set a max width (400px) to the text to help with the readability? Like this:

[paulopmt1]

Can we go with the wider one and then set a max width (400px) to the text to help with the readability?
The current layout has a max-width almost exactly in the middle of that at 502px

I'd prefer not to use custom styles for these blocks since we're aiming to reuse the style of these blocks across these screens.

I added a new layout-5 with a middle size between layout 4 and layout 6. Here's how it looks:

How does that sound to you @fditrapani and @fcoveram?

[fditrapani]

That looks great to me! thanks @paulopmt1

[paulopmt1]

Thanks for your review @daledupreez!

it took me a while to work out why I wasn't seeing the changes in the calypso.live branch.

Sorry, I didn't make it explicit that it should be run locally. I updated the description. Thanks for clarifying it for others!

I think it would be much better if we could push this up to be a general rule as part of the step container rather than adding a special case for this screen

That's fair. I used another strategy here.

is there a reason we aren't migrating any additional screens as part of this PR? We have a large number of steps in the screen that are not included at the moment

Good question! During development, I noticed that this would quickly grow, so I split the work into another three extra steps:

• Convert "Import content only" to step container v2
• Onboarding style consistency: Take your site to the next level
• Onboarding style consistency: Import content from another platform or file

Since we'll release all of this at once (currently behind that feature flag), it will be find delivering a few screens at time, as even with these changes, production will remain the same.

[vykes-mac]

Everything works good and is looking good apart from some minor deviations. (non-blocking)

1. There seem to be more space from the top bar to the header title in the Prod version (right) than step container version on some of the pages.
2. Subtitle have a different font colour on prod vs step container
3. The video shows how the loader behaviour differs on both.
4. Mobile version header and subtitle is centred on prod but doesn't seem that way on step version.

Nevermind 2 & 4, After looking at the figma design I realise the header and subtitle are left align on mobile and subtitle color is different.

Screen.Recording.2025-03-26.at.7.54.28.PM.mov

[autumnfjeld]

Mobile version header and subtitle is centred on prod but doesn't seem that way on step version.

@vykes-mac This is per the Figma specs W9xI27S6Swvw5Ku21EbZvn-fi-9837_29100

[autumnfjeld]

Functionality tested. ✅

Just want to make sure the rest of the import work is manageable to get done by March 31. If not maybe we treat it as a separate release? If it is manageable , then no worries. :)

[daledupreez]

@autumnfjeld (and anyone else on Quake), can @Automattic/serenity help with converting more of the import and migration flows?

[paulopmt1]

Just want to make sure the rest of the import work is manageable to get done by March 31.

Yeah, sending the other three screens by March 31 will be possible.

1. There seem to be more space from the top bar to the header title in the Prod version (right) than step container version on some of the pages. Subtitle have a different font colour on prod vs step container
2. Subtitle have a different font colour on prod vs step container
3. Mobile version header and subtitle is centred on prod but doesn't seem that way on step version.

These changes are expected since the new StepContainerV2 implement them differently.

The video shows how the loader behaviour differs on both.

Thanks for pointing it out! We plan to fix that loading state as part of this task. Since it's only occurring behind the flag, and we'll fix it before March 31, we should be good to send it now.

[autumnfjeld]

@autumnfjeld (and anyone else on Quake), can @Automattic/serenity help with converting more of the import and migration flows?

That would be fantastic @daledupreez .

[autumnfjeld]

@Automattic/quake Let's keep these import PRs separate from the main flow release. See slack p1743109741691399/1743055172.691829-slack-C04H4NY6STW

[alshakero]

Looks good to me now! Note that I only reviewed the code. I'm swamped right now and it will be a bit hard to test for me.

[paulopmt1]

Let's keep these import PRs separate from the main flow release.

Updated it here to only work with the onboarding/step-container-v2-migration-flow feature flag.

[autumnfjeld]

Thanks for separating this so we can focus on shipping well tested quality work for the main flow first.