Backup: wire the modernized dashboard to real REST + Gates

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

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

projects/packages/backup/package.json

@@ -52,6 +52,7 @@
 		"@wordpress/route": "0.10.0",
 		"@wordpress/theme": "0.11.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

@@ -4,8 +4,10 @@
 	"private": true,
 	"dependencies": {
 		"@automattic/jetpack-components": "workspace:*",
+		"@tanstack/react-query": "5.90.8",
 		"@types/react": "18.3.28",
 		"@wordpress/admin-ui": "2.0.0",
+		"@wordpress/api-fetch": "7.44.0",
 		"@wordpress/components": "32.6.0",
 		"@wordpress/dataviews": "14.1.0",
 		"@wordpress/date": "5.27.0",
@@ -14,7 +16,8 @@
 		"@wordpress/icons": "12.2.0",
 		"@wordpress/route": "0.10.0",
 		"@wordpress/theme": "0.11.0",
-		"@wordpress/ui": "0.11.0"
+		"@wordpress/ui": "0.11.0",
+		"@wordpress/url": "4.44.0"
 	},
 	"route": {
 		"path": "/",

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

@@ -4,16 +4,19 @@
 	"private": true,
 	"dependencies": {
 		"@automattic/jetpack-components": "workspace:*",
+		"@tanstack/react-query": "5.90.8",
 		"@types/react": "18.3.28",
 		"@wordpress/admin-ui": "2.0.0",
+		"@wordpress/api-fetch": "7.44.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/theme": "0.11.0",
-		"@wordpress/ui": "0.11.0"
+		"@wordpress/ui": "0.11.0",
+		"@wordpress/url": "4.44.0"
 	},
 	"route": {
 		"path": "/download/$rewindId",

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

@@ -4,16 +4,19 @@
 	"private": true,
 	"dependencies": {
 		"@automattic/jetpack-components": "workspace:*",
+		"@tanstack/react-query": "5.90.8",
 		"@types/react": "18.3.28",
 		"@wordpress/admin-ui": "2.0.0",
+		"@wordpress/api-fetch": "7.44.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/theme": "0.11.0",
-		"@wordpress/ui": "0.11.0"
+		"@wordpress/ui": "0.11.0",
+		"@wordpress/url": "4.44.0"
 	},
 	"route": {
 		"path": "/restore/$rewindId",

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.
@@ -882,6 +883,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>';
 	}
 
 	/**
@@ -937,7 +959,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-list/index.tsx

@@ -4,7 +4,7 @@ import { useCallback, useMemo, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, cloud, image, post, plugins as pluginsIcon, color } from '@wordpress/icons';
 import { Card, Stack, Text } from '@wordpress/ui';
-import { useMockActivityLog } from '../../hooks/use-mock-activity-log';
+import { useActivityLog } from '../../hooks/use-activity-log';
 import { isBackupItem } from '../../types/activity';
 import './style.scss';
 import type { ActivityItem, ActivityKind } from '../../types/activity';
@@ -115,14 +115,11 @@ export default function ActivityList( { selectedId, onSelect }: Props ) {
 	} );
 
 	// Drive the hook with DataViews' own view state so the hook is the
-	// single source of truth for the visible slice + counts. The mock
-	// hook's contract matches the real `useActivityLog` from the
-	// data-layer follow-up, so swapping the import line later is the
-	// only change required here.
+	// single source of truth for the visible slice + counts.
 	const page = view.page ?? 1;
 	const perPage = view.perPage ?? DEFAULT_PER_PAGE;
 	const search = view.search ?? '';
-	const { items, totalItems, totalPages, isLoading } = useMockActivityLog( {
+	const { items, totalItems, totalPages, isLoading } = useActivityLog( {
 		page,
 		pageSize: perPage,
 		search,

projects/packages/backup/src/dashboard/components/dashboard-layout/index.tsx

@@ -2,7 +2,8 @@ import JetpackFooter from '@automattic/jetpack-components/jetpack-footer';
 import JetpackLogo from '@automattic/jetpack-components/jetpack-logo';
 import { Page } from '@wordpress/admin-ui';
 import { __ } from '@wordpress/i18n';
-import DevModeBanner from '../dev-mode-banner';
+import QueryClientProvider from '../../providers/query-client-provider';
+import Gates from '../gates';
 import './style.scss';
 import type { ReactNode } from 'react';
 
@@ -17,9 +18,9 @@ const PRODUCT_NAME = 'VaultPress Backup'; // Product name; do not translate.
  * Shared shell for every screen of the modernized Backup dashboard.
  *
  * Wraps a `<Page>` from `@wordpress/admin-ui` (the standard wp-admin
- * chrome) with a Jetpack logo in the `visual` slot, the dev-mode banner,
- * the page body, and `<JetpackFooter>` at the bottom — matching every
- * other modernized Jetpack dashboard (Newsletter, VideoPress, Forms).
+ * chrome) with a Jetpack logo in the `visual` slot, the page body, and
+ * `<JetpackFooter>` at the bottom — matching every other modernized
+ * Jetpack dashboard (Newsletter, VideoPress, Forms).
  *
  * The page is laid out so the body grows to fill the viewport and the
  * footer stays parked at the bottom when content is short, but scrolls
@@ -44,11 +45,14 @@ export default function DashboardLayout( { children, actions }: Props ) {
 			hasPadding={ false }
 			actions={ actions }
 		>
-			<DevModeBanner />
-			<div className="jpb-dashboard-body">
-				<div className="jpb-dashboard-body__inner">{ children }</div>
-			</div>
-			<JetpackFooter />
+			<QueryClientProvider>
+				<div className="jpb-dashboard-body">
+					<div className="jpb-dashboard-body__inner">
+						<Gates>{ children }</Gates>
+					</div>
+				</div>
+				<JetpackFooter />
+			</QueryClientProvider>
 		</Page>
 	);
 }