Merge pull request #204 from studiopress/feature/detect-local-environ…

…ment

[GF-3828] Detect Local Environment, Add Dismissible Notice

wp-modules/api-data/api-data.php

@@ -13,6 +13,8 @@
 
 use WP_REST_Request;
 use WP_REST_Response;
+use function \PatternManager\GetEnviroment\get_dismissed_sites;
+use function \PatternManager\GetEnviroment\get_environment_meta_key;
 use function \PatternManager\GetVersionControl\get_dismissed_themes;
 use function \PatternManager\GetVersionControl\get_version_control_meta_key;
 use function \PatternManager\GetWpFilesystem\get_wp_filesystem_api;
@@ -72,6 +74,16 @@ function register_routes() {
 		)
 	);
 
+	register_rest_route(
+		$namespace,
+		'/update-dismissed-sites',
+		array(
+			'methods'             => 'POST',
+			'callback'            => __NAMESPACE__ . '\update_dismissed_sites',
+			'permission_callback' => __NAMESPACE__ . '\permission_check',
+		)
+	);
+
 	register_rest_route(
 		$namespace,
 		'/update-dismissed-themes',
@@ -122,6 +134,26 @@ function delete_pattern( $request ) {
 		: new WP_REST_Response( $is_success, 400 );
 }
 
+/**
+ * Updates the list of sites that should not show environment notifications.
+ *
+ * @param WP_REST_Request $request Full data about the request.
+ * @return WP_REST_Response
+ */
+function update_dismissed_sites( $request ) {
+	$dismissed_sites = array_merge( get_dismissed_sites(), (array) get_current_blog_id() );
+	$is_success      = update_user_meta( get_current_user_id(), get_environment_meta_key(), $dismissed_sites );
+
+	return $is_success
+		? new WP_REST_Response(
+			array(
+				'message' => __( 'Environment notifications dismissed for this site.', 'pattern-manager' ),
+			),
+			200
+		)
+		: new WP_REST_Response( $is_success, 400 );
+}
+
 /**
  * Updates the list of theme names that should not show version control notifications.
  *

wp-modules/api-data/tests/ApiDataTest.php

@@ -70,6 +70,7 @@ public function test_register_routes_authorized() {
 				'/pattern-manager/v1',
 				'/pattern-manager/v1/get-pattern-names',
 				'/pattern-manager/v1/delete-pattern',
+				'/pattern-manager/v1/update-dismissed-sites',
 				'/pattern-manager/v1/update-dismissed-themes',
 			],
 			array_keys( rest_get_server()->get_routes( 'pattern-manager/v1' ) )

wp-modules/app/app.php

@@ -11,6 +11,7 @@
 
 namespace PatternManager\App;
 
+use function PatternManager\GetEnviroment\check_environment_notice_should_show;
 use function PatternManager\GetVersionControl\check_version_control_notice_should_show;
 
 // Exit if accessed directly.
@@ -28,11 +29,13 @@ function get_app_state() {
 		'apiNonce'                 => wp_create_nonce( 'wp_rest' ),
 		'apiEndpoints'             => array(
 			'deletePatternEndpoint'         => get_rest_url( false, 'pattern-manager/v1/delete-pattern/' ),
+			'updateDismissedSitesEndpoint'  => get_rest_url( false, 'pattern-manager/v1/update-dismissed-sites/' ),
 			'updateDismissedThemesEndpoint' => get_rest_url( false, 'pattern-manager/v1/update-dismissed-themes/' ),
 		),
 		'siteUrl'                  => get_bloginfo( 'url' ),
 		'adminUrl'                 => admin_url(),
 		'showVersionControlNotice' => check_version_control_notice_should_show( wp_get_theme()->get( 'Name' ) ),
+		'showEnvironmentNotice'    => check_environment_notice_should_show( get_current_blog_id() ),
 	);
 }
 

wp-modules/app/js/src/components/App/index.scss

@@ -129,21 +129,32 @@ html body.toplevel_page_pattern-manager {
 		}
 	}
 
-	.patternmanager-version-control-notice {
-		margin-left: auto;
-		margin-right: auto;
+	.patternmanager-notice-container {
 		margin-bottom: 3rem;
-		padding-right: 12px;
-		padding-left: 12px;
-
-		.components-notice__content {
-			margin-right: 0;
 
-			span {
-				margin-left: 2px;
-				text-decoration: none;
+		.patternmanager-notice {
+			margin-left: auto;
+			margin-right: auto;
+			padding-right: 12px;
+			padding-left: 12px;
+
+			.components-notice__content {
+				margin-right: 0;
+
+				span {
+					margin-left: 2px;
+					text-decoration: none;
+				}
 			}
 		}
+
+		.is-error {
+			background-color: #f8ebea;
+		}
+
+		.patternmanager-notice:not(:last-child) {
+			margin-bottom: 2rem;
+		}
 	}
 
 	.patternmanager-pattern-editor-columns {

wp-modules/app/js/src/components/App/index.tsx

@@ -14,6 +14,7 @@ import { patternManager } from '../../globals';
 import PatternManagerContext from '../../contexts/PatternManagerContext';
 
 // Hooks
+import useEnvironment from '../../hooks/useEnvironment';
 import usePatterns from '../../hooks/usePatterns';
 import useVersionControl from '../../hooks/useVersionControl';
 
@@ -23,7 +24,7 @@ import Patterns from '../Patterns';
 const PatternGridActions: PatternGridActionsType = loadable(
 	async () => import( '../Patterns/PatternGridActions' )
 );
-import VersionControlNotice from '../VersionControlNotice';
+import { EnvironmentNotice, VersionControlNotice } from '../Notices';
 
 // Types
 import type { InitialContext } from '../../types';
@@ -34,6 +35,9 @@ export default function App() {
 	const versionControl = useVersionControl(
 		Boolean( patternManager.showVersionControlNotice )
 	);
+	const environment = useEnvironment(
+		Boolean( patternManager.showEnvironmentNotice )
+	);
 
 	const providerValue: InitialContext = {
 		patterns,
@@ -44,10 +48,18 @@ export default function App() {
 			<Header />
 			<Patterns
 				Notice={
-					<VersionControlNotice
-						isVisible={ versionControl.displayNotice }
-						handleDismiss={ versionControl.updateDismissedThemes }
-					/>
+					<div className="patternmanager-notice-container">
+						<EnvironmentNotice
+							isVisible={ environment.displayNotice }
+							handleDismiss={ environment.updateDismissedSites }
+						/>
+						<VersionControlNotice
+							isVisible={ versionControl.displayNotice }
+							handleDismiss={
+								versionControl.updateDismissedThemes
+							}
+						/>
+					</div>
 				}
 				PatternActions={ PatternGridActions }
 				patternCategories={ patternManager.patternCategories }

wp-modules/app/js/src/components/Notices/EnvironmentNotice/index.tsx

@@ -0,0 +1,51 @@
+// WP dependencies
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+import { Notice, Dashicon } from '@wordpress/components';
+
+type Props = {
+	isVisible: boolean;
+	handleDismiss: () => void;
+};
+
+/** Display a notice if no version control is detected in the theme. */
+export default function EnvironmentNotice( {
+	isVisible,
+	handleDismiss,
+}: Props ) {
+	return isVisible ? (
+		<Notice
+			className="patternmanager-notice"
+			isDismissible
+			status="error"
+			onRemove={ handleDismiss }
+		>
+			{ createInterpolateElement(
+				__(
+					'A local development environment was not detected. Pattern Manager is not intended for use on a live site. <div></div>Download <a></a>.',
+					'pattern-manager'
+				),
+				{
+					div: <div style={ { marginTop: '1rem' } }></div>,
+					a: (
+						<a
+							href="https://localwp.com/?modal=download"
+							target="_blank"
+							rel="noopener noreferrer"
+							aria-label="Download Local by WP Engine (opens in new tab)"
+						>
+							{ __( 'Local by WP Engine', 'pattern-manager' ) }
+							<span className="screen-reader-text">
+								{ __(
+									'(opens in a new tab)',
+									'pattern-manager'
+								) }
+							</span>
+							<Dashicon icon={ 'external' } />
+						</a>
+					),
+				}
+			) }
+		</Notice>
+	) : null;
+}

wp-modules/app/js/src/components/Notices/EnvironmentNotice/test/index.spec.tsx

@@ -0,0 +1,47 @@
+import { create, act } from 'react-test-renderer';
+import EnvironmentNotice from '..';
+
+it( 'EnvironmentNotice is not visible when passed falsy isVisible', () => {
+	const testRenderer = create(
+		<EnvironmentNotice isVisible={ false } handleDismiss={ () => {} } />
+	);
+
+	expect( testRenderer.toJSON() ).toBeNull();
+
+	testRenderer.unmount();
+} );
+
+it( 'EnvironmentNotice is visible when passed truthy isVisible', () => {
+	const testRenderer = create(
+		<EnvironmentNotice isVisible={ true } handleDismiss={ () => {} } />
+	);
+
+	expect( testRenderer.toJSON() ).toMatchObject( {
+		props: {
+			className:
+				'patternmanager-notice components-notice is-error is-dismissible',
+		},
+		type: 'div',
+	} );
+
+	testRenderer.unmount();
+} );
+
+it( 'EnvironmentNotice is dismissible', () => {
+	const handleDismissSpy = jest.fn();
+	const testRenderer = create(
+		<EnvironmentNotice
+			isVisible={ true }
+			handleDismiss={ handleDismissSpy }
+		/>
+	);
+
+	// Dismiss the notice.
+	act( () => {
+		testRenderer.root.findByProps( { type: 'button' } ).props.onClick();
+	} );
+
+	expect( handleDismissSpy ).toHaveBeenCalled();
+
+	testRenderer.unmount();
+} );

wp-modules/app/js/src/components/VersionControlNotice/index.tsx → wp-modules/app/js/src/components/Notices/VersionControlNotice/index.tsx

@@ -15,7 +15,7 @@ export default function VersionControlNotice( {
 }: Props ) {
 	return isVisible ? (
 		<Notice
-			className="patternmanager-version-control-notice"
+			className="patternmanager-notice"
 			isDismissible
 			status="warning"
 			onRemove={ handleDismiss }
@@ -29,9 +29,7 @@ export default function VersionControlNotice( {
 					div: <div style={ { marginTop: '1rem' } }></div>,
 					a: (
 						<a
-							href={
-								'https://developer.wpengine.com/knowledge-base/using-git-with-a-wordpress-theme/'
-							}
+							href="https://developer.wpengine.com/knowledge-base/using-git-with-a-wordpress-theme/"
 							target="_blank"
 							rel="noopener noreferrer"
 							aria-label="Link to our Git Guide (opens in new tab)"

wp-modules/app/js/src/components/VersionControlNotice/test/index.spec.tsx → wp-modules/app/js/src/components/Notices/VersionControlNotice/test/index.spec.tsx

@@ -19,7 +19,7 @@ it( 'VersionControlNotice is visible when passed truthy isVisible', () => {
 	expect( testRenderer.toJSON() ).toMatchObject( {
 		props: {
 			className:
-				'patternmanager-version-control-notice components-notice is-warning is-dismissible',
+				'patternmanager-notice components-notice is-warning is-dismissible',
 		},
 		type: 'div',
 	} );

wp-modules/app/js/src/components/Notices/index.ts

@@ -0,0 +1,2 @@
+export { default as EnvironmentNotice } from './EnvironmentNotice';
+export { default as VersionControlNotice } from './VersionControlNotice';

wp-modules/app/js/src/hooks/useEnvironment.ts

@@ -0,0 +1,25 @@
+import { useState } from '@wordpress/element';
+import { patternManager } from '../globals';
+import getHeaders from '../utils/getHeaders';
+
+export default function useEnvironment( initialEnvironmentNotice: boolean ) {
+	const [ displayNotice, setDisplayNotice ] = useState(
+		initialEnvironmentNotice
+	);
+
+	function updateDismissedSites() {
+		setDisplayNotice( false );
+		return fetch(
+			patternManager.apiEndpoints.updateDismissedSitesEndpoint,
+			{
+				method: 'POST',
+				headers: getHeaders(),
+			}
+		);
+	}
+
+	return {
+		displayNotice,
+		updateDismissedSites,
+	};
+}

wp-modules/app/js/src/hooks/useVersionControl.ts

@@ -1,7 +1,6 @@
 import { useState } from '@wordpress/element';
 import { patternManager } from '../globals';
 import getHeaders from '../utils/getHeaders';
-import type { Theme } from '../types';
 
 export default function useVersionControl(
 	initialVersionControlNotice: boolean

wp-modules/app/js/src/types.ts

@@ -11,12 +11,14 @@ export type InitialPatternManager = {
 	adminUrl: string;
 	apiEndpoints: {
 		deletePatternEndpoint: string;
+		updateDismissedSitesEndpoint: string;
 		updateDismissedThemesEndpoint: string;
 	};
 	apiNonce: string;
 	patternCategories: QueriedCategories;
 	patterns: Patterns;
 	siteUrl: string;
+	showEnvironmentNotice: boolean;
 	showVersionControlNotice: boolean;
 };
 
@@ -52,7 +54,3 @@ export type QueriedCategories = {
 	label: string;
 	name: string;
 }[];
-
-export type Theme = {
-	name: string;
-};

wp-modules/app/tests/AppTest.php

@@ -29,6 +29,7 @@ public function test_get_app_state() {
 				'siteUrl',
 				'adminUrl',
 				'showVersionControlNotice',
+				'showEnvironmentNotice',
 			],
 			array_keys( get_app_state() )
 		);