@automattic/jetpack-components 0.57.0 → 0.58.1

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.58.1] - 2024-11-04
+### Added
+- Enable test coverage. [#39961]
+
+### Fixed
+- Fix tooltip behavior. [#39879]
+
+## [0.58.0] - 2024-10-15
+### Added
+- Add DiffViewer component [#39672]
+- Add ThreatSeverityBadge component [#39758]
+
 ## [0.57.0] - 2024-10-14
 ### Added
 - Add JetpackProtectLogo component. [#39703]
@@ -1190,6 +1202,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.58.1]: https://github.com/Automattic/jetpack-components/compare/0.58.0...0.58.1
+[0.58.0]: https://github.com/Automattic/jetpack-components/compare/0.57.0...0.58.0
 [0.57.0]: https://github.com/Automattic/jetpack-components/compare/0.56.3...0.57.0
 [0.56.3]: https://github.com/Automattic/jetpack-components/compare/0.56.2...0.56.3
 [0.56.2]: https://github.com/Automattic/jetpack-components/compare/0.56.1...0.56.2

package/components/boost-score-graph/style-tooltip.scss

@@ -5,6 +5,17 @@ $white: #ffffff;
 .jb-score-tooltips-container {
     width: 100%;
     position: relative;
+    pointer-events: none;
+
+}
+
+.jb-score-tooltip-react-root {
+    position: absolute;
+    bottom: -20px;
+    translate: -50% calc( 100% - 20px );
+    z-index: 1000;
+    pointer-events: auto;
+    user-select: text;
 }
 
 .jb-score-tooltip {
@@ -17,6 +28,11 @@ $white: #ffffff;
     width: 20em;
     position: relative;
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+    display: none;
+
+    .visible &, &:hover {
+        display: block;
+    }
 
     hr {
         border-top: 1px solid $grey;

package/components/boost-score-graph/tooltips-plugin.ts

@@ -25,35 +25,26 @@ export function tooltipsPlugin( periods ) {
 		if ( ! reactDom ) {
 			reactDom = ReactDOM.createRoot( reactRoot );
 		}
-		reactRoot.style.position = 'absolute';
-		reactRoot.style.bottom = -20 + 'px';
-		reactRoot.style.translate = '-50% calc( 100% - 20px )';
-		reactRoot.style.zIndex = '1000';
+		reactRoot.classList.add( 'jb-score-tooltip-react-root' );
 
 		container.appendChild( reactRoot );
 
 		u.over.appendChild( container );
 
-		/**
-		 * Hides all tooltips.
-		 */
-		function hideTips() {
-			reactRoot.style.display = 'none';
-		}
+		u.over.addEventListener( 'mouseenter', () => {
+			container.classList.add( 'visible' );
+		} );
 
-		/**
-		 * Shows all tooltips.
-		 */
-		function showTips() {
-			reactRoot.style.display = null;
-		}
+		u.over.addEventListener( 'mouseleave', () => {
+			container.classList.remove( 'visible' );
+		} );
 
-		container.addEventListener( 'mouseleave', () => {
-			hideTips();
+		reactRoot.addEventListener( 'mouseenter', () => {
+			reactRoot.classList.add( 'visible' );
 		} );
 
-		container.addEventListener( 'mouseenter', () => {
-			showTips();
+		reactRoot.addEventListener( 'mouseleave', () => {
+			reactRoot.classList.remove( 'visible' );
 		} );
 	}
 
@@ -62,7 +53,7 @@ export function tooltipsPlugin( periods ) {
 	 * @param {uPlot} u - The uPlot instance.
 	 */
 	function setSize( u: uPlot ) {
-		container.style.height = u.over.clientHeight + 'px';
+		container.style.paddingTop = u.over.clientHeight + 'px';
 	}
 
 	/**
@@ -75,6 +66,10 @@ export function tooltipsPlugin( periods ) {
 
 		const period = periods[ idx ];
 
+		if ( ! period ) {
+			return;
+		}
+
 		// Timestamp of the cursor position
 		const timestamp = u.data[ 0 ][ idx ];
 

package/components/diff-viewer/README.md

@@ -0,0 +1,49 @@
+# Unified Diff Viewer
+
+Originally forked over from [Calypso](https://github.com/Automattic/wp-calypso/tree/b7a4a07/client/components/diff-viewer).
+
+This component renders the output of a unified diff (`git diff` or `diff -u`) in a
+visual format recognizable by someone who works with `diff` and comparing files.
+
+## Usage
+
+```jsx
+import DiffViewer from 'components/diff-viewer';
+export const CommitView = ( { commitHash, description, diff } ) => (
+	<div>
+		<div>
+			<a href="https://wordpress.com">{ commitHash }</a>
+		</div>
+		<p>{ description }</p>
+		<DiffViewer diff={ diff } />
+	</div>
+);
+```
+
+### Props
+
+| Name     | Type     | Default | Description                    |
+| -------- | -------- | ------- | ------------------------------ |
+| `diff`\* | `string` | `''`    | Actual text output of the diff |
+
+### Additional usage information
+
+The diff output should be the full text produced by the diff command (including newlines).
+Internally this component parses the output (the patch) and produces the data structure 
+used to display files, hunks (sections of change in the files), and the actual lines of 
+change and context.
+
+```
+diff --git a/circle.yml b/circle.yml
+index 51455bdb14..bc0622d001 100644
+--- a/circle.yml
++++ b/circle.yml
+@@ -1,6 +1,6 @@
+ machine:
+   node:
+-    version: 8.9.4
++    version: 8.11.0
+ test:
+   pre:
+     - ? |
+```

package/components/diff-viewer/index.tsx

@@ -0,0 +1,97 @@
+import { Fragment } from 'react';
+import parseFilename from './parse-filename';
+import parsePatch from './parse-patch';
+import styles from './styles.module.scss';
+
+const filename = ( {
+	oldFileName,
+	newFileName,
+}: {
+	oldFileName: string;
+	newFileName: string;
+} ): JSX.Element => {
+	const { prev, next } = parseFilename( oldFileName, newFileName );
+
+	if ( prev.prefix + prev.path === next.prefix + next.path ) {
+		return (
+			<Fragment>
+				{ prev.prefix && (
+					<span className={ styles[ 'diff-viewer__path-prefix' ] }>{ prev.prefix }</span>
+				) }
+				<span className={ styles[ 'diff-viewer__path' ] }>{ prev.path }</span>
+			</Fragment>
+		);
+	}
+
+	return (
+		<Fragment>
+			{ !! prev.prefix && (
+				<span className={ styles[ 'diff-viewer__path-prefix' ] }>{ prev.prefix }</span>
+			) }
+			<span className={ styles[ 'diff-viewer__path' ] }>{ prev.path }</span>
+			{ ' → ' }
+			{ !! next.prefix && (
+				<span className={ styles[ 'diff-viewer__path-prefix' ] }>{ next.prefix }</span>
+			) }
+			<span className={ styles[ 'diff-viewer__path' ] }>{ next.path }</span>
+		</Fragment>
+	);
+};
+
+export const DiffViewer = ( { diff } ) => (
+	<div className={ styles[ 'diff-viewer' ] }>
+		{ parsePatch( diff ).map( ( file, fileIndex ) => (
+			<Fragment key={ fileIndex }>
+				<div key={ `file-${ fileIndex }` } className={ styles[ 'diff-viewer__filename' ] }>
+					{ filename( file ) }
+				</div>
+				<div key={ `diff-${ fileIndex }` } className={ styles[ 'diff-viewer__file' ] }>
+					<div key="left-numbers" className={ styles[ 'diff-viewer__line-numbers' ] }>
+						{ file.hunks.map( ( hunk, hunkIndex ) => {
+							let lineOffset = 0;
+							return hunk.lines.map( ( line, index ) => (
+								<div key={ `${ hunkIndex }-${ index }` }>
+									{ line[ 0 ] === '+' ? '\u00a0' : hunk.oldStart + lineOffset++ }
+								</div>
+							) );
+						} ) }
+					</div>
+					<div key="right-numbers" className={ styles[ 'diff-viewer__line-numbers' ] }>
+						{ file.hunks.map( ( hunk, hunkIndex ) => {
+							let lineOffset = 0;
+							return hunk.lines.map( ( line, index ) => (
+								<div key={ `${ hunkIndex }-${ index }` }>
+									{ line[ 0 ] === '-' ? '\u00a0' : hunk.newStart + lineOffset++ }
+								</div>
+							) );
+						} ) }
+					</div>
+					<div className={ styles[ 'diff-viewer__lines' ] }>
+						{ file.hunks.map( ( hunk, hunkIndex ) =>
+							hunk.lines.map( ( line, index ) => {
+								const output = line.slice( 1 ).replace( /^\s*$/, '\u00a0' );
+								const key = `${ hunkIndex }-${ index }`;
+
+								switch ( line[ 0 ] ) {
+									case ' ':
+										return <div key={ key }>{ output }</div>;
+
+									case '-':
+										return <del key={ key }>{ output }</del>;
+
+									case '+':
+										return <ins key={ key }>{ output }</ins>;
+
+									default:
+										return undefined;
+								}
+							} )
+						) }
+					</div>
+				</div>
+			</Fragment>
+		) ) }
+	</div>
+);
+
+export default DiffViewer;

package/components/diff-viewer/parse-filename.ts

@@ -0,0 +1,75 @@
+type ParsedFilename = {
+	prefix: string;
+	path: string;
+};
+
+const decompose = ( path: string ): ParsedFilename => {
+	const lastSlash = path.lastIndexOf( '/' );
+
+	return lastSlash > -1
+		? { prefix: path.slice( 0, lastSlash ), path: path.slice( lastSlash ) }
+		: { prefix: '', path };
+};
+
+/**
+ * Parse the filename from a diff
+ *
+ * Uses a heuristic to return proper file name indicators
+ *
+ * It searches for the longest shared prefix and returns
+ * whatever remains after that. If the paths are identical
+ * it only returns a single filename as we have detected
+ * that the diff compares changes to only one file.
+ *
+ * An exception is made for `a/` and `b/` prefixes often
+ * added by `git` and other utilities to separate the left
+ * from the right when looking at the contents of a single
+ * file over time.
+ *
+ * @param {string} prev - filename of left contents
+ * @param {string} next - filename of right contents
+ *
+ * @return {object} - parsed filename
+ */
+export default function (
+	prev: string,
+	next: string
+): { prev: ParsedFilename; next: ParsedFilename } {
+	// Remove 'a/' and 'b/' prefixes if present
+	const isLikelyPrefixed = prev.startsWith( 'a/' ) && next.startsWith( 'b/' );
+	prev = isLikelyPrefixed ? prev.slice( 2 ) : prev;
+	next = isLikelyPrefixed ? next.slice( 2 ) : next;
+
+	if ( prev === next ) {
+		// Paths are identical
+		const { prefix, path } = decompose( prev );
+		return { prev: { prefix, path }, next: { prefix, path } };
+	}
+
+	// Find longest shared base path ending with a slash
+	const length = Math.max( prev.length, next.length );
+	for ( let i = 0, slash = 0; i < length; i++ ) {
+		if ( prev[ i ] === '/' && next[ i ] === '/' ) {
+			slash = i;
+		}
+
+		if ( prev[ i ] !== next[ i ] ) {
+			return {
+				prev: {
+					prefix: prev.slice( 0, slash ),
+					path: prev.slice( slash ),
+				},
+				next: {
+					prefix: next.slice( 0, slash ),
+					path: next.slice( slash ),
+				},
+			};
+		}
+	}
+
+	// No shared base path
+	return {
+		prev: decompose( prev ),
+		next: decompose( next ),
+	};
+}

package/components/diff-viewer/parse-patch.ts

@@ -0,0 +1,212 @@
+type Hunk = {
+	oldStart: number;
+	oldLines: number;
+	newStart: number;
+	newLines: number;
+	lines: string[];
+};
+
+type Index = {
+	index?: string;
+	hunks?: Hunk[];
+	oldFileName?: string;
+	newFileName?: string;
+	oldHeader?: string;
+	newHeader?: string;
+};
+
+/**
+ * Parse Patch
+ *
+ * Adapted from https://github.com/kpdecker/jsdiff/blob/master/src/patch/parse.js
+ *
+ * @param {string} uniDiff - diff string
+ * @return {Array} - array of parsed files
+ */
+export default function parsePatch( uniDiff: string ) {
+	const diffstr = uniDiff.split( /\n/ );
+	const list = [];
+	let i = 0;
+
+	/**
+	 * Parse Index
+	 */
+	function parseIndex() {
+		const index: Index = {};
+
+		list.push( index );
+
+		// Parse diff metadata
+		while ( i < diffstr.length ) {
+			const line = diffstr[ i ];
+
+			// File header found, end parsing diff metadata
+			if ( /^(---|\+\+\+|@@)\s/.test( line ) ) {
+				break;
+			}
+
+			// Diff index
+			const header = /^(?:Index:|diff(?: -r \w+)+)\s+(.+?)\s*$/.exec( line );
+
+			if ( header ) {
+				index.index = header[ 1 ];
+			}
+
+			i++;
+		}
+
+		// Parse file headers if they are defined. Unified diff requires them, but
+		// there's no technical issues to have an isolated hunk without file header
+		parseFileHeader( index );
+		parseFileHeader( index );
+
+		// Parse hunks
+		index.hunks = [];
+
+		while ( i < diffstr.length ) {
+			const _line = diffstr[ i ];
+
+			if (
+				/^(Index:\s|diff\s|---\s|\+\+\+\s|===================================================================)/.test(
+					_line
+				)
+			) {
+				break;
+			} else if ( /^@@/.test( _line ) ) {
+				index.hunks.push( parseHunk() );
+			} else if ( _line ) {
+				throw new Error( 'Unknown line ' + ( i + 1 ) + ' ' + JSON.stringify( _line ) );
+			} else {
+				i++;
+			}
+		}
+	}
+
+	/**
+	 * Parse File Header
+	 *
+	 * Parses the --- and +++ headers, if none are found, no lines
+	 * are consumed.
+	 *
+	 * @param {Array}    index       - array of parsed files
+	 * @param {unknown}  index.index - index
+	 * @param {object[]} index.hunks - hunks
+	 */
+	function parseFileHeader( index: Index ) {
+		const fileHeader = /^(---|\+\+\+)\s+(.*)\r?$/.exec( diffstr[ i ] );
+
+		if ( fileHeader ) {
+			const keyPrefix = fileHeader[ 1 ] === '---' ? 'old' : 'new';
+
+			const data = fileHeader[ 2 ].split( '\t', 2 );
+
+			let fileName = data[ 0 ].replace( /\\\\/g, '\\' );
+
+			if ( /^".*"$/.test( fileName ) ) {
+				fileName = fileName.substr( 1, fileName.length - 2 );
+			}
+
+			index[ keyPrefix + 'FileName' ] = fileName;
+
+			index[ keyPrefix + 'Header' ] = ( data[ 1 ] || '' ).trim();
+
+			i++;
+		}
+	}
+
+	/**
+	 * Parse Hunk
+	 * This assumes that we are at the start of a hunk.
+	 *
+	 * @return {object} - The parsed hunk.
+	 */
+	function parseHunk(): Hunk {
+		const chunkHeaderIndex = i,
+			chunkHeaderLine = diffstr[ i++ ],
+			chunkHeader = chunkHeaderLine.split( /@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/ );
+
+		const hunk = {
+			oldStart: +chunkHeader[ 1 ],
+			oldLines: typeof chunkHeader[ 2 ] === 'undefined' ? 1 : +chunkHeader[ 2 ],
+			newStart: +chunkHeader[ 3 ],
+			newLines: typeof chunkHeader[ 4 ] === 'undefined' ? 1 : +chunkHeader[ 4 ],
+			lines: [],
+		};
+
+		// Unified Diff Format quirk: If the chunk size is 0,
+		// the first number is one lower than one would expect.
+		// https://www.artima.com/weblogs/viewpost.jsp?thread=164293
+
+		if ( hunk.oldLines === 0 ) {
+			hunk.oldStart += 1;
+		}
+
+		if ( hunk.newLines === 0 ) {
+			hunk.newStart += 1;
+		}
+
+		let addCount = 0,
+			removeCount = 0,
+			_diffstr$i;
+		for (
+			;
+			i < diffstr.length &&
+			( removeCount < hunk.oldLines ||
+				addCount < hunk.newLines ||
+				( ( _diffstr$i = diffstr[ i ] ) !== null &&
+					_diffstr$i !== void 0 &&
+					_diffstr$i.startsWith( '\\' ) ) );
+			i++
+		) {
+			const operation =
+				diffstr[ i ].length === 0 && i !== diffstr.length - 1 ? ' ' : diffstr[ i ][ 0 ];
+
+			if ( operation === '+' || operation === '-' || operation === ' ' || operation === '\\' ) {
+				hunk.lines.push( diffstr[ i ] );
+
+				if ( operation === '+' ) {
+					addCount++;
+				} else if ( operation === '-' ) {
+					removeCount++;
+				} else if ( operation === ' ' ) {
+					addCount++;
+					removeCount++;
+				}
+			} else {
+				throw new Error(
+					`Hunk at line ${ chunkHeaderIndex + 1 } contained invalid line ${ diffstr[ i ] }`
+				);
+			}
+		}
+
+		// Handle the empty block count case
+		if ( ! addCount && hunk.newLines === 1 ) {
+			hunk.newLines = 0;
+		}
+
+		if ( ! removeCount && hunk.oldLines === 1 ) {
+			hunk.oldLines = 0;
+		}
+
+		// Perform sanity checking
+		if ( addCount !== hunk.newLines ) {
+			throw new Error(
+				'Added line count did not match for hunk at line ' + ( chunkHeaderIndex + 1 )
+			);
+		}
+
+		if ( removeCount !== hunk.oldLines ) {
+			throw new Error(
+				'Removed line count did not match for hunk at line ' + ( chunkHeaderIndex + 1 )
+			);
+		}
+
+		return hunk;
+	}
+
+	while ( i < diffstr.length ) {
+		parseIndex();
+	}
+
+	return list;
+}

package/components/diff-viewer/styles.module.scss

@@ -0,0 +1,52 @@
+.diff-viewer {
+	font-size: var( --font-body );
+	line-height: 1.5;
+}
+
+.diff-viewer__filename {
+	padding: calc( var( --spacing-base ) / 2 ) var( --spacing-base ); // 4px | 8px
+	background-color: var( --jp-gray-10 );
+	font-weight: 600;
+}
+
+.diff-viewer__file {
+	background-color: var( --jp-gray-0 );
+	display: flex;
+	font-family: "Courier 10 Pitch", Courier, monospace;
+	flex-direction: row;
+	overflow-x: scroll;
+	white-space: pre;
+}
+
+.diff-viewer__line-numbers {
+	padding: 0 var( --spacing-base ); // 0px | 8px
+	display: flex;
+	flex-direction: column;
+	text-align: right;
+	background-color: var( --jp-gray-10 );
+	color: var( --jp-gray-50 );
+}
+
+.diff-viewer__lines {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow-x: visible;
+
+	& div,
+	& del,
+	& ins {
+		padding: 0 var( --spacing-base ); // 0px | 8px
+		text-decoration: none;
+	}
+
+	& del {
+		background-color: var( --jp-red-0 );
+		color: var( --jp-red-60 );
+	}
+
+	& ins {
+		background-color: var( --jp-green-5 );
+		color: var( --jp-green-60 );
+	}
+}

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

@@ -0,0 +1,34 @@
+import { _x } from '@wordpress/i18n';
+import styles from './styles.module.scss';
+
+const severityClassNames = severity => {
+	if ( severity >= 5 ) {
+		return 'is-critical';
+	} else if ( severity >= 3 && severity < 5 ) {
+		return 'is-high';
+	}
+	return 'is-low';
+};
+
+const severityText = severity => {
+	if ( severity >= 5 ) {
+		return _x( 'Critical', 'Severity label for issues rated 5 or higher.', 'jetpack' );
+	} else if ( severity >= 3 && severity < 5 ) {
+		return _x( 'High', 'Severity label for issues rated between 3 and 5.', 'jetpack' );
+	}
+	return _x( 'Low', 'Severity label for issues rated below 3.', 'jetpack' );
+};
+
+const ThreatSeverityBadge = ( { severity } ) => {
+	return (
+		<div
+			className={ `${ styles[ 'threat-severity-badge' ] } ${
+				styles[ severityClassNames( severity ) ]
+			}` }
+		>
+			{ severityText( severity ) }
+		</div>
+	);
+};
+
+export default ThreatSeverityBadge;

package/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/index.ts

@@ -44,6 +44,7 @@ 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 ThreatSeverityBadge } from './components/threat-severity-badge';
 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';
@@ -79,5 +80,6 @@ export { default as UpsellBanner } from './components/upsell-banner';
 export { getUserLocale, cleanLocale } from './lib/locale';
 export { default as RadioControl } from './components/radio-control';
 export { default as StatCard } from './components/stat-card';
+export { default as DiffViewer } from './components/diff-viewer';
 export { default as MarkedLines } from './components/marked-lines';
 export * from './components/global-notices';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.57.0",
+	"version": "0.58.1",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,7 +15,7 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.42",
+		"@automattic/jetpack-boost-score-api": "^0.1.44",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "6.9.0",
 		"@wordpress/components": "28.9.0",
@@ -30,7 +30,7 @@
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.1.9",
+		"social-logos": "^3.1.10",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
@@ -80,6 +80,7 @@
 	"scripts": {
 		"build": "pnpm run compile-ts",
 		"compile-ts": "tsc --pretty",
-		"test": "NODE_OPTIONS=--experimental-vm-modules jest"
+		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
+		"test-coverage": "pnpm run test --coverage"
 	}
 }