Forms: Use components for trash/spam header CTAs in wp-build dashboard #46695

dhasilva · 2026-01-21T00:34:36Z

Follow-up to FORMS-442

Alternative to #46687

Proposed changes:

Use actual components for WP build dash
Issue with just using components is that EmptySpamButton uses useInboxData, that in turn uses useSearchParams, that is a hook from React Router, which wp-build does not use. Fix is to use contexts to determine which router functions should be used.
There was issue with import_lodash.isEmpty is not a function showing up on tab switching, and that we're fixing simply by not using lodash, which is anyway good change for loading performance.

Slack convo about fix p1768928713328179-slack-C052XEUUBL4

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:

Test new and old dashboards, as well as CIAB. Check that there are no regressions.

github-actions · 2026-01-21T00:35:49Z

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:

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!

simison

Pushed fix for lodash issue. Tests well on new and old dash.

Only problem is that view doesn't refresh now after emptying trash/spam, but we can work on that in a follow-up:

Copilot

Pull request overview

This PR introduces a router-agnostic search params abstraction layer for the Forms dashboard to support using shared components in both the React Router build (dashboard) and the WordPress Route (@wordpress/route) build (wp-build). The abstraction allows the Empty Trash and Empty Spam button components to be reused across both builds.

Changes:

Created a new DashboardSearchParamsContext with provider implementations for both React Router and WordPress Route
Replaced all direct react-router useSearchParams imports with the new useDashboardSearchParams hook from the context
Replaced lodash's isEmpty with a local implementation in use-inbox-data.ts
Updated the wp-build dashboard to use the EmptyTrashButton and EmptySpamButton components instead of inline button definitions

Reviewed changes

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

Show a summary per file

File	Description
`dashboard-search-params-context.tsx`	Defines the router-agnostic context and hooks for accessing search params
`wp-route-dashboard-search-params-provider.tsx`	WordPress Route implementation that adapts `useSearch`/`useNavigate` to the context API
`react-router-dashboard-search-params-provider.tsx`	React Router implementation that wraps `useSearchParams` with the context API
`index.tsx`	Wraps the dashboard Layout with ReactRouterDashboardSearchParamsProvider
`stage.tsx`	Wraps the wp-build Page with WpRouteDashboardSearchParamsProvider and uses the new button components
`inbox/stage/views.js`	Updated to use `useDashboardSearchParams` instead of react-router's `useSearchParams`
`inbox/stage/index.js`	Updated to use `useDashboardSearchParams` and removed react-router import
`use-inbox-data.ts`	Updated to use `useDashboardSearchParams` and replaced lodash isEmpty with local implementation
`forms/views.ts`	Updated to use `useDashboardSearchParams` instead of react-router's `useSearchParams`
`inbox-status-toggle/index.tsx`	Updated to use `useDashboardSearchParams` and removed react-router import
`changelog/update-forms-wp-build-dash-ctas`	Changelog entry for the changes

projects/packages/forms/changelog/update-forms-wp-build-dash-ctas

github-actions · 2026-01-22T00:16: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 update/forms-wp-build-dash-ctas-route-fix branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/forms-wp-build-dash-ctas-route-fix

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 · 2026-01-22T00:27:26Z

Code Coverage Summary

Coverage changed in 2 files.

File	Coverage	Δ%	Δ Uncovered
projects/packages/forms/src/dashboard/index.tsx	0/17 (0.00%)	0.00%	2 ❤️‍🩹
projects/packages/forms/src/dashboard/hooks/use-inbox-data.ts	40/75 (53.33%)	-0.09%	1 ❤️‍🩹

3 files are newly checked for coverage.

File	Coverage
projects/packages/forms/src/dashboard/router/react-router-dashboard-search-params-provider.tsx	0/5 (0.00%) 💔
projects/packages/forms/src/dashboard/router/wp-route-dashboard-search-params-provider.tsx	0/34 (0.00%) 💔
projects/packages/forms/src/dashboard/router/dashboard-search-params-context.tsx	5/6 (83.33%) 💚

Full summary · PHP report · JS report

_{If appropriate, add one of these labels to override the failing coverage check:

Covered by non-unit tests
Use to ignore the Code coverage requirement check when E2Es or other non-unit tests cover the code

Coverage tests to be added later
Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR

I don't care about code coverage for this PR
Use this label to ignore the check for insufficient code coveage.}

This reverts commit 48b43f5.

simison

Tests well across all three envs/dashboards.

Copilot

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.

projects/packages/forms/src/dashboard/hooks/use-inbox-data.ts

Copilot · 2026-01-22T08:44:48Z

projects/packages/forms/routes/responses/stage.tsx

 	);
 	const { updateCountsOptimistically, invalidateCounts } = useDispatch(
-		dashboardStore
+		( dashboardStore as unknown as { name: string } ).name


The store object should be passed directly to useDispatch, not its name property. This change from useDispatch(dashboardStore) to useDispatch(dashboardStore.name) breaks the standard WordPress data store pattern. The useDispatch function expects a store descriptor object, not a string identifier. This will cause runtime errors when trying to access store actions.

Suggested change

( dashboardStore as unknown as { name: string } ).name

dashboardStore

I was curious about this change as well. Can you elaborate, @dhasilva ?

Good catch, that is a leftover from trying to fix types.

Copilot · 2026-01-22T08:44:49Z

projects/packages/forms/changelog/update-forms-wp-build-dash-ctas

+Significance: minor
+Type: changed
+
+Use components for empty actions in trash/spam for new wp-build dashboard.


The changelog entry uses "actions" instead of "buttons" or "CTAs" which could be confusing since "actions" has a specific meaning in WordPress (data store actions, form actions, etc.). Consider changing to "Use components for empty trash/spam buttons in wp-build dashboard." for clarity.

Suggested change

Use components for empty actions in trash/spam for new wp-build dashboard.

Use components for empty trash/spam buttons in wp-build dashboard.

Copilot

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.

Copilot · 2026-01-22T09:02:38Z

projects/packages/forms/src/dashboard/router/react-router-dashboard-search-params-provider.tsx

+}: PropsWithChildren ): JSX.Element {
+	const [ searchParams, setReactRouterSearchParams ] = useReactRouterSearchParams();
+
+	const setSearchParams = setReactRouterSearchParams as unknown as SetDashboardSearchParams;


Type assertion used to cast React Router's setSearchParams to the custom SetDashboardSearchParams type. While this works at runtime, it would be safer to verify that the signatures are truly compatible or add a wrapper function that ensures type safety.

Copilot · 2026-01-22T09:02:38Z

projects/packages/forms/changelog/update-forms-wp-build-dash-ctas

+Significance: minor
+Type: changed
+
+Use components for empty actions in trash/spam for new wp-build dashboard.


Changelog entry should end with a period according to the project's changelog guidelines.

Copilot · 2026-01-22T09:02:39Z

projects/packages/forms/src/dashboard/router/wp-route-dashboard-search-params-provider.tsx

+		from: from as unknown as never,
+		strict: false,
+	} );


Type assertion used to work around unregistered router type. While the comment explains the reason, consider whether the router type should be registered properly in the wp-build setup to avoid type safety compromises. The casting to unknown as never bypasses TypeScript's type checking entirely.

Suggested change

from: from as unknown as never,

strict: false,

} );

from,

strict: false,

} as unknown );

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 3 comments.

Copilot · 2026-01-22T14:23:21Z

projects/packages/forms/src/dashboard/router/wp-route-dashboard-search-params-provider.tsx

+		}
+
+		// For non-array keys, always coerce to a scalar string.
+		// If multiple values exist for a key, preserve the last one.


The comment says 'preserve the last one' but URLSearchParams.getAll() returns values in the order they were added. Consider clarifying whether this intentionally takes the last value or if it should take the first value (values[0]) for consistency with typical query parameter handling.

Suggested change

// If multiple values exist for a key, preserve the last one.

// URLSearchParams.getAll() returns values in insertion (oldest-to-newest) order;

// we intentionally keep the last value so that later duplicates override earlier ones.

Copilot · 2026-01-22T14:23:22Z

projects/packages/forms/src/dashboard/hooks/use-inbox-data.ts

 };

+// https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore?tab=readme-ov-file#_isempty
+const isEmpty = obj =>


The arrow function isEmpty should be defined as a named function declaration or include type annotations for its parameter and return value to maintain consistency with TypeScript best practices in this file.

Suggested change

const isEmpty = obj =>

const isEmpty = ( obj: unknown ): boolean =>

Copilot · 2026-01-22T14:23:22Z

projects/packages/forms/routes/responses/stage.tsx

+		( dashboardStore as unknown as { name: string } ).name
 	) as DispatchActions;


This type assertion suggests a mismatch between the expected store type and what useDispatch returns. Consider defining a proper type for the store or accessing the store name property in a type-safe way.

Suggested change

( dashboardStore as unknown as { name: string } ).name

) as DispatchActions;

dashboardStore

) as unknown as DispatchActions;

Copilot

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.

Copilot · 2026-01-22T22:15:10Z

projects/packages/forms/src/dashboard/hooks/use-inbox-data.ts

 const formatFieldValue = fieldValue => {
-	if ( isEmpty( fieldValue ) ) {
+	if ( ! fieldValue || isEmpty( fieldValue ) ) {
 		return '-';
-	} else if ( Array.isArray( fieldValue ) ) {
+	}
+	if ( Array.isArray( fieldValue ) ) {


Switching from lodash/isEmpty to the custom isEmpty helper while also changing the condition to if ( ! fieldValue || isEmpty( fieldValue ) ) alters the previous behavior: values like 0 or false that were previously rendered as "0" / "false" will now be treated as empty and displayed as '-'. If preserving the original semantics is desired, this should rely solely on the structural emptiness check (and/or explicitly handle only the cases that should map to '-'), so that falsy but meaningful values are not hidden from the UI.

Copilot · 2026-01-22T22:15:10Z

projects/packages/forms/routes/responses/stage.tsx

 import * as Tabs from '../../src/dashboard/components/tabs';
 import useCreateForm from '../../src/dashboard/hooks/use-create-form';
 import { getPath } from '../../src/dashboard/inbox/utils';
+import WpRouteDashboardSearchParamsProvider from '../../src/dashboard/router/wp-route-dashboard-search-params-provider.tsx';
 import { store as dashboardStore } from '../../src/dashboard/store';
 import useConfigValue from '../../src/hooks/use-config-value';
 import { INTEGRATIONS_STORE, IntegrationsSelectors } from '../../src/store/integrations';


EmptyTrashButton / EmptySpamButton rely on useInboxData and the dashboard store’s currentQuery for invalidating core-data entity records after emptying trash/spam, but this route (Stage) never sets currentQuery in that store. In the wp-build context this means the buttons will invalidate only the store’s default query, so the DataViews list driven by this stage’s own useEntityRecords query may not be refreshed correctly after the empty actions; consider wiring this route’s active query into setCurrentQuery (similar to the React dashboard) or providing wp-build-specific invalidation so the list updates immediately after emptying.

github-actions bot added [Feature] Contact Form [Package] Forms [Status] In Progress labels Jan 21, 2026

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 Jan 21, 2026

simison previously approved these changes Jan 21, 2026

View reviewed changes

simison changed the title ~~Update/forms wp build dash ctas route fix~~ Forms: use components for trash/spam header CTAs Jan 21, 2026

simison changed the title ~~Forms: use components for trash/spam header CTAs~~ Forms: use components for trash/spam header CTAs in wp-build dash Jan 21, 2026

simison marked this pull request as ready for review January 21, 2026 13:29

Copilot AI review requested due to automatic review settings January 21, 2026 13:29

Copilot started reviewing on behalf of simison January 21, 2026 13:30 View session

Copilot AI reviewed Jan 21, 2026

View reviewed changes

projects/packages/forms/changelog/update-forms-wp-build-dash-ctas Show resolved Hide resolved

dhasilva dismissed simison’s stale review via 7683f22 January 22, 2026 00:16

dhasilva force-pushed the update/forms-wp-build-dash-ctas-route-fix branch from a38d3ce to 7683f22 Compare January 22, 2026 00:16

dhasilva assigned simison and dhasilva Jan 22, 2026

dhasilva added [Status] Needs Review This PR is ready for review. [Type] Task and removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. [Status] In Progress labels Jan 22, 2026

simison mentioned this pull request Jan 22, 2026

Forms: Use components for empty actions in trash/spam for new wp-build dashboard #46687

Closed

3 tasks

simison and others added 7 commits January 22, 2026 10:08

Use button components for CTAs

ada2dcb

Revert export component

d6162f2

changelog

642035a

Revert "Revert export component"

0ee6d5b

This reverts commit 48b43f5.

Revert export button in right file

8808909

add search params context for router-agnostic hooks

7e7d40f

Replace lodash isEmpty with js native way

b37d53f

simison previously approved these changes Jan 22, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings January 22, 2026 08:40

simison force-pushed the update/forms-wp-build-dash-ctas-route-fix branch from 7683f22 to b37d53f Compare January 22, 2026 08:40

Copilot started reviewing on behalf of simison January 22, 2026 08:40 View session

Copilot AI reviewed Jan 22, 2026

View reviewed changes

Test for empty string

175f4eb

simison dismissed their stale review via 175f4eb January 22, 2026 08:56

Simplify else

e72b9f2

Copilot AI review requested due to automatic review settings January 22, 2026 08:57

Copilot started reviewing on behalf of simison January 22, 2026 08:57 View session

Copilot AI reviewed Jan 22, 2026

View reviewed changes

Fix tests

a2978dc

github-actions bot added the [Tests] Includes Tests label Jan 22, 2026

Mock search params for trash

427d027

Copilot AI review requested due to automatic review settings January 22, 2026 14:19

Copilot AI reviewed Jan 22, 2026

View reviewed changes

Fix spam button tests

bd7b6d5

lezama mentioned this pull request Jan 22, 2026

Forms: Add external admin context support to search params provider #46730

Open

5 tasks

dhasilva added 2 commits January 22, 2026 19:08

fix types

e2ad966

fix lint issues

c0cdf95

Copilot AI review requested due to automatic review settings January 22, 2026 22:08

Copilot started reviewing on behalf of dhasilva January 22, 2026 22:08 View session

Copilot AI reviewed Jan 22, 2026

View reviewed changes

dhasilva changed the title ~~Forms: use components for trash/spam header CTAs in wp-build dash~~ Forms: Use components for trash/spam header CTAs in wp-build dash Jan 22, 2026

dhasilva changed the title ~~Forms: Use components for trash/spam header CTAs in wp-build dash~~ Forms: Use components for trash/spam header CTAs in wp-build dashboard Jan 22, 2026

dhasilva merged commit a7c8882 into trunk Jan 22, 2026
75 of 78 checks passed

dhasilva deleted the update/forms-wp-build-dash-ctas-route-fix branch January 22, 2026 22:30

github-actions bot removed the [Status] Needs Review This PR is ready for review. label Jan 22, 2026

	( dashboardStore as unknown as { name: string } ).name
	dashboardStore

	Use components for empty actions in trash/spam for new wp-build dashboard.
	Use components for empty trash/spam buttons in wp-build dashboard.

	// If multiple values exist for a key, preserve the last one.
	// URLSearchParams.getAll() returns values in insertion (oldest-to-newest) order;
	// we intentionally keep the last value so that later duplicates override earlier ones.

	const isEmpty = obj =>
	const isEmpty = ( obj: unknown ): boolean =>

		( dashboardStore as unknown as { name: string } ).name
		) as DispatchActions;

Forms: Use components for trash/spam header CTAs in wp-build dashboard #46695

Forms: Use components for trash/spam header CTAs in wp-build dashboard #46695

Conversation

dhasilva commented Jan 21, 2026 • edited by simison 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 Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

simison left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

github-actions bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Code Coverage Summary

Uh oh!

simison left a comment • 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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

simison Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

dhasilva Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

dhasilva commented Jan 21, 2026 •

edited by simison

Loading

github-actions bot commented Jan 21, 2026 •

edited

Loading

github-actions bot commented Jan 22, 2026 •

edited

Loading

jp-launch-control bot commented Jan 22, 2026 •

edited

Loading

simison left a comment •

edited

Loading