Connect Refresh: Updated Woo DNA JP flow to unified Login

[chriskmnds]

Part of https://linear.app/a8c/issue/DOTCOM-13732/woo-dna-jp-flow

Proposed Changes

• The "Woo DNA JP flow" gets triggered when ?woodna_service_name=1 exists in the URL.
• This previously rendered a different form on Login. We now unify to utilise the default Login screen.

Questions

• Question: Is this still relevant/active, or has it been replaced with the various WooJPC client Logins? (so we can more effectively remove all the plumbing instead)
• Question: Would it make sense to make isJetpackWooDnaFlow part of isWoo (from getWoo) selector and avoid the extra property in the code?

Media

Before	After

Why are these changes being made?

Part of https://linear.app/a8c/issue/DOTCOM-13732/woo-dna-jp-flow

Testing Instructions

• Go to JP Woo DNA Login and confirm
• Click into "lost your password" and back. Confirm design is stable and adapted to Woo styling
• Go to any of the other OAuth client Logins and default WP Login and confirm no changes.

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 tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• 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]

Link to live branch is being generated...
Please wait a few minutes and refresh this page.

[matticbot]

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

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

• blaze-dashboard
• command-palette-wp-admin
• help-center
• notifications
• odyssey-stats

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/connect-refresh-login-woo-dna on your sandbox.

[matticbot]

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

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

name                   parsed_size           gzip_size
entry-login                -8832 B  (-0.4%)    -2139 B  (-0.3%)
entry-reauth-required       +399 B  (+0.0%)      +66 B  (+0.0%)
entry-main                  +399 B  (+0.0%)      +66 B  (+0.0%)

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

Sections (~194 bytes removed 📉 [gzipped])

name               parsed_size           gzip_size
jetpack-connect        -3329 B  (-0.2%)     -378 B  (-0.1%)
stepper-user-step       +654 B  (+0.1%)     +184 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 (~490 bytes removed 📉 [gzipped])

name                          parsed_size           gzip_size
async-load-design-blocks          -4497 B  (-0.2%)     -563 B  (-0.1%)
async-load-signup-steps-user       +402 B  (+0.1%)      +73 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.

[raicem]

Hey @chriskmnds, thank you for the PR! I went through Woo and other pages and all looks good. I'll go through the code now, but before I do that I did some investigation around this woodna_service_name.

I found this D150157-code with instructions to test. I followed it to install Woo Shipping. Activating it shows me the Connect button:

Connect button takes me to this URL.

Question: Is this still relevant/active, or has it been replaced with the various WooJPC client Logins? (so we can more effectively remove all the plumbing instead)

I would say, yes, this seems pretty active still. But does it need this custom styling, I doubt it, so it can be aligned with WooJPC, in my opinion.

Question: Would it make sense to make isJetpackWooDnaFlow part of isWoo (from getWoo) selector and avoid the extra property in the code?
Yeah, I think it makes sense. We might update the WooJPC theming to look a bit more like wp-admin and WordPress-y, rather than Woo-themed. But it should go nicely with Woo Shipping connection screen too.

Interestingly, this PR doesn't change much in the designs, I hope I didn't mess up something but this is the URL I used.

[chriskmnds]

Thanks @raicem!

Question: Is this still relevant/active, or has it been replaced with the various WooJPC client Logins? (so we can more effectively remove all the plumbing instead)

I would say, yes, this seems pretty active still. But does it need this custom styling, I doubt it, so it can be aligned with WooJPC, in my opinion.

Question: Would it make sense to make isJetpackWooDnaFlow part of isWoo (from getWoo) selector and avoid the extra property in the code?
Yeah, I think it makes sense. We might update the WooJPC theming to look a bit more like wp-admin and WordPress-y, rather than Woo-themed. But it should go nicely with Woo Shipping connection screen too.

Interestingly, this PR doesn't change much in the designs, I hope I didn't mess up something but this is the URL I used.

Interesting! I think you just unearthed another OAuth Login screen that we haven't migrated. But this is also part of the Connect flow, so not sure how that works right now.

The Woo DNA flow that I chased in this PR was defined when woodna_service_name is set in the query arguments, which may be arbitrary (either sent through the Connect flow or directly linked, I suppose).

I think what I will try next is to include both the client ID 246055947 and woodna_service_name into the isWooJPC selector (or the latter into isWoo instead - since it's not a client per se) 🤔

I'll dig a little more and ping you back to give it another look. Thanks! 🙏

[chriskmnds]

Gosh, this is old code #41798