Merge pull request #688 from 10up/fix/686

Show error message if title or excerpt generation fails in Classic Editor

Author: dkotter

src/js/openai/classic-editor-excerpt-generator.js

@@ -40,6 +40,12 @@ const classifaiExcerptData = window.classifaiGenerateExcerpt || {};
 			)
 			.insertAfter( excerptContainer );
 
+		$( '<p>', {
+			class: 'classifai-openai__excerpt-generate-error',
+		} ).insertAfter(
+			document.getElementById( 'classifai-openai__excerpt-generate-btn' )
+		);
+
 		// Append disable feature link.
 		if (
 			ClassifAI?.opt_out_enabled_features?.includes(
@@ -79,25 +85,34 @@ const classifaiExcerptData = window.classifaiGenerateExcerpt || {};
 			const spinnerEl = $(
 				'.classifai-openai__excerpt-generate-btn--spinner'
 			);
+			const errorEl = $( '.classifai-openai__excerpt-generate-error' );
 
 			generateTextEl.css( 'opacity', '0' );
 			spinnerEl.show();
+			errorEl.text( '' ).hide();
 			isProcessing = true;
 
 			const path = classifaiExcerptData?.path + postId;
 
 			apiFetch( {
 				path,
-			} ).then( ( result ) => {
-				generateTextEl.css( 'opacity', '1' );
-				spinnerEl.hide();
-				isProcessing = false;
+			} )
+				.then( ( result ) => {
+					generateTextEl.css( 'opacity', '1' );
+					spinnerEl.hide();
+					isProcessing = false;
 
-				$( excerptContainer ).val( result ).trigger( 'input' );
-				generateTextEl.text(
-					classifaiExcerptData?.regenerateText ?? ''
-				);
-			} );
+					$( excerptContainer ).val( result ).trigger( 'input' );
+					generateTextEl.text(
+						classifaiExcerptData?.regenerateText ?? ''
+					);
+				} )
+				.catch( ( error ) => {
+					generateTextEl.css( 'opacity', '1' );
+					spinnerEl.hide();
+					isProcessing = false;
+					errorEl.text( error?.message ).show();
+				} );
 		};
 
 		// Event handler registration to generate the excerpt.

src/js/openai/classic-editor-title-generator.js

@@ -104,54 +104,71 @@ const scriptData = classifaiChatGPTData.enabledFeatures.reduce(
 
 			apiFetch( {
 				path,
-			} ).then( ( result ) => {
-				generateTextEl.css( 'opacity', '1' );
-				spinnerEl.hide();
-				isProcessing = false;
-
-				result.forEach( ( title ) => {
-					$( '<textarea>', {
-						text: title,
-					} )
-						.wrap( `<div class="classifai-openai__result-item" />` )
-						.parent()
-						.append(
-							$( '<button />', {
-								text: scriptData.title.selectBtnText,
-								type: 'button',
-								class: 'button classifai-openai__select-title',
-							} )
+			} )
+				.then( ( result ) => {
+					generateTextEl.css( 'opacity', '1' );
+					spinnerEl.hide();
+					isProcessing = false;
+
+					result.forEach( ( title ) => {
+						$( '<textarea>', {
+							text: title,
+						} )
+							.wrap(
+								`<div class="classifai-openai__result-item" />`
+							)
+							.parent()
+							.append(
+								$( '<button />', {
+									text: scriptData.title.selectBtnText,
+									type: 'button',
+									class: 'button classifai-openai__select-title',
+								} )
+							)
+							.appendTo( '#classifai-openai__results-content' );
+					} );
+
+					// Append disable feature link.
+					if (
+						ClassifAI?.opt_out_enabled_features?.includes(
+							'feature_title_generation'
 						)
+					) {
+						$( '<a>', {
+							text: __(
+								'Disable this ClassifAI feature',
+								'classifai'
+							),
+							href: ClassifAI?.profile_url,
+							target: '_blank',
+							rel: 'noopener noreferrer',
+							class: 'classifai-disable-feature-link',
+						} )
+							.wrap(
+								`<div class="classifai-openai__result-disable-link" />`
+							)
+							.parent()
+							.appendTo( '#classifai-openai__modal' );
+					}
+
+					$( '#classifai-openai__results' )
+						.show()
+						.addClass( 'classifai-openai--fade-in' );
+				} )
+				.catch( ( error ) => {
+					generateTextEl.css( 'opacity', '1' );
+					spinnerEl.hide();
+					isProcessing = false;
+
+					$( '<span class="error">' )
+						.text( error?.message )
+						.wrap( `<div class="classifai-openai__result-item" />` )
 						.appendTo( '#classifai-openai__results-content' );
-				} );
 
-				// Append disable feature link.
-				if (
-					ClassifAI?.opt_out_enabled_features?.includes(
-						'feature_title_generation'
-					)
-				) {
-					$( '<a>', {
-						text: __(
-							'Disable this ClassifAI feature',
-							'classifai'
-						),
-						href: ClassifAI?.profile_url,
-						target: '_blank',
-						rel: 'noopener noreferrer',
-						class: 'classifai-disable-feature-link',
-					} )
-						.wrap(
-							`<div class="classifai-openai__result-disable-link" />`
-						)
-						.parent()
-						.appendTo( '#classifai-openai__modal' );
-				}
-
-				$( '#classifai-openai__results' )
-					.show()
-					.addClass( 'classifai-openai--fade-in' );
-			} );
+					$( '#classifai-openai__results' )
+						.show()
+						.addClass( 'classifai-openai--fade-in' );
+				} );
 		};
 
 		// Event handler registration to generate the title.

src/scss/openai/classic-editor-title-generator.scss

@@ -37,6 +37,12 @@
 		}
 	}
 
+	.classifai-openai__excerpt-generate-error {
+		display: none;
+		color: #dc3232;
+		text-align: right;
+	}
+
 	.classifai-openai__excerpt-generate-disable-link {
 		text-align: right;
 		margin-top: 6px;
@@ -81,6 +87,11 @@
 		padding: 1rem;
 		padding-bottom: 1.5rem;
 		gap: 1rem;
+
+		& .error {
+			color: #dc3232;
+			font-size: 1rem;
+		}
 	}
 
 	&__close-modal-button {