Backup: modernized dashboard UI — Overview, Restore, Download (mocked)#48853
Backup: modernized dashboard UI — Overview, Restore, Download (mocked)#48853dhasilva wants to merge 12 commits into
Conversation
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! Jetpack plugin: The Jetpack plugin has different release cadences depending on the platform:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. Backup plugin: No scheduled milestone found for this plugin. If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. |
Code Coverage Summary22 files are newly checked for coverage. Only the first 5 are listed here.
Full summary · PHP report · JS report If appropriate, add one of these labels to override the failing coverage check:
Covered by non-unit tests
|
8687036 to
7ec9053
Compare
Replaces the scaffold's empty <Page> body with a real wp-build entry that mounts <DashboardLayout> (which itself uses <Page> from @wordpress/admin-ui) wrapping an empty Overview screen. Adds shared TypeScript types, the mock-mode detector behind `?jpb-mock=1`, and a dev banner that only renders when mock mode is active. No PHP changes — the existing modernization filter continues to gate the whole dashboard via the scaffold's is_modernized() switch. Phase 1 of the Backup modernization. UI only; data wiring is a follow-up PR. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Fills the left pane of the modernized Overview with a paginated, searchable activity list backed by static fixtures + a synthetic-latency mock hook. Selection persists in the URL via `?selected=<id>` so refresh keeps state. Right pane remains an empty-state card until the backup-detail commit lands. Adds `@wordpress/route` to the package root so the wordpress-externals plugin can resolve it from `src/dashboard/screens/overview.tsx`; the route sub-package already declared the same pin (mirrors Newsletter's setup, where the dep is listed in both root and routes/dashboard). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Wires `?selected=<id>` to BackupDetail (status header + Download/Restore actions + stats + files placeholder) for backup rows, and a lighter ActivityDetail card for non-backup rows. Download/Restore actions deep-link to `/download/$rewindId` and `/restore/$rewindId` which will 404 until the Restore + Download routes land in later commits. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces BackupDetail's "Files placeholder" with a tree of folders + files driven by useMockFileTree. Folders expand lazily with synthetic latency so loading and empty states are exercised. Selecting a file opens a side info-card with size, mime, path, and a monospace text preview for text/PHP/SQL/CSS sources. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
New `/restore/$rewindId` wp-build route renders a narrow Restore form: warning notice, six-item checklist (shared `<RestoreItemsChecklist>`), Confirm button. Submission cycles through a synthetic state machine (idle → submitting → progress → success), with a ~10% stochastic error branch so the error UI is reachable during review. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Mirror of the Restore route minus the warning notice. The mocked submit flow cycles idle → submitting → progress → success → mock download URL, with the same ~10% stochastic error branch. Reuses the shared `<RestoreItemsChecklist>` component. This completes Phase 1: the modernized Backup dashboard now renders the overview, file browser, restore, and download screens end-to-end with mocked data. Real REST integration is a follow-up PR. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Wrap the Overview activity list in a Card.Root so the left pane picks up the same chrome (border, radius, background) as the right pane and the rest of the dashboard. - Switch the activity list to `@wordpress/dataviews` (bundled) rather than `@wordpress/dataviews/wp` (script module), and pull the package's stylesheet into the dashboard route via `meta.load-css`. Without those styles the list-layout row button fell back to wp-admin's default button styling and rendered a visible 16x6 grey artifact in every row. - Hide the redundant DataViews selection checkbox, center the media slot, keep the date/summary cell on a single line, and align the pagination footer pieces — same overrides Calypso's backup-overview list applies to DataViews. - Restructure the backup detail card with explicit Card.Header / Card.Content slots so the header gets its bottom border separator and the body gets proper padding. Swap the restore icon back to rotateLeft to match the legacy admin. - Lift the "FILES" section title into the detail card with its own top-border separator, and add a separator under the "N files selected" row. - Add zebra striping to the file-browser tree with a literal hex — the --wp-components-color-gray-100 token is locally re-mapped to white inside Card.Content, which would defeat the alternation. - Wrap the non-backup activity detail in Card.Content so it stops rendering flush against the card border. Mocked data + flagged behaviour are unchanged; this is visual parity work only. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The legacy "Backup" sidebar label doesn't match the modernized page chassis (which already reads "VaultPress Backup") or the plugin's own display name. Aligns the WP admin menu with the in-page title and the product name used elsewhere. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three related bugs in the modernized file-browser selection: - Deselecting a row inside a selected subtree only added an exception but never propagated up. Now walks up: when every loaded child of an ancestor is effectively deselected, the ancestor is deselected too (and re-selecting reverses the same walk: when every loaded child becomes effectively selected, the ancestor follows). Stops at the first ancestor with un-loaded children. - Indeterminate only fired for selected folders with a deselected descendant. Now symmetric: an unselected folder with a selected descendant also reads as indeterminate (e.g. visitor checks a single leaf without its ancestors). - `applySelect` cleared an own-negative entry but didn't add an own positive, so re-checking a path whose ancestor stayed in `deselected` would silently inherit unchecked. Now: drop the negative and, only if removing it wouldn't already leave the row inherited-selected from an ancestor, add the explicit positive. - The header "selected" count tracked `selected.size` (the explicit positives), which never grew as the visitor expanded an inherited subtree. Now hoists loaded folder children to the FileBrowser via a per-row callback and counts effectively-selected leaves only: a file counts as 1, a folder counts as 1 only when its contents haven't been loaded yet (otherwise the server treats it as one opaque download unit), and indeterminate folders contribute only the effectively-selected descendants underneath. BackupDetail reads the same count for its Download / Restore action labels via a new `onSelectionCountChange` callback, and the labels switch to proper singular/plural via `_n()`. `useMockFileTree` no longer seeds non-null callers with the root tree on first render — the seeding leaked the root tree into closed NodeRows' `children` state and let the registerChildren effect accidentally register MOCK_FILE_TREE for non-root paths during the window between "open clicked" and "fetch resolved", which infinitely recursed the count walk. FileBrowser now imports `MOCK_FILE_TREE` directly for its roots; the hook handles only lazy non-root loads. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- The flag-gated `add-backup-modernization-dashboard-ui` entry uses
`Comment:` only (no public `Entry:`), so `Significance: minor` was
rejected ("Changelog entry may only be empty when Significance is
'patch'"). Switch both the package and plugin entries to `patch`,
matching the convention used by `update-backup-modernization-*` for
gated, non-shipping work.
- Stylelint required a blank line before `@include` at the top of
`body.jetpack_page_jetpack-backup { … }` in the modernized dashboard
route stylesheet (at-rule-empty-line-before).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4f576f4 to
671bf53
Compare
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The Backup submenu entry's `page_title` changed from "Jetpack Backup" to "Jetpack VaultPress Backup" (see the matching package commit), so the array_search in `test_jetpack_admin_menu_order` needs the new value to find the row's position. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Fixes # n/a
Proposed changes
<Page>body with a wp-build entry that mounts a shared<DashboardLayout>(wrapsPagefrom@wordpress/admin-ui+ a?jpb-mock=1dev-mode banner).?selected=<id>, and a right pane that renders<BackupDetail>for backup rows or<ActivityDetail>for non-backup activity.<BackupDetail>: tree of folders + files with lazy expand + per-folder synthetic loading state, multi-select via checkboxes, and a side<FileInfoCard>with a monospace text preview for.php/.css/.sqlfiles./restore/$rewindId): narrow form with warning Notice, six-item<RestoreItemsChecklist>, and a synthetic state machine cyclingidle → submitting → progress → success | error(~10% stochastic error)./download/$rewindId): same shape as Restore minus the warning, with a synthetic "Download ready" link on success. Reuses<RestoreItemsChecklist>directly.useMock*hooks fed by static fixtures with stable synthetic ids. No PHP changes; the modernization filter (rsm_jetpack_ui_modernization_backup) from the scaffold continues to gate the whole dashboard, so the flag-off path is byte-identical to trunk.Related product discussion/links
Pagechassis). Slots as a UI-first PR; real REST integration is a follow-up.Does this pull request change what data or activity we track or use?
No.
Testing instructions
pnpm installfrom the repo root.wp-admin → Jetpack → VaultPress Backupwith?jpb-mock=1appended (full URL:…/wp-admin/admin.php?page=jetpack-backup&jpb-mock=1).?selected=…. Refresh the URL — selection persists.wp-contentto expand (300ms spinner, then children). Clickwp-config.php— the side info card opens with a monospace PHP preview..off, reload). Confirm the legacy Backup UI renders unchanged — the flag-off path is the trunk path.🤖 Generated with Claude Code