Studio Sync: Implement resumable uploads for studio sync using Node process

package.json

@@ -153,6 +153,7 @@
 		"strip-ansi": "^7.1.2",
 		"tar": "^7.5.2",
 		"ts-node": "^10.9.2",
+		"tus-js-client": "^4.3.1",
 		"unzipper": "^0.12.3",
 		"winreg": "^1.2.5",
 		"wpcom": "^7.1.1",

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

@@ -11,6 +11,7 @@ import {
 	usePullPushStates,
 } from 'src/hooks/sync-sites/use-pull-push-states';
 import { useAuth } from 'src/hooks/use-auth';
+import { useIpcListener } from 'src/hooks/use-ipc-listener';
 import {
 	useSyncStatesProgressInfo,
 	PushStateProgressInfo,
@@ -308,6 +309,7 @@ export function useSyncPush( {
 
 			try {
 				const response = await getIpcApi().pushArchive(
+					selectedSite.id,
 					remoteSiteId,
 					archivePath,
 					options?.optionsToSync,
@@ -378,6 +380,24 @@ export function useSyncPush( {
 		isKeyCancelled,
 	] );
 
+	useIpcListener(
+		'sync-upload-paused',
+		( _event, payload: { selectedSiteId: string; remoteSiteId: number; error: string } ) => {
+			updatePushState( payload.selectedSiteId, payload.remoteSiteId, {
+				status: pushStatesProgressInfo.uploadingPaused,
+			} );
+		}
+	);
+
+	useIpcListener(
+		'sync-upload-resumed',
+		( _event, payload: { selectedSiteId: string; remoteSiteId: number } ) => {
+			updatePushState( payload.selectedSiteId, payload.remoteSiteId, {
+				status: pushStatesProgressInfo.uploading,
+			} );
+		}
+	);
+
 	const isAnySitePushing = useMemo< boolean >( () => {
 		return Object.values( pushStates ).some( ( state ) => isKeyPushing( state.status.key ) );
 	}, [ pushStates, isKeyPushing ] );

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

@@ -16,7 +16,8 @@ export type PushStateProgressInfo = {
 		| 'finishing'
 		| 'finished'
 		| 'failed'
-		| 'cancelled';
+		| 'cancelled'
+		| 'uploadingPaused';
 	progress: number;
 	message: string;
 };
@@ -105,6 +106,11 @@ export function useSyncStatesProgressInfo() {
 				progress: 40,
 				message: __( 'Uploading Studio site…' ),
 			},
+			uploadingPaused: {
+				key: 'uploadingPaused',
+				progress: 45,
+				message: __( 'Uploading paused' ),
+			},
 			creatingRemoteBackup: {
 				key: 'creatingRemoteBackup',
 				progress: 50,
@@ -164,6 +170,10 @@ export function useSyncStatesProgressInfo() {
 		return pushingStateKeys.includes( key );
 	};
 
+	const isKeyUploadingPaused = ( key: PushStateProgressInfo[ 'key' ] | undefined ) => {
+		return key === 'uploadingPaused';
+	};
+
 	const isKeyImporting = ( key: PushStateProgressInfo[ 'key' ] | undefined ) => {
 		const pushingStateKeys: PushStateProgressInfo[ 'key' ][] = [
 			'creatingRemoteBackup',
@@ -296,5 +306,6 @@ export function useSyncStatesProgressInfo() {
 		getBackupStatusWithProgress,
 		getPullStatusWithProgress,
 		getPushStatusWithProgress,
+		isKeyUploadingPaused,
 	};
 }

src/ipc-utils.ts

@@ -38,6 +38,8 @@ export interface IpcEvents {
 		},
 	];
 	'site-context-menu-action': [ { action: string; siteId: string } ];
+	'sync-upload-paused': [ { error: string; selectedSiteId: string; remoteSiteId: number } ];
+	'sync-upload-resumed': [ { 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/modules/sync/components/sync-connected-sites.tsx

@@ -1,7 +1,7 @@
 import { Icon } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf } from '@wordpress/i18n';
-import { cloudUpload, cloudDownload, info, close } from '@wordpress/icons';
+import { cloudUpload, cloudDownload, info, close, error } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import { useState } from 'react';
 import { ArrowIcon } from 'src/components/arrow-icon';
@@ -199,6 +199,7 @@ const SyncConnectedSitesSectionItem = ( {
 		isKeyFailed,
 		isKeyCancelled,
 		getPullStatusWithProgress,
+		isKeyUploadingPaused,
 	} = useSyncStatesProgressInfo();
 
 	const sitePullState = getPullState( selectedSite.id, connectedSite.id );
@@ -211,6 +212,7 @@ const SyncConnectedSitesSectionItem = ( {
 
 	const pushState = getPushState( selectedSite.id, connectedSite.id );
 	const isPushing = pushState && isKeyPushing( pushState.status.key );
+	const isUploadingPaused = pushState && isKeyUploadingPaused( pushState.status.key );
 	const isPushError = pushState && isKeyFailed( pushState.status.key );
 	const hasPushFinished = pushState && isKeyFinished( pushState.status.key );
 	const hasPushCancelled = pushState && isKeyCancelled( pushState.status.key );
@@ -292,6 +294,19 @@ const SyncConnectedSitesSectionItem = ( {
 							{ __( 'Pull complete' ) }
 						</ClearAction>
 					) }
+					{ pushState?.status && isUploadingPaused && (
+						<Tooltip
+							text={ __(
+								'The site uploading has been paused due to an internet connection issue. We will retry automatically in a few seconds.'
+							) }
+							placement="top-start"
+						>
+							<Button variant="link" disabled={ true }>
+								<Icon icon={ error } />
+								{ pushState.status.message }
+							</Button>
+						</Tooltip>
+					) }
 					{ pushState?.status && isPushing && (
 						<div className="flex items-center gap-2 max-w-full">
 							<Tooltip
@@ -347,6 +362,7 @@ const SyncConnectedSitesSectionItem = ( {
 						! isPullError &&
 						! isPushError &&
 						! isPushing &&
+						! isUploadingPaused &&
 						! hasPushFinished &&
 						! hasPullCancelled &&
 						! hasPushCancelled && (