Fetch restore progress details from /restore endpoint (#47212)

Co-authored-by: elliottprogrammer <bryan@elliottprogrammer.com>

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

@@ -13,21 +13,22 @@ import { defaultRewindConfig, RewindConfig } from './types';
 import { rewindRestore } from 'calypso/state/activity-log/actions';
 import CheckYourEmail from './rewind-flow-notice/check-your-email';
 import Error from './error';
-import getInProgressRewindPercentComplete from 'calypso/state/selectors/get-in-progress-rewind-percent-complete';
-import getInProgressRewindEntryDetails from 'calypso/state/selectors/get-in-progress-rewind-entry-details';
 import getInProgressRewindStatus from 'calypso/state/selectors/get-in-progress-rewind-status';
+import getRestoreProgress from 'calypso/state/selectors/get-restore-progress';
 import getRewindState from 'calypso/state/selectors/get-rewind-state';
 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';
+import type { RewindState } from 'calypso/state/data-layer/wpcom/sites/rewind/type';
+import type { RestoreProgress } from 'calypso/state/data-layer/wpcom/activity-log/rewind/restore-status/type';
 
 interface Props {
 	backupDisplayDate: string;
@@ -52,11 +53,8 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( {
 	const inProgressRewindStatus = useSelector( ( state ) =>
 		getInProgressRewindStatus( state, siteId, rewindId )
 	);
-	const inProgressRewindPercentComplete = useSelector( ( state ) =>
-		getInProgressRewindPercentComplete( state, siteId, rewindId )
-	);
-	const inProgressRewindEntryDetails = useSelector( ( state ) =>
-		getInProgressRewindEntryDetails( state, siteId, rewindId )
+	const { message, percent, currentEntry, status } = useSelector(
+		( state ) => getRestoreProgress( state, siteId ) || ( {} as RestoreProgress )
 	);
 
 	const requestRestore = useCallback(
@@ -69,7 +67,7 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( {
 	}, [ setUserHasRequestedRestore, requestRestore ] );
 
 	const loading = rewindState.state === 'uninitialized';
-	const { message, currentEntry } = inProgressRewindEntryDetails;
+	const { restoreId } = rewindState.rewind || {};
 
 	const renderConfirm = () => (
 		<>
@@ -115,10 +113,10 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( {
 			</div>
 			<h3 className="rewind-flow__title">{ translate( 'Currently restoring your site' ) }</h3>
 			<ProgressBar
-				isReady={ 'running' === inProgressRewindStatus }
+				isReady={ 'running' === status }
 				message={ message }
 				entry={ currentEntry }
-				percent={ inProgressRewindPercentComplete }
+				percent={ percent }
 			/>
 			<p className="rewind-flow__info">
 				{ translate(
@@ -211,6 +209,9 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( {
 	return (
 		<>
 			<QueryRewindState siteId={ siteId } />
+			{ restoreId && 'running' === inProgressRewindStatus && (
+				<QueryRewindRestoreStatus siteId={ siteId } restoreId={ restoreId } />
+			) }
 			{ render() }
 		</>
 	);

client/state/activity-log/restore/reducer.js

@@ -25,7 +25,18 @@ const startProgress = ( state, { timestamp } ) => ( {
 
 const updateProgress = (
 	state,
-	{ errorCode, failureReason, message, percent, restoreId, status, timestamp, rewindId, context }
+	{
+		errorCode,
+		failureReason,
+		message,
+		percent,
+		restoreId,
+		status,
+		timestamp,
+		rewindId,
+		context,
+		currentEntry,
+	}
 ) => ( {
 	errorCode,
 	failureReason,
@@ -36,6 +47,7 @@ const updateProgress = (
 	timestamp,
 	rewindId,
 	context,
+	currentEntry,
 } );
 
 export const restoreProgress = withSchemaValidation(

client/state/data-layer/wpcom/activity-log/rewind/restore-status/index.js

@@ -65,6 +65,7 @@ export const fromApi = ( {
 		status = '',
 		rewind_id = '',
 		context = '',
+		current_entry = '',
 	} = {},
 } ) => ( {
 	errorCode: error_code,
@@ -74,6 +75,7 @@ export const fromApi = ( {
 	status,
 	rewindId: rewind_id,
 	context,
+	currentEntry: current_entry,
 } );
 
 export const updateProgress = ( { siteId, restoreId, timestamp }, data ) =>

client/state/data-layer/wpcom/activity-log/rewind/restore-status/test/index.js

@@ -24,6 +24,7 @@ const FINISHED_RESPONSE = deepFreeze( {
 		status: 'finished',
 		rewindId: '',
 		context: 'main',
+		currentEntry: '',
 	},
 } );
 
@@ -38,6 +39,7 @@ describe( 'receiveRestoreProgress', () => {
 			status: 'finished',
 			rewindId: '',
 			context: 'main',
+			currentEntry: '',
 		} );
 		expect( action ).toEqual( expectedAction );
 	} );

client/state/data-layer/wpcom/activity-log/rewind/restore-status/type.ts

@@ -0,0 +1,10 @@
+export interface RestoreProgress {
+	errorCode: string;
+	failureReason: string;
+	message: string;
+	percent: number;
+	status: string;
+	rewindId: string;
+	context: string;
+	currentEntry: string;
+}

client/state/selectors/get-restore-progress.ts

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Type dependencies
+ */
+import { AppState } from 'calypso/types';
+import type { RestoreProgress } from 'calypso/state/data-layer/wpcom/activity-log/rewind/restore-status/type';
+
+/**
+ * Get the progress details of a restore for a specified site
+ *
+ * @param {AppState} state Global state tree
+ * @param {number | string} siteId the site ID
+ * @returns {RestoreProgress} Progress details
+ */
+export default function getRestoreProgress(
+	state: AppState,
+	siteId: number | string
+): RestoreProgress | undefined {
+	return state.activityLog?.restoreProgress?.[ siteId ];
+}