Backup: modernized dashboard UI — Overview, Restore, Download (mocked)

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/package.json

@@ -41,12 +41,16 @@
 		"@tanstack/react-query": "5.90.8",
 		"@wordpress/admin-ui": "2.0.0",
 		"@wordpress/api-fetch": "7.44.0",
+		"@wordpress/base-styles": "6.20.0",
 		"@wordpress/components": "32.6.0",
 		"@wordpress/data": "10.44.0",
+		"@wordpress/dataviews": "14.1.0",
 		"@wordpress/date": "5.44.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",
 		"moment": "2.30.1",
 		"prop-types": "^15.8.1",

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

@@ -3,10 +3,18 @@
 	"version": "1.0.0",
 	"private": true,
 	"dependencies": {
+		"@automattic/jetpack-components": "workspace:*",
 		"@types/react": "18.3.28",
 		"@wordpress/admin-ui": "2.0.0",
+		"@wordpress/components": "32.6.0",
+		"@wordpress/dataviews": "14.1.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/theme": "0.11.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,74 @@
+// Route-level styles for the modernized Backup dashboard.
+// Per-component styles live alongside each component under
+// src/dashboard/components/*.
+
+@use "sass:meta";
+@use "@automattic/jetpack-base-styles/admin-page-layout" as *;
+
+// Pull in the bundled DataViews stylesheet. `@wordpress/dataviews` ships
+// its CSS in `build-style/style.css` rather than auto-injecting it from
+// the JS entry, so we explicitly @include it once at the route level
+// (mirrors VideoPress's `routes/library/style.scss`). Without this the
+// list-layout primary action button falls back to wp-admin's default
+// browser button styling and shows as a visible artifact in every row.
+@include meta.load-css("@wordpress/dataviews/build-style/style.css");
+
+// Pin the wp-admin content column to the viewport and turn its inner
+// flex chain into "fixed header + scrollable middle + pinned footer"
+// — matches the modernized VideoPress / Forms dashboards (see
+// `projects/packages/videopress/src/dashboard/admin-shell.scss`).
+// Without this, JetpackFooter scrolls with the body when the activity
+// list grows past the viewport. Scoped to the backup admin body so it
+// can't leak onto other Jetpack pages.
+body.jetpack_page_jetpack-backup {
+	@include jetpack-admin-page-layout-wp-build;
+
+	// The shared mixin assumes `<AdminPage>` from `@automattic/jetpack-components`
+	// (which stamps `.jp-admin-page` AND admin-ui's `.admin-ui-page` /
+	// `.admin-ui-page__header` classes verbatim). Our DashboardLayout uses
+	// `<Page>` from `@wordpress/admin-ui` 2.x, whose root + header classes
+	// are emotion-hashed (`_<hash>__page`, `_<hash>__header`) and don't
+	// match the mixin's selectors. We add `.jp-admin-page` to the Page so
+	// the mixin's outer flex chain still attaches, and reproduce the
+	// page-internal "header / middle / footer" sticky layout here using
+	// our own stable class names (`.jpb-dev-mode-banner`,
+	// `.jpb-dashboard-body`, `.jetpack-footer`).
+	.jp-admin-page {
+
+		> header {
+			flex-shrink: 0;
+		}
+
+		> .jpb-dev-mode-banner {
+			flex-shrink: 0;
+		}
+
+		> .jpb-dashboard-body {
+			flex: 1 1 auto;
+			min-height: 0;
+			overflow: auto;
+		}
+
+		> .jetpack-footer {
+			flex-shrink: 0;
+		}
+	}
+}
+
+.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,22 @@
+{
+	"name": "_@jetpack-backup/download-route",
+	"version": "1.0.0",
+	"private": true,
+	"dependencies": {
+		"@automattic/jetpack-components": "workspace:*",
+		"@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/theme": "0.11.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,42 @@
+.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;
+	}
+
+	// Card.Root lays its children out as a flex column, so a `<Button>`
+	// child stretches to fill the cross-axis (the full card width) by
+	// default. Pin the Generate action to its content width.
+	&__confirm {
+		align-self: flex-start;
+
+		// wp-admin's global `svg { fill: … }` is unlayered and beats
+		// `@wordpress/ui` Button's layered icon color. Force the SVG
+		// to inherit the button's text color so the icon stays white
+		// on the blue primary background.
+		svg {
+			fill: currentColor;
+		}
+	}
+
+	&__link {
+		font-weight: 600;
+	}
+}

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

@@ -0,0 +1,22 @@
+{
+	"name": "_@jetpack-backup/restore-route",
+	"version": "1.0.0",
+	"private": true,
+	"dependencies": {
+		"@automattic/jetpack-components": "workspace:*",
+		"@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/theme": "0.11.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,41 @@
+.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;
+	}
+
+	// Card.Root lays its children out as a flex column, so a `<Button>`
+	// child stretches to fill the cross-axis (the full card width) by
+	// default. Pin the Confirm action to its content width so it reads
+	// as a button rather than a wide bar — matches the legacy
+	// `try/jetpack-backup-new-ui` Restore screen.
+	&__confirm {
+		align-self: flex-start;
+
+		// wp-admin's global `svg { fill: … }` is unlayered and beats
+		// `@wordpress/ui` Button's layered icon color, so the icon
+		// renders black on the blue primary background. Force the
+		// SVG to inherit the button's text color (white for the
+		// primary variant) so the icon reads correctly.
+		svg {
+			fill: currentColor;
+		}
+	}
+}

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

@@ -0,0 +1,36 @@
+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.Root className="jpb-activity-detail">
+			<Card.Content>
+				<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.Content>
+		</Card.Root>
+	);
+}