Add remote spec rule validator UI (#45099)

* Add Remote Spec Rule validator

* Add changelog

* Remove unused var

* Add remote spec validator

* Load composer autoload

* Remove remote spec validation

plugins/woocommerce-beta-tester/api/api.php

@@ -59,3 +59,4 @@ function() use ( $route, $callback, $additional_options ) {
 require 'rest-api-filters/hook.php';
 require 'live-branches/manifest.php';
 require 'tools/set-block-template-logging-threshold.php';
+require 'remote-spec-validator/class-wca-test-helper-remote-spec-validator.php';

plugins/woocommerce-beta-tester/api/remote-spec-validator/class-wca-test-helper-remote-spec-validator.php

@@ -0,0 +1,34 @@
+<?php
+
+defined( 'ABSPATH' ) || exit;
+
+use Automattic\WooCommerce\Admin\RemoteInboxNotifications\RuleEvaluator;
+
+register_woocommerce_admin_test_helper_rest_route(
+	'/remote-spec-validator/validate',
+	'wca_test_helper_validate_remote_spec',
+	array(
+		'methods' => 'POST',
+		'args'	=> array(
+			'spec' => array(
+				'description'       => 'The remote spec to validate.',
+				'type'              => 'string',
+				'required'          => true,
+				'sanitize_callback' => 'sanitize_text_field',
+			),
+		),
+	)
+);
+
+/**
+ * @param WP_REST_Request $request The full request data.
+ */
+function wca_test_helper_validate_remote_spec( $request ) {
+	$spec = json_decode( $request->get_param( 'spec' ) );
+	$rule_evaluator = new RuleEvaluator();
+	$result = [
+		'valid' => $rule_evaluator->evaluate( $spec ),
+	];
+
+	return new WP_REST_RESPONSE( $result, 200 );
+}

plugins/woocommerce-beta-tester/changelog/add-remote-spec-rule-validator

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add Remote Spec Rule validator

plugins/woocommerce-beta-tester/plugin.php

@@ -12,6 +12,7 @@ function() {
 } );
 
 add_action( 'wp_loaded', function() {
+	require_once __DIR__ . '/vendor/autoload.php';
 	require( 'api/api.php' );
 } );
 
@@ -24,4 +25,4 @@ function() {
         }
     }
 	return $feature_config;
-} );
+} );

plugins/woocommerce-beta-tester/src/app/app.js

@@ -13,6 +13,7 @@ import { default as Options } from '../options';
 import { default as Experiments } from '../experiments';
 import { default as Features } from '../features';
 import { default as RestAPIFilters } from '../rest-api-filters';
+import RemoteSpecValidator from '../remote-spec-validator';
 
 const tabs = applyFilters( 'woocommerce_admin_test_helper_tabs', [
 	{
@@ -45,6 +46,11 @@ const tabs = applyFilters( 'woocommerce_admin_test_helper_tabs', [
 		title: 'REST API FIlters',
 		content: <RestAPIFilters />,
 	},
+	{
+		name: 'remote-spec-validator',
+		title: 'Remote Spec Rule Validator',
+		content: <RemoteSpecValidator />,
+	},
 ] );
 
 export function App() {

plugins/woocommerce-beta-tester/src/index.scss

@@ -173,3 +173,14 @@ form.rest-api-filter-new-form {
 		margin-top: 10px;
 	}
 }
+
+#wc-admin-test-helper-remote-spec-validator {
+	textarea {
+		width: 100%;
+		height: 300px;
+	}
+
+	.btn-validate {
+		float: right;
+	}
+}

plugins/woocommerce-beta-tester/src/remote-spec-validator/data/action-types.js

@@ -0,0 +1,6 @@
+const TYPES = {
+	VALIDATE: 'VALIDATE',
+	SET_MESSAGE: 'SET_MESSAGE',
+};
+
+export default TYPES;

plugins/woocommerce-beta-tester/src/remote-spec-validator/data/actions.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { apiFetch } from '@wordpress/data-controls';
+
+/**
+ * Internal dependencies
+ */
+import TYPES from './action-types';
+import { API_NAMESPACE } from './constants';
+
+export function* validate( jsonString ) {
+	try {
+		const response = yield apiFetch( {
+			method: 'POST',
+			path: `${ API_NAMESPACE }/remote-spec-validator/validate`,
+			headers: { 'content-type': 'application/json' },
+			data: {
+				spec: JSON.stringify( JSON.parse( jsonString ) ),
+			},
+		} );
+		if ( response.valid ) {
+			yield {
+				type: TYPES.SET_MESSAGE,
+				message: {
+					type: 'notice notice-success',
+					text: 'Validation passed',
+				},
+			};
+		} else {
+			yield {
+				type: TYPES.SET_MESSAGE,
+				message: {
+					type: 'error',
+					text: 'Validation failed',
+				},
+			};
+		}
+	} catch {
+		throw new Error();
+	}
+}
+
+export function setMessage( type, text ) {
+	return {
+		type: TYPES.SET_MESSAGE,
+		message: {
+			type,
+			text,
+		},
+	};
+}

plugins/woocommerce-beta-tester/src/remote-spec-validator/data/constants.js

@@ -0,0 +1,2 @@
+export const STORE_KEY = 'wc-admin-helper/remote-spec-validator';
+export const API_NAMESPACE = '/wc-admin-test-helper';

plugins/woocommerce-beta-tester/src/remote-spec-validator/data/index.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { registerStore } from '@wordpress/data';
+import { controls } from '@wordpress/data-controls';
+
+/**
+ * Internal dependencies
+ */
+import * as actions from './actions';
+import * as resolvers from './resolvers';
+import * as selectors from './selectors';
+import reducer from './reducer';
+import { STORE_KEY } from './constants';
+
+export default registerStore( STORE_KEY, {
+	actions,
+	selectors,
+	resolvers,
+	controls,
+	reducer,
+} );

plugins/woocommerce-beta-tester/src/remote-spec-validator/data/reducer.js

@@ -0,0 +1,25 @@
+/**
+ * Internal dependencies
+ */
+import TYPES from './action-types';
+
+const DEFAULT_STATE = {
+	message: {
+		type: null,
+		text: null,
+	},
+};
+
+const reducer = ( state = DEFAULT_STATE, action ) => {
+	switch ( action.type ) {
+		case TYPES.SET_MESSAGE:
+			return {
+				...state,
+				message: action.message,
+			};
+		default:
+			return state;
+	}
+};
+
+export default reducer;

plugins/woocommerce-beta-tester/src/remote-spec-validator/data/selectors.js

@@ -0,0 +1,3 @@
+export function getMessage( state ) {
+	return state.message;
+}

plugins/woocommerce-beta-tester/src/remote-spec-validator/index.js

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { withDispatch, withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { STORE_KEY } from './data/constants';
+import './data';
+
+function RemoteSpecValidator( { validate, message, setMessage } ) {
+	const exampleText = JSON.stringify(
+		[
+			{
+				type: 'plugin_version',
+				plugin: 'woocommerce',
+				version: '6.5.0-dev',
+				operator: '>=',
+			},
+		],
+		null,
+		4
+	);
+	const [ spec, setSpec ] = useState( exampleText );
+	return (
+		<>
+			<p>Paste your Remote Spec rule and click Validate button.</p>
+			<div id="wc-admin-test-helper-remote-spec-validator">
+				<textarea
+					value={ spec }
+					onChange={ ( e ) => setSpec( e.target.value ) }
+				/>
+				{ message && message.text && (
+					<div className={ message.type }>{ message.text }</div>
+				) }
+				<input
+					type="button"
+					className="button btn-primary btn-validate"
+					value="Validate"
+					onClick={ () => {
+						try {
+							if ( JSON.parse( spec ) ) {
+								setMessage( null, null );
+							}
+							validate( spec );
+						} catch ( e ) {
+							setMessage( 'error', 'Invalid JSON' );
+						}
+					} }
+				/>
+			</div>
+		</>
+	);
+}
+
+export default compose(
+	withSelect( ( select ) => {
+		const { getMessage } = select( STORE_KEY );
+		return {
+			message: getMessage(),
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const { validate, setMessage } = dispatch( STORE_KEY );
+
+		return {
+			validate,
+			setMessage,
+		};
+	} )
+)( RemoteSpecValidator );