Protect: Add fixer status to initial state

projects/packages/protect-models/changelog/add-protect-fixer-status-to-initial-state

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Adds a fixable_threats status property

projects/packages/protect-models/src/class-status-model.php

@@ -53,6 +53,13 @@ class Status_Model {
 	 */
 	public $status;
 
+	/**
+	 * List of fixable threat IDs.
+	 *
+	 * @var string[]
+	 */
+	public $fixable_threat_ids = array();
+
 	/**
 	 * WordPress core status.
 	 *

projects/packages/protect-status/changelog/add-protect-fixer-status-to-initial-state

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Adds a fixable_threats status property

projects/packages/protect-status/src/class-scan-status.php

@@ -169,6 +169,10 @@ private static function normalize_api_data( $scan_data ) {
 
 		if ( isset( $scan_data->threats ) && is_array( $scan_data->threats ) ) {
 			foreach ( $scan_data->threats as $threat ) {
+				if ( isset( $threat->fixable ) && $threat->fixable ) {
+					$status->fixable_threat_ids[] = $threat->id;
+				}
+
 				if ( isset( $threat->extension->type ) ) {
 					if ( 'plugin' === $threat->extension->type ) {
 						// add the extension if it does not yet exist in the status

projects/packages/protect-status/tests/php/test-scan-status.php

@@ -134,6 +134,7 @@ public function get_sample_status() {
 				'num_plugins_threats' => 1,
 				'num_themes_threats'  => 0,
 				'status'              => 'idle',
+				'fixable_threat_ids'  => array( '69353714' ),
 				'plugins'             => array(
 					new Extension_Model(
 						array(

projects/plugins/protect/changelog/add-protect-fixer-status-to-initial-state

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Adds fixer status to the initial state

projects/plugins/protect/src/class-jetpack-protect.php

@@ -24,6 +24,7 @@
 use Automattic\Jetpack\Protect\REST_Controller;
 use Automattic\Jetpack\Protect\Scan_History;
 use Automattic\Jetpack\Protect\Site_Health;
+use Automattic\Jetpack\Protect\Threats;
 use Automattic\Jetpack\Protect_Status\Plan;
 use Automattic\Jetpack\Protect_Status\Protect_Status;
 use Automattic\Jetpack\Protect_Status\Scan_Status;
@@ -206,12 +207,15 @@ public function initial_state() {
 		global $wp_version;
 		// phpcs:disable WordPress.Security.NonceVerification.Recommended
 		$refresh_status_from_wpcom = isset( $_GET['checkPlan'] );
-		$initial_state             = array(
+		$status                    = Status::get_status( $refresh_status_from_wpcom );
+
+		$initial_state = array(
 			'apiRoot'            => esc_url_raw( rest_url() ),
 			'apiNonce'           => wp_create_nonce( 'wp_rest' ),
 			'registrationNonce'  => wp_create_nonce( 'jetpack-registration-nonce' ),
 			'credentials'        => Credentials::get_credential_array(),
-			'status'             => Status::get_status( $refresh_status_from_wpcom ),
+			'status'             => $status,
+			'fixerStatus'        => Threats::fix_threats_status( $status->fixable_threat_ids ),
 			'scanHistory'        => Scan_History::get_scan_history( $refresh_status_from_wpcom ),
 			'installedPlugins'   => Plugins_Installer::get_plugins(),
 			'installedThemes'    => Sync_Functions::get_themes(),

projects/plugins/protect/src/class-threats.php

@@ -144,6 +144,10 @@ public static function fix_threats( $threat_ids ) {
 	 * @return bool|array
 	 */
 	public static function fix_threats_status( $threat_ids ) {
+		if ( empty( $threat_ids ) ) {
+			return false;
+		}
+
 		$api_base = self::get_api_base();
 		if ( is_wp_error( $api_base ) ) {
 			return false;

projects/plugins/protect/src/js/components/paid-accordion/index.jsx

@@ -80,7 +80,7 @@ export const PaidAccordionItem = ( {
 		[ styles[ 'accordion-body-close' ] ]: ! open,
 	} );
 
-	const { fixersStatus } = useFixers();
+	const { fixInProgressThreatIds } = useFixers();
 
 	const handleClick = useCallback( () => {
 		if ( ! open ) {
@@ -122,7 +122,7 @@ export const PaidAccordionItem = ( {
 					<div>
 						{ fixable && (
 							<>
-								{ fixersStatus?.threats?.[ id ]?.status === 'in_progress' ? (
+								{ fixInProgressThreatIds.includes( id ) ? (
 									<Spinner color="black" />
 								) : (
 									<Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />

projects/plugins/protect/src/js/components/threats-list/paid-list.jsx

@@ -33,8 +33,8 @@ const ThreatAccordionItem = ( {
 	const { setModal } = useModal();
 	const { recordEvent } = useAnalyticsTracks();
 
-	const { fixersStatus } = useFixers();
-	const fixerInProgress = fixersStatus?.threats?.[ id ]?.status === 'in_progress';
+	const { fixInProgressThreatIds } = useFixers();
+	const fixerInProgress = fixInProgressThreatIds.includes( id );
 
 	const learnMoreButton = source ? (
 		<Button variant="link" isExternalLink={ true } weight="regular" href={ source }>
@@ -145,7 +145,6 @@ const ThreatAccordionItem = ( {
 							isDestructive={ true }
 							variant="secondary"
 							onClick={ handleUnignoreThreatClick() }
-							disabled={ fixerInProgress }
 						>
 							{ __( 'Unignore threat', 'jetpack-protect' ) }
 						</Button>
@@ -156,6 +155,7 @@ const ThreatAccordionItem = ( {
 								isDestructive={ true }
 								variant="secondary"
 								onClick={ handleIgnoreThreatClick() }
+								disabled={ fixerInProgress }
 							>
 								{ __( 'Ignore threat', 'jetpack-protect' ) }
 							</Button>

projects/plugins/protect/src/js/data/scan/use-fixers-mutation.ts

@@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n';
 import API from '../../api';
 import { QUERY_FIXERS_KEY } from '../../constants';
 import useNotices from '../../hooks/use-notices';
+import { FixersStatus } from '../../types/fixers';
 
 /**
  * Fixers Mutatation Hook
@@ -15,9 +16,32 @@ export default function useFixersMutation(): UseMutationResult {
 
 	return useMutation( {
 		mutationFn: API.fixThreats,
-		onSuccess: data => {
-			// The data returned from the API is the same as the data we need to update the cache.
-			queryClient.setQueryData( [ QUERY_FIXERS_KEY ], data );
+		onSuccess: async ( data, threatIds ) => {
+			// Get the current cached data for threats
+			const cachedData = queryClient.getQueryData( [ QUERY_FIXERS_KEY ] ) as
+				| FixersStatus
+				| undefined;
+
+			// Optimistically update the fixer status to 'in_progress' for the selected threats.
+			if ( cachedData && cachedData.threats ) {
+				// Create a copy of the threats data
+				const updatedData = { ...cachedData.threats };
+
+				threatIds.forEach( id => {
+					if ( updatedData[ id ] ) {
+						updatedData[ id ] = {
+							...updatedData[ id ],
+							status: 'in_progress',
+						};
+					}
+				} );
+
+				// Set the updated data back in the cache
+				queryClient.setQueryData( [ QUERY_FIXERS_KEY ], {
+					...cachedData,
+					threats: updatedData, // Replace the threats with the updated version
+				} );
+			}
 
 			// Show a success notice.
 			showSuccessNotice(

projects/plugins/protect/src/js/data/scan/use-fixers-query.ts

@@ -31,39 +31,55 @@ export default function useFixersQuery( {
 		skipUserConnection: true,
 	} );
 
+	const initialData: FixersStatus = window.jetpackProtectInitialState?.fixerStatus || {
+		ok: false,
+		threats: {},
+	};
+
 	return useQuery( {
 		queryKey: [ QUERY_FIXERS_KEY ],
 		queryFn: async () => {
-			const data = await API.getFixersStatus( threatIds );
-			const cachedData = queryClient.getQueryData( [ QUERY_FIXERS_KEY ] ) as
-				| { threats: object }
-				| undefined;
+			try {
+				// Try fetching fixer status from API
+				const data = await API.getFixersStatus( threatIds );
+				const cachedData = queryClient.getQueryData( [ QUERY_FIXERS_KEY ] ) as
+					| FixersStatus
+					| undefined;
 
-			// Check if any fixers have completed, by comparing the latest data against the cache.
-			Object.keys( data?.threats ).forEach( ( threatId: string ) => {
-				// Find the specific threat in the cached data.
-				const threat = data?.threats[ threatId ];
-				const cachedThreat = cachedData?.threats?.[ threatId ];
+				// Check if any fixers have completed, by comparing the latest data against the cache.
+				Object.keys( data?.threats ).forEach( ( threatId: string ) => {
+					const threat = data?.threats[ threatId ];
+					const cachedThreat = cachedData?.threats?.[ threatId ];
 
-				if (
-					cachedThreat &&
-					cachedThreat.status === 'in_progress' &&
-					threat.status !== 'in_progress'
-				) {
-					// Invalidate related queries when a fixer has completed.
-					queryClient.invalidateQueries( { queryKey: [ QUERY_SCAN_STATUS_KEY ] } );
-					queryClient.invalidateQueries( { queryKey: [ QUERY_HISTORY_KEY ] } );
+					if (
+						cachedThreat &&
+						cachedThreat.status === 'in_progress' &&
+						threat.status !== 'in_progress'
+					) {
+						// Invalidate related queries when a fixer has completed.
+						queryClient.invalidateQueries( { queryKey: [ QUERY_SCAN_STATUS_KEY ] } );
+						queryClient.invalidateQueries( { queryKey: [ QUERY_HISTORY_KEY ] } );
 
-					// Show a relevant notice.
-					if ( threat.status === 'fixed' ) {
-						showSuccessNotice( __( 'Threat fixed successfully.', 'jetpack-protect' ) );
-					} else {
-						showErrorNotice( __( 'Threat could not be fixed.', 'jetpack-protect' ) );
+						// Show a relevant notice.
+						if ( threat.status === 'fixed' ) {
+							showSuccessNotice( __( 'Threat fixed successfully.', 'jetpack-protect' ) );
+						} else {
+							showErrorNotice( __( 'Threat could not be fixed.', 'jetpack-protect' ) );
+						}
 					}
-				}
-			} );
+				} );
+
+				// Return the fetched data so the query resolves
+				return data;
+			} catch ( error ) {
+				// Handle the error, show notice, and return a default response
+				showErrorNotice(
+					__( 'An error occurred while fetching the fixer status.', 'jetpack-protect' )
+				);
 
-			return data;
+				// Return a default value or handle the error as needed.
+				return initialData;
+			}
 		},
 		refetchInterval( query ) {
 			if ( ! usePolling || ! query.state.data ) {
@@ -82,7 +98,7 @@ export default function useFixersQuery( {
 
 			return false;
 		},
-		initialData: { threats: {} }, // to do: provide initial data in window.jetpackProtectInitialState
+		initialData: initialData,
 		enabled: isRegistered,
 	} );
 }

projects/plugins/protect/src/js/hooks/use-fixers.ts

@@ -3,10 +3,10 @@ import useFixersMutation from '../data/scan/use-fixers-mutation';
 import useFixersQuery from '../data/scan/use-fixers-query';
 import useScanStatusQuery from '../data/scan/use-scan-status-query';
 import { FixersStatus } from '../types/fixers';
-import { Threat } from '../types/threats';
 
 type UseFixersResult = {
-	fixableThreats: Threat[];
+	fixableThreatIds: number[];
+	fixInProgressThreatIds: number[];
 	fixersStatus: FixersStatus;
 	fixThreats: ( threatIds: number[] ) => Promise< unknown >;
 	isLoading: boolean;
@@ -20,26 +20,25 @@ type UseFixersResult = {
 export default function useFixers(): UseFixersResult {
 	const { data: status } = useScanStatusQuery();
 	const fixersMutation = useFixersMutation();
-
-	const fixableThreats = useMemo( () => {
-		const threats = [
-			...( status?.core?.threats || [] ),
-			...( status?.plugins?.map( plugin => plugin.threats ).flat() || [] ),
-			...( status?.themes?.map( theme => theme.threats ).flat() || [] ),
-			...( status?.files || [] ),
-			...( status?.database || [] ),
-		];
-
-		return threats.filter( threat => threat.fixable );
-	}, [ status ] );
-
 	const { data: fixersStatus } = useFixersQuery( {
-		threatIds: fixableThreats.map( threat => threat.id ),
+		threatIds: status.fixableThreatIds,
 		usePolling: true,
 	} );
 
+	// List of threat IDs that are currently being fixed.
+	const fixInProgressThreatIds = useMemo(
+		() =>
+			Object.entries( fixersStatus?.threats || {} )
+				.filter(
+					( [ , threat ]: [ string, { status?: string } ] ) => threat.status === 'in_progress'
+				)
+				.map( ( [ id ] ) => parseInt( id ) ),
+		[ fixersStatus ]
+	);
+
 	return {
-		fixableThreats,
+		fixableThreatIds: status.fixableThreatIds,
+		fixInProgressThreatIds,
 		fixersStatus,
 		fixThreats: fixersMutation.mutateAsync,
 		isLoading: fixersMutation.isPending,

projects/plugins/protect/src/js/types/global.d.ts

@@ -14,6 +14,7 @@ declare global {
 			registrationNonce: string;
 			credentials: [ Record< string, unknown > ];
 			status: ScanStatus;
+			fixerStatus: FixersStatus;
 			scanHistory: ScanStatus;
 			installedPlugins: {
 				[ key: string ]: PluginData;

projects/plugins/protect/src/js/types/scans.ts

@@ -24,6 +24,9 @@ export type ScanStatus = {
 	/** The current status of the scanner. */
 	status: 'unavailable' | 'provisioning' | 'idle' | 'scanning' | 'scheduled';
 
+	/** The IDs of fixable threats. */
+	fixableThreatIds: number[];
+
 	/** The current scan progress, only available from the Scan API. */
 	current_progress: number | null;