Do async site scan on plugin activation instead of synchronous validation

.eslintrc

@@ -60,7 +60,7 @@
     "react/no-unused-prop-types": "error",
     "react/self-closing-comp": "error",
     "import/no-unresolved": [ "error", {
-      "ignore": [ "jquery", "amp-block-editor-data", "amp-settings", "amp-themes", "amp-plugins", "amp-support", "amp-block-validation" ]
+      "ignore": [ "jquery", "amp-block-editor-data", "amp-settings", "amp-themes", "amp-plugins", "amp-support", "amp-block-validation", "amp-site-scan-notice" ]
     } ],
     "import/order": [ "error", { "groups": [ "builtin", [ "external", "unknown" ], "internal", "parent", "sibling", "index" ] } ],
     "jsdoc/check-indentation": "error",

.phpstorm.meta.php

@@ -45,6 +45,7 @@
 			'paired_routing'                     => \AmpProject\AmpWP\PairedRouting::class,
 			'paired_url'                         => \AmpProject\AmpWP\PairedUrl::class,
 			'plugin_activation_notice'           => \AmpProject\AmpWP\Admin\PluginActivationNotice::class,
+			'plugin_activation_site_scan'        => \AmpProject\AmpWP\Admin\PluginActivationSiteScan::class,
 			'plugin_registry'                    => \AmpProject\AmpWP\PluginRegistry::class,
 			'plugin_suppression'                 => \AmpProject\AmpWP\PluginSuppression::class,
 			'reader_theme_loader'                => \AmpProject\AmpWP\ReaderThemeLoader::class,

assets/src/admin/site-scan-notice/index.js

@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import {
+	APP_ROOT_ID,
+	OPTIONS_REST_PATH,
+	SCANNABLE_URLS_REST_PATH,
+	USER_FIELD_DEVELOPER_TOOLS_ENABLED,
+	USERS_RESOURCE_REST_PATH,
+	VALIDATE_NONCE,
+} from 'amp-site-scan-notice'; // From WP inline script.
+
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+import { render } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { ErrorContextProvider } from '../../components/error-context-provider';
+import { OptionsContextProvider } from '../../components/options-context-provider';
+import { PluginsContextProvider } from '../../components/plugins-context-provider';
+import { SiteScanContextProvider } from '../../components/site-scan-context-provider';
+import { UserContextProvider } from '../../components/user-context-provider';
+import { ErrorScreen } from '../../components/error-screen';
+import { ErrorBoundary } from '../../components/error-boundary';
+import { SiteScanNotice } from './notice';
+
+let errorHandler;
+
+/**
+ * Context providers for the application.
+ *
+ * @param {Object} props          Component props.
+ * @param {any}    props.children Component children.
+ */
+function Providers( { children } ) {
+	global.removeEventListener( 'error', errorHandler );
+
+	return (
+		<ErrorContextProvider>
+			<ErrorBoundary
+				title={ __( 'The AMP Site Scanner has experienced an error.', 'amp' ) }
+			>
+				<OptionsContextProvider
+					hasErrorBoundary={ true }
+					optionsRestPath={ OPTIONS_REST_PATH }
+					populateDefaultValues={ false }
+				>
+					<UserContextProvider
+						onlyFetchIfPluginIsConfigured={ true }
+						userOptionDeveloperTools={ USER_FIELD_DEVELOPER_TOOLS_ENABLED }
+						usersResourceRestPath={ USERS_RESOURCE_REST_PATH }
+					>
+						<PluginsContextProvider hasErrorBoundary={ true }>
+							<SiteScanContextProvider
+								scannableUrlsRestPath={ SCANNABLE_URLS_REST_PATH }
+								validateNonce={ VALIDATE_NONCE }
+							>
+								{ children }
+							</SiteScanContextProvider>
+						</PluginsContextProvider>
+					</UserContextProvider>
+				</OptionsContextProvider>
+			</ErrorBoundary>
+		</ErrorContextProvider>
+	);
+}
+Providers.propTypes = {
+	children: PropTypes.any,
+};
+
+domReady( () => {
+	const root = document.getElementById( APP_ROOT_ID );
+
+	if ( ! root ) {
+		return;
+	}
+
+	errorHandler = ( event ) => {
+		// Handle only own errors.
+		if ( event.filename && /amp-site-scan-notice(\.min)?\.js/.test( event.filename ) ) {
+			render( <ErrorScreen error={ event.error } />, root );
+		}
+	};
+
+	global.addEventListener( 'error', errorHandler );
+
+	render(
+		<Providers>
+			<SiteScanNotice />
+		</Providers>,
+		root,
+	);
+} );

assets/src/admin/site-scan-notice/notice.js

@@ -0,0 +1,113 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import {
+	AMP_COMPATIBLE_PLUGINS_URL,
+	SETTINGS_LINK,
+} from 'amp-site-scan-notice'; // From WP inline script.
+
+/**
+ * Internal dependencies
+ */
+import { SiteScan } from '../../components/site-scan-context-provider';
+import {
+	AMP_ADMIN_NOTICE_TYPE_ERROR,
+	AMP_ADMIN_NOTICE_TYPE_INFO,
+	AMP_ADMIN_NOTICE_TYPE_SUCCESS,
+	AMP_ADMIN_NOTICE_TYPE_WARNING,
+	AmpAdminNotice,
+} from '../../components/amp-admin-notice';
+import { Loading } from '../../components/loading';
+import { isExternalUrl } from '../../common/helpers/is-external-url';
+import { PluginsWithAmpIncompatibility } from './plugins-with-amp-incompatibility';
+
+// Define Plugin Suppression link.
+const PLUGIN_SUPPRESSION_LINK = new URL( SETTINGS_LINK );
+PLUGIN_SUPPRESSION_LINK.hash = 'plugin-suppression';
+
+export function SiteScanNotice() {
+	const {
+		cancelSiteScan,
+		fetchScannableUrls,
+		isCancelled,
+		isCompleted,
+		isFailed,
+		isInitializing,
+		isReady,
+		pluginsWithAmpIncompatibility,
+		startSiteScan,
+	} = useContext( SiteScan );
+
+	// Cancel scan on component unmount.
+	useEffect( () => cancelSiteScan, [ cancelSiteScan ] );
+
+	// Fetch scannable URLs on mount. Start site scan right after the component is mounted and the scanner is ready.
+	useEffect( () => {
+		if ( isInitializing ) {
+			fetchScannableUrls();
+		} else if ( isReady ) {
+			startSiteScan();
+		}
+	}, [ fetchScannableUrls, isInitializing, isReady, startSiteScan ] );
+
+	const commonNoticeProps = {
+		className: 'amp-site-scan-notice',
+		isDismissible: true,
+		onDismiss: cancelSiteScan,
+	};
+
+	if ( isFailed || isCancelled ) {
+		return (
+			<AmpAdminNotice type={ AMP_ADMIN_NOTICE_TYPE_ERROR } { ...commonNoticeProps }>
+				<p>
+					{ __( 'AMP could not check your site for compatibility issues.', 'amp' ) }
+				</p>
+			</AmpAdminNotice>
+		);
+	}
+
+	if ( isCompleted && pluginsWithAmpIncompatibility.length === 0 ) {
+		return (
+			<AmpAdminNotice type={ AMP_ADMIN_NOTICE_TYPE_SUCCESS } { ...commonNoticeProps }>
+				<p>
+					{ __( 'No AMP compatibility issues detected.', 'amp' ) }
+				</p>
+			</AmpAdminNotice>
+		);
+	}
+
+	if ( isCompleted && pluginsWithAmpIncompatibility.length > 0 ) {
+		return (
+			<AmpAdminNotice type={ AMP_ADMIN_NOTICE_TYPE_WARNING } { ...commonNoticeProps }>
+				<PluginsWithAmpIncompatibility pluginsWithAmpIncompatibility={ pluginsWithAmpIncompatibility } />
+				<div className="amp-site-scan-notice__cta">
+					<a href={ PLUGIN_SUPPRESSION_LINK } className="button">
+						{ __( 'Review Plugin Suppression', 'amp' ) }
+					</a>
+					<a
+						href={ AMP_COMPATIBLE_PLUGINS_URL }
+						className="button"
+						{ ...isExternalUrl( AMP_COMPATIBLE_PLUGINS_URL ) ? { target: '_blank', rel: 'noopener noreferrer' } : {} }
+					>
+						{ __( 'View AMP-Compatible Plugins', 'amp' ) }
+					</a>
+				</div>
+			</AmpAdminNotice>
+		);
+	}
+
+	return (
+		<AmpAdminNotice type={ AMP_ADMIN_NOTICE_TYPE_INFO } { ...commonNoticeProps }>
+			<p>
+				{ __( 'Checking your site for AMP compatibility issues…', 'amp' ) }
+				<Loading inline={ true } />
+			</p>
+		</AmpAdminNotice>
+	);
+}

assets/src/admin/site-scan-notice/plugins-with-amp-incompatibility.js

@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { _n, sprintf } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { Plugins } from '../../components/plugins-context-provider';
+import { getPluginSlugFromFile } from '../../common/helpers/get-plugin-slug-from-file';
+
+/**
+ * Render a DETAILS element for each plugin causing AMP incompatibilities.
+ *
+ * @param {Object} props                               Component props.
+ * @param {Array}  props.pluginsWithAmpIncompatibility Array of plugins with AMP incompatibilities.
+ */
+export function PluginsWithAmpIncompatibility( { pluginsWithAmpIncompatibility } ) {
+	const { fetchingPlugins, plugins } = useContext( Plugins );
+
+	if ( fetchingPlugins ) {
+		return null;
+	}
+
+	const pluginNames = Object.values( plugins ).reduce( ( accumulatedPluginNames, plugin ) => {
+		return {
+			...accumulatedPluginNames,
+			[ getPluginSlugFromFile( plugin.plugin ) ]: plugin.name,
+		};
+	}, {} );
+
+	return (
+		<>
+			<p>
+				{ _n(
+					'AMP compatibility issues discovered with the following plugin:',
+					'AMP compatibility issues discovered with the following plugins:',
+					pluginsWithAmpIncompatibility.length,
+					'amp',
+				) }
+			</p>
+			{ pluginsWithAmpIncompatibility.map( ( pluginWithAmpIncompatibility ) => (
+				<details
+					key={ pluginWithAmpIncompatibility.slug }
+					className="amp-site-scan-notice__plugin-details"
+				>
+					<summary
+						className="amp-site-scan-notice__plugin-summary"
+						dangerouslySetInnerHTML={ {
+							__html: sprintf(
+								/* translators: 1: plugin name; 2: number of URLs with AMP validation issues. */
+								_n(
+									'<b>%1$s</b> on %2$d URL',
+									'<b>%1$s</b> on %2$d URLs',
+									pluginWithAmpIncompatibility.urls.length,
+									'amp',
+								),
+								pluginNames[ pluginWithAmpIncompatibility.slug ],
+								pluginWithAmpIncompatibility.urls.length,
+							),
+						} }
+					/>
+					<ul className="amp-site-scan-notice__urls-list">
+						{ pluginWithAmpIncompatibility.urls.map( ( url ) => (
+							<li key={ url }>
+								<a href={ url } target="_blank" rel="noopener noreferrer">
+									{ url }
+								</a>
+							</li>
+						) ) }
+					</ul>
+				</details>
+			) ) }
+		</>
+	);
+}
+
+PluginsWithAmpIncompatibility.propTypes = {
+	pluginsWithAmpIncompatibility: PropTypes.arrayOf(
+		PropTypes.shape( {
+			slug: PropTypes.string,
+			urls: PropTypes.arrayOf( PropTypes.string ),
+		} ),
+	),
+};

assets/src/admin/site-scan-notice/style.scss

@@ -0,0 +1,22 @@
+.amp-site-scan-notice__cta {
+	display: flex;
+	flex-flow: row;
+	margin: 0.5rem 0 1rem;
+
+	> .button + .button {
+		margin-left: 0.5rem;
+	}
+}
+
+.amp-site-scan-notice__plugin-details {
+	margin: 0.5rem 0;
+}
+
+.amp-site-scan-notice__plugin-summary {
+	cursor: pointer;
+}
+
+.amp-site-scan-notice__urls-list {
+	margin: 0.5rem 0 1rem;
+	padding: 0 1rem;
+}