Skip to content

My Jetpack: Onboarding i3 | Split the overview tab#43632

Merged
manzoorwanijk merged 2 commits intofeature/my-jetpack/onboarding-i3from
update/my-jetpack/split-overview-tab
May 27, 2025
Merged

My Jetpack: Onboarding i3 | Split the overview tab#43632
manzoorwanijk merged 2 commits intofeature/my-jetpack/onboarding-i3from
update/my-jetpack/split-overview-tab

Conversation

@manzoorwanijk
Copy link
Member

@manzoorwanijk manzoorwanijk commented May 27, 2025

This PR updates the Overview tab to reflect the updated designs.

Completes MYJP-130

Proposed changes:

  • Update the Overview tab with the product cards from the existing My Jetpack screen

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
  • Go to the Overview tab
  • Confirm that you see the overview as given in the designs - ofX26tWPDKuUh5v1qzgKog-fi-4497_76952
  • Confirm that the UI looks fine on different viewpoints

Here are the screenshots at different viewpoints

Screenshot 2025-05-27 at 10 46 23 AM Screenshot 2025-05-27 at 10 48 00 AM Screenshot 2025-05-27 at 10 47 47 AM Screenshot 2025-05-27 at 10 47 39 AM Screenshot 2025-05-27 at 10 47 16 AM

@manzoorwanijk manzoorwanijk requested a review from a team May 27, 2025 05:36
@manzoorwanijk manzoorwanijk self-assigned this May 27, 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 May 27, 2025
@github-actions
Copy link
Contributor

github-actions bot commented May 27, 2025

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:

  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!

@github-actions
Copy link
Contributor

github-actions bot commented May 27, 2025 •
edited
Loading

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 update/my-jetpack/split-overview-tab branch.
  • To test on Simple, run the following command on your sandbox:
bin/jetpack-downloader test jetpack update/my-jetpack/split-overview-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

@jp-launch-control
Copy link

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

Code Coverage Summary

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

Full summary · PHP report · JS report

robertsreberski
robertsreberski reviewed May 27, 2025
View reviewed changes
Copy link
Contributor

@robertsreberski robertsreberski left a comment

Choose a reason for hiding this comment

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

It looks nice already, thanks!

The only thing is, I think the shadow should be below tabs navigation, not above:

Design:
CleanShot 2025-05-27 at 09 52 42

The PR:
CleanShot 2025-05-27 at 09 53 50

@manzoorwanijk
Copy link
Member Author

manzoorwanijk commented May 27, 2025

The only thing is, I think the shadow should be below tabs navigation, not above:

Pushed a fix for that.

Screenshot 2025-05-27 at 1 58 31 PM

robertsreberski
robertsreberski approved these changes May 27, 2025
View reviewed changes
Copy link
Contributor

@robertsreberski robertsreberski left a comment

Choose a reason for hiding this comment

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

Nice, thanks!

@manzoorwanijk manzoorwanijk merged commit 3094e1a into feature/my-jetpack/onboarding-i3 May 27, 2025
73 checks passed
@manzoorwanijk manzoorwanijk deleted the update/my-jetpack/split-overview-tab branch May 27, 2025 08:39
@github-actions github-actions bot removed the [Status] Needs Team Review Obsolete. Use Needs Review instead. label May 27, 2025
robertsreberski added a commit that referenced this pull request Jun 2, 2025
@manzoorwanijk @grzegorz-cp
@robertsreberski @claude
My Jetpack: Onboarding i3 - Feature Branch/PR (#43592)
7e1133e 
* 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>
mikestottuk pushed a commit that referenced this pull request Jun 26, 2025
@manzoorwanijk @grzegorz-cp
@robertsreberski @claude @mikestottuk
My Jetpack: Onboarding i3 - Feature Branch/PR (#43592)
24243d5 
* 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@robertsreberski robertsreberski robertsreberski approved these changes

Assignees

@manzoorwanijk manzoorwanijk

Labels

[Package] My Jetpack [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@manzoorwanijk @robertsreberski