Merge pull request #679 from 10up/fix/663

Ensure Classification preview works as expected

Author: dkotter

includes/Classifai/Providers/OpenAI/Embeddings.php

@@ -14,6 +14,8 @@
 use WP_Error;
 
 use function Classifai\get_asset_info;
+use function Classifai\Providers\Watson\get_supported_post_statuses;
+use function Classifai\Providers\Watson\get_supported_post_types;
 
 class Embeddings extends Provider {
 
@@ -127,6 +129,58 @@ public function render_provider_fields() {
 		);
 
 		do_action( 'classifai_' . static::ID . '_render_provider_fields', $this );
+		add_action( 'classifai_after_feature_settings_form', [ $this, 'render_previewer' ] );
+	}
+
+	/**
+	 * Renders the previewer window for the feature.
+	 *
+	 * @param string $active_feature The active feature.
+	 */
+	public function render_previewer( string $active_feature ) {
+		$feature  = new Classification();
+		$provider = $feature->get_feature_provider_instance();
+
+		if (
+			self::ID !== $provider::ID ||
+			$feature::ID !== $active_feature ||
+			! $feature->is_feature_enabled()
+		) {
+			return;
+		}
+		?>
+
+		<div id="classifai-post-preview-app">
+			<?php
+			$supported_post_statuses = get_supported_post_statuses();
+			$supported_post_types    = get_supported_post_types();
+
+			$posts_to_preview = get_posts(
+				array(
+					'post_type'      => $supported_post_types,
+					'post_status'    => $supported_post_statuses,
+					'posts_per_page' => 10,
+				)
+			);
+			?>
+
+			<h2><?php esc_html_e( 'Preview Language Processing', 'classifai' ); ?></h2>
+			<div id="classifai-post-preview-controls">
+				<select id="classifai-preview-post-selector">
+					<?php foreach ( $posts_to_preview as $post ) : ?>
+						<option value="<?php echo esc_attr( $post->ID ); ?>"><?php echo esc_html( $post->post_title ); ?></option>
+					<?php endforeach; ?>
+				</select>
+				<?php wp_nonce_field( 'classifai-previewer-action', 'classifai-previewer-nonce' ); ?>
+				<button type="button" class="button" id="get-classifier-preview-data-btn">
+					<span><?php esc_html_e( 'Preview', 'classifai' ); ?></span>
+				</button>
+			</div>
+			<div id="classifai-post-preview-wrapper">
+			</div>
+		</div>
+
+		<?php
 	}
 
 	/**

includes/Classifai/Providers/Watson/Helpers.php

@@ -7,8 +7,6 @@
 
 use Classifai\Features\Classification;
 
-use function Classifai\get_plugin_settings;
-
 /**
  * Returns the currently configured Watson API URL. Lookup order is,
  *

includes/Classifai/Providers/Watson/NLU.php

@@ -224,6 +224,7 @@ function ( $args = [] ) {
 			);
 		}
 
+		do_action( 'classifai_' . static::ID . '_render_provider_fields', $this );
 		add_action( 'classifai_after_feature_settings_form', [ $this, 'render_previewer' ] );
 	}
 
@@ -233,9 +234,14 @@ function ( $args = [] ) {
 	 * @param string $active_feature The active feature.
 	 */
 	public function render_previewer( string $active_feature ) {
-		$feature = new Classification();
+		$feature  = new Classification();
+		$provider = $feature->get_feature_provider_instance();
 
-		if ( $feature::ID !== $active_feature || ! $feature->is_feature_enabled() ) {
+		if (
+			self::ID !== $provider::ID ||
+			$feature::ID !== $active_feature ||
+			! $feature->is_feature_enabled()
+		) {
 			return;
 		}
 		?>

src/js/language-processing.js

@@ -10,8 +10,11 @@ import '../scss/language-processing.scss';
 		return;
 	}
 
+	const providerSelect = document.getElementById( 'provider' );
+	const provider = providerSelect.value;
+
 	const previewWatson = () => {
-		if ( ! nonceEl ) {
+		if ( 'ibm_watson_nlu' !== provider ) {
 			return;
 		}
 
@@ -199,7 +202,7 @@ import '../scss/language-processing.scss';
 	previewWatson();
 
 	const previewEmbeddings = () => {
-		if ( ! nonceEl ) {
+		if ( 'openai_embeddings' !== provider ) {
 			return;
 		}
 
@@ -341,6 +344,7 @@ import '../scss/language-processing.scss';
 	);
 	const selectElChoices = new Choices( selectEl, {
 		noResultsText: '',
+		allowHTML: true,
 	} );
 
 	/**
@@ -349,10 +353,6 @@ import '../scss/language-processing.scss';
 	 * @param {Object} event Choices.js's 'search' event object.
 	 */
 	function searchPosts( event ) {
-		if ( ! nonceEl ) {
-			return;
-		}
-
 		/** Previewer nonce. */
 		const previewerNonce = nonceEl.value;