Stepper: Implement signup sessions #98501

alshakero · 2025-01-16T20:10:28Z

Related to #

Proposed Changes

Why are these changes being made?

Testing Instructions

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

… into fix/use-steps-hook

github-actions · 2025-01-16T20:10:40Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

…hooks/use-launchpad-decider/index.tsx

matticbot · 2025-01-16T20:18:37Z

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

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

name                   parsed_size           gzip_size
entry-stepper             +11638 B  (+0.9%)    +1251 B  (+0.3%)
entry-subscriptions         +555 B  (+0.0%)     +161 B  (+0.0%)
entry-login                 +555 B  (+0.0%)     +161 B  (+0.0%)
entry-domains-landing       +555 B  (+0.1%)     +161 B  (+0.1%)
entry-browsehappy           +555 B  (+0.3%)     +161 B  (+0.3%)
entry-main                  +465 B  (+0.0%)     +171 B  (+0.0%)

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

Sections (~3484 bytes removed 📉 [gzipped])

name                               parsed_size            gzip_size
migration-flow                        +38345 B  (+90.7%)   +12501 B  (+87.2%)
theme                                   +259 B   (+0.0%)      +74 B   (+0.0%)
themes                                  +246 B   (+0.0%)      +87 B   (+0.0%)
site-migration-flow                     -214 B   (-0.4%)      -44 B   (-0.2%)
readymade-template-flow                 -214 B   (-0.1%)      -57 B   (-0.1%)
hosted-site-migration-flow              -214 B   (-0.4%)      -44 B   (-0.2%)
assembler-first-flow                    -214 B   (-0.1%)      -57 B   (-0.1%)
update-design-flow                      -196 B   (-0.0%)      +30 B   (+0.0%)
link-in-bio-tld-flow                    -196 B   (-0.0%)     -223 B   (-0.0%)
import-hosted-site-flow                 -196 B   (-0.0%)      -38 B   (-0.0%)
copy-site-flow                          -196 B   (-0.0%)      -38 B   (-0.0%)
write-flow                              -160 B   (-0.0%)     -667 B   (-0.2%)
build-flow                              -160 B   (-0.0%)     -649 B   (-0.2%)
newsletter-post-setup-flow              -135 B   (-0.0%)      -31 B   (-0.0%)
link-in-bio-post-setup-flow             -135 B   (-0.0%)      -31 B   (-0.0%)
start-writing-flow                      -134 B   (-0.3%)      -31 B   (-0.3%)
newsletter-flow                         -134 B   (-0.4%)      -33 B   (-0.4%)
design-first-flow                       -134 B   (-0.3%)      -30 B   (-0.3%)
hundred-year-plan                       -130 B   (-0.1%)      -16 B   (-0.0%)
hundred-year-domain                     -130 B   (-0.1%)      -11 B   (-0.0%)
devdocs                                  +88 B   (+0.0%)      +11 B   (+0.0%)
site-settings                            +41 B   (+0.0%)      +24 B   (+0.0%)
settings                                 +41 B   (+0.0%)      +24 B   (+0.0%)
home                                     +41 B   (+0.0%)      -73 B   (-0.0%)
site-purchases                           +23 B   (+0.0%)      +30 B   (+0.0%)
site-blocks                              +23 B   (+0.0%)      +10 B   (+0.0%)
signup                                   +23 B   (+0.0%)      +12 B   (+0.0%)
security                                 +23 B   (+0.0%)      +10 B   (+0.0%)
purchases                                +23 B   (+0.0%)      +25 B   (+0.0%)
privacy                                  +23 B   (+0.0%)     -699 B   (-0.4%)
plans                                    +23 B   (+0.0%)      +45 B   (+0.0%)
notification-settings                    +23 B   (+0.0%)     -682 B   (-0.3%)
me                                       +23 B   (+0.0%)      +10 B   (+0.0%)
marketplace                              +23 B   (+0.0%)      +13 B   (+0.0%)
jetpack-connect                          +23 B   (+0.0%)      +41 B   (+0.0%)
jetpack-cloud-settings                   +23 B   (+0.0%)      +14 B   (+0.0%)
jetpack-cloud-pricing                    +23 B   (+0.0%)      +69 B   (+0.0%)
jetpack-cloud-features-comparison        +23 B   (+0.0%)      +48 B   (+0.0%)
jetpack-app                              +23 B   (+0.0%)      +41 B   (+0.0%)
hosting                                  +23 B   (+0.0%)      +19 B   (+0.0%)
help                                     +23 B   (+0.0%)      +10 B   (+0.0%)
email                                    +23 B   (+0.0%)      +14 B   (+0.0%)
domains                                  +23 B   (+0.0%)      +43 B   (+0.0%)
developer                                +23 B   (+0.0%)     -634 B   (-0.4%)
checkout                                 +23 B   (+0.0%)      +46 B   (+0.0%)
account-close                            +23 B   (+0.0%)      +10 B   (+0.0%)
account                                  +23 B   (+0.0%)      +10 B   (+0.0%)
reader                                   +13 B   (+0.0%)     -152 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 (~1197 bytes added 📈 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-design-blocks                                                               +246 B  (+0.0%)     -127 B  (-0.0%)
async-load-signup-steps-theme-selection                                                +223 B  (+0.1%)      +73 B  (+0.1%)
async-load-design-wordpress-components-gallery                                          +93 B  (+0.0%)     +817 B  (+0.4%)
async-load-purchase-modal-wrapper                                                       +23 B  (+0.0%)      +45 B  (+0.0%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...        +23 B  (+0.0%)      +45 B  (+0.0%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice                        +23 B  (+0.1%)      +13 B  (+0.2%)
async-load-calypso-layout-masterbar-checkout                                            +23 B  (+0.0%)      +15 B  (+0.1%)
async-load-calypso-blocks-editor-checkout-modal                                         +23 B  (+0.0%)      +44 B  (+0.0%)
async-load-calypso-components-web-preview-component                                     +13 B  (+0.0%)     -109 B  (-0.1%)

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.

…o into add/signup-sessions

client/landing/stepper/index.tsx


 	if ( ! flowName ) {
 		// Stop the boot process if we can't determine the flow, reducing the number of edge cases
 		return ( window.location.href = `/setup/${ DEFAULT_FLOW }${ window.location.search }` );
 	}

+	if ( ! sessionId ) {
+		sessionId = createSessionId();


To fix the problem, we need to replace the use of Math.random() with a cryptographically secure random number generator. In a browser environment, we can use crypto.getRandomValues to generate secure random numbers. This will ensure that the session IDs are not easily predictable.

We will modify the createSessionId function in client/landing/stepper/declarative-flow/internals/state-manager/create-session-id.ts to use crypto.getRandomValues instead of Math.random(). This change will ensure that the generated session IDs are cryptographically secure.

alshakero added 30 commits January 6, 2025 20:43

Add bootFlow method

4bb327e

Add types changes

44bce7d

Add index.tsx change

11e3d7b

Add example flow

d62342f

Add possibility to return false

4b3088c

Update README

c6a69bb

Types and example flow.

ec108c4

Types

3d3a754

Types

f669d28

Merge branch 'trunk' into fix/use-steps-hook

3454512

Remove extraneous await

f29bb5f

Merge branch 'fix/use-steps-hook' of github.com:Automattic/wp-calypso…

d6a7d99

… into fix/use-steps-hook

Merge branch 'trunk' into fix/use-steps-hook

b45bee2

Rename to initialize

50d10f2

Merge branch 'trunk' into fix/use-steps-hook

f860739

Merge branch 'fix/use-steps-hook' of github.com:Automattic/wp-calypso…

8e6336f

… into fix/use-steps-hook

README

c0dab5e

Cache the flow steps

81c4c7b

Types

a546417

Seed

ab0feaf

Merge branch 'trunk' into fix/use-steps-hook

838a0b6

Update the example flow

9d2d115

Merge branch 'fix/use-steps-hook' of github.com:Automattic/wp-calypso…

de3dc75

… into fix/use-steps-hook

Merge branch 'trunk' into fix/use-steps-hook

082bfbd

Merge branch 'trunk' into fix/use-steps-hook

44a492e

Clean up

cbb653b

Make getSteps optional

94a83c0

Fix code comment

3dcd18f

Progress

9575cc3

Merge branch 'fix/use-steps-hook' into add/signup-sessions

c1dee61

alshakero added 4 commits January 14, 2025 03:09

Leverge React Query to manage state

455f9bf

Progress

67b890b

Progress

0b95a99

Progress

64b6e3a

Discard changes to client/landing/stepper/declarative-flow/internals/…

08b3443

…hooks/use-launchpad-decider/index.tsx

alshakero added 6 commits January 16, 2025 21:21

Cleanup

04382b9

Merge branch 'add/signup-sessions' of github.com:Automattic/wp-calyps…

29b0190

…o into add/signup-sessions

Clean up

d8b6e14

Clean up

bec26e0

Types

60a2639

Progress

d32cfd7

Base automatically changed from fix/use-steps-hook to trunk January 22, 2025 15:24

Discard changes to client/landing/stepper/README.md

015f94e

github-advanced-security bot found potential problems Jan 22, 2025

View reviewed changes

alshakero mentioned this pull request Jan 23, 2025

Stepper: Implement signup sessions #98806

Merged

@@ -26,4 +26,5 @@
             	const maxNumberForTwoLettersBase62 = 3844;
-            	const seed =
-            		minNumberForTwoLettersBase62 + Math.floor( Math.random() * maxNumberForTwoLettersBase62 );
+            	const randomArray = new Uint32Array(1);
+            	window.crypto.getRandomValues(randomArray);
+            	const seed = minNumberForTwoLettersBase62 + (randomArray[0] % (maxNumberForTwoLettersBase62 - minNumberForTwoLettersBase62 + 1));

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stepper: Implement signup sessions #98501

Stepper: Implement signup sessions #98501

alshakero commented Jan 16, 2025

github-actions bot commented Jan 16, 2025 •

edited by matticbot

Loading

matticbot commented Jan 16, 2025 •

edited

Loading

Provide additional feedback

Please help us improve GitHub Copilot by sharing more details about this comment.

Stepper: Implement signup sessions #98501

Are you sure you want to change the base?

Stepper: Implement signup sessions #98501

Conversation

alshakero commented Jan 16, 2025

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Jan 16, 2025 • edited by matticbot Loading

matticbot commented Jan 16, 2025 • edited Loading

github-actions bot commented Jan 16, 2025 •

edited by matticbot

Loading

matticbot commented Jan 16, 2025 •

edited

Loading