Stepper framework: Add import flow #62759

bogiii · 2022-04-14T07:49:25Z

Changes proposed in this Pull Request

This PR contains the first part of the effort introducing the whole import onboarding experience to the stepper framework.

🟢 start/importer/capture (signup) -> setup/import (stepper)
⚪️ start/from/importing/{importer} (signup) -> setup/importer/{importer}

Registered an import flow inside a new non-linear stepper framework.
Adjusted the stepper framework allowing consumption of the main redux store since the import module depends on it.
Setup import flow to consume existing import module screens from the linear signup framework.

Next steps (not covered by this PR):

Move the place where the import module lives. From the signup steps to calypso/blocks
Register an importer flow equivalently with /start/from/{importer}

Testing instructions

Go to the setup/intent?siteSlug={SLUG}
Select Import your site content option
Enter any URL you want to import from
Check if it works in the same way as it is the case when you start from /start/setup-site/intent?siteSlug={SLUG}
Check navigation Back and I don't have a site address header's navigation links
In other words, it should be the same as it is on the /start signup flow

Related to #62238

Additonal information: pcmemI-u6-p2

matticbot · 2022-04-14T07:50:28Z

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

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

name                   parsed_size           gzip_size
entry-stepper            +105117 B  (+5.9%)   +32009 B  (+6.2%)
entry-main                  -251 B  (-0.0%)      +38 B  (+0.0%)
entry-login                  -96 B  (-0.0%)      +64 B  (+0.0%)
entry-gutenboarding          -96 B  (-0.0%)      -73 B  (-0.0%)
entry-domains-landing        -74 B  (-0.0%)      -26 B  (-0.0%)
entry-browsehappy            -74 B  (-0.1%)      -26 B  (-0.1%)

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

Sections (~259 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
signup                      -268 B  (-0.1%)       +7 B  (+0.0%)
jetpack-connect             -268 B  (-0.0%)       +7 B  (+0.0%)
accept-invite               -268 B  (-0.1%)       +7 B  (+0.0%)
reader                       +38 B  (+0.0%)      +27 B  (+0.0%)
posts-custom                 +38 B  (+0.0%)      +28 B  (+0.0%)
posts                        +38 B  (+0.0%)      +28 B  (+0.0%)
media                        +38 B  (+0.0%)      +41 B  (+0.0%)
marketing                    +38 B  (+0.0%)      +27 B  (+0.0%)
jetpack-social               +38 B  (+0.0%)      +27 B  (+0.0%)
jetpack-cloud-pricing        +38 B  (+0.0%)      +27 B  (+0.0%)
import                       +38 B  (+0.0%)      +26 B  (+0.0%)
comments                     +38 B  (+0.0%)      +25 B  (+0.0%)
backup                       +38 B  (+0.0%)      +25 B  (+0.0%)
activity                     +38 B  (+0.0%)      +26 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 (~2927 bytes added 📈 [gzipped])

name                                                               parsed_size           gzip_size
async-load-calypso-blocks-inline-help                                   -216 B  (-1.8%)      -33 B  (-0.9%)
async-load-calypso-blocks-inline-help-popover                           -196 B  (-0.0%)     -781 B  (-0.5%)
async-load-signup-steps-import-list                                     +130 B  (+0.8%)     +160 B  (+2.8%)
async-load-signup-steps-import-ready                                    -126 B  (-0.1%)     -272 B  (-1.0%)
async-load-signup-steps-import-from-wordpress                           +108 B  (+0.0%)      +82 B  (+0.0%)
async-load-signup-steps-import-from                                     +108 B  (+0.0%)      +82 B  (+0.0%)
async-load-signup-steps-import                                          +107 B  (+0.1%)      +94 B  (+0.2%)
async-load-signup-steps-import-light-capture                             +70 B  (+0.1%)      +45 B  (+0.2%)
async-load-signup-steps-import-light                                     +70 B  (+0.1%)      +45 B  (+0.1%)
async-load-signup-steps-import-from-wordpress-import-everything          +70 B  (+0.0%)      +41 B  (+0.0%)
async-load-signup-steps-import-capture                                   +70 B  (+0.1%)      +40 B  (+0.2%)
async-load-signup-steps-website-content                                  +38 B  (+0.0%)      +11 B  (+0.0%)
async-load-signup-steps-social-profiles                                  +38 B  (+0.0%)      +11 B  (+0.0%)
async-load-signup-steps-import-from-wordpress-import-content-only        +38 B  (+0.0%)      +41 B  (+0.0%)
async-load-signup-steps-import-from-wix                                  +38 B  (+0.0%)      +41 B  (+0.0%)
async-load-signup-steps-import-from-squarespace                          +38 B  (+0.0%)      +41 B  (+0.0%)
async-load-signup-steps-import-from-medium                               +38 B  (+0.0%)      +41 B  (+0.0%)
async-load-signup-steps-import-from-components-progress-screen           +38 B  (+0.0%)      +41 B  (+0.0%)
async-load-signup-steps-import-from-components-importer-drag             +38 B  (+0.0%)       +5 B  (+0.0%)
async-load-signup-steps-import-from-blogger                              +38 B  (+0.0%)      +41 B  (+0.0%)
async-load-signup-steps-clone-point                                      +38 B  (+0.0%)      +27 B  (+0.0%)
async-load-design-playground                                             +38 B  (+0.0%)      +41 B  (+0.0%)
async-load-design-blocks                                                 +38 B  (+0.0%)      +41 B  (+0.0%)
async-load-design                                                        +38 B  (+0.0%)      +41 B  (+0.0%)
async-load-calypso-post-editor-media-modal                               +38 B  (+0.0%)      +41 B  (+0.0%)
async-load-calypso-post-editor-editor-media-modal                        +38 B  (+0.0%)      +41 B  (+0.0%)
async-load-calypso-components-web-preview-component                      +38 B  (+0.0%)      +26 B  (+0.0%)
async-load-calypso-blocks-login-social-connect-prompt                    +38 B  (+0.8%)      +18 B  (+1.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 · 2022-04-14T15:06:31Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

It covers the case when the user refreshes the screen and urlData is not available at that moment.

bogiii · 2022-04-27T21:30:06Z

Code looks great and most functionality works fine. Found a possible tiny bug:

CleanShot.2022-04-21.at.11.20.43.mp4

Thanks for discovering! It has been fixed.

cc @vishnugopal

bogiii · 2022-05-02T13:27:44Z

@alshakero, could you please take one more look to confirm?

I would like to merge it soon.

alshakero

Thank you so so much for this! Looks great now!

client/landing/stepper/declarative-flow/internals/steps-repository/import/helper.ts

bogiii force-pushed the add/stepper-import branch from 0a66db0 to 8b15f5d Compare April 14, 2022 15:07

bogiii added 18 commits April 15, 2022 11:42

Register User store

4b9cf0a

Register Import step

02ca96c

Setup main redux store in order to consume onboarding import module

9f9685f

Remove duplicate stepPath

71be8e3

Add currentRoute hook

ad0f77a

Add removeTrailingSlash util method

9482216

Setup import/ready/preview step path

6ce983f

Setup import/ready/not step path

9f792fb

Setup import/ready/wpcom step path

4cedb44

Setup import/list step path

3eafb80

Setup import/raedy step path

f176893

Redirect to the home step when urlData is empty

4d28c47

It covers the case when the user refreshes the screen and urlData is not available at that moment.

Add back and next navigation support

d76d9d4

Add back and next navigation support

32037c4

Import module styles

41ee36e

Replace the button next with skip to match style with design

608b86c

Move step content to the method

0807553

Remove extra margin from the hidden header

5219b21

bogiii force-pushed the add/stepper-import branch from 8b15f5d to 5219b21 Compare April 15, 2022 09:44

bogiii added 8 commits April 18, 2022 15:01

Define goToImporterPage function

32bdd4b

Rename file from utils to util

91aa2e8

Remove helper method from the util

9565d0b

Load missing persisted state

658f4bf

Add page title for the import stepper flow

0c0b6c0

Divide styling between signup and stepper frameworks

bf48d4e

Move document title setup to a more appropriate place

90a0e44

Support redirecting to the root import route

a127d18

bogiii added 19 commits April 26, 2022 23:17

Transform isAtomicSite property to boolean

78260d4

Shorthand shouldHideSkipBtn the piece of logic

5ace04b

Move BASE_ROUTE constant outside the component

9431c2f

Merge branch 'trunk' into add/stepper-import

23c0aa7

Create ImportWrapper component

e93d7a4

Add global styles for the import steps

bf86673

Move BASE_ROUTE constant to the config file

ec582b6

Introduce generateStepPath util method

94f3d4f

Create importList step component with route

4552b02

Create importReady step component with route

01ccefb

Rename component name

310e3f6

Create importReadyPreview step component with route

472c94b

Create importReadyNot step component with route

dbafb42

Create importReadyWpcom step component with route

f7dba03

Update generateStepPath method to return new camelCase routes

a8697a3

Simplify import component showing only capture step

3dca252

Remove obsolete import paths

ed3ff35

Replace redirect method with navigation submit exitFlow

01b4c0d

Fix issue with going back to the capture screen

19a029e

bogiii requested a review from alshakero April 27, 2022 21:43

alshakero approved these changes May 2, 2022

View reviewed changes

client/landing/stepper/declarative-flow/internals/steps-repository/import/helper.ts Outdated Show resolved Hide resolved

bogiii added 2 commits May 2, 2022 23:55

Shorthand the if condition

58630b0

Merge branch 'trunk' into add/stepper-import

1b5858a

bogiii merged commit c7136fb into trunk May 3, 2022

bogiii deleted the add/stepper-import branch May 3, 2022 11:18

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 May 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stepper framework: Add import flow #62759

Stepper framework: Add import flow #62759

bogiii commented Apr 14, 2022 •

edited

Loading

matticbot commented Apr 14, 2022 •

edited

Loading

matticbot commented Apr 14, 2022 •

edited

Loading

bogiii commented Apr 27, 2022 •

edited

Loading

bogiii commented May 2, 2022

alshakero left a comment •

edited

Loading

Stepper framework: Add import flow #62759

Stepper framework: Add import flow #62759

Conversation

bogiii commented Apr 14, 2022 • edited Loading

Changes proposed in this Pull Request

Testing instructions

matticbot commented Apr 14, 2022 • edited Loading

matticbot commented Apr 14, 2022 • edited Loading

bogiii commented Apr 27, 2022 • edited Loading

bogiii commented May 2, 2022

alshakero left a comment • edited Loading

Choose a reason for hiding this comment

bogiii commented Apr 14, 2022 •

edited

Loading

matticbot commented Apr 14, 2022 •

edited

Loading

matticbot commented Apr 14, 2022 •

edited

Loading

bogiii commented Apr 27, 2022 •

edited

Loading

alshakero left a comment •

edited

Loading