Move threat components into the scan client package

projects/js-packages/components/index.ts

@@ -44,18 +44,17 @@ export { default as CopyToClipboard } from './components/copy-to-clipboard';
 export * from './components/icons';
 export { default as SplitButton } from './components/split-button';
 export { default as ThemeProvider } from './components/theme-provider';
-export { default as ThreatFixerButton } from './components/threat-fixer-button';
-export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
+export { default as ThreatFixerButton } from '../scan/src/components/threat-fixer-button';
 export {
 	default as ThreatsDataViews,
 	HISTORIC_TABLE_FIELDS,
-} from './components/threats-data-views';
+} from '../scan/src/components/threats-data-views';
 export { default as ShieldIcon } from './components/shield-icon';
-export { default as ScanReport } from './components/scan-report';
 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';
 export { default as QRCode } from './components/qr-code';
+export { default as Badge } from './components/badge';
 export { default as Button } from './components/button';
 export type { ButtonProps } from './components/button/types';
 export { default as LoadingPlaceholder } from './components/loading-placeholder';

projects/js-packages/components/package.json

@@ -16,13 +16,11 @@
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
 		"@automattic/jetpack-boost-score-api": "workspace:*",
-		"@automattic/jetpack-scan": "workspace:*",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "6.14.0",
 		"@wordpress/components": "29.0.0",
 		"@wordpress/compose": "7.14.0",
 		"@wordpress/data": "10.14.0",
-		"@wordpress/dataviews": "4.10.0",
 		"@wordpress/date": "5.14.0",
 		"@wordpress/element": "6.14.0",
 		"@wordpress/i18n": "5.14.0",

projects/js-packages/components/tsconfig.json

@@ -1,5 +1,12 @@
 {
 	"extends": "jetpack-js-tools/tsconfig.base.json",
 	// List all sources and source-containing subdirs.
-	"include": [ "./index.ts", "./components", "./lib", "./tools" ]
+	"include": [
+		"./index.ts",
+		"./components",
+		"./lib",
+		"./tools",
+		"../scan/src/components/threats-data-views",
+		"../scan/src/components/threat-fixer-button"
+	]
 }

projects/js-packages/scan/package.json

@@ -48,10 +48,15 @@
 	"dependencies": {
 		"@automattic/jetpack-api": "workspace:*",
 		"@automattic/jetpack-base-styles": "workspace:*",
+		"@automattic/jetpack-components": "workspace:*",
 		"@wordpress/api-fetch": "7.14.0",
 		"@wordpress/element": "6.14.0",
 		"@wordpress/i18n": "5.14.0",
 		"@wordpress/url": "4.14.0",
+		"@wordpress/components": "29.0.0",
+		"@wordpress/dataviews": "4.10.0",
+		"@wordpress/date": "5.14.0",
+		"@wordpress/icons": "10.14.0",
 		"debug": "4.4.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"

projects/js-packages/scan/src/components/index.ts

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

projects/js-packages/components/components/scan-report/constants.ts → projects/js-packages/scan/src/components/scan-report/constants.ts

@@ -8,16 +8,16 @@ import {
 } from '@wordpress/icons';
 
 export const STATUS_TYPES = [
-	{ value: 'checked', label: __( 'Checked', 'jetpack-components' ) },
-	{ value: 'unchecked', label: __( 'Unchecked', 'jetpack-components' ) },
-	{ value: 'threat', label: __( 'Threat', 'jetpack-components' ) },
+	{ value: 'checked', label: __( 'Checked', 'jetpack-scan' ) },
+	{ value: 'unchecked', label: __( 'Unchecked', 'jetpack-scan' ) },
+	{ value: 'threat', label: __( 'Threat', 'jetpack-scan' ) },
 ];
 
 export const TYPES = [
-	{ value: 'core', label: __( 'WordPress', 'jetpack-components' ) },
-	{ value: 'plugins', label: __( 'Plugin', 'jetpack-components' ) },
-	{ value: 'themes', label: __( 'Theme', 'jetpack-components' ) },
-	{ value: 'files', label: __( 'Files', 'jetpack-components' ) },
+	{ value: 'core', label: __( 'WordPress', 'jetpack-scan' ) },
+	{ value: 'plugins', label: __( 'Plugin', 'jetpack-scan' ) },
+	{ value: 'themes', label: __( 'Theme', 'jetpack-scan' ) },
+	{ value: 'files', label: __( 'Files', 'jetpack-scan' ) },
 ];
 
 export const ICONS = {

projects/js-packages/components/components/scan-report/index.tsx → projects/js-packages/scan/src/components/scan-report/index.tsx

@@ -1,4 +1,4 @@
-import { type ScanReportExtension } from '@automattic/jetpack-scan';
+import { ShieldIcon } from '@automattic/jetpack-components';
 import { Tooltip } from '@wordpress/components';
 import {
 	type SupportedLayouts,
@@ -10,7 +10,7 @@ import {
 import { __, _n } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useCallback, useMemo, useState } from 'react';
-import ShieldIcon from '../shield-icon';
+import { type ScanReportExtension } from '@automattic/jetpack-scan';
 import {
 	FIELD_NAME,
 	FIELD_VERSION,
@@ -20,7 +20,7 @@ import {
 	STATUS_TYPES,
 	TYPES,
 	ICONS,
-} from './constants';
+} from './constants.js';
 import styles from './styles.module.scss';
 
 /**
@@ -85,7 +85,7 @@ export default function ScanReport( { dataSource, data, onChangeSelection } ): J
 			{
 				id: FIELD_STATUS,
 				elements: STATUS_TYPES,
-				label: __( 'Status', 'jetpack-components' ),
+				label: __( 'Status', 'jetpack-scan' ),
 				enableHiding: false,
 				getValue( { item } ) {
 					if ( item.checked ) {
@@ -101,7 +101,7 @@ export default function ScanReport( { dataSource, data, onChangeSelection } ): J
 					let variant: 'info' | 'error' | 'success' = 'info';
 					let text = __(
 						'This item was added to your site after the most recent scan. We will check for threats during the next scheduled one.',
-						'jetpack-components'
+						'jetpack-scan'
 					);
 
 					if ( item.checked ) {
@@ -111,29 +111,26 @@ export default function ScanReport( { dataSource, data, onChangeSelection } ): J
 								'Vulnerability detected.',
 								'Vulnerabilities detected.',
 								item.threats.length,
-								'jetpack-components'
+								'jetpack-scan'
 							);
 
 							if ( scanApi ) {
 								text = _n(
 									'Threat detected.',
 									'Threats detected.',
 									item.threats.length,
-									'jetpack-components'
+									'jetpack-scan'
 								);
 							}
 						} else {
 							variant = 'success';
 							text = __(
 								'No known vulnerabilities found that affect this version.',
-								'jetpack-components'
+								'jetpack-scan'
 							);
 
 							if ( scanApi ) {
-								text = __(
-									'No known threats found that affect this version.',
-									'jetpack-components'
-								);
+								text = __( 'No known threats found that affect this version.', 'jetpack-scan' );
 							}
 						}
 					}
@@ -149,13 +146,13 @@ export default function ScanReport( { dataSource, data, onChangeSelection } ): J
 			},
 			{
 				id: FIELD_TYPE,
-				label: __( 'Type', 'jetpack-components' ),
+				label: __( 'Type', 'jetpack-scan' ),
 				elements: TYPES,
 				enableHiding: false,
 			},
 			{
 				id: FIELD_NAME,
-				label: __( 'Name', 'jetpack-components' ),
+				label: __( 'Name', 'jetpack-scan' ),
 				enableHiding: false,
 				enableGlobalSearch: true,
 				getValue( { item }: { item: ScanReportExtension } ) {
@@ -164,7 +161,7 @@ export default function ScanReport( { dataSource, data, onChangeSelection } ): J
 			},
 			{
 				id: FIELD_VERSION,
-				label: __( 'Version', 'jetpack-components' ),
+				label: __( 'Version', 'jetpack-scan' ),
 				enableHiding: false,
 				enableSorting: false,
 				enableGlobalSearch: true,
@@ -176,7 +173,7 @@ export default function ScanReport( { dataSource, data, onChangeSelection } ): J
 				? [
 						{
 							id: FIELD_ICON,
-							label: __( 'Icon', 'jetpack-components' ),
+							label: __( 'Icon', 'jetpack-scan' ),
 							enableSorting: false,
 							enableHiding: false,
 							getValue( { item }: { item: ScanReportExtension } ) {

projects/js-packages/components/components/scan-report/stories/index.stories.tsx → projects/js-packages/scan/src/components/scan-report/stories/index.stories.tsx

@@ -1,4 +1,4 @@
-import ScanReport from '..';
+import ScanReport from '../index.js';
 
 export default {
 	title: 'JS Packages/Components/Scan Report',

projects/js-packages/components/components/threat-fixer-button/index.tsx → projects/js-packages/scan/src/components/threat-fixer-button/index.tsx

@@ -1,13 +1,13 @@
+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 { Tooltip } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Button } from '@automattic/jetpack-components';
 import styles from './styles.module.scss';
 
 /**
@@ -39,15 +39,15 @@ export default function ThreatFixerButton( {
 		}
 
 		if ( fixerState.error ) {
-			return __( 'An error occurred auto-fixing this threat.', 'jetpack-components' );
+			return __( 'An error occurred auto-fixing this threat.', 'jetpack-scan' );
 		}
 
 		if ( fixerState.stale ) {
-			return __( 'The auto-fixer is taking longer than expected.', 'jetpack-components' );
+			return __( 'The auto-fixer is taking longer than expected.', 'jetpack-scan' );
 		}
 
 		if ( fixerState.inProgress ) {
-			return __( 'An auto-fixer is in progress.', 'jetpack-components' );
+			return __( 'An auto-fixer is in progress.', 'jetpack-scan' );
 		}
 
 		return getFixerDescription( threat );
@@ -59,7 +59,7 @@ export default function ThreatFixerButton( {
 		}
 
 		if ( fixerState.error ) {
-			return __( 'Error', 'jetpack-components' );
+			return __( 'Error', 'jetpack-scan' );
 		}
 
 		return getFixerAction( threat );

projects/js-packages/components/components/threat-modal/fixer-state-notice.tsx → projects/js-packages/scan/src/components/threat-modal/fixer-state-notice.tsx

@@ -1,10 +1,10 @@
-import { CONTACT_SUPPORT_URL } from '@automattic/jetpack-scan';
+import { Button } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useMemo } from 'react';
-import { Button } from '@automattic/jetpack-components';
+import { CONTACT_SUPPORT_URL } from '@automattic/jetpack-scan';
 import styles from './styles.module.scss';
-import ThreatNotice from './threat-notice';
+import ThreatNotice from './threat-notice.js';
 
 /**
  * FixerStateNotice component
@@ -24,7 +24,7 @@ const FixerStateNotice = ( {
 } ) => {
 	const getInterpolatedContent = (): JSX.Element => {
 		return createInterpolateElement(
-			__( 'Please try again or <supportLink>contact support</supportLink>.', 'jetpack-components' ),
+			__( 'Please try again or <supportLink>contact support</supportLink>.', 'jetpack-scan' ),
 			{
 				supportLink: <Button variant="link" isExternalLink={ true } href={ CONTACT_SUPPORT_URL } />,
 			}
@@ -35,12 +35,12 @@ const FixerStateNotice = ( {
 		if ( fixerState.error ) {
 			return {
 				status: 'error' as const,
-				title: __( 'An error occurred auto-fixing this threat', 'jetpack-components' ),
+				title: __( 'An error occurred auto-fixing this threat', 'jetpack-scan' ),
 				content: (
 					<>
 						{ __(
 							'Jetpack encountered a filesystem error while attempting to auto-fix this threat.',
-							'jetpack-components'
+							'jetpack-scan'
 						) }{ ' ' }
 						{ getInterpolatedContent() }
 					</>
@@ -51,12 +51,12 @@ const FixerStateNotice = ( {
 		if ( fixerState.stale ) {
 			return {
 				status: 'error' as const,
-				title: __( 'The auto-fixer is taking longer than expected', 'jetpack-components' ),
+				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.',
-							'jetpack-components'
+							'jetpack-scan'
 						) }{ ' ' }
 						{ getInterpolatedContent() }
 					</>
@@ -67,8 +67,8 @@ const FixerStateNotice = ( {
 		if ( fixerState.inProgress ) {
 			return {
 				status: 'success' as const,
-				title: __( 'An auto-fixer is in progress', 'jetpack-components' ),
-				content: __( 'Please wait while Jetpack auto-fixes the threat.', 'jetpack-components' ),
+				title: __( 'An auto-fixer is in progress', 'jetpack-scan' ),
+				content: __( 'Please wait while Jetpack auto-fixes the threat.', 'jetpack-scan' ),
 			};
 		}
 

projects/js-packages/components/components/threat-modal/index.tsx → projects/js-packages/scan/src/components/threat-modal/index.tsx

@@ -1,10 +1,11 @@
-import { type Threat } from '@automattic/jetpack-scan';
+import { Text } from '@automattic/jetpack-components';
 import { Modal } from '@wordpress/components';
 import { createContext } from 'react';
-import Text from '../text';
-import ThreatSeverityBadge from '../threat-severity-badge';
+import { type Threat } from '@automattic/jetpack-scan';
+import ThreatSeverityBadge from '../threat-severity-badge/index.js';
 import styles from './styles.module.scss';
-import ThreatFixConfirmation from './threat-fix-confirmation';
+import ThreatFixConfirmation from './threat-fix-confirmation.js';
+
 interface ThreatModalContextType {
 	closeModal: () => void;
 	threat: Threat;

projects/js-packages/components/components/threat-modal/stories/index.stories.tsx → projects/js-packages/scan/src/components/threat-modal/stories/index.stories.tsx

@@ -1,5 +1,5 @@
+import { Button } from '@automattic/jetpack-components';
 import { useCallback, useState } from 'react';
-import Button from '../../button/index.js';
 import ThreatModal from '../index.js';
 
 export default {