feat: batch sync content using action scheduler

assets/src/components/SiteIndexableEntities/BatchRow.tsx

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import JobStatusBadge from './JobStatusBadge';
+import type { JobStatus } from './types';
+
+interface BatchRowProps {
+	child: JobStatus;
+	idx: number;
+}
+
+const BatchRow = ( { child, idx }: BatchRowProps ) => (
+	<div className="onesearch-batch-row">
+		<span className="onesearch-batch-label">
+			{ sprintf(
+				/* translators: %d: batch number */
+				__( 'Batch %d', 'onesearch' ),
+				idx + 1
+			) }
+		</span>
+		<JobStatusBadge status={ child.status } size="small" />
+		{ child.error && (
+			<span className="onesearch-batch-error">
+				{ child.error.substring( 0, 80 ) }
+			</span>
+		) }
+	</div>
+);
+
+export default BatchRow;

assets/src/components/SiteIndexableEntities/EntitySiteCard.tsx

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalText as Text } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import MultiSelectChips from '../MultiSelectChips';
+import type { PostTypeOption } from '../SiteSearchSettings';
+import { toMultiSelectOptions } from './utils';
+
+interface EntitySiteCardProps {
+	siteName: string;
+	siteUrl: string;
+	options: PostTypeOption[] | undefined;
+	selectedValues: string[];
+	disabled: boolean;
+	isBrand?: boolean;
+	onChange: ( values: string[] ) => void;
+}
+
+const EntitySiteCard = ( {
+	siteName,
+	siteUrl,
+	options,
+	selectedValues,
+	disabled,
+	isBrand = false,
+	onChange,
+}: EntitySiteCardProps ) => (
+	<div
+		className={ `onesearch-entity-site${
+			isBrand ? ' onesearch-entity-brand' : ''
+		}` }
+	>
+		<div className="onesearch-entity-site-header">
+			<h3 className="onesearch-entity-site-name">{ siteName }</h3>
+			<p className="onesearch-entity-site-url">{ siteUrl }</p>
+		</div>
+		{ ! options ? (
+			<Text variant="muted">
+				{ __(
+					'No entities to select. Please check site configuration',
+					'onesearch'
+				) }
+			</Text>
+		) : (
+			<div className="onesearch-entity-selector">
+				<MultiSelectChips
+					placeholder={ __( 'Select entities…', 'onesearch' ) }
+					options={ toMultiSelectOptions( options ) }
+					value={ selectedValues }
+					onChange={ onChange }
+					valueField="slug"
+					labelField="label"
+					disabled={ disabled }
+				/>
+			</div>
+		) }
+	</div>
+);
+
+export default EntitySiteCard;

assets/src/components/SiteIndexableEntities/HistoryDetailsView.tsx

@@ -0,0 +1,180 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, __experimentalText as Text } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import type { JobStatus, SiteJobState } from './types';
+import BatchRow from './BatchRow';
+import JobStatusBadge from './JobStatusBadge';
+import { getHistorySites } from './utils';
+
+interface HistoryDetailsViewProps {
+	selectedHistoryJob: JobStatus;
+	historyDetails: SiteJobState[];
+	historyDetailsLoading: boolean;
+	hasFailedHistoryDetails: boolean;
+	retryingHistoryJob: boolean;
+	currentSiteUrl: string;
+	onBack: () => void;
+	onRetry: () => void;
+}
+
+const HistoryDetailsView = ( {
+	selectedHistoryJob,
+	historyDetails,
+	historyDetailsLoading,
+	hasFailedHistoryDetails,
+	retryingHistoryJob,
+	currentSiteUrl,
+	onBack,
+	onRetry,
+}: HistoryDetailsViewProps ) => {
+	const historySites = getHistorySites( selectedHistoryJob, currentSiteUrl );
+	const totalBatches = historySites.reduce(
+		( sum, site ) => sum + ( site.batch_count || 0 ),
+		0
+	);
+
+	return (
+		<div className="onesearch-history-details-view">
+			<div className="onesearch-history-details-toolbar">
+				<Button
+					variant="tertiary"
+					size="default"
+					onClick={ onBack }
+					className="onesearch-history-details-back"
+				>
+					‹ { __( 'Back', 'onesearch' ) }
+				</Button>
+				{ ( hasFailedHistoryDetails || retryingHistoryJob ) && (
+					<Button
+						variant="primary"
+						size="small"
+						onClick={ onRetry }
+						isBusy={ retryingHistoryJob }
+						disabled={ retryingHistoryJob }
+					>
+						{ retryingHistoryJob
+							? __( 'Retrying…', 'onesearch' )
+							: __( 'Retry Failed Batches', 'onesearch' ) }
+					</Button>
+				) }
+			</div>
+
+			<div className="onesearch-history-details-summary">
+				<div>
+					<span>{ __( 'Sites', 'onesearch' ) }</span>
+					<strong>{ historySites.length }</strong>
+				</div>
+				<div>
+					<span>{ __( 'Batches', 'onesearch' ) }</span>
+					<strong>
+						{ totalBatches ||
+							selectedHistoryJob.children_total ||
+							selectedHistoryJob.progress_total }
+					</strong>
+				</div>
+				<div>
+					<span>{ __( 'Status', 'onesearch' ) }</span>
+					<JobStatusBadge
+						status={ selectedHistoryJob.status }
+						size="small"
+						type="text"
+					/>
+				</div>
+			</div>
+
+			{ selectedHistoryJob.error && (
+				<div className="onesearch-job-error">
+					{ selectedHistoryJob.error }
+				</div>
+			) }
+
+			<div
+				className={ `onesearch-history-details-content${
+					historyDetailsLoading
+						? ' onesearch-history-details-content--loading'
+						: ''
+				}` }
+			>
+				{ historyDetailsLoading && (
+					<div className="onesearch-history-details-loading">
+						<span className="onesearch-reindex-spinner" />
+						<Text variant="muted">
+							{ __( 'Loading job details…', 'onesearch' ) }
+						</Text>
+					</div>
+				) }
+
+				{ ! historyDetailsLoading && (
+					<div className="onesearch-history-details-sites">
+						{ historyDetails.map( ( state ) => (
+							<div
+								key={ state.site.site_url }
+								className="onesearch-history-details-site"
+							>
+								<div className="onesearch-history-details-site-header">
+									<div>
+										<strong>
+											{ state.site.site_name }
+										</strong>
+										<Text variant="muted">
+											{ state.site.site_url }
+										</Text>
+									</div>
+									<div className="onesearch-history-details-site-meta">
+										<Text variant="muted">
+											{ sprintf(
+												/* translators: %d: batch count */
+												__( '%d batches', 'onesearch' ),
+												state.site.batch_count ||
+													state.children.length
+											) }
+										</Text>
+										{ state.reindexJob && (
+											<JobStatusBadge
+												status={
+													state.reindexJob.status
+												}
+												size="small"
+											/>
+										) }
+									</div>
+								</div>
+
+								{ state.children.length > 0 ? (
+									<div className="onesearch-batch-list">
+										{ state.children.map(
+											( child, idx ) => (
+												<BatchRow
+													key={ child.id }
+													child={ child }
+													idx={ idx }
+												/>
+											)
+										) }
+									</div>
+								) : (
+									<Text
+										variant="muted"
+										className="onesearch-history-details-empty"
+									>
+										{ __(
+											'No batch details available.',
+											'onesearch'
+										) }
+									</Text>
+								) }
+							</div>
+						) ) }
+					</div>
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default HistoryDetailsView;

assets/src/components/SiteIndexableEntities/HistoryPagination.tsx

@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+
+interface HistoryPaginationProps {
+	historyPage: number;
+	historyTotalPages: number;
+	onPageChange: ( page: number ) => void;
+}
+
+const HistoryPagination = ( {
+	historyPage,
+	historyTotalPages,
+	onPageChange,
+}: HistoryPaginationProps ) => {
+	if ( historyTotalPages <= 1 ) {
+		return null;
+	}
+
+	const pages: ( number | string )[] = [];
+	const delta = 2;
+	const last = historyTotalPages;
+
+	pages.push( 1 );
+
+	const rangeStart = Math.max( 2, historyPage - delta );
+	const rangeEnd = Math.min( last - 1, historyPage + delta );
+
+	if ( rangeStart > 2 ) {
+		pages.push( '…' );
+	}
+	for ( let i = rangeStart; i <= rangeEnd; i++ ) {
+		pages.push( i );
+	}
+	if ( rangeEnd < last - 1 ) {
+		pages.push( '…' );
+	}
+	if ( last > 1 ) {
+		pages.push( last );
+	}
+
+	const handlePageClick = ( page: number ) => {
+		if ( page === historyPage || page < 1 || page > last ) {
+			return;
+		}
+		onPageChange( page );
+	};
+
+	return (
+		<div className="onesearch-history-pagination">
+			<Button
+				variant="tertiary"
+				size="small"
+				disabled={ historyPage <= 1 }
+				onClick={ () => handlePageClick( historyPage - 1 ) }
+				aria-label={ __( 'Previous page', 'onesearch' ) }
+			>
+				‹
+			</Button>
+			{ pages.map( ( p, idx ) => {
+				if ( typeof p === 'string' ) {
+					return (
+						<span
+							key={ `ellipsis-${ idx }` }
+							className="onesearch-history-pagination-ellipsis"
+						>
+							…
+						</span>
+					);
+				}
+				return (
+					<Button
+						key={ p }
+						variant={ p === historyPage ? 'primary' : 'tertiary' }
+						size="small"
+						onClick={ () => handlePageClick( p ) }
+						className={
+							p === historyPage
+								? 'onesearch-history-pagination-current'
+								: ''
+						}
+					>
+						{ p }
+					</Button>
+				);
+			} ) }
+			<Button
+				variant="tertiary"
+				size="small"
+				disabled={ historyPage >= last }
+				onClick={ () => handlePageClick( historyPage + 1 ) }
+				aria-label={ __( 'Next page', 'onesearch' ) }
+			>
+				›
+			</Button>
+		</div>
+	);
+};
+
+export default HistoryPagination;