Skip to content

Premium Analytics: add React Query Devtools dev-only widget#50002

Open
retrofox wants to merge 6 commits into
trunkfrom
update/react-query-devtools-widget
Open

Premium Analytics: add React Query Devtools dev-only widget#50002
retrofox wants to merge 6 commits into
trunkfrom
update/react-query-devtools-widget

Conversation

@retrofox

@retrofox retrofox commented Jun 26, 2026

Copy link
Copy Markdown
Contributor

Proposed changes

Add a React Query Devtools widget (jpa/react-query-dev-tool)
to the Premium Analytics dashboard.
It mounts ReactQueryDevtoolsPanel bound to the dashboard's shared queryClient singleton through the explicit client prop (not React context), so it inspects the exact cache every other widget reads from.

Introduce a server-side widget availability layer:
A new jetpack_premium_analytics_widget_types filter plus get_available_widget_types().

This becomes the single point through which widget types are exposed to both the /jetpack/v4/widget-modules REST list and the dashboard page import map, so the same policy applies everywhere a widget type reaches the client.

Gate the devtools widget to non-production environments by default
Keyed off wp_get_environment_type().
Dropping a type from the availability set removes it from the REST list and the import map, so it can never be rendered or added to a production dashboard.

Replace the previous inline devtools integration
In packages/data: remove the lazy()/Suspense NODE_ENV gate from the query client provider and drop the @tanstack/react-query-devtools devDependency.
That dependency now lives in the widget's own package.

  • Add PHPUnit coverage for the availability filter (Widget_Availability_Test).

Closes WOOA7S-1611

Related product discussion/links

  • N/A

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

No. The widget is a developer-only tool that inspects the in-browser React Query cache, and it is gated out of production entirely.

Testing instructions

  • Build the package
jetpack build packages/premium-analytics
  • In a non-production environment (WP_ENVIRONMENT_TYPE set to local, development, or staging), open the Jetpack Premium Analytics dashboard in wp-admin.
jetpack docker wp config set WP_ENVIRONMENT_TYPE development

To see the current env

jetpack docker wp eval 'echo wp_get_environment_type();'
  • Open the widget picker and confirm React Query Devtools appears under the developer category, then add it to the dashboard.
  • Confirm the panel renders and reflects the dashboard's live query cache: queries fetched by other widgets should appear in it.
  • Force production with define( 'WP_ENVIRONMENT_TYPE', 'production' ); and reload.
jetpack docker wp config set WP_ENVIRONMENT_TYPE production

Confirm the widget is gone from the picker and that GET /wp-json/jetpack/v4/widget-modules no longer lists jpa/react-query-dev-tool.

  • Run the PHP tests: composer phpunit in projects/packages/premium-analytics.
Screen.Recording.2026-06-26.at.12.02.58.PM.mov

retrofox added 2 commits June 26, 2026 11:09
gate widget types per request before REST list and import map
replace inline provider devtools with a non-production widget
@github-actions

Copy link
Copy Markdown
Contributor

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

jp-launch-control Bot commented Jun 26, 2026

Copy link
Copy Markdown

Code Coverage Summary

Coverage changed in 1 file.

File Coverage Δ% Δ Uncovered
projects/packages/premium-analytics/src/class-analytics.php 4/52 (7.69%) -0.15% 1 ❤️‍🩹

1 file is newly checked for coverage.

File Coverage
projects/packages/premium-analytics/src/widget-availability.php 6/8 (75.00%) 💚

Full summary · PHP report

@retrofox retrofox added [Status] Needs Review This PR is ready for review. and removed [Status] In Progress labels Jun 26, 2026
retrofox added 2 commits June 26, 2026 12:50
cover functions with ::func / CoversFunction, not CoversClass
shorten prose; document the wp_get_environment_type production default
@retrofox retrofox marked this pull request as ready for review June 26, 2026 11:07
@retrofox retrofox requested review from a team as code owners June 26, 2026 11:07
}

// Types that must never reach a production dashboard.
$non_production_only = array( 'jpa/react-query-dev-tool' );

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This is a hardcoded list. Maybe we can define a dev category and filter the list by it.

retrofox added 2 commits June 26, 2026 17:16
wrap title in __(), link: data dep, declare react
widget.json is the canonical source read by the build
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant