Skip to content

My Jetpack: Unify the user connection screen #44469

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 26 commits into from
Jul 31, 2025

Conversation

manzoorwanijk
Copy link
Member

@manzoorwanijk manzoorwanijk commented Jul 25, 2025

Completes MYJP-237

Proposed changes:

  • This PR unifies all the user connection flows when there is a site connection by using a common user connection URL where the user will be directly redirected to the user connection flow on Calypso

Other information:

  • Have you written new tests for your changes, if applicable?
  • Have you checked the E2E test CI results, and verified that your changes do not break them?
  • Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

  • Disconnect your site - jetpack docker wp jetpack disconnect blog
  • Then connect your site without completing the user connection
  • Go to My Jetpack
  • Scroll down to the bottom to find the "Connect my account" button
  • Click on it
  • Confirm that it takes you to the user connection screen on wordpress.com
  • Confirm the same on licence action button down there
  • Confirm the same from the notice CTA at the top of the page
  • With only site connection, go to Jetpack > Settings > Security
  • Under Downtime monitoring, click on "Connect" to connect the user account
  • Confirm that it goes to the same user connection screen on wordpress.com
  • Confirm the same for Social in Sharing settings

@manzoorwanijk manzoorwanijk requested review from a team and Copilot July 25, 2025 07:19
@manzoorwanijk manzoorwanijk self-assigned this Jul 25, 2025
@manzoorwanijk manzoorwanijk added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Status] Needs Team Review Obsolete. Use Needs Review instead. labels Jul 25, 2025
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR unifies the user connection flow across My Jetpack by creating a dedicated onboarding-style page for user connection. Instead of having separate connection flows throughout the interface, all user connection actions now redirect to a unified screen accessible via &step=connect-user.

  • Unified all user connection entry points to use a single screen (step=connect-user)
  • Updated connection handling logic to support both site and user connection flows
  • Modified connection form to display different content based on connection status

Reviewed Changes

Copilot reviewed 33 out of 33 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
projects/packages/my-jetpack/src/class-initializer.php Added routing logic for connect-user step and updated redirect handling
projects/packages/my-jetpack/_inc/components/onboarding-screen/connection-form/connection-form.tsx Enhanced connection form to handle both site and user connection states
projects/packages/my-jetpack/_inc/admin.jsx Updated routing to support connect-user step alongside onboarding
projects/plugins/jetpack/_inc/client/components/settings-card/index.jsx Changed user connection flow to redirect to unified screen
Multiple files Updated URL references from hash-based routing to step parameter approach

Copy link
Contributor

github-actions bot commented Jul 25, 2025

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

  • To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the update/my-jetpack/unify-user-connection-screen branch.
  • To test on Simple, run the following command on your sandbox:
bin/jetpack-downloader test jetpack update/my-jetpack/unify-user-connection-screen
bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/my-jetpack/unify-user-connection-screen

Interested in more tips and information?

  • In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
  • Read more about our development workflow here: PCYsg-eg0-p2
  • Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

@github-actions github-actions bot added [Block] Subscriptions [Feature] Publicize Now Jetpack Social, auto-sharing [JS Package] Connection [JS Package] Licensing [JS Package] Publicize Components [Package] My Jetpack [Package] VideoPress [Plugin] Automattic For Agencies Client [Plugin] Backup A plugin that allows users to save every change and get back online quickly with one-click restores. [Plugin] Boost A feature to speed up the site and improve performance. [Plugin] Classic Theme Helper Plugin [Plugin] CRM Issues about the Jetpack CRM plugin [Plugin] Inspect [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Plugin] mu wpcom jetpack-mu-wpcom plugin [Plugin] Protect A plugin with features to protect a site: brute force protection, security scanning, and a WAF. [Plugin] Search A plugin to add an instant search modal to your site to help visitors find content faster. [Plugin] Social Issues about the Jetpack Social plugin [Plugin] Starter Plugin [Plugin] VideoPress A standalone plugin to add high-quality VideoPress videos to your site. [Plugin] Wpcomsh Admin Page React-powered dashboard under the Jetpack menu RNA labels Jul 25, 2025
@manzoorwanijk manzoorwanijk force-pushed the update/my-jetpack/unify-user-connection-screen branch from 9b7d468 to 63eed79 Compare July 29, 2025 05:09
@manzoorwanijk manzoorwanijk added the I don't care about code coverage for this PR Use this label to ignore the check for insufficient code coveage. label Jul 30, 2025
*/
export function getUserConnectionUrl( redirectUrl?: string | null ): string {
return addQueryArgs( getJetpackAdminPageUrl(), {
// This is handled in \Automattic\Jetpack\Connection\Webhooks::controller()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you extend the comment to explain a bit more?

I would restrain from using relative words like "This", cause it might be not sure what they reference.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated. Thanks

Copy link
Contributor

@grzegorz-cp grzegorz-cp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving so you can ship after implementing Robert's comment.

@manzoorwanijk manzoorwanijk merged commit 3de5d52 into trunk Jul 31, 2025
88 checks passed
@manzoorwanijk manzoorwanijk deleted the update/my-jetpack/unify-user-connection-screen branch July 31, 2025 04:19
@github-actions github-actions bot removed the [Status] Needs Team Review Obsolete. Use Needs Review instead. label Jul 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Admin Page React-powered dashboard under the Jetpack menu [Block] Subscriptions Covered by non-unit tests Use to ignore the Code coverage requirement check when E2Es or other non-unit tests cover the code [Feature] Publicize Now Jetpack Social, auto-sharing I don't care about code coverage for this PR Use this label to ignore the check for insufficient code coveage. [JS Package] Connection [JS Package] Licensing [JS Package] Publicize Components [Package] My Jetpack [Package] VideoPress [Plugin] Automattic For Agencies Client [Plugin] Backup A plugin that allows users to save every change and get back online quickly with one-click restores. [Plugin] Boost A feature to speed up the site and improve performance. [Plugin] Classic Theme Helper Plugin [Plugin] CRM Issues about the Jetpack CRM plugin [Plugin] Inspect [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Plugin] mu wpcom jetpack-mu-wpcom plugin [Plugin] Protect A plugin with features to protect a site: brute force protection, security scanning, and a WAF. [Plugin] Search A plugin to add an instant search modal to your site to help visitors find content faster. [Plugin] Social Issues about the Jetpack Social plugin [Plugin] Starter Plugin [Plugin] VideoPress A standalone plugin to add high-quality VideoPress videos to your site. [Plugin] Wpcomsh RNA [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants