Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Jetpack Backup: Update copy site flow to use the getRestoreProgress selector as restore status source of truth #91145

Merged
merged 4 commits into from
May 30, 2024
Merged

Jetpack Backup: Update copy site flow to use the getRestoreProgress selector as restore status source of truth #91145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a0cf1eb
Update backup clone flow to use the getRestoreProgress status
Initsogar May 25, 2024
d477754
Update unit tests
Initsogar May 27, 2024
5befad9
Render QueryRewindRestoreStatus only on inProgress view
Initsogar May 28, 2024
2311a41
Update restoreId state only when it changes and user requests restore
Initsogar May 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 36 additions & 13 deletions client/my-sites/backup/clone-flow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button, Card, Gridicon } from '@automattic/components';
import { useTranslate } from 'i18n-calypso';
import { FunctionComponent, useCallback, useState } from 'react';
import { FunctionComponent, useCallback, useEffect, useState } from 'react';
import ActivityCardList from 'calypso/components/activity-card-list';
import AdvancedCredentials from 'calypso/components/advanced-credentials';
import DocumentHead from 'calypso/components/data/document-head';
Expand All @@ -27,7 +27,6 @@ import { getInProgressBackupForSite } from 'calypso/state/rewind/selectors';
import getBackupStagingSites from 'calypso/state/rewind/selectors/get-backup-staging-sites';
import hasFetchedStagingSitesList from 'calypso/state/rewind/selectors/has-fetched-staging-sites-list';
import isFetchingStagingSitesList from 'calypso/state/rewind/selectors/is-fetching-staging-sites-list';
import getInProgressRewindStatus from 'calypso/state/selectors/get-in-progress-rewind-status';
import getJetpackCredentials from 'calypso/state/selectors/get-jetpack-credentials';
import getPreviousRoute from 'calypso/state/selectors/get-previous-route';
import getRestoreProgress from 'calypso/state/selectors/get-restore-progress';
Expand Down Expand Up @@ -77,6 +76,7 @@ const BackupCloneFlow: FunctionComponent< Props > = ( { siteId } ) => {
const [ backupPeriod, setBackupPeriod ] = useState< string >( '' );
const [ backupDisplayDate, setBackupDisplayDate ] = useState< string >( '' );
const [ showCredentialForm, setShowCredentialForm ] = useState< boolean >( false );
const [ restoreId, setRestoreId ] = useState< number | null >( null );

const activityLogPath = '/activity-log/' + siteSlug;
const refreshBackups = useCallback(
Expand Down Expand Up @@ -107,6 +107,32 @@ const BackupCloneFlow: FunctionComponent< Props > = ( { siteId } ) => {
return getJetpackCredentials( state, siteId, cloneDestination );
} );

useEffect( () => {
// Here we are updating the restoreId any time the user requests a new restore and only if the restoreId
// has changed to avoid unnecessary re-renders.
// This is necessary because the restoreId is used to query the restore progress in the
// QueryRewindRestoreStatus component.
if ( userHasRequestedRestore ) {
if ( isCloneToStaging && stagingSiteRewindState.rewind?.restoreId ) {
const newRestoreId = stagingSiteRewindState.rewind.restoreId;
if ( restoreId !== newRestoreId ) {
setRestoreId( newRestoreId );
}
} else if ( ! isCloneToStaging && rewindState.rewind?.restoreId ) {
const newRestoreId = rewindState.rewind.restoreId;
if ( restoreId !== newRestoreId ) {
setRestoreId( newRestoreId );
}
}
}
}, [
isCloneToStaging,
rewindState,
stagingSiteRewindState,
restoreId,
userHasRequestedRestore,
] );

const getUrlFromCreds = () => {
if ( ! cloneRoleCredentials ) {
return '';
Expand All @@ -120,10 +146,12 @@ const BackupCloneFlow: FunctionComponent< Props > = ( { siteId } ) => {
return '';
};

const inProgressRewindStatus = useSelector( ( state ) => {
return getInProgressRewindStatus( state, restoreSiteId, backupPeriod );
} );
const { message, percent, currentEntry, status } = useSelector( ( state ) => {
const {
message,
percent,
currentEntry,
status: inProgressRewindStatus,
} = useSelector( ( state ) => {
return getRestoreProgress( state, restoreSiteId ) || ( {} as RestoreProgress );
} );

Expand Down Expand Up @@ -245,11 +273,6 @@ const BackupCloneFlow: FunctionComponent< Props > = ( { siteId } ) => {

const loading = rewindState.state === 'uninitialized';

const restoreId =
( isCloneToStaging
? stagingSiteRewindState.rewind?.restoreId
: rewindState.rewind?.restoreId ) || null;

const disableClone = false;

const { data: logs } = useRewindableActivityLogQuery(
Expand Down Expand Up @@ -451,7 +474,7 @@ const BackupCloneFlow: FunctionComponent< Props > = ( { siteId } ) => {
} ) }
</h3>
<ProgressBar
isReady={ 'running' === status }
isReady={ 'running' === inProgressRewindStatus }
initializationMessage={ translate( 'Initializing the copy process' ) }
message={ message }
entry={ currentEntry }
Expand Down Expand Up @@ -577,7 +600,7 @@ const BackupCloneFlow: FunctionComponent< Props > = ( { siteId } ) => {
<QueryRewindBackups siteId={ siteId } />
<QueryRewindState siteId={ siteId } />
<QueryBackupStagingSitesList siteId={ siteId } />
{ restoreId && 'running' === inProgressRewindStatus && (
{ restoreId && isInProgress && (
<QueryRewindRestoreStatus siteId={ restoreSiteId } restoreId={ restoreId } />
) }
{ render() }
Expand Down
9 changes: 4 additions & 5 deletions client/my-sites/backup/clone-flow/test/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Modal from 'react-modal';
import useRewindableActivityLogQuery from 'calypso/data/activity-log/use-rewindable-activity-log-query';
import documentHead from 'calypso/state/document-head/reducer';
import preferences from 'calypso/state/preferences/reducer';
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 ui from 'calypso/state/ui/reducer';
import { renderWithProvider } from 'calypso/test-helpers/testing-library';
Expand Down Expand Up @@ -71,8 +71,8 @@ jest.mock( 'calypso/state/rewind/selectors/get-backup-staging-sites', () =>
jest.mock( 'calypso/state/rewind/selectors/has-fetched-staging-sites-list' );
jest.mock( 'calypso/state/rewind/selectors/is-fetching-staging-sites-list' );
jest.mock( 'calypso/data/activity-log/use-rewindable-activity-log-query' );
jest.mock( 'calypso/state/selectors/get-in-progress-rewind-status' );
jest.mock( 'calypso/state/selectors/get-rewind-state' );
jest.mock( 'calypso/state/selectors/get-restore-progress' );
jest.mock( 'calypso/state/selectors/get-site-gmt-offset' );
jest.mock( 'calypso/state/selectors/get-site-timezone-value' );
jest.mock( 'calypso/state/selectors/get-jetpack-credentials-test-status' );
Expand Down Expand Up @@ -182,7 +182,6 @@ function progressThroughFlow() {
describe( 'BackupCloneFlow render', () => {
beforeEach( () => {
jest.clearAllMocks();
getInProgressRewindStatus.mockImplementation( () => undefined );
} );

test( 'Render RewindFlowLoading if state is not initialized', () => {
Expand Down Expand Up @@ -216,7 +215,7 @@ describe( 'BackupCloneFlow render', () => {

test( 'Render finished text if the clone is finished', () => {
getRewindState.mockImplementation( () => ( { state: 'active' } ) );
getInProgressRewindStatus.mockImplementation( () => 'finished' );
getRestoreProgress.mockImplementation( () => ( { status: 'finished' } ) );
render( <BackupCloneFlow /> );

progressThroughFlow();
Expand All @@ -225,7 +224,7 @@ describe( 'BackupCloneFlow render', () => {

test( 'Render error if it is in the wrong status', () => {
getRewindState.mockImplementation( () => ( { state: 'active' } ) );
getInProgressRewindStatus.mockImplementation( () => 'wrong-status' );
getRestoreProgress.mockImplementation( () => ( { status: 'wrong-status' } ) );
render( <BackupCloneFlow /> );

progressThroughFlow();
Expand Down
Loading