From 6ed0a60b397582e8e192bee57afcd58d143cc220 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Tue, 3 Nov 2020 13:51:14 -0500 Subject: [PATCH 1/3] Move RewindState type in dedicated file --- client/my-sites/backup/rewind-flow/restore.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/client/my-sites/backup/rewind-flow/restore.tsx b/client/my-sites/backup/rewind-flow/restore.tsx index 1f0670ac21d41..1c771945ac264 100644 --- a/client/my-sites/backup/rewind-flow/restore.tsx +++ b/client/my-sites/backup/rewind-flow/restore.tsx @@ -23,6 +23,11 @@ import QueryRewindState from 'calypso/components/data/query-rewind-state'; 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; @@ -30,14 +35,6 @@ interface Props { siteUrl: string; } -//todo: move to dedicated types file -interface RewindState { - state: string; - rewind?: { - status: 'queued' | 'running' | 'finished' | 'fail'; - }; -} - const BackupRestoreFlow: FunctionComponent< Props > = ( { backupDisplayDate, rewindId, From 1487b5772acfb655bebe8a8f6cfb0f6162101da1 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Tue, 3 Nov 2020 14:04:19 -0500 Subject: [PATCH 2/3] Add useCallback hook --- client/my-sites/backup/rewind-flow/restore.tsx | 10 ++++------ client/state/data-layer/wpcom/sites/rewind/type.ts | 6 ++++++ 2 files changed, 10 insertions(+), 6 deletions(-) create mode 100644 client/state/data-layer/wpcom/sites/rewind/type.ts diff --git a/client/my-sites/backup/rewind-flow/restore.tsx b/client/my-sites/backup/rewind-flow/restore.tsx index 1c771945ac264..a3b5c7c1981e8 100644 --- a/client/my-sites/backup/rewind-flow/restore.tsx +++ b/client/my-sites/backup/rewind-flow/restore.tsx @@ -48,9 +48,6 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( { const [ userHasRequestedRestore, setUserHasRequestedRestore ] = useState< boolean >( false ); const rewindState = useSelector( ( state ) => getRewindState( state, siteId ) ) as RewindState; - - const loading = rewindState.state === 'uninitialized'; - const inProgressRewindStatus = useSelector( ( state ) => getInProgressRewindStatus( state, siteId, rewindId ) ); @@ -62,11 +59,12 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( { () => dispatch( rewindRestore( siteId, rewindId, rewindConfig ) ), [ dispatch, rewindConfig, rewindId, siteId ] ); - - const onConfirm = () => { + const onConfirm = useCallback( () => { setUserHasRequestedRestore( true ); requestRestore(); - }; + }, [ setUserHasRequestedRestore, requestRestore ] ); + + const loading = rewindState.state === 'uninitialized'; const renderConfirm = () => ( <> 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..cd4c28e401293 --- /dev/null +++ b/client/state/data-layer/wpcom/sites/rewind/type.ts @@ -0,0 +1,6 @@ +export interface RewindState { + state: string; + rewind?: { + status: 'queued' | 'running' | 'finished' | 'fail'; + }; +} From fd67653d27718ecd02edc5805d89dddba224a876 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Wed, 4 Nov 2020 10:16:06 -0500 Subject: [PATCH 3/3] Add details to restore progress - WIP --- .../backup/rewind-flow/progress-bar.tsx | 19 +++++++++++++++-- .../my-sites/backup/rewind-flow/restore.tsx | 17 ++++++++++++--- client/my-sites/backup/rewind-flow/style.scss | 21 +++++++++++++++++-- .../data-layer/wpcom/sites/rewind/type.ts | 1 + 4 files changed, 51 insertions(+), 7 deletions(-) diff --git a/client/my-sites/backup/rewind-flow/progress-bar.tsx b/client/my-sites/backup/rewind-flow/progress-bar.tsx index 23a23eb3a925e..8c9922d5b23bd 100644 --- a/client/my-sites/backup/rewind-flow/progress-bar.tsx +++ b/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 (
-

{ translate( '%(filteredPercent)d%% complete', { args: { filteredPercent } } ) }

+
+

{ message }

+

+ { translate( '%(filteredPercent)d%% complete', { args: { filteredPercent } } ) } +

+
+ { entry && ( +

+ { translate( 'Currently restoring: %s', { + args: entry, + comment: '%s entry is the file, table, etc. being restored', + } ) } +

+ ) }
); }; diff --git a/client/my-sites/backup/rewind-flow/restore.tsx b/client/my-sites/backup/rewind-flow/restore.tsx index a3b5c7c1981e8..e025c7121a908 100644 --- a/client/my-sites/backup/rewind-flow/restore.tsx +++ b/client/my-sites/backup/rewind-flow/restore.tsx @@ -20,6 +20,7 @@ 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'; @@ -48,6 +49,13 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( { const [ userHasRequestedRestore, setUserHasRequestedRestore ] = useState< boolean >( false ); 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 ) ); @@ -64,8 +72,6 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( { requestRestore(); }, [ setUserHasRequestedRestore, requestRestore ] ); - const loading = rewindState.state === 'uninitialized'; - const renderConfirm = () => ( <>
@@ -109,7 +115,11 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( {

{ translate( 'Currently restoring your site' ) }

- +

{ translate( 'We are restoring your site back to {{strong}}%(backupDisplayDate)s{{/strong}}.', @@ -201,6 +211,7 @@ const BackupRestoreFlow: FunctionComponent< Props > = ( { return ( <> + { restoreId && } { render() } ); 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/type.ts b/client/state/data-layer/wpcom/sites/rewind/type.ts index cd4c28e401293..c1e03b68b5d3f 100644 --- a/client/state/data-layer/wpcom/sites/rewind/type.ts +++ b/client/state/data-layer/wpcom/sites/rewind/type.ts @@ -2,5 +2,6 @@ export interface RewindState { state: string; rewind?: { status: 'queued' | 'running' | 'finished' | 'fail'; + restoreId?: number; }; }