@automattic/jetpack-scan 0.5.8 → 1.0.0

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

@@ -0,0 +1,64 @@
+import { ContextualUpgradeTrigger, Text } from '@automattic/jetpack-components';
+import { __, sprintf } from '@wordpress/i18n';
+import React, { useMemo, useContext } from 'react';
+import { getFixerDescription } from '@automattic/jetpack-scan';
+import { ThreatModalContext } from './index.tsx';
+import styles from './styles.module.scss';
+
+/**
+ * ThreatFixDetails component
+ *
+ * @return {JSX.Element | null} The rendered fix details or null if no fixable details are available.
+ */
+const ThreatFixDetails = (): JSX.Element => {
+	const { threat, handleUpgradeClick } = useContext( ThreatModalContext );
+
+	const title = useMemo( () => {
+		if ( threat.status === 'fixed' ) {
+			return __( 'How did Jetpack fix it?', 'jetpack-scan' );
+		}
+		if ( threat.status === 'current' && threat.fixable ) {
+			return __( 'How can Jetpack auto-fix this threat?', 'jetpack-scan' );
+		}
+		return __( 'How to fix it?', 'jetpack-scan' );
+	}, [ threat ] );
+
+	const fix = useMemo( () => {
+		// The threat has a fixed version available, but no auto-fix is available.
+		// The user needs to update the extension to the fixed version.
+		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-scan' ),
+				threat.extension.name,
+				threat.fixedIn
+			);
+		}
+
+		// The threat has an auto-fix available.
+		return getFixerDescription( threat );
+	}, [ threat ] );
+
+	if ( ! threat.fixable && ! threat.fixedIn ) {
+		return null;
+	}
+
+	return (
+		<div className={ styles.section }>
+			<Text variant="title-small">{ title }</Text>
+			<Text>{ fix }</Text>
+			{ handleUpgradeClick && (
+				<ContextualUpgradeTrigger
+					description={ __(
+						'Looking for advanced scan results and one-click fixes?',
+						'jetpack-scan'
+					) }
+					cta={ __( 'Upgrade Jetpack now', 'jetpack-scan' ) }
+					onClick={ handleUpgradeClick }
+				/>
+			) }
+		</div>
+	);
+};
+
+export default ThreatFixDetails;

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

@@ -0,0 +1,84 @@
+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 { ThreatModalContext } from './index.tsx';
+import styles from './styles.module.scss';
+
+/**
+ * ThreatNotice component
+ *
+ * @param {object} props         - The component props.
+ * @param {string} props.status  - The status of the notice.
+ * @param {string} props.title   - The title of the notice.
+ * @param {string} props.content - The content of the notice.
+ *
+ * @return {JSX.Element} The rendered ThreatNotice component.
+ */
+const ThreatNotice = ( {
+	status = 'warning',
+	title,
+	content,
+}: {
+	status?: 'warning' | 'error' | 'success' | undefined;
+	title: string;
+	content: string;
+} ): JSX.Element => {
+	const {
+		userConnectionNeeded,
+		userIsConnecting,
+		handleConnectUser,
+		siteCredentialsNeeded,
+		credentialsRedirectUrl,
+		credentialsIsFetching,
+	} = useContext( ThreatModalContext );
+
+	return (
+		<Notice
+			status={ status }
+			isDismissible={ false }
+			children={
+				<div className={ styles.notice }>
+					<div className={ styles.notice__title }>
+						{ status === 'success' ? (
+							<Spinner className={ styles.spinner } />
+						) : (
+							<Icon icon={ warning } size={ 30 } />
+						) }
+						<Text variant="title-small" mb={ 2 }>
+							{ title }
+						</Text>
+					</div>
+					<Text>{ content }</Text>
+					<div className={ styles.notice__actions }>
+						{ userConnectionNeeded && (
+							<Button
+								className={ styles.notice__action }
+								isExternalLink={ true }
+								weight="regular"
+								isLoading={ userIsConnecting }
+								onClick={ handleConnectUser }
+							>
+								{ __( 'Connect your user account', 'jetpack-scan' ) }
+							</Button>
+						) }
+						{ siteCredentialsNeeded && (
+							<Button
+								className={ styles.notice__action }
+								isExternalLink={ true }
+								weight="regular"
+								href={ credentialsRedirectUrl }
+								isLoading={ credentialsIsFetching }
+							>
+								{ __( 'Enter server credentials', 'jetpack-scan' ) }
+							</Button>
+						) }
+					</div>
+				</div>
+			}
+		/>
+	);
+};
+
+export default ThreatNotice;

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

@@ -0,0 +1,29 @@
+import { Button, Text } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import { useContext } from 'react';
+import { ThreatModalContext } from './index.tsx';
+import styles from './styles.module.scss';
+
+/**
+ * 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-scan' ) }
+					</Button>
+				</div>
+			) }
+		</div>
+	);
+};
+
+export default ThreatSummary;

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

@@ -0,0 +1,65 @@
+import { Text, Button, DiffViewer, MarkedLines } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import { chevronDown, chevronUp, Icon } from '@wordpress/icons';
+import { useState, useCallback, useContext } from 'react';
+import { ThreatModalContext } from './index.tsx';
+import styles from './styles.module.scss';
+
+/**
+ * ThreatTechnicalDetails component
+ *
+ * @return {JSX.Element | null} The rendered technical details or null if no details are available.
+ */
+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 }>
+			<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-scan' )
+								: __( 'Show the technical details', 'jetpack-scan' ) }
+						</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-scan' ) }</Text>
+							<pre className={ styles.filename }>{ threat.filename }</pre>
+						</>
+					) }
+					{ threat.context && <MarkedLines context={ threat.context } /> }
+					{ threat.diff && <DiffViewer diff={ threat.diff } /> }
+				</div>
+			) }
+		</div>
+	);
+};
+
+export default ThreatTechnicalDetails;

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

@@ -0,0 +1,24 @@
+import { Badge } from '@automattic/jetpack-components';
+import { _x } from '@wordpress/i18n';
+
+const ThreatSeverityBadge = ( { severity } ) => {
+	if ( severity >= 5 ) {
+		return (
+			<Badge variant="danger">
+				{ _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack-scan' ) }
+			</Badge>
+		);
+	}
+
+	if ( severity >= 3 && severity < 5 ) {
+		return (
+			<Badge variant="warning">
+				{ _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>;
+};
+
+export default ThreatSeverityBadge;

package/src/components/threat-severity-badge/styles.module.scss

@@ -0,0 +1,27 @@
+.threat-severity-badge {
+	border-radius: 32px;
+	flex-shrink: 0;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 600;
+	line-height: 16px;
+	padding: calc( var( --spacing-base ) / 2 ); // 4px
+	position: relative;
+	text-align: center;
+	width: 60px;
+}
+
+.is-critical {
+	background: var( --jp-red-5 );
+	color: var( --jp-red-60 );
+}
+
+.is-high {
+	background: var( --jp-yellow-5 );
+	color: var( --jp-yellow-60 );
+}
+
+.is-low {
+	background: var( --jp-gray-0 );
+	color: var( --jp-gray-50 );
+}

package/src/components/threat-severity-badge/test/index.test.jsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import ThreatSeverityBadge from '../index.tsx';
+
+describe( 'ThreatSeverityBadge', () => {
+	it( 'renders the correct severity label', () => {
+		render( <ThreatSeverityBadge severity={ 4 } /> );
+		expect( screen.getByText( 'High' ) ).toBeInTheDocument();
+	} );
+} );

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

@@ -0,0 +1,49 @@
+import { __ } from '@wordpress/i18n';
+import {
+	code as fileIcon,
+	color as themeIcon,
+	plugins as pluginIcon,
+	shield as shieldIcon,
+	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_TYPES = [
+	{ value: 'plugins', label: __( 'Plugin', 'jetpack-scan' ) },
+	{ value: 'themes', label: __( 'Theme', 'jetpack-scan' ) },
+	{ value: 'core', label: __( 'WordPress', 'jetpack-scan' ) },
+	{ value: 'file', label: __( 'File', 'jetpack-scan' ) },
+];
+
+export const THREAT_ICONS = {
+	plugins: pluginIcon,
+	themes: themeIcon,
+	core: coreIcon,
+	file: fileIcon,
+	default: shieldIcon,
+};
+
+export const THREAT_FIELD_THREAT = 'threat';
+export const THREAT_FIELD_TITLE = 'title';
+export const THREAT_FIELD_DESCRIPTION = 'description';
+export const THREAT_FIELD_ICON = 'icon';
+export const THREAT_FIELD_STATUS = 'status';
+export const THREAT_FIELD_TYPE = 'type';
+export const THREAT_FIELD_EXTENSION = 'extension';
+export const THREAT_FIELD_PLUGIN = 'plugin';
+export const THREAT_FIELD_THEME = 'theme';
+export const THREAT_FIELD_SEVERITY = 'severity';
+export const THREAT_FIELD_SIGNATURE = 'signature';
+export const THREAT_FIELD_FIRST_DETECTED = 'first-detected';
+export const THREAT_FIELD_FIXED_ON = 'fixed-on';
+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';