WIP Sync page JS rewrite.

10up · felipeelia · May 12, 2022 · May 3, 2022 · May 9, 2022 · May 10, 2022
commit 55f86e46cc7c1e71198d4fac5b26de6b9e82fe80
diff --git a/assets/js/sync/components/common/log.js b/assets/js/sync/components/common/log.js
@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies.
+ */
+import { TabPanel } from '@wordpress/components';
+import { useMemo, WPElement } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Log component.
+ *
+ * @param {object} props Component props.
+ * @param {object[]} props.messages Log messages.
+ * @returns {WPElement} Component.
+ */
+export default ({ messages }) => {
+	const errorMessages = useMemo(() => messages.filter((m) => m.status === 'error'), [messages]);
+
+	const tabs = [
+		{
+			messages,
+			name: 'full',
+			title: __('Full Log', 'elasticpress'),
+		},
+		{
+			messages: errorMessages,
+			name: 'error',
+			title: sprintf(
+				/* translators: %d: Error message count. */
+				__('Errors (%d)', 'elasticpress'),
+				errorMessages.length,
+			),
+		},
+	];
+
+	return (
+		<TabPanel tabs={tabs}>
+			{({ messages }) => (
+				<div className="ep-sync-log">
+					{messages.map((m, i) => (
+						<div className="ep-sync-log__line-number" role="presentation">
+							{i + 1}
+						</div>
+					))}
+					{messages.map((m) => (
+						<div className={`ep-sync-log__message ep-sync-log__message--${m.status}`}>
+							{m.message}
+						</div>
+					))}
+				</div>
+			)}
+		</TabPanel>
+	);
+};
diff --git a/assets/js/sync/components/common/progress-bar.js b/assets/js/sync/components/common/progress-bar.js
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies.
+ */
+import { WPElement } from '@wordpress/element';
+
+/**
+ * Progress bar component.
+ *
+ * @param {object} props Component props.
+ * @param {boolean} props.isComplete Is operation complete.
+ * @param {number} props.current Current value.
+ * @param {number} props.total Current total.
+ * @returns {WPElement} Component.
+ */
+export default ({ isComplete, current, total }) => {
+	const now = Math.floor((current / total) * 100);
+
+	return (
+		<div
+			aria-valuemax={100}
+			aria-valuemin={0}
+			aria-valuenow={now}
+			className={`ep-sync-progress-bar ${isComplete ? `ep-sync-progress-bar--complete` : ``}`}
+			role="progressbar"
+		>
+			<div className="ep-sync-progress-bar__progress" style={{ width: `${now}%` }} />
+			<span className="ep-sync-progress-bar__label">{`${now}%`}</span>
+		</div>
+	);
+};
diff --git a/assets/js/sync/components/common/status.js b/assets/js/sync/components/common/status.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies.
+ */
+import { WPElement } from '@wordpress/element';
+import { Icon } from '@wordpress/components';
+import { dateI18n } from '@wordpress/date';
+
+/**
+ * Internal dependencies.
+ */
+import thumbsDown from '../icons/thumbs-down';
+import thumbsUp from '../icons/thumbs-up';
+
+/**
+ * Sync button component.
+ *
+ * @param {object} props Component props.
+ * @param {string} props.dateTime Relevant date and time.
+ * @param {boolean} props.isSuccess Is the status success.
+ * @param {string} props.label Status label.
+ * @returns {WPElement} Component.
+ */
+export default ({ dateTime, isSuccess, label }) => {
+	return (
+		<div
+			className={`ep-sync-status ${
+				isSuccess ? `ep-sync-status--success` : `ep-sync-status--error`
+			}`}
+		>
+			<Icon icon={isSuccess ? thumbsUp : thumbsDown} /> {label}
+			<time dateTime={dateI18n('c', dateTime)}>{dateI18n('D, F d, Y H:i', dateTime)}</time>
+		</div>
+	);
+};
diff --git a/assets/js/sync/components/icons/pause.js b/assets/js/sync/components/icons/pause.js
@@ -0,0 +1,15 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+export default () => {
+	return (
+		<SVG
+			version="1.1"
+			xmlns="http://www.w3.org/2000/svg"
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+		>
+			<Path d="M5 16v-12h3v12h-3zM12 4h3v12h-3v-12z" />
+		</SVG>
+	);
+};
diff --git a/assets/js/sync/components/icons/play.js b/assets/js/sync/components/icons/play.js
@@ -0,0 +1,15 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+export default () => {
+	return (
+		<SVG
+			version="1.1"
+			xmlns="http://www.w3.org/2000/svg"
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+		>
+			<Path d="M5 4l10 6-10 6v-12z" />
+		</SVG>
+	);
+};
diff --git a/assets/js/sync/components/icons/stop.js b/assets/js/sync/components/icons/stop.js
@@ -0,0 +1,15 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+export default () => {
+	return (
+		<SVG
+			version="1.1"
+			xmlns="http://www.w3.org/2000/svg"
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+		>
+			<Path d="M 4 16 L 4 4 L 16 4 L 16 16 L 4 16 Z" />
+		</SVG>
+	);
+};
diff --git a/assets/js/sync/components/icons/thumbs-down.js b/assets/js/sync/components/icons/thumbs-down.js
@@ -0,0 +1,15 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+export default () => {
+	return (
+		<SVG
+			version="1.1"
+			xmlns="http://www.w3.org/2000/svg"
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+		>
+			<Path d="M7.28 18c-0.15 0.020-0.26-0.020-0.41-0.070-0.56-0.19-0.83-0.79-0.66-1.35 0.17-0.55 1-3.040 1-3.58 0-0.53-0.75-1-1.35-1h-3c-0.6 0-1-0.4-1-1s2-7 2-7c0.17-0.39 0.55-1 1-1h9.14v9h-2.14c-0.41 0.41-3.3 4.71-3.58 5.27-0.21 0.41-0.6 0.68-1 0.73zM18 12h-2v-9h2v9z" />
+		</SVG>
+	);
+};
diff --git a/assets/js/sync/components/icons/thumbs-up.js b/assets/js/sync/components/icons/thumbs-up.js
@@ -0,0 +1,15 @@
+import { SVG, Path } from '@wordpress/primitives';
+
+export default () => {
+	return (
+		<SVG
+			version="1.1"
+			xmlns="http://www.w3.org/2000/svg"
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+		>
+			<Path d="M12.72 2c0.15-0.020 0.26 0.020 0.41 0.070 0.56 0.19 0.83 0.79 0.66 1.35-0.17 0.55-1 3.040-1 3.58 0 0.53 0.75 1 1.35 1h3c0.6 0 1 0.4 1 1s-2 7-2 7c-0.17 0.39-0.55 1-1 1h-9.14v-9h2.14c0.41-0.41 3.3-4.71 3.58-5.27 0.21-0.41 0.6-0.68 1-0.73zM2 8h2v9h-2v-9z" />
+		</SVG>
+	);
+};
diff --git a/assets/js/sync/components/sync-button.js b/assets/js/sync/components/sync-button.js
@@ -0,0 +1,49 @@
+import { Button } from '@wordpress/components';
+import { useContext, WPElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { external, update } from '@wordpress/icons';
+
+/**
+ * Internal dependencies.
+ */
+import { SyncContext } from '../context';
+
+/**
+ * Sync button component.
+ *
+ * @param {object} props Component props.
+ * @param {boolean} props.isDelete Whether button is a delete button.
+ * @param {Function} props.onClick Click callback.
+ * @returns {WPElement} Component.
+ */
+export default ({ isDelete, onClick }) => {
+	const { isSyncing } = useContext(SyncContext);
+
+	/**
+	 * Render.
+	 */
+	return (
+		<>
+			<Button
+				disabled={isSyncing}
+				icon={isDelete ? null : update}
+				isDestructive={isDelete}
+				onClick={onClick}
+				variant={isDelete ? 'secondary' : 'primary'}
+			>
+				{isDelete
+					? __('Delete all Data and Start a Fresh Sync', 'elasticpress')
+					: __('Sync now', 'elasticpress')}
+			</Button>
+			{!isDelete && (
+				<Button
+					icon={external}
+					variant="link"
+					href="https://elasticpress.zendesk.com/hc/en-us/articles/5205632443533"
+				>
+					{__('Learn more', 'elasticpress')}
+				</Button>
+			)}
+		</>
+	);
+};
diff --git a/assets/js/sync/components/sync-controls.js b/assets/js/sync/components/sync-controls.js
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies.
+ */
+import { Button } from '@wordpress/components';
+import { useContext, WPElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import { SyncContext } from '../context';
+import pause from './icons/pause';
+import play from './icons/play';
+import stop from './icons/stop';
+
+/**
+ * Sync button component.
+ *
+ * @param {object} props Component props.
+ * @param {Function} props.onPlayPause Play/pause button click callback.
+ * @param {Function} props.onStop Stop button click callback.
+ * @returns {WPElement} Component.
+ */
+export default ({ onPlayPause, onStop }) => {
+	const { isPaused } = useContext(SyncContext);
+
+	/**
+	 * Render.
+	 */
+	return (
+		<>
+			<Button
+				aria-label={
+					isPaused ? __('Resume sync', 'elasticpress') : __('Pause sync', 'elasticpress')
+				}
+				icon={isPaused ? play : pause}
+				onClick={onPlayPause}
+				variant="primary"
+			/>
+			<Button
+				aria-label={__('Cancel sync', 'elasticpress')}
+				icon={stop}
+				isDestructive
+				onClick={onStop}
+				variant="primary"
+			/>
+		</>
+	);
+};
diff --git a/assets/js/sync/components/sync-log.js b/assets/js/sync/components/sync-log.js
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies.
+ */
+import { PanelBody } from '@wordpress/components';
+import { WPElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import Log from './common/log';
+
+/**
+ * Sync button component.
+ *
+ * @param {object} props Component props.
+ * @param {object[]} props.messages Log messages.
+ * @returns {WPElement} Component.
+ */
+export default ({ messages }) => {
+	return (
+		<PanelBody title={__('Log', 'elasticpress')} initialOpen={false}>
+			<Log messages={messages} />
+		</PanelBody>
+	);
+};
diff --git a/assets/js/sync/components/sync-progress.js b/assets/js/sync/components/sync-progress.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies.
+ */
+import { useContext, useMemo, WPElement } from '@wordpress/element';
+import { dateI18n } from '@wordpress/date';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import { SyncContext } from '../context';
+import ProgressBar from './common/progress-bar';
+
+/**
+ * Sync button component.
+ *
+ * @returns {WPElement} Component.
+ */
+export default () => {
+	const { isCli, isComplete, itemsProcessed, itemsTotal, syncStartDateTime } =
+		useContext(SyncContext);
+
+	/**
+	 * Sync progress message.
+	 */
+	const message = useMemo(
+		/**
+		 * Determine appropriate sync status message.
+		 *
+		 * @returns {string} Sync progress message.
+		 */
+		() => {
+			if (isComplete) {
+				return __('Sync complete', 'elasticpress');
+			}
+
+			if (isCli) {
+				return __('WP CLI sync in progress', 'elasticpress');
+			}
+
+			if (syncStartDateTime) {
+				return __('Sync in progress', 'elasticpress');
+			}
+
+			return __('Starting sync', 'elasticpress');
+		},
+		[isCli, isComplete, syncStartDateTime],
+	);
+
+	return (
+		<div>
+			{message}
+			{syncStartDateTime ? (
+				<>
+					<em>{__('Start time:', 'elasticpress')}</em>{' '}
+					{dateI18n('D, F d, Y H:i', syncStartDateTime)}
+				</>
+			) : null}
+			<ProgressBar current={itemsProcessed} isComplete={isComplete} total={itemsTotal} />
+		</div>
+	);
+};