Sync: Add pause/unpause functionality for sync uploads

src/components/icons/pause.tsx

@@ -0,0 +1,6 @@
+export const PauseIcon = () => (
+	<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<rect x="6" y="6" width="2" height="12" rx="1" fill="currentColor" />
+		<rect x="12" y="6" width="2" height="12" rx="1" fill="currentColor" />
+	</svg>
+);

src/components/icons/play.tsx

@@ -0,0 +1,5 @@
+export const PlayIcon = () => (
+	<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M5.5 3.5L13.5 9.5L5.5 15.5V3.5Z" fill="currentColor" />
+	</svg>
+);

src/hooks/sync-sites/sync-sites-context.tsx

@@ -58,13 +58,21 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
 		} );
 
 	const [ pushStates, setPushStates ] = useState< PushStates >( {} );
-	const { pushSite, isAnySitePushing, isSiteIdPushing, clearPushState, getPushState, cancelPush } =
-		useSyncPush( {
-			pushStates,
-			setPushStates,
-			onPushSuccess: ( remoteSiteId, localSiteId ) =>
-				updateSiteTimestamp( { siteId: remoteSiteId, localSiteId, type: 'push' } ),
-		} );
+	const {
+		pushSite,
+		isAnySitePushing,
+		isSiteIdPushing,
+		clearPushState,
+		getPushState,
+		cancelPush,
+		pauseUpload,
+		resumeUpload,
+	} = useSyncPush( {
+		pushStates,
+		setPushStates,
+		onPushSuccess: ( remoteSiteId, localSiteId ) =>
+			updateSiteTimestamp( { siteId: remoteSiteId, localSiteId, type: 'push' } ),
+	} );
 
 	useListenDeepLinkConnection();
 
@@ -145,6 +153,8 @@ export function SyncSitesProvider( { children }: { children: React.ReactNode } )
 				isSiteIdPushing,
 				clearPushState,
 				cancelPush,
+				pauseUpload,
+				resumeUpload,
 				getLastSyncTimeText,
 			} }
 		>

src/hooks/sync-sites/use-sync-push.ts

@@ -51,6 +51,8 @@ type UseSyncPushProps = {
 };
 
 type CancelPush = ( selectedSiteId: string, remoteSiteId: number ) => void;
+type PauseUpload = ( selectedSiteId: string, remoteSiteId: number ) => Promise< boolean >;
+type ResumeUpload = ( selectedSiteId: string, remoteSiteId: number ) => Promise< boolean >;
 
 export type UseSyncPush = {
 	pushStates: PushStates;
@@ -60,6 +62,8 @@ export type UseSyncPush = {
 	isSiteIdPushing: IsSiteIdPushing;
 	clearPushState: ClearState;
 	cancelPush: CancelPush;
+	pauseUpload: PauseUpload;
+	resumeUpload: ResumeUpload;
 };
 
 /**
@@ -349,6 +353,13 @@ export function useSyncPush( {
 					throw response;
 				}
 			} catch ( error ) {
+				if ( error instanceof Error && error.message === 'Export aborted' ) {
+					updatePushState( selectedSite.id, remoteSiteId, {
+						status: pushStatesProgressInfo.cancelled,
+					} );
+					return;
+				}
+
 				Sentry.captureException( error );
 				updatePushState( selectedSite.id, remoteSiteId, {
 					status: pushStatesProgressInfo.failed,
@@ -401,14 +412,25 @@ export function useSyncPush( {
 	] );
 
 	useIpcListener(
-		'sync-upload-paused',
+		'sync-upload-network-paused',
 		( _event, payload: { selectedSiteId: string; remoteSiteId: number; error: string } ) => {
 			updatePushState( payload.selectedSiteId, payload.remoteSiteId, {
 				status: pushStatesProgressInfo.uploadingPaused,
 			} );
 		}
 	);
 
+	useIpcListener(
+		'sync-upload-manually-paused',
+		( _event, payload: { selectedSiteId: string; remoteSiteId: number } ) => {
+			const currentState = getPushState( payload.selectedSiteId, payload.remoteSiteId );
+			updatePushState( payload.selectedSiteId, payload.remoteSiteId, {
+				status: pushStatesProgressInfo.uploadingManuallyPaused,
+				uploadProgress: currentState?.uploadProgress,
+			} );
+		}
+	);
+
 	useIpcListener(
 		'sync-upload-resumed',
 		( _event, payload: { selectedSiteId: string; remoteSiteId: number } ) => {
@@ -477,6 +499,14 @@ export function useSyncPush( {
 		[ __, pushStatesProgressInfo.cancelled, updatePushState ]
 	);
 
+	const pauseUpload = useCallback< PauseUpload >( async ( selectedSiteId, remoteSiteId ) => {
+		return getIpcApi().pauseSyncUpload( selectedSiteId, remoteSiteId );
+	}, [] );
+
+	const resumeUpload = useCallback< ResumeUpload >( async ( selectedSiteId, remoteSiteId ) => {
+		return getIpcApi().resumeSyncUpload( selectedSiteId, remoteSiteId );
+	}, [] );
+
 	return {
 		pushStates,
 		getPushState,
@@ -485,5 +515,7 @@ export function useSyncPush( {
 		isSiteIdPushing,
 		clearPushState,
 		cancelPush,
+		pauseUpload,
+		resumeUpload,
 	};
 }

src/hooks/tests/use-add-site.test.tsx

@@ -101,6 +101,8 @@ describe( 'useAddSite', () => {
 			getPushState: jest.fn(),
 			getLastSyncTimeText: jest.fn(),
 			cancelPush: jest.fn(),
+			pauseUpload: jest.fn(),
+			resumeUpload: jest.fn(),
 		} as SyncSitesContextType );
 
 		mockSetSelectedTab.mockReset();

src/hooks/use-sync-states-progress-info.ts

@@ -18,7 +18,8 @@ export type PushStateProgressInfo = {
 		| 'finished'
 		| 'failed'
 		| 'cancelled'
-		| 'uploadingPaused';
+		| 'uploadingPaused'
+		| 'uploadingManuallyPaused';
 	progress: number;
 	message: string;
 };
@@ -87,6 +88,10 @@ function isKeyUploadingPaused( key: PushStateProgressInfo[ 'key' ] | undefined )
 	return key === 'uploadingPaused';
 }
 
+function isKeyUploadingManuallyPaused( key: PushStateProgressInfo[ 'key' ] | undefined ): boolean {
+	return key === 'uploadingManuallyPaused';
+}
+
 function isKeyUploading( key: PushStateProgressInfo[ 'key' ] | undefined ): boolean {
 	return key === 'uploading';
 }
@@ -186,6 +191,11 @@ export function useSyncStatesProgressInfo() {
 				progress: 45,
 				message: __( 'Uploading paused' ),
 			},
+			uploadingManuallyPaused: {
+				key: 'uploadingManuallyPaused',
+				progress: 45,
+				message: __( 'Uploading paused' ),
+			},
 			creatingRemoteBackup: {
 				key: 'creatingRemoteBackup',
 				progress: 50,
@@ -354,5 +364,6 @@ export function useSyncStatesProgressInfo() {
 		getPushUploadMessage,
 		mapUploadProgressToOverallProgress,
 		isKeyUploadingPaused,
+		isKeyUploadingManuallyPaused,
 	};
 }

src/ipc-handlers.ts

@@ -96,9 +96,11 @@ export {
 	downloadSyncBackup,
 	exportSiteForPush,
 	getConnectedWpcomSites,
+	pauseSyncUpload,
 	pushArchive,
 	removeExportedSiteTmpFile,
 	removeSyncBackup,
+	resumeSyncUpload,
 	updateConnectedWpcomSites,
 	updateSingleConnectedWpcomSite,
 } from 'src/modules/sync/lib/ipc-handlers';

src/ipc-utils.ts

@@ -33,9 +33,10 @@ export interface IpcEvents {
 	'on-site-create-progress': [ { siteId: string; message: string } ];
 	'site-context-menu-action': [ { action: string; siteId: string } ];
 	'site-event': [ SiteEvent ];
-	'sync-upload-paused': [ { error: string; selectedSiteId: string; remoteSiteId: number } ];
+	'sync-upload-network-paused': [ { error: string; selectedSiteId: string; remoteSiteId: number } ];
 	'sync-upload-resumed': [ { selectedSiteId: string; remoteSiteId: number } ];
 	'sync-upload-progress': [ { selectedSiteId: string; remoteSiteId: number; progress: number } ];
+	'sync-upload-manually-paused': [ { selectedSiteId: string; remoteSiteId: number } ];
 	'snapshot-error': [ { operationId: crypto.UUID; data: SnapshotEventData } ];
 	'snapshot-fatal-error': [ { operationId: crypto.UUID; data: { message: string } } ];
 	'snapshot-output': [ { operationId: crypto.UUID; data: SnapshotEventData } ];

src/lib/active-sync-operations.ts

@@ -33,7 +33,11 @@ export function canCancelPull( key: PullStateProgressInfo[ 'key' ] | undefined )
  * Check if a push operation can be cancelled based on its current state.
  */
 export function canCancelPush( key: PushStateProgressInfo[ 'key' ] | undefined ): boolean {
-	const cancellableStateKeys: PushStateProgressInfo[ 'key' ][] = [ 'creatingBackup' ];
+	const cancellableStateKeys: PushStateProgressInfo[ 'key' ][] = [
+		'creatingBackup',
+		'uploading',
+		'uploadingManuallyPaused',
+	];
 	if ( ! key ) {
 		return false;
 	}
@@ -44,7 +48,11 @@ export function canCancelPush( key: PushStateProgressInfo[ 'key' ] | undefined )
  * Check if a push operation has finished uploading the backup file.
  */
 export function pushBackupIsUploading( key: PushStateProgressInfo[ 'key' ] | undefined ): boolean {
-	const uploadingStateKeys: PushStateProgressInfo[ 'key' ][] = [ 'creatingBackup', 'uploading' ];
+	const uploadingStateKeys: PushStateProgressInfo[ 'key' ][] = [
+		'creatingBackup',
+		'uploading',
+		'uploadingManuallyPaused',
+	];
 	if ( ! key ) {
 		return false;
 	}

src/modules/add-site/tests/add-site.test.tsx

@@ -138,6 +138,8 @@ beforeEach( () => {
 		getPushState: jest.fn(),
 		getLastSyncTimeText: jest.fn(),
 		cancelPush: jest.fn(),
+		pauseUpload: jest.fn(),
+		resumeUpload: jest.fn(),
 	} as SyncSitesContextType );
 	mockSetSelectedTab.mockReset();