Add functionality to return to all fixers

projects/js-packages/components/components/threats-modal/index.tsx

@@ -9,6 +9,7 @@ import ThreatFixConfirmation from './threat-fix-confirmation';
 
 interface ThreatModalContextType {
 	closeModal: () => void;
+	currentThreats: Threat[];
 	threatsList: Threat[];
 	setThreatsList: Dispatch< SetStateAction< Threat[] > >;
 	isBulk: boolean;
@@ -110,6 +111,7 @@ export default function ThreatsModal( {
 				<ThreatsModalContext.Provider
 					value={ {
 						closeModal: modalProps.onRequestClose,
+						currentThreats,
 						threatsList,
 						setThreatsList,
 						isBulk,

projects/js-packages/components/components/threats-modal/styles.module.scss

@@ -66,6 +66,10 @@
 	}
 }
 
+.view-bulk {
+	margin-right: auto;
+}
+
 .section {
 	display: flex;
 	flex-direction: column;

projects/js-packages/components/components/threats-modal/threat-actions.tsx

@@ -1,5 +1,5 @@
 import { getFixerState, getDetailedFixerAction, type Threat } from '@automattic/jetpack-scan';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useContext, useMemo } from 'react';
 import { Button } from '@automattic/jetpack-components';
 import FixerStateNotice from './fixer-state-notice';
@@ -11,12 +11,23 @@ import { ThreatsModalContext } from '.';
  *
  * @param {object}   props                 - The props.
  * @param {Threat[]} props.selectedThreats - The selected threats.
+ * @param {boolean}  props.canReturnToBulk - Whether the user can return to the bulk view.
+ * @param {Function} props.viewBulkThreats - The function to view all threats.
  *
  * @return {JSX.Element | null} The rendered action buttons or null if no actions are available.
  */
-const ThreatActions = ( { selectedThreats }: { selectedThreats: Threat[] } ): JSX.Element => {
+const ThreatActions = ( {
+	selectedThreats,
+	canReturnToBulk,
+	viewBulkThreats,
+}: {
+	selectedThreats: Threat[];
+	canReturnToBulk: boolean;
+	viewBulkThreats: () => void;
+} ): JSX.Element => {
 	const {
 		closeModal,
+		currentThreats,
 		isBulk,
 		actionToConfirm,
 		handleFixThreatClick,
@@ -66,6 +77,15 @@ const ThreatActions = ( { selectedThreats }: { selectedThreats: Threat[] } ): JS
 
 	const renderIndividualActions = () => (
 		<>
+			{ canReturnToBulk && (
+				<Button className={ styles[ 'view-bulk' ] } onClick={ viewBulkThreats }>
+					{ sprintf(
+						// translators: %d is the number of threats.
+						__( 'Show auto fixers (%d)', 'jetpack-components' ),
+						currentThreats.length
+					) }
+				</Button>
+			) }
 			{ firstThreat.status === 'ignored' && (
 				<Button disabled={ disabled } isDestructive variant="secondary" onClick={ onUnignoreClick }>
 					{ __( 'Un-ignore threat', 'jetpack-components' ) }

projects/js-packages/components/components/threats-modal/threat-fix-confirmation.tsx

@@ -24,9 +24,10 @@ import { ThreatsModalContext } from '.';
 const ThreatFixConfirmation = () => {
 	const [ isSm ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
 
-	const { threatsList, setThreatsList, isBulk, handleUpgradeClick } =
+	const { currentThreats, threatsList, setThreatsList, isBulk, handleUpgradeClick } =
 		useContext( ThreatsModalContext );
 
+	const [ canReturnToBulk, setCanReturnToBulk ] = useState( false );
 	const [ selectedThreats, setSelectedThreats ] = useState( threatsList );
 
 	const handleToggleThreat = useCallback( ( threat: Threat, isChecked: boolean ) => {
@@ -51,10 +52,17 @@ const ThreatFixConfirmation = () => {
 		return handlers;
 	}, [ threatsList, handleToggleThreat ] );
 
+	const viewBulkThreats = useCallback( () => {
+		setThreatsList( currentThreats );
+		setSelectedThreats( currentThreats );
+		setCanReturnToBulk( false );
+	}, [ currentThreats, setThreatsList, setSelectedThreats ] );
+
 	const viewIndividualThreat = useCallback(
 		( threat: Threat ) => {
 			setThreatsList( [ threat ] );
 			setSelectedThreats( [ threat ] );
+			setCanReturnToBulk( true );
 		},
 		[ setThreatsList, setSelectedThreats ]
 	);
@@ -153,7 +161,11 @@ const ThreatFixConfirmation = () => {
 					onClick={ handleUpgradeClick }
 				/>
 			) }
-			<ThreatActions selectedThreats={ selectedThreats } />
+			<ThreatActions
+				selectedThreats={ selectedThreats }
+				canReturnToBulk={ canReturnToBulk }
+				viewBulkThreats={ viewBulkThreats }
+			/>
 		</div>
 	);
 };