Use React-based component for Stylesheets box on Validated URL screen

.phpstorm.meta.php

@@ -15,6 +15,7 @@
 			'admin.paired_browsing'              => \AmpProject\AmpWP\Admin\PairedBrowsing::class,
 			'admin.plugin_row_meta'              => \AmpProject\AmpWP\Admin\PluginRowMeta::class,
 			'admin.polyfills'                    => \AmpProject\AmpWP\Admin\Polyfills::class,
+			'admin.rest_preloader'               => \AmpProject\AmpWP\Admin\RESTPreloader::class,
 			'admin.validation_counts'            => \AmpProject\AmpWP\Admin\ValidationCounts::class,
 			'amp_slug_customization_watcher'     => \AmpProject\AmpWP\AmpSlugCustomizationWatcher::class,
 			'background_task_deactivator'        => \AmpProject\AmpWP\BackgroundTask\BackgroundTaskDeactivator::class,
@@ -53,6 +54,7 @@
 			'site_health_integration'            => \AmpProject\AmpWP\Admin\SiteHealth::class,
 			'url_validation_cron'                => \AmpProject\AmpWP\Validation\URLValidationCron::class,
 			'url_validation_rest_controller'     => \AmpProject\AmpWP\Validation\URLValidationRESTController::class,
+			'validated_url_rest_controller'      => \AmpProject\AmpWP\Validation\ValidatedUrlRESTController::class,
 			'validated_url_stylesheet_gc'        => \AmpProject\AmpWP\BackgroundTask\ValidatedUrlStylesheetDataGarbageCollection::class,
 		] )
 	);

assets/css/src/amp-validation-error-taxonomy.scss

@@ -1,5 +1,3 @@
-@import "./components/amp-stylesheet-list";
-@import "./components/amp-stylesheet-summary";
 @import "./components/details-column";
 @import "./components/error-details-toggle";
 @import "./components/wp-list-table-grid-lines";

assets/css/src/components/_details-column.scss

@@ -29,8 +29,7 @@
 	}
 }
 
-.details-attributes__summary,
-.toggle-stylesheet-details {
+.details-attributes__summary {
 
 	&::after {
 		background-image: url("../images/down-triangle.svg");
@@ -46,7 +45,6 @@
 }
 
 tr.expanded .details-attributes__summary,
-tr.expanded .toggle-stylesheet-details,
 details[open] > .details-attributes__summary {
 
 	&::after {

assets/src/amp-validation/amp-validated-url-post-edit-screen.js

@@ -31,7 +31,6 @@ domReady( () => {
 	handleRowEvents();
 	handleBulkActions();
 	watchForUnsavedChanges();
-	setupStylesheetsMetabox();
 	handleCopyToClipboardButtons();
 } );
 
@@ -382,27 +381,3 @@ const handleBulkActions = () => {
 		} );
 	} );
 };
-
-/**
- * Set up stylesheet metabox.
- */
-const setupStylesheetsMetabox = () => {
-	const metabox = document.getElementById( 'amp_stylesheets' );
-
-	for ( const toggleStylesheetDetailsButton of metabox.querySelectorAll( '.toggle-stylesheet-details' ) ) {
-		const row = toggleStylesheetDetailsButton.closest( 'tr' );
-		toggleStylesheetDetailsButton.addEventListener( 'click', () => {
-			row.classList.toggle( 'expanded' );
-		} );
-	}
-
-	for ( const stylesheetDetailsElements of metabox.querySelectorAll( '.stylesheet-details' ) ) {
-		const shakenStylesheetContainer = stylesheetDetailsElements.querySelector( '.shaken-stylesheet' );
-		const showRemovedStylesCheckbox = stylesheetDetailsElements.querySelector( '.show-removed-styles' );
-		if ( showRemovedStylesCheckbox ) {
-			showRemovedStylesCheckbox.addEventListener( 'click', () => {
-				shakenStylesheetContainer.classList.toggle( 'removed-styles-shown', showRemovedStylesCheckbox.checked );
-			} );
-		}
-	}
-};

assets/src/block-validation/components/amp-document-status/index.js

@@ -11,7 +11,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import AMPValidationErrorsKeptIcon from '../../../../images/amp-validation-errors-kept.svg';
 import BellIcon from '../../../../images/bell-icon.svg';
 import { BLOCK_VALIDATION_STORE_KEY } from '../../store';
-import { StatusIcon } from '../icon';
+import { StatusIcon } from '../../../components/icon';
 import { SidebarNotification } from '../sidebar-notification';
 import { useAMPDocumentToggle } from '../../hooks/use-amp-document-toggle';
 import { useErrorsFetchingStateChanges } from '../../hooks/use-errors-fetching-state-changes';

assets/src/block-validation/components/amp-validation-status/status-notification.js

@@ -10,7 +10,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import AMPValidationErrorsKeptIcon from '../../../../images/amp-validation-errors-kept.svg';
 import { BLOCK_VALIDATION_STORE_KEY } from '../../store';
-import { StatusIcon } from '../icon';
+import { StatusIcon } from '../../../components/icon';
 import { SidebarNotification } from '../sidebar-notification';
 import { useErrorsFetchingStateChanges } from '../../hooks/use-errors-fetching-state-changes';
 

assets/src/block-validation/components/with-amp-toolbar-button/amp-toolbar-button.js

@@ -13,7 +13,7 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { ToolbarIcon } from '../icon';
+import { ToolbarIcon } from '../../../components/icon';
 import { PLUGIN_NAME, SIDEBAR_NAME } from '../../plugins/amp-block-validation';
 import { useAMPDocumentToggle } from '../../hooks/use-amp-document-toggle';
 

assets/src/block-validation/plugins/amp-block-validation.js

@@ -9,7 +9,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { BLOCK_VALIDATION_STORE_KEY } from '../store';
-import { MoreMenuIcon, ToolbarIcon } from '../components/icon';
+import { MoreMenuIcon, ToolbarIcon } from '../../components/icon';
 import { Sidebar } from '../components/sidebar';
 import { InvalidBlockOutline } from '../components/invalid-block-outline';
 import { usePostDirtyStateChanges } from '../hooks/use-post-dirty-state-changes';

assets/src/components/formatted-memory-value/index.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { numberFormat } from '../../utils/number-format';
+
+function getMemoryUnit( unit ) {
+	if ( ! unit || typeof unit !== 'string' ) {
+		return null;
+	}
+
+	switch ( unit.toLowerCase() ) {
+		case 'b':
+			return {
+				name: __( 'bytes', 'amp' ),
+				abbreviation: _x( 'B', 'abbreviation for bytes', 'amp' ),
+			};
+		case 'kb':
+			return {
+				name: __( 'kilobytes', 'amp' ),
+				abbreviation: _x( 'kB', 'abbreviation for kilobytes', 'amp' ),
+			};
+		default:
+			return null;
+	}
+}
+
+export default function FormattedMemoryValue( { value, unit } ) {
+	const memoryUnit = getMemoryUnit( unit );
+
+	return (
+		<>
+			{ numberFormat( value ) }
+			{ memoryUnit && (
+				<>
+					{ ' ' }
+					<abbr title={ memoryUnit.name }>
+						{ memoryUnit.abbreviation }
+					</abbr>
+				</>
+			) }
+			{ ! memoryUnit && unit && ` ${ unit }` }
+		</>
+	);
+}
+FormattedMemoryValue.propTypes = {
+	value: PropTypes.oneOfType( [ PropTypes.number, PropTypes.string ] ).isRequired,
+	unit: PropTypes.string,
+};

assets/src/components/formatted-memory-value/test/index.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+
+/**
+ * Internal dependencies
+ */
+import FormattedMemoryValue from '..';
+
+let container;
+
+describe( 'FormattedMemoryValue', () => {
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		document.body.removeChild( container );
+		container = null;
+	} );
+
+	it( 'prints bare value if no unit is provided', () => {
+		act( () => {
+			render(
+				<FormattedMemoryValue value={ 123 } />,
+				container,
+			);
+		} );
+
+		expect( container.textContent ).toBe( '123' );
+	} );
+
+	it( 'prints correct output if value is a string', () => {
+		act( () => {
+			render(
+				<FormattedMemoryValue value="234" />,
+				container,
+			);
+		} );
+
+		expect( container.textContent ).toBe( '234' );
+	} );
+
+	it( 'prints correct output for unknown units', () => {
+		act( () => {
+			render(
+				<FormattedMemoryValue value="234" unit="FooBar" />,
+				container,
+			);
+		} );
+
+		expect( container.textContent ).toBe( '234 FooBar' );
+	} );
+
+	it( 'prints correct value and unit', () => {
+		act( () => {
+			render(
+				<FormattedMemoryValue value="345" unit="B" />,
+				container,
+			);
+		} );
+
+		expect( container.textContent ).toBe( '345 B' );
+		expect( container.querySelector( 'abbr' ) ).not.toBeNull();
+		expect( container.querySelector( 'abbr' ).title ).toBe( 'bytes' );
+	} );
+
+	it.each( [
+		[ 'bytes', 'B', 'B' ],
+		[ 'bytes', 'b', 'B' ],
+		[ 'kilobytes', 'kB', 'kB' ],
+		[ 'kilobytes', 'kb', 'kB' ],
+		[ 'kilobytes', 'KB', 'kB' ],
+	] )(
+		'prints correct %s value and unit for the following input unit: %s',
+		( fullName, inputUnit, abbreviation ) => {
+			act( () => {
+				render(
+					<FormattedMemoryValue value="100" unit={ inputUnit } />,
+					container,
+				);
+			} );
+
+			expect( container.querySelector( 'abbr' ).title ).toBe( fullName );
+			expect( container.querySelector( 'abbr' ).textContent ).toBe( abbreviation );
+		},
+	);
+} );

assets/src/block-validation/components/icon/index.js → assets/src/components/icon/index.js

@@ -7,9 +7,12 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import './style.css';
-import AMPLogoIcon from '../../../../images/amp-logo-icon.svg';
-import AMPToolbarIcon from '../../../../images/amp-icon-toolbar.svg';
-import AMPToolbarIconBroken from '../../../../images/amp-toolbar-icon-broken.svg';
+import AMPLogoIcon from '../../../images/amp-logo-icon.svg';
+import AMPToolbarIcon from '../../../images/amp-icon-toolbar.svg';
+import AMPToolbarIconBroken from '../../../images/amp-toolbar-icon-broken.svg';
+import AMPValidIcon from '../../../images/amp-valid.svg';
+import AMPWarningIcon from '../../../images/amp-warning.svg';
+import AMPAlertIcon from '../../../images/amp-alert.svg';
 
 /**
  * Plugin icon.
@@ -94,3 +97,43 @@ export function StatusIcon( { broken = false } ) {
 StatusIcon.propTypes = {
 	broken: PropTypes.bool,
 };
+
+/**
+ * Renders the validation status icon.
+ *
+ * @param {Object} props
+ * @param {boolean} props.isError Flag indicating the icon is for an error status.
+ * @param {boolean} props.isWarning Flag indicating the icon is for a warning status.
+ * @param {boolean} props.isValid Flag indicating the icon is for a valid status.
+ * @param {boolean} props.isBoxed Whether the icon should be contained in a box.
+ */
+export function ValidationStatusIcon( { isError, isWarning, isValid, isBoxed = false, ...rest } ) {
+	let type;
+
+	if ( isError ) {
+		type = 'error';
+	} else if ( isWarning ) {
+		type = 'warning';
+	} else if ( isValid ) {
+		type = 'valid';
+	} else {
+		return null;
+	}
+
+	return (
+		<span
+			className={ `amp-validation-status-icon amp-validation-status-icon--${ type } ${ isBoxed ? 'amp-validation-status-icon--boxed' : '' }` }
+			{ ...rest }
+		>
+			{ isValid && <AMPValidIcon /> }
+			{ isWarning && <AMPWarningIcon /> }
+			{ isError && <AMPAlertIcon /> }
+		</span>
+	);
+}
+ValidationStatusIcon.propTypes = {
+	isError: PropTypes.bool,
+	isWarning: PropTypes.bool,
+	isValid: PropTypes.bool,
+	isBoxed: PropTypes.bool,
+};

assets/src/block-validation/components/icon/style.css → assets/src/components/icon/style.css

@@ -79,3 +79,30 @@
 .is-pressed .amp-error-count-badge {
 	border-color: #1e1e1e;
 }
+
+/*
+ * AMP validation status icons.
+ */
+.amp-validation-status-icon {
+	display: inline-block;
+	height: 16px;
+	vertical-align: middle;
+	width: 16px;
+}
+
+.amp-validation-status-icon--boxed {
+	border-radius: 5px;
+	padding: 2px;
+}
+
+.amp-validation-status-icon--boxed.amp-validation-status-icon--valid {
+	background-color: #d3e5e5;
+}
+
+.amp-validation-status-icon--boxed.amp-validation-status-icon--warning {
+	background-color: #fff6dd;
+}
+
+.amp-validation-status-icon--boxed.amp-validation-status-icon--error {
+	background-color: #f7ded4;
+}