Site Setup: Use flow entry point to manage back button edgy cases #102224

gabrielcaires · 2025-03-31T14:19:29Z

Related to:

Warning

This current solution doesn't ensure an alignment between our UI back button and the browser back button. Make them aligned is part of a refactor initiated on #101550.

Proposed Changes

Rename the flow state from migration>entryPoint to flow>entryPoint because now it will be used outside the migration flow context.
Update back logic make the user return from IMPORT_OR_MIGRATE to {SITE_}/import.php when the ref= 'wp-admin-importers-list'

The overall idea is the PR will introduce a specialized ref=wp-admin-importers-list, which will be stored on the new site-setup flow state to be reused when the user advance in on site-setup steps and use the back button.

We must also repass this ref query param to the site migration flow to ensure the user can properly return to the /import.php page.

Why are these changes being made?

As part of the Code Blue initiative, we are updating the /import page to suggest that users use our importing guided flows (PR here: Importer: Show wpcom banner on free sites jetpack#42693).
This PR ensures the user can return to the original page when they start the flow from there, regardless of whether they continue on the site setup or continue the site migration flow.

Testing Instructions

Create a free site
Go to /setup/site-setup/importList?siteSlug={YOUR_SITE_SLUG}&ref=wp-admin-importers-list
Click "WordPress"
Choose the Import option
Click on the UI back button and check if you are on the import vs migrate again
Click on the UI back button to check if you are on the importList again
Click on the UI back button to check if you are on the /import.php page again.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2025-03-31T14:19:43Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2025-03-31T14:20:26Z

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

Sections (~143 bytes added 📈 [gzipped])

name                        parsed_size           gzip_size
site-setup-flow                  +421 B  (+0.1%)     +131 B  (+0.1%)
site-migration-flow               +96 B  (+0.2%)      +12 B  (+0.1%)
hosted-site-migration-flow        +96 B  (+0.2%)      +12 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.

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.

gabrielcaires · 2025-03-31T14:25:34Z

client/landing/stepper/declarative-flow/flows/site-setup-flow/site-setup-flow.ts

@@ -746,6 +759,14 @@ const siteSetupFlow: FlowV1 = {
 			selectedGlobalStyles,
 			skippedCheckout,
 		] );
+
+		const { get, set } = useFlowState();


This change is part of the useSideEffect() hook (Github way is not making it clear)

client/landing/stepper/declarative-flow/flows/site-setup-flow/site-setup-flow.ts

sixhours · 2025-03-31T15:07:51Z

I don't see the Migrate vs Import step when I go through the described testing instructions with this branch. Is that intentional?

Screen.Recording.2025-03-31.at.11.03.53.AM.mov

Minor note for the testing instructions, don't forget to add the & before the ref in the query param.

gabrielcaires · 2025-03-31T15:25:13Z

I don't see the Migrate vs Import step when I go through the described testing instructions with this branch. Is that intentional?

Fixed 3540f96

Sorry about that, I forget to push 🤦

Minor note for the testing instructions, don't forget to add the & before the ref in the query param.

Thanks, I updated the docs

matticbot · 2025-03-31T15:42:24Z

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

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

blaze-dashboard
notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/handle-import-back-button on your sandbox.

sixhours · 2025-03-31T15:48:03Z

I think we're losing the ref at some point along the way, because when I click Back from the Migrate vs. Import step now, I'm taken to the Identify step rather than the importerList:

Screen.Recording.2025-03-31.at.11.44.57.AM.mov

It behaves correctly when I manually re-add the ref=wp-admin-importers-list param.

gabrielcaires · 2025-03-31T16:25:08Z

Thanks @sixhours

I fixed it here 735b71f

CleanShot.2025-03-31.at.17.11.17.mp4

Sorry about the back and forward; it is pretty complicated to manage, and our test suite is useless here :(

sixhours

LGTM!

alshakero · 2025-03-31T17:07:18Z

I'm really not a big fan of this 😢

It's tying two+ flows in untraceable ways. It would be great if you can explore removing goBack from the flow and making this condition smarter.

My take would be

Remove goBack function entirely from site-setup.
Explore checking if document.referrer === config('hostname') as a condition in canUserGoBack.
Remove this line because it messes with the URL for no reason.

This will outsource the task to the browser and align the back button of the flow with the one from the browser.

Note that I haven't tried this, but I suspect it may work with much less complexity.

gabrielcaires · 2025-03-31T17:53:45Z

I'm really not a big fan of this 😢

I hated this solution 😠

and I don't think it is the final solution.

The big issue regarding the history usage is that both flows use customized GoBack, and we can't use any history strategy if we have at least one customized GoBack because it messes up the flow.
We talked a bit about it here p1743096019300179/1743088708.875809-slack-C0Q664T29

I think the ideal solution is site migration and site setup + adopting the new callback @daledupreez is suggesting here so one flow can point directly to another using the window. location.replace without messing with history object.

The document.referrer also doesn't work because it only returns the origin hostname, and we have multiple points where this flow can be triggered.

Docs about https://developer.chrome.com/blog/referrer-policy-new-chrome-default

gabrielcaires · 2025-03-31T17:59:21Z

Merging to unblock the code blue issue

gabrielcaires added 2 commits March 31, 2025 14:29

Use flow entry point to manage back button edgy cases

7fe8a23

Initialize entry point

4d22e35

gabrielcaires marked this pull request as ready for review March 31, 2025 14:21

gabrielcaires requested a review from a team as a code owner March 31, 2025 14:21

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 31, 2025

gabrielcaires requested a review from a team March 31, 2025 14:21

gabrielcaires self-assigned this Mar 31, 2025

gabrielcaires commented Mar 31, 2025

View reviewed changes

gabrielcaires marked this pull request as draft March 31, 2025 14:30

gabrielcaires marked this pull request as ready for review March 31, 2025 14:38

gabrielcaires mentioned this pull request Mar 31, 2025

Importer: Fix guided import banner link Automattic/jetpack#42718

Merged

daledupreez reviewed Mar 31, 2025

View reviewed changes

client/landing/stepper/declarative-flow/flows/site-setup-flow/site-setup-flow.ts Outdated Show resolved Hide resolved

gabrielcaires added 2 commits March 31, 2025 16:22

Add missing entrypoint

3540f96

Rename param

f1f4615

gabrielcaires added 2 commits March 31, 2025 16:31

Remove uncessary const

aee0403

Remove duplicated selectors

78bd9f4

Add missing ref param

735b71f

gabrielcaires requested review from daledupreez and a team and removed request for daledupreez March 31, 2025 16:47

sixhours approved these changes Mar 31, 2025

View reviewed changes

gabrielcaires merged commit 6a7d101 into trunk Mar 31, 2025
15 checks passed

gabrielcaires deleted the update/handle-import-back-button branch March 31, 2025 17:59

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 31, 2025

gabrielcaires mentioned this pull request Mar 31, 2025

Fix janky loading on importers #100895

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Site Setup: Use flow entry point to manage back button edgy cases #102224

Site Setup: Use flow entry point to manage back button edgy cases #102224

Uh oh!

gabrielcaires commented Mar 31, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 31, 2025 •

edited by matticbot

Loading

Uh oh!

matticbot commented Mar 31, 2025 •

edited

Loading

Uh oh!

gabrielcaires Mar 31, 2025

Uh oh!

Uh oh!

sixhours commented Mar 31, 2025

Uh oh!

gabrielcaires commented Mar 31, 2025

Uh oh!

matticbot commented Mar 31, 2025 •

edited

Loading

Uh oh!

sixhours commented Mar 31, 2025

Uh oh!

gabrielcaires commented Mar 31, 2025 •

edited

Loading

Uh oh!

sixhours left a comment

Uh oh!

alshakero commented Mar 31, 2025

Uh oh!

gabrielcaires commented Mar 31, 2025 •

edited

Loading

Uh oh!

gabrielcaires commented Mar 31, 2025

Uh oh!

Uh oh!

Uh oh!

Site Setup: Use flow entry point to manage back button edgy cases #102224

Site Setup: Use flow entry point to manage back button edgy cases #102224

Uh oh!

Conversation

gabrielcaires commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented Mar 31, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gabrielcaires Mar 31, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sixhours commented Mar 31, 2025

Uh oh!

gabrielcaires commented Mar 31, 2025

Uh oh!

matticbot commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sixhours commented Mar 31, 2025

Uh oh!

gabrielcaires commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sixhours left a comment

Choose a reason for hiding this comment

Uh oh!

alshakero commented Mar 31, 2025

Uh oh!

gabrielcaires commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gabrielcaires commented Mar 31, 2025

Uh oh!

Uh oh!

Uh oh!

gabrielcaires commented Mar 31, 2025 •

edited

Loading

github-actions bot commented Mar 31, 2025 •

edited by matticbot

Loading

matticbot commented Mar 31, 2025 •

edited

Loading

matticbot commented Mar 31, 2025 •

edited

Loading

gabrielcaires commented Mar 31, 2025 •

edited

Loading

gabrielcaires commented Mar 31, 2025 •

edited

Loading