Forms: Add useConfigValue hook and start using it in the forms dashboard #45472

enejb · 2025-10-10T20:11:54Z

This PR does the following.

Introduces a new hook useConfigValue that is responsible for fetching the /wp/v2/feedback/config endpoint only once unless it is already called. (if the hook is preloaded) then it doesn't get called at all. (which is the case for the feedback dashboad and the editor)

The new hook is easier to use.

Proposed changes.

New Files

src/store/config/ - Complete Redux store implementation
- action-types.ts - Action constants
- actions.ts - Action creators
- reducer.ts - State reducer
- selectors.ts - Data selectors
- resolvers.ts - Async data fetching with deduplication
- types.ts - TypeScript types
- index.ts - Store registration
- README.md - Comprehensive documentation
src/hooks/use-config-value.ts - Simple hook for accessing config values
tests/js/store/config.test.js - Store tests (28 tests)
tests/js/hooks/use-config-value.test.js - Hook tests (11 tests)

Modified Files

Dashboard components - Migrated from window.JetpackScriptData.forms to
useConfigValue()
- src/dashboard/components/layout/index.tsx
- src/dashboard/inbox/index.js
- src/dashboard/inbox/response.js
- src/dashboard/inbox/empty-responses.tsx
- src/dashboard/inbox/export-responses/google-drive.tsx
- src/dashboard/hooks/use-create-form.ts
- src/dashboard/hooks/use-export-responses.ts
- src/dashboard/about/index.tsx
- src/dashboard/index.tsx
Block editor components - Migrated from useFormsConfig() to useConfigValue()
- src/blocks/contact-form/edit.tsx
- src/blocks/contact-form/components/jetpack-integrations-modal/integration-ca
  rd/plugin-action-button.tsx
PHP - Removed on-page config injection for dashboard
- src/dashboard/class-dashboard.php - No longer injects
  JetpackScriptData.forms into dashboard pages

Breaking Changes

None - This is a pure refactor. The old useFormsConfig() hook remains available
for backward compatibility.

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

This is an performance improvement because we don't call slow function multiple times any more.

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

No

Testing instructions:

Do the tests pass?

Visit the Feedback dashboard.
Notice that it loads fast. The feedback/config endpoint should be preloaded so notice that there are no requests to the config endpoint happening.
Change the config endpoint and notice that it still works as expected when you refresh the page.

Things to test.

Can you export?
Can you add a new form via the about page. On the about page notice that the forms images show up as expected.
Can you enable and disable the different integrations ( active and install plugins )
Do you see the integrations tab and not see the integrations tab if it is no supported.
Return false for hasFeedback and notice that you get redirected to the about page when you try to load the forms dashboard.
Change the emptyTrashDays and notice the value show up.

github-actions · 2025-10-10T20:12:59Z

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!

Copilot

Pull Request Overview

This PR introduces a new centralized configuration store using Redux for managing Forms configuration data with better performance and caching. It replaces scattered config access patterns with a unified useConfigValue hook that automatically fetches data from /wp/v2/feedback/config only once.

Introduces useConfigValue hook and complete Redux store implementation for Forms config management
Migrates dashboard and block editor components from window.JetpackScriptData.forms and useFormsConfig() to the new hook
Removes server-side config injection for dashboard pages to improve performance

Reviewed Changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
`src/store/config/`	Complete Redux store implementation with actions, reducer, selectors, resolvers, and TypeScript types
`src/hooks/use-config-value.ts`	New hook providing simple access to config values with automatic fetching
`tests/js/store/config.test.js`	Comprehensive store tests covering actions, reducer, selectors, and integration scenarios
`tests/js/hooks/use-config-value.test.js`	Hook tests covering various usage patterns and edge cases
`src/dashboard/components/layout/index.tsx`	Migrated from `useFormsConfig()` to `useConfigValue()` with loading state handling
`src/dashboard/inbox/index.js`	Updated to use new hook for `hasFeedback` checks with proper navigation logic
`src/dashboard/inbox/response.js`	Simplified config access for `emptyTrashDays` value
`src/dashboard/inbox/empty-responses.tsx`	Updated to use new hook for trash configuration
`src/dashboard/inbox/export-responses/google-drive.tsx`	Migrated Google Drive support URL access to new hook
`src/dashboard/hooks/use-export-responses.ts`	Updated export nonce handling to use new config system
`src/dashboard/hooks/use-create-form.ts`	Migrated form creation nonce to new hook with proper dependency tracking
`src/dashboard/about/index.tsx`	Updated plugin assets URL access to use new config hook
`src/dashboard/index.tsx`	Removed config data parsing and direct navigation logic
`src/dashboard/class-dashboard.php`	Removed server-side config injection for dashboard pages
`src/blocks/contact-form/edit.tsx`	Migrated integrations feature flag to new hook
`src/blocks/contact-form/components/jetpack-integrations-modal/integration-card/plugin-action-button.tsx`	Updated plugin permission checks to use new config system

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

projects/packages/forms/src/store/config/actions.ts

projects/packages/forms/src/dashboard/index.tsx

projects/packages/forms/src/store/config/resolvers.ts

projects/packages/forms/src/dashboard/components/layout/index.tsx

projects/packages/forms/src/store/config/reducer.ts

github-actions · 2025-10-10T20:15:12Z

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/use-config-forms branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/use-config-forms

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 · 2025-10-10T20:24:13Z

Code Coverage Summary

Coverage changed in 11 files. Only the first 5 are listed here.

File	Coverage	Δ%	Δ Uncovered
projects/packages/forms/src/dashboard/inbox/index.js	0/10 (0.00%)	0.00%	3 ❤️‍🩹
projects/packages/forms/src/dashboard/components/layout/index.tsx	0/31 (0.00%)	0.00%	1 ❤️‍🩹
projects/packages/forms/src/dashboard/hooks/use-create-form.ts	0/28 (0.00%)	0.00%	1 ❤️‍🩹
projects/packages/forms/src/dashboard/hooks/use-export-responses.ts	0/43 (0.00%)	0.00%	1 ❤️‍🩹
projects/packages/forms/src/dashboard/inbox/export-responses/google-drive.tsx	0/38 (0.00%)	0.00%	1 ❤️‍🩹

9 files are newly checked for coverage. Only the first 5 are listed here.

File	Coverage
projects/packages/forms/src/store/config/resolvers.ts	13/14 (92.86%) 💚
projects/packages/forms/src/hooks/use-config-value.ts	4/4 (100.00%) 💚
projects/packages/forms/src/store/config/action-types.ts	5/5 (100.00%) 💚
projects/packages/forms/src/store/config/actions.ts	7/7 (100.00%) 💚
projects/packages/forms/src/store/config/index.ts	3/3 (100.00%) 💚

Full summary · PHP report · JS report

projects/packages/forms/src/dashboard/components/layout/index.tsx

edanzer

I've been testing this for a while, but it was just rebased. Going to post these results on pre-rebase version for the record, and will re-pull and re-test.

projects/packages/forms/src/dashboard/components/response-view/body.tsx

edanzer

Retested this again after latest rebase. Works great!

As an extra check, I also searched the codebase to confirm we do not have any remaining uses of the old config object on the frontend.

…ard (#45472) * Forms: Add new config hook * Add tests * Update to useConfigValue instead of useFormsConfig and config * Remove the on page config for the dashboard * changelog * simply the resolver * Update the readme with example to add a new config * update code to be more readable * Add unknown error constant * Update getConfig resolver * Update the includes to be at the right spot * Add form response type * fix lint error * remove comment

enejb requested review from a team, Copilot and edanzer October 10, 2025 20:11

enejb added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Status] Needs Review This PR is ready for review. [Package] Forms labels Oct 10, 2025

github-actions bot added [Block] Contact Form Form block (also see Contact Form label) [Feature] Contact Form [Tests] Includes Tests Docs labels Oct 10, 2025

Copilot AI reviewed Oct 10, 2025

View reviewed changes

enejb force-pushed the update/use-config-forms branch from 148f98b to d4040b7 Compare October 10, 2025 20:14

edanzer reviewed Oct 15, 2025

View reviewed changes

projects/packages/forms/src/dashboard/components/layout/index.tsx Show resolved Hide resolved

enejb added 10 commits October 15, 2025 09:47

Forms: Add new config hook

25c15e9

Add tests

ec65418

Update to useConfigValue instead of useFormsConfig and config

7f014a4

Remove the on page config for the dashboard

5d7a454

changelog

715f1cc

simply the resolver

b1c6f52

Update the readme with example to add a new config

567fe18

update code to be more readable

6ec03e2

Add unknown error constant

1a8c567

Update getConfig resolver

0c86bd4

enejb force-pushed the update/use-config-forms branch from 13840ed to 0c86bd4 Compare October 15, 2025 16:52

Update the includes to be at the right spot

b0d8685

edanzer reviewed Oct 15, 2025

View reviewed changes

Add form response type

2e0b0a3

fix lint error

4f131ff

edanzer reviewed Oct 15, 2025

View reviewed changes

projects/packages/forms/src/dashboard/components/response-view/body.tsx Outdated Show resolved Hide resolved

remove comment

64534b5

edanzer approved these changes Oct 15, 2025

View reviewed changes

enejb merged commit a1019a1 into trunk Oct 15, 2025
67 checks passed

enejb deleted the update/use-config-forms branch October 15, 2025 20:32

github-actions bot removed the [Status] Needs Review This PR is ready for review. label Oct 15, 2025

edanzer mentioned this pull request Oct 20, 2025

Forms: remove unused useFormsConfig hook #45554

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Forms: Add useConfigValue hook and start using it in the forms dashboard #45472

Forms: Add useConfigValue hook and start using it in the forms dashboard #45472

Uh oh!

enejb commented Oct 10, 2025

Uh oh!

github-actions bot commented Oct 10, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Oct 10, 2025 •

edited

Loading

Uh oh!

jp-launch-control bot commented Oct 10, 2025 •

edited

Loading

Uh oh!

Uh oh!

edanzer left a comment •

edited

Loading

Uh oh!

Uh oh!

edanzer left a comment •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Forms: Add useConfigValue hook and start using it in the forms dashboard #45472

Forms: Add useConfigValue hook and start using it in the forms dashboard #45472

Uh oh!

Conversation

enejb commented Oct 10, 2025

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 Oct 10, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Code Coverage Summary

Uh oh!

Uh oh!

edanzer 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!

Uh oh!

edanzer 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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions bot commented Oct 10, 2025 •

edited

Loading

jp-launch-control bot commented Oct 10, 2025 •

edited

Loading

edanzer left a comment •

edited

Loading

edanzer left a comment •

edited

Loading