My Jetpack: migrate link-variant Buttons to @wordpress/ui Link

[CGastrell]

Refs #48160

Proposed changes

Sweep @automattic/jetpack-components Button variant="link" usages in packages/my-jetpack and migrate them to @wordpress/ui Link. Continues the migration tracked in issue #48160 and follows the cross-cutting ExternalLink → Link precedent set by #48529.

Six call sites across two files were migrated. The Plans Section file already had Link imported from @wordpress/ui (the "Manage your plan" link in the same <ul>), so the new sites adopt a treatment already in production on the same screen.

BEFORE:

AFTER:

Sites migrated

File	Line (pre-change)	Old prop set	New element
_inc/components/plans-section/index.tsx	113	Button href isExternalLink variant="link" weight="regular"	Link href openInNewTab (Renew subscription)
_inc/components/plans-section/index.tsx	120	Button href isExternalLink variant="link" weight="regular"	Link href openInNewTab (Resume subscription)
_inc/components/plans-section/index.tsx	249	Button onClick href variant="link" weight="regular"	Link onClick href (View included features)
_inc/components/plans-section/index.tsx	262	Button onClick href isExternalLink variant="link" weight="regular"	Link onClick href openInNewTab (Purchase a plan)
_inc/components/plans-section/index.tsx	274	Button onClick href variant="link" weight="regular"	Link onClick href (Activate a license)
_inc/components/product-interstitial-modal/product-interstitial-modal.tsx	238	Button variant="link" isExternalLink href	Link openInNewTab href (Learn more)

plans-section/index.tsx no longer imports Button from @automattic/jetpack-components. product-interstitial-modal.tsx keeps its Button import because the modal-trigger <Button variant={ modalTriggerButtonVariant }> (primary/secondary) is out of scope for this slice.

Prop mapping (jetpack-components Button → @wordpress/ui Link)

Old prop	New prop	Notes
href	href	1:1
isExternalLink={ true }	openInNewTab	Verified against gutenberg/packages/ui/src/link/link.tsx: openInNewTab sets target="_blank" and appends an aria-labelled new-tab icon.
variant="link"	dropped	@wordpress/ui Link is link-styled by default (variant="default", tone="brand").
weight="regular"	dropped	@wordpress/ui Link does not expose a weight prop. Inherits the surrounding text weight, matching the existing already-migrated Link at the top of the same <ul> in plans-section.
children	children	1:1
onClick	onClick	Forwarded via LinkProps extends ComponentProps<'a'>.

Sites NOT migrated (intentional)

Site	Reason
_inc/components/connection-status-card/index.tsx:178	Button is imported from @wordpress/components, not @automattic/jetpack-components — out of scope for this slice.
_inc/components/product-interstitial-modal/product-interstitial-my-jetpack.tsx:154	Reserved for a sibling sub-slice (L1a) that touches that file holistically.
_inc/components/golden-token/tooltip/index.tsx:48	Icon-trigger borderless Button (variant="link" used to render an inline info icon, not a textual link). Needs design call; deferred.

Related product discussion/links

• Tracking issue: Jetpack UI Modernization #48160
• Cross-cutting precedent: Use Link instead of ExternalLink #48529 (@wordpress/components ExternalLink → @wordpress/ui Link)
• Strategy doc: internal task context (jetpack-components-migration ledger)

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

No. onClick handlers preserve the existing analytics events (jetpack_myjetpack_plans_manage_click, _view_included_features_click, _plans_purchase_click, _activate_license_click).

Testing instructions

1. From a connected My Jetpack admin user, navigate to wp-admin → Jetpack → My Jetpack.
2. Scroll to the Plans section.
3. With at least one paid plan, verify:
   • The "Manage your plan" / "View included features" / "Purchase a plan" / "Activate a license" links render as inline text links (brand-blue), inherit the surrounding list typography, and visually match the already-migrated "Manage your plan" link at the top of the list.
   • Clicking each link still navigates to the correct URL.
   • "Purchase a plan" should open in a new tab (look for the new-tab icon next to the label and target="_blank" on the anchor).
4. For an expiring/expired purchase, verify the Renew subscription / Resume subscription link renders inline, navigates correctly, and opens in a new tab.
5. Open any product interstitial modal (e.g., MJ → Add new product → Backup), then click the modal trigger to open the modal. Verify the Learn more link in the left column of the modal renders as a link, navigates correctly, and opens in a new tab when secondaryButtonHasExternalLink defaults to true.
6. Confirm no console errors related to the changed files.

Gating note

Per #48529, @wordpress/ui Link still has a style-parity gap with @wordpress/components ExternalLink that is tracked upstream as gutenberg#77790. If reviewers spot any visual regressions stemming from that same gap, this PR may need to wait for the upstream fix — same as #48529. The component swap here is mechanically equivalent to what #48529 already shipped, so the parity story should be identical.

[github-actions]

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), and enable the change/my-jetpack-link-sweep branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack change/my-jetpack-link-sweep

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]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[jp-launch-control]

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report