My Jetpack: Onboarding i3 | Add help section by manzoorwanijk · Pull Request #43638 · Automattic/jetpack

manzoorwanijk · 2025-05-27T13:10:18Z

Completes MYJP-132

Proposed changes:

This PR adds the Help tab/section to My Jetpack

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:

Go to My Jetpack > Help
Confirm that the UI matches the design - ofX26tWPDKuUh5v1qzgKog-fi-4525_71705
Confirm that the UI looks fine on different viewpoints.

Here are some screenshots at various viewpoints

github-actions · 2025-05-27T13:11:09Z

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/add-help-tab branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/my-jetpack/add-help-tab

bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/my-jetpack/add-help-tab

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 · 2025-05-27T13:11:24Z

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 a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ 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:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
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 · 2025-05-27T13:26:58Z

Code Coverage Summary

No summary data is available for parent commit 8df8823, so cannot calculate coverage changes. 😴

If that commit is a feature branch rather than a trunk commit, this is expected. Otherwise, this should be updated once coverage for 8df8823 is available.

Full summary · PHP report · JS report

projects/packages/my-jetpack/_inc/components/help-card/index.tsx

Copilot

Pull Request Overview

Adds a new Help tab/section to the My Jetpack onboarding experience, including its UI components, styles, and dependencies.

Introduces @automattic/jetpack-script-data to surface admin URLs.
Updates the main tab panel to import and render the new HelpContent component.
Adds HelpContent, HelpCards, HelpFooter, and corresponding SCSS modules and icons.

Reviewed Changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
projects/packages/my-jetpack/package.json	Added new dependency for script data
projects/packages/my-jetpack/changelog/update-my-jetpack-add-help-tab	Documented the addition of the Help tab
projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/tab-content.tsx	Updated import path to include HelpContent
projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/styles.module.scss	Removed extraneous whitespace
projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/styles.module.scss	New styles for Help section layout
projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/footer.tsx	Added HelpFooter component
projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/content.tsx	Added HelpContent component
projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/cards.tsx	Added HelpCards component
projects/packages/my-jetpack/_inc/components/icons/tool.tsx	Added SVG icon
projects/packages/my-jetpack/_inc/components/icons/comment.tsx	Added SVG icon
projects/packages/my-jetpack/_inc/components/icons/code.tsx	Added SVG icon
projects/packages/my-jetpack/_inc/components/help-card/styles.module.scss	New styles for HelpCard wrapper
projects/packages/my-jetpack/_inc/components/help-card/index.tsx	Added HelpCard component

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (2)

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/content.tsx:13

[nitpick] New UI components like HelpContent are added but no tests cover their rendering or interactions. Consider adding unit or integration tests.

export function HelpContent() {

projects/packages/my-jetpack/_inc/components/help-card/styles.module.scss:16

Invalid CSS variable syntax: extra parentheses in var((--jp-gray-90)) will break the style. It should be var(--jp-gray-90).

color: var((--jp-gray-90))

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/footer.tsx

projects/packages/my-jetpack/_inc/components/help-card/styles.module.scss

gmjuhasz

Looks good now, thanks!
We have that ultra-wide weirdness but I see that's flagged already p1748323780093229-slack-C08JR97D3J4

* Init * My Jetpack: Onboarding i3 - Initialize tab panel (#43595) * My Jetpack: Onboarding i3 - Init tab panel * Improve types and use constants and extractions * Add changelog to make CI happy * Create a shared tab content wrapper to share styling * Use "section" instead of tabs * Rename tab components to content components * Use correct headings * Decrease margins on smaller screens * Fix initial tab changed manually * My Jetpack: Onboarding i3 | Split the overview tab (#43632) * My Jetpack: Onboarding i3 | Split the overview tab * Fix separator position * My Jetpack: Onboarding i3 | Add help section (#43638) * My Jetpack: Onboarding i3 | Update help section * Remove double parenthesis * Thank you copilot * My Jetpack: Updating Products tab. (#43652) * Moving unowned products to the Products tab * Products tab header and spacing update * Moving owned and unowned products into a hook * changelog * Update projects/packages/my-jetpack/_inc/components/product-cards-section/style.module.scss RTL aware alternative Co-authored-by: Manzoor Wani <manzoorwani.jk@gmail.com> * Update projects/packages/my-jetpack/_inc/components/product-cards-section/style.module.scss RTL aware alternative Co-authored-by: Manzoor Wani <manzoorwani.jk@gmail.com> --------- Co-authored-by: Manzoor Wani <manzoorwani.jk@gmail.com> * My Jetpack: Tab filtering for admin role (#43675) * My Jetpack: Tab fitering for admin role * changelog * replacing permission check * My Jetpack: Onboarding i3 | Move Plan and Connection section to Overview tab (#43681) * My Jetpack: Onboarding i3 | Move Plan and Connection section to Overview tab * Remove unused styles * Fix unit tests * Fix E2E tests * Add changelog * Fix top border for the plan and connection section * Fix E2E test heading * Update E2E test string * Update connection owner message when author is not connected * Fix typo in changelog, thanks to copilot review. Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Fix connection block for JN sites * Move Jetpack Manage upsell banner to Overview * Update banner messaging --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * My Jetpack: Onboarding i3 | Fix layout on wider screens (#43699) * My Jetpack: Update upsell banner for Automattic for Agencies (#43697) * Update Jetpack Manage banner to A4A * Fix Help section CTA styling * Remove redundant changelogs * Updating Products tab visibility based on owned products (#43720) * Remove repeated changelog * My Jetpack: Onboarding i3 | Update Products tab description copy (#43724) * Add tracks events for My Jetpack Tab Navigation (#43703) * Add jetpack_myjetpack_tab_click, jetpack_myjetpack_page_view (enhance), jetpack_myjetpack_help_request events * Merge and resolve conflict in my-jetpack-tab-panel/index.tsx Combined functionality from both branches: - Analytics tracking and session duration from HEAD - Product filtering logic from feature/my-jetpack/onboarding-i3 - Maintained all imports and hooks from both versions - Preserved the analytics event tracking while adding dynamic tab visibility 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Improve source tab definition on help tracking hook --------- Co-authored-by: Claude <noreply@anthropic.com> * My jetpack: Onboarding i3 | Fix layout and alignment issues (#43725) * Fix horizontal scrollable space * Fix Jetpack log and tabs aligment issues * Add changelog * OK Copilot * My Jetpack: Replace deprecated sass APIs with alternatives (#43726) --------- Co-authored-by: Grzegorz Chudzinski-Pawlowski <112354940+grzegorz-cp@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Robert Sreberski <robertsreberski@gmail.com> Co-authored-by: Claude <noreply@anthropic.com>

manzoorwanijk requested a review from a team May 27, 2025 13:10

manzoorwanijk self-assigned this May 27, 2025

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 May 27, 2025

github-actions bot added the [Package] My Jetpack label May 27, 2025

My Jetpack: Onboarding i3 | Update help section

4df85b7

manzoorwanijk force-pushed the update/my-jetpack/add-help-tab branch from 73ff72c to 4df85b7 Compare May 28, 2025 05:14

gmjuhasz requested a review from Copilot May 28, 2025 09:04

gmjuhasz reviewed May 28, 2025

View reviewed changes

projects/packages/my-jetpack/_inc/components/help-card/index.tsx Show resolved Hide resolved

Copilot AI reviewed May 28, 2025

View reviewed changes

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/footer.tsx Outdated Show resolved Hide resolved

gmjuhasz reviewed May 28, 2025

View reviewed changes

projects/packages/my-jetpack/_inc/components/help-card/styles.module.scss Outdated Show resolved Hide resolved

manzoorwanijk added 2 commits May 28, 2025 14:39

Remove double parenthesis

136a265

Thank you copilot

4ae24a4

gmjuhasz approved these changes May 28, 2025

View reviewed changes

manzoorwanijk merged commit 1c9968a into feature/my-jetpack/onboarding-i3 May 28, 2025
70 checks passed

manzoorwanijk deleted the update/my-jetpack/add-help-tab branch May 28, 2025 09:17

github-actions bot removed the [Status] Needs Team Review Obsolete. Use Needs Review instead. label May 28, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

My Jetpack: Onboarding i3 | Add help section#43638

My Jetpack: Onboarding i3 | Add help section#43638
manzoorwanijk merged 3 commits intofeature/my-jetpack/onboarding-i3from
update/my-jetpack/add-help-tab

manzoorwanijk commented May 27, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 27, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 27, 2025

Uh oh!

jp-launch-control bot commented May 27, 2025 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

gmjuhasz left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

manzoorwanijk commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Other information:

Jetpack product discussion

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

Testing instructions:

Uh oh!

github-actions bot commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented May 27, 2025

Uh oh!

jp-launch-control bot commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

gmjuhasz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

manzoorwanijk commented May 27, 2025 •

edited

Loading

github-actions bot commented May 27, 2025 •

edited

Loading

jp-launch-control bot commented May 27, 2025 •

edited

Loading