Display sync history

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

@@ -17,6 +17,7 @@ import Log from '../components/log';
 import Objects from '../components/objects';
 import Progress from '../components/progress';
 import PutMapping from '../components/put-mapping';
+import SyncHistory from '../components/sync-history';
 import { useSyncSettings } from '../provider';
 
 /**
@@ -26,7 +27,7 @@ import { useSyncSettings } from '../provider';
  */
 export default () => {
 	const { createNotice } = useSettingsScreen();
-	const { isComplete, isEpio, isSyncing, lastSyncDateTime, logMessage, startSync } = useSync();
+	const { isComplete, isEpio, isSyncing, logMessage, startSync, syncHistory } = useSync();
 	const { autoIndex } = useSyncSettings();
 
 	/**
@@ -56,7 +57,7 @@ export default () => {
 	return (
 		<>
 			<p>
-				{lastSyncDateTime
+				{syncHistory.length
 					? __(
 							'If you are missing data in your search results or have recently added custom content types to your site, you should run a sync to reflect these changes.',
 							'elasticpress',
@@ -76,20 +77,25 @@ export default () => {
 				<PanelBody className="ep-sync-panel__controls">
 					{isSyncing || isComplete ? <Progress /> : null}
 					<Controls />
-					{lastSyncDateTime ? <PutMapping /> : null}
+					{syncHistory.length ? <PutMapping /> : null}
 				</PanelBody>
 				<PanelBody initialOpen={false} title="Log">
 					<Log />
 				</PanelBody>
-				{lastSyncDateTime ? (
-					<PanelBody
-						className="ep-sync-panel__advanced"
-						initialOpen={false}
-						title={__('Advanced options', 'elasticpress')}
-					>
-						<Indexables />
-						<Objects />
-					</PanelBody>
+				{syncHistory.length ? (
+					<>
+						<PanelBody
+							className="ep-sync-panel__advanced"
+							initialOpen={false}
+							title={__('Advanced options', 'elasticpress')}
+						>
+							<Indexables />
+							<Objects />
+						</PanelBody>
+						<PanelBody title={__('Sync history', 'elasticpress')}>
+							<SyncHistory />
+						</PanelBody>
+					</>
 				) : null}
 			</Panel>
 		</>

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

@@ -20,12 +20,12 @@ export default () => {
 	const {
 		isPaused,
 		isSyncing,
-		lastSyncDateTime,
 		logMessage,
 		pauseSync,
 		resumeSync,
 		startSync,
 		stopSync,
+		syncHistory,
 	} = useSync();
 
 	const { args } = useSyncSettings();
@@ -68,7 +68,7 @@ export default () => {
 	const onSync = async () => {
 		const { put_mapping } = args;
 
-		const putMapping = lastSyncDateTime ? put_mapping : true;
+		const putMapping = syncHistory.length ? put_mapping : true;
 		const syncArgs = { ...args, put_mapping: putMapping };
 
 		startSync(syncArgs);

assets/js/sync-ui/components/icons/error.js

@@ -0,0 +1,15 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+export default () => {
+	return (
+		<SVG
+			version="1.1"
+			xmlns="https://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+		>
+			<Path d="M 12 20.8 C 16.8 20.8 20.8 16.9 20.8 12 C 20.8 7.2 16.9 3.2 12 3.2 C 7.2 3.2 3.2 7.1 3.2 12 C 3.2 16.8 7.2 20.8 12 20.8 Z M 12 4.8 C 16 4.8 19.2 8.1 19.2 12 C 19.2 16 16 19.2 12 19.2 C 8 19.2 4.8 15.9 4.8 12 C 4.8 8 8 4.8 12 4.8 Z M 13 7 L 11 7 L 11 13 L 13 13 L 13 7 Z M 13 15 L 11 15 L 11 17 L 13 17 L 13 15 Z" />
+		</SVG>
+	);
+};

assets/js/sync-ui/components/icons/success.js

@@ -0,0 +1,16 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+export default () => {
+	return (
+		<SVG
+			version="1.1"
+			xmlns="https://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+		>
+			<Path d="M 12 3.25 C 9.679 3.25 7.454 4.172 5.813 5.813 C 4.172 7.454 3.25 9.679 3.25 12 C 3.25 14.32 4.172 16.546 5.813 18.187 C 7.454 19.828 9.679 20.75 12 20.75 C 14.321 20.75 16.546 19.828 18.187 18.187 C 19.828 16.546 20.75 14.32 20.75 12 C 20.75 9.679 19.828 7.454 18.187 5.813 C 16.546 4.172 14.321 3.25 12 3.25 Z M 4.75 12 C 4.75 11.048 4.938 10.105 5.302 9.225 C 5.666 8.346 6.2 7.547 6.874 6.873 C 7.547 6.2 8.346 5.666 9.226 5.302 C 10.105 4.937 11.048 4.75 12 4.75 C 12.952 4.75 13.895 4.937 14.775 5.302 C 15.654 5.666 16.453 6.2 17.127 6.873 C 17.8 7.547 18.334 8.346 18.698 9.225 C 19.063 10.105 19.25 11.048 19.25 12 C 19.25 13.923 18.486 15.767 17.127 17.126 C 15.767 18.486 13.923 19.25 12 19.25 C 10.077 19.25 8.233 18.486 6.874 17.126 C 5.514 15.767 4.75 13.923 4.75 12 Z" />
+			<Path d="M 15.974 8 L 10.59 15.217 L 7.769 13.094 L 7 14.113 L 10.846 17 L 17 8.764 L 15.974 8 Z" />
+		</SVG>
+	);
+};

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

@@ -0,0 +1,109 @@
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies.
+ */
+import { Icon } from '@wordpress/components';
+import { useMemo, WPElement } from '@wordpress/element';
+import { dateI18n } from '@wordpress/date';
+import { __, _n, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import error from './icons/error';
+import success from './icons/success';
+
+/**
+ * Delete checkbox component.
+ *
+ * @param {object} props Component props.
+ * @param {number} props.failures Number of failed items.
+ * @param {string} props.method Sync method.
+ * @param {string} props.stateDatetime Sync end date and time.
+ * @param {string} props.status Sync status.
+ * @param {string} props.trigger Sync trigger.
+ * @returns {WPElement} Sync page component.
+ */
+export default ({ failures, method, stateDatetime, status, trigger }) => {
+	/**
+	 * When the sync was started.
+	 */
+	const when = useMemo(() => dateI18n('l F j, Y g:ia', stateDatetime), [stateDatetime]);
+
+	/**
+	 * How the sync completed.
+	 */
+	const how = useMemo(() => {
+		switch (status) {
+			case 'failed':
+				return __('Failed.', 'elasticpress');
+			case 'with_errors':
+				return failures
+					? sprintf(
+							_n(
+								'Completed with %d error.',
+								'Completed with %d errors.',
+								failures,
+								'elasticpress',
+							),
+							failures,
+					  )
+					: __('Completed with errors.', 'elasticpress');
+			case 'aborted':
+				return __('Stopped.', 'elasticpress');
+			case 'success':
+				return __('Completed successfully.', 'elasticpress');
+			default:
+				return __('Completed.', 'elasticpress');
+		}
+	}, [failures, status]);
+
+	/**
+	 * Why the sync was started.
+	 */
+	const why = useMemo(() => {
+		if (method === 'cli') {
+			return __('Manual sync from WP CLI.', 'elasticpress');
+		}
+
+		switch (trigger) {
+			case 'manual':
+			default: {
+				return __('Manual sync from Sync Settings.', 'elasticpress');
+			}
+		}
+	}, [method, trigger]);
+
+	/**
+	 * Whether the sync has errors.
+	 */
+	const isError = useMemo(() => {
+		return status === 'failed' || status === 'with_errors' || status === 'aborted';
+	}, [status]);
+
+	/**
+	 * Whether the sync was a success.
+	 */
+	const isSuccess = useMemo(() => {
+		return status === 'success';
+	}, [status]);
+
+	return (
+		<div
+			className={classnames('ep-previous-sync', {
+				'is-error': isError,
+				'is-success': isSuccess,
+			})}
+		>
+			<Icon icon={isError ? error : success} />
+			<div className="ep-previous-sync__title">
+				{when} &mdash; {why}
+			</div>
+			<div className="ep-previous-sync__help">{how}</div>
+		</div>
+	);
+};

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

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies.
+ */
+import { WPElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import { useSync } from '../../sync';
+import PreviousSync from './previous-sync';
+
+/**
+ * Delete checkbox component.
+ *
+ * @returns {WPElement} Sync page component.
+ */
+export default () => {
+	const { syncHistory } = useSync();
+
+	return (
+		<ol className="ep-sync-history">
+			{syncHistory.map((s) => {
+				return (
+					<li>
+						<PreviousSync
+							failures={s.failed}
+							method={s.method}
+							stateDatetime={s.start_date_time}
+							status={s.final_status}
+							trigger={s.trigger}
+						/>
+					</li>
+				);
+			})}
+		</ol>
+	);
+};

assets/js/sync-ui/config.js

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

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

@@ -0,0 +1,34 @@
+.ep-previous-sync {
+	align-items: center;
+	display: grid;
+	grid-column-gap: 8px;
+	grid-template-areas:
+		"icon title"
+		". help";
+	grid-template-columns: max-content auto;
+	justify-content: start;
+
+	& svg {
+		display: block;
+		grid-area: icon;
+	}
+
+	&.is-success svg {
+		fill: var(--ep-sync-color-success);
+	}
+
+	&.is-error svg {
+		fill: var(--ep-sync-color-error);
+	}
+}
+
+.ep-previous-sync__title {
+	grid-area: title;
+}
+
+.ep-previous-sync__help {
+	color: rgb(117, 117, 117);
+	font-size: 12px;
+	font-style: normal;
+	grid-area: help;
+}

assets/js/sync-ui/css/sync-history.css

@@ -0,0 +1,11 @@
+.ep-sync-history {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	list-style: none;
+	margin-left: 0;
+
+	& li {
+		margin: 0;
+	}
+}

assets/js/sync-ui/index.js

@@ -13,12 +13,11 @@ import {
 	apiUrl,
 	autoIndex,
 	indexables,
-	lastSyncDateTime,
-	lastSyncFailed,
 	indexMeta,
 	isEpio,
-	postTypes,
 	nonce,
+	postTypes,
+	syncHistory,
 } from './config';
 import { SyncSettingsProvider } from './provider';
 import Sync from './apps/sync';
@@ -36,8 +35,7 @@ import './style.css';
 const App = () => (
 	<SyncProvider
 		apiUrl={apiUrl}
-		defaultLastSyncDateTime={lastSyncDateTime}
-		defaultLastSyncFailed={lastSyncFailed}
+		defaultSyncHistory={syncHistory}
 		indexMeta={indexMeta}
 		isEpio={isEpio}
 		nonce={nonce}

assets/js/sync-ui/style.css

@@ -3,14 +3,16 @@
 @import "./css/log.css";
 @import "./css/messages.css";
 @import "./css/panel.css";
+@import "./css/previous-sync.css";
 @import "./css/progress-bar.css";
 @import "./css/progress.css";
+@import "./css/sync-history.css";
 
 :root {
 	--ep-sync-color-black: #1a1e24;
-	--ep-sync-color-error: #b52727;
+	--ep-sync-color-error: #cc1818;
 	--ep-sync-color-light-grey: #f0f0f0;
-	--ep-sync-color-success: #46b450;
+	--ep-sync-color-success: #4ab866;
 	--ep-sync-color-warning: #ffb359;
 	--ep-sync-color-white: #fff;
 }