@automattic/jetpack-scan 0.5.9 → 1.0.0

package/build/utils/index.js

@@ -1,5 +1,5 @@
 import { __, sprintf } from '@wordpress/i18n';
-import { FIXER_IS_STALE_THRESHOLD } from '../constants/index.js';
+import { FIXER_IS_STALE_THRESHOLD } from "../constants/index.js";
 export const getThreatType = (threat) => {
     if (threat.signature === 'Vulnerable.WP.Core') {
         return 'core';
@@ -49,24 +49,23 @@ export const getFixerAction = (threat) => {
     }
 };
 export const getDetailedFixerAction = (threat) => {
-    var _a, _b, _c, _d;
     switch (threat.fixable && threat.fixable.fixer) {
         case 'delete':
             if (threat.filename) {
                 return __('Delete file', 'jetpack-scan');
             }
-            if (((_a = threat.extension) === null || _a === void 0 ? void 0 : _a.type) === 'plugins') {
+            if (threat.extension?.type === 'plugins') {
                 return __('Delete plugin from site', 'jetpack-scan');
             }
-            if (((_b = threat.extension) === null || _b === void 0 ? void 0 : _b.type) === 'themes') {
+            if (threat.extension?.type === 'themes') {
                 return __('Delete theme from site', 'jetpack-scan');
             }
             break;
         case 'update':
-            if (((_c = threat.extension) === null || _c === void 0 ? void 0 : _c.type) === 'plugins') {
+            if (threat.extension?.type === 'plugins') {
                 return __('Update plugin to newer version', 'jetpack-scan');
             }
-            if (((_d = threat.extension) === null || _d === void 0 ? void 0 : _d.type) === 'themes') {
+            if (threat.extension?.type === 'themes') {
                 return __('Update theme to newer version', 'jetpack-scan');
             }
             return __('Update', 'jetpack-scan');
@@ -84,7 +83,6 @@ export const getDetailedFixerAction = (threat) => {
     }
 };
 export const getFixerDescription = (threat) => {
-    var _a, _b;
     switch (threat.fixable && threat.fixable.fixer) {
         case 'delete':
             if (threat.filename) {
@@ -96,10 +94,10 @@ export const getFixerDescription = (threat) => {
                 }
                 return __('Delete the infected file.', 'jetpack-scan');
             }
-            if (((_a = threat.extension) === null || _a === void 0 ? void 0 : _a.type) === 'plugins') {
+            if (threat.extension?.type === 'plugins') {
                 return __('Delete the plugin directory to fix the threat.', 'jetpack-scan');
             }
-            if (((_b = threat.extension) === null || _b === void 0 ? void 0 : _b.type) === 'themes') {
+            if (threat.extension?.type === 'themes') {
                 return __('Delete the theme directory to fix the threat.', 'jetpack-scan');
             }
             break;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-scan",
-	"version": "0.5.9",
+	"version": "1.0.0",
 	"description": "A JS client for consuming Jetpack Scan services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/scan/#readme",
 	"bugs": {
@@ -18,23 +18,23 @@
 		"build": "pnpm run clean && pnpm run compile-ts",
 		"clean": "rm -rf build/",
 		"compile-ts": "tsc --pretty",
-		"test": "jest",
-		"test-coverage": "pnpm run test --coverage"
+		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
+		"test-coverage": "pnpm run test --coverage",
+		"typecheck": "tsc --noEmit"
 	},
 	"type": "module",
 	"devDependencies": {
-		"@jest/globals": "29.7.0",
 		"@storybook/addon-actions": "8.6.7",
 		"@storybook/blocks": "8.6.7",
 		"@storybook/react": "8.6.7",
 		"@testing-library/dom": "10.4.0",
 		"@testing-library/react": "16.2.0",
 		"@types/jest": "29.5.14",
-		"@types/react": "18.3.18",
+		"@types/react": "18.3.23",
 		"jest": "^29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"storybook": "8.6.7",
-		"typescript": "5.0.4"
+		"typescript": "5.8.2"
 	},
 	"exports": {
 		".": {
@@ -45,18 +45,23 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-api": "^0.20.0",
-		"@automattic/jetpack-base-styles": "^0.6.44",
-		"@wordpress/api-fetch": "7.19.0",
-		"@wordpress/element": "6.19.0",
-		"@wordpress/i18n": "5.19.0",
-		"@wordpress/url": "4.19.0",
-		"debug": "4.4.0",
+		"@automattic/jetpack-api": "^1.0.0",
+		"@automattic/jetpack-base-styles": "^1.0.0",
+		"@automattic/jetpack-components": "^1.0.0",
+		"@wordpress/api-fetch": "7.24.0",
+		"@wordpress/components": "29.10.0",
+		"@wordpress/dataviews": "4.17.0",
+		"@wordpress/date": "5.24.0",
+		"@wordpress/element": "6.24.0",
+		"@wordpress/i18n": "5.24.0",
+		"@wordpress/icons": "10.24.0",
+		"@wordpress/url": "4.24.0",
+		"debug": "4.4.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"peerDependencies": {
-		"@wordpress/i18n": "5.19.0",
+		"@wordpress/i18n": "5.24.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	}

package/src/components/index.js

@@ -0,0 +1,4 @@
+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/src/components/threat-fixer-button/index.tsx

@@ -0,0 +1,101 @@
+import { Button } from '@automattic/jetpack-components';
+import { Tooltip } from '@wordpress/components';
+import { useCallback, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	type Threat,
+	getFixerState,
+	getFixerAction,
+	getFixerDescription,
+} from '@automattic/jetpack-scan';
+import styles from './styles.module.scss';
+
+/**
+ * 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 {
+	const fixerState = useMemo( () => {
+		return getFixerState( threat.fixer );
+	}, [ threat.fixer ] );
+
+	const tooltipText = useMemo( () => {
+		if ( ! threat.fixable ) {
+			return null;
+		}
+
+		if ( fixerState.error ) {
+			return __( 'An error occurred auto-fixing this threat.', 'jetpack-scan' );
+		}
+
+		if ( fixerState.stale ) {
+			return __( 'The auto-fixer is taking longer than expected.', 'jetpack-scan' );
+		}
+
+		if ( fixerState.inProgress ) {
+			return __( 'An auto-fixer is in progress.', 'jetpack-scan' );
+		}
+
+		return getFixerDescription( threat );
+	}, [ threat, fixerState ] );
+
+	const buttonText = useMemo( () => {
+		if ( ! threat.fixable ) {
+			return null;
+		}
+
+		if ( fixerState.error ) {
+			return __( 'Error', 'jetpack-scan' );
+		}
+
+		return getFixerAction( threat );
+	}, [ threat, fixerState.error ] );
+
+	const handleClick = useCallback(
+		( event: React.MouseEvent ) => {
+			event.stopPropagation();
+			onClick( [ threat ] );
+		},
+		[ onClick, threat ]
+	);
+
+	if ( ! threat.fixable ) {
+		return null;
+	}
+
+	return (
+		<div>
+			<Tooltip className={ styles.tooltip } text={ tooltipText }>
+				<Button
+					size="small"
+					weight="regular"
+					variant="secondary"
+					onClick={ handleClick }
+					children={ buttonText }
+					className={ className }
+					isLoading={ fixerState.inProgress }
+					isDestructive={
+						( threat.fixable && threat.fixable.fixer === 'delete' ) ||
+						fixerState.error ||
+						fixerState.stale
+					}
+					style={ { minWidth: '72px' } }
+				/>
+			</Tooltip>
+		</div>
+	);
+}

package/src/components/threat-fixer-button/styles.module.scss

@@ -0,0 +1,16 @@
+.support-link {
+	color: inherit;
+
+	&:focus,
+	&:hover {
+		color: inherit;
+		box-shadow: none;
+	}
+}
+
+.tooltip {
+	margin-top: var( --spacing-base )	;
+	max-width: 240px;
+	border-radius: 4px;
+	text-align: left;
+}

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

@@ -0,0 +1,63 @@
+import { __ } from '@wordpress/i18n';
+import { useMemo } from 'react';
+import styles from './styles.module.scss';
+import ThreatNotice from './threat-notice.tsx';
+
+/**
+ * FixerStateNotice component
+ *
+ * @param {object}  props                       - The component props.
+ * @param {object}  props.fixerState            - The state of the fixer (inProgress, error, stale).
+ * @param {boolean} props.fixerState.inProgress - Whether the fixer is in progress.
+ * @param {boolean} props.fixerState.error      - Whether the fixer encountered an error.
+ * @param {boolean} props.fixerState.stale      - Whether the fixer is stale.
+ *
+ * @return {JSX.Element | null} The rendered fixer notice or null if no notice is available.
+ */
+const FixerStateNotice = ( {
+	fixerState,
+}: {
+	fixerState: { inProgress: boolean; error: boolean; stale: boolean };
+} ) => {
+	const { status, title, content } = useMemo( () => {
+		if ( fixerState.error ) {
+			return {
+				status: 'error' as const,
+				title: __( 'An error occurred auto-fixing this threat', 'jetpack-scan' ),
+				content: __(
+					'Jetpack encountered a filesystem error while attempting to auto-fix this threat. Please try again later or contact support.',
+					'jetpack-scan'
+				),
+			};
+		}
+
+		if ( fixerState.stale ) {
+			return {
+				status: 'error' as const,
+				title: __( 'The auto-fixer is taking longer than expected', 'jetpack-scan' ),
+				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-scan'
+				),
+			};
+		}
+
+		if ( fixerState.inProgress ) {
+			return {
+				status: 'success' as const,
+				title: __( 'An auto-fixer is in progress', 'jetpack-scan' ),
+				content: __( 'Please wait while Jetpack auto-fixes the threat.', 'jetpack-scan' ),
+			};
+		}
+
+		return {};
+	}, [ fixerState ] );
+
+	return title ? (
+		<div className={ styles[ 'fixer-notice' ] }>
+			<ThreatNotice status={ status } title={ title } content={ content } />
+		</div>
+	) : null;
+};
+
+export default FixerStateNotice;

package/src/components/threat-modal/index.tsx

@@ -0,0 +1,109 @@
+import { Text } from '@automattic/jetpack-components';
+import { Modal } from '@wordpress/components';
+import { createContext } from 'react';
+import { type Threat } from '@automattic/jetpack-scan';
+import ThreatSeverityBadge from '../threat-severity-badge/index.tsx';
+import styles from './styles.module.scss';
+import ThreatFixConfirmation from './threat-fix-confirmation.tsx';
+
+interface ThreatModalContextType {
+	closeModal: () => void;
+	threat: Threat;
+	handleUpgradeClick?: () => void;
+	userConnectionNeeded: boolean;
+	handleConnectUser: () => void;
+	userIsConnecting: boolean;
+	siteCredentialsNeeded: boolean;
+	credentialsIsFetching: boolean;
+	credentialsRedirectUrl: string;
+	handleFixThreatClick?: ( threats: Threat[] ) => void;
+	handleIgnoreThreatClick?: ( threats: Threat[] ) => void;
+	handleUnignoreThreatClick?: ( threats: Threat[] ) => void;
+}
+
+export const ThreatModalContext = createContext< ThreatModalContextType | null >( null );
+
+/**
+ * ThreatModal component
+ *
+ * @param {object}   props                           - The props.
+ * @param {object}   props.threat                    - The threat.
+ * @param {boolean}  props.isUserConnected           - Whether the user is connected.
+ * @param {boolean}  props.hasConnectedOwner         - Whether the user has a connected owner.
+ * @param {boolean}  props.userIsConnecting          - Whether the user is connecting.
+ * @param {Function} props.handleConnectUser         - The handleConnectUser function.
+ * @param {object}   props.credentials               - The credentials.
+ * @param {boolean}  props.credentialsIsFetching     - Whether the credentials are fetching.
+ * @param {string}   props.credentialsRedirectUrl    - The credentials redirect URL.
+ * @param {Function} props.handleUpgradeClick        - The handleUpgradeClick function.
+ * @param {Function} props.handleFixThreatClick      - The handleFixThreatClick function.
+ * @param {Function} props.handleIgnoreThreatClick   - The handleIgnoreThreatClick function.
+ * @param {Function} props.handleUnignoreThreatClick - The handleUnignoreThreatClick function.
+ *
+ * @return {JSX.Element} The threat modal.
+ */
+export default function ThreatModal( {
+	threat,
+	isUserConnected,
+	hasConnectedOwner,
+	userIsConnecting,
+	handleConnectUser,
+	credentials,
+	credentialsIsFetching,
+	credentialsRedirectUrl,
+	handleUpgradeClick,
+	handleFixThreatClick,
+	handleIgnoreThreatClick,
+	handleUnignoreThreatClick,
+	...modalProps
+}: {
+	threat: Threat;
+	isUserConnected: boolean;
+	hasConnectedOwner: boolean;
+	userIsConnecting: boolean;
+	handleConnectUser: () => void;
+	credentials: false | Record< string, unknown >[];
+	credentialsIsFetching: boolean;
+	credentialsRedirectUrl: string;
+	handleUpgradeClick?: () => void;
+	handleFixThreatClick?: ( threats: Threat[] ) => void;
+	handleIgnoreThreatClick?: ( threats: Threat[] ) => void;
+	handleUnignoreThreatClick?: ( threats: Threat[] ) => void;
+} & React.ComponentProps< typeof Modal > ): JSX.Element {
+	const userConnectionNeeded = ! isUserConnected || ! hasConnectedOwner;
+	const siteCredentialsNeeded = ! credentials || credentials.length === 0;
+
+	return (
+		<Modal
+			title={
+				<div className={ styles.title }>
+					<Text variant="title-small">{ threat.title }</Text>
+					{ !! threat.severity && <ThreatSeverityBadge severity={ threat.severity } /> }
+				</div>
+			}
+			size="large"
+			{ ...modalProps }
+		>
+			<div className={ styles[ 'threat-details' ] }>
+				<ThreatModalContext.Provider
+					value={ {
+						closeModal: modalProps.onRequestClose,
+						threat,
+						handleUpgradeClick,
+						userConnectionNeeded,
+						handleConnectUser,
+						userIsConnecting,
+						siteCredentialsNeeded,
+						credentialsIsFetching,
+						credentialsRedirectUrl,
+						handleFixThreatClick,
+						handleIgnoreThreatClick,
+						handleUnignoreThreatClick,
+					} }
+				>
+					<ThreatFixConfirmation />
+				</ThreatModalContext.Provider>
+			</div>
+		</Modal>
+	);
+}

package/src/components/threat-modal/styles.module.scss

@@ -0,0 +1,82 @@
+.threat-details {
+	display: flex;
+	flex-direction: column;
+	gap: calc( var( --spacing-base ) * 3 ); // 24px
+}
+
+.section {
+	display: flex;
+	flex-direction: column;
+	gap: calc( var( --spacing-base ) * 2 ); // 16px
+}
+
+.section .section__toggle {
+	text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
+
+	&__content {
+		display: flex;
+		gap: calc( var( --spacing-base ) / 2 ); // 4px
+		align-items: center;
+	}
+}
+
+.title {
+	display: flex;
+	align-items: center;
+	gap: calc( var( --spacing-base ) * 1.5 ); // 12px
+}
+
+.filename {
+	background-color: var( --jp-gray-0 );
+	padding: calc( var( --spacing-base ) * 3 ); // 24px
+	overflow-x: auto;
+}
+
+.modal-footer {
+	padding-top: calc( var( --spacing-base ) * 3 ); // 24px
+	border-top: 1px solid var( --jp-gray-5 );
+
+	.threat-actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: calc( var( --spacing-base ) * 2 ); // 16px;
+	}	
+}
+
+.fixer-notice {
+	padding-bottom: calc( var( --spacing-base ) * 3 ); // 24px
+}
+
+.notice {
+
+	&__title {
+		display: flex;
+		gap: calc( var( --spacing-base ) / 2 ); // 4px
+
+		p {
+			font-weight: 700;
+		}
+	}
+
+	&__actions {
+		display: flex;
+		gap: calc( var( --spacing-base ) * 2 ); // 16px;
+	}
+
+	&__action {
+		margin-top: calc( var( --spacing-base ) * 2 ); // 16px;
+	}
+}
+
+svg.spinner {
+	color: var( --jp-black );
+	height: 20px;
+	width: 20px;
+	margin-left: calc( var( --spacing-base ) / 2 ); // 4px;
+	margin-right: 6px;
+
+}

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

@@ -0,0 +1,93 @@
+import { Button } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useContext, useMemo } from 'react';
+import { getFixerState, getDetailedFixerAction } from '@automattic/jetpack-scan';
+import FixerStateNotice from './fixer-state-notice.tsx';
+import { ThreatModalContext } from './index.tsx';
+import styles from './styles.module.scss';
+
+/**
+ * ThreatActions component
+ *
+ * @return {JSX.Element | null} The rendered action buttons or null if no actions are available.
+ */
+const ThreatActions = (): JSX.Element => {
+	const {
+		closeModal,
+		threat,
+		handleFixThreatClick,
+		handleIgnoreThreatClick,
+		handleUnignoreThreatClick,
+		userConnectionNeeded,
+		siteCredentialsNeeded,
+	} = useContext( ThreatModalContext );
+	const disabled = userConnectionNeeded || siteCredentialsNeeded;
+
+	const fixerState = useMemo( () => {
+		return getFixerState( threat.fixer );
+	}, [ threat.fixer ] );
+
+	const detailedFixerAction = useMemo( () => getDetailedFixerAction( threat ), [ threat ] );
+
+	const onFixClick = useCallback( () => {
+		handleFixThreatClick?.( [ threat ] );
+		closeModal();
+	}, [ threat, handleFixThreatClick, closeModal ] );
+
+	const onIgnoreClick = useCallback( () => {
+		handleIgnoreThreatClick?.( [ threat ] );
+		closeModal();
+	}, [ threat, handleIgnoreThreatClick, closeModal ] );
+
+	const onUnignoreClick = useCallback( () => {
+		handleUnignoreThreatClick?.( [ threat ] );
+		closeModal();
+	}, [ threat, handleUnignoreThreatClick, closeModal ] );
+
+	if ( ! threat?.status || threat.status === 'fixed' ) {
+		return null;
+	}
+
+	return (
+		<div className={ styles[ 'modal-footer' ] }>
+			<FixerStateNotice fixerState={ fixerState } />
+			<div className={ styles[ 'threat-actions' ] }>
+				{ threat.status === 'ignored' && (
+					<Button
+						disabled={ disabled }
+						isDestructive={ true }
+						variant="secondary"
+						onClick={ onUnignoreClick }
+					>
+						{ __( 'Un-ignore threat', 'jetpack-scan' ) }
+					</Button>
+				) }
+				{ threat.status === 'current' && (
+					<>
+						<Button
+							isDestructive={ true }
+							variant="secondary"
+							onClick={ onIgnoreClick }
+							disabled={ disabled || ( fixerState.inProgress && ! fixerState.stale ) }
+						>
+							{ __( 'Ignore threat', 'jetpack-scan' ) }
+						</Button>
+						{ threat.fixable && (
+							<Button
+								isPrimary
+								disabled={ disabled || ( fixerState.inProgress && ! fixerState.stale ) }
+								onClick={ onFixClick }
+							>
+								{ fixerState.error || fixerState.stale
+									? __( 'Retry fixer', 'jetpack-scan' )
+									: detailedFixerAction }
+							</Button>
+						) }
+					</>
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default ThreatActions;

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

@@ -0,0 +1,54 @@
+import { __ } from '@wordpress/i18n';
+import { useContext } from 'react';
+import { ThreatModalContext } from './index.tsx';
+import ThreatActions from './threat-actions.tsx';
+import ThreatFixDetails from './threat-fix-details.tsx';
+import ThreatNotice from './threat-notice.tsx';
+import ThreatSummary from './threat-summary.tsx';
+import ThreatTechnicalDetails from './threat-technical-details.tsx';
+
+/**
+ * ThreatFixConfirmation component
+ *
+ * @return {JSX.Element} The rendered fix confirmation.
+ */
+const ThreatFixConfirmation = () => {
+	const { userConnectionNeeded, siteCredentialsNeeded } = useContext( ThreatModalContext );
+	return (
+		<>
+			<ThreatSummary />
+			<ThreatTechnicalDetails />
+			<ThreatFixDetails />
+			{ siteCredentialsNeeded && userConnectionNeeded && (
+				<ThreatNotice
+					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-scan'
+					) }
+				/>
+			) }
+			{ ! siteCredentialsNeeded && userConnectionNeeded && (
+				<ThreatNotice
+					title={ __( 'User connection needed', 'jetpack-scan' ) }
+					content={ __(
+						'A user connection provides Jetpack the access necessary to ignore and auto-fix threats on your site.',
+						'jetpack-scan'
+					) }
+				/>
+			) }
+			{ siteCredentialsNeeded && ! userConnectionNeeded && (
+				<ThreatNotice
+					title={ __( 'Site credentials needed', 'jetpack-scan' ) }
+					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-scan'
+					) }
+				/>
+			) }
+			<ThreatActions />
+		</>
+	);
+};
+
+export default ThreatFixConfirmation;