@automattic/jetpack-components 0.63.0 → 0.64.1

package/components/terms-of-service/index.tsx

@@ -28,7 +28,7 @@ const MultipleButtonsText = ( { multipleButtonsLabels } ) => {
 				/* translators: %1$s is button label 1 and %2$s is button label 2 */
 				__(
 					'By clicking <strong>%1$s</strong> or <strong>%2$s</strong>, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.',
-					'jetpack'
+					'jetpack-components'
 				),
 				multipleButtonsLabels[ 0 ],
 				multipleButtonsLabels[ 1 ]
@@ -44,7 +44,7 @@ const MultipleButtonsText = ( { multipleButtonsLabels } ) => {
 	return createInterpolateElement(
 		__(
 			'By clicking the buttons above, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.',
-			'jetpack'
+			'jetpack-components'
 		),
 		{
 			tosLink: <Link slug="wpcom-tos" />,
@@ -59,7 +59,7 @@ const SingleButtonText = ( { agreeButtonLabel } ) =>
 			/* translators: %s is a button label */
 			__(
 				'By clicking <strong>%s</strong>, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.',
-				'jetpack'
+				'jetpack-components'
 			),
 			agreeButtonLabel
 		),

package/components/threat-fixer-button/index.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@automattic/jetpack-components';
 import {
 	type Threat,
 	getFixerState,
@@ -8,6 +7,7 @@ import {
 import { Tooltip } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@automattic/jetpack-components';
 import styles from './styles.module.scss';
 
 /**
@@ -39,15 +39,15 @@ export default function ThreatFixerButton( {
 		}
 
 		if ( fixerState.error ) {
-			return __( 'An error occurred auto-fixing this threat.', 'jetpack' );
+			return __( 'An error occurred auto-fixing this threat.', 'jetpack-components' );
 		}
 
 		if ( fixerState.stale ) {
-			return __( 'The auto-fixer is taking longer than expected.', 'jetpack' );
+			return __( 'The auto-fixer is taking longer than expected.', 'jetpack-components' );
 		}
 
 		if ( fixerState.inProgress ) {
-			return __( 'An auto-fixer is in progress.', 'jetpack' );
+			return __( 'An auto-fixer is in progress.', 'jetpack-components' );
 		}
 
 		return getFixerDescription( threat );
@@ -59,7 +59,7 @@ export default function ThreatFixerButton( {
 		}
 
 		if ( fixerState.error ) {
-			return __( 'Error', 'jetpack' );
+			return __( 'Error', 'jetpack-components' );
 		}
 
 		return getFixerAction( threat );

package/components/threat-modal/fixer-state-notice.tsx

@@ -23,10 +23,10 @@ const FixerStateNotice = ( {
 		if ( fixerState.error ) {
 			return {
 				status: 'error' as const,
-				title: __( 'An error occurred auto-fixing this threat', 'jetpack' ),
+				title: __( 'An error occurred auto-fixing this threat', 'jetpack-components' ),
 				content: __(
 					'Jetpack encountered a filesystem error while attempting to auto-fix this threat. Please try again later or contact support.',
-					'jetpack'
+					'jetpack-components'
 				),
 			};
 		}
@@ -34,10 +34,10 @@ const FixerStateNotice = ( {
 		if ( fixerState.stale ) {
 			return {
 				status: 'error' as const,
-				title: __( 'The auto-fixer is taking longer than expected', 'jetpack' ),
+				title: __( 'The auto-fixer is taking longer than expected', 'jetpack-components' ),
 				content: __(
 					'Jetpack has been attempting to auto-fix this threat for too long, and something may have gone wrong. Please try again later or contact support.',
-					'jetpack'
+					'jetpack-components'
 				),
 			};
 		}
@@ -45,8 +45,8 @@ const FixerStateNotice = ( {
 		if ( fixerState.inProgress ) {
 			return {
 				status: 'success' as const,
-				title: __( 'An auto-fixer is in progress', 'jetpack' ),
-				content: __( 'Please wait while Jetpack auto-fixes the threat.', 'jetpack' ),
+				title: __( 'An auto-fixer is in progress', 'jetpack-components' ),
+				content: __( 'Please wait while Jetpack auto-fixes the threat.', 'jetpack-components' ),
 			};
 		}
 

package/components/threat-modal/threat-actions.tsx

@@ -1,7 +1,7 @@
-import { Button } from '@automattic/jetpack-components';
 import { getFixerState, getDetailedFixerAction } from '@automattic/jetpack-scan';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useContext, useMemo } from 'react';
+import { Button } from '@automattic/jetpack-components';
 import FixerStateNotice from './fixer-state-notice';
 import styles from './styles.module.scss';
 import { ThreatModalContext } from '.';
@@ -59,7 +59,7 @@ const ThreatActions = (): JSX.Element => {
 						variant="secondary"
 						onClick={ onUnignoreClick }
 					>
-						{ __( 'Un-ignore threat', 'jetpack' ) }
+						{ __( 'Un-ignore threat', 'jetpack-components' ) }
 					</Button>
 				) }
 				{ threat.status === 'current' && (
@@ -70,7 +70,7 @@ const ThreatActions = (): JSX.Element => {
 							onClick={ onIgnoreClick }
 							disabled={ disabled || ( fixerState.inProgress && ! fixerState.stale ) }
 						>
-							{ __( 'Ignore threat', 'jetpack' ) }
+							{ __( 'Ignore threat', 'jetpack-components' ) }
 						</Button>
 						{ threat.fixable && (
 							<Button
@@ -79,7 +79,7 @@ const ThreatActions = (): JSX.Element => {
 								onClick={ onFixClick }
 							>
 								{ fixerState.error || fixerState.stale
-									? __( 'Retry fixer', 'jetpack' )
+									? __( 'Retry fixer', 'jetpack-components' )
 									: detailedFixerAction }
 							</Button>
 						) }

package/components/threat-modal/threat-fix-confirmation.tsx

@@ -24,25 +24,25 @@ const ThreatFixConfirmation = () => {
 					title={ 'Additional connections needed' }
 					content={ __(
 						'A user connection and server credentials provide Jetpack the access necessary to ignore and auto-fix threats on your site.',
-						'jetpack'
+						'jetpack-components'
 					) }
 				/>
 			) }
 			{ ! siteCredentialsNeeded && userConnectionNeeded && (
 				<ThreatNotice
-					title={ __( 'User connection needed', 'jetpack' ) }
+					title={ __( 'User connection needed', 'jetpack-components' ) }
 					content={ __(
 						'A user connection provides Jetpack the access necessary to ignore and auto-fix threats on your site.',
-						'jetpack'
+						'jetpack-components'
 					) }
 				/>
 			) }
 			{ siteCredentialsNeeded && ! userConnectionNeeded && (
 				<ThreatNotice
-					title={ __( 'Site credentials needed', 'jetpack' ) }
+					title={ __( 'Site credentials needed', 'jetpack-components' ) }
 					content={ __(
 						'Your server credentials allow Jetpack to access the server that’s powering your website. This information is securely saved and only used to ignore and auto-fix threats detected on your site.',
-						'jetpack'
+						'jetpack-components'
 					) }
 				/>
 			) }

package/components/threat-modal/threat-fix-details.tsx

@@ -16,12 +16,12 @@ const ThreatFixDetails = (): JSX.Element => {
 
 	const title = useMemo( () => {
 		if ( threat.status === 'fixed' ) {
-			return __( 'How did Jetpack fix it?', 'jetpack' );
+			return __( 'How did Jetpack fix it?', 'jetpack-components' );
 		}
 		if ( threat.status === 'current' && threat.fixable ) {
-			return __( 'How can Jetpack auto-fix this threat?', 'jetpack' );
+			return __( 'How can Jetpack auto-fix this threat?', 'jetpack-components' );
 		}
-		return __( 'How to fix it?', 'jetpack' );
+		return __( 'How to fix it?', 'jetpack-components' );
 	}, [ threat ] );
 
 	const fix = useMemo( () => {
@@ -30,7 +30,7 @@ const ThreatFixDetails = (): JSX.Element => {
 		if ( ! threat.fixable && threat.fixedIn ) {
 			return sprintf(
 				/* translators: Translates to Updates to version. %1$s: Name. %2$s: Fixed version */
-				__( 'Update %1$s to version %2$s.', 'jetpack' ),
+				__( 'Update %1$s to version %2$s.', 'jetpack-components' ),
 				threat.extension.name,
 				threat.fixedIn
 			);
@@ -50,8 +50,11 @@ const ThreatFixDetails = (): JSX.Element => {
 			<Text>{ fix }</Text>
 			{ handleUpgradeClick && (
 				<ContextualUpgradeTrigger
-					description={ __( 'Looking for advanced scan results and one-click fixes?', 'jetpack' ) }
-					cta={ __( 'Upgrade Jetpack now', 'jetpack' ) }
+					description={ __(
+						'Looking for advanced scan results and one-click fixes?',
+						'jetpack-components'
+					) }
+					cta={ __( 'Upgrade Jetpack now', 'jetpack-components' ) }
 					onClick={ handleUpgradeClick }
 				/>
 			) }

package/components/threat-modal/threat-notice.tsx

@@ -1,8 +1,8 @@
-import { Text, Button } from '@automattic/jetpack-components';
 import { Notice, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon, warning } from '@wordpress/icons';
 import { useContext } from 'react';
+import { Text, Button } from '@automattic/jetpack-components';
 import styles from './styles.module.scss';
 import { ThreatModalContext } from '.';
 
@@ -60,7 +60,7 @@ const ThreatNotice = ( {
 								isLoading={ userIsConnecting }
 								onClick={ handleConnectUser }
 							>
-								{ __( 'Connect your user account', 'jetpack' ) }
+								{ __( 'Connect your user account', 'jetpack-components' ) }
 							</Button>
 						) }
 						{ siteCredentialsNeeded && (
@@ -71,7 +71,7 @@ const ThreatNotice = ( {
 								href={ credentialsRedirectUrl }
 								isLoading={ credentialsIsFetching }
 							>
-								{ __( 'Enter server credentials', 'jetpack' ) }
+								{ __( 'Enter server credentials', 'jetpack-components' ) }
 							</Button>
 						) }
 					</div>

package/components/threat-modal/threat-summary.tsx

@@ -1,6 +1,6 @@
-import { Button } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import { useContext } from 'react';
+import { Button } from '@automattic/jetpack-components';
 import Text from '../text';
 import styles from './styles.module.scss';
 import { ThreatModalContext } from '.';
@@ -19,7 +19,7 @@ const ThreatSummary = (): JSX.Element => {
 			{ !! threat.source && (
 				<div>
 					<Button variant="link" isExternalLink={ true } weight="regular" href={ threat.source }>
-						{ __( 'See more technical details of this threat', 'jetpack' ) }
+						{ __( 'See more technical details of this threat', 'jetpack-components' ) }
 					</Button>
 				</div>
 			) }

package/components/threat-modal/threat-technical-details.tsx

@@ -1,7 +1,7 @@
-import { Text, Button } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import { chevronDown, chevronUp, Icon } from '@wordpress/icons';
 import { useState, useCallback, useContext } from 'react';
+import { Text, Button } from '@automattic/jetpack-components';
 import DiffViewer from '../diff-viewer';
 import MarkedLines from '../marked-lines';
 import styles from './styles.module.scss';
@@ -38,8 +38,8 @@ const ThreatTechnicalDetails = (): JSX.Element => {
 					<div className={ styles.section__toggle__content }>
 						<Text variant="title-small" mb={ 0 }>
 							{ open
-								? __( 'Hide the technical details', 'jetpack' )
-								: __( 'Show the technical details', 'jetpack' ) }
+								? __( 'Hide the technical details', 'jetpack-components' )
+								: __( 'Show the technical details', 'jetpack-components' ) }
 						</Text>
 						<Icon icon={ open ? chevronUp : chevronDown } size={ 24 } />
 					</div>
@@ -52,7 +52,7 @@ const ThreatTechnicalDetails = (): JSX.Element => {
 				>
 					{ threat.filename && (
 						<>
-							<Text>{ __( 'Threat found in file:', 'jetpack' ) }</Text>
+							<Text>{ __( 'Threat found in file:', 'jetpack-components' ) }</Text>
 							<pre className={ styles.filename }>{ threat.filename }</pre>
 						</>
 					) }

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

@@ -5,7 +5,7 @@ const ThreatSeverityBadge = ( { severity } ) => {
 	if ( severity >= 5 ) {
 		return (
 			<Badge variant="danger">
-				{ _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack' ) }
+				{ _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack-components' ) }
 			</Badge>
 		);
 	}
@@ -13,12 +13,14 @@ const ThreatSeverityBadge = ( { severity } ) => {
 	if ( severity >= 3 && severity < 5 ) {
 		return (
 			<Badge variant="warning">
-				{ _x( 'High', 'Severity label for issues rated between 3 and 5.', 'jetpack' ) }
+				{ _x( 'High', 'Severity label for issues rated between 3 and 5.', 'jetpack-components' ) }
 			</Badge>
 		);
 	}
 
-	return <Badge>{ _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack' ) }</Badge>;
+	return (
+		<Badge>{ _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack-components' ) }</Badge>
+	);
 };
 
 export default ThreatSeverityBadge;

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

@@ -9,16 +9,16 @@ import {
 
 export const THREAT_STATUSES: { value: string; label: string; variant?: 'success' | 'warning' }[] =
 	[
-		{ value: 'current', label: __( 'Active', 'jetpack' ), variant: 'warning' },
-		{ value: 'fixed', label: __( 'Fixed', 'jetpack' ), variant: 'success' },
-		{ value: 'ignored', label: __( 'Ignored', 'jetpack' ) },
+		{ value: 'current', label: __( 'Active', 'jetpack-components' ), variant: 'warning' },
+		{ value: 'fixed', label: __( 'Fixed', 'jetpack-components' ), variant: 'success' },
+		{ value: 'ignored', label: __( 'Ignored', 'jetpack-components' ) },
 	];
 
 export const THREAT_TYPES = [
-	{ value: 'plugin', label: __( 'Plugin', 'jetpack' ) },
-	{ value: 'theme', label: __( 'Theme', 'jetpack' ) },
-	{ value: 'core', label: __( 'WordPress', 'jetpack' ) },
-	{ value: 'file', label: __( 'File', 'jetpack' ) },
+	{ value: 'plugins', label: __( 'Plugin', 'jetpack-components' ) },
+	{ value: 'themes', label: __( 'Theme', 'jetpack-components' ) },
+	{ value: 'core', label: __( 'WordPress', 'jetpack-components' ) },
+	{ value: 'file', label: __( 'File', 'jetpack-components' ) },
 ];
 
 export const THREAT_ICONS = {

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

@@ -112,7 +112,7 @@ export default function ThreatsDataViews( {
 				combinedFields: [
 					{
 						id: THREAT_FIELD_THREAT,
-						label: __( 'Threat', 'jetpack' ),
+						label: __( 'Threat', 'jetpack-components' ),
 						children: [ THREAT_FIELD_TITLE, THREAT_FIELD_DESCRIPTION ],
 						direction: 'vertical',
 					},
@@ -168,12 +168,12 @@ export default function ThreatsDataViews( {
 				// Extensions (Themes and Plugins)
 				if ( threat.extension ) {
 					switch ( threat.extension.type ) {
-						case 'theme':
+						case 'themes':
 							if ( ! acc.themes.find( ( { value } ) => value === threat.extension.slug ) ) {
 								acc.themes.push( { value: threat.extension.slug, label: threat.extension.name } );
 							}
 							break;
-						case 'plugin':
+						case 'plugins':
 							if ( ! acc.plugins.find( ( { value } ) => value === threat.extension.slug ) ) {
 								acc.plugins.push( { value: threat.extension.slug, label: threat.extension.name } );
 							}
@@ -222,7 +222,7 @@ export default function ThreatsDataViews( {
 		const result: Field< Threat >[] = [
 			{
 				id: THREAT_FIELD_TITLE,
-				label: __( 'Title', 'jetpack' ),
+				label: __( 'Title', 'jetpack-components' ),
 				enableGlobalSearch: true,
 				enableHiding: false,
 				render: ( { item }: { item: Threat } ) => (
@@ -231,7 +231,7 @@ export default function ThreatsDataViews( {
 			},
 			{
 				id: THREAT_FIELD_DESCRIPTION,
-				label: __( 'Description', 'jetpack' ),
+				label: __( 'Description', 'jetpack-components' ),
 				enableGlobalSearch: true,
 				enableHiding: false,
 				render: ( { item }: { item: Threat } ) => (
@@ -240,7 +240,7 @@ export default function ThreatsDataViews( {
 			},
 			{
 				id: THREAT_FIELD_ICON,
-				label: __( 'Icon', 'jetpack' ),
+				label: __( 'Icon', 'jetpack-components' ),
 				enableHiding: false,
 				getValue( { item }: { item: Threat } ) {
 					return getThreatType( item );
@@ -255,7 +255,7 @@ export default function ThreatsDataViews( {
 			},
 			{
 				id: THREAT_FIELD_STATUS,
-				label: __( 'Status', 'jetpack' ),
+				label: __( 'Status', 'jetpack-components' ),
 				elements: THREAT_STATUSES,
 				getValue( { item }: { item: Threat } ) {
 					if ( ! item.status ) {
@@ -272,20 +272,31 @@ export default function ThreatsDataViews( {
 							return <Badge variant={ status?.variant }>{ status.label }</Badge>;
 						}
 					}
-					return <Badge variant="warning">{ __( 'Active', 'jetpack' ) }</Badge>;
+					return <Badge variant="warning">{ __( 'Active', 'jetpack-components' ) }</Badge>;
 				},
 			},
 			{
 				id: THREAT_FIELD_TYPE,
-				label: __( 'Type', 'jetpack' ),
+				label: __( 'Type', 'jetpack-components' ),
 				elements: THREAT_TYPES,
 				getValue( { item }: { item: Threat } ) {
-					return getThreatType( item ) ?? '';
+					switch ( getThreatType( item ) ) {
+						case 'core':
+							return __( 'WordPress', 'jetpack-components' );
+						case 'plugins':
+							return __( 'Plugin', 'jetpack-components' );
+						case 'themes':
+							return __( 'Theme', 'jetpack-components' );
+						case 'file':
+							return __( 'File', 'jetpack-components' );
+						default:
+							return __( 'Unknown', 'jetpack-components' );
+					}
 				},
 			},
 			{
 				id: THREAT_FIELD_EXTENSION,
-				label: __( 'Extension', 'jetpack' ),
+				label: __( 'Extension', 'jetpack-components' ),
 				enableGlobalSearch: true,
 				enableHiding: true,
 				getValue( { item }: { item: Threat } ) {
@@ -297,7 +308,7 @@ export default function ThreatsDataViews( {
 			},
 			{
 				id: THREAT_FIELD_PLUGIN,
-				label: __( 'Plugin', 'jetpack' ),
+				label: __( 'Plugin', 'jetpack-components' ),
 				enableGlobalSearch: true,
 				enableHiding: false,
 				elements: plugins,
@@ -307,7 +318,7 @@ export default function ThreatsDataViews( {
 			},
 			{
 				id: THREAT_FIELD_THEME,
-				label: __( 'Theme', 'jetpack' ),
+				label: __( 'Theme', 'jetpack-components' ),
 				enableGlobalSearch: true,
 				enableHiding: false,
 				elements: themes,
@@ -319,7 +330,7 @@ export default function ThreatsDataViews( {
 				? [
 						{
 							id: THREAT_FIELD_SEVERITY,
-							label: __( 'Severity', 'jetpack' ),
+							label: __( 'Severity', 'jetpack-components' ),
 							type: 'integer' as FieldType,
 							getValue( { item }: { item: Threat } ) {
 								return item.severity ?? 0;
@@ -334,7 +345,7 @@ export default function ThreatsDataViews( {
 				? [
 						{
 							id: THREAT_FIELD_SIGNATURE,
-							label: __( 'Signature', 'jetpack' ),
+							label: __( 'Signature', 'jetpack-components' ),
 							elements: signatures,
 							enableGlobalSearch: true,
 							getValue( { item }: { item: Threat } ) {
@@ -347,7 +358,7 @@ export default function ThreatsDataViews( {
 				? [
 						{
 							id: THREAT_FIELD_FIRST_DETECTED,
-							label: __( 'First Detected', 'jetpack' ),
+							label: __( 'First Detected', 'jetpack-components' ),
 							type: 'datetime' as FieldType,
 							getValue( { item }: { item: Threat } ) {
 								return item.firstDetected ? new Date( item.firstDetected ) : null;
@@ -366,7 +377,7 @@ export default function ThreatsDataViews( {
 				? [
 						{
 							id: THREAT_FIELD_FIXED_ON,
-							label: __( 'Fixed On', 'jetpack' ),
+							label: __( 'Fixed On', 'jetpack-components' ),
 							type: 'datetime' as FieldType,
 							getValue( { item }: { item: Threat } ) {
 								return item.fixedOn ? new Date( item.fixedOn ) : null;
@@ -385,16 +396,16 @@ export default function ThreatsDataViews( {
 				? [
 						{
 							id: THREAT_FIELD_AUTO_FIX,
-							label: __( 'Auto-fix', 'jetpack' ),
+							label: __( 'Auto-fix', 'jetpack-components' ),
 							enableHiding: false,
 							elements: [
 								{
 									value: 'yes',
-									label: __( 'Yes', 'jetpack' ),
+									label: __( 'Yes', 'jetpack-components' ),
 								},
 								{
 									value: 'no',
-									label: __( 'No', 'jetpack' ),
+									label: __( 'No', 'jetpack-components' ),
 								},
 							],
 							getValue( { item }: { item: Threat } ) {
@@ -426,9 +437,8 @@ export default function ThreatsDataViews( {
 		if ( dataFields.includes( 'fixable' ) ) {
 			result.push( {
 				id: THREAT_ACTION_FIX,
-				label: __( 'Auto-fix', 'jetpack' ),
+				label: __( 'Auto-fix', 'jetpack-components' ),
 				isPrimary: true,
-				supportsBulk: true,
 				callback: onFixThreats,
 				isEligible( item ) {
 					if ( ! onFixThreats ) {
@@ -445,7 +455,7 @@ export default function ThreatsDataViews( {
 		if ( dataFields.includes( 'status' ) ) {
 			result.push( {
 				id: THREAT_ACTION_IGNORE,
-				label: __( 'Ignore', 'jetpack' ),
+				label: __( 'Ignore', 'jetpack-components' ),
 				isPrimary: true,
 				isDestructive: true,
 				callback: onIgnoreThreats,
@@ -464,7 +474,7 @@ export default function ThreatsDataViews( {
 		if ( dataFields.includes( 'status' ) ) {
 			result.push( {
 				id: THREAT_ACTION_UNIGNORE,
-				label: __( 'Unignore', 'jetpack' ),
+				label: __( 'Unignore', 'jetpack-components' ),
 				isPrimary: true,
 				isDestructive: true,
 				callback: onUnignoreThreats,

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

@@ -35,7 +35,6 @@
 	}
 }
 
-.toggle-group-control__option {
-	white-space: nowrap;
-	padding: 0 12px;
+.toggle-group-control {
+	min-width: 300px;
 }

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

@@ -120,41 +120,39 @@ export default function ThreatsStatusToggleGroupControl( {
 
 	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(
+			<div>
+				<div className={ styles[ 'toggle-group-control' ] }>
+					<ToggleGroupControl
+						value={ selectedValue }
+						onChange={ onStatusFilterChange }
+						isBlock
+						hideLabelFromVision
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+					>
+						<ToggleGroupControlOption
+							value="active"
+							label={ sprintf(
 								/* translators: %d: number of active threats */ __(
 									'Active threats (%d)',
-									'jetpack'
+									'jetpack-components'
 								),
 								activeThreatsCount
 							) }
-						</span>
-					}
-				/>
-				<ToggleGroupControlOption
-					value="historic"
-					label={
-						<span className={ styles[ 'toggle-group-control__option' ] }>
-							{ sprintf(
+						/>
+						<ToggleGroupControlOption
+							value="historic"
+							label={ sprintf(
 								/* translators: %d: number of historic threats */
-								__( 'History (%d)', 'jetpack' ),
+								__( 'History (%d)', 'jetpack-components' ),
 								historicThreatsCount
 							) }
-						</span>
-					}
-				/>
-			</ToggleGroupControl>
+						/>
+					</ToggleGroupControl>
+				</div>
+			</div>
 		);
-	} catch ( error ) {
+	} catch {
 		return null;
 	}
 }

package/components/upsell-banner/index.tsx

@@ -1,7 +1,7 @@
-import { Button } from '@automattic/jetpack-components';
 import { Card, CardBody } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import React from 'react';
+import { Button } from '@automattic/jetpack-components';
 import { UpsellBannerProps } from './types';
 
 import './style.scss';

package/components/zendesk-chat/types.ts

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 
 declare global {
 	interface Window {
-		// eslint-disable-next-line @typescript-eslint/ban-types
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 		zE: Function;
 	}
 }