Add details to restore progress screen

client/my-sites/backup/rewind-flow/progress-bar.tsx

@@ -11,15 +11,30 @@ import { ProgressBar } from '@automattic/components';
 
 interface Props {
 	percent: number | null;
+	message?: string;
+	entry?: string;
 }
 
-const RewindFlowProgressBar: FunctionComponent< Props > = ( { percent } ) => {
+const RewindFlowProgressBar: FunctionComponent< Props > = ( { percent, message, entry } ) => {
 	const translate = useTranslate();
 	const filteredPercent = percent !== null ? percent : 0;
 	return (
 		<div className="rewind-flow__progress-bar">
-			<p>{ translate( '%(filteredPercent)d%% complete', { args: { filteredPercent } } ) }</p>
+			<div className="rewind-flow__progress-bar-header">
+				<p className="rewind-flow__progress-bar-message">{ message }</p>
+				<p className="rewind-flow__progress-bar-percent">
+					{ translate( '%(filteredPercent)d%% complete', { args: { filteredPercent } } ) }
+				</p>
+			</div>
 			<ProgressBar value={ filteredPercent } total={ 100 } />
+			{ entry && (
+				<p className="rewind-flow__progress-bar-entry">
+					{ translate( 'Currently restoring: %s', {
+						args: entry,
+						comment: '%s entry is the file, table, etc. being restored',
+					} ) }
+				</p>
+			) }
 		</div>
 	);
 };

client/my-sites/backup/rewind-flow/restore.tsx

@@ -20,24 +20,22 @@ import Gridicon from 'calypso/components/gridicon';
 import Loading from './loading';
 import ProgressBar from './progress-bar';
 import QueryRewindState from 'calypso/components/data/query-rewind-state';
+import QueryRewindRestoreStatus from 'calypso/components/data/query-rewind-restore-status';
 import RewindConfigEditor from './rewind-config-editor';
 import RewindFlowNotice, { RewindFlowNoticeLevel } from './rewind-flow-notice';
 
+/**
+ * Type dependencies
+ */
+import { RewindState } from 'calypso/state/data-layer/wpcom/sites/rewind/type';
+
 interface Props {
 	backupDisplayDate: string;
 	rewindId: string;
 	siteId: number;
 	siteUrl: string;
 }
 
-//todo: move to dedicated types file
-interface RewindState {
-	state: string;
-	rewind?: {
-		status: 'queued' | 'running' | 'finished' | 'fail';
-	};
-}
-
 const BackupRestoreFlow: FunctionComponent< Props > = ( {
 	backupDisplayDate,
 	rewindId,
@@ -53,7 +51,11 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( {
 	const rewindState = useSelector( ( state ) => getRewindState( state, siteId ) ) as RewindState;
 
 	const loading = rewindState.state === 'uninitialized';
+	const restoreId = rewindState.rewind?.restoreId;
 
+	// TODO: use selectors
+	const currentEntry = 'wp_options'; // useSelector( ( state ) => ( restoreId ? ... : undefined ) );
+	const message = 'Importing database'; // useSelector( ( state ) => ( restoreId ? ... : undefined ) );
 	const inProgressRewindStatus = useSelector( ( state ) =>
 		getInProgressRewindStatus( state, siteId, rewindId )
 	);
@@ -65,11 +67,10 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( {
 		() => dispatch( rewindRestore( siteId, rewindId, rewindConfig ) ),
 		[ dispatch, rewindConfig, rewindId, siteId ]
 	);
-
-	const onConfirm = () => {
+	const onConfirm = useCallback( () => {
 		setUserHasRequestedRestore( true );
 		requestRestore();
-	};
+	}, [ setUserHasRequestedRestore, requestRestore ] );
 
 	const renderConfirm = () => (
 		<>
@@ -114,7 +115,11 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( {
 				<Gridicon icon="history" size={ 48 } />
 			</div>
 			<h3 className="rewind-flow__title">{ translate( 'Currently restoring your site' ) }</h3>
-			<ProgressBar percent={ inProgressRewindPercentComplete } />
+			<ProgressBar
+				message={ message }
+				entry={ currentEntry }
+				percent={ inProgressRewindPercentComplete }
+			/>
 			<p className="rewind-flow__info">
 				{ translate(
 					'We are restoring your site back to {{strong}}%(backupDisplayDate)s{{/strong}}.',
@@ -206,6 +211,7 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( {
 	return (
 		<>
 			<QueryRewindState siteId={ siteId } />
+			{ restoreId && <QueryRewindRestoreStatus siteId={ siteId } restoreId={ restoreId } /> }
 			{ render() }
 		</>
 	);

client/my-sites/backup/rewind-flow/style.scss

@@ -139,12 +139,29 @@ a.rewind-flow-notice__title-warning:visited {
 	margin-bottom: 22.5px;
 
 	p {
-		color: var( --color-neutral-light );
-		font-size: $font-body-extra-small;
+		font-size: $font-body-small;
 		margin: 0;
 	}
 }
 
+.rewind-flow__progress-bar-header {
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+}
+
+.rewind-flow__progress-bar-percent {
+	color: var( --studio-gray-50 );
+}
+
+.rewind-flow__progress-bar-message {
+	font-weight: 700;
+}
+
+.rewind-flow__progress-bar-entry {
+	color: var( --studio-gray-50 );
+}
+
 .rewind-flow__info {
 	font-size: $font-body;
 }

client/state/data-layer/wpcom/sites/rewind/type.ts

@@ -0,0 +1,7 @@
+export interface RewindState {
+	state: string;
+	rewind?: {
+		status: 'queued' | 'running' | 'finished' | 'fail';
+		restoreId?: number;
+	};
+}