Revert unnecessary threats data views updates

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

@@ -1,4 +1,4 @@
-import { getThreatType, type Threat, type ThreatStatus } from '@automattic/jetpack-scan';
+import { getThreatType, type Threat } from '@automattic/jetpack-scan';
 import {
 	type Action,
 	type ActionButton,
@@ -238,6 +238,28 @@ 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' ),
@@ -278,33 +300,6 @@ export default function ThreatsDataViews( {
 					return item.extension ? item.extension.slug : '';
 				},
 			},
-			...( dataFields.includes( 'status' )
-				? [
-						{
-							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>;
-							},
-						},
-				  ]
-				: [] ),
 			...( dataFields.includes( 'severity' )
 				? [
 						{
@@ -480,33 +475,6 @@ 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.
 	 *
@@ -548,7 +516,6 @@ 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

@@ -10,23 +10,20 @@ 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 { string }   props.selectedStatusFilter - The selected status filter.
- * @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 { 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 {
 	/**
@@ -91,6 +88,33 @@ 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;
 	}
@@ -100,7 +124,7 @@ export default function ThreatsStatusToggleGroupControl( {
 			<div>
 				<div className={ styles[ 'toggle-group-control' ] }>
 					<ToggleGroupControl
-						value={ selectedStatusFilter }
+						value={ selectedValue }
 						onChange={ onStatusFilterChange }
 						isBlock
 						hideLabelFromVision