Premium Analytics: extract shared section-tab machinery and stats breadcrumbs

[Nikschavan]

Part of WOOA7S-1614 / WOOA7S-1620

Stack 1/3 — merges first. Followed by the report-page framework (#50304) and the Posts & Pages report (#50305).

Proposed changes

This is the extraction PR for the report-pages work — it moves the pieces that report pages share with existing screens into common packages. Everything here is additive; no shipped behavior changes.

• useSectionTab( routeFrom, resolve ) in @jetpack-premium-analytics/routing — a small hook binding a tab id to the ?section= URL param via useStagedSearch, so tab state survives reloads and back/forward navigation.
• defineReportTabs() in @jetpack-premium-analytics/routing (+ unit tests) — declares a tab set once (ids, lazy i18n label getters, a resolve function that maps an arbitrary URL value to a valid tab id) and derives everything else from it.
• ReportPageTabs / ReportPageTabPanel in widgets-toolkit — the presentational tab bar for pages with multiple views, generic over the tab-id string type. Panels must use ReportPageTabPanel from the same module: routes and the toolkit each bundle their own @wordpress/ui copy, and Base UI's tabs context doesn't cross bundle copies (documented in the component README).
• StatsBreadcrumbs moved from routes/post-detail/components/ to widgets-toolkit so other pages can use the Stats / <title> breadcrumb. The only post-detail change is the import path.

Post-detail deliberately keeps its own PostDetailTabs / useActiveTab, and the dashboard keeps DashboardSections. These three tab implementations are near-identical now — I'd like to discuss renaming the shared component to something generic (e.g. SectionTabs) and folding the other two into it as a follow-up, rather than growing three copies.

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

No.

Testing instructions

Nothing consumes the new machinery yet (first consumer is the Posts & Pages report PR in this stack), so this is a regression check on post-detail plus the unit tests:

• cd projects/packages/premium-analytics && pnpm run build, open the dashboard, and click into any post — the Stats / <post title> breadcrumb on the post detail page should render and link back to the dashboard exactly as on trunk, carrying the selected date range.
• Post-detail tabs (Overview / Traffic / …) should behave exactly as on trunk — they are untouched.
• pnpm run test in the package — includes the new define-report-tabs tests.

[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

[Copilot]

Pull request overview

Extracts shared “report page” building blocks from Premium Analytics so upcoming /reports/* pages can reuse URL-backed tabs and common header UI (breadcrumbs + tab bar) without changing existing shipped behavior.

Changes:

• Add defineReportTabs() (+ tests) and useSectionTab() to @jetpack-premium-analytics/routing for consistent, URL-backed ?section= tab state.
• Add ReportPageTabs / ReportPageTabPanel and move StatsBreadcrumbs into @jetpack-premium-analytics/widgets-toolkit for reuse across routes (including future report pages).
• Update post-detail to import StatsBreadcrumbs from widgets-toolkit and add the corresponding workspace dependency.

Reviewed changes

Copilot reviewed 18 out of 19 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
projects/packages/premium-analytics/routes/post-detail/stage.tsx	Switch post-detail to consume shared StatsBreadcrumbs from widgets-toolkit.
projects/packages/premium-analytics/routes/post-detail/package.json	Add widgets-toolkit workspace dependency required by the new import.
projects/packages/premium-analytics/routes/post-detail/components/index.ts	Stop exporting the local StatsBreadcrumbs from post-detail components.
projects/packages/premium-analytics/packages/widgets-toolkit/src/index.ts	Re-export new report-page components and StatsBreadcrumbs from the toolkit public API.
projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/stats-breadcrumbs.tsx	Export StatsBreadcrumbsProps and host the shared breadcrumbs component in the toolkit.
projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/stats-breadcrumbs.module.scss	Add styles for the shared breadcrumbs UI.
projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-page-tabs.tsx	Introduce shared ReportPageTabs + ReportPageTabPanel wrappers around @wordpress/ui tabs.
projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-page-tabs.module.scss	Add styling for the shared report-page tabs bar.
projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/README.md	Document report-page components and the “same bundle for Tabs.Root/Panel” requirement.
projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/index.ts	Barrel export for report-page components/types.
projects/packages/premium-analytics/packages/widgets-toolkit/src/components/index.ts	Include report-page exports in the toolkit component barrel.
projects/packages/premium-analytics/packages/routing/src/tabs/index.ts	Barrel export for tab-definition helpers/types.
projects/packages/premium-analytics/packages/routing/src/tabs/define-report-tabs.ts	Add defineReportTabs() helper for tab definitions, resolution, and lazy labels.
projects/packages/premium-analytics/packages/routing/src/tabs/define-report-tabs.test.ts	Unit tests for defineReportTabs() behavior and laziness.
projects/packages/premium-analytics/packages/routing/src/index.ts	Export new hook/tab helpers from routing package root.
projects/packages/premium-analytics/packages/routing/src/hooks/use-section-tab/use-section-tab.ts	Add useSectionTab() hook tying a tab id to the ?section= search param via staged search.
projects/packages/premium-analytics/packages/routing/src/hooks/use-section-tab/index.ts	Barrel export for useSectionTab().
projects/packages/premium-analytics/packages/routing/src/hooks/index.ts	Include useSectionTab() in hooks barrel.
projects/packages/premium-analytics/changelog/add-pa-shared-section-tabs	Add changelog entry describing the shared extraction work.

[Nikschavan]

FYI, we have three copies of this tabs structure at the moment — DashboardSections in the dashboard route, PostDetailTabs in post-detail, and now ReportPageTabs here. Ideally I think we can consolidate the tabs structure into a single place — that could be done in a separate PR or in this one too. Let me know your thoughts.