Backup: modernized dashboard UI — Overview, Restore, Download (mocked)#48853
Draft
dhasilva wants to merge 7 commits into
Draft
Backup: modernized dashboard UI — Overview, Restore, Download (mocked)#48853dhasilva wants to merge 7 commits into
dhasilva wants to merge 7 commits into
Conversation
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>
Contributor
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
github-actions
Bot
added
[Package] Backup
[Plugin] Backup
Contributor
|
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
|
dhasilva
force-pushed
the
worktree-add+backup-modernization-ui
branch
from
990a4de to
d2ea771
Compare
- 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>
dhasilva
force-pushed
the
worktree-add+backup-modernization-ui
branch
from
d2ea771 to
398c7a4
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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