@automattic/jetpack-scan 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -5,6 +5,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.0] - 2026-05-11
+### Added
+- ThreatsDataViews: Add an optional `empty` prop that's forwarded to the underlying `DataViews` so consumers can render their own empty-state node instead of DataViews' built-in "no items" body. [#48458]
+- ThreatsDataViews: Accept `RenderFixModal`, `RenderIgnoreModal`, and `RenderUnignoreModal` props so consumers can route row actions through DataViews-managed confirmation modals. [#48458]
+- ThreatsDataViews: Add an optional `onTrackEvent` callback for DataViews-canonical view transition events. [#48458]
+- ThreatsDataViews: Add an optional `persistKey` prop to persist filters, sort, search, pagination, and layout in local storage. [#48458]
+- ThreatsDataViews: Add an optional `RenderViewModal` prop for always-available threat detail views. [#48458]
+- ThreatsDataViews: Add an optional `showStatusFilter` prop so consumers that already filter by status can hide the in-table active/history toggle. [#48458]
+
+### Changed
+- Badge: Migrated usages to @wordpress/ui Badge. [#48156]
+- Internal: No longer require automattic/jetpack-changelogger as a per-project dev dependency. [#48225]
+- Scan Package: Switch the package to source exports so consumers resolve `@automattic/jetpack-scan` directly to `./src/index.ts`. [#48458]
+- Update package dependencies. [#47907]
+- Update package dependencies. [#48106]
+- Update package dependencies. [#48126]
+- Update package dependencies. [#48141]
+- Update package dependencies. [#48346]
+- ThreatsDataViews: Anchor the DataViews empty body to `calc(100vh - 320px)` so consumers get a full-height empty state without wiring a custom flex chain. [#48458]
+
 ## [1.3.0] - 2026-04-11
 ### Changed
 - Set `.repository.url` in `package.json` to the mirror repo rather than the monorepo. Required for enabling provenance. [#47149]
@@ -175,6 +195,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 - Updated dependencies. [#39754]
 
+[1.4.0]: https://github.com/Automattic/jetpack-scan/compare/v1.3.0...v1.4.0
 [1.3.0]: https://github.com/Automattic/jetpack-scan/compare/v1.2.2...v1.3.0
 [1.2.2]: https://github.com/Automattic/jetpack-scan/compare/v1.2.1...v1.2.2
 [1.2.1]: https://github.com/Automattic/jetpack-scan/compare/v1.2.0...v1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-scan",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"private": false,
 	"description": "A JS client for consuming Jetpack Scan services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/scan/#readme",
@@ -13,41 +13,38 @@
 	},
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
+	"sideEffects": [
+		"*.css",
+		"*.scss"
+	],
 	"type": "module",
 	"exports": {
-		".": {
-			"types": "./build/index.d.ts",
-			"default": "./build/index.js"
-		}
+		".": "./src/index.ts"
 	},
-	"main": "./build/index.js",
-	"types": "./build/index.d.ts",
 	"scripts": {
-		"build": "pnpm run clean && pnpm run compile-ts",
-		"clean": "rm -rf build/",
-		"compile-ts": "tsgo --pretty",
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
 		"test-coverage": "pnpm run test --coverage",
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/jetpack-api": "^1.0.22",
-		"@automattic/jetpack-base-styles": "^1.0.21",
-		"@automattic/jetpack-components": "^1.8.1",
-		"@wordpress/api-fetch": "7.43.0",
-		"@wordpress/components": "32.5.0",
-		"@wordpress/dataviews": "13.1.0",
-		"@wordpress/date": "5.43.0",
-		"@wordpress/element": "6.43.0",
-		"@wordpress/i18n": "6.16.0",
-		"@wordpress/icons": "12.0.0",
-		"@wordpress/theme": "0.10.0",
-		"@wordpress/url": "4.43.0",
+		"@automattic/jetpack-api": "^1.0.24",
+		"@automattic/jetpack-base-styles": "^1.2.1",
+		"@automattic/jetpack-components": "^1.11.0",
+		"@wordpress/api-fetch": "7.44.0",
+		"@wordpress/components": "32.6.0",
+		"@wordpress/dataviews": "14.1.0",
+		"@wordpress/date": "5.44.0",
+		"@wordpress/element": "6.44.0",
+		"@wordpress/i18n": "6.17.0",
+		"@wordpress/icons": "12.2.0",
+		"@wordpress/theme": "0.11.0",
+		"@wordpress/ui": "0.11.0",
+		"@wordpress/url": "4.44.0",
 		"debug": "4.4.3"
 	},
 	"devDependencies": {
-		"@storybook/addon-docs": "10.3.3",
-		"@storybook/react": "10.3.3",
+		"@storybook/addon-docs": "10.3.5",
+		"@storybook/react": "10.3.5",
 		"@testing-library/dom": "10.4.1",
 		"@testing-library/react": "16.3.2",
 		"@types/jest": "30.0.0",
@@ -56,7 +53,7 @@
 		"jest": "30.3.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"storybook": "10.3.3",
+		"storybook": "10.3.5",
 		"typescript": "5.9.3"
 	},
 	"peerDependencies": {

package/src/components/threat-severity-badge/index.tsx

@@ -1,10 +1,10 @@
-import { Badge } from '@automattic/jetpack-components';
 import { _x } from '@wordpress/i18n';
+import { Badge } from '@wordpress/ui';
 
 const ThreatSeverityBadge = ( { severity } ) => {
 	if ( severity >= 5 ) {
 		return (
-			<Badge variant="danger">
+			<Badge intent="high">
 				{ _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack-scan' ) }
 			</Badge>
 		);
@@ -12,13 +12,17 @@ const ThreatSeverityBadge = ( { severity } ) => {
 
 	if ( severity >= 3 && severity < 5 ) {
 		return (
-			<Badge variant="warning">
+			<Badge intent="medium">
 				{ _x( 'High', 'Severity label for issues rated between 3 and 5.', 'jetpack-scan' ) }
 			</Badge>
 		);
 	}
 
-	return <Badge>{ _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack-scan' ) }</Badge>;
+	return (
+		<Badge intent="draft">
+			{ _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack-scan' ) }
+		</Badge>
+	);
 };
 
 export default ThreatSeverityBadge;

package/src/components/threats-data-views/constants.ts

@@ -7,12 +7,11 @@ import {
 	wordpress as coreIcon,
 } from '@wordpress/icons';
 
-export const THREAT_STATUSES: { value: string; label: string; variant?: 'success' | 'warning' }[] =
-	[
-		{ value: 'current', label: __( 'Active', 'jetpack-scan' ), variant: 'warning' },
-		{ value: 'fixed', label: __( 'Fixed', 'jetpack-scan' ), variant: 'success' },
-		{ value: 'ignored', label: __( 'Ignored', 'jetpack-scan' ) },
-	];
+export const THREAT_STATUSES: { value: string; label: string; intent?: 'medium' | 'stable' }[] = [
+	{ value: 'current', label: __( 'Active', 'jetpack-scan' ), intent: 'medium' },
+	{ value: 'fixed', label: __( 'Fixed', 'jetpack-scan' ), intent: 'stable' },
+	{ value: 'ignored', label: __( 'Ignored', 'jetpack-scan' ) },
+];
 
 export const THREAT_TYPES = [
 	{ value: 'plugins', label: __( 'Plugin', 'jetpack-scan' ) },
@@ -47,3 +46,4 @@ export const THREAT_FIELD_AUTO_FIX = 'auto-fix';
 export const THREAT_ACTION_FIX = 'fix';
 export const THREAT_ACTION_IGNORE = 'ignore';
 export const THREAT_ACTION_UNIGNORE = 'unignore';
+export const THREAT_ACTION_VIEW = 'view';

package/src/components/threats-data-views/index.tsx

@@ -1,12 +1,11 @@
-import { Badge } from '@automattic/jetpack-components';
 import {
 	type Action,
 	type ActionButton,
 	type Field,
 	type FieldTypeName,
 	type Filter,
+	type RenderModalProps,
 	type SortDirection,
-	type SupportedLayouts,
 	type View,
 	DataViews,
 	filterSortAndPaginate,
@@ -14,13 +13,23 @@ import {
 import { dateI18n } from '@wordpress/date';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
-import { useCallback, useMemo, useState } from 'react';
+import { Badge } from '@wordpress/ui';
+import {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+	type ReactElement,
+	type ReactNode,
+} from 'react';
 import { ThreatSeverityBadge, getThreatType, type Threat } from '@automattic/jetpack-scan';
 import ThreatFixerButton from '../threat-fixer-button/index.tsx';
 import {
 	THREAT_ACTION_FIX,
 	THREAT_ACTION_IGNORE,
 	THREAT_ACTION_UNIGNORE,
+	THREAT_ACTION_VIEW,
 	THREAT_FIELD_AUTO_FIX,
 	THREAT_FIELD_DESCRIPTION,
 	THREAT_FIELD_EXTENSION,
@@ -44,16 +53,32 @@ import ThreatsStatusToggleGroupControl from './threats-status-toggle-group-contr
 /**
  * DataViews component for displaying security threats.
  *
- * @param {object}   props                             - Component props.
- * @param {Array}    props.data                        - Threats data.
- * @param {Array}    props.filters                     - Initial DataView filters.
- * @param {Function} props.onChangeSelection           - Callback function run when an item is selected.
- * @param {Function} props.onFixThreats                - Threat fix action callback.
- * @param {Function} props.onIgnoreThreats             - Threat ignore action callback.
- * @param {Function} props.onUnignoreThreats           - Threat unignore action callback.
- * @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.
+ * Each row action (Auto-fix / Ignore / Unignore) supports two wiring shapes:
+ * pass a callback (`onFixThreats` etc.) for the existing fire-and-forget
+ * behaviour, or pass a React component via the matching `Render*Modal` prop
+ * to open a confirmation modal — DataViews renders it inline when the
+ * action is invoked, and consumers receive `{ items, closeModal }` from
+ * `RenderModalProps< Threat >`. Render-modal props take precedence when
+ * both are supplied for the same action.
+ *
+ * @param {object}    props                             - Component props.
+ * @param {Array}     props.data                        - Threats data.
+ * @param {Array}     props.filters                     - Initial DataView filters.
+ * @param {Function}  props.onChangeSelection           - Callback function run when an item is selected.
+ * @param {Function}  props.onFixThreats                - Threat fix action callback (used when no `RenderFixModal`).
+ * @param {Function}  props.onIgnoreThreats             - Threat ignore action callback (used when no `RenderIgnoreModal`).
+ * @param {Function}  props.onUnignoreThreats           - Threat unignore action callback (used when no `RenderUnignoreModal`).
+ * @param {Function}  props.RenderFixModal              - Optional component rendered as the fix-action modal.
+ * @param {Function}  props.RenderIgnoreModal           - Optional component rendered as the ignore-action modal.
+ * @param {Function}  props.RenderUnignoreModal         - Optional component rendered as the unignore-action modal.
+ * @param {Function}  props.RenderViewModal             - Optional component rendered as the view-details modal. Unlike the fix / ignore / unignore actions, this one is always eligible for any row.
+ * @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 {ReactNode} [props.empty]                     - Empty-state node forwarded to DataViews when `data` is empty. Defaults to DataViews' built-in "no items" body.
+ * @param {boolean}   [props.showStatusFilter]          - Whether to render the active/historic status toggle above the table. Defaults to `true`. Set to `false` when the consumer already filters the dataset by status outside the component (e.g. page-level tabs).
+ * @param {Function}  [props.onTrackEvent]              - Optional callback that receives DataViews-canonical event names (`view_change`, `filter_change`, `search`, `page_change`, `layout_changed`) on the matching view transitions. Consumers prefix and forward to their own analytics client.
+ * @param {string}    [props.persistKey]                - Optional `localStorage` key. When set, the component hydrates its initial view state from `localStorage[persistKey]` and writes back on every change. Use stable, namespaced keys (e.g. `jetpack-scan:active-threats:view`) so consumer panels don't collide. Quietly no-ops when `localStorage` is unavailable.
  *
  * @return {JSX.Element} The ThreatsDataViews component.
  */
@@ -67,6 +92,14 @@ export default function ThreatsDataViews( {
 	onFixThreats,
 	onIgnoreThreats,
 	onUnignoreThreats,
+	RenderFixModal,
+	RenderIgnoreModal,
+	RenderUnignoreModal,
+	RenderViewModal,
+	empty,
+	showStatusFilter = true,
+	onTrackEvent,
+	persistKey,
 }: {
 	data: Threat[];
 	filters?: Filter[];
@@ -77,6 +110,14 @@ export default function ThreatsDataViews( {
 	onFixThreats?: ( threats: Threat[] ) => void;
 	onIgnoreThreats?: ActionButton< Threat >[ 'callback' ];
 	onUnignoreThreats?: ActionButton< Threat >[ 'callback' ];
+	RenderFixModal?: ( props: RenderModalProps< Threat > ) => ReactElement;
+	RenderIgnoreModal?: ( props: RenderModalProps< Threat > ) => ReactElement;
+	RenderUnignoreModal?: ( props: RenderModalProps< Threat > ) => ReactElement;
+	RenderViewModal?: ( props: RenderModalProps< Threat > ) => ReactElement;
+	empty?: ReactNode;
+	showStatusFilter?: boolean;
+	onTrackEvent?: ( event: string, properties?: Record< string, unknown > ) => void;
+	persistKey?: string;
 } ): JSX.Element {
 	const baseView = {
 		sort: {
@@ -96,7 +137,7 @@ export default function ThreatsDataViews( {
 	 *
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#defaultlayouts-record-string-view
 	 */
-	const defaultLayouts: SupportedLayouts = {
+	const defaultLayouts = {
 		table: {
 			...baseView,
 			fields: [ THREAT_FIELD_SEVERITY, THREAT_FIELD_TYPE, THREAT_FIELD_AUTO_FIX ],
@@ -121,13 +162,40 @@ export default function ThreatsDataViews( {
 	/**
 	 * DataView view object - configures how the dataset is visible to the user.
 	 *
+	 * When `persistKey` is supplied, the initial view hydrates from
+	 * `localStorage[persistKey]` so reloads, tab changes, and drill-ins
+	 * preserve the user's filters / sort / pagination / layout. Falls
+	 * back to the default table view on parse failure or first load.
+	 *
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#view-object
 	 */
-	const [ view, setView ] = useState< View >( {
-		type: 'table',
-		...defaultLayouts.table,
+	const [ view, setView ] = useState< View >( () => {
+		const fallback: View = { type: 'table', ...defaultLayouts.table };
+		if ( ! persistKey || typeof window === 'undefined' ) {
+			return fallback;
+		}
+		try {
+			const stored = window.localStorage.getItem( persistKey );
+			if ( stored ) {
+				return JSON.parse( stored ) as View;
+			}
+		} catch {
+			// localStorage may be disabled (privacy mode, full disk) — no-op.
+		}
+		return fallback;
 	} );
 
+	useEffect( () => {
+		if ( ! persistKey || typeof window === 'undefined' ) {
+			return;
+		}
+		try {
+			window.localStorage.setItem( persistKey, JSON.stringify( view ) );
+		} catch {
+			// localStorage may be disabled (privacy mode, full disk) — no-op.
+		}
+	}, [ persistKey, view ] );
+
 	/**
 	 * Compute values from the provided threats data.
 	 *
@@ -253,10 +321,10 @@ export default function ThreatsDataViews( {
 					if ( item.status ) {
 						const status = THREAT_STATUSES.find( ( { value } ) => value === item.status );
 						if ( status ) {
-							return <Badge variant={ status?.variant }>{ status.label }</Badge>;
+							return <Badge intent={ status.intent }>{ status.label }</Badge>;
 						}
 					}
-					return <Badge variant="warning">{ __( 'Active', 'jetpack-scan' ) }</Badge>;
+					return <Badge intent="medium">{ __( 'Active', 'jetpack-scan' ) }</Badge>;
 				},
 			},
 			{
@@ -419,56 +487,109 @@ export default function ThreatsDataViews( {
 		const result: Action< Threat >[] = [];
 
 		if ( dataFields.includes( 'fixable' ) ) {
-			result.push( {
-				id: THREAT_ACTION_FIX,
-				label: __( 'Auto-fix', 'jetpack-scan' ),
-				isPrimary: true,
-				callback: onFixThreats,
-				isEligible( item ) {
-					if ( ! onFixThreats ) {
-						return false;
-					}
-					if ( isThreatEligibleForFix ) {
-						return isThreatEligibleForFix( item );
-					}
-					return !! item.fixable;
-				},
-			} );
+			const isEligible = ( item: Threat ) => {
+				if ( ! RenderFixModal && ! onFixThreats ) {
+					return false;
+				}
+				if ( isThreatEligibleForFix ) {
+					return isThreatEligibleForFix( item );
+				}
+				return !! item.fixable;
+			};
+			if ( RenderFixModal ) {
+				result.push( {
+					id: THREAT_ACTION_FIX,
+					label: __( 'Auto-fix', 'jetpack-scan' ),
+					isPrimary: true,
+					modalHeader: __( 'Fix threat', 'jetpack-scan' ),
+					RenderModal: RenderFixModal,
+					isEligible,
+				} );
+			} else {
+				result.push( {
+					id: THREAT_ACTION_FIX,
+					label: __( 'Auto-fix', 'jetpack-scan' ),
+					isPrimary: true,
+					callback: onFixThreats,
+					isEligible,
+				} );
+			}
 		}
 
 		if ( dataFields.includes( 'status' ) ) {
-			result.push( {
-				id: THREAT_ACTION_IGNORE,
-				label: __( 'Ignore', 'jetpack-scan' ),
-				isPrimary: true,
-				callback: onIgnoreThreats,
-				isEligible( item ) {
-					if ( ! onIgnoreThreats ) {
-						return false;
-					}
-					if ( isThreatEligibleForIgnore ) {
-						return isThreatEligibleForIgnore( item );
-					}
-					return item.status === 'current';
-				},
-			} );
+			const isEligible = ( item: Threat ) => {
+				if ( ! RenderIgnoreModal && ! onIgnoreThreats ) {
+					return false;
+				}
+				if ( isThreatEligibleForIgnore ) {
+					return isThreatEligibleForIgnore( item );
+				}
+				return item.status === 'current';
+			};
+			if ( RenderIgnoreModal ) {
+				result.push( {
+					id: THREAT_ACTION_IGNORE,
+					label: __( 'Ignore', 'jetpack-scan' ),
+					isPrimary: true,
+					modalHeader: __( 'Ignore threat', 'jetpack-scan' ),
+					RenderModal: RenderIgnoreModal,
+					isEligible,
+				} );
+			} else {
+				result.push( {
+					id: THREAT_ACTION_IGNORE,
+					label: __( 'Ignore', 'jetpack-scan' ),
+					isPrimary: true,
+					callback: onIgnoreThreats,
+					isEligible,
+				} );
+			}
 		}
 
 		if ( dataFields.includes( 'status' ) ) {
+			const isEligible = ( item: Threat ) => {
+				if ( ! RenderUnignoreModal && ! onUnignoreThreats ) {
+					return false;
+				}
+				if ( isThreatEligibleForUnignore ) {
+					return isThreatEligibleForUnignore( item );
+				}
+				return item.status === 'ignored';
+			};
+			if ( RenderUnignoreModal ) {
+				result.push( {
+					id: THREAT_ACTION_UNIGNORE,
+					label: __( 'Unignore', 'jetpack-scan' ),
+					isPrimary: true,
+					modalHeader: __( 'Unignore threat', 'jetpack-scan' ),
+					RenderModal: RenderUnignoreModal,
+					isEligible,
+				} );
+			} else {
+				result.push( {
+					id: THREAT_ACTION_UNIGNORE,
+					label: __( 'Unignore', 'jetpack-scan' ),
+					isPrimary: true,
+					callback: onUnignoreThreats,
+					isEligible,
+				} );
+			}
+		}
+
+		// View details — always-eligible row action that opens the
+		// supplied `RenderViewModal`. Unlike fix / ignore / unignore, it
+		// is NOT gated by threat status or capability, so the user can
+		// always drill in for the full file context, fix description,
+		// and metadata.
+		if ( RenderViewModal ) {
 			result.push( {
-				id: THREAT_ACTION_UNIGNORE,
-				label: __( 'Unignore', 'jetpack-scan' ),
-				isPrimary: true,
-				callback: onUnignoreThreats,
-				isEligible( item ) {
-					if ( ! onUnignoreThreats ) {
-						return false;
-					}
-					if ( isThreatEligibleForUnignore ) {
-						return isThreatEligibleForUnignore( item );
-					}
-					return item.status === 'ignored';
-				},
+				id: THREAT_ACTION_VIEW,
+				label: __( 'View details', 'jetpack-scan' ),
+				isPrimary: false,
+				modalHeader: __( 'Threat details', 'jetpack-scan' ),
+				modalSize: 'large',
+				RenderModal: RenderViewModal,
+				isEligible: () => true,
 			} );
 		}
 
@@ -478,6 +599,10 @@ export default function ThreatsDataViews( {
 		onFixThreats,
 		onIgnoreThreats,
 		onUnignoreThreats,
+		RenderFixModal,
+		RenderIgnoreModal,
+		RenderUnignoreModal,
+		RenderViewModal,
 		isThreatEligibleForFix,
 		isThreatEligibleForIgnore,
 		isThreatEligibleForUnignore,
@@ -493,13 +618,42 @@ export default function ThreatsDataViews( {
 	}, [ data, view, fields ] );
 
 	/**
-	 * Callback function to update the view state.
+	 * Callback function to update the view state. When `onTrackEvent` is
+	 * supplied, diff the previous view against the new one and fire the
+	 * matching DataViews-canonical event names so consumer analytics can
+	 * track which dimension actually changed (search vs filter vs page
+	 * vs layout). The generic `view_change` event always fires last so
+	 * consumers can choose between the granular events and an "anything
+	 * changed" hook.
 	 *
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#onchangeview-function
 	 */
-	const onChangeView = useCallback( ( newView: View ) => {
-		setView( newView );
-	}, [] );
+	const previousViewRef = useRef< View >( view );
+	const onChangeView = useCallback(
+		( newView: View ) => {
+			if ( onTrackEvent ) {
+				const previous = previousViewRef.current;
+				if ( previous.search !== newView.search ) {
+					onTrackEvent( 'search', { has_query: !! newView.search } );
+				}
+				if ( previous.type !== newView.type ) {
+					onTrackEvent( 'layout_changed', { layout: newView.type } );
+				}
+				if ( previous.page !== newView.page ) {
+					onTrackEvent( 'page_change', { page: newView.page } );
+				}
+				if (
+					JSON.stringify( previous.filters ?? [] ) !== JSON.stringify( newView.filters ?? [] )
+				) {
+					onTrackEvent( 'filter_change' );
+				}
+				onTrackEvent( 'view_change' );
+			}
+			previousViewRef.current = newView;
+			setView( newView );
+		},
+		[ onTrackEvent ]
+	);
 
 	/**
 	 * DataView getItemId function - returns the unique ID for each record in the dataset.
@@ -509,23 +663,28 @@ export default function ThreatsDataViews( {
 	const getItemId = useCallback( ( item: Threat ) => item.id.toString(), [] );
 
 	return (
-		<DataViews
-			actions={ actions }
-			data={ processedData }
-			defaultLayouts={ defaultLayouts }
-			fields={ fields }
-			getItemId={ getItemId }
-			onChangeSelection={ onChangeSelection }
-			onChangeView={ onChangeView }
-			paginationInfo={ paginationInfo }
-			view={ view }
-			header={
-				<ThreatsStatusToggleGroupControl
-					data={ data }
-					view={ view }
-					onChangeView={ onChangeView }
-				/>
-			}
-		/>
+		<div className={ styles[ 'threats-data-views' ] }>
+			<DataViews
+				actions={ actions }
+				data={ processedData }
+				defaultLayouts={ defaultLayouts }
+				fields={ fields }
+				getItemId={ getItemId }
+				onChangeSelection={ onChangeSelection }
+				onChangeView={ onChangeView }
+				paginationInfo={ paginationInfo }
+				view={ view }
+				empty={ empty }
+				header={
+					showStatusFilter ? (
+						<ThreatsStatusToggleGroupControl
+							data={ data }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+					) : undefined
+				}
+			/>
+		</div>
 	);
 }

package/src/components/threats-data-views/styles.module.scss

@@ -1,6 +1,29 @@
 @import "@wordpress/theme/design-tokens.css";
 @import "@wordpress/dataviews/build-style/style.css";
 
+// Wrapper carries the flex chain forward to `<DataViews>` (whose root
+// `.dataviews-wrapper` is `height: 100%`) and scopes the empty-state
+// override below — `:global(.dataviews-no-results)` only matches inside
+// this wrapper because the outer class is module-hashed.
+.threats-data-views {
+	display: flex;
+	flex: 1 1 auto;
+	flex-direction: column;
+	min-block-size: 0;
+
+	// DataViews ships `.dataviews-no-results` with `flex-grow: 1`, so it
+	// fills its parent — but only if that parent has a defined height.
+	// Anchor the empty body to the viewport (minus admin bar + page
+	// header + tab row + footer + a small breathing margin) so the empty
+	// state always reads as full-height and the surrounding page chain
+	// gets pushed to the bottom of the viewport even when DataViews is
+	// the only thing in the panel. Min-height (not height) so a populated
+	// table still scrolls naturally.
+	:global(.dataviews-no-results) {
+		min-block-size: calc(100vh - 320px);
+	}
+}
+
 .threat__title {
 	color: var(--jp-gray-80);
 	font-weight: 510;

package/build/components/index.d.ts

@@ -1,4 +0,0 @@
-export { default as ThreatFixerButton } from './threat-fixer-button/index.tsx';
-export { default as ThreatModal } from './threat-modal/index.tsx';
-export { default as ThreatSeverityBadge } from './threat-severity-badge/index.tsx';
-export { default as ThreatsDataViews } from './threats-data-views/index.tsx';

package/build/components/index.js

@@ -1,4 +0,0 @@
-export { default as ThreatFixerButton } from './threat-fixer-button/index.js';
-export { default as ThreatModal } from './threat-modal/index.js';
-export { default as ThreatSeverityBadge } from './threat-severity-badge/index.js';
-export { default as ThreatsDataViews } from './threats-data-views/index.js';

package/build/components/threat-fixer-button/index.d.ts

@@ -1,16 +0,0 @@
-import { type Threat } from '@automattic/jetpack-scan';
-/**
- * Threat Fixer Button component.
- *
- * @param {object}   props           - Component props.
- * @param {object}   props.threat    - The threat.
- * @param {Function} props.onClick   - The onClick function.
- * @param {string}   props.className - The className.
- *
- * @return {JSX.Element} The component.
- */
-export default function ThreatFixerButton({ threat, className, onClick }: {
-    threat: Threat;
-    onClick: (items: Threat[]) => void;
-    className?: string;
-}): JSX.Element;