Pass status filter presets to consumer

projects/js-packages/components/components/threats-data-views/index.tsx

@@ -1,4 +1,4 @@
-import { getThreatType, type Threat } from '@automattic/jetpack-scan';
+import { getThreatType, type Threat, type ThreatStatus } from '@automattic/jetpack-scan';
 import {
 	type Action,
 	type ActionButton,
@@ -14,7 +14,7 @@ import {
 import { dateI18n } from '@wordpress/date';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState, useEffect } from 'react';
 import Badge from '../badge';
 import ThreatFixerButton from '../threat-fixer-button';
 import ThreatSeverityBadge from '../threat-severity-badge';
@@ -55,6 +55,7 @@ import ThreatsStatusToggleGroupControl from './threats-status-toggle-group-contr
  * @param {Function} props.isThreatEligibleForFix      - Function to determine if a threat is eligible for fixing.
  * @param {Function} props.isThreatEligibleForIgnore   - Function to determine if a threat is eligible for ignoring.
  * @param {Function} props.isThreatEligibleForUnignore - Function to determine if a threat is eligible for unignoring.
+ * @param {Function} props.onStatusFilterChange        - Callback function run when the status filter changes.
  *
  * @return {JSX.Element} The ThreatsDataViews component.
  */
@@ -68,6 +69,7 @@ export default function ThreatsDataViews( {
 	onFixThreats,
 	onIgnoreThreats,
 	onUnignoreThreats,
+	onStatusFilterChange,
 }: {
 	data: Threat[];
 	filters?: Filter[];
@@ -78,6 +80,7 @@ export default function ThreatsDataViews( {
 	onFixThreats?: ( threats: Threat[] ) => void;
 	onIgnoreThreats?: ActionButton< Threat >[ 'callback' ];
 	onUnignoreThreats?: ActionButton< Threat >[ 'callback' ];
+	onStatusFilterChange?: ( newStatus: 'active' | 'historic' | null ) => void;
 } ): JSX.Element {
 	const baseView = {
 		sort: {
@@ -475,6 +478,33 @@ export default function ThreatsDataViews( {
 		isThreatEligibleForUnignore,
 	] );
 
+	/**
+	 * Memoized function to determine if a status filter is selected.
+	 *
+	 * @param {Array} threatStatuses - List of threat statuses.
+	 */
+	const isStatusFilterSelected = useMemo(
+		() => ( threatStatuses: ThreatStatus[] ) =>
+			view.filters.some(
+				filter =>
+					filter.field === 'status' &&
+					Array.isArray( filter.value ) &&
+					filter.value.length === threatStatuses.length &&
+					threatStatuses.every( threatStatus => filter.value.includes( threatStatus ) )
+			),
+		[ view.filters ]
+	);
+
+	const selectedStatusFilter = useMemo( () => {
+		if ( isStatusFilterSelected( [ 'current' ] ) ) {
+			return 'active' as const;
+		}
+		if ( isStatusFilterSelected( [ 'fixed', 'ignored' ] ) ) {
+			return 'historic' as const;
+		}
+		return null;
+	}, [ isStatusFilterSelected ] );
+
 	/**
 	 * Apply the view settings (i.e. filters, sorting, pagination) to the dataset.
 	 *
@@ -500,6 +530,11 @@ export default function ThreatsDataViews( {
 	 */
 	const getItemId = useCallback( ( item: Threat ) => item.id.toString(), [] );
 
+	// Notify the consumer whenever the selectedStatusFilter changes
+	useEffect( () => {
+		onStatusFilterChange?.( selectedStatusFilter );
+	}, [ selectedStatusFilter, onStatusFilterChange ] );
+
 	return (
 		<DataViews
 			actions={ actions }
@@ -516,6 +551,7 @@ export default function ThreatsDataViews( {
 					data={ data }
 					view={ view }
 					onChangeView={ onChangeView }
+					selectedStatusFilter={ selectedStatusFilter }
 				/>
 			}
 		/>

projects/js-packages/components/components/threats-data-views/threats-status-toggle-group-control.tsx

@@ -1,4 +1,4 @@
-import { type Threat, type ThreatStatus } from '@automattic/jetpack-scan';
+import { type Threat } from '@automattic/jetpack-scan';
 import {
 	__experimentalToggleGroupControl as ToggleGroupControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption, // eslint-disable-line @wordpress/no-unsafe-wp-apis
@@ -10,20 +10,23 @@ import styles from './styles.module.scss';
 
 /**
  * ToggleGroupControl component for filtering threats by status.
- * @param {object}     props              - Component props.
- * @param { Threat[]}  props.data         - Threats data.
- * @param { View }     props.view         - The current view.
- * @param { Function } props.onChangeView - Callback function to handle view changes.
+ * @param {object}     props                      - Component props.
+ * @param { Threat[]}  props.data                 - Threats data.
+ * @param { View }     props.view                 - The current view.
+ * @param { string }   props.selectedStatusFilter - The selected status filter.
+ * @param { Function } props.onChangeView         - Callback function to handle view changes.
  *
  * @return {JSX.Element|null} The component or null.
  */
 export default function ThreatsStatusToggleGroupControl( {
 	data,
 	view,
+	selectedStatusFilter,
 	onChangeView,
 }: {
 	data: Threat[];
 	view: View;
+	selectedStatusFilter: string;
 	onChangeView: ( newView: View ) => void;
 } ): JSX.Element {
 	/**
@@ -88,43 +91,12 @@ export default function ThreatsStatusToggleGroupControl( {
 		[ view, onChangeView ]
 	);
 
-	/**
-	 * Memoized function to determine if a status filter is selected.
-	 *
-	 * @param {Array} threatStatuses - List of threat statuses.
-	 */
-	const isStatusFilterSelected = useMemo(
-		() => ( threatStatuses: ThreatStatus[] ) =>
-			view.filters.some(
-				filter =>
-					filter.field === 'status' &&
-					Array.isArray( filter.value ) &&
-					filter.value.length === threatStatuses.length &&
-					threatStatuses.every( threatStatus => filter.value.includes( threatStatus ) )
-			),
-		[ view.filters ]
-	);
-
-	const selectedValue = useMemo( () => {
-		if ( isStatusFilterSelected( [ 'current' ] ) ) {
-			return 'active' as const;
-		}
-		if ( isStatusFilterSelected( [ 'fixed', 'ignored' ] ) ) {
-			return 'historic' as const;
-		}
-		return '' as const;
-	}, [ isStatusFilterSelected ] );
-
-	if ( ! ( activeThreatsCount + historicThreatsCount ) ) {
-		return null;
-	}
-
 	try {
 		return (
 			<div>
 				<div className={ styles[ 'toggle-group-control' ] }>
 					<ToggleGroupControl
-						value={ selectedValue }
+						value={ selectedStatusFilter }
 						onChange={ onStatusFilterChange }
 						isBlock
 						hideLabelFromVision

projects/plugins/protect/src/js/routes/scan/index.jsx

@@ -28,7 +28,6 @@ const ScanPage = () => {
 	const { data: history } = useHistoryQuery();
 
 	const [ scanResultsAnchor, setScanResultsAnchor ] = useState( null );
-	const [ isViewingHistory, setIsViewingHistory ] = useState( false );
 
 	let currentScanStatus;
 	if ( status.error ) {

projects/plugins/protect/src/js/routes/scan/scan-results-data-view.tsx

@@ -8,15 +8,18 @@ import useModal from '../../hooks/use-modal';
 /**
  * Scan Results Data View
  *
- * @param {object} props         - Component props.
- * @param {Array}  props.filters - Default filters to apply to the data view.
+ * @param {object}   props                      - Component props.
+ * @param {Array}    props.filters              - Default filters to apply to the data view.
+ * @param {Function} props.onStatusFilterChange - Callback function to handle status filter changes.
  *
  * @return {JSX.Element} ScanResultDataView component.
  */
 export default function ScanResultsDataView( {
 	filters = [],
+	onStatusFilterChange,
 }: {
 	filters: React.ComponentProps< typeof ThreatsDataViews >[ 'filters' ];
+	onStatusFilterChange: ( newStatus: 'active' | 'historic' | null ) => void;
 } ) {
 	const { setModal } = useModal();
 
@@ -51,6 +54,7 @@ export default function ScanResultsDataView( {
 			onFixThreats={ onFixThreats }
 			onIgnoreThreats={ onIgnoreThreats }
 			onUnignoreThreats={ onUnignoreThreats }
+			onStatusFilterChange={ onStatusFilterChange }
 		/>
 	);
 }