diff --git a/client/my-sites/backup/rewind-flow/progress-bar.tsx b/client/my-sites/backup/rewind-flow/progress-bar.tsx index 23a23eb3a925e..00245a6d9edb2 100644 --- a/client/my-sites/backup/rewind-flow/progress-bar.tsx +++ b/client/my-sites/backup/rewind-flow/progress-bar.tsx @@ -10,16 +10,40 @@ import React, { FunctionComponent } from 'react'; import { ProgressBar } from '@automattic/components'; interface Props { + isReady: boolean; percent: number | null; + message?: string; + entry?: string; } -const RewindFlowProgressBar: FunctionComponent< Props > = ( { percent } ) => { +const RewindFlowProgressBar: FunctionComponent< Props > = ( { + isReady, + percent, + message, + entry, +} ) => { const translate = useTranslate(); const filteredPercent = percent !== null ? percent : 0; + return (
{ translate( '%(filteredPercent)d%% complete', { args: { filteredPercent } } ) }
++ { isReady ? message : translate( 'Initializing the restore process' ) } +
++ { translate( '%(filteredPercent)d%% complete', { args: { filteredPercent } } ) } +
++ { isReady && + entry && + translate( 'Currently restoring: %s', { + args: entry, + comment: '%s entry is the file, table, etc. being restored', + } ) } +
{ translate( 'We are restoring your site back to {{strong}}%(backupDisplayDate)s{{/strong}}.', diff --git a/client/my-sites/backup/rewind-flow/style.scss b/client/my-sites/backup/rewind-flow/style.scss index 58e3ed48df37d..0030d26f11aba 100644 --- a/client/my-sites/backup/rewind-flow/style.scss +++ b/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; } diff --git a/client/state/data-layer/wpcom/sites/rewind/api-transformer.js b/client/state/data-layer/wpcom/sites/rewind/api-transformer.js index 2ad401ddd7fa8..302de15402b41 100644 --- a/client/state/data-layer/wpcom/sites/rewind/api-transformer.js +++ b/client/state/data-layer/wpcom/sites/rewind/api-transformer.js @@ -50,6 +50,8 @@ const transformRewind = ( data ) => startedAt: new Date( data.started_at ), status: data.status, }, + data.message && { message: data.message }, + data.current_entry && { currentEntry: data.current_entry }, data.progress && { progress: data.progress }, data.reason && { reason: data.reason }, data.links && data.links.dismiss && { dismiss: makeRewindDismisser( data.links.dismiss ) } diff --git a/client/state/data-layer/wpcom/sites/rewind/schema.js b/client/state/data-layer/wpcom/sites/rewind/schema.js index 37f81fbdd983e..73c4800987d79 100644 --- a/client/state/data-layer/wpcom/sites/rewind/schema.js +++ b/client/state/data-layer/wpcom/sites/rewind/schema.js @@ -49,6 +49,13 @@ export const rewind = { started_at: { type: 'string' }, progress: { type: 'integer' }, reason: { type: 'string' }, + /** + * Commenting these out temporarily because API is returning a null value for current_entry, + * triggering a schema validation error. Once this is corrected on the backend (soon), we + * will activate these properties again. + **/ + // message: { type: 'string' }, + // current_entry: { type: 'string' }, }, required: [ 'restore_id', 'rewind_id', 'status' ], }; diff --git a/client/state/data-layer/wpcom/sites/rewind/type.ts b/client/state/data-layer/wpcom/sites/rewind/type.ts new file mode 100644 index 0000000000000..c1e03b68b5d3f --- /dev/null +++ b/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; + }; +} diff --git a/client/state/selectors/get-in-progress-rewind-entry-details.js b/client/state/selectors/get-in-progress-rewind-entry-details.js new file mode 100644 index 0000000000000..af75ce4b1bf63 --- /dev/null +++ b/client/state/selectors/get-in-progress-rewind-entry-details.js @@ -0,0 +1,33 @@ +/** + * External dependencies + */ +import { pick } from 'lodash'; + +/** + * Internal dependencies + */ +import getRewindState from './get-rewind-state'; + +/** + * @typedef {Object} EntryDetails + * @property {string} message - The description of current action taking place + * @property {string} currentEntry - The value (filename/tablename) being processed + */ + +/** + * Returns object containing rewind status current entry and message + * + * @param {object} globalState Global state tree + * @param {?number|string} siteId the site ID + * @param {string} rewindId the id of the rewind to get the rewind status entry and message + * @returns {EntryDetails} Details of the current rewind action + */ +export default function getInProgressRewindEntryDetails( globalState, siteId, rewindId ) { + const { state, rewind } = getRewindState( globalState, siteId ); + + if ( 'active' === state && rewind?.rewindId === rewindId ) { + return pick( rewind, [ 'message', 'currentEntry' ] ); + } + + return {}; +}