@automattic/jetpack-components 0.62.0 → 0.64.0

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

@@ -0,0 +1,30 @@
+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 '.';
+
+/**
+ * ThreatSummary component
+ *
+ * @return {JSX.Element} The rendered threat summary.
+ */
+const ThreatSummary = (): JSX.Element => {
+	const { threat } = useContext( ThreatModalContext );
+
+	return (
+		<div className={ styles.section }>
+			{ !! threat.description && <Text>{ threat.description }</Text> }
+			{ !! threat.source && (
+				<div>
+					<Button variant="link" isExternalLink={ true } weight="regular" href={ threat.source }>
+						{ __( 'See more technical details of this threat', 'jetpack-components' ) }
+					</Button>
+				</div>
+			) }
+		</div>
+	);
+};
+
+export default ThreatSummary;

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

@@ -1,34 +1,65 @@
-import { Threat } from '@automattic/jetpack-scan';
 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 Text from '../text';
 import styles from './styles.module.scss';
+import { ThreatModalContext } from '.';
 
 /**
  * ThreatTechnicalDetails component
  *
- * @param {object} props        - The component props.
- * @param {object} props.threat - The threat object containing technical details.
- *
  * @return {JSX.Element | null} The rendered technical details or null if no details are available.
  */
-const ThreatTechnicalDetails = ( { threat }: { threat: Threat } ): JSX.Element => {
+const ThreatTechnicalDetails = (): JSX.Element => {
+	const { threat } = useContext( ThreatModalContext );
+
+	const [ open, setOpen ] = useState( false );
+
+	const toggleOpen = useCallback( () => {
+		setOpen( ! open );
+	}, [ open ] );
+
 	if ( ! threat.filename && ! threat.context && ! threat.diff ) {
 		return null;
 	}
 
 	return (
 		<div className={ styles.section }>
-			<Text variant="title-small">{ __( 'The technical details', 'jetpack' ) }</Text>
-			{ threat.filename && (
-				<>
-					<Text>{ __( 'Threat found in file:', 'jetpack' ) }</Text>
-					<pre className={ styles.filename }>{ threat.filename }</pre>
-				</>
+			<div className={ styles.section__title }>
+				<Button
+					variant="link"
+					className={ styles.section__toggle }
+					aria-expanded={ open }
+					aria-controls={ `threat-details-${ threat.id }` }
+					onClick={ toggleOpen }
+				>
+					<div className={ styles.section__toggle__content }>
+						<Text variant="title-small" mb={ 0 }>
+							{ open
+								? __( 'Hide the technical details', 'jetpack-components' )
+								: __( 'Show the technical details', 'jetpack-components' ) }
+						</Text>
+						<Icon icon={ open ? chevronUp : chevronDown } size={ 24 } />
+					</div>
+				</Button>
+			</div>
+			{ open && (
+				<div
+					className={ open ? styles.section__open : styles.section__closed }
+					id={ `threat-details-${ threat.id }` }
+				>
+					{ threat.filename && (
+						<>
+							<Text>{ __( 'Threat found in file:', 'jetpack-components' ) }</Text>
+							<pre className={ styles.filename }>{ threat.filename }</pre>
+						</>
+					) }
+					{ threat.context && <MarkedLines context={ threat.context } /> }
+					{ threat.diff && <DiffViewer diff={ threat.diff } /> }
+				</div>
 			) }
-			{ threat.context && <MarkedLines context={ threat.context } /> }
-			{ threat.diff && <DiffViewer diff={ threat.diff } /> }
 		</div>
 	);
 };

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: 'plugin', label: __( 'Plugin', 'jetpack-components' ) },
+	{ value: 'theme', 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',
 					},
@@ -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,12 +272,12 @@ 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 ) ?? '';
@@ -285,7 +285,7 @@ export default function ThreatsDataViews( {
 			},
 			{
 				id: THREAT_FIELD_EXTENSION,
-				label: __( 'Extension', 'jetpack' ),
+				label: __( 'Extension', 'jetpack-components' ),
 				enableGlobalSearch: true,
 				enableHiding: true,
 				getValue( { item }: { item: Threat } ) {
@@ -297,7 +297,7 @@ export default function ThreatsDataViews( {
 			},
 			{
 				id: THREAT_FIELD_PLUGIN,
-				label: __( 'Plugin', 'jetpack' ),
+				label: __( 'Plugin', 'jetpack-components' ),
 				enableGlobalSearch: true,
 				enableHiding: false,
 				elements: plugins,
@@ -307,7 +307,7 @@ export default function ThreatsDataViews( {
 			},
 			{
 				id: THREAT_FIELD_THEME,
-				label: __( 'Theme', 'jetpack' ),
+				label: __( 'Theme', 'jetpack-components' ),
 				enableGlobalSearch: true,
 				enableHiding: false,
 				elements: themes,
@@ -319,7 +319,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 +334,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 +347,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 +366,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 +385,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,7 +426,7 @@ 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,
@@ -445,7 +445,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 +464,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;
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.62.0",
+	"version": "0.64.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,19 +15,19 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.47",
-		"@automattic/jetpack-scan": "^0.3.0",
+		"@automattic/jetpack-boost-score-api": "^0.1.48",
+		"@automattic/jetpack-scan": "^0.5.0",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "6.12.0",
-		"@wordpress/components": "28.12.0",
-		"@wordpress/compose": "7.12.0",
-		"@wordpress/data": "10.12.0",
-		"@wordpress/dataviews": "4.8.0",
-		"@wordpress/date": "5.12.0",
-		"@wordpress/element": "6.12.0",
-		"@wordpress/i18n": "5.12.0",
-		"@wordpress/icons": "10.12.0",
-		"@wordpress/notices": "5.12.0",
+		"@wordpress/browserslist-config": "6.13.0",
+		"@wordpress/components": "28.13.0",
+		"@wordpress/compose": "7.13.0",
+		"@wordpress/data": "10.13.0",
+		"@wordpress/dataviews": "4.9.0",
+		"@wordpress/date": "5.13.0",
+		"@wordpress/element": "6.13.0",
+		"@wordpress/i18n": "5.13.0",
+		"@wordpress/icons": "10.13.0",
+		"@wordpress/notices": "5.13.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
@@ -37,7 +37,7 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.37",
+		"@automattic/jetpack-base-styles": "^0.6.38",
 		"@babel/core": "7.26.0",
 		"@babel/preset-react": "7.25.9",
 		"@jest/globals": "29.4.3",

package/components/threat-modal/credentials-gate.tsx

@@ -1,65 +0,0 @@
-import { Text, Button } from '@automattic/jetpack-components';
-import { Notice } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import React, { ReactElement } from 'react';
-import styles from './styles.module.scss';
-
-const CredentialsGate = ( {
-	siteCredentialsNeeded,
-	credentialsIsFetching,
-	credentialsRedirectUrl,
-	children,
-}: {
-	siteCredentialsNeeded: boolean;
-	credentialsIsFetching: boolean;
-	credentialsRedirectUrl: string;
-	children: ReactElement;
-} ): JSX.Element => {
-	if ( ! siteCredentialsNeeded ) {
-		return children;
-	}
-
-	return (
-		<>
-			<Notice
-				status="warning"
-				isDismissible={ false }
-				children={
-					<Text>
-						{ __(
-							'Before Jetpack can auto-fix threats on your site, it needs your server credentials.',
-							'jetpack'
-						) }
-					</Text>
-				}
-			/>
-
-			<Text>
-				{ __(
-					'Your server credentials allow Jetpack to access the server that’s powering your website. This information is securely saved and only used to perform fix threats detected on your site.',
-					'jetpack'
-				) }
-			</Text>
-
-			<Text>
-				{ __(
-					'Once you’ve entered server credentials, Jetpack will be fixing the selected threats.',
-					'jetpack'
-				) }
-			</Text>
-
-			<div className={ styles[ 'modal-actions' ] }>
-				<Button
-					isExternalLink={ true }
-					weight="regular"
-					href={ credentialsRedirectUrl }
-					isLoading={ credentialsIsFetching }
-				>
-					{ __( 'Enter server credentials', 'jetpack' ) }
-				</Button>
-			</div>
-		</>
-	);
-};
-
-export default CredentialsGate;

package/components/threat-modal/user-connection-gate.tsx

@@ -1,64 +0,0 @@
-import { Text, Button } from '@automattic/jetpack-components';
-import { Notice } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import React, { ReactElement } from 'react';
-import styles from './styles.module.scss';
-
-const UserConnectionGate = ( {
-	userConnectionNeeded,
-	userIsConnecting,
-	handleConnectUser,
-	children,
-}: {
-	userConnectionNeeded: boolean;
-	userIsConnecting: boolean;
-	handleConnectUser: () => void;
-	children: ReactElement;
-} ): JSX.Element => {
-	if ( ! userConnectionNeeded ) {
-		return children;
-	}
-	return (
-		<>
-			<Notice
-				status="warning"
-				isDismissible={ false }
-				children={
-					<Text>
-						{ __(
-							'Before Jetpack can ignore and auto-fix threats on your site, a user connection is needed.',
-							'jetpack'
-						) }
-					</Text>
-				}
-			/>
-
-			<Text>
-				{ __(
-					'A user connection provides Jetpack the access necessary to perform these tasks.',
-					'jetpack'
-				) }
-			</Text>
-
-			<Text>
-				{ __(
-					'Once you’ve secured a user connection, all Jetpack features will be available for use.',
-					'jetpack'
-				) }
-			</Text>
-
-			<div className={ styles[ 'modal-actions' ] }>
-				<Button
-					isExternalLink={ true }
-					weight="regular"
-					isLoading={ userIsConnecting }
-					onClick={ handleConnectUser }
-				>
-					{ __( 'Connect your user account', 'jetpack' ) }
-				</Button>
-			</div>
-		</>
-	);
-};
-
-export default UserConnectionGate;