Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show a single sync option for the initial sync. #2858

Merged
merged 6 commits into from
Aug 10, 2022
Merged

Show a single sync option for the initial sync. #2858

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b9bd2a4
Show a single sync option for the initial sync.
JakePT Jun 24, 2022
9a53494
Merge branch 'develop' into feature/2695
JakePT Aug 2, 2022
4536966
Merge branch 'develop' into feature/2695
JakePT Aug 9, 2022
db0ad2a
Add a test for the initial sync.
JakePT Aug 9, 2022
bb9927d
Fix expected message in test.
JakePT Aug 9, 2022
fe591d8
Fix tests of install skipping the setup step.
JakePT Aug 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 51 additions & 141 deletions assets/js/sync/components/sync-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
/**
* WordPress dependencies.
*/
import { Button, Icon, Panel, PanelBody } from '@wordpress/components';
import { WPElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { warning } from '@wordpress/icons';
import { __, sprintf } from '@wordpress/i18n';

/**
* Internal dependencies.
*/
import SyncControls from './sync/controls';
import SyncLog from './sync/log';
import SyncProgress from './sync/progress';
import SyncStatus from './sync/status';
import SyncPanel from './sync/panel';

/**
* Sync page component.
Expand All @@ -21,6 +16,7 @@ import SyncStatus from './sync/status';
* @param {boolean} props.isCli If sync is a CLI sync.
* @param {boolean} props.isComplete If sync is complete.
* @param {boolean} props.isDeleting If sync is a delete and sync.
* @param {boolean} props.isEpio If ElasticPress is using ElasticPress.io.
* @param {boolean} props.isPaused If sync is paused.
* @param {boolean} props.isSyncing If sync is running.
* @param {number} props.itemsProcessed Number of items processed.
Expand All @@ -36,147 +32,61 @@ import SyncStatus from './sync/status';
* @param {string} props.syncStartDateTime Date and time of current sync in ISO 8601.
* @returns {WPElement} Sync page component.
*/
export default ({
isCli,
isComplete,
isDeleting,
isPaused,
isSyncing,
itemsProcessed,
itemsTotal,
lastSyncDateTime,
lastSyncFailed,
log,
onDelete,
onPause,
onResume,
onStop,
onSync,
syncStartDateTime,
}) => {
export default ({ isCli, isComplete, isDeleting, isEpio, isSyncing, log, ...props }) => {
const isInitialSync = props.lastSyncDateTime === null;

return (
<>
<h1 className="ep-sync-heading">{__('Sync Settings', 'elasticpress')}</h1>

<Panel className="ep-sync-panel">
<PanelBody className="ep-sync-panel__body">
<div className="ep-sync-panel__description">
<p className="ep-sync-panel__introduction">
{__(
<SyncPanel
introduction={
isInitialSync
? sprintf(
/* translators: %s: Index type. ElasticPress.io or Elasticsearch. */
__(
'Run a sync to index your existing content %s. Once syncing finishes, your site is officially supercharged.',
'elasticpress',
),
isEpio
? __('on ElasticPress.io', 'elasticpress')
: __('in Elasticsearch', 'elasticpress'),
)
: __(
'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',
)}
</p>

{lastSyncDateTime ? (
<>
<h3 className="ep-sync-heading">
{__('Last Sync', 'elasticpress')}
</h3>
<SyncStatus
dateTime={lastSyncDateTime}
isSuccess={!lastSyncFailed}
/>
</>
) : null}
</div>

<div className="ep-sync-panel__controls">
<SyncControls
disabled={(isSyncing && isDeleting) || (isSyncing && isCli)}
isPaused={isPaused}
isSyncing={isSyncing && !isDeleting}
onPause={onPause}
onResume={onResume}
onStop={onStop}
onSync={onSync}
showSync
/>
</div>

{!isDeleting && (isSyncing || isComplete) ? (
<div className="ep-sync-panel__row">
<SyncProgress
dateTime={syncStartDateTime}
isCli={isCli}
isComplete={isComplete}
isPaused={isPaused}
itemsProcessed={itemsProcessed}
itemsTotal={itemsTotal}
/>
</div>
) : null}
)
}
isComplete={isComplete}
isDisabled={(isSyncing && isDeleting) || (isSyncing && isCli)}
isSyncing={isSyncing && !isDeleting}
logMessages={log.filter((m) => !m.isDeleting)}
showLastSync
showProgress={!isDeleting && (isSyncing || isComplete)}
showSync
{...props}
/>

<div className="ep-sync-panel__row">
<SyncLog messages={log.filter((m) => !m.isDeleting)} />
</div>
</PanelBody>
</Panel>

<h2 className="ep-sync-heading">{__('Delete All Data and Sync', 'elasticpress')}</h2>

<Panel className="ep-sync-panel">
<PanelBody className="ep-sync-panel__body">
<div className="ep-sync-panel__description">
<p className="ep-sync-panel__introduction">
{__(
'If you are still having issues with your search results, you may need to do a completely fresh sync.',
'elasticpress',
)}
</p>

<p>
<Button
className="ep-sync-button ep-sync-button--delete"
disabled={isSyncing}
isSecondary
isDestructive
onClick={onDelete}
>
{__('Delete all Data and Start a Fresh Sync', 'elasticpress')}
</Button>
</p>
</div>

<div className="ep-sync-panel__controls">
<SyncControls
disabled={(isSyncing && !isDeleting) || (isSyncing && isCli)}
isPaused={isPaused}
isSyncing={isSyncing && isDeleting}
onPause={onPause}
onResume={onResume}
onStop={onStop}
/>
</div>

{isDeleting && (isSyncing || isComplete) ? (
<div className="ep-sync-panel__row">
<SyncProgress
dateTime={syncStartDateTime}
isCli={isCli}
isComplete={isComplete}
isPaused={isPaused}
itemsProcessed={itemsProcessed}
itemsTotal={itemsTotal}
/>
</div>
) : null}

<div className="ep-sync-panel__row">
<SyncLog messages={log.filter((m) => m.isDeleting)} />
</div>

<div className="ep-sync-panel__row">
<p className="ep-sync-warning">
<Icon icon={warning} />
{__(
'All indexed data on ElasticPress will be deleted without affecting anything on your WordPress website. This may take a few hours depending on the amount of content that needs to be synced and indexed. While this is happening, searches will use the default WordPress results',
'elasticpress',
)}
</p>
</div>
</PanelBody>
</Panel>
{!isInitialSync ? (
<SyncPanel
heading={__('Delete All Data and Sync', 'elasticpress')}
introduction={__(
'If you are still having issues with your search results, you may need to do a completely fresh sync.',
'elasticpress',
)}
isComplete={isComplete}
isDisabled={(isSyncing && !isDeleting) || (isSyncing && isCli)}
isSyncing={isSyncing && isDeleting}
logMessages={log.filter((m) => m.isDeleting)}
showDelete
showProgress={isDeleting && (isSyncing || isComplete)}
warningMessage={__(
'All indexed data on ElasticPress will be deleted without affecting anything on your WordPress website. This may take a few hours depending on the amount of content that needs to be synced and indexed. While this is happening, searches will use the default WordPress results',
'elasticpress',
)}
{...props}
/>
) : null}
</>
);
};
151 changes: 151 additions & 0 deletions assets/js/sync/components/sync/panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
/**
* WordPress dependencies.
*/
import { Button, Icon, Panel, PanelBody } from '@wordpress/components';
import { WPElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { warning } from '@wordpress/icons';

/**
* Internal dependencies.
*/
import SyncControls from './controls';
import SyncLog from './log';
import SyncProgress from './progress';
import SyncStatus from './status';

/**
* Sync page component.
*
* @param {object} props Component props.
* @param {string} props.heading Panel heading.
* @param {string} props.introduction Panel introduction.
* @param {boolean} props.isCli If sync is a CLI sync.
* @param {boolean} props.isComplete If sync is complete.
* @param {boolean} props.isDisabled If controls are disabled.
* @param {boolean} props.isPaused If sync is paused.
* @param {boolean} props.isSyncing If sync is running.
* @param {number} props.itemsProcessed Number of items processed.
* @param {number} props.itemsTotal Number of items to process.
* @param {string} props.lastSyncDateTime Date and time of last sync in ISO-8601.
* @param {boolean} props.lastSyncFailed If the last sync had failures.
* @param {object[]} props.logMessages Log messages.
* @param {Function} props.onDelete Callback for clicking delete and sync.
* @param {Function} props.onPause Callback for clicking pause.
* @param {Function} props.onResume Callback for clicking resume.
* @param {Function} props.onStop Callback for clicking stop.
* @param {Function} props.onSync Callback for clicking sync.
* @param {string} props.syncStartDateTime Date and time of current sync in ISO 8601.
* @param {boolean} props.showLastSync Whether to show the last sync details.
* @param {boolean} props.showDelete Whether to show the delete button.
* @param {boolean} props.showProgress Whether to show the progress bar.
* @param {boolean} props.showSync Whether to show the sync button.
* @param {string} props.warningMessage Warning message.
* @returns {WPElement} Sync page component.
*/
export default ({
heading,
introduction,
isCli,
isComplete,
isDisabled,
isPaused,
isSyncing,
itemsProcessed,
itemsTotal,
lastSyncDateTime,
lastSyncFailed,
logMessages,
onDelete,
onPause,
onResume,
onStop,
onSync,
showDelete,
showLastSync,
showProgress,
showSync,
syncStartDateTime,
warningMessage,
}) => {
return (
<>
{heading ? <h2 className="ep-sync-heading">{heading}</h2> : null}

<Panel className="ep-sync-panel">
<PanelBody className="ep-sync-panel__body">
<div className="ep-sync-panel__description">
{introduction ? (
<p className="ep-sync-panel__introduction">{introduction}</p>
) : null}

{showLastSync && lastSyncDateTime ? (
<>
<h3 className="ep-sync-heading">
{__('Last Sync', 'elasticpress')}
</h3>
<SyncStatus
dateTime={lastSyncDateTime}
isSuccess={!lastSyncFailed}
/>
</>
) : null}

{showDelete ? (
<p>
<Button
className="ep-sync-button ep-sync-button--delete"
disabled={isDisabled}
isSecondary
isDestructive
onClick={onDelete}
>
{__('Delete all Data and Start a Fresh Sync', 'elasticpress')}
</Button>
</p>
) : null}
</div>

<div className="ep-sync-panel__controls">
<SyncControls
disabled={isDisabled}
isPaused={isPaused}
isSyncing={isSyncing}
onPause={onPause}
onResume={onResume}
onStop={onStop}
onSync={onSync}
showSync={showSync}
/>
</div>

{showProgress ? (
<div className="ep-sync-panel__row">
<SyncProgress
dateTime={syncStartDateTime}
isCli={isCli}
isComplete={isComplete}
isPaused={isPaused}
itemsProcessed={itemsProcessed}
itemsTotal={itemsTotal}
/>
</div>
) : null}

<div className="ep-sync-panel__row">
<SyncLog messages={logMessages} />
</div>

{warningMessage ? (
<div className="ep-sync-panel__row">
<p className="ep-sync-warning">
<Icon icon={warning} />
{warningMessage}
</p>
</div>
) : null}
</PanelBody>
</Panel>
</>
);
};
Loading