Scan Dashboard: implement threat fix progress tracking with reusable hook #106085

Initsogar · 2025-09-27T06:30:06Z

Proposed Changes

Extract threat-fixing logic into a reusable useFixThreats hook.
Refactor single and bulk threat modals to use the shared hook.
Fix error handling that wasn't working properly (UI showing success when API failed).
- Added gcTime: 0 to prevent stale "fixed" status persisting after mutations fail.
Update fetchFixThreatsStatus return type to use correct FixThreatsStatusResponse definition.
Add unit tests for useFixThreats hook

Bonus:

Updated bulk fix threat modal pluralization

Demo

Before	After
demo-03.mp4	demo01.mp4

Why are these changes being made?

The previous implementation of the individual threat-fixing was only using a mutation to trigger the fix, but doesn't track the progress. After implementing the bulk threat fix modal, we identified an opportunity to reuse the same endpoints to initiate the fix and also to track the progress.

This refactor centralizes the logic in a reusable hook with proper state management and error handling for both implementations.

Testing Instructions

Navigate to /v2/sites/{site-slug}/scan in the Hosting Dashboard
Test single threat fixing:
- Click the “Fix threat” action on any individual threat.
- Click on “Fix threat” in the modal.
- Ensure it keeps on isBusy state while polling the fix status.
- Ensure the modal closes and the snackbar appears when it succeeds (fixed or not_fixed).
Test bulk threat fixing:
- Select multiple threats and click “Fix threats”.
- Click on “Fix threats” in the modal.
- Ensure it keeps on isBusy state while polling the fix status.
- Ensure the modal closes and the snackbar appears when it succeeds (fixed or not_fixed).

Unit tests

Run the comprehensive test suite with coverage:

# Run hook tests with coverage
yarn test-client dashboard/sites/scan/test/use-fix-threats.test.tsx --coverage --collectCoverageFrom="**/hooks/use-fix-threats.ts"

(Use `node --trace-deprecation ...` to show where the warning was created)
 PASS  client/dashboard/sites/scan/test/use-fix-threats.test.tsx
--------------------|---------|----------|---------|---------|-------------------
File                | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
--------------------|---------|----------|---------|---------|-------------------
All files           |     100 |      100 |     100 |     100 |
 use-fix-threats.ts |     100 |      100 |     100 |     100 |
--------------------|---------|----------|---------|---------|-------------------

Test Suites: 1 passed, 1 total
Tests:       13 passed, 13 total
Snapshots:   0 total
Time:        1.251 s
Ran all test suites matching /dashboard\/sites\/scan\/test\/use-fix-threats.test.tsx/i.

Or just the tests without checking coverage:

# Run all scan tests
yarn test-client dashboard/sites/scan

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

transformation

github-actions · 2025-09-27T06:30:15Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-157594

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-157594&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-157594&env=a8c-for-agencies

…xed' statuses

…threats

… fixing

…hreat-progress

Initsogar · 2025-09-28T18:59:56Z

packages/api-queries/src/site-scan.ts

-			return {
-				...result,
-				threats: Object.entries( result.threats ).map( ( [ id, threat ] ) => ( {
-					...threat,
-					id,
-				} ) ),
-			};


Centralized the custom mapping on the useFixThreats hook instead

I'm a bit confused, as this is apparently the opposite of what you suggested last week (p1758823754745099?thread_ts=1758820334.569579&cid=C09AAF76EQZ-slack-C09AAF76EQZ).

My expectation was to use the same query hook (fixThreatsStatusQuery) across different components, such as the Fix Threat modal once you added the Bulk Fix modal. Since I centralized all of that logic into a single hook, we can call it directly there. This also made it easier to handle the transformation logic in one place while keeping the query return type as the raw FixThreatsStatusResponse. It also simplified tests because we can mock the fetcher without introducing intermediate “transformation” types in the fixThreatsStatusQuery hook.

Initsogar · 2025-09-28T19:01:18Z

packages/api-core/src/site-scan/fetchers.ts

 	siteId: number,
 	threatIds: number[]
-): Promise< SiteScan > {
+): Promise< FixThreatsStatusResponse > {


Replaced SiteScan with the new FixThreatsStatusResponse because the responses are not the same.

Initsogar · 2025-09-28T19:26:46Z

client/dashboard/sites/scan/components/bulk-fix-threats-modal.tsx

-				return;
+			if ( status.allFixed ) {
+				createSuccessNotice(
+					_n( 'Threat fixed.', 'All threats were successfully fixed.', bulkFixableThreats.length ),


Added pluralization because there could be a case where only 1 threat is available for bulk fixing:

matticbot · 2025-09-29T02:13:46Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

help-center
notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/hd-scan-fix-threat-progress on your sandbox.

myhro

Thanks for the PR, Rafa. I left a couple questions, but they are not blockers. LGTM. ✅

myhro · 2025-09-29T14:15:01Z

client/dashboard/sites/scan/hooks/use-fix-threats.ts

+				id: Number( id ),
+			} ) );
+		},
+		gcTime: 0, // Always fetch fresh status data, never use cached results


Using meta: { persist: false } wasn't enough? Maybe we should drop it from there as well?

Yeah, it wasn’t enough 😢. We were still getting stale cached results, which caused the snackbar to appear immediately on subsequent fix attempts. Setting the garbage collection time to 0 clears the results from memory as soon as they’re no longer needed, so if you unmount the modal and try again, it now works properly.

I removed the meta: { persist: false } in 13d3522 as it is no longer needed.

if you unmount the modal and try again, it now works properly

If you want to force a fetch when the hook is re-mounted maybe the refetchOnMount: 'always' option will work? https://tanstack.com/query/latest/docs/framework/react/reference/useQuery#:~:text=in%20the%20background-,refetchOnMount,-%3A%20boolean%20%7C%20%22always%22%20%7C%20((query

Hi 👋

This specific query hook is trying to fetch the progress of a threat that is being fixed. If for some reason the process fails and the user wants to try again, the query still gets the latest status from cache and reports it immediately without actually trying to fetch a new result.

I believe the refetchOnMount just attempts to fetch but still returns what's in the cache first. Am I right?

The hook returns a isFetchedAfterMount boolean, is that what you need?

It might not be 😅 I'm not familiar with the scan code, so hopefully I'm suggesting things that don't make sense. But React Query does cover a lot of use cases.

myhro · 2025-09-29T14:22:53Z

packages/api-queries/src/site-scan.ts

-			return {
-				...result,
-				threats: Object.entries( result.threats ).map( ( [ id, threat ] ) => ( {
-					...threat,
-					id,
-				} ) ),
-			};


I'm a bit confused, as this is apparently the opposite of what you suggested last week (p1758823754745099?thread_ts=1758820334.569579&cid=C09AAF76EQZ-slack-C09AAF76EQZ).

…hreat-progress

a8ci18n · 2025-09-29T21:20:32Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/20323842

Hi @Initsogar, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:

Threat fixed.
Failed to fix threat. Please contact support.

Thank you in advance!

Initsogar added 5 commits September 27, 2025 00:28

Add useFixThreats hook

2d62501

Refactor useFixThreats to use state machine instead of dual booleans

276f4d4

Fix stale threat status by disabling cache in useFixThreats

37285be

Fx fetchFixThreatsStatus return type and remove data

45a8035

transformation

Relocate hooks/use-fix-threats.ts

5070de2

Initsogar self-assigned this Sep 27, 2025

Initsogar added 6 commits September 27, 2025 02:27

Update FixThreatStatus interface to include 'not_started' and 'not_fi…

9e68ca6

…xed' statuses

Update useFixThreats hook to include 'not_started' status in pending …

e3a543a

…threats

Add useFixThreats hook unit tests

dd3ce3d

Refactor FixThreatModal to utilize useFixThreats hook for threat fixing

b870134

Refactor BulkFixThreatsModal to utilize useFixThreats hook for threat…

b3a4f87

… fixing

Merge remote-tracking branch 'origin/trunk' into update/hd-scan-fix-t…

3f179a9

…hreat-progress

Initsogar changed the title ~~Update/hd scan fix threat progress~~ Scan Dashboard: implement threat fix progress tracking with reusable hook Sep 27, 2025

Initsogar commented Sep 28, 2025

View reviewed changes

Initsogar added 2 commits September 28, 2025 14:21

Update fix threat buttons label based on state

4d2e427

Update bulk fix threats modal messages pluralization

bf32931

Initsogar commented Sep 28, 2025

View reviewed changes

Initsogar requested a review from myhro September 28, 2025 19:27

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 28, 2025

Initsogar marked this pull request as ready for review September 28, 2025 19:27

Initsogar requested a review from a team as a code owner September 28, 2025 19:27

Add pluralization on auto-fix threats button

3de3bbf

myhro approved these changes Sep 29, 2025

View reviewed changes

Initsogar added 3 commits September 29, 2025 12:35

Remove persist: false property from fixThreatsStatusQuery

13d3522

Merge remote-tracking branch 'origin/trunk' into update/hd-scan-fix-t…

3a75c31

…hreat-progress

Merge branch 'trunk' into update/hd-scan-fix-threat-progress

28b5614

Initsogar merged commit 690d06a into trunk Sep 29, 2025
12 checks passed

Initsogar deleted the update/hd-scan-fix-threat-progress branch September 29, 2025 19:12

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 29, 2025

Scan Dashboard: implement threat fix progress tracking with reusable hook #106085

Scan Dashboard: implement threat fix progress tracking with reusable hook #106085

Uh oh!

Conversation

Initsogar commented Sep 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Demo

Why are these changes being made?

Testing Instructions

Unit tests

Pre-merge Checklist

Uh oh!

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

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

matticbot commented Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

myhro left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

a8ci18n commented Sep 29, 2025

Uh oh!

Uh oh!

Initsogar commented Sep 27, 2025 •

edited

Loading

github-actions bot commented Sep 27, 2025 •

edited by matticbot

Loading

matticbot commented Sep 29, 2025 •

edited

Loading