Skip to content

Commit 54e0098

Browse files
yashwinclaude
yashwin
and
claude
committed
A4A: Consume shared backup page shells
Replace the duplicated agency backup shells with the shared components extracted in the base branch, addressing the review feedback: * backups-list-page renders <BackupsPage> with agency-route navigation built via useBackupsNavigation * backups uses <BackupFileBrowserProvider> * backup-download renders <BackupDownloadPage> Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 parent 9001ed5 commit 54e0098

3 files changed

Lines changed: 48 additions & 160 deletions

File tree

‎client/dashboard/agency/sites/site/backup-download.tsx‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import { siteBySlugQuery } from '@automattic/api-queries';
22
import { useSuspenseQuery } from '@tanstack/react-query';
33
import { useRouter } from '@tanstack/react-router';
4-
import { __ } from '@wordpress/i18n';
54
import { useCallback } from 'react';
6-
import Breadcrumbs from '../../../app/breadcrumbs';
75
import { agencySiteBackupDownloadRoute } from '../../../app/router/agency';
8-
import { PageHeader } from '../../../components/page-header';
9-
import PageLayout from '../../../components/page-layout';
10-
import { BackupDownloadFlow } from '../../../sites/backup-download/flow';
6+
import { BackupDownloadPage } from '../../../sites/backup-download/download-page';
117

128
export default function AgencySiteBackupDownload() {
139
const { siteSlug, rewindId } = agencySiteBackupDownloadRoute.useParams();
1410
const { downloadId } = agencySiteBackupDownloadRoute.useSearch();
1511
const { data: site } = useSuspenseQuery( siteBySlugQuery( siteSlug ) );
1612
const router = useRouter();
1713

18-
const handleDownloadIdConsumed = useCallback( () => {
14+
const onConsumeDownloadId = useCallback( () => {
1915
router.navigate( {
2016
to: agencySiteBackupDownloadRoute.fullPath,
2117
params: { siteSlug, rewindId },
@@ -25,18 +21,11 @@ export default function AgencySiteBackupDownload() {
2521
}, [ router, siteSlug, rewindId ] );
2622

2723
return (
28-
<PageLayout
29-
size="small"
30-
header={
31-
<PageHeader prefix={ <Breadcrumbs length={ 2 } /> } title={ __( 'Download backup' ) } />
32-
}
33-
>
34-
<BackupDownloadFlow
35-
site={ site }
36-
rewindId={ rewindId }
37-
initialDownloadId={ downloadId }
38-
onDownloadIdConsumed={ handleDownloadIdConsumed }
39-
/>
40-
</PageLayout>
24+
<BackupDownloadPage
25+
site={ site }
26+
rewindId={ rewindId }
27+
downloadId={ downloadId }
28+
onConsumeDownloadId={ onConsumeDownloadId }
29+
/>
4130
);
4231
}

‎client/dashboard/agency/sites/site/backups-list-page.tsx‎

Lines changed: 37 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
1-
import { siteBySlugQuery, siteSettingsQuery } from '@automattic/api-queries';
2-
import { DateRangePicker } from '@automattic/date-range-picker';
1+
import { siteBySlugQuery } from '@automattic/api-queries';
32
import { useSuspenseQuery } from '@tanstack/react-query';
43
import { useParams, useRouter } from '@tanstack/react-router';
5-
import { __ } from '@wordpress/i18n';
6-
import { useCallback } from 'react';
7-
import Breadcrumbs from '../../../app/breadcrumbs';
8-
import { useDateRange } from '../../../app/hooks/use-date-range';
9-
import { useLocale } from '../../../app/locale';
4+
import { useMemo } from 'react';
105
import {
116
agencySiteRoute,
127
agencySiteBackupsRoute,
@@ -15,145 +10,59 @@ import {
1510
agencySiteBackupRestoreRoute,
1611
agencySiteBackupDownloadRoute,
1712
} from '../../../app/router/agency';
18-
import { PageHeader } from '../../../components/page-header';
19-
import PageLayout from '../../../components/page-layout';
20-
import { BackupNotices } from '../../../sites/backups/backup-notices';
21-
import { BackupNowButton } from '../../../sites/backups/backup-now-button';
22-
import { BackupsBrowser, useIsBackupsSmallViewport } from '../../../sites/backups/backups-browser';
23-
import { useBackupState } from '../../../sites/backups/use-backup-state';
24-
import type { ActivityLogEntry } from '@automattic/api-core';
13+
import { BackupsPage, type BackupsNavigation } from '../../../sites/backups/backups-page';
2514

2615
export default function AgencySiteBackupsListPage() {
2716
const { siteSlug } = agencySiteRoute.useParams();
2817
const router = useRouter();
29-
const locale = useLocale();
18+
const { data: site } = useSuspenseQuery( siteBySlugQuery( siteSlug ) );
19+
const searchParams = agencySiteBackupsRoute.useSearch();
3020

3121
const routeParams = useParams( { strict: false, shouldThrow: false } ) as
3222
| { rewindId?: string }
3323
| undefined;
3424
const rewindId = routeParams?.rewindId;
35-
const searchParams = agencySiteBackupsRoute.useSearch();
36-
37-
const { data: site } = useSuspenseQuery( siteBySlugQuery( siteSlug ) );
38-
39-
const { data: siteSettings } = useSuspenseQuery( {
40-
...siteSettingsQuery( site.ID ),
41-
select: ( s ) => ( {
42-
gmtOffset: Number( s?.gmt_offset ) || 0,
43-
timezoneString: s?.timezone_string || undefined,
44-
} ),
45-
} );
46-
const { gmtOffset, timezoneString } = siteSettings;
47-
48-
const backupState = useBackupState( site.ID );
49-
50-
const { dateRange, handleDateRangeChange } = useDateRange( {
51-
timezoneString,
52-
gmtOffset,
53-
defaultDays: 30,
54-
} );
5525

56-
const navigateToBackup = useCallback(
57-
( selected: ActivityLogEntry | null ) => {
58-
router.navigate(
59-
selected
60-
? {
26+
const navigation = useMemo< BackupsNavigation >(
27+
() => ( {
28+
selectBackup: ( id ) =>
29+
id
30+
? router.navigate( {
6131
to: agencySiteBackupDetailRoute.fullPath,
62-
params: { siteSlug, rewindId: selected.rewind_id },
32+
params: { siteSlug, rewindId: id },
6333
search: ( query: Record< string, string > ) => query,
64-
}
65-
: {
34+
} )
35+
: router.navigate( {
6636
to: agencySiteBackupsIndexRoute.fullPath,
6737
params: { siteSlug },
6838
search: ( query: Record< string, string > ) => query,
69-
}
70-
);
71-
},
39+
} ),
40+
requestRestore: ( id ) =>
41+
router.navigate( {
42+
to: agencySiteBackupRestoreRoute.fullPath,
43+
params: { siteSlug, rewindId: id },
44+
} ),
45+
requestDownload: ( id, downloadId ) =>
46+
downloadId
47+
? router.navigate( {
48+
to: agencySiteBackupDownloadRoute.fullPath,
49+
params: { siteSlug, rewindId: id },
50+
search: { downloadId },
51+
} )
52+
: router.navigate( {
53+
to: agencySiteBackupDownloadRoute.fullPath,
54+
params: { siteSlug, rewindId: id },
55+
} ),
56+
} ),
7257
[ router, siteSlug ]
7358
);
7459

75-
const handleRequestRestore = ( selected: ActivityLogEntry ) => {
76-
router.navigate( {
77-
to: agencySiteBackupRestoreRoute.fullPath,
78-
params: { siteSlug, rewindId: selected.rewind_id },
79-
} );
80-
};
81-
82-
const handleRequestDownload = ( selected: ActivityLogEntry ) => {
83-
router.navigate( {
84-
to: agencySiteBackupDownloadRoute.fullPath,
85-
params: { siteSlug, rewindId: selected.rewind_id },
86-
} );
87-
};
88-
89-
const handleGranularDownloadReady = ( selected: ActivityLogEntry, downloadId: number ) => {
90-
router.navigate( {
91-
to: agencySiteBackupDownloadRoute.fullPath,
92-
params: { siteSlug, rewindId: selected.rewind_id },
93-
search: { downloadId },
94-
} );
95-
};
96-
97-
const handleDateRangeChangeWrapper = ( next: { start: Date; end: Date } ) => {
98-
handleDateRangeChange( next );
99-
navigateToBackup( null );
100-
};
101-
102-
const isMobileDetailsView = useIsBackupsSmallViewport() && !! rewindId;
103-
104-
const actions = (
105-
<>
106-
{ /* This div is required to fix a layout width issue when the DateRangePicker is placed together with the BackupNowButton. */ }
107-
<div>
108-
<DateRangePicker
109-
start={ dateRange.start }
110-
end={ dateRange.end }
111-
gmtOffset={ gmtOffset }
112-
timezoneString={ timezoneString }
113-
locale={ locale }
114-
defaultFallbackPreset="last-30-days"
115-
onChange={ handleDateRangeChangeWrapper }
116-
/>
117-
</div>
118-
<BackupNowButton site={ site } backupState={ backupState } />
119-
</>
120-
);
121-
12260
return (
123-
<PageLayout
124-
header={
125-
<PageHeader
126-
title={ isMobileDetailsView ? __( 'Backup details' ) : __( 'Backups' ) }
127-
description={ __(
128-
'Access and restore your site backups, powered by Jetpack VaultPress Backup.'
129-
) }
130-
prefix={ isMobileDetailsView ? <Breadcrumbs length={ 2 } /> : undefined }
131-
actions={ isMobileDetailsView ? undefined : actions }
132-
/>
133-
}
134-
notices={
135-
! isMobileDetailsView && backupState.status !== 'idle' ? (
136-
<BackupNotices
137-
backupState={ backupState }
138-
site={ site }
139-
timezoneString={ timezoneString }
140-
gmtOffset={ gmtOffset }
141-
/>
142-
) : undefined
143-
}
144-
>
145-
<BackupsBrowser
146-
site={ site }
147-
rewindId={ rewindId }
148-
dateRange={ dateRange }
149-
timezoneString={ timezoneString }
150-
gmtOffset={ gmtOffset }
151-
searchParams={ searchParams }
152-
onSelectBackup={ navigateToBackup }
153-
onRequestRestore={ handleRequestRestore }
154-
onRequestDownload={ handleRequestDownload }
155-
onGranularDownloadReady={ handleGranularDownloadReady }
156-
/>
157-
</PageLayout>
61+
<BackupsPage
62+
site={ site }
63+
navigation={ navigation }
64+
rewindId={ rewindId }
65+
searchParams={ searchParams }
66+
/>
15867
);
15968
}

‎client/dashboard/agency/sites/site/backups.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,18 @@ import { agencySiteQuery } from '@automattic/api-queries';
22
import { useSuspenseQuery } from '@tanstack/react-query';
33
import { Outlet } from '@tanstack/react-router';
44
import { __experimentalHStack as HStack } from '@wordpress/components';
5-
import { useDispatch } from '@wordpress/data';
65
import { __ } from '@wordpress/i18n';
76
import { Icon, backup as backupIcon } from '@wordpress/icons';
8-
import { store as noticesStore } from '@wordpress/notices';
9-
import { FileBrowserProvider } from '../../../../my-sites/backup/backup-contents-page/file-browser/file-browser-context';
10-
import { useLocale } from '../../../app/locale';
117
import { agencySiteRoute } from '../../../app/router/agency';
128
import { Card, CardBody } from '../../../components/card';
139
import { PageHeader } from '../../../components/page-header';
1410
import PageLayout from '../../../components/page-layout';
1511
import { Text } from '../../../components/text';
12+
import { BackupFileBrowserProvider } from '../../../sites/backups/backup-file-browser-provider';
1613

1714
export default function AgencySiteBackups() {
1815
const { siteSlug } = agencySiteRoute.useParams();
1916
const { data: site } = useSuspenseQuery( agencySiteQuery( siteSlug ) );
20-
const locale = useLocale();
21-
const { createErrorNotice, createSuccessNotice } = useDispatch( noticesStore );
2217

2318
if ( ! site?.has_backup ) {
2419
return (
@@ -35,14 +30,9 @@ export default function AgencySiteBackups() {
3530
);
3631
}
3732

38-
const notices = {
39-
showError: ( message: string ) => createErrorNotice( message, { type: 'snackbar' } ),
40-
showSuccess: ( message: string ) => createSuccessNotice( message, { type: 'snackbar' } ),
41-
};
42-
4333
return (
44-
<FileBrowserProvider locale={ locale } notices={ notices }>
34+
<BackupFileBrowserProvider>
4535
<Outlet />
46-
</FileBrowserProvider>
36+
</BackupFileBrowserProvider>
4737
);
4838
}

0 commit comments

Comments
 (0)