Add Site Scan Feature

.phpstorm.meta.php

@@ -50,6 +50,7 @@
 			'reader_theme_loader'                => \AmpProject\AmpWP\ReaderThemeLoader::class,
 			'reader_theme_support_features'      => \AmpProject\AmpWP\ReaderThemeSupportFeatures::class,
 			'rest.options_controller'            => \AmpProject\AmpWP\OptionsRESTController::class,
+			'rest.scannable_urls_controller'     => \AmpProject\AmpWP\Validation\ScannableURLsRestController::class,
 			'rest.validation_counts_controller'  => \AmpProject\AmpWP\Validation\ValidationCountsRestController::class,
 			'sandboxing'                         => \AmpProject\AmpWP\Sandboxing::class,
 			'save_post_validation_event'         => \AmpProject\AmpWP\Validation\SavePostValidationEvent::class,

assets/src/common/helpers/get-plugin-slug-from-file.js

@@ -0,0 +1,16 @@
+/**
+ * Get plugin slug from file path.
+ *
+ * If the plugin file is in a directory, then the slug is just the directory name. Otherwise, if the file is not
+ * inside of a directory and is just a single-file plugin, then the slug is the filename of the PHP file.
+ *
+ * If the file path contains a file extension, it will be stripped as well.
+ *
+ * See the corresponding PHP logic in `\AmpProject\AmpWP\get_plugin_slug_from_file()`.
+ *
+ * @param {string} path Plugin file path.
+ * @return {string} Plugin slug.
+ */
+export function getPluginSlugFromFile( path = '' ) {
+	return path.replace( /\/.*$/, '' ).replace( /\.php$/, '' );
+}

assets/src/common/helpers/test/get-plugin-slug-from-file.js

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import { getPluginSlugFromFile } from '../get-plugin-slug-from-file';
+
+describe( 'getPluginSlugFromFile', () => {
+	it( 'should return correct plugin slug', () => {
+		expect( getPluginSlugFromFile( 'foo' ) ).toBe( 'foo' );
+		expect( getPluginSlugFromFile( 'foo.php' ) ).toBe( 'foo' );
+		expect( getPluginSlugFromFile( 'foo/bar' ) ).toBe( 'foo' );
+		expect( getPluginSlugFromFile( 'foo/baz.php' ) ).toBe( 'foo' );
+	} );
+} );

assets/src/components/amp-drawer/index.js

@@ -28,11 +28,22 @@ export const HANDLE_TYPE_RIGHT = 'right';
  * @param {any}     props.heading     Content for the drawer heading.
  * @param {string}  props.id          A unique ID for the component.
  * @param {boolean} props.initialOpen Whether the drawer should be initially open.
+ * @param {Object}  props.labelExtra  Optional. Extra content to display on the right side of the option label.
  * @param {boolean} props.selected    Whether to apply the selectable components selected CSS class.
  * @param {string}  props.hiddenTitle A title to go with the button that expands the drawer.
  * @param {string}  props.handleType  Display style for the drawer handle. Either 'full-width' or 'right'.
  */
-export function AMPDrawer( { children = null, className, heading, handleType = HANDLE_TYPE_FULL_WIDTH, id, initialOpen = false, selected = false, hiddenTitle } ) {
+export function AMPDrawer( {
+	children = null,
+	className,
+	heading,
+	handleType = HANDLE_TYPE_FULL_WIDTH,
+	id,
+	initialOpen = false,
+	labelExtra = null,
+	selected = false,
+	hiddenTitle,
+} ) {
 	const [ opened, setOpened ] = useState( initialOpen );
 	const [ resetStatus, setResetStatus ] = useState( null );
 
@@ -94,9 +105,16 @@ export function AMPDrawer( { children = null, className, heading, handleType = H
 			selected={ selected }
 		>
 			{ handleType === HANDLE_TYPE_RIGHT && (
-				<div className="amp-drawer__heading">
-					{ heading }
-				</div>
+				<>
+					<div className="amp-drawer__heading">
+						{ heading }
+					</div>
+					{ labelExtra && (
+						<div className="amp-drawer__label-extra">
+							{ labelExtra }
+						</div>
+					) }
+				</>
 			) }
 			{ 'resetting' !== resetStatus && (
 				<PanelBody
@@ -105,9 +123,16 @@ export function AMPDrawer( { children = null, className, heading, handleType = H
 							{ hiddenTitle }
 						</VisuallyHidden>
 					) : (
-						<div className="amp-drawer__heading">
-							{ heading }
-						</div>
+						<>
+							<div className="amp-drawer__heading">
+								{ heading }
+							</div>
+							{ labelExtra && (
+								<div className="amp-drawer__label-extra">
+									{ labelExtra }
+								</div>
+							) }
+						</>
 					) }
 					className="amp-drawer__panel-body"
 					initialOpen={ initialOpen }
@@ -129,5 +154,6 @@ AMPDrawer.propTypes = {
 	hiddenTitle: PropTypes.node.isRequired,
 	id: PropTypes.string.isRequired,
 	initialOpen: PropTypes.bool,
+	labelExtra: PropTypes.node,
 	selected: PropTypes.bool,
 };

assets/src/components/amp-drawer/style.css

@@ -25,9 +25,7 @@
 	padding-left: 0.75rem;
 	padding-right: 0.75rem;
 	overflow: hidden;
-	position: absolute;
-	top: 0;
-	z-index: 1;
+	flex-grow: 1;
 
 	@media (min-width: 783px) {
 		padding-left: 3rem;
@@ -45,6 +43,14 @@
 	margin-bottom: 0;
 }
 
+.amp-drawer__heading svg {
+	margin-right: 1rem;
+}
+
+.amp-drawer__label-extra svg {
+	fill: none;
+}
+
 .amp .amp-drawer .components-panel__body-title {
 	height: var(--heading-height);
 	margin: 0 0 0 auto;
@@ -63,7 +69,6 @@
 	border-radius: 5px;
 	display: flex;
 	align-items: center;
-	justify-content: center;
 }
 
 .amp .amp-drawer .components-panel__body-title button {
@@ -77,16 +82,15 @@
 }
 
 
-.amp .amp-drawer .components-panel__body-title button span {
+.amp .amp-drawer .components-panel__body-title > button > span {
 	align-items: center;
 	display: flex;
-	height: 100%;
-	margin-left: auto;
 	justify-content: center;
 	width: var(--panel-button-width);
+	order: 100;
 }
 
-.amp .amp-drawer .components-panel__body-title svg {
+.amp .amp-drawer .components-panel__body-toggle.components-button .components-panel__arrow {
 	height: 30px;
 	position: static;
 	transform: none;
@@ -98,7 +102,8 @@
 	}
 }
 
-.amp .amp-drawer--handle-type-full-width .components-panel__body-title svg {
+
+.amp .amp-drawer--handle-type-full-width .components-panel__body-title > button > svg {
 	margin-left: auto;
 
 	@media (min-width: 783px) {
@@ -110,6 +115,11 @@
 	border-radius: 5px;
 }
 
+.amp .amp-drawer .components-panel__body-title .amp-notice {
+	font-family: var(--font-default);
+	font-weight: 400;
+}
+
 .amp .amp-drawer__panel-body {
 	padding: 0;
 	border-top-width: 0;
@@ -135,6 +145,7 @@
 
 .amp .amp-drawer--handle-type-right .amp-drawer__heading {
 	right: var(--panel-button-width);
+	width: calc(100% - var(--panel-button-width));
 }
 
 .amp-drawer--handle-type-right .components-panel__body-title {

assets/src/components/amp-notice/index.js

@@ -12,6 +12,7 @@ import './style.css';
 export const NOTICE_TYPE_ERROR = 'error';
 export const NOTICE_TYPE_WARNING = 'warning';
 export const NOTICE_TYPE_INFO = 'info';
+export const NOTICE_TYPE_PLAIN = 'plain';
 export const NOTICE_TYPE_SUCCESS = 'success';
 
 export const NOTICE_SIZE_SMALL = 'small';
@@ -103,5 +104,5 @@ AMPNotice.propTypes = {
 	children: PropTypes.node,
 	className: PropTypes.string,
 	size: PropTypes.oneOf( [ NOTICE_SIZE_LARGE, NOTICE_SIZE_SMALL ] ),
-	type: PropTypes.oneOf( [ NOTICE_TYPE_INFO, NOTICE_TYPE_SUCCESS, NOTICE_TYPE_ERROR, NOTICE_TYPE_WARNING ] ),
+	type: PropTypes.oneOf( [ NOTICE_TYPE_PLAIN, NOTICE_TYPE_INFO, NOTICE_TYPE_SUCCESS, NOTICE_TYPE_ERROR, NOTICE_TYPE_WARNING ] ),
 };

assets/src/components/amp-notice/style.css

@@ -34,7 +34,8 @@
 	background-color: #effbff;
 }
 
-.amp-notice--info svg {
+.amp-notice--info svg,
+.amp-notice--plain svg {
 	color: var(--amp-settings-color-brand);
 }
 
@@ -51,6 +52,10 @@
 	background-color: #ffefef;
 }
 
+.amp-notice.amp-notice--plain {
+	padding: 1px 5px;
+}
+
 .amp-notice--small {
 	font-size: 14px;
 	line-height: 1.5;

assets/src/components/amp-notice/test/index.js

@@ -12,7 +12,15 @@ import { render } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { AMPNotice, NOTICE_TYPE_SUCCESS, NOTICE_SIZE_LARGE, NOTICE_TYPE_ERROR, NOTICE_SIZE_SMALL, NOTICE_TYPE_INFO } from '..';
+import {
+	AMPNotice,
+	NOTICE_TYPE_SUCCESS,
+	NOTICE_SIZE_LARGE,
+	NOTICE_TYPE_ERROR,
+	NOTICE_SIZE_SMALL,
+	NOTICE_TYPE_INFO,
+	NOTICE_TYPE_PLAIN,
+} from '..';
 
 let container;
 
@@ -78,5 +86,16 @@ describe( 'AMPNotice', () => {
 		} );
 
 		expect( container.querySelector( 'div' ).getAttribute( 'class' ) ).toBe( 'amp-notice amp-notice--info amp-notice--small' );
+
+		act( () => {
+			render(
+				<AMPNotice type={ NOTICE_TYPE_PLAIN } size={ NOTICE_SIZE_SMALL }>
+					{ 'children' }
+				</AMPNotice>,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( 'div' ).getAttribute( 'class' ) ).toBe( 'amp-notice amp-notice--plain amp-notice--small' );
 	} );
 } );

assets/src/components/plugins-context-provider/__mocks__/index.js

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const Plugins = createContext();
+
+/**
+ * MOCK.
+ *
+ * @param {Object}  props
+ * @param {any}     props.children        Component children.
+ * @param {boolean} props.fetchingPlugins Whether fetching plugins or not.
+ * @param {Array}   props.plugins         An array of fetched plugins.
+ */
+export function PluginsContextProvider( {
+	children,
+	fetchingPlugins = false,
+	plugins = [],
+} ) {
+	return (
+		<Plugins.Provider value={
+			{
+				fetchingPlugins,
+				plugins,
+			}
+		}>
+			{ children }
+		</Plugins.Provider>
+	);
+}
+PluginsContextProvider.propTypes = {
+	children: PropTypes.any,
+	fetchingPlugins: PropTypes.bool,
+	plugins: PropTypes.array,
+};