Show a message when an indexing is stopped by the WP-CLI command

assets/js/sync.js

@@ -5,7 +5,7 @@ import { dateI18n } from '@wordpress/date';
 const { epDash, history } = window;
 const { __, sprintf } = wp.i18n;
 
-const { ajax_url: ajaxurl = '' } = epDash;
+const { ajax_url: ajaxurl = '', is_epio } = epDash;
 
 // Main elements of sync page
 const syncBox = document.querySelector('.ep-sync-data');
@@ -269,7 +269,8 @@ function updateDisabledAttribute(element, value) {
 function updateSyncDash() {
 	const progressBar = activeBox.querySelector('.ep-sync-box__progressbar_animated');
 
-	const progressBarWidth = (parseInt(processed, 10) / parseInt(toProcess, 10)) * 100;
+	const progressBarWidth =
+		toProcess === 0 ? 0 : (parseInt(processed, 10) / parseInt(toProcess, 10)) * 100;
 
 	if (
 		typeof progressBarWidth === 'number' &&
@@ -282,12 +283,31 @@ function updateSyncDash() {
 	}
 
 	const isSyncing = ['initialsync', 'sync', 'pause', 'wpcli'].includes(syncStatus);
+
 	if (isSyncing) {
 		progressBar.classList.remove('ep-sync-box__progressbar_complete');
+	} else if (syncStatus === 'interrupt') {
+		const progressInfoElement = activeBox.querySelector('.ep-sync-box__progress-info');
+
+		progressInfoElement.innerText = __('Sync interrupted', 'elasticpress');
+
+		updateDisabledAttribute(deleteAndSyncButton, false);
+		updateDisabledAttribute(syncButton, false);
+
+		hidePauseStopButtons();
+		hideResumeButton();
+
+		syncButton.style.display = 'flex';
+
+		const learnMoreLink = activeBox.querySelector('.ep-sync-box__learn-more-link');
+
+		if (learnMoreLink?.style) {
+			learnMoreLink.style.display = 'block';
+		}
 	} else {
 		const progressInfoElement = activeBox.querySelector('.ep-sync-box__progress-info');
 
-		progressInfoElement.innerText = 'Sync completed';
+		progressInfoElement.innerText = __('Sync completed', 'elasticpress');
 
 		progressBar.classList.add('ep-sync-box__progressbar_complete');
 
@@ -311,17 +331,17 @@ function updateSyncDash() {
  * Cancel a sync
  */
 function cancelSync() {
+	toProcess = 0;
+	processed = 0;
+	totalProcessed = 0;
+
 	apiFetch({
 		url: ajaxurl,
 		method: 'POST',
 		body: new URLSearchParams({
 			action: 'ep_cancel_index',
 			nonce: epDash.nonce,
 		}),
-	}).then(() => {
-		toProcess = 0;
-		processed = 0;
-		totalProcessed = 0;
 	});
 }
 
@@ -466,17 +486,39 @@ function updateLastSyncDateTime(dateValue) {
 	}
 }
 
+/**
+ * Check if a destructive index is running
+ *
+ * @return {boolean} Wheter or not is a destructive index
+ */
+function isDestructiveIndex() {
+	return activeBox === deleteAndSyncBox;
+}
+
 /**
  * Interrupt the sync process
  *
  * @param {boolean} value True to interrupt the sync process
  */
 function shouldInterruptSync(value) {
-	if (value) {
-		syncStatus = 'interrupt';
-		updateSyncDash();
-		cancelSync();
+	if (!value) {
+		return;
 	}
+
+	syncStatus = 'interrupt';
+
+	let logMessage = __('Sync interrupted by WP-CLI command', 'elasticpress');
+	if (isDestructiveIndex()) {
+		logMessage = sprintf(
+			// translators: ElasticPress.io or Elasticsearch
+			__(
+				'Your indexing process has been stopped by WP-CLI and your %s index could be missing content. To restart indexing, please click the Start button or use WP-CLI commands to perform the reindex. Please note that search results could be incorrect or incomplete until the reindex finishes.',
+				'elasticpress',
+			),
+			is_epio ? 'ElasticPress.io' : 'Elasticsearch',
+		);
+	}
+	stopIndex(__('Sync interrupted', 'elasticpress'), logMessage);
 }
 
 /**
@@ -687,23 +729,26 @@ document.querySelectorAll('.ep-sync-box__button-resume')?.forEach((button) => {
 	});
 });
 
-document.querySelectorAll('.ep-sync-box__button-stop')?.forEach((button) => {
-	button?.addEventListener('click', function () {
-		syncStatus = syncStatus === 'wpcli' ? 'interrupt' : 'cancel';
+function stopIndex(syncMessage, logMessage) {
+	syncStatus = syncStatus === 'wpcli' ? 'interrupt' : 'cancel';
 
-		const progressInfoElement = activeBox.querySelector('.ep-sync-box__progress-info');
-		const progressBar = activeBox.querySelector('.ep-sync-box__progressbar_animated');
+	const progressInfoElement = activeBox.querySelector('.ep-sync-box__progress-info');
+	const progressBar = activeBox.querySelector('.ep-sync-box__progressbar_animated');
 
-		updateSyncDash();
+	updateSyncDash();
 
-		cancelSync();
+	cancelSync();
 
-		progressInfoElement.innerText = __('Sync stopped', 'elasticpress');
+	progressInfoElement.innerText = syncMessage;
 
-		progressBar.style.width = `0`;
-		progressBar.innerText = ``;
+	progressBar.style.width = `0`;
+	progressBar.innerText = ``;
 
-		addLineToOutput(__('Sync stopped', 'elasticpress'));
+	addLineToOutput(logMessage);
+}
+document.querySelectorAll('.ep-sync-box__button-stop')?.forEach((button) => {
+	button?.addEventListener('click', () => {
+		stopIndex(__('Sync stopped', 'elasticpress'), __('Sync stopped', 'elasticpress'));
 	});
 });
 

includes/classes/IndexHelper.php

@@ -92,6 +92,7 @@ protected function build_index_meta() {
 		Utils\update_option( 'ep_last_sync', time() );
 		Utils\delete_option( 'ep_need_upgrade_sync' );
 		Utils\delete_option( 'ep_feature_auto_activated_sync' );
+		delete_transient( 'ep_sync_interrupted' );
 
 		$start_date_time = date_create( 'now', wp_timezone() );
 

includes/classes/Screen/Sync.php

@@ -198,6 +198,7 @@ public function admin_enqueue_scripts() {
 		$data['sync_wpcli']           = esc_html__( 'WP CLI sync is occurring.', 'elasticpress' );
 		$data['sync_error']           = esc_html__( 'An error occurred while syncing', 'elasticpress' );
 		$data['sync_interrupted']     = esc_html__( 'Sync interrupted.', 'elasticpress' );
+		$data['is_epio']              = Utils\is_epio();
 
 		wp_localize_script( 'ep_sync_scripts', 'epDash', $data );
 	}