ThreatsDataViews: History fields preset

projects/js-packages/components/components/threats-data-views/constants.ts

@@ -45,6 +45,24 @@ export const THREAT_FIELD_FIRST_DETECTED = 'first-detected';
 export const THREAT_FIELD_FIXED_ON = 'fixed-on';
 export const THREAT_FIELD_AUTO_FIX = 'auto-fix';
 
+export const DEFAULT_TABLE_FIELDS = [
+	THREAT_FIELD_SEVERITY,
+	THREAT_FIELD_THREAT,
+	THREAT_FIELD_TYPE,
+	THREAT_FIELD_FIRST_DETECTED,
+	THREAT_FIELD_FIXED_ON,
+	THREAT_FIELD_STATUS,
+	THREAT_FIELD_AUTO_FIX,
+];
+
+export const DEFAULT_LIST_FIELDS = [
+	THREAT_FIELD_SEVERITY,
+	THREAT_FIELD_TYPE,
+	THREAT_FIELD_EXTENSION,
+	THREAT_FIELD_SIGNATURE,
+	THREAT_FIELD_STATUS,
+];
+
 export const THREAT_ACTION_FIX = 'fix';
 export const THREAT_ACTION_IGNORE = 'ignore';
 export const THREAT_ACTION_UNIGNORE = 'unignore';

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

@@ -1,4 +1,4 @@
-import { getThreatType, type Threat } from '@automattic/jetpack-scan';
+import { getThreatType, getFixerAction, type Threat } from '@automattic/jetpack-scan';
 import {
 	type Action,
 	type ActionButton,
@@ -19,6 +19,8 @@ import Badge from '../badge';
 import ThreatFixerButton from '../threat-fixer-button';
 import ThreatSeverityBadge from '../threat-severity-badge';
 import {
+	DEFAULT_TABLE_FIELDS,
+	DEFAULT_LIST_FIELDS,
 	THREAT_ACTION_FIX,
 	THREAT_ACTION_IGNORE,
 	THREAT_ACTION_UNIGNORE,
@@ -100,19 +102,14 @@ export default function ThreatsDataViews( {
 	const defaultLayouts: SupportedLayouts = {
 		table: {
 			...baseView,
-			fields: [ THREAT_FIELD_SEVERITY, THREAT_FIELD_TYPE, THREAT_FIELD_AUTO_FIX ],
+			fields: DEFAULT_TABLE_FIELDS,
 			titleField: THREAT_FIELD_TITLE,
 			descriptionField: THREAT_FIELD_DESCRIPTION,
 			showMedia: false,
 		},
 		list: {
 			...baseView,
-			fields: [
-				THREAT_FIELD_SEVERITY,
-				THREAT_FIELD_TYPE,
-				THREAT_FIELD_EXTENSION,
-				THREAT_FIELD_SIGNATURE,
-			],
+			fields: DEFAULT_LIST_FIELDS,
 			titleField: THREAT_FIELD_TITLE,
 			mediaField: THREAT_FIELD_ICON,
 			showMedia: true,
@@ -129,6 +126,28 @@ export default function ThreatsDataViews( {
 		...defaultLayouts.table,
 	} );
 
+	/**
+	 * Compute the status filters from the view filters.
+	 */
+	const statusFilters = useMemo(
+		() =>
+			view.filters.reduce( ( acc, filter ) => {
+				if ( filter.field === THREAT_FIELD_STATUS ) {
+					if ( Array.isArray( filter.value ) ) {
+						for ( const value of filter.value ) {
+							if ( ! acc.includes( value ) ) {
+								acc.push( value );
+							}
+						}
+					} else if ( ! acc.includes( filter.value ) ) {
+						acc.push( filter.value );
+					}
+				}
+				return acc;
+			}, [] ),
+		[ view.filters ]
+	);
+
 	/**
 	 * Compute values from the provided threats data.
 	 *
@@ -238,31 +257,10 @@ export default function ThreatsDataViews( {
 					);
 				},
 			},
-			{
-				id: THREAT_FIELD_STATUS,
-				label: __( 'Status', 'jetpack-components' ),
-				elements: THREAT_STATUSES,
-				getValue( { item }: { item: Threat } ) {
-					if ( ! item.status ) {
-						return 'current';
-					}
-					return (
-						THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ?? item.status
-					);
-				},
-				render( { item }: { item: Threat } ) {
-					if ( item.status ) {
-						const status = THREAT_STATUSES.find( ( { value } ) => value === item.status );
-						if ( status ) {
-							return <Badge variant={ status?.variant }>{ status.label }</Badge>;
-						}
-					}
-					return <Badge variant="warning">{ __( 'Active', 'jetpack-components' ) }</Badge>;
-				},
-			},
 			{
 				id: THREAT_FIELD_TYPE,
 				label: __( 'Type', 'jetpack-components' ),
+				enableHiding: false,
 				elements: THREAT_TYPES,
 				getValue( { item }: { item: Threat } ) {
 					return getThreatType( item ) ?? '';
@@ -300,6 +298,34 @@ export default function ThreatsDataViews( {
 					return item.extension ? item.extension.slug : '';
 				},
 			},
+			...( dataFields.includes( 'status' )
+				? [
+						{
+							id: THREAT_FIELD_STATUS,
+							label: __( 'Status', 'jetpack-components' ),
+							enableHiding: false,
+							elements: THREAT_STATUSES,
+							getValue( { item }: { item: Threat } ) {
+								if ( ! item.status ) {
+									return 'current';
+								}
+								return (
+									THREAT_STATUSES.find( ( { value } ) => value === item.status )?.value ??
+									item.status
+								);
+							},
+							render( { item }: { item: Threat } ) {
+								if ( item.status ) {
+									const status = THREAT_STATUSES.find( ( { value } ) => value === item.status );
+									if ( status ) {
+										return <Badge variant={ status?.variant }>{ status.label }</Badge>;
+									}
+								}
+								return <Badge variant="warning">{ __( 'Active', 'jetpack-components' ) }</Badge>;
+							},
+						},
+				  ]
+				: [] ),
 			...( dataFields.includes( 'severity' )
 				? [
 						{
@@ -328,7 +354,8 @@ export default function ThreatsDataViews( {
 						},
 				  ]
 				: [] ),
-			...( dataFields.includes( 'firstDetected' )
+			...( dataFields.includes( 'firstDetected' ) &&
+			( statusFilters.includes( 'fixed' ) || statusFilters.includes( 'ignored' ) )
 				? [
 						{
 							id: THREAT_FIELD_FIRST_DETECTED,
@@ -347,7 +374,7 @@ export default function ThreatsDataViews( {
 						},
 				  ]
 				: [] ),
-			...( dataFields.includes( 'fixedOn' )
+			...( dataFields.includes( 'fixedOn' ) && statusFilters.includes( 'fixed' )
 				? [
 						{
 							id: THREAT_FIELD_FIXED_ON,
@@ -366,7 +393,8 @@ export default function ThreatsDataViews( {
 						},
 				  ]
 				: [] ),
-			...( dataFields.includes( 'fixable' )
+			...( dataFields.includes( 'fixable' ) &&
+			( statusFilters.includes( 'current' ) || ! statusFilters.length )
 				? [
 						{
 							id: THREAT_FIELD_AUTO_FIX,
@@ -398,7 +426,7 @@ export default function ThreatsDataViews( {
 		];
 
 		return result;
-	}, [ dataFields, plugins, themes, signatures, onFixThreats ] );
+	}, [ dataFields, plugins, themes, signatures, onFixThreats, statusFilters ] );
 
 	/**
 	 * DataView actions - collection of operations that can be performed upon each record.
@@ -408,10 +436,12 @@ export default function ThreatsDataViews( {
 	const actions = useMemo( () => {
 		const result: Action< Threat >[] = [];
 
-		if ( dataFields.includes( 'fixable' ) ) {
+		if ( dataFields.includes( 'fixable' ) && view.type === 'list' ) {
 			result.push( {
 				id: THREAT_ACTION_FIX,
-				label: __( 'Auto-fix', 'jetpack-components' ),
+				label: items => {
+					return getFixerAction( items[ 0 ] );
+				},
 				isPrimary: true,
 				callback: onFixThreats,
 				isEligible( item ) {
@@ -466,6 +496,7 @@ export default function ThreatsDataViews( {
 
 		return result;
 	}, [
+		view.type,
 		dataFields,
 		onFixThreats,
 		onIgnoreThreats,
@@ -515,6 +546,7 @@ export default function ThreatsDataViews( {
 				<ThreatsStatusToggleGroupControl
 					data={ data }
 					view={ view }
+					statusFilters={ statusFilters }
 					onChangeView={ onChangeView }
 				/>
 			}

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

@@ -10,19 +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 { ThreatStatus[] } props.statusFilters - The current status filter value.
+ * @param { Function }       props.onChangeView  - Callback function to handle view changes.
+ *
  * @return {JSX.Element|null} The component or null.
  */
 export default function ThreatsStatusToggleGroupControl( {
 	data,
 	view,
+	statusFilters,
 	onChangeView,
 }: {
 	data: Threat[];
 	view: View;
+	statusFilters: ThreatStatus[];
 	onChangeView: ( newView: View ) => void;
 } ): JSX.Element {
 	/**
@@ -88,31 +92,19 @@ export default function ThreatsStatusToggleGroupControl( {
 	);
 
 	/**
-	 * Memoized function to determine if a status filter is selected.
+	 * Get the selected status filters.
 	 *
-	 * @param {Array} threatStatuses - List of threat statuses.
+	 * @return {string|null} The selected status filter.
 	 */
-	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;
+	const selectedStatusFilterPreset = useMemo( () => {
+		if ( JSON.stringify( statusFilters ) === JSON.stringify( [ 'current' ] ) ) {
+			return 'active';
 		}
-		if ( isStatusFilterSelected( [ 'fixed', 'ignored' ] ) ) {
-			return 'historic' as const;
+		if ( JSON.stringify( statusFilters ) === JSON.stringify( [ 'fixed', 'ignored' ] ) ) {
+			return 'historic';
 		}
-		return '' as const;
-	}, [ isStatusFilterSelected ] );
+		return null;
+	}, [ statusFilters ] );
 
 	if ( ! ( activeThreatsCount + historicThreatsCount ) ) {
 		return null;
@@ -123,7 +115,7 @@ export default function ThreatsStatusToggleGroupControl( {
 			<div>
 				<div className={ styles[ 'toggle-group-control' ] }>
 					<ToggleGroupControl
-						value={ selectedValue }
+						value={ selectedStatusFilterPreset }
 						onChange={ onStatusFilterChange }
 						isBlock
 						hideLabelFromVision

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

@@ -34,7 +34,8 @@ const HomePage = () => {
 		[ status ]
 	);
 
-	const showReport = !! status.lastChecked || SCAN_IN_PROGRESS_STATUSES.indexOf( status?.status ) >= 0;
+	const showReport =
+		!! status.lastChecked || SCAN_IN_PROGRESS_STATUSES.indexOf( status?.status ) >= 0;
 
 	return (
 		<AdminPage>