@automattic/jetpack-scan 0.5.9 → 1.0.1

package/CHANGELOG.md

@@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.1] - 2025-06-05
+### Changed
+- Update package dependencies. [#43766]
+
+## [1.0.0] - 2025-06-03
+### Added
+- Add threat components. [#41654]
+
+### Changed
+- Adjust relative imports in TypeScript sources to use correct extensions after enabling TypeScript's new `rewriteRelativeImportExtensions` option. The built JS should be unaffected, so this is not a breaking change. [#42990]
+- Code: First pass of style coding standards. [#42734]
+- Update package dependencies. [#42762] [#42806] [#42809] [#43326] [#43578] [#43711] [#43718]
+
+### Fixed
+- Code: Update stylesheets to use WordPress font styles. [#42928]
+- Fixed TS type checking in the monorepo [#42817]
+
 ## [0.5.9] - 2025-03-18
 ### Changed
 - Update package dependencies. [#42509]
@@ -115,6 +132,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 - Updated dependencies. [#39754]
 
+[1.0.1]: https://github.com/Automattic/jetpack-scan/compare/v1.0.0...v1.0.1
+[1.0.0]: https://github.com/Automattic/jetpack-scan/compare/v0.5.9...v1.0.0
 [0.5.9]: https://github.com/Automattic/jetpack-scan/compare/v0.5.8...v0.5.9
 [0.5.8]: https://github.com/Automattic/jetpack-scan/compare/v0.5.7...v0.5.8
 [0.5.7]: https://github.com/Automattic/jetpack-scan/compare/v0.5.6...v0.5.7

package/build/components/index.d.ts

@@ -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/build/components/index.js

@@ -0,0 +1,4 @@
+export { default as ThreatFixerButton } from "./threat-fixer-button/index.js";
+export { default as ThreatModal } from "./threat-modal/index.js";
+export { default as ThreatSeverityBadge } from "./threat-severity-badge/index.js";
+export { default as ThreatsDataViews } from "./threats-data-views/index.js";

package/build/components/threat-fixer-button/index.d.ts

@@ -0,0 +1,16 @@
+import { type Threat } from '@automattic/jetpack-scan';
+/**
+ * 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;

package/build/components/threat-fixer-button/index.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@automattic/jetpack-components';
+import { Tooltip } from '@wordpress/components';
+import { useCallback, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { 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, }) {
+    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) => {
+        event.stopPropagation();
+        onClick([threat]);
+    }, [onClick, threat]);
+    if (!threat.fixable) {
+        return null;
+    }
+    return (_jsx("div", { children: _jsx(Tooltip, { className: styles.tooltip, text: tooltipText, children: _jsx(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' } }) }) }));
+}

package/build/components/threat-modal/fixer-state-notice.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+declare const FixerStateNotice: ({ fixerState, }: {
+    fixerState: {
+        inProgress: boolean;
+        error: boolean;
+        stale: boolean;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+export default FixerStateNotice;

package/build/components/threat-modal/fixer-state-notice.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { __ } from '@wordpress/i18n';
+import { useMemo } from 'react';
+import styles from './styles.module.scss';
+import ThreatNotice from "./threat-notice.js";
+/**
+ * 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, }) => {
+    const { status, title, content } = useMemo(() => {
+        if (fixerState.error) {
+            return {
+                status: 'error',
+                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',
+                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',
+                title: __('An auto-fixer is in progress', 'jetpack-scan'),
+                content: __('Please wait while Jetpack auto-fixes the threat.', 'jetpack-scan'),
+            };
+        }
+        return {};
+    }, [fixerState]);
+    return title ? (_jsx("div", { className: styles['fixer-notice'], children: _jsx(ThreatNotice, { status: status, title: title, content: content }) })) : null;
+};
+export default FixerStateNotice;

package/build/components/threat-modal/index.d.ts

@@ -0,0 +1,51 @@
+import { Modal } from '@wordpress/components';
+import { type Threat } from '@automattic/jetpack-scan';
+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 declare const ThreatModalContext: import("react").Context<ThreatModalContextType>;
+/**
+ * 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;
+export {};

package/build/components/threat-modal/index.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@automattic/jetpack-components';
+import { Modal } from '@wordpress/components';
+import { createContext } from 'react';
+import ThreatSeverityBadge from "../threat-severity-badge/index.js";
+import styles from './styles.module.scss';
+import ThreatFixConfirmation from "./threat-fix-confirmation.js";
+export const ThreatModalContext = createContext(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 }) {
+    const userConnectionNeeded = !isUserConnected || !hasConnectedOwner;
+    const siteCredentialsNeeded = !credentials || credentials.length === 0;
+    return (_jsx(Modal, { title: _jsxs("div", { className: styles.title, children: [_jsx(Text, { variant: "title-small", children: threat.title }), !!threat.severity && _jsx(ThreatSeverityBadge, { severity: threat.severity })] }), size: "large", ...modalProps, children: _jsx("div", { className: styles['threat-details'], children: _jsx(ThreatModalContext.Provider, { value: {
+                    closeModal: modalProps.onRequestClose,
+                    threat,
+                    handleUpgradeClick,
+                    userConnectionNeeded,
+                    handleConnectUser,
+                    userIsConnecting,
+                    siteCredentialsNeeded,
+                    credentialsIsFetching,
+                    credentialsRedirectUrl,
+                    handleFixThreatClick,
+                    handleIgnoreThreatClick,
+                    handleUnignoreThreatClick,
+                }, children: _jsx(ThreatFixConfirmation, {}) }) }) }));
+}

package/build/components/threat-modal/threat-actions.d.ts

@@ -0,0 +1,7 @@
+/**
+ * ThreatActions component
+ *
+ * @return {JSX.Element | null} The rendered action buttons or null if no actions are available.
+ */
+declare const ThreatActions: () => JSX.Element;
+export default ThreatActions;

package/build/components/threat-modal/threat-actions.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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.js";
+import { ThreatModalContext } from "./index.js";
+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 = () => {
+    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 (_jsxs("div", { className: styles['modal-footer'], children: [_jsx(FixerStateNotice, { fixerState: fixerState }), _jsxs("div", { className: styles['threat-actions'], children: [threat.status === 'ignored' && (_jsx(Button, { disabled: disabled, isDestructive: true, variant: "secondary", onClick: onUnignoreClick, children: __('Un-ignore threat', 'jetpack-scan') })), threat.status === 'current' && (_jsxs(_Fragment, { children: [_jsx(Button, { isDestructive: true, variant: "secondary", onClick: onIgnoreClick, disabled: disabled || (fixerState.inProgress && !fixerState.stale), children: __('Ignore threat', 'jetpack-scan') }), threat.fixable && (_jsx(Button, { isPrimary: true, disabled: disabled || (fixerState.inProgress && !fixerState.stale), onClick: onFixClick, children: fixerState.error || fixerState.stale
+                                    ? __('Retry fixer', 'jetpack-scan')
+                                    : detailedFixerAction }))] }))] })] }));
+};
+export default ThreatActions;

package/build/components/threat-modal/threat-fix-confirmation.d.ts

@@ -0,0 +1,7 @@
+/**
+ * ThreatFixConfirmation component
+ *
+ * @return {JSX.Element} The rendered fix confirmation.
+ */
+declare const ThreatFixConfirmation: () => import("react/jsx-runtime").JSX.Element;
+export default ThreatFixConfirmation;

package/build/components/threat-modal/threat-fix-confirmation.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { __ } from '@wordpress/i18n';
+import { useContext } from 'react';
+import { ThreatModalContext } from "./index.js";
+import ThreatActions from "./threat-actions.js";
+import ThreatFixDetails from "./threat-fix-details.js";
+import ThreatNotice from "./threat-notice.js";
+import ThreatSummary from "./threat-summary.js";
+import ThreatTechnicalDetails from "./threat-technical-details.js";
+/**
+ * ThreatFixConfirmation component
+ *
+ * @return {JSX.Element} The rendered fix confirmation.
+ */
+const ThreatFixConfirmation = () => {
+    const { userConnectionNeeded, siteCredentialsNeeded } = useContext(ThreatModalContext);
+    return (_jsxs(_Fragment, { children: [_jsx(ThreatSummary, {}), _jsx(ThreatTechnicalDetails, {}), _jsx(ThreatFixDetails, {}), siteCredentialsNeeded && userConnectionNeeded && (_jsx(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 && (_jsx(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 && (_jsx(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') })), _jsx(ThreatActions, {})] }));
+};
+export default ThreatFixConfirmation;

package/build/components/threat-modal/threat-fix-details.d.ts

@@ -0,0 +1,7 @@
+/**
+ * ThreatFixDetails component
+ *
+ * @return {JSX.Element | null} The rendered fix details or null if no fixable details are available.
+ */
+declare const ThreatFixDetails: () => JSX.Element;
+export default ThreatFixDetails;

package/build/components/threat-modal/threat-fix-details.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContextualUpgradeTrigger, Text } from '@automattic/jetpack-components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo, useContext } from 'react';
+import { getFixerDescription } from '@automattic/jetpack-scan';
+import { ThreatModalContext } from "./index.js";
+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 = () => {
+    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 (_jsxs("div", { className: styles.section, children: [_jsx(Text, { variant: "title-small", children: title }), _jsx(Text, { children: fix }), handleUpgradeClick && (_jsx(ContextualUpgradeTrigger, { description: __('Looking for advanced scan results and one-click fixes?', 'jetpack-scan'), cta: __('Upgrade Jetpack now', 'jetpack-scan'), onClick: handleUpgradeClick }))] }));
+};
+export default ThreatFixDetails;

package/build/components/threat-modal/threat-notice.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+declare const ThreatNotice: ({ status, title, content, }: {
+    status?: "warning" | "error" | "success" | undefined;
+    title: string;
+    content: string;
+}) => JSX.Element;
+export default ThreatNotice;

package/build/components/threat-modal/threat-notice.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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.js";
+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, }) => {
+    const { userConnectionNeeded, userIsConnecting, handleConnectUser, siteCredentialsNeeded, credentialsRedirectUrl, credentialsIsFetching, } = useContext(ThreatModalContext);
+    return (_jsx(Notice, { status: status, isDismissible: false, children: _jsxs("div", { className: styles.notice, children: [_jsxs("div", { className: styles.notice__title, children: [status === 'success' ? (_jsx(Spinner, { className: styles.spinner })) : (_jsx(Icon, { icon: warning, size: 30 })), _jsx(Text, { variant: "title-small", mb: 2, children: title })] }), _jsx(Text, { children: content }), _jsxs("div", { className: styles.notice__actions, children: [userConnectionNeeded && (_jsx(Button, { className: styles.notice__action, isExternalLink: true, weight: "regular", isLoading: userIsConnecting, onClick: handleConnectUser, children: __('Connect your user account', 'jetpack-scan') })), siteCredentialsNeeded && (_jsx(Button, { className: styles.notice__action, isExternalLink: true, weight: "regular", href: credentialsRedirectUrl, isLoading: credentialsIsFetching, children: __('Enter server credentials', 'jetpack-scan') }))] })] }) }));
+};
+export default ThreatNotice;

package/build/components/threat-modal/threat-summary.d.ts

@@ -0,0 +1,7 @@
+/**
+ * ThreatSummary component
+ *
+ * @return {JSX.Element} The rendered threat summary.
+ */
+declare const ThreatSummary: () => JSX.Element;
+export default ThreatSummary;

package/build/components/threat-modal/threat-summary.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Text } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import { useContext } from 'react';
+import { ThreatModalContext } from "./index.js";
+import styles from './styles.module.scss';
+/**
+ * ThreatSummary component
+ *
+ * @return {JSX.Element} The rendered threat summary.
+ */
+const ThreatSummary = () => {
+    const { threat } = useContext(ThreatModalContext);
+    return (_jsxs("div", { className: styles.section, children: [!!threat.description && _jsx(Text, { children: threat.description }), !!threat.source && (_jsx("div", { children: _jsx(Button, { variant: "link", isExternalLink: true, weight: "regular", href: threat.source, children: __('See more technical details of this threat', 'jetpack-scan') }) }))] }));
+};
+export default ThreatSummary;

package/build/components/threat-modal/threat-technical-details.d.ts

@@ -0,0 +1,7 @@
+/**
+ * ThreatTechnicalDetails component
+ *
+ * @return {JSX.Element | null} The rendered technical details or null if no details are available.
+ */
+declare const ThreatTechnicalDetails: () => JSX.Element;
+export default ThreatTechnicalDetails;

package/build/components/threat-modal/threat-technical-details.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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.js";
+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 = () => {
+    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 (_jsxs("div", { className: styles.section, children: [_jsx("div", { className: styles.section__title, children: _jsx(Button, { variant: "link", className: styles.section__toggle, "aria-expanded": open, "aria-controls": `threat-details-${threat.id}`, onClick: toggleOpen, children: _jsxs("div", { className: styles.section__toggle__content, children: [_jsx(Text, { variant: "title-small", mb: 0, children: open
+                                    ? __('Hide the technical details', 'jetpack-scan')
+                                    : __('Show the technical details', 'jetpack-scan') }), _jsx(Icon, { icon: open ? chevronUp : chevronDown, size: 24 })] }) }) }), open && (_jsxs("div", { className: open ? styles.section__open : styles.section__closed, id: `threat-details-${threat.id}`, children: [threat.filename && (_jsxs(_Fragment, { children: [_jsx(Text, { children: __('Threat found in file:', 'jetpack-scan') }), _jsx("pre", { className: styles.filename, children: threat.filename })] })), threat.context && _jsx(MarkedLines, { context: threat.context }), threat.diff && _jsx(DiffViewer, { diff: threat.diff })] }))] }));
+};
+export default ThreatTechnicalDetails;

package/build/components/threat-severity-badge/index.d.ts

@@ -0,0 +1,4 @@
+declare const ThreatSeverityBadge: ({ severity }: {
+    severity: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ThreatSeverityBadge;

package/build/components/threat-severity-badge/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from '@automattic/jetpack-components';
+import { _x } from '@wordpress/i18n';
+const ThreatSeverityBadge = ({ severity }) => {
+    if (severity >= 5) {
+        return (_jsx(Badge, { variant: "danger", children: _x('Critical', 'Severity label for issues rated 5 or higher.', 'jetpack-scan') }));
+    }
+    if (severity >= 3 && severity < 5) {
+        return (_jsx(Badge, { variant: "warning", children: _x('High', 'Severity label for issues rated between 3 and 5.', 'jetpack-scan') }));
+    }
+    return _jsx(Badge, { children: _x('Low', 'Severity label for issues rated below 3.', 'jetpack-scan') });
+};
+export default ThreatSeverityBadge;

package/build/components/threat-severity-badge/test/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/components/threat-severity-badge/test/index.test.js

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

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

@@ -0,0 +1,33 @@
+export declare const THREAT_STATUSES: {
+    value: string;
+    label: string;
+    variant?: 'success' | 'warning';
+}[];
+export declare const THREAT_TYPES: {
+    value: string;
+    label: string;
+}[];
+export declare const THREAT_ICONS: {
+    plugins: import("react").JSX.Element;
+    themes: import("react").JSX.Element;
+    core: import("react").JSX.Element;
+    file: import("react").JSX.Element;
+    default: import("react").JSX.Element;
+};
+export declare const THREAT_FIELD_THREAT = "threat";
+export declare const THREAT_FIELD_TITLE = "title";
+export declare const THREAT_FIELD_DESCRIPTION = "description";
+export declare const THREAT_FIELD_ICON = "icon";
+export declare const THREAT_FIELD_STATUS = "status";
+export declare const THREAT_FIELD_TYPE = "type";
+export declare const THREAT_FIELD_EXTENSION = "extension";
+export declare const THREAT_FIELD_PLUGIN = "plugin";
+export declare const THREAT_FIELD_THEME = "theme";
+export declare const THREAT_FIELD_SEVERITY = "severity";
+export declare const THREAT_FIELD_SIGNATURE = "signature";
+export declare const THREAT_FIELD_FIRST_DETECTED = "first-detected";
+export declare const THREAT_FIELD_FIXED_ON = "fixed-on";
+export declare const THREAT_FIELD_AUTO_FIX = "auto-fix";
+export declare const THREAT_ACTION_FIX = "fix";
+export declare const THREAT_ACTION_IGNORE = "ignore";
+export declare const THREAT_ACTION_UNIGNORE = "unignore";

package/build/components/threats-data-views/constants.js

@@ -0,0 +1,37 @@
+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: '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';