Protect: Fix in-progress fixer indicator (#38051)

* Add logging to detect fixer status

* changelog

* Disable eslint for testing

* Remove logging

* Fix redux setup for threatsAreFixing, add disables for ignore and fix button when true

* Update variable names

* Update changelog type and update versions

projects/plugins/protect/changelog/fix-protect-in-progress-fixer-indicator

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Ensure in-progress fixer indicator is functional

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

@@ -1,5 +1,5 @@
 import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import React, { useCallback } from 'react';
@@ -26,10 +26,12 @@ const ThreatAccordionItem = ( {
 	type,
 	severity,
 } ) => {
+	const threatsAreFixing = useSelect( select => select( STORE_ID ).getThreatsAreFixing() );
 	const { setModal } = useDispatch( STORE_ID );
-
 	const { recordEvent } = useAnalyticsTracks();
 
+	const fixerInProgress = threatsAreFixing.indexOf( id ) >= 0;
+
 	const learnMoreButton = source ? (
 		<Button variant="link" isExternalLink={ true } weight="regular" href={ source }>
 			{ __( 'See more technical details of this threat', 'jetpack-protect' ) }
@@ -113,11 +115,16 @@ const ThreatAccordionItem = ( {
 			) }
 			{ ! description && <div className={ styles[ 'threat-section' ] }>{ learnMoreButton }</div> }
 			<div className={ styles[ 'threat-footer' ] }>
-				<Button isDestructive={ true } variant="secondary" onClick={ handleIgnoreThreatClick() }>
+				<Button
+					isDestructive={ true }
+					variant="secondary"
+					disabled={ fixerInProgress }
+					onClick={ handleIgnoreThreatClick() }
+				>
 					{ __( 'Ignore threat', 'jetpack-protect' ) }
 				</Button>
 				{ fixable && (
-					<Button onClick={ handleFixThreatClick() }>
+					<Button disabled={ fixerInProgress } onClick={ handleFixThreatClick() }>
 						{ __( 'Fix threat', 'jetpack-protect' ) }
 					</Button>
 				) }

projects/plugins/protect/src/js/state/reducers.js

@@ -120,7 +120,7 @@ const threatsUpdating = ( state = {}, action ) => {
 	return state;
 };
 
-const setThreatsFixing = ( state = [], action ) => {
+const threatsAreFixing = ( state = [], action ) => {
 	switch ( action.type ) {
 		case SET_THREATS_ARE_FIXING:
 			return action.threatIds;
@@ -207,7 +207,7 @@ const reducers = combineReducers( {
 	threatsUpdating,
 	modal,
 	notice,
-	setThreatsFixing,
+	threatsAreFixing,
 	hasRequiredPlan,
 	onboardingProgress,
 	waf,