Add filters

projects/plugins/protect/src/js/routes/scan/history/history-data-views.tsx

@@ -1,6 +1,7 @@
 import { ThreatsDataViews } from '@automattic/jetpack-components';
 import { type Threat } from '@automattic/jetpack-scan';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
 import useHistoryQuery from '../../../data/scan/use-history-query';
 import useModal from '../../../hooks/use-modal';
 
@@ -13,10 +14,22 @@ import useModal from '../../../hooks/use-modal';
  * @return {JSX.Element} ScanResultDataView component.
  */
 export default function HistoryDataViews( { header }: { header?: JSX.Element } ) {
+	const { filter } = useParams();
 	const { data: history } = useHistoryQuery();
-
 	const { setModal } = useModal();
 
+	const filters = useMemo( () => {
+		if ( filter ) {
+			return [
+				{
+					field: 'status',
+					value: filter,
+					operator: 'isAny',
+				},
+			];
+		}
+	}, [ filter ] );
+
 	const onUnignoreThreats = useCallback(
 		( threats: Threat[] ) => {
 			setModal( { type: 'UNIGNORE_THREAT', props: { threat: threats[ 0 ] } } );
@@ -27,6 +40,7 @@ export default function HistoryDataViews( { header }: { header?: JSX.Element } )
 	return (
 		<ThreatsDataViews
 			data={ history ? history.threats : [] }
+			filters={ filters }
 			onUnignoreThreats={ onUnignoreThreats }
 			header={ header }
 		/>