Stepper: Make framework tracking of submit-step the default. Updates remaining flows #93319

chriskmnds · 2024-08-07T09:29:03Z

Related to #91755

Proposed Changes

Makes framework tracking of submit-step the default. Any new flow will opt-in for tracking by the framework
Migrates remaining flows that explicitly called recordSubmitStep
Updates the following flows that hardcoded intent in the recordSubmitStep to pass it through the data-store: readymade-template, link-in-bio-post-setup, newsletter-post-setup, update-design, update-options
We do not update/ensure that intent is provided and logged for all of these flows. Only for those that already recorded a value for it in their localised calls to recordSubmitStep

The PR touches several flows. We've tested individual migrations in previous PRs, so this follows along.

Why are these changes being made?

Part of addressing #91755

Testing Instructions

Code review. Ensure recordSubmitStep is (at least currently) only called from useStepNavigationWithTracking
Confirm for any mentioned Stepper flow that calypso_signup_actions_submit_step is logged with correct values (in Netowrk tab, check for .gif request) when navigating from/to any step
For the following flows, confirm that intent is logged correctly as the name of the flow:
- /setup/readymade-template
- /setup/link-in-bio-post-setup
- /setup/newsletter-post-setup
- /setup/update-design
- /setup/update-options

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

github-actions · 2024-08-07T09:29:15Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-08-07T09:30:24Z

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

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

name           parsed_size           gzip_size
entry-stepper       -392 B  (-0.0%)      -44 B  (-0.0%)

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

Sections (~1069 bytes removed 📉 [gzipped])

name                                parsed_size           gzip_size
readymade-template-flow                  -245 B  (-0.2%)      -66 B  (-0.2%)
update-options-flow                       200 B  ( 0.4%)       97 B  ( 1.7%)
with-theme-assembler-flow                -162 B  (-0.2%)      -48 B  (-0.4%)
assembler-first-flow                     -162 B  (-0.2%)      -49 B  (-0.3%)
trial-wooexpress-flow                    -161 B  (-0.3%)      -53 B  (-0.7%)
migration-signup                         -161 B  (-0.3%)      -59 B  (-0.7%)
ai-assembler-flow                        -161 B  (-0.2%)      -50 B  (-0.3%)
subscribers                               156 B  ( 0.0%)       51 B  ( 0.0%)
staging-site                              156 B  ( 0.0%)       51 B  ( 0.0%)
sites-dashboard                           156 B  ( 0.0%)       51 B  ( 0.0%)
site-monitoring                           156 B  ( 0.0%)       51 B  ( 0.0%)
site-logs                                 156 B  ( 0.0%)       51 B  ( 0.0%)
settings                                  156 B  ( 0.0%)       51 B  ( 0.0%)
hosting-features                          156 B  ( 0.0%)       51 B  ( 0.0%)
hosting                                   156 B  ( 0.0%)       51 B  ( 0.0%)
home                                      156 B  ( 0.0%)       51 B  ( 0.0%)
github-deployments                        156 B  ( 0.0%)       51 B  ( 0.0%)
checkout                                  156 B  ( 0.0%)       51 B  ( 0.0%)
site-setup-wg                            -140 B  (-0.2%)      -48 B  (-0.3%)
site-setup-flow                          -140 B  (-0.2%)      -46 B  (-0.3%)
domain-user-transfer-flow                -123 B  (-0.1%)      -28 B  (-0.1%)
start-writing-flow                       -115 B  (-0.5%)      -40 B  (-0.7%)
transferring-hosted-site-flow            -114 B  (-0.2%)      -39 B  (-0.2%)
plugin-bundle-flow                       -113 B  (-0.1%)      -37 B  (-0.1%)
write-flow                               -102 B  (-0.0%)      -26 B  (-0.0%)
tailored-ecommerce-flow                  -102 B  (-0.2%)      -32 B  (-0.5%)
reblogging-flow                          -102 B  (-1.8%)      -34 B  (-1.8%)
onboarding-flow                          -102 B  (-0.3%)      -38 B  (-0.4%)
new-hosted-site-flow-user-included       -102 B  (-1.7%)      -30 B  (-1.5%)
new-hosted-site-flow                     -102 B  (-1.8%)      -31 B  (-1.6%)
link-in-bio-tld-flow                     -102 B  (-0.0%)      -28 B  (-0.0%)
link-in-bio-flow                         -102 B  (-0.6%)      -36 B  (-0.7%)
hundred-year-plan                        -102 B  (-0.3%)      -35 B  (-0.3%)
google-transfer                          -102 B  (-2.6%)      -35 B  (-2.5%)
free-flow                                -102 B  (-0.2%)      -36 B  (-0.4%)
entrepreneur-flow                        -102 B  (-0.1%)      -32 B  (-0.1%)
domain-transfer                          -102 B  (-2.8%)      -36 B  (-2.7%)
design-first-flow                        -102 B  (-0.4%)      -30 B  (-0.5%)
copy-site-flow                           -102 B  (-0.0%)      -37 B  (-0.0%)
build-flow                               -102 B  (-0.0%)      -26 B  (-0.0%)
update-design-flow                         73 B  ( 0.0%)       15 B  ( 0.0%)
site-migration-flow                       -49 B  (-0.1%)      -32 B  (-0.3%)
newsletter-flow                           -49 B  (-0.3%)      -31 B  (-0.6%)
migration-flow                            -49 B  (-0.1%)      -32 B  (-0.2%)
hosted-site-migration-flow                -49 B  (-0.1%)      -32 B  (-0.3%)
free-post-setup-flow                      -49 B  (-0.1%)      -30 B  (-0.5%)
connect-domain                            -49 B  (-0.2%)      -28 B  (-0.4%)
newsletter-post-setup-flow                 34 B  ( 0.0%)       16 B  ( 0.0%)
link-in-bio-post-setup-flow                28 B  ( 0.0%)       22 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.

Async-loaded Components (~51 bytes added 📈 [gzipped])

name               parsed_size           gzip_size
async-load-design        156 B  ( 0.0%)       51 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 · 2024-08-07T12:08:20Z

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 update/stepper-step-navigation-tracking-submit-remaining-flows on your sandbox.

alshakero

BEAUTIFUL! Wow man, removed so much noise!! Thank a lot. Found one tiiiny issue.

alshakero · 2024-08-07T12:38:49Z

client/landing/stepper/declarative-flow/update-options.ts

 const siteSlug = useSiteSlug();
 const flowToReturnTo = useQuery().get( 'flowToReturnTo' ) || 'free';

+ // eslint-disable-next-line @typescript-eslint/no-unused-vars


Do we need this?

There are alternatives. But what do you suggest?

These sort of "fixes" are usually a sign of the code that underlies it. In this case, you really didn't need the two arguments signature with a spread on the second. A single object would have been better

My bad, I didn't know providedDependencies was not used at all underneath. I thought it was a mistake.

Testing now..

alshakero

Tested 3 random flows and they work exactly like intended. Tested flows that need intent and ones that don't. Great work.

chriskmnds · 2024-08-08T09:56:12Z

Thanks @alshakero 👍

Can we also take a look at #93273 and #93275 so we can wrap up this part? connect-domain flow is done there as an example of passing more props.

…remaining flows

…remaining flows (#93319)

chriskmnds added the Stepper label Aug 7, 2024

chriskmnds added this to the Stepper Improvements: Improve and Abstract Tracks milestone Aug 7, 2024

chriskmnds self-assigned this Aug 7, 2024

chriskmnds requested a review from a team as a code owner August 7, 2024 09:29

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

chriskmnds force-pushed the update/stepper-step-navigation-tracking-submit-connect-domain branch from 3ddc3b6 to 6c3ebdb Compare August 7, 2024 11:46

chriskmnds force-pushed the update/stepper-step-navigation-tracking-submit-remaining-flows branch from d6a363a to 99aea8b Compare August 7, 2024 11:49

alshakero requested changes Aug 7, 2024

View reviewed changes

alshakero approved these changes Aug 7, 2024

View reviewed changes

chriskmnds force-pushed the update/stepper-step-navigation-tracking-submit-connect-domain branch from 6c3ebdb to 7c4cb04 Compare August 12, 2024 16:17

chriskmnds force-pushed the update/stepper-step-navigation-tracking-submit-remaining-flows branch from 99aea8b to faddf53 Compare August 12, 2024 16:18

chriskmnds force-pushed the update/stepper-step-navigation-tracking-submit-connect-domain branch from 7c4cb04 to f5ee38d Compare August 19, 2024 16:18

chriskmnds force-pushed the update/stepper-step-navigation-tracking-submit-remaining-flows branch from faddf53 to b80a380 Compare August 19, 2024 16:19

chriskmnds force-pushed the update/stepper-step-navigation-tracking-submit-connect-domain branch from f5ee38d to f65d38f Compare August 21, 2024 16:19

chriskmnds force-pushed the update/stepper-step-navigation-tracking-submit-remaining-flows branch from b80a380 to 3f30f0c Compare August 21, 2024 16:20

chriskmnds force-pushed the update/stepper-step-navigation-tracking-submit-connect-domain branch from f65d38f to e4e378b Compare August 21, 2024 16:51

chriskmnds force-pushed the update/stepper-step-navigation-tracking-submit-remaining-flows branch from b5dcd29 to b1f6ea3 Compare August 21, 2024 16:51

chriskmnds force-pushed the update/stepper-step-navigation-tracking-submit-connect-domain branch from e4e378b to 86d181d Compare August 22, 2024 09:12

Base automatically changed from update/stepper-step-navigation-tracking-submit-connect-domain to trunk August 22, 2024 09:23

chriskmnds added 4 commits August 22, 2024 12:24

Stepper: Make framework tracking of submit-step the default. Updates …

71b3831

…remaining flows

Stepper: Make framework tracking of submit-step the default. Updates …

75c613b

…remaining flows

Stepper: Make framework tracking of submit-step the default. Updates …

60eff64

…remaining flows

remove temp flag from migration flow

654df6e

chriskmnds force-pushed the update/stepper-step-navigation-tracking-submit-remaining-flows branch from b1f6ea3 to 654df6e Compare August 22, 2024 09:24

chriskmnds merged commit e27db4a into trunk Aug 22, 2024
11 checks passed

chriskmnds deleted the update/stepper-step-navigation-tracking-submit-remaining-flows branch August 22, 2024 09:56

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 22, 2024

TimBroddin pushed a commit that referenced this pull request Aug 26, 2024

Stepper: Make framework tracking of submit-step the default. Updates …

aa227dc

…remaining flows (#93319)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stepper: Make framework tracking of submit-step the default. Updates remaining flows #93319

Stepper: Make framework tracking of submit-step the default. Updates remaining flows #93319

chriskmnds commented Aug 7, 2024

github-actions bot commented Aug 7, 2024 •

edited by matticbot

Loading

matticbot commented Aug 7, 2024 •

edited

Loading

matticbot commented Aug 7, 2024 •

edited

Loading

alshakero left a comment

alshakero Aug 7, 2024

chriskmnds Aug 7, 2024

alshakero Aug 7, 2024

alshakero Aug 7, 2024

alshakero left a comment

chriskmnds commented Aug 8, 2024

Stepper: Make framework tracking of submit-step the default. Updates remaining flows #93319

Stepper: Make framework tracking of submit-step the default. Updates remaining flows #93319

Conversation

chriskmnds commented Aug 7, 2024

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Aug 7, 2024 • edited by matticbot Loading

matticbot commented Aug 7, 2024 • edited Loading

matticbot commented Aug 7, 2024 • edited Loading

alshakero left a comment

Choose a reason for hiding this comment

alshakero Aug 7, 2024

Choose a reason for hiding this comment

chriskmnds Aug 7, 2024

Choose a reason for hiding this comment

alshakero Aug 7, 2024

Choose a reason for hiding this comment

alshakero Aug 7, 2024

Choose a reason for hiding this comment

alshakero left a comment

Choose a reason for hiding this comment

chriskmnds commented Aug 8, 2024

github-actions bot commented Aug 7, 2024 •

edited by matticbot

Loading

matticbot commented Aug 7, 2024 •

edited

Loading

matticbot commented Aug 7, 2024 •

edited

Loading