Display sync trigger on sync page.

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

@@ -27,7 +27,8 @@ import { useSyncSettings } from '../provider';
  */
 export default () => {
 	const { createNotice } = useSettingsScreen();
-	const { isComplete, isEpio, isSyncing, logMessage, startSync, syncHistory } = useSync();
+	const { isComplete, isEpio, isSyncing, logMessage, startSync, syncHistory, syncTrigger } =
+		useSync();
 	const { autoIndex } = useSyncSettings();
 
 	/**
@@ -46,13 +47,13 @@ export default () => {
 	 */
 	const onInit = () => {
 		if (autoIndex) {
-			startSync({ put_mapping: true });
+			startSync({ put_mapping: true, trigger: syncTrigger });
 			logMessage(__('Starting delete and sync…', 'elasticpress'), 'info');
 		}
 	};
 
 	useEffect(onComplete, [createNotice, isComplete]);
-	useEffect(onInit, [autoIndex, logMessage, startSync]);
+	useEffect(onInit, [autoIndex, logMessage, startSync, syncTrigger]);
 
 	return (
 		<>

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

@@ -69,7 +69,7 @@ export default () => {
 		const { put_mapping } = args;
 
 		const putMapping = syncHistory.length ? put_mapping : true;
-		const syncArgs = { ...args, put_mapping: putMapping };
+		const syncArgs = { ...args, put_mapping: putMapping, trigger: 'manual' };
 
 		startSync(syncArgs);
 		logMessage(__('Starting sync…', 'elasticpress'), 'info');

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

@@ -71,10 +71,16 @@ export default ({ failures, method, stateDatetime, status, trigger }) => {
 		}
 
 		switch (trigger) {
+			case 'features':
+				return __('Automatic sync after settings change.', 'elasticpress');
+			case 'install':
+				return __('Automatic sync after installation.', 'elasticpress');
 			case 'manual':
-			default: {
 				return __('Manual sync from Sync Settings.', 'elasticpress');
-			}
+			case 'upgrade':
+				return __('Automatic sync after plugin update.', 'elasticpress');
+			default:
+				return null;
 		}
 	}, [method, trigger]);
 
@@ -101,7 +107,16 @@ export default ({ failures, method, stateDatetime, status, trigger }) => {
 		>
 			<Icon icon={isError ? error : success} />
 			<div className="ep-previous-sync__title">
-				{when} &mdash; {why}
+				{why
+					? sprintf(
+							/* translators: %1$s Sync date and time. %2%s sync trigger. */ __(
+								'%1$s — %2$s',
+								'elasticpress',
+							),
+							when,
+							why,
+					  )
+					: when}
 			</div>
 			<div className="ep-previous-sync__help">{how}</div>
 		</div>

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

@@ -7,9 +7,9 @@ import classnames from 'classnames';
  * WordPress dependencies.
  */
 import { Icon } from '@wordpress/components';
-import { useMemo, WPElement } from '@wordpress/element';
+import { createInterpolateElement, useMemo, WPElement } from '@wordpress/element';
 import { dateI18n } from '@wordpress/date';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { update } from '@wordpress/icons';
 
 /**
@@ -23,8 +23,16 @@ import { useSync } from '../../sync';
  * @returns {WPElement} Component.
  */
 export default () => {
-	const { isCli, isComplete, isFailed, isPaused, itemsProcessed, itemsTotal, syncStartDateTime } =
-		useSync();
+	const {
+		isCli,
+		isComplete,
+		isFailed,
+		isPaused,
+		itemsProcessed,
+		itemsTotal,
+		syncStartDateTime,
+		syncTrigger,
+	} = useSync();
 
 	/**
 	 * Sync progress label.
@@ -59,6 +67,43 @@ export default () => {
 
 	const now = itemsTotal ? Math.floor((itemsProcessed / itemsTotal) * 100) : 100;
 
+	const why = useMemo(() => {
+		if (isCli) {
+			/* translators: %1$s Sync start date and time. */
+			return __('Started manually from WP CLI at <time>%s</time>.', 'elasticpress');
+		}
+
+		switch (syncTrigger) {
+			case 'features':
+				/* translators: %1$s Sync start date and time. */
+				return __(
+					'Started automatically after a change to feature settings at <time>%s</time>.',
+					'elasticpress',
+				);
+			case 'install':
+				/* translators: %1$s Sync start date and time. */
+				return __(
+					'Started automatically after installing the ElasticPress plugin at <time>%s</time>.',
+					'elasticpress',
+				);
+			case 'manual':
+				/* translators: %1$s Sync start date and time. */
+				return __(
+					'Started manually from the Sync page at <time>%s</time>.',
+					'elasticpress',
+				);
+			case 'upgrade':
+				/* translators: %1$s Sync start date and time. */
+				return __(
+					'Started automatically after updating the ElasticPress plugin at <time>%s</time>.',
+					'elasticpress',
+				);
+			default:
+				/* translators: %1$s Sync start date and time. */
+				return __('Started on <time>%s</time>.', 'elasticpress');
+		}
+	}, [isCli, syncTrigger]);
+
 	return (
 		<div
 			className={classnames('ep-sync-progress', {
@@ -68,14 +113,14 @@ export default () => {
 			<Icon icon={update} />
 			<div className="ep-sync-progress__details">
 				<strong>{label}</strong>
-				{syncStartDateTime ? (
-					<>
-						{__('Started on', 'elasticpress')}{' '}
-						<time dateTime={dateI18n('c', syncStartDateTime)}>
-							{dateI18n('D, F d, Y H:i', syncStartDateTime)}
-						</time>
-					</>
-				) : null}
+				{syncStartDateTime
+					? createInterpolateElement(
+							sprintf(why, dateI18n('g:ia l F jS, Y', syncStartDateTime)),
+							{
+								time: <time dateTime={dateI18n('c', syncStartDateTime)} />,
+							},
+					  )
+					: null}
 			</div>
 			<div className="ep-sync-progress__progress-bar">
 				<div

assets/js/sync-ui/config.js

@@ -1,7 +1,26 @@
 /**
  * Window dependencies.
  */
-const { autoIndex, apiUrl, indexMeta, indexables, isEpio, nonce, postTypes, syncHistory } =
-	window.epDash;
+const {
+	autoIndex,
+	apiUrl,
+	indexMeta,
+	indexables,
+	isEpio,
+	nonce,
+	postTypes,
+	syncHistory,
+	syncTrigger,
+} = window.epDash;
 
-export { autoIndex, apiUrl, indexables, indexMeta, isEpio, nonce, postTypes, syncHistory };
+export {
+	autoIndex,
+	apiUrl,
+	indexables,
+	indexMeta,
+	isEpio,
+	nonce,
+	postTypes,
+	syncHistory,
+	syncTrigger,
+};

assets/js/sync-ui/index.js

@@ -18,6 +18,7 @@ import {
 	nonce,
 	postTypes,
 	syncHistory,
+	syncTrigger,
 } from './config';
 import { SyncSettingsProvider } from './provider';
 import Sync from './apps/sync';
@@ -36,6 +37,7 @@ const App = () => (
 	<SyncProvider
 		apiUrl={apiUrl}
 		defaultSyncHistory={syncHistory}
+		defaultSyncTrigger={syncTrigger}
 		indexMeta={indexMeta}
 		isEpio={isEpio}
 		nonce={nonce}

assets/js/sync/index.js

@@ -40,6 +40,7 @@ const Context = createContext();
  * @param {string} props.apiUrl API endpoint URL.
  * @param {Function} props.children Component children
  * @param {Array} props.defaultSyncHistory Sync history.
+ * @param {Array} props.defaultSyncTrigger Sync trigger.
  * @param {object|null} props.indexMeta Details of a sync in progress.
  * @param {boolean} props.isEpio Whether ElasticPress.io is in use.
  * @param {string} props.nonce WordPress nonce.
@@ -49,6 +50,7 @@ export const SyncProvider = ({
 	apiUrl,
 	children,
 	defaultSyncHistory,
+	defaultSyncTrigger,
 	indexMeta,
 	isEpio,
 	nonce,
@@ -77,6 +79,7 @@ export const SyncProvider = ({
 		itemsTotal: 100,
 		syncStartDateTime: null,
 		syncHistory: defaultSyncHistory,
+		syncTrigger: defaultSyncTrigger,
 	});
 
 	/**
@@ -249,6 +252,7 @@ export const SyncProvider = ({
 				itemsProcessed: getItemsProcessedFromIndexMeta(indexMeta),
 				itemsTotal: getItemsTotalFromIndexMeta(indexMeta),
 				syncStartDateTime: indexMeta.start_date_time,
+				syncTrigger: indexMeta.trigger || null,
 			});
 		},
 		[],
@@ -454,7 +458,12 @@ export const SyncProvider = ({
 				isSyncing: true,
 			});
 
-			updateState({ itemsProcessed: 0, syncStartDateTime: Date.now() });
+			updateState({
+				itemsProcessed: 0,
+				syncStartDateTime: Date.now(),
+				syncTrigger: args.trigger || null,
+			});
+
 			doIndex(args);
 		},
 		[doIndex],
@@ -523,6 +532,7 @@ export const SyncProvider = ({
 		itemsTotal,
 		syncHistory,
 		syncStartDateTime,
+		syncTrigger,
 	} = stateRef.current;
 
 	// eslint-disable-next-line react/jsx-no-constructed-context-values
@@ -544,6 +554,7 @@ export const SyncProvider = ({
 		startSync,
 		stopSync,
 		syncStartDateTime,
+		syncTrigger,
 	};
 
 	return <Context.Provider value={contextValue}>{children}</Context.Provider>;

includes/classes/AdminNotices.php

@@ -182,9 +182,9 @@ protected function process_auto_activate_sync_notice() {
 		}
 
 		if ( defined( 'EP_IS_NETWORK' ) && EP_IS_NETWORK ) {
-			$url = admin_url( 'network/admin.php?page=elasticpress-sync&do_sync' );
+			$url = admin_url( 'network/admin.php?page=elasticpress-sync&do_sync=features' );
 		} else {
-			$url = admin_url( 'admin.php?page=elasticpress-sync&do_sync' );
+			$url = admin_url( 'admin.php?page=elasticpress-sync&do_sync=features' );
 		}
 
 		$feature = Features::factory()->get_registered_feature( $auto_activate_sync );
@@ -257,9 +257,9 @@ protected function process_upgrade_sync_notice() {
 		}
 
 		if ( defined( 'EP_IS_NETWORK' ) && EP_IS_NETWORK ) {
-			$url = admin_url( 'network/admin.php?page=elasticpress-sync&do_sync' );
+			$url = admin_url( 'network/admin.php?page=elasticpress-sync&do_sync=upgrade' );
 		} else {
-			$url = admin_url( 'admin.php?page=elasticpress-sync&do_sync' );
+			$url = admin_url( 'admin.php?page=elasticpress-sync&do_sync=upgrade' );
 		}
 
 		if ( defined( 'EP_DASHBOARD_SYNC' ) && ! EP_DASHBOARD_SYNC ) {

includes/classes/IndexHelper.php

@@ -144,7 +144,7 @@ protected function build_index_meta() {
 			'start_date_time'   => $start_date_time ? $start_date_time->format( DATE_ATOM ) : false,
 			'starting_indices'  => $starting_indices,
 			'messages_queue'    => [],
-			'trigger'           => 'manual',
+			'trigger'           => ! empty( $this->args['trigger'] ) ? sanitize_text_field( $this->args['trigger'] ) : null,
 			'totals'            => [
 				'total'      => 0,
 				'synced'     => 0,

includes/classes/REST/Sync.php

@@ -102,6 +102,10 @@ public function get_args() {
 				'type'        => 'boolean',
 				'required'    => false,
 			],
+			'trigger'               => [
+				'enum'     => [ 'features', 'install', 'manual', 'upgrade' ],
+				'required' => false,
+			],
 			'upper_limit_object_id' => [
 				'description' => __( 'End of object ID range to sync.', 'elasticpress' ),
 				'type'        => 'integer',

includes/classes/Screen/Sync.php

@@ -82,6 +82,7 @@ public function admin_enqueue_scripts() {
 			'nonce'       => wp_create_nonce( 'wp_rest' ),
 			'postTypes'   => array_map( fn( $post_type ) => [ $post_type, get_post_type_object( $post_type )->labels->name ], $post_types ),
 			'syncHistory' => $sync_history,
+			'syncTrigger' => ! empty( $_GET['do_sync'] ) ? sanitize_text_field( wp_unslash( $_GET['do_sync'] ) ) : null, // phpcs:ignore WordPress.Security.NonceVerification.Recommended
 		];
 
 		wp_localize_script( 'ep_sync_scripts', 'epDash', $data );

includes/partials/install-page.php

@@ -12,11 +12,11 @@
 
 if ( defined( 'EP_IS_NETWORK' ) && EP_IS_NETWORK ) {
 	$setup_url     = admin_url( 'network/admin.php?page=elasticpress-settings' );
-	$sync_url      = admin_url( 'network/admin.php?page=elasticpress-sync&do_sync' );
+	$sync_url      = admin_url( 'network/admin.php?page=elasticpress-sync&do_sync=install' );
 	$dashboard_url = admin_url( 'network/admin.php?page=elasticpress' );
 } else {
 	$setup_url     = admin_url( 'admin.php?page=elasticpress-settings' );
-	$sync_url      = admin_url( 'admin.php?page=elasticpress-sync&do_sync' );
+	$sync_url      = admin_url( 'admin.php?page=elasticpress-sync&do_sync=install' );
 	$dashboard_url = admin_url( 'admin.php?page=elasticpress' );
 }
 

tests/cypress/integration/features/woocommerce.cy.js

@@ -336,12 +336,18 @@ describe('WooCommerce Feature', { tags: '@slow' }, () => {
 			 */
 			cy.contains('button', 'WooCommerce').click();
 
+			cy.contains('label', 'Show suggestions')
+				.closest('.components-base-control')
+				.find('input')
+				.as('showSuggestionsCheck');
+
 			if (!isEpIo) {
-				cy.get('.components-radio-control__input').first().should('be.disabled');
+				cy.get('@showSuggestionsCheck').should('be.disabled');
 				return;
 			}
 
-			cy.get('.components-radio-control__input').first().click();
+			cy.get('@showSuggestionsCheck').check();
+
 			cy.contains('button', 'Save and sync now').click();
 
 			cy.wait('@apiRequest');