Add platform Identification step site-creation processing #93327

gabrielcaires · 2024-08-07T12:46:07Z

closes #93298
closes #93296
closes #93259

Proposed Changes

Extend the current Import Step to accept a new title and subtitle
Introduce the Platform identification step.
Introduce the PICK_SOURCE, SITE_CREATION, PROCESSING and a temporary PLAN Upgrade
Redirect to the import step when the platform is not wordpress
Redirect to the upgrade page when the platform is wordpres
Add new test helpers and custom matcher to simplify the test writing.

Note

No logic related to the back button was added in this PR.

Testing Instructions

Scenario: Platform WordPress

Go to /setup/hosted-site-migration-v2.
Select wordpress
Check if a site was created
Check if you have been redirecting to the temporary upgrade plan step

Scenario: Other Platform
Scenario: Platform WordPress

Go to /setup/hosted-site-migration-v2.
Select any other platform
Check if a site was created
Check if you have been redirecting to the correct import file page

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 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)?

matticbot · 2024-08-07T12:49:40Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-08-07T12:56:36Z

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

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

name                   parsed_size           gzip_size
entry-stepper                239 B  ( 0.0%)       67 B  ( 0.0%)
entry-subscriptions          224 B  ( 0.0%)       60 B  ( 0.0%)
entry-main                   224 B  ( 0.0%)       60 B  ( 0.0%)
entry-login                  224 B  ( 0.0%)       60 B  ( 0.0%)
entry-domains-landing        224 B  ( 0.0%)       60 B  ( 0.0%)
entry-browsehappy            224 B  ( 0.1%)       60 B  ( 0.1%)

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

Sections (~811 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
hosted-site-migration-flow-v2            992 B  ( 2.1%)      350 B  ( 6.5%)
with-theme-assembler-flow                301 B  ( 0.5%)       20 B  ( 0.2%)
update-options-flow                      301 B  ( 0.6%)       22 B  ( 0.4%)
update-design-flow                       301 B  ( 0.0%)       22 B  ( 0.0%)
trial-wooexpress-flow                    301 B  ( 0.6%)       22 B  ( 0.3%)
tailored-ecommerce-flow                  301 B  ( 0.6%)       26 B  ( 0.4%)
site-setup-wg                            301 B  ( 0.4%)       21 B  ( 0.1%)
site-setup-flow                          301 B  ( 0.4%)       22 B  ( 0.2%)
site-migration-flow                      301 B  ( 0.5%)       14 B  ( 0.1%)
readymade-template-flow                  301 B  ( 0.2%)       17 B  ( 0.1%)
migration-signup                         301 B  ( 0.6%)       16 B  ( 0.2%)
import-flow                              301 B  ( 0.5%)       21 B  ( 0.2%)
hosted-site-migration-flow               301 B  ( 0.5%)       14 B  ( 0.1%)
free-post-setup-flow                     301 B  ( 0.6%)       22 B  ( 0.4%)
free-flow                                301 B  ( 0.5%)       23 B  ( 0.3%)
entrepreneur-flow                        301 B  ( 0.2%)       24 B  ( 0.1%)
assembler-first-flow                     301 B  ( 0.4%)       19 B  ( 0.1%)
ai-assembler-flow                        301 B  ( 0.4%)       18 B  ( 0.1%)
import                                    49 B  ( 0.0%)       36 B  ( 0.0%)
themes                                    15 B  ( 0.0%)        9 B  ( 0.0%)
theme                                     15 B  ( 0.0%)        9 B  ( 0.0%)
staging-site                              15 B  ( 0.0%)        8 B  ( 0.0%)
sites-dashboard                           15 B  ( 0.0%)        8 B  ( 0.0%)
site-purchases                            15 B  ( 0.0%)        9 B  ( 0.0%)
site-monitoring                           15 B  ( 0.0%)        8 B  ( 0.0%)
site-logs                                 15 B  ( 0.0%)        8 B  ( 0.0%)
site-blocks                               15 B  ( 0.0%)        8 B  ( 0.0%)
signup                                    15 B  ( 0.0%)        7 B  ( 0.0%)
settings                                  15 B  ( 0.0%)        8 B  ( 0.0%)
security                                  15 B  ( 0.0%)        8 B  ( 0.0%)
purchases                                 15 B  ( 0.0%)        8 B  ( 0.0%)
privacy                                   15 B  ( 0.0%)        8 B  ( 0.0%)
plugins                                   15 B  ( 0.0%)        6 B  ( 0.0%)
plans                                     15 B  ( 0.0%)        7 B  ( 0.0%)
notification-settings                     15 B  ( 0.0%)        8 B  ( 0.0%)
me                                        15 B  ( 0.0%)        8 B  ( 0.0%)
marketplace                               15 B  ( 0.0%)        8 B  ( 0.0%)
jetpack-connect                           15 B  ( 0.0%)        7 B  ( 0.0%)
jetpack-cloud-pricing                     15 B  ( 0.0%)        7 B  ( 0.0%)
jetpack-cloud-features-comparison         15 B  ( 0.0%)        5 B  ( 0.0%)
jetpack-app                               15 B  ( 0.0%)        8 B  ( 0.0%)
hosting-features                          15 B  ( 0.0%)        8 B  ( 0.0%)
hosting                                   15 B  ( 0.0%)        8 B  ( 0.0%)
home                                      15 B  ( 0.0%)        8 B  ( 0.0%)
help                                      15 B  ( 0.0%)        8 B  ( 0.0%)
github-deployments                        15 B  ( 0.0%)        8 B  ( 0.0%)
email                                     15 B  ( 0.0%)        7 B  ( 0.0%)
domains                                   15 B  ( 0.0%)        7 B  ( 0.0%)
developer                                 15 B  ( 0.0%)        8 B  ( 0.0%)
checkout                                  15 B  ( 0.0%)        7 B  ( 0.0%)
account-close                             15 B  ( 0.0%)        8 B  ( 0.0%)
account                                   15 B  ( 0.0%)        8 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 (~47 bytes added 📈 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-purchase-modal-wrapper                                                        15 B  ( 0.0%)        8 B  ( 0.0%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...         15 B  ( 0.0%)        8 B  ( 0.0%)
async-load-design-blocks                                                                 15 B  ( 0.0%)        6 B  ( 0.0%)
async-load-design                                                                        15 B  ( 0.0%)        6 B  ( 0.0%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice                         15 B  ( 0.1%)        7 B  ( 0.1%)
async-load-calypso-layout-masterbar-checkout-tsx                                         15 B  ( 0.0%)        7 B  ( 0.0%)
async-load-calypso-layout-masterbar-checkout                                             15 B  ( 0.0%)        7 B  ( 0.0%)
async-load-calypso-blocks-editor-checkout-modal                                          15 B  ( 0.0%)        4 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.

This reverts commit d581ce4.

matticbot · 2024-08-07T17:36:32Z

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

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

notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/platform-indetification on your sandbox.

renatho

In general, it looks great! Just adding a few comments that I noticed and some questions.

client/landing/stepper/declarative-flow/internals/steps.tsx

...anding/stepper/declarative-flow/internals/steps-repository/platform-identification/index.tsx

renatho · 2024-08-07T21:42:17Z

client/blocks/import/list/index.tsx

@@ -64,7 70,10 @@ export default function ListStep( props: Props ) {
 };

 const recordImportList = () => {
- recordTracksEvent( trackEventName, trackEventParams );
+ if ( ! skipTracking ) {


I created an issue for this: #93352

Do you have some more references about this? How to identify the issue and how to verify it's already fixed to remove this check?

This step probably needs to be updated.
Stepper already triggers the calypso_signup_step_start automatically.
If you check the network tab on developer tools and search for calypso_signup_step_start you can see two calls to the same event as one of them is using a hardcode value on the "flow" attribute.

wp-calypso/client/blocks/import/list/index.tsx

Line 17 in f3ce670

const trackEventParams = {

I just don't removed it because we can have reports using it.

renatho · 2024-08-07T22:00:51Z

client/landing/stepper/declarative-flow/hosted-site-migration-v2/index.tsx

+
+ if ( currentStep === PROCESSING.slug ) {
+ if ( data?.next ) {
+ return window.location.assign(


I see that the hosted-site-migration also does the same, redirecting the flow to the /setup/site-setup. Just for my understanding, is there a special reason we do this instead of adding all the steps in this flow?

Although the steps are very reusable the logic to continue on each user interaction (site-setup.ts) is not easy to reuse. In these cases we are redirecting the users to the more appropriate flow.

client/landing/stepper/declarative-flow/hosted-site-migration-v2/index.tsx

renatho · 2024-08-07T22:12:47Z

client/landing/stepper/declarative-flow/test/helpers/index.tsx

+}
+
+expect.extend( {
+ toMatchDestination: ( destination, expected: MatchDestinationParams ) => {


renatho · 2024-08-07T22:19:24Z

client/landing/stepper/declarative-flow/hosted-site-migration-v2/test/index.tsx

+jest.mock( '@automattic/data-stores/src/user/selectors' );
+jest.mock( 'calypso/landing/stepper/hooks/use-is-site-owner' );
+
+describe( `${ flow.name }`, () => {


Nice tests! =)

…tory/platform-identification/index.tsx Co-authored-by: Renatho De Carli Rosa <[email protected]>

client/landing/stepper/declarative-flow/hosted-site-migration-v2/index.tsx

renatho

There's just one last thing to fix. So I'm already approving this to be merged after the fix! Nice work! =)

a8ci18n · 2024-08-08T16:24:15Z

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

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Hi @gabrielcaires, 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:

Site Migration
Move your site to WordPress.com
Tell us which platform your site is built with so we can get started.

Thank you in advance!

* Add new migration-flow * Rename step to import-or-migrate * Rename flow * Add platform identification step * Remove lint conflicts * Revert "Remove lint conflicts" This reverts commit d581ce4. * Remove * Fix lint issues * Redirect to import or upgrade * Add test suite * Improve tests * Adjust the title * Fix type * Update client/landing/stepper/declarative-flow/internals/steps-repository/platform-identification/index.tsx Co-authored-by: Renatho De Carli Rosa <[email protected]> * Update description * Fix next url when user select wordpress as platform * Fix wrong query param --------- Co-authored-by: Renatho De Carli Rosa <[email protected]>

a8ci18n · 2024-08-14T17:35:31Z

Translation for this Pull Request has now been finished.

gabrielcaires added 4 commits August 7, 2024 14:03

Add new migration-flow

2e26640

Rename step to import-or-migrate

f65b9b3

Rename flow

3f1aa4e

Add platform identification step

dd667ec

gabrielcaires force-pushed the add/platform-indetification branch from cdfe2d0 to dd667ec Compare August 7, 2024 13:05

gabrielcaires added 7 commits August 7, 2024 14:08

Remove lint conflicts

d581ce4

Revert "Remove lint conflicts"

a0d217a

This reverts commit d581ce4.

Remove

28b1480

Fix lint issues

cdfaec3

Redirect to import or upgrade

8f3a166

Add test suite

246f4fc

Improve tests

f5972d0

gabrielcaires changed the title ~~Add/platform Identification~~ Add platform Identification step site-creation processing Aug 7, 2024

gabrielcaires marked this pull request as ready for review August 7, 2024 17:23

gabrielcaires requested review from a team as code owners August 7, 2024 17:23

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

gabrielcaires requested review from renatho and removed request for a team August 7, 2024 17:23

Adjust the title

ec00b94

renatho mentioned this pull request Aug 7, 2024

Remove temporary tracking fix #93352

Closed

2 tasks

renatho reviewed Aug 7, 2024

View reviewed changes

gabrielcaires and others added 4 commits August 8, 2024 09:09

Fix type

f3ce670

Update client/landing/stepper/declarative-flow/internals/steps-reposi…

cce341b

…tory/platform-identification/index.tsx Co-authored-by: Renatho De Carli Rosa <[email protected]>

Update description

0ad2330

Merge branch 'trunk' into add/platform-indetification

c530660

gabrielcaires self-assigned this Aug 8, 2024

gabrielcaires requested a review from renatho August 8, 2024 09:46

Fix next url when user select wordpress as platform

d026df7

renatho reviewed Aug 8, 2024

View reviewed changes

client/landing/stepper/declarative-flow/hosted-site-migration-v2/index.tsx Outdated Show resolved Hide resolved

renatho approved these changes Aug 8, 2024

View reviewed changes

Fix wrong query param

eb23a58

gabrielcaires merged commit 763438c into trunk Aug 8, 2024
11 checks passed

gabrielcaires deleted the add/platform-indetification branch August 8, 2024 16:10

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 Aug 8, 2024

gabrielcaires mentioned this pull request Aug 12, 2024

Step: Upgrade prompt #93297

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add platform Identification step site-creation processing #93327

Add platform Identification step site-creation processing #93327

gabrielcaires commented Aug 7, 2024 •

edited

Loading

matticbot commented Aug 7, 2024 •

edited

Loading

matticbot commented Aug 7, 2024 •

edited

Loading

matticbot commented Aug 7, 2024 •

edited

Loading

renatho left a comment

renatho Aug 7, 2024

gabrielcaires Aug 8, 2024

renatho Aug 7, 2024

gabrielcaires Aug 8, 2024

renatho Aug 7, 2024

renatho Aug 7, 2024

renatho left a comment

a8ci18n commented Aug 8, 2024 •

edited

Loading

a8ci18n commented Aug 14, 2024

Add platform Identification step site-creation processing #93327

Add platform Identification step site-creation processing #93327

Conversation

gabrielcaires commented Aug 7, 2024 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

matticbot commented Aug 7, 2024 • edited Loading

matticbot commented Aug 7, 2024 • edited Loading

matticbot commented Aug 7, 2024 • edited Loading

renatho left a comment

Choose a reason for hiding this comment

renatho Aug 7, 2024

Choose a reason for hiding this comment

gabrielcaires Aug 8, 2024

Choose a reason for hiding this comment

renatho Aug 7, 2024

Choose a reason for hiding this comment

gabrielcaires Aug 8, 2024

Choose a reason for hiding this comment

renatho Aug 7, 2024

Choose a reason for hiding this comment

renatho Aug 7, 2024

Choose a reason for hiding this comment

renatho left a comment

Choose a reason for hiding this comment

a8ci18n commented Aug 8, 2024 • edited Loading

a8ci18n commented Aug 14, 2024

gabrielcaires commented Aug 7, 2024 •

edited

Loading

matticbot commented Aug 7, 2024 •

edited

Loading

matticbot commented Aug 7, 2024 •

edited

Loading

matticbot commented Aug 7, 2024 •

edited

Loading

a8ci18n commented Aug 8, 2024 •

edited

Loading