Skip to content

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

Open
dhasilva wants to merge 12 commits into
trunkfrom
worktree-add+backup-modernization-ui
Open

Backup: modernized dashboard UI — Overview, Restore, Download (mocked)#48853
dhasilva wants to merge 12 commits into
trunkfrom
worktree-add+backup-modernization-ui

Conversation

@dhasilva
Copy link
Copy Markdown
Contributor

Fixes # n/a

Proposed changes

  • Replace the modernized Backup scaffold's empty <Page> body with a wp-build entry that mounts a shared <DashboardLayout> (wraps Page from @wordpress/admin-ui + a ?jpb-mock=1 dev-mode banner).
  • Add the Overview screen: paginated, searchable activity list (left pane) with URL-driven selection via ?selected=<id>, and a right pane that renders <BackupDetail> for backup rows or <ActivityDetail> for non-backup activity.
  • Add the file browser inside <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/.sql files.
  • Add the Restore route (/restore/$rewindId): narrow form with warning Notice, six-item <RestoreItemsChecklist>, and a synthetic state machine cycling idle → submitting → progress → success | error (~10% stochastic error).
  • Add the Download route (/download/$rewindId): same shape as Restore minus the warning, with a synthetic "Download ready" link on success. Reuses <RestoreItemsChecklist> directly.
  • UI only — all data is mocked via per-screen 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

Does this pull request change what data or activity we track or use?

No.

Testing instructions

  1. Check out this branch and run pnpm install from the repo root.
  2. Enable the modernization filter locally — easiest is a one-line mu-plugin:
    <?php
    add_filter( 'rsm_jetpack_ui_modernization_backup', '__return_true' );
  3. Visit wp-admin → Jetpack → VaultPress Backup with ?jpb-mock=1 appended (full URL: …/wp-admin/admin.php?page=jetpack-backup&jpb-mock=1).
  4. Confirm a yellow "Dev mode" banner appears above the body — that's the fixture-mode marker.
  5. Overview: paginated list on the left, empty-state on the right. Click any row — the right pane updates and the URL gains ?selected=…. Refresh the URL — selection persists.
  6. Backup row → confirm the file browser shows under "FILES". Click wp-content to expand (300ms spinner, then children). Click wp-config.php — the side info card opens with a monospace PHP preview.
  7. Click "Restore to this point" → warning notice + six checkboxes + "Confirm restore". Submitting cycles spinner → progress bar → success notice. ~1 in 10 submits lands in the error notice with "Try again".
  8. Click "Download backup" → same shape minus the warning. Success surfaces a (mock) download link.
  9. Toggle the filter OFF (rename the mu-plugin to .off, reload). Confirm the legacy Backup UI renders unchanged — the flag-off path is the trunk path.

🤖 Generated with Claude Code

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 15, 2026

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

  • To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the worktree-add+backup-modernization-ui branch.
  • To test on Simple, run the following command on your sandbox:
bin/jetpack-downloader test jetpack worktree-add+backup-modernization-ui
bin/jetpack-downloader test jetpack-mu-wpcom-plugin worktree-add+backup-modernization-ui

Interested in more tips and information?

  • In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
  • Read more about our development workflow here: PCYsg-eg0-p2
  • Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

@github-actions github-actions Bot added [Package] Backup [Plugin] Backup A plugin that allows users to save every change and get back online quickly with one-click restores. [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ labels May 15, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 15, 2026

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • ✅ Include a description of your PR changes.
  • ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  • ✅ Add testing instructions.
  • ✅ Specify whether this PR includes any changes to data or privacy.
  • ✅ Add changelog entries to affected projects

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:

  1. Ensure all required checks appearing at the bottom of this PR are passing.
  2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
  3. You can use GitHub's Reviewers functionality to request a review.
  4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

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:

  • WordPress.com Simple releases happen as soon as you deploy your changes after merging this PR (PCYsg-Jjm-p2).
  • WoA releases happen weekly.
  • Releases to self-hosted sites happen monthly:
    • Scheduled release: June 2, 2026
    • Code freeze: June 1, 2026

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.

@jp-launch-control
Copy link
Copy Markdown

jp-launch-control Bot commented May 15, 2026

Code Coverage Summary

22 files are newly checked for coverage. Only the first 5 are listed here.

File Coverage
projects/packages/backup/src/dashboard/components/activity-detail/index.tsx 0/1 (0.00%) 💔
projects/packages/backup/src/dashboard/components/activity-list/index.tsx 0/29 (0.00%) 💔
projects/packages/backup/src/dashboard/components/backup-detail/index.tsx 0/9 (0.00%) 💔
projects/packages/backup/src/dashboard/components/dashboard-layout/index.tsx 0/2 (0.00%) 💔
projects/packages/backup/src/dashboard/components/dev-mode-banner/index.tsx 0/4 (0.00%) 💔

Full summary · PHP report · JS report

If appropriate, add one of these labels to override the failing coverage check: Covered by non-unit tests Use to ignore the Code coverage requirement check when E2Es or other non-unit tests cover the code Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR I don't care about code coverage for this PR Use this label to ignore the check for insufficient code coveage.

@dhasilva dhasilva force-pushed the worktree-add+backup-modernization-ui branch 8 times, most recently from 8687036 to 7ec9053 Compare May 16, 2026 00:07
dhasilva and others added 10 commits May 15, 2026 23:10
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>
@dhasilva dhasilva force-pushed the worktree-add+backup-modernization-ui branch from 4f576f4 to 671bf53 Compare May 16, 2026 02:10
dhasilva and others added 2 commits May 15, 2026 23:27
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>
@dhasilva dhasilva marked this pull request as ready for review May 16, 2026 03:10
@dhasilva dhasilva added [Status] Needs Review This PR is ready for review. and removed [Status] In Progress labels May 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Backup [Plugin] Backup A plugin that allows users to save every change and get back online quickly with one-click restores. [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Status] Needs Review This PR is ready for review. [Tests] Includes Tests

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant