Merge remote-tracking branch 'origin/trunk' into add/ci-php-8.4

.github/versions.sh

@@ -1,6 +1,6 @@
 # Versions of tools to use in CI.
 PHP_VERSION=8.2
-COMPOSER_VERSION=2.7.7
+COMPOSER_VERSION=2.8.3
 NODE_VERSION=22.9.0
 PNPM_VERSION=9.3.0
 

projects/js-packages/charts/.gitattributes

@@ -0,0 +1,7 @@
+# Files not needed to be distributed in the package.
+.gitattributes    export-ignore
+node_modules      export-ignore
+
+# Files to exclude from the mirror repo
+/changelog/**     production-exclude
+/.eslintrc.cjs    production-exclude

projects/js-packages/charts/.gitignore

@@ -0,0 +1,2 @@
+vendor/
+node_modules/

projects/js-packages/charts/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+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).
+

projects/js-packages/charts/README.md

@@ -0,0 +1,24 @@
+# charts
+
+Display charts within Automattic products.
+
+## How to install charts
+
+### Installation From Git Repo
+
+## Contribute
+
+## Get Help
+
+## Using this package in your WordPress plugin
+
+If you plan on using this package in your WordPress plugin, we would recommend that you use [Jetpack Autoloader](https://packagist.org/packages/automattic/jetpack-autoloader) as your autoloader. This will allow for maximum interoperability with other plugins that use this package as well.
+
+## Security
+
+Need to report a security vulnerability? Go to [https://automattic.com/security/](https://automattic.com/security/) or directly to our security bug bounty site [https://hackerone.com/automattic](https://hackerone.com/automattic).
+
+## License
+
+charts is licensed under [GNU General Public License v2 (or later)](./LICENSE.txt)
+

projects/js-packages/charts/changelog/initial-version

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Initial version.

projects/js-packages/charts/composer.json

@@ -0,0 +1,42 @@
+{
+	"name": "automattic/charts",
+	"description": "Display charts within Automattic products.",
+	"type": "library",
+	"license": "GPL-2.0-or-later",
+	"require": {},
+	"require-dev": {
+		"automattic/jetpack-changelogger": "@dev"
+	},
+	"autoload": {
+		"classmap": [
+			"src/"
+		]
+	},
+	"scripts": {
+		"test-coverage": [
+			"pnpm run test-coverage"
+		],
+		"test-js": [
+			"pnpm run test"
+		]
+	},
+	"repositories": [
+		{
+			"type": "path",
+			"url": "../../packages/*",
+			"options": {
+				"monorepo": true
+			}
+		}
+	],
+	"minimum-stability": "dev",
+	"prefer-stable": true,
+	"extra": {
+		"autotagger": true,
+		"npmjs-autopublish": true,
+		"changelogger": {
+			"link-template": "https://github.com/Automattic/charts/compare/v${old}...v${new}"
+		},
+		"mirror-repo": "Automattic/charts"
+	}
+}

projects/js-packages/charts/package.json

@@ -0,0 +1,31 @@
+{
+	"name": "@automattic/charts",
+	"version": "0.1.0-alpha",
+	"description": "Display charts within Automattic products.",
+	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
+	"bugs": {
+		"url": "https://github.com/Automattic/jetpack/labels/[JS Package] Charts"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Automattic/jetpack.git",
+		"directory": "projects/js-packages/charts"
+	},
+	"license": "GPL-2.0-or-later",
+	"author": "Automattic",
+	"scripts": {
+		"test": "jest --config=tests/jest.config.cjs",
+		"test-coverage": "pnpm run test --coverage"
+	},
+	"devDependencies": {
+		"jest": "29.7.0",
+		"jest-environment-jsdom": "29.7.0",
+		"jest-extended": "4.0.2",
+		"typescript": "5.0.4"
+	},
+	"exports": {
+		".": "./src/index.ts",
+		"./state": "./src/state",
+		"./action-types": "./src/state/action-types"
+	}
+}

projects/js-packages/charts/src/index.ts

@@ -0,0 +1,2 @@
+// Put your code in this `src/` folder!
+// Feel free to delete or rename this file.

projects/js-packages/charts/tests/index.test.js

@@ -0,0 +1,18 @@
+// We recommend using `jest` for testing. If you're testing React code, we recommend `@testing-library/react` and related packages.
+// Please match the versions used elsewhere in the monorepo.
+//
+// Please don't add new uses of `mocha`, `chai`, `sinon`, `enzyme`, and so on. We're trying to standardize on one testing framework.
+//
+// The default setup is to have files named like "name.test.js" (or .jsx, .ts, or .tsx) in this `tests/` directory.
+// But you could instead put them in `src/`, or put files like "name.js" (or .jsx, .ts, or .tsx) in `test` or `__tests__` directories somewhere.
+
+// This is a placeholder test, new tests will be added soon
+const placeholderFunction = () => {
+	return true;
+};
+
+describe( 'placeholderTest', () => {
+	it( 'should be a function', () => {
+		expect( typeof placeholderFunction ).toBe( 'function' );
+	} );
+} );

projects/js-packages/charts/tests/jest.config.cjs

@@ -0,0 +1,7 @@
+const path = require( 'path' );
+const baseConfig = require( 'jetpack-js-tools/jest/config.base.js' );
+
+module.exports = {
+	...baseConfig,
+	rootDir: path.join( __dirname, '..' ),
+};

projects/js-packages/charts/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"extends": "jetpack-js-tools/tsconfig.base.json",
+	"compilerOptions": {
+		"typeRoots": [ "./node_modules/@types/", "src/*" ],
+		"outDir": "./build/"
+	},
+	// List all sources and source-containing subdirs.
+	"include": [ "./src" ]
+}

projects/js-packages/components/changelog/add-components-threat-details-modal

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Adds ThreatModal component and stories

projects/js-packages/components/components/diff-viewer/styles.module.scss

@@ -14,7 +14,7 @@
 	display: flex;
 	font-family: "Courier 10 Pitch", Courier, monospace;
 	flex-direction: row;
-	overflow-x: scroll;
+	overflow-x: auto;
 	white-space: pre;
 }
 

projects/js-packages/components/components/marked-lines/styles.module.scss

@@ -4,7 +4,7 @@
 	font-family: monospace;
 	display: flex;
 	flex-direction: row;
-	overflow-x: scroll;
+	overflow-x: auto;
 }
 
 .marked-lines__marked-line {

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

@@ -1,9 +1,9 @@
 import { Button } from '@automattic/jetpack-components';
 import {
 	type Threat,
-	fixerIsInError,
-	fixerIsInProgress,
-	fixerStatusIsStale,
+	getFixerState,
+	getFixerAction,
+	getFixerMessage,
 } from '@automattic/jetpack-scan';
 import { Tooltip } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
@@ -30,10 +30,7 @@ export default function ThreatFixerButton( {
 	className?: string;
 } ): JSX.Element {
 	const fixerState = useMemo( () => {
-		const inProgress = threat.fixer && fixerIsInProgress( threat.fixer );
-		const error = threat.fixer && fixerIsInError( threat.fixer );
-		const stale = threat.fixer && fixerStatusIsStale( threat.fixer );
-		return { inProgress, error, stale };
+		return getFixerState( threat.fixer );
 	}, [ threat.fixer ] );
 
 	const tooltipText = useMemo( () => {
@@ -53,54 +50,7 @@ export default function ThreatFixerButton( {
 			return __( 'An auto-fixer is in progress.', 'jetpack' );
 		}
 
-		switch ( threat.fixable.fixer ) {
-			case 'delete':
-				if ( threat.filename ) {
-					if ( threat.filename.endsWith( '/' ) ) {
-						return __( 'Deletes the directory that the infected file is in.', 'jetpack' );
-					}
-
-					if ( threat.signature === 'Core.File.Modification' ) {
-						return __( 'Deletes the unexpected file in a core WordPress directory.', 'jetpack' );
-					}
-
-					return __( 'Deletes the infected file.', 'jetpack' );
-				}
-
-				if ( threat.extension?.type === 'plugin' ) {
-					return __( 'Deletes the plugin directory to fix the threat.', 'jetpack' );
-				}
-
-				if ( threat.extension?.type === 'theme' ) {
-					return __( 'Deletes the theme directory to fix the threat.', 'jetpack' );
-				}
-				break;
-			case 'update':
-				return __( 'Upgrades the plugin or theme to a newer version.', 'jetpack' );
-			case 'replace':
-			case 'rollback':
-				if ( threat.filename ) {
-					return threat.signature === 'Core.File.Modification'
-						? __(
-								'Replaces the modified core WordPress file with the original clean version from the WordPress source code.',
-								'jetpack'
-						  )
-						: __(
-								'Replaces the infected file with a previously backed up version that is clean.',
-								'jetpack'
-						  );
-				}
-
-				if ( threat.signature === 'php_hardening_WP_Config_NoSalts_001' ) {
-					return __(
-						'Replaces the default salt keys in wp-config.php with unique ones.',
-						'jetpack'
-					);
-				}
-				break;
-			default:
-				return __( 'An auto-fixer is available.', 'jetpack' );
-		}
+		return getFixerMessage( threat );
 	}, [ threat, fixerState ] );
 
 	const buttonText = useMemo( () => {
@@ -112,18 +62,8 @@ export default function ThreatFixerButton( {
 			return __( 'Error', 'jetpack' );
 		}
 
-		switch ( threat.fixable.fixer ) {
-			case 'delete':
-				return __( 'Delete', 'jetpack' );
-			case 'update':
-				return __( 'Update', 'jetpack' );
-			case 'replace':
-			case 'rollback':
-				return __( 'Replace', 'jetpack' );
-			default:
-				return __( 'Fix', 'jetpack' );
-		}
-	}, [ threat.fixable, fixerState.error ] );
+		return getFixerAction( threat );
+	}, [ threat, fixerState.error ] );
 
 	const handleClick = useCallback(
 		( event: React.MouseEvent ) => {

projects/js-packages/components/components/threat-modal/credentials-gate.tsx

@@ -0,0 +1,65 @@
+import { Text, Button } from '@automattic/jetpack-components';
+import { Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import React, { ReactElement } from 'react';
+import styles from './styles.module.scss';
+
+const CredentialsGate = ( {
+	siteCredentialsNeeded,
+	credentialsIsFetching,
+	credentialsRedirectUrl,
+	children,
+}: {
+	siteCredentialsNeeded: boolean;
+	credentialsIsFetching: boolean;
+	credentialsRedirectUrl: string;
+	children: ReactElement;
+} ): JSX.Element => {
+	if ( ! siteCredentialsNeeded ) {
+		return children;
+	}
+
+	return (
+		<>
+			<Notice
+				status="warning"
+				isDismissible={ false }
+				children={
+					<Text>
+						{ __(
+							'Before Jetpack can auto-fix threats on your site, it needs your server credentials.',
+							'jetpack'
+						) }
+					</Text>
+				}
+			/>
+
+			<Text>
+				{ __(
+					'Your server credentials allow Jetpack to access the server that’s powering your website. This information is securely saved and only used to perform fix threats detected on your site.',
+					'jetpack'
+				) }
+			</Text>
+
+			<Text>
+				{ __(
+					'Once you’ve entered server credentials, Jetpack will be fixing the selected threats.',
+					'jetpack'
+				) }
+			</Text>
+
+			<div className={ styles[ 'modal-actions' ] }>
+				<Button
+					isExternalLink={ true }
+					weight="regular"
+					href={ credentialsRedirectUrl }
+					isLoading={ credentialsIsFetching }
+				>
+					{ __( 'Enter server credentials', 'jetpack' ) }
+				</Button>
+			</div>
+		</>
+	);
+};
+
+export default CredentialsGate;