[WIP]: Add the rewind FileBrowser to the Sync Modal

client/dashboard/sites/staging-site-sync-dropdown/index.tsx

@@ -2,15 +2,25 @@ import { Button, Dropdown, MenuGroup, MenuItem } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { chevronDown, cloudDownload, cloudUpload } from '@wordpress/icons';
+import QueryRewindState from '../../../components/data/query-rewind-state';
+import { useFirstMatchingBackupAttempt } from '../../../my-sites/backup/hooks';
 import SyncModal from '../staging-site-sync-modal';
 
 interface SyncDropdownProps {
 	className?: string;
 	environment: 'production' | 'staging';
 	siteSlug: string;
+	productionSiteId: number;
+	stagingSiteId: number;
 }
 
-export default function SyncDropdown( { className, environment, siteSlug }: SyncDropdownProps ) {
+export default function SyncDropdown( {
+	className,
+	environment,
+	siteSlug,
+	productionSiteId,
+	stagingSiteId,
+}: SyncDropdownProps ) {
 	const [ isModalOpen, setIsModalOpen ] = useState< boolean >( false );
 	const [ syncType, setSyncType ] = useState< 'pull' | 'push' >( 'pull' );
 
@@ -19,6 +29,18 @@ export default function SyncDropdown( { className, environment, siteSlug }: Sync
 	const pushLabel =
 		environment === 'staging' ? __( 'Push to Production' ) : __( 'Push to Staging' );
 
+	const querySiteId =
+		( environment === 'staging' && syncType === 'push' ) ||
+		( environment === 'production' && syncType === 'pull' )
+			? stagingSiteId
+			: productionSiteId;
+
+	const { backupAttempt: lastKnownBackupAttempt } = useFirstMatchingBackupAttempt( querySiteId, {
+		sortOrder: 'desc',
+		successOnly: true,
+	} );
+	const rewindId = lastKnownBackupAttempt?.rewindId;
+
 	const handleOpenModal = ( type: 'pull' | 'push' ) => {
 		setSyncType( type );
 		setIsModalOpen( true );
@@ -71,13 +93,20 @@ export default function SyncDropdown( { className, environment, siteSlug }: Sync
 					</div>
 				) }
 			/>
-			{ isModalOpen && (
-				<SyncModal
-					onClose={ handleCloseModal }
-					syncType={ syncType }
-					environment={ environment }
-					siteSlug={ siteSlug }
-				/>
+			{ isModalOpen && querySiteId > 0 && (
+				<>
+					<QueryRewindState siteId={ querySiteId } />
+					<SyncModal
+						onClose={ handleCloseModal }
+						syncType={ syncType }
+						environment={ environment }
+						siteSlug={ siteSlug }
+						productionSiteId={ productionSiteId }
+						stagingSiteId={ stagingSiteId }
+						querySiteId={ querySiteId }
+						rewindId={ rewindId }
+					/>
+				</>
 			) }
 		</>
 	);

client/dashboard/sites/staging-site-sync-modal/index.tsx

@@ -8,13 +8,25 @@ import {
 } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelector } from 'react-redux';
+import FileBrowser from '../../../my-sites/backup/backup-contents-page/file-browser';
+import { usePullFromStagingMutation } from '../../../sites/staging-site/hooks/use-staging-sync';
+import { recordTracksEvent } from '../../../state/analytics/actions';
+import getBackupBrowserCheckList from '../../../state/rewind/selectors/get-backup-browser-check-list';
 import InlineSupportLink from '../../components/inline-support-link';
 
+// TODO: Temporary style for the PoC
+import './style.scss';
+
 interface SyncModalProps {
 	onClose: () => void;
 	syncType: 'pull' | 'push';
 	environment: 'production' | 'staging';
 	siteSlug: string;
+	productionSiteId: number;
+	stagingSiteId: number;
+	querySiteId: number;
+	rewindId: number;
 }
 
 const getCopy = ( type: 'pull' | 'push' ) => {
@@ -61,12 +73,52 @@ const getCopy = ( type: 'pull' | 'push' ) => {
 	};
 };
 
-export default function SyncModal( { onClose, syncType, environment, siteSlug }: SyncModalProps ) {
+export default function SyncModal( {
+	onClose,
+	syncType,
+	environment,
+	siteSlug,
+	productionSiteId,
+	stagingSiteId,
+	querySiteId,
+	rewindId,
+}: SyncModalProps ) {
 	const copy = getCopy( syncType );
 	const modalTitle = copy[ environment ].title;
+	const dispatch = useDispatch();
+	// const [ syncError, setSyncError ] = useState< string | null >( null );
 
 	// TODO: Once we use the component in the Dashbaord V2, let's get siteSlug from Router instead of the passed prop
 	//const { siteSlug } = siteRoute.useParams();
+	const browserCheckList = useSelector( ( state ) =>
+		getBackupBrowserCheckList( state, querySiteId )
+	);
+
+	const { pullFromStaging } = usePullFromStagingMutation( productionSiteId, stagingSiteId, {
+		onSuccess: () => {
+			dispatch( recordTracksEvent( 'calypso_hosting_configuration_staging_site_pull_success' ) );
+			// setSyncError( null );
+		},
+		onError: ( error ) => {
+			dispatch(
+				recordTracksEvent( 'calypso_hosting_configuration_staging_site_pull_failure', {
+					code: error.code,
+				} )
+			);
+			// setSyncError( error.code );
+		},
+	} );
+
+	const handleConfirm = () => {
+		if (
+			( syncType === 'pull' && environment === 'production' ) ||
+			( syncType === 'push' && environment === 'staging' )
+		) {
+			const include_paths = browserCheckList.includeList.map( ( item ) => item.id ).join( ',' );
+			pullFromStaging( { types: 'paths', include_paths } );
+			onClose();
+		}
+	};
 
 	return (
 		<Modal title={ modalTitle } onRequestClose={ onClose } style={ { maxWidth: '668px' } }>
@@ -83,12 +135,21 @@ export default function SyncModal( { onClose, syncType, environment, siteSlug }:
 							a: <InlineSupportLink onClick={ onClose } supportContext="hosting-staging-site" />,
 						} ) }
 					</Text>
+					{ querySiteId === stagingSiteId ? (
+						<div className="staging-site-card">
+							<FileBrowser rewindId={ rewindId } />
+						</div>
+					) : (
+						'Only implemented for staging sites'
+					) }
 				</VStack>
 				<HStack spacing={ 4 } justify="flex-end" expanded={ false }>
 					<Button variant="tertiary" onClick={ onClose }>
 						{ __( 'Cancel' ) }
 					</Button>
-					<Button variant="primary">{ copy.submit }</Button>
+					<Button variant="primary" onClick={ handleConfirm }>
+						{ copy.submit }
+					</Button>
 				</HStack>
 			</VStack>
 		</Modal>