@automattic/jetpack-components 0.58.0 → 0.59.0

package/components/threats-data-views/threats-status-toggle-group-control.tsx

@@ -0,0 +1,160 @@
+import { type Threat, type ThreatStatus } 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
+} from '@wordpress/components';
+import { type View } from '@wordpress/dataviews';
+import { useMemo, useCallback } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+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.
+ * @return {JSX.Element|null} The component or null.
+ */
+export default function ThreatsStatusToggleGroupControl( {
+	data,
+	view,
+	onChangeView,
+}: {
+	data: Threat[];
+	view: View;
+	onChangeView: ( newView: View ) => void;
+} ): JSX.Element {
+	/**
+	 * Compute values from the provided threats data.
+	 *
+	 * @member {number} activeThreatsCount   - Count of active threats.
+	 * @member {number} historicThreatsCount - Count of historic threats.
+	 */
+	const {
+		activeThreatsCount,
+		historicThreatsCount,
+	}: {
+		activeThreatsCount: number;
+		historicThreatsCount: number;
+	} = useMemo( () => {
+		return data.reduce(
+			( acc, threat ) => {
+				if ( threat.status ) {
+					if ( threat.status === 'current' ) {
+						acc.activeThreatsCount++;
+					} else {
+						acc.historicThreatsCount++;
+					}
+				}
+				return acc;
+			},
+			{
+				activeThreatsCount: 0,
+				historicThreatsCount: 0,
+			}
+		);
+	}, [ data ] );
+
+	/**
+	 * Callback function to handle the status change filter.
+	 *
+	 * @param {string} newStatus - The new status filter value.
+	 */
+	const onStatusFilterChange = useCallback(
+		( newStatus: string ) => {
+			const updatedFilters = view.filters.filter( filter => filter.field !== 'status' );
+
+			if ( newStatus === 'active' ) {
+				updatedFilters.push( {
+					field: 'status',
+					operator: 'isAny',
+					value: [ 'current' ],
+				} );
+			} else if ( newStatus === 'historic' ) {
+				updatedFilters.push( {
+					field: 'status',
+					operator: 'isAny',
+					value: [ 'fixed', 'ignored' ],
+				} );
+			}
+
+			onChangeView( {
+				...view,
+				filters: updatedFilters,
+			} );
+		},
+		[ 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 (
+			<ToggleGroupControl
+				className={ styles[ 'toggle-group-control' ] }
+				value={ selectedValue }
+				onChange={ onStatusFilterChange }
+				__nextHasNoMarginBottom
+			>
+				<ToggleGroupControlOption
+					value="active"
+					label={
+						<span className={ styles[ 'toggle-group-control__option' ] }>
+							{ sprintf(
+								/* translators: %d: number of active threats */ __(
+									'Active threats (%d)',
+									'jetpack'
+								),
+								activeThreatsCount
+							) }
+						</span>
+					}
+				/>
+				<ToggleGroupControlOption
+					value="historic"
+					label={
+						<span className={ styles[ 'toggle-group-control__option' ] }>
+							{ sprintf(
+								/* translators: %d: number of historic threats */
+								__( 'History (%d)', 'jetpack' ),
+								historicThreatsCount
+							) }
+						</span>
+					}
+				/>
+			</ToggleGroupControl>
+		);
+	} catch ( error ) {
+		return null;
+	}
+}

package/index.ts

@@ -44,7 +44,9 @@ export { default as CopyToClipboard } from './components/copy-to-clipboard';
 export * from './components/icons';
 export { default as SplitButton } from './components/split-button';
 export { default as ThemeProvider } from './components/theme-provider';
+export { default as ThreatFixerButton } from './components/threat-fixer-button';
 export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
+export { default as ThreatsDataViews } from './components/threats-data-views';
 export { default as Text, H2, H3, Title } from './components/text';
 export { default as ToggleControl } from './components/toggle-control';
 export { default as numberFormat } from './components/number-format';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.58.0",
+	"version": "0.59.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,29 +15,31 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.42",
+		"@automattic/jetpack-boost-score-api": "^0.1.45",
+		"@automattic/jetpack-scan": "^0.1.0",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "6.9.0",
-		"@wordpress/components": "28.9.0",
-		"@wordpress/compose": "7.9.0",
-		"@wordpress/data": "10.9.0",
-		"@wordpress/date": "5.9.0",
-		"@wordpress/element": "6.9.0",
-		"@wordpress/i18n": "5.9.0",
-		"@wordpress/icons": "10.9.0",
-		"@wordpress/notices": "5.9.0",
+		"@wordpress/browserslist-config": "6.11.0",
+		"@wordpress/components": "28.11.0",
+		"@wordpress/compose": "7.11.0",
+		"@wordpress/data": "10.11.0",
+		"@wordpress/dataviews": "4.7.0",
+		"@wordpress/date": "5.11.0",
+		"@wordpress/element": "6.11.0",
+		"@wordpress/i18n": "5.11.0",
+		"@wordpress/icons": "10.11.0",
+		"@wordpress/notices": "5.11.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.1.9",
+		"social-logos": "^3.1.11",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.34",
-		"@babel/core": "7.24.7",
-		"@babel/preset-react": "7.24.7",
+		"@automattic/jetpack-base-styles": "^0.6.35",
+		"@babel/core": "7.26.0",
+		"@babel/preset-react": "7.25.9",
 		"@jest/globals": "29.4.3",
 		"@storybook/addon-actions": "8.3.5",
 		"@storybook/blocks": "8.3.5",
@@ -47,8 +49,8 @@
 		"@testing-library/user-event": "14.5.2",
 		"@types/jest": "29.5.12",
 		"@types/qrcode.react": "1.0.5",
-		"@types/react": "18.3.3",
-		"@types/react-dom": "18.3.0",
+		"@types/react": "18.3.12",
+		"@types/react-dom": "18.3.1",
 		"@types/react-slider": "1.3.6",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
@@ -80,6 +82,7 @@
 	"scripts": {
 		"build": "pnpm run compile-ts",
 		"compile-ts": "tsc --pretty",
-		"test": "NODE_OPTIONS=--experimental-vm-modules jest"
+		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
+		"test-coverage": "pnpm run test --coverage"
 	}
 }