From 3adfb3c976210bda1bcdc111bf99cabfbd0b1e43 Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Fri, 11 Oct 2024 14:50:30 -0600 Subject: [PATCH] Add ThreatsDataView changelog --- pnpm-lock.yaml | 31 +++ .../changelog/add-threats-data-view-component | 4 + .../components/threats-data-view/constants.ts | 17 ++ .../threats-data-view/fixer-status.tsx | 54 ++++ .../threats-data-view/icon-tooltip.tsx | 51 ++++ .../components/threats-data-view/index.tsx | 262 ++++++++++++++++++ .../stories/index.stories.tsx | 256 +++++++++++++++++ .../threats-data-view/styles.module.scss | 37 +++ .../threats-data-view/test/index.test.tsx | 36 +++ .../components/threats-data-view/types.d.ts | 76 +++++ .../components/threats-data-view/utils.ts | 98 +++++++ projects/js-packages/components/index.ts | 1 + projects/js-packages/components/package.json | 1 + .../scan/changelog/add-threat-types | 4 + .../js-packages/scan/src/types/threat.d.ts | 59 ++++ .../changelog/move-components-to-package | 5 + projects/plugins/protect/tsconfig.json | 2 +- 17 files changed, 993 insertions(+), 1 deletion(-) create mode 100644 projects/js-packages/components/changelog/add-threats-data-view-component create mode 100644 projects/js-packages/components/components/threats-data-view/constants.ts create mode 100644 projects/js-packages/components/components/threats-data-view/fixer-status.tsx create mode 100644 projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx create mode 100644 projects/js-packages/components/components/threats-data-view/index.tsx create mode 100644 projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx create mode 100644 projects/js-packages/components/components/threats-data-view/styles.module.scss create mode 100644 projects/js-packages/components/components/threats-data-view/test/index.test.tsx create mode 100644 projects/js-packages/components/components/threats-data-view/types.d.ts create mode 100644 projects/js-packages/components/components/threats-data-view/utils.ts create mode 100644 projects/js-packages/scan/changelog/add-threat-types create mode 100644 projects/js-packages/scan/src/types/threat.d.ts create mode 100644 projects/plugins/protect/changelog/move-components-to-package diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 224c12b5751f7..88aa75f225e05 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -305,6 +305,9 @@ importers: '@wordpress/data': specifier: 10.9.0 version: 10.9.0(react@18.3.1) + '@wordpress/dataviews': + specifier: 4.4.4 + version: 4.4.4(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@wordpress/date': specifier: 5.9.0 version: 5.9.0 @@ -7788,6 +7791,12 @@ packages: peerDependencies: react: ^18.0.0 + '@wordpress/dataviews@4.4.4': + resolution: {integrity: sha512-b+2DTP8uPznxpnD0khRHDUeuj3U5Cy32amr3vwiN9xqV9hl51fzSe+ELAUTHrFKlMaQNkH/0c8cH81fU0JIeuw==} + engines: {node: '>=18.12.0', npm: '>=8.19.2'} + peerDependencies: + react: ^18.0.0 + '@wordpress/dataviews@4.5.0': resolution: {integrity: sha512-3vZN6jFR6gFDvuAitpS/0D80ByWYkhRfuTAAmzptq6rC9CkC4VNRbIJZbxMsKEt2qh44T7TVYVR6yVm2p+8+oQ==} engines: {node: '>=18.12.0', npm: '>=8.19.2'} @@ -18504,6 +18513,28 @@ snapshots: rememo: 4.0.2 use-memo-one: 1.1.3(react@18.3.1) + '@wordpress/dataviews@4.4.4(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@ariakit/react': 0.4.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@babel/runtime': 7.24.7 + '@wordpress/components': 28.9.0(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@wordpress/compose': 7.9.0(react@18.3.1) + '@wordpress/data': 10.9.0(react@18.3.1) + '@wordpress/element': 6.9.0 + '@wordpress/i18n': 5.9.0 + '@wordpress/icons': 10.9.0(react@18.3.1) + '@wordpress/primitives': 4.9.0(react@18.3.1) + '@wordpress/private-apis': 1.9.0 + '@wordpress/warning': 3.9.0 + clsx: 2.1.1 + react: 18.3.1 + remove-accents: 0.5.0 + transitivePeerDependencies: + - '@emotion/is-prop-valid' + - '@types/react' + - react-dom + - supports-color + '@wordpress/dataviews@4.5.0(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@ariakit/react': 0.4.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1) diff --git a/projects/js-packages/components/changelog/add-threats-data-view-component b/projects/js-packages/components/changelog/add-threats-data-view-component new file mode 100644 index 0000000000000..ce943e85a6b6a --- /dev/null +++ b/projects/js-packages/components/changelog/add-threats-data-view-component @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Add ThreatsDataView component diff --git a/projects/js-packages/components/components/threats-data-view/constants.ts b/projects/js-packages/components/components/threats-data-view/constants.ts new file mode 100644 index 0000000000000..e9b2fea3e1db5 --- /dev/null +++ b/projects/js-packages/components/components/threats-data-view/constants.ts @@ -0,0 +1,17 @@ +import { __ } from '@wordpress/i18n'; + +export const PAID_PLUGIN_SUPPORT_URL = 'https://jetpack.com/contact-support/?rel=support'; + +export const THREAT_STATUSES = [ + { value: 'current', label: __( 'Active', 'jetpack' ) }, + { value: 'fixed', label: __( 'Fixed', 'jetpack' ) }, + { value: 'ignored', label: __( 'Ignored', 'jetpack' ) }, +]; + +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: 'database', label: __( 'Database', 'jetpack' ) }, +]; diff --git a/projects/js-packages/components/components/threats-data-view/fixer-status.tsx b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx new file mode 100644 index 0000000000000..f1898a70a0f08 --- /dev/null +++ b/projects/js-packages/components/components/threats-data-view/fixer-status.tsx @@ -0,0 +1,54 @@ +import { ExternalLink, Icon, Spinner } from '@wordpress/components'; +import { createInterpolateElement } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { check, info } from '@wordpress/icons'; +import { PAID_PLUGIN_SUPPORT_URL } from './constants'; +import IconTooltip from './icon-tooltip'; +import styles from './styles.module.scss'; + +/** + * Fixer Status component. + * + * @param {object} props - Component props. + * @param {boolean} props.isActiveFixInProgress - Whether an active fix is in progress. + * @param {boolean} props.isStaleFixInProgress - Whether a stale fix is in progress. + * + * @return {JSX.Element} The component. + */ +export default function FixerStatus( { + isActiveFixInProgress, + isStaleFixInProgress, +}: { + isActiveFixInProgress: boolean; + isStaleFixInProgress: boolean; +} ): JSX.Element { + if ( isStaleFixInProgress ) { + return ( + contact support.', + 'jetpack' + ), + { + supportLink: ( + + ), + } + ) } + /> + ); + } + + if ( isActiveFixInProgress ) { + return ; + } + + return ; +} diff --git a/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx b/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx new file mode 100644 index 0000000000000..eb0686cf49396 --- /dev/null +++ b/projects/js-packages/components/components/threats-data-view/icon-tooltip.tsx @@ -0,0 +1,51 @@ +import { Text } from '@automattic/jetpack-components'; +import { Icon, Popover } from '@wordpress/components'; +import React, { useCallback, useState } from 'react'; +import styles from './styles.module.scss'; + +const IconTooltip = ( { icon, iconClassName, iconSize, popoverPosition = 'top', text } ) => { + const [ showPopover, setShowPopover ] = useState( false ); + const [ timeoutId, setTimeoutId ] = useState( null ); + + const handleEnter = useCallback( () => { + // Clear any existing timeout if user hovers back quickly + if ( timeoutId ) { + clearTimeout( timeoutId ); + setTimeoutId( null ); + } + setShowPopover( true ); + }, [ timeoutId ] ); + + const handleOut = useCallback( () => { + // Set a timeout to delay the hiding of the popover + const id = setTimeout( () => { + setShowPopover( false ); + setTimeoutId( null ); // Clear the timeout ID after the popover is hidden + }, 100 ); + + setTimeoutId( id ); + }, [] ); + + return ( +
+ + { showPopover && ( + + + { text } + + + ) } +
+ ); +}; + +export default IconTooltip; diff --git a/projects/js-packages/components/components/threats-data-view/index.tsx b/projects/js-packages/components/components/threats-data-view/index.tsx new file mode 100644 index 0000000000000..d2c3d21edb080 --- /dev/null +++ b/projects/js-packages/components/components/threats-data-view/index.tsx @@ -0,0 +1,262 @@ +import { Text, ThreatSeverityBadge } from '@automattic/jetpack-components'; +import { Icon } from '@wordpress/components'; +import { + Action, + DataViews, + Field, + Filter, + SupportedLayouts, + type View, +} from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; +import { useCallback, useMemo, useState } from 'react'; +import { THREAT_STATUSES, THREAT_TYPES } from './constants'; +import FixerStatus from './fixer-status'; +import styles from './styles.module.scss'; +import { DataViewThreat, ThreatsDataViewActionCallback } from './types'; +import { filterThreatByView, getThreatIconByType, sortThreatsByView } from './utils'; + +/** + * DataView component for displaying security threats. + * + * @param {object} props - Component props. + * @param {Array} props.data - Threats data. + * @param {Array} props.filters - Initial DataView filters. + * @param {Function} props.onFixThreat - Threat fix action callback. + * @param {Function} props.onIgnoreThreat - Threat ignore action callback. + * @param {Function} props.onUnignoreThreat - Threat unignore action callback. + * @return {JSX.Element} The component. + */ +export default function ThreatsDataView( { + data, + filters, + onFixThreat, + onIgnoreThreat, + onUnignoreThreat, +}: { + data: DataViewThreat[]; + filters?: Filter[]; + onFixThreat?: ThreatsDataViewActionCallback; + onIgnoreThreat?: ThreatsDataViewActionCallback; + onUnignoreThreat?: ThreatsDataViewActionCallback; +} ): JSX.Element { + /** + * List of unique extensions extracted from the threats data. + */ + const extensions = useMemo( () => { + return data.reduce( ( acc, threat ) => { + if ( ! threat?.extension ) { + return acc; + } + if ( ! acc.find( ( { value } ) => value === threat.extension.slug ) ) { + acc.push( { value: threat.extension.slug, label: threat.extension.name } ); + } + return acc; + }, [] ); + }, [ data ] ); + + /** + * DataView fields - describes the visible items for each record in the dataset. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#fields-object + */ + const fields: Field< DataViewThreat >[] = useMemo( + () => [ + { + id: 'threat', + label: __( 'Threat', 'jetpack' ), + enableHiding: false, + getValue( { item } ) { + return item.title; + }, + render( { item } ) { + return ( +
+ + + { item.subtitle } + + + { item.title } + + { item.description } +
+ ); + }, + }, + { + id: 'severity', + label: __( 'Severity', 'jetpack' ), + getValue( { item } ) { + return ; + }, + }, + { + id: 'status', + label: __( 'Status', 'jetpack' ), + elements: THREAT_STATUSES, + getValue( { item } ) { + return ( + THREAT_STATUSES.find( ( { value } ) => value === item.status )?.label ?? item.status + ); + }, + }, + { + id: 'auto-fix', + label: __( 'Auto-fix', 'jetpack' ), + getValue( { item } ) { + return !! item.fixable; + }, + render( { item } ) { + return item.fixable ? ( + + ) : null; + }, + }, + { + id: 'signature', + label: __( 'Signature', 'jetpack' ), + elements: data.reduce( ( acc, threat ) => { + if ( ! acc.find( ( { value } ) => value === threat.signature ) ) { + acc.push( { value: threat.signature, label: threat.signature } ); + } + return acc; + }, [] ), + }, + { + id: 'extension', + label: __( 'Extension', 'jetpack' ), + elements: extensions, + getValue( { item } ) { + return extensions.find( ( { slug } ) => slug === item.extension.slug )?.label ?? null; + }, + }, + { + id: 'type', + label: __( 'Type', 'jetpack' ), + elements: THREAT_TYPES, + }, + ], + [ data, extensions ] + ); + + /** + * DataView view object - configures how the dataset is visible to the user. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#view-object + */ + const [ view, setView ] = useState< View >( { + type: 'table', + search: '', + filters: filters || [], + page: 1, + perPage: 25, + sort: { + field: 'severity', + direction: 'desc', + }, + fields: [ 'severity', 'threat', 'auto-fix' ], + layout: {}, + } ); + + /** + * Callback function to update the view state. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#onchangeview-function + */ + const onChangeView = useCallback( ( newView: View ) => { + setView( newView ); + }, [] ); + + /** + * DataView getItemId function - returns the unique ID for each record in the dataset. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#getitemid-function + */ + const getItemId = useCallback( ( item: DataViewThreat ) => item.id.toString(), [] ); + + /** + * DataView actions - collection of operations that can be performed upon each record. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#actions-object + */ + const actions: Action< DataViewThreat >[] = [ + { + id: 'fix', + label: __( 'Auto-Fix', 'jetpack' ), + isPrimary: true, + callback: onFixThreat, + isEligible( item ) { + return !! item.fixable; + }, + icon: 'check', + }, + { + id: 'ignore', + label: __( 'Ignore', 'jetpack' ), + isPrimary: false, + isDestructive: true, + callback: onIgnoreThreat, + isEligible( item ) { + // to do: isActiveFixInProgress || isStaleFixInProgress + return item.status === 'current'; + }, + icon: 'unseen', + }, + { + id: 'un-ignore', + label: __( 'Unignore', 'jetpack' ), + isPrimary: false, + isDestructive: true, + callback: onUnignoreThreat, + isEligible( item ) { + return item.status === 'ignored'; + }, + icon: 'seen', + }, + ]; + + /** + * DataView pagination info object. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#paginationinfo-object + */ + const paginationInfo = useMemo( () => { + return { + totalItems: data.length, + totalPages: Math.ceil( data.length / view.perPage ), + }; + }, [ data.length, view.perPage ] ); + + /** + * DataView default layouts. + * + * This property provides layout information about the view types that are active. If empty, enables all layout types (see “Layout Types”) with empty layout data. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/#defaultlayouts-record-string-view + */ + const defaultLayouts: SupportedLayouts = {}; + + /** + * Apply the view settings (i.e. filters, sorting, pagination) to the dataset. + */ + const filteredData = useMemo( () => { + return data + .filter( threat => filterThreatByView( threat, view ) ) + .sort( ( a, b ) => sortThreatsByView( a, b, view ) ) + .slice( ( view.page - 1 ) * view.perPage, view.page * view.perPage ); + }, [ data, view ] ); + + return ( + + ); +} diff --git a/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx new file mode 100644 index 0000000000000..3fa5b55afc1a1 --- /dev/null +++ b/projects/js-packages/components/components/threats-data-view/stories/index.stories.tsx @@ -0,0 +1,256 @@ +import ThreatsDataView from '..'; + +export default { + title: 'JS Packages/Components/Threats Data View', + component: ThreatsDataView, + parameters: { + backgrounds: { + default: 'light', + values: [ { name: 'light', value: 'white' } ], + }, + }, + decorators: [ + Story => ( +
+ +
+ ), + ], +}; + +export const Default = args => ; +Default.args = { + data: [ + { + id: 185869885, + signature: 'EICAR_AV_Test', + subtitle: 'index.php', + title: 'Malicious code found in file: index.php', + description: + "This is the standard EICAR antivirus test code, and not a real infection. If your site contains this code when you don't expect it to, contact Jetpack support for some help.", + firstDetected: '2024-10-07T20:45:06.000Z', + fixedIn: null, + fixedOn: null, + severity: 8, + fixable: { fixer: 'rollback', target: 'January 26, 2024, 6:49 am', extensionStatus: '' }, + status: 'current', + filename: '/var/www/html/wp-content/index.php', + context: { + '1': 'echo << + alert( 'Threat fix action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert + onIgnoreThreat: () => + alert( 'Ignore threat action callback triggered! This is handled by the component consumer.' ), // eslint-disable-line no-alert + onUnignoreThreat: () => + // eslint-disable-next-line no-alert + alert( + 'Unignore threat action callback triggered! This is handled by the component consumer.' + ), +}; + +export const FreeResults = args => ; +FreeResults.args = { + data: [ + { + id: '1d0470df-4671-47ac-8d87-a165e8f7d502', + subtitle: 'WooCommerce 3.2.3', + title: 'WooCommerce <= 3.2.3 - Authenticated PHP Object Injection', + description: + 'Versions 3.2.3 and earlier are affected by an issue where cached queries within shortcodes could lead to object injection. This is related to the recent WordPress 4.8.3 security release.This issue can only be exploited by users who can edit content and add shortcodes, but we still recommend all users running WooCommerce 3.x upgrade to 3.2 to mitigate this issue.', + firstDetected: null, + fixedIn: '3.2.4', + fixedOn: null, + severity: null, + fixable: null, + status: null, + filename: null, + context: null, + signature: null, + source: 'https://wpscan.com/vulnerability/1d0470df-4671-47ac-8d87-a165e8f7d502', + extension: { + name: 'WooCommerce', + slug: 'woocommerce', + }, + }, + { + id: '7275a176-d579-471a-8492-df8edbdf27de', + signature: null, + subtitle: 'WooCommerce 3.4.5', + title: 'WooCommerce <= 3.4.5 - Authenticated Stored XSS', + description: + 'The WooCommerce WordPress plugin was affected by an Authenticated Stored XSS security vulnerability.', + firstDetected: null, + fixedIn: '3.4.6', + fixedOn: null, + severity: null, + fixable: null, + status: null, + filename: null, + context: null, + source: 'https://wpscan.com/vulnerability/7275a176-d579-471a-8492-df8edbdf27de', + extension: { + name: 'WooCommerce', + slug: 'woocommerce', + }, + }, + { + id: '733d8a02-0d44-4b78-bbb2-37e447acd2f3', + signature: null, + subtitle: 'WP Super Cache < 1.7.2', + title: 'WP Super Cache < 1.7.2 - Authenticated Remote Code Execution (RCE)', + description: + 'The plugin was affected by an authenticated (admin+) RCE in the settings page due to input validation failure and weak $cache_path check in the WP Super Cache Settings -> Cache Location option. Direct access to the wp-cache-config.php file is not prohibited, so this vulnerability can be exploited for a web shell injection.\r\n\r\nAnother possible attack vector: from XSS (via another plugin affected by XSS) to RCE.', + firstDetected: null, + fixedIn: '1.7.2', + fixedOn: null, + severity: null, + fixable: null, + status: null, + filename: null, + context: null, + source: 'https://wpscan.com/vulnerability/733d8a02-0d44-4b78-bbb2-37e447acd2f3', + extension: { + name: 'WP Super Cache', + slug: 'wp-super-cache', + }, + }, + ], +}; diff --git a/projects/js-packages/components/components/threats-data-view/styles.module.scss b/projects/js-packages/components/components/threats-data-view/styles.module.scss new file mode 100644 index 0000000000000..70fd705c7796b --- /dev/null +++ b/projects/js-packages/components/components/threats-data-view/styles.module.scss @@ -0,0 +1,37 @@ +@import '@wordpress/dataviews/build-style/style.css'; + +.icon-check { + fill: var( --jp-green-40 ); +} + +.icon-info { + fill: var( --jp-red ); +} + +.support-link { + color: inherit; + + &:focus, + &:hover { + color: inherit; + box-shadow: none; + } +} + +.threat__subtitle { + display: flex; + align-items: center; + gap: 4px; + color: var( --jp-gray-80 ); + font-size: 0.875rem; +} + +.threat__title { + color: var( --jp-gray-80 ); +} + +:global { + .dataviews-view-table td, .dataviews-view-table th { + white-space: initial; + } +} diff --git a/projects/js-packages/components/components/threats-data-view/test/index.test.tsx b/projects/js-packages/components/components/threats-data-view/test/index.test.tsx new file mode 100644 index 0000000000000..9598660a7f371 --- /dev/null +++ b/projects/js-packages/components/components/threats-data-view/test/index.test.tsx @@ -0,0 +1,36 @@ +import { render, screen } from '@testing-library/react'; +import ThreatsDataView from '..'; +import { DataViewThreat } from '../types'; + +const data = [ + { + id: 185869885, + signature: 'EICAR_AV_Test', + subtitle: 'index.php', + title: 'Malicious code found in file: index.php', + description: + "This is the standard EICAR antivirus test code, and not a real infection. If your site contains this code when you don't expect it to, contact Jetpack support for some help.", + firstDetected: '2024-10-07T20:45:06.000Z', + fixedIn: null, + fixedOn: null, + severity: 8, + fixable: { fixer: 'rollback', target: 'January 26, 2024, 6:49 am', extensionStatus: '' }, + status: 'current', + filename: '/var/www/html/wp-content/index.php', + context: { + '1': 'echo << { + it( 'renders threat data', () => { + render( ); + expect( screen.getByText( 'Malicious code found in file: index.php' ) ).toBeInTheDocument(); + } ); +} ); diff --git a/projects/js-packages/components/components/threats-data-view/types.d.ts b/projects/js-packages/components/components/threats-data-view/types.d.ts new file mode 100644 index 0000000000000..35e9231b34e0b --- /dev/null +++ b/projects/js-packages/components/components/threats-data-view/types.d.ts @@ -0,0 +1,76 @@ +export type ThreatStatus = 'fixed' | 'ignored' | 'current'; + +export type ThreatFixType = 'replace' | 'delete' | 'update' | string; + +export type DataViewThreat = { + /** The threat's unique ID. */ + id: number; + + /** The threat type. */ + type: 'plugin' | 'theme' | 'core' | 'file' | 'database'; + + /** The threat's signature. */ + signature: string; + + /** The threat's subtitle. */ + subtitle: string; + + /** The threat's title. */ + title: string; + + /** The threat's description. */ + description: string; + + /** The threat's current status. */ + status: ThreatStatus; + + /** The threat's severity level (0-10). */ + severity: number; + + /** The date the threat was first detected on the site, in YYYY-MM-DDTHH:MM:SS.000Z format. */ + firstDetected: string; + + /** The version the threat is fixed in. */ + fixedIn?: string | null; + + /** The date the threat was fixed, in YYYY-MM-DDTHH:MM:SS.000Z format. */ + fixedOn?: string | null; + + /** The fixable details. */ + fixable: + | { + fixer: ThreatFixType; + target?: string | null; + extensionStatus?: string | null; + } + | false; + + /** The threat's source. */ + source?: string; + + /** The threat's affected extension. */ + extension?: { + name: string; + slug: string; + }; + + /** The threat's context. */ + context?: Record< string, unknown > | null; + + /** The name of the affected file. */ + filename: string | null; + + /** The rows affected by the database threat. */ + rows?: unknown; + + /** The table name of the database threat. */ + table?: string; + + /** The diff showing the threat's modified file contents. */ + diff?: string; +}; + +export type ThreatsDataViewActionCallback = ( + items: Threat[], + context: { registry: unknown; onActionPerformed?: ( threats: DataViewThreat[] ) => void } +) => void; diff --git a/projects/js-packages/components/components/threats-data-view/utils.ts b/projects/js-packages/components/components/threats-data-view/utils.ts new file mode 100644 index 0000000000000..11b23ada9a783 --- /dev/null +++ b/projects/js-packages/components/components/threats-data-view/utils.ts @@ -0,0 +1,98 @@ +import { Filter, View } from '@wordpress/dataviews'; +import { code, color, grid, plugins, shield, wordpress } from '@wordpress/icons'; +import { Threat } from '../../../../plugins/protect/src/js/types/threats'; + +const applyFilter = ( data: Record< string, unknown >, filter: Filter ): boolean => { + const value = data[ filter.field ]; + + if ( value === undefined || filter.value === undefined ) { + return true; + } + + switch ( filter.operator ) { + case 'is': + return value === filter.value; + case 'isNot': + return value !== filter.value; + case 'isAny': + return filter.value.includes( value ); + case 'isNone': + return ! filter.value.includes( value ); + case 'isAll': + return filter.value.every( ( filterValue: unknown ) => filterValue === value ); + case 'isNotAll': + return ! filter.value.every( ( filterValue: unknown ) => filterValue === value ); + default: + return true; + } +}; + +/** + * Filter function for determining whether a threat should be displayed, based on a DataView view. + * + * @example data.filter( threat => filterThreatByView( threat, view ) ) + * + * @param {Array} threat - Threat data. + * @param {object} view - DataView view. + * + * @return {boolean} Whether the threat should be displayed. + */ +export function filterThreatByView( threat: Threat, view: View ): boolean { + if ( ! view.filters.every( filter => applyFilter( threat, filter ) ) ) { + return false; + } + + if ( view.search ) { + const searchStr = + threat.title.toLowerCase() + + threat.description.toLowerCase() + + threat.signature.toLowerCase(); + + if ( searchStr.indexOf( view.search.toLowerCase() ) === -1 ) { + return false; + } + } + + return true; +} + +/** + * Sort function for comparing two threats, based on a DataView view. + * + * @example data.sort( ( a, b ) => sortThreatsByView( a, b, view ) ) + * + * @param {object} a - Threat A. + * @param {object} b - Threat B. + * @param {object} view - DataView view. + * + * @return {number} Sort order. + */ +export function sortThreatsByView( a: Threat, b: Threat, view: View ): number { + const field = view.sort.field; + + const direction = view.sort.direction === 'asc' ? 1 : -1; + if ( a[ field ] < b[ field ] ) { + return -1 * direction; + } + if ( a[ field ] > b[ field ] ) { + return 1 * direction; + } + return 0; +} + +export const getThreatIconByType = ( type: string ) => { + switch ( type ) { + case 'plugin': + return plugins; + case 'theme': + return color; + case 'core': + return wordpress; + case 'file': + return code; + case 'database': + return grid; + default: + return shield; + } +}; diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts index d0a6a683663bf..499f783960073 100644 --- a/projects/js-packages/components/index.ts +++ b/projects/js-packages/components/index.ts @@ -45,6 +45,7 @@ export * from './components/icons'; export { default as SplitButton } from './components/split-button'; export { default as ThemeProvider } from './components/theme-provider'; export { default as ThreatSeverityBadge } from './components/threat-severity-badge'; +export { default as ThreatsDataView } from './components/threats-data-view'; export { default as Text, H2, H3, Title } from './components/text'; export { default as ToggleControl } from './components/toggle-control'; export { default as numberFormat } from './components/number-format'; diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json index 4a46e647f6e45..f546aac9f5c0a 100644 --- a/projects/js-packages/components/package.json +++ b/projects/js-packages/components/package.json @@ -21,6 +21,7 @@ "@wordpress/components": "28.9.0", "@wordpress/compose": "7.9.0", "@wordpress/data": "10.9.0", + "@wordpress/dataviews": "4.4.4", "@wordpress/date": "5.9.0", "@wordpress/element": "6.9.0", "@wordpress/i18n": "5.9.0", diff --git a/projects/js-packages/scan/changelog/add-threat-types b/projects/js-packages/scan/changelog/add-threat-types new file mode 100644 index 0000000000000..e549d3e8a3f87 --- /dev/null +++ b/projects/js-packages/scan/changelog/add-threat-types @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Add threat TypeScript types diff --git a/projects/js-packages/scan/src/types/threat.d.ts b/projects/js-packages/scan/src/types/threat.d.ts new file mode 100644 index 0000000000000..757503972fa0c --- /dev/null +++ b/projects/js-packages/scan/src/types/threat.d.ts @@ -0,0 +1,59 @@ +export type ThreatStatus = 'fixed' | 'ignored' | 'current'; + +export type ThreatFixType = 'replace' | 'delete' | 'update' | string; + +export type Threat = { + /** The threat's unique ID. */ + id: number; + + /** The threat's signature. */ + signature: string; + + /** The threat's title. */ + title: string; + + /** The threat's description. */ + description: string; + + /** The threat's current status. */ + status: ThreatStatus; + + /** The threat's severity level (0-10). */ + severity: number; + + /** The date the threat was first detected on the site, in YYYY-MM-DDTHH:MM:SS.000Z format. */ + firstDetected: string; + + /** The version the threat is fixed in. */ + fixedIn?: string | null; + + /** The date the threat was fixed, in YYYY-MM-DDTHH:MM:SS.000Z format. */ + fixedOn?: string | null; + + /** The fixable details. */ + fixable: + | { + fixer: ThreatFixType; + target?: string | null; + extensionStatus?: string | null; + } + | false; + + /** The threat's source. */ + source?: string; + + /** The threat's context. */ + context?: Record< string, unknown > | null; + + /** The name of the affected file. */ + filename: string | null; + + /** The rows affected by the database threat. */ + rows?: unknown; + + /** The table name of the database threat. */ + table?: string; + + /** The diff showing the threat's modified file contents. */ + diff?: string; +}; diff --git a/projects/plugins/protect/changelog/move-components-to-package b/projects/plugins/protect/changelog/move-components-to-package new file mode 100644 index 0000000000000..29ead1e0b072a --- /dev/null +++ b/projects/plugins/protect/changelog/move-components-to-package @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: Moved components to package + + diff --git a/projects/plugins/protect/tsconfig.json b/projects/plugins/protect/tsconfig.json index bc49ef3cebb58..3efc0b5fbb273 100644 --- a/projects/plugins/protect/tsconfig.json +++ b/projects/plugins/protect/tsconfig.json @@ -1,6 +1,6 @@ { "extends": "jetpack-js-tools/tsconfig.base.json", - "include": [ "./src/js" ], + "include": [ "./src/js", "../../js-packages/components/components/threats-data-view" ], "compilerOptions": { "sourceMap": true, "outDir": "./build/",