Studio: Show sync selection size (e.g. 1.2 GB / 2 GB) in site push dialog (#2125)

* Add basic implementation

* Account for footer sizing

* Add custom progress bar

* Minor styling

* Final adjustments for the style

* Component refactor

* Ensure we use color variables

* Rename bytes

* Add total limit on the right

* Make the file size calculation recursive

* Add special condition for mu-plugins

* For mu-plugins calculate it only for selected nodes because we have sqlite mu-plugin in the file-system

* Reuse SYNC_PUSH_SIZE_LIMIT_BYTES constant

* Fix tests by making wpContentIndeterminate more real

---------

Co-authored-by: Kateryna Kodonenko <[email protected]>
Co-authored-by: Antonio Sejas <[email protected]>

Author: 3 people

src/components/progress-bar.tsx

@@ -60,3 +60,83 @@ export function ProgressBarWithAutoIncrement( {
 
 	return <ProgressBar value={ animatedValue } maxValue={ maxValue } />;
 }
+
+type TwoColorProgressBarProps = {
+	value: number;
+	maxValue: number;
+	normalColorClass?: string;
+	overLimitColorClass?: string;
+	trackColorClass?: string;
+	showLabels?: boolean;
+	valueLabel?: string;
+	limitLabel?: string;
+	overLimitLabel?: string;
+};
+
+export function TwoColorProgressBar( {
+	value,
+	maxValue,
+	normalColorClass = 'bg-a8c-blue-50',
+	overLimitColorClass = 'bg-a8c-red-50',
+	trackColorClass = 'bg-a8c-gray-5',
+	showLabels = false,
+	valueLabel,
+	limitLabel,
+	overLimitLabel,
+}: TwoColorProgressBarProps ) {
+	const isOverLimit = value > maxValue;
+	const percentage = Math.min( ( value / maxValue ) * 100, 100 );
+
+	return (
+		<div>
+			{ showLabels && ( valueLabel || limitLabel || overLimitLabel ) && (
+				<div className="flex justify-between items-center text-xs mb-2">
+					<div className="text-a8c-gray-90 font-medium uppercase">{ valueLabel }</div>
+					<div>
+						{ isOverLimit && overLimitLabel ? (
+							<span className="text-a8c-gray-700 text-xs">{ overLimitLabel }</span>
+						) : (
+							limitLabel && <span className="text-a8c-gray-700 text-xs">{ limitLabel }</span>
+						) }
+					</div>
+				</div>
+			) }
+			<div
+				className={ cx(
+					'relative w-full h-[1.5px] rounded-full overflow-hidden',
+					trackColorClass
+				) }
+			>
+				{ isOverLimit ? (
+					<>
+						<div
+							className={ cx(
+								'absolute left-0 top-0 h-full transition-all duration-300',
+								normalColorClass
+							) }
+							style={ { width: `${ ( maxValue / value ) * 100 }%` } }
+						/>
+						<div
+							className={ cx(
+								'absolute top-0 h-full transition-all duration-300',
+								overLimitColorClass
+							) }
+							style={ {
+								left: `${ ( maxValue / value ) * 100 }%`,
+								width: `${ ( ( value - maxValue ) / value ) * 100 }%`,
+							} }
+						/>
+					</>
+				) : (
+					<div
+						className={ cx(
+							'absolute left-0 top-0 h-full rounded-full transition-all duration-300',
+							normalColorClass
+						) }
+						style={ { width: `${ percentage }%` } }
+					/>
+				) }
+			</div>
+		</div>
+	);
+}

src/modules/sync/components/sync-dialog.tsx

@@ -8,6 +8,7 @@ import { ArrowIcon } from 'src/components/arrow-icon';
 import Button from 'src/components/button';
 import { RightArrowIcon } from 'src/components/icons/right-arrow';
 import Modal from 'src/components/modal';
+import { TwoColorProgressBar } from 'src/components/progress-bar';
 import { Tooltip } from 'src/components/tooltip';
 import { TreeView, TreeNode, updateNodeById } from 'src/components/tree-view';
 import { SYNC_PUSH_SIZE_LIMIT_GB } from 'src/constants';
@@ -140,11 +141,15 @@ export function SyncDialog( {
 	const [ showAllFiles, setShowAllFiles ] = useState( false );
 	const [ treeState, setTreeState ] = useState< TreeNode[] >( defaultTree );
 	const isSubmitDisabled = treeState.every( ( node ) => ! node.checked && ! node.indeterminate );
-	const { isPushSelectionOverLimit, isLoading: isSizeCheckLoading } = useSelectedItemsPushSize(
-		localSite.id,
-		treeState,
-		type
-	);
+	const {
+		isPushSelectionOverLimit,
+		isLoading: isSizeCheckLoading,
+		totalSize,
+		limitBytes,
+		formattedSize,
+		formattedLimit,
+		formattedOverAmount,
+	} = useSelectedItemsPushSize( localSite.id, treeState, type );
 
 	const { fetchChildren, rewindId, isLoadingRewindId, isErrorRewindId, isLoadingLocalFileTree } =
 		useDynamicTreeState( type, localSite.id, remoteSite.id, setTreeState );
@@ -218,13 +223,23 @@ export function SyncDialog( {
 		onRequestClose();
 	};
 
+	const getBottomPadding = () => {
+		if ( type === 'pull' ) {
+			return 'pb-[70px]'; // Original padding for pull
+		}
+		if ( isPushSelectionOverLimit ) {
+			return 'pb-[200px]'; // Progress bar + warning notice
+		}
+		return 'pb-[110px]'; // Just progress bar
+	};
+
 	return (
 		<Modal
 			className="w-3/5 min-w-[550px] max-h-[84vh] [&>div]:!p-0"
 			onRequestClose={ onRequestClose }
 			title={ syncTexts.title }
 		>
-			<div className={ isPushSelectionOverLimit ? 'pb-[140px]' : 'pb-[70px]' }>
+			<div className={ getBottomPadding() }>
 				<div className="px-8 pb-6 pt-1">{ syncTexts.description }</div>
 				<div className="px-8">
 					<span className="sr-only">
@@ -321,7 +336,19 @@ export function SyncDialog( {
 					</div>
 				</Tooltip>
 
-				<div className="px-8 py-4 absolute left-0 right-0 bottom-0 bg-white z-10">
+				<div className="px-8 py-4 absolute left-0 right-0 bottom-0 bg-white z-10 border-t border-a8c-gray-5">
+					{ type === 'push' && (
+						<div className="mb-4">
+							<TwoColorProgressBar
+								value={ totalSize }
+								maxValue={ limitBytes }
+								showLabels
+								valueLabel={ formattedSize }
+								limitLabel={ formattedLimit }
+								overLimitLabel={ sprintf( __( '%s over' ), formattedOverAmount ) }
+							/>
+						</div>
+					) }
 					{ type === 'push' && isPushSelectionOverLimit && (
 						<Notice status="warning" isDismissible={ false } className="mb-4">
 							<p data-testid="push-selection-over-limit-notice">

src/modules/sync/hooks/use-selected-items-push-size.ts

@@ -3,17 +3,27 @@ import { TreeNode } from 'src/components/tree-view';
 import { SYNC_PUSH_SIZE_LIMIT_BYTES } from 'src/constants';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 
+const formatFileSize = ( bytes: number ) => {
+	if ( bytes === 0 ) return '0 B';
+	const k = 1024;
+	const sizes = [ 'B', 'KB', 'MB', 'GB' ];
+	const i = Math.floor( Math.log( bytes ) / Math.log( k ) );
+	return Math.round( ( bytes / Math.pow( k, i ) ) * 100 ) / 100 + ' ' + sizes[ i ];
+};
+
 export function useSelectedItemsPushSize(
 	siteId: string,
 	treeState: TreeNode[],
 	type: 'push' | 'pull'
 ) {
 	const [ isPushSelectionOverLimit, setIsPushSelectionOverLimit ] = useState( false );
 	const [ isLoading, setIsLoading ] = useState( false );
+	const [ totalSize, setTotalSize ] = useState( 0 );
 
 	const checkSelectedItemsSize = useCallback( async () => {
 		if ( ! siteId || ! treeState.length || type !== 'push' ) {
 			setIsPushSelectionOverLimit( false );
+			setTotalSize( 0 );
 			return;
 		}
 
@@ -24,6 +34,7 @@ export function useSelectedItemsPushSize(
 
 			if ( isEverythingSelected ) {
 				const size = await getIpcApi().getDirectorySize( siteId, [ 'wp-content' ] );
+				setTotalSize( size );
 				setIsPushSelectionOverLimit( size > SYNC_PUSH_SIZE_LIMIT_BYTES );
 				return;
 			}
@@ -40,52 +51,47 @@ export function useSelectedItemsPushSize(
 				( node ) => node.id === 'wp-content'
 			);
 
-			if ( wpContentNode?.checked ) {
-				sizePromises.push( getIpcApi().getDirectorySize( siteId, [ 'wp-content' ] ) );
-			} else if ( wpContentNode?.children ) {
-				for ( const child of wpContentNode.children ) {
-					if ( child.checked ) {
-						if ( child.type === 'file' ) {
-							sizePromises.push( getIpcApi().getFileSize( siteId, [ 'wp-content', child.name ] ) );
+			const processNodeRecursively = ( node: TreeNode, pathPrefix: string[] ): void => {
+				if ( node.checked ) {
+					// If the node is fully checked, get its entire size
+					if ( node.type === 'file' ) {
+						sizePromises.push( getIpcApi().getFileSize( siteId, [ ...pathPrefix, node.name ] ) );
+					} else {
+						if ( node.name === 'mu-plugins' && node.children ) {
+							for ( const child of node.children ) {
+								processNodeRecursively( child, [ ...pathPrefix, node.name ] );
+							}
 						} else {
 							sizePromises.push(
-								getIpcApi().getDirectorySize( siteId, [ 'wp-content', child.name ] )
+								getIpcApi().getDirectorySize( siteId, [ ...pathPrefix, node.name ] )
 							);
 						}
-					} else if ( child.indeterminate && child.children ) {
-						for ( const subChild of child.children ) {
-							if ( subChild.checked || subChild.indeterminate ) {
-								let sizePromise: Promise< number >;
-								if ( subChild.type === 'file' ) {
-									sizePromise = getIpcApi().getFileSize( siteId, [
-										'wp-content',
-										child.name,
-										subChild.name,
-									] );
-								} else {
-									sizePromise = getIpcApi().getDirectorySize( siteId, [
-										'wp-content',
-										child.name,
-										subChild.name,
-									] );
-								}
-								sizePromises.push( sizePromise );
-							}
-						}
+					}
+				} else if ( node.indeterminate && node.children ) {
+					// If the node is indeterminate, process its children recursively
+					for ( const child of node.children ) {
+						processNodeRecursively( child, [ ...pathPrefix, node.name ] );
 					}
 				}
+			};
+
+			if ( wpContentNode ) {
+				processNodeRecursively( wpContentNode, [] );
 			}
 
 			if ( sizePromises.length > 0 ) {
 				const sizes = await Promise.all( sizePromises );
-				const totalSize = sizes.reduce( ( sum, size ) => sum + size, 0 );
-				setIsPushSelectionOverLimit( totalSize > SYNC_PUSH_SIZE_LIMIT_BYTES );
+				const calculatedSize = sizes.reduce( ( sum, size ) => sum + size, 0 );
+				setTotalSize( calculatedSize );
+				setIsPushSelectionOverLimit( calculatedSize > SYNC_PUSH_SIZE_LIMIT_BYTES );
 			} else {
+				setTotalSize( 0 );
 				setIsPushSelectionOverLimit( false );
 			}
 		} catch ( error ) {
 			console.error( 'Error checking selected items size:', error );
 			setIsPushSelectionOverLimit( false );
+			setTotalSize( 0 );
 		} finally {
 			setIsLoading( false );
 		}
@@ -96,5 +102,16 @@ export function useSelectedItemsPushSize(
 		void checkSelectedItemsSize();
 	}, [ checkSelectedItemsSize ] );
 
-	return { isPushSelectionOverLimit, isLoading };
+	const limitBytes = SYNC_PUSH_SIZE_LIMIT_BYTES;
+	const overAmount = totalSize > limitBytes ? totalSize - limitBytes : 0;
+
+	return {
+		isPushSelectionOverLimit,
+		isLoading,
+		totalSize,
+		limitBytes,
+		formattedSize: formatFileSize( totalSize ),
+		formattedLimit: formatFileSize( limitBytes ),
+		formattedOverAmount: formatFileSize( overAmount ),
+	};
 }

src/modules/sync/tests/use-selected-items-push-size.test.ts

@@ -22,6 +22,11 @@ const createMockTreeState = (
 		allSelected = false,
 	} = options;
 
+	const wpContentIndeterminate =
+		! filesAndFoldersSelected &&
+		! allSelected &&
+		( options.pluginsSelected || options.themesSelected || options.uploadsSelected );
+
 	return [
 		{
 			id: 'filesAndFolders',
@@ -37,7 +42,7 @@ const createMockTreeState = (
 					name: 'wp-content',
 					label: 'wp-content',
 					checked: allSelected || filesAndFoldersSelected,
-					indeterminate: false,
+					indeterminate: wpContentIndeterminate,
 					type: 'folder',
 					children: [
 						{
@@ -151,7 +156,10 @@ describe( 'useSelectedItemsPushSize Hook Tests', () => {
 				getDirectorySize: mockGetDirectorySize,
 			} );
 
-			const treeState = createMockTreeState( { pluginsSelected: true, themesSelected: true } );
+			const treeState = createMockTreeState( {
+				pluginsSelected: true,
+				themesSelected: true,
+			} );
 
 			const { result } = renderHook( () =>
 				useSelectedItemsPushSize( mockSiteId, treeState, 'push' )