Backup: wire the modernized dashboard to real REST + Gates

projects/packages/backup/changelog/add-backup-modernization-dashboard-ui

@@ -0,0 +1,3 @@
+Significance: minor
+Type: added
+Comment: Backup: flesh out the modernized dashboard behind `rsm_jetpack_ui_modernization_backup` — overview list, two-pane backup detail with file browser + preview, and narrow Restore + Download forms. UI only with mocked data; no-op when the modernization filter is off.

projects/packages/backup/changelog/wire-backup-modernization-data-layer

@@ -0,0 +1,3 @@
+Significance: minor
+Type: added
+Comment: Backup: wire the modernized dashboard to real REST endpoints, add Gates for capability checks, drop the mock-mode dev banner. No-op when the modernization filter is off.

projects/packages/backup/package.json

@@ -47,7 +47,9 @@
 		"@wordpress/element": "6.44.0",
 		"@wordpress/i18n": "6.17.0",
 		"@wordpress/icons": "12.2.0",
+		"@wordpress/route": "0.10.0",
 		"@wordpress/ui": "0.11.0",
+		"@wordpress/url": "4.44.0",
 		"moment": "2.30.1",
 		"prop-types": "^15.8.1",
 		"react": "18.3.1",

projects/packages/backup/routes/dashboard/package.json

@@ -3,10 +3,16 @@
 	"version": "1.0.0",
 	"private": true,
 	"dependencies": {
+		"@tanstack/react-query": "5.90.8",
 		"@types/react": "18.3.28",
 		"@wordpress/admin-ui": "2.0.0",
+		"@wordpress/components": "32.6.0",
+		"@wordpress/date": "5.27.0",
 		"@wordpress/element": "6.44.0",
-		"@wordpress/i18n": "6.17.0"
+		"@wordpress/i18n": "6.17.0",
+		"@wordpress/icons": "12.2.0",
+		"@wordpress/route": "0.10.0",
+		"@wordpress/ui": "0.11.0"
 	},
 	"route": {
 		"path": "/",

projects/packages/backup/routes/dashboard/stage.tsx

@@ -1,18 +1,6 @@
-import { Page } from '@wordpress/admin-ui';
-import { __ } from '@wordpress/i18n';
+import OverviewScreen from '../../src/dashboard/screens/overview';
+import './style.scss';
 
-const Stage = () => {
-	// "VaultPress Backup" is a product name, do not translate.
-	return (
-		<Page
-			title="VaultPress Backup"
-			subTitle={ __(
-				'Save changes and restore quickly with one-click recovery.',
-				'jetpack-backup-pkg'
-			) }
-			hasPadding={ false }
-		/>
-	);
-};
+const Stage = () => <OverviewScreen />;
 
 export { Stage as stage };

projects/packages/backup/routes/dashboard/style.scss

@@ -0,0 +1,22 @@
+// Route-level styles for the modernized Backup dashboard.
+// Per-component styles live alongside each component under
+// src/dashboard/components/*. This file is intentionally minimal for
+// Task 1; later tasks add layout rules for the two-pane Overview here.
+
+.jpb-overview {
+	display: grid;
+	grid-template-columns: minmax(360px, 1fr) minmax(400px, 1.5fr);
+	gap: 16px;
+	width: 100%;
+	min-height: 600px;
+
+	&__detail--empty {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 200px;
+		background-color: var(--wp-components-color-background-secondary, #f7f7f7);
+		border-radius: 8px;
+		padding: 24px;
+	}
+}

projects/packages/backup/routes/download/package.json

@@ -0,0 +1,21 @@
+{
+	"name": "_@jetpack-backup/download-route",
+	"version": "1.0.0",
+	"private": true,
+	"dependencies": {
+		"@tanstack/react-query": "5.90.8",
+		"@types/react": "18.3.28",
+		"@wordpress/admin-ui": "2.0.0",
+		"@wordpress/components": "32.6.0",
+		"@wordpress/date": "5.27.0",
+		"@wordpress/element": "6.44.0",
+		"@wordpress/i18n": "6.17.0",
+		"@wordpress/icons": "12.2.0",
+		"@wordpress/route": "0.10.0",
+		"@wordpress/ui": "0.11.0"
+	},
+	"route": {
+		"path": "/download/$rewindId",
+		"page": "jetpack-backup-dashboard"
+	}
+}

projects/packages/backup/routes/download/route.tsx

@@ -0,0 +1 @@
+export const route = {};

projects/packages/backup/routes/download/stage.tsx

@@ -0,0 +1,6 @@
+import DownloadScreen from '../../src/dashboard/screens/download';
+import './style.scss';
+
+const Stage = () => <DownloadScreen />;
+
+export { Stage as stage };

projects/packages/backup/routes/download/style.scss

@@ -0,0 +1,27 @@
+.jpb-download {
+	max-width: 700px;
+	margin-inline: auto;
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	&__back {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		text-decoration: none;
+		width: max-content;
+	}
+
+	&__card {
+		padding: 24px;
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	&__link {
+		font-weight: 600;
+	}
+}

projects/packages/backup/routes/restore/package.json

@@ -0,0 +1,21 @@
+{
+	"name": "_@jetpack-backup/restore-route",
+	"version": "1.0.0",
+	"private": true,
+	"dependencies": {
+		"@tanstack/react-query": "5.90.8",
+		"@types/react": "18.3.28",
+		"@wordpress/admin-ui": "2.0.0",
+		"@wordpress/components": "32.6.0",
+		"@wordpress/date": "5.27.0",
+		"@wordpress/element": "6.44.0",
+		"@wordpress/i18n": "6.17.0",
+		"@wordpress/icons": "12.2.0",
+		"@wordpress/route": "0.10.0",
+		"@wordpress/ui": "0.11.0"
+	},
+	"route": {
+		"path": "/restore/$rewindId",
+		"page": "jetpack-backup-dashboard"
+	}
+}

projects/packages/backup/routes/restore/route.tsx

@@ -0,0 +1 @@
+export const route = {};

projects/packages/backup/routes/restore/stage.tsx

@@ -0,0 +1,6 @@
+import RestoreScreen from '../../src/dashboard/screens/restore';
+import './style.scss';
+
+const Stage = () => <RestoreScreen />;
+
+export { Stage as stage };

projects/packages/backup/routes/restore/style.scss

@@ -0,0 +1,23 @@
+.jpb-restore {
+	max-width: 700px;
+	margin-inline: auto;
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	&__back {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		text-decoration: none;
+		width: max-content;
+	}
+
+	&__card {
+		padding: 24px;
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+}

projects/packages/backup/src/class-jetpack-backup.php

@@ -122,6 +122,7 @@ public static function initialize() {
 		Connection_Rest_Authentication::init();
 
 		add_action( 'rest_api_init', array( __CLASS__, 'register_rest_routes' ) );
+		add_action( 'rest_api_init', array( \Automattic\Jetpack\Backup\V0005\REST\Rest_Controller::class, 'register_routes' ) );
 
 		add_action( 'admin_menu', array( __CLASS__, 'maybe_load_wp_build' ), 1 );
 		add_action( 'admin_menu', array( __CLASS__, 'add_wp_admin_submenu' ), 1 ); // Akismet uses 4, so we need to use 1 to ensure both menus are added when only they exist.
@@ -876,6 +877,27 @@ public static function maybe_load_wp_build() {
 
 		self::load_wp_build();
 		add_action( 'current_screen', array( __CLASS__, 'alias_screen_id_for_wp_build' ) );
+		add_action( 'admin_print_scripts', array( __CLASS__, 'render_connection_initial_state' ), 1 );
+	}
+
+	/**
+	 * Emit `window.JP_CONNECTION_INITIAL_STATE` inline on the modernized
+	 * Backup admin page.
+	 *
+	 * The modernized enqueue path short-circuits before the legacy
+	 * `Connection_Initial_State::render_script()` call, so without this
+	 * the React `<Gates>` component never sees the connection state and
+	 * sits on its loading skeleton forever. We emit the same JS payload
+	 * the legacy path emits, just outside of a registered script handle
+	 * (wp-build's handles aren't reliable here, and the global is
+	 * page-scoped — any tag setting it works).
+	 *
+	 * @return void
+	 */
+	public static function render_connection_initial_state() {
+		echo '<script id="jetpack-backup-connection-initial-state">'
+			. Connection_Initial_State::render() // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- render() returns pre-escaped JSON.
+			. '</script>';
 	}
 
 	/**
@@ -931,7 +953,7 @@ public static function alias_screen_id_for_wp_build( $screen ) {
 	 *
 	 * @return bool
 	 */
-	private static function is_modernized() {
+	public static function is_modernized() {
 		return (bool) apply_filters( self::MODERNIZATION_FILTER, false );
 	}
 

projects/packages/backup/src/dashboard/components/activity-detail/index.tsx

@@ -0,0 +1,34 @@
+import { dateI18n } from '@wordpress/date';
+import { Card, Stack, Text } from '@wordpress/ui';
+import type { NonBackupActivityItem } from '../../types/activity';
+
+type Props = {
+	item: NonBackupActivityItem;
+};
+
+/**
+ * Right-pane detail card for non-backup activity rows (post publish,
+ * upload, plugin update, theme update). Lighter than `<BackupDetail>` —
+ * no Download/Restore actions, no file browser slot.
+ *
+ * @param props      - Component props.
+ * @param props.item - The selected non-backup activity item.
+ * @return The rendered activity-detail card.
+ */
+export default function ActivityDetail( { item }: Props ) {
+	return (
+		<Card className="jpb-activity-detail">
+			<Stack direction="column" gap="sm">
+				<Text variant="heading-md" render={ <h3 /> }>
+					{ item.title }
+				</Text>
+				<Text size="small" variant="muted">
+					{ dateI18n( 'M j, Y, g:i A', item.publishedAt, undefined ) }
+					{ '   ' }
+					{ item.actor.name }
+				</Text>
+				{ item.summary && <Text>{ item.summary }</Text> }
+			</Stack>
+		</Card>
+	);
+}