My Jetpack: Onboarding i3 - Init tab panel by manzoorwanijk · Pull Request #43595 · Automattic/jetpack

manzoorwanijk · 2025-05-23T11:54:09Z

Completes MYJP-129

Proposed changes:

Adds the initial tab panel component 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 after completing the connection
Confirm that you see the tab panel
Navigate to the tabs
Confirm that the URL gets updated
Reload the page
Confirm that the select tab is preserved

Screen.Recording.2025-05-23.at.5.22.06.PM.mov

github-actions · 2025-05-23T11:54:59Z

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 add/my-jetpack/onboarding-i3-basic-tab-panel branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack add/my-jetpack/onboarding-i3-basic-tab-panel

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-23T11:55:26Z

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-23T12:07:12Z

Code Coverage Summary

No summary data is available for parent commit 72a9ac1, 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 72a9ac1 is available.

Full summary · PHP report · JS report

robertsreberski

Works good, thanks for the quick implementation!

I'm leaving some of the feedback below; most urgent functional feedback is that we should probably explicitly mention which paths are supported by tab system - or revert to the default path if some custom not existing one is provided.

robertsreberski · 2025-05-23T12:18:12Z

projects/packages/my-jetpack/_inc/constants.ts


 export const MyJetpackRoutes = {
-	Home: '/',
+	Home: '/:tab',


Should we be more exhaustive here which options for tabs are available? As I understand, currently it might match anything other than defined paths?

React Router does not support pattern matching here, but we can validate the value when using it.

robertsreberski · 2025-05-23T12:19:57Z

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

+		[ navigate, params.tab ]
+	);
+
+	const tabRenderer = useCallback( ( tab: { name: string; title: string } ) => {


We can benefit from more explicit typing here.

Do you have any suggestions about it?

robertsreberski · 2025-05-23T12:20:08Z

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

+	const navigate = useNavigate();
+
+	const onTabSelect = useCallback(
+		( tabName: string ) => {


We can benefit from more explicit typing here.

robertsreberski · 2025-05-23T12:21:44Z

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

+	return (
+		<TabPanel
+			className={ styles[ 'tab-panel' ] }
+			initialTabName={ params.tab || 'overview' }


Should we perhaps also replace the path to /overview if the initial tab name is not provided?

Also, I would probably go for some globally defined constant "DEFAULT_INITIAL_TAB" instead of hardcoding it here in code.

Yes, it defaults to /overview if nothing is provided or if an invalid tab name is supplied.

robertsreberski · 2025-05-23T12:23:32Z

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

+			tabs={ [
+				{
+					name: 'overview',
+					title: __( 'Overview', 'jetpack-my-jetpack' ),
+				},
+				{
+					name: 'products',
+					title: __( 'Products', 'jetpack-my-jetpack' ),
+				},
+				{
+					name: 'help',
+					title: __( 'Help', 'jetpack-my-jetpack' ),
+				},
+			] }


Maybe it's better to define it as a variable outside of the component?

I also lack (type) connection between this array and tabComponentMap. It could be more exhaustive that options provided here should match the mapping and vice-versa.

Maybe it's better to define it as a variable outside of the component?

That doesn't play nice with translations as the components update but the variable outside the component never updates/re-renders.

I have extracted it to a function instead of a variable that works well with translations.

…nboarding-i3-basic-tab-panel

robertsreberski

I believe it's almost there but still would recommend the routing to be more in sync with UI.

robertsreberski · 2025-05-26T13:11:43Z

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

+			if ( tabName !== params.section ) {
+				navigate( `/${ tabName }` );
+			}


should we have a guard here, to prevent setting random tab names (and blank page)?

or better, use replaceState() to keep the url in sync? otherwise /blabla will display "Overview" page, while not critical - it's not perfect as well.

But since we control the tabs, where will the random value come from?

right, that's true! thanks, I think then the only case is if I input manually #/foobar

the only case is if I input manually #/foobar

That won't do anything because no route is registered corresponding that path

I have fixed it in ae26423

You can see what happens if I update the URL manually. The key prop will reset the state when the URL is updated manually.

Screen.Recording.2025-05-26.at.7.02.34.PM.mov

robertsreberski · 2025-05-26T13:12:40Z

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

+	const initialTab = isValidMyJetpackSection( params.section )
+		? params.section
+		: MY_JETPACK_SECTION_OVERVIEW;


I believe we could have this value behind useState( () => return initialTab and maybe do replaceState() )

Why? The URL should reflect immediately because TabPanel calls that onSelect with the initialTabName on mount and it in turn updates the URL accordingly. We don't need to manage any state here.

alright, thanks for making it clear, what do you think about the replaceState() in case isValidMyJetpackSection() === false?

It already happens, the URL is reflected immediately on mount. We don't need to perform any magic here.

Screen.Recording.2025-05-26.at.6.58.05.PM.mov

robertsreberski

Thanks, that is ready to be a base for all other PRs!

* 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>

My Jetpack: Onboarding i3 - Init tab panel

8031396

manzoorwanijk requested a review from a team May 23, 2025 11:54

manzoorwanijk self-assigned this May 23, 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. Enhancement labels May 23, 2025

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

github-actions bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label May 23, 2025

robertsreberski requested changes May 23, 2025

View reviewed changes

manzoorwanijk added 2 commits May 23, 2025 19:08

Improve types and use constants and extractions

a09f938

Add changelog to make CI happy

9a6ff03

manzoorwanijk removed the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label May 23, 2025

manzoorwanijk added 2 commits May 23, 2025 19:23

Create a shared tab content wrapper to share styling

719aa27

Use "section" instead of tabs

dd1a026

manzoorwanijk requested a review from a team May 23, 2025 14:05

manzoorwanijk added 2 commits May 23, 2025 20:03

Rename tab components to content components

3a0e5a2

Use correct headings

557e310

manzoorwanijk force-pushed the add/my-jetpack/onboarding-i3-basic-tab-panel branch from 20aba9b to 557e310 Compare May 23, 2025 14:33

manzoorwanijk added 2 commits May 23, 2025 20:16

Decrease margins on smaller screens

35421cb

Merge branch 'feature/my-jetpack/onboarding-i3' into add/my-jetpack/o…

61c8d9d

…nboarding-i3-basic-tab-panel

robertsreberski reviewed May 26, 2025

View reviewed changes

Fix initial tab changed manually

ae26423

robertsreberski approved these changes May 26, 2025

View reviewed changes

manzoorwanijk merged commit 49b56b1 into feature/my-jetpack/onboarding-i3 May 26, 2025
52 checks passed

manzoorwanijk deleted the add/my-jetpack/onboarding-i3-basic-tab-panel branch May 26, 2025 13:36

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

Conversation

manzoorwanijk commented May 23, 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 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Code Coverage Summary

Uh oh!

robertsreberski left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

robertsreberski left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

robertsreberski 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 23, 2025 •

edited

Loading

github-actions bot commented May 23, 2025 •

edited

Loading

github-actions bot commented May 23, 2025 •

edited

Loading

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

edited

Loading

manzoorwanijk May 26, 2025 •

edited

Loading

manzoorwanijk May 26, 2025 •

edited

Loading