WIP: Display the error log when a sync completes with errors.

assets/js/sync-ui/apps/sync.js

@@ -2,7 +2,7 @@
  * WordPress dependencies.
  */
 import { Panel, PanelBody } from '@wordpress/components';
-import { useEffect, WPElement } from '@wordpress/element';
+import { useEffect, useState, WPElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -27,16 +27,47 @@ import { useSyncSettings } from '../provider';
  */
 export default () => {
 	const { createNotice } = useSettingsScreen();
-	const { isComplete, isEpio, isSyncing, logMessage, startSync, syncHistory, syncTrigger } =
-		useSync();
+	const {
+		errorCounts,
+		isComplete,
+		isEpio,
+		isSyncing,
+		logMessage,
+		startSync,
+		syncHistory,
+		syncTrigger,
+	} = useSync();
 	const { args, autoIndex } = useSyncSettings();
 
+	/**
+	 * State.
+	 */
+	const [isLogOpen, setIsLogOpen] = useState(false);
+	const [errorCount, setErrorCount] = useState(0);
+
+	/**
+	 * Handle toggling the log panel.
+	 *
+	 * @param {boolean} opened Whether the panel will be open.
+	 */
+	const onToggleLog = (opened) => {
+		setIsLogOpen(opened);
+	};
+
 	/**
 	 * Handle a completed sync.
 	 */
 	const onComplete = () => {
 		if (isComplete) {
+			const newErrorCount = errorCounts.reduce((c, e) => c + e.count, 0);
+
 			createNotice('success', __('Sync completed.', 'elasticpress'));
+
+			if (newErrorCount > errorCount) {
+				setIsLogOpen(true);
+			}
+
+			setErrorCount(newErrorCount);
 		}
 	};
 
@@ -70,7 +101,7 @@ export default () => {
 		logMessage(__('Starting sync…', 'elasticpress'), 'info');
 	};
 
-	useEffect(onComplete, [createNotice, isComplete]);
+	useEffect(onComplete, [createNotice, errorCount, errorCounts, isComplete]);
 	useEffect(onInit, [autoIndex, logMessage, startSync, syncTrigger]);
 
 	return (
@@ -98,7 +129,7 @@ export default () => {
 					<Controls />
 					{syncHistory.length ? <PutMapping /> : null}
 				</PanelBody>
-				<PanelBody initialOpen={false} title="Log">
+				<PanelBody onToggle={onToggleLog} opened={isLogOpen} title="Log">
 					<Log />
 				</PanelBody>
 				{syncHistory.length ? (

assets/js/sync-ui/components/log.js

@@ -82,7 +82,11 @@ export default () => {
 
 	return (
 		<>
-			<TabPanel className="ep-sync-log" tabs={tabs}>
+			<TabPanel
+				className="ep-sync-log"
+				initialTabName={errorCount > 0 ? 'error' : 'full'}
+				tabs={tabs}
+			>
 				{({ name }) => {
 					switch (name) {
 						case 'full':

tests/cypress/integration/dashboard-sync.cy.js

@@ -199,7 +199,15 @@ describe('Dashboard Sync', () => {
 		cy.contains('button', 'Log').click();
 		cy.contains('button', 'Errors').click();
 		cy.contains('.ep-sync-errors', 'No errors found in the log.').should('exist');
+
+		/**
+		 * Reload the page, so we can check if the Error Log tab is opened by default when an error occurs.
+		 */
+		cy.visitAdminPage('admin.php?page=elasticpress-sync');
 		cy.contains('button', 'Start sync').click();
+		cy.get('.ep-sync-errors__table', {
+			timeout: Cypress.config('elasticPressIndexTimeout'),
+		}).should('be.visible');
 		cy.get('.ep-sync-errors tr', { timeout: Cypress.config('elasticPressIndexTimeout') })
 			.contains('Limit of total fields [???] in index [???] has been exceeded')
 			.should('exist');

tests/cypress/wordpress-files/test-plugins/sync-error.php

@@ -9,13 +9,17 @@
  * @package ElasticPress_Tests_E2e
  */
 
-add_filter( 'ep_total_field_limit', fn() => 100 );
+namespace ElasticPress\Tests\E2E\SyncError;
+
+const META_COUNT = 100;
+
+add_filter( 'ep_total_field_limit', fn() => META_COUNT );
 
 add_filter(
 	'ep_prepare_meta_data',
 	function ( $post_meta, $post ) {
 		if ( 0 === $post->ID % 2 ) {
-			for ( $i = 0; $i < 100; $i++ ) {
+			for ( $i = 0; $i < META_COUNT; $i++ ) {
 				$post_meta[ "test_meta_{$i}_title_{$post->ID}" ] = 'Lorem';
 				$post_meta[ "test_meta_{$i}_body_{$post->ID}" ]  = 'Ipsum';
 			}
@@ -25,3 +29,17 @@ function ( $post_meta, $post ) {
 	10,
 	2
 );
+
+add_filter(
+	'ep_prepare_meta_allowed_protected_keys',
+	function ( $allowed_meta, $post ) {
+		for ( $i = 0; $i < META_COUNT; $i++ ) {
+			$allowed_meta[] = "test_meta_{$i}_title_{$post->ID}";
+			$allowed_meta[] = "test_meta_{$i}_body_{$post->ID}";
+		}
+
+		return $allowed_meta;
+	},
+	10,
+	2
+);