Backup: wire the modernized dashboard to real REST + Gates by dhasilva · Pull Request #48859 · Automattic/jetpack

dhasilva · 2026-05-15T14:28:43Z

Fixes # n/a

Proposed changes

Stacks on PR Backup: modernized dashboard UI — Overview, Restore, Download (mocked) #48853 (Phase 1 — modernized Backup UI with mocked data). Will be rebased onto trunk after Backup: modernized dashboard UI — Overview, Restore, Download (mocked) #48853 merges.
Add five PHP REST bridges under projects/packages/backup/src/rest/ (Capabilities, Activity_Log, File_Browser, Download, Restore) registered by a single Rest_Controller only when the rsm_jetpack_ui_modernization_backup filter is on. All proxy WPCOM via Client::wpcom_json_api_request_as_user; Restore signs as_user against the rest/v1 activity-log endpoint and ports the blog-token-rejection block comment from the abandoned branch's commit d3f8b8da7e so the next developer doesn't repeat the experiment.
Add the <Gates> capability/connection gate inside <DashboardLayout> — decision tree is loading → not-connected → secondary-admin → no-plan → children, with three local fallback screens. useConnection reads from window.JP_CONNECTION_INITIAL_STATE directly (rendered inline by Jetpack_Backup::render_connection_initial_state on admin_print_scripts priority 1).
Add a TanStack Query 5 data layer: module-scope queryClient + keys table; data/api/_helpers.ts with apiPath, toIntRewindId, ApiError, apiCall; one fetcher file per bridge; a data/normalize/activity-log.ts adapter mapping WPCOM's rewindable-activity shape onto the Phase 1 ActivityItem discriminated union.
Replace every Phase 1 useMock* hook with a real React Query hook, identical return shape, one-import-line swap per screen. The hooks are: useActivityLog, useFileTree, useFileContents, usePathInfo, useDownload, useRestore, useCapabilities, useConnection.
Drop the ?jpb-mock=1 developer affordance — delete use-is-mock-mode.ts, dev-mode-banner/, all four mock hooks, and the three fixture files.
Tests: Jest covers toIntRewindId (3 cases) + normalize/activity-log.ts (6 cases); phpunit per bridge (capabilities ×2, activity-log ×2, file-browser ×4, download ×3, restore ×3 — 14 total new assertions). Run from the package: pnpm run build && pnpm run typecheck && pnpm exec eslint src/dashboard && pnpm exec jest src/dashboard/data && composer phpunit.

Related product discussion/links

Umbrella issue Backup: modernize the wp-admin overview into a unified product (seven-PR sequence) #48582 (modernization track).
Builds on PR1 (Backup: add empty wp-build dashboard scaffold behind feature flag #48583, scaffold), PR2 (Backup: render the modernized dashboard inside a Page chassis #48621, Page chassis), and PR3 (Backup: modernized dashboard UI — Overview, Restore, Download (mocked) #48853, UI with mocked data — this PR's base).

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

No.

Testing instructions

Check out this branch and run pnpm install from the repo root, then composer install in projects/packages/backup/.
Enable the modernization filter locally via the same mu-plugin used for PR Backup: modernized dashboard UI — Overview, Restore, Download (mocked) #48853:
```
<?php
add_filter( 'rsm_jetpack_ui_modernization_backup', '__return_true' );
```
Visit wp-admin → Jetpack → VaultPress Backup.
On a real backup-plan'd site: confirm the activity list populates from WPCOM, clicking a backup row loads the file browser, expanding a folder issues a real /jetpack/v4/rewind/backup/ls call, clicking a text file loads the path-info and shows a monospace preview (≤ 64 KB).
On a site WITHOUT a backup plan: confirm <Gates> renders the "no plan" fallback with a CTA to jetpack.com/upgrade/backup/.
On a disconnected site: confirm <Gates> renders the "Connect Jetpack" fallback.
Click "Download backup" → submit → progress → success surfaces the signed download URL. Click "Restore to this point" → submit → progress polls every 1.5 s → success or error notice.
Toggle the modernization filter OFF (rename the mu-plugin to .off, reload). Confirm the legacy Backup admin renders unchanged.

🤖 Generated with Claude Code

Adds the @tanstack/react-query infrastructure with no behavior change. DashboardLayout now wraps children in a QueryClientProvider so every screen in every route shares a module-scope singleton client — caches survive navigation between routes. Phase 2 setup commit. Capability gates and real REST hooks follow. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Introduces the per-feature REST bridges pattern with a thin Rest_Controller that registers routes only when the modernization filter is on. Capabilities_Bridge proxies /sites/{id}/rewind to expose hasBackupPlan + planSlug for the React layer. Gates mounts inside DashboardLayout between the QueryClientProvider and the body slot. Top-to-bottom: loading → not-connected → secondary-admin → no-plan → children. All three routes inherit gating for free. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Replaces useMockActivityLog with useActivityLog backed by an apiFetch -> bridge -> WPCOM /sites/{id}/activity/rewindable chain. A small normalize/activity-log.ts maps WPCOM's rewindable-activity shape (gridicon, content.text, object.backup_stats) onto the ActivityItem discriminated union the UI already consumes. Fixture activity-log.ts is deleted; findActivityById's three callers swap to: getCachedActivityById (Overview, reads from React Query cache) for the selected-row right-pane, and a direct rewindId -> Unix timestamp derivation for Restore and Download (the only field they used was the publishedAt timestamp anyway). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Adds the File_Browser_Bridge (ls + path-info + file-content), each proxying WPCOM /sites/{id}/rewind/backup/* via as_user. The file-content endpoint resolves the signed stream URL server-side and caps the returned body at 64 KB so previews can't balloon the REST response. React side: useFileTree replaces useMockFileTree, useFileContents replaces the static findContents() fixture lookup. The rewindId prop on FileBrowser and FileInfoCard is now actually consumed and threaded down to the bridge call. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

useDownload replaces useMockDownload, driving the same idle → submitting → progress → success | error state machine off a TanStack useMutation (initiate) + polled useQuery (status). The bridge proxies WPCOM's /rewind/backups/{rewindId}/prepare-download and /rewind/backups/{rewindId}/downloads/{id} endpoints. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

useRestore replaces useMockRestore, driving the same state machine off a TanStack useMutation (initiate) + polled useQuery (status). The bridge proxies WPCOM's v1 /activity-log/{site}/rewind/to/{rewindId} and /rewind/{restoreId}/restore-status endpoints, with the verbatim comment from `d3f8b8da7e` explaining why the rewind endpoint must sign as_user (blog-token auth is rejected by WPCOM with "That API call is not allowed for this account"). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Removes the last mock-mode artifacts: useIsMockMode, the dev banner component, and the <DevModeBanner /> mount inside DashboardLayout. The modernized Backup dashboard now only renders real data via the jetpack/v4/* bridges, with <Gates> handling the not-connected and no-plan fallbacks. This completes Phase 2 of the Backup modernization. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Three follow-ups from the final code review: - Wrap the bare 'Download failed.' / 'Restore failed.' fallbacks in __() with the jetpack-backup-pkg textdomain (the strings flow into <Notice> user-facing copy). - Route fetchCapabilities through apiCall + apiPath so a 4xx from /jetpack/v4/site/capabilities throws an ApiError with `code`, matching every other fetcher in the data layer. - Update Restore/Download screen JSDoc — "mocked state machine" was true in Phase 1; Phase 2 made it real. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

github-actions · 2026-05-15T14:29:33Z

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-data-layer branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack worktree-add+backup-modernization-data-layer

bin/jetpack-downloader test jetpack-mu-wpcom-plugin worktree-add+backup-modernization-data-layer

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 · 2026-05-15T14:29:48Z

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:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
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 · 2026-05-15T14:47:23Z

Code Coverage Summary

No summary data is available for parent commit eaed666, so cannot calculate coverage changes. 😴

If that commit is a feature branch rather than a trunk commit, this is expected. Otherwise, this should be updated once coverage for eaed666 is available.

Full summary · PHP report · JS report

dhasilva and others added 8 commits May 15, 2026 03:47

dhasilva added the [Status] In Progress label May 15, 2026

dhasilva self-assigned this May 15, 2026

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/ [Tests] Includes Tests labels May 15, 2026

dhasilva force-pushed the worktree-add+backup-modernization-ui branch 2 times, most recently from 398c7a4 to 5e780c0 Compare May 15, 2026 22:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Backup: wire the modernized dashboard to real REST + Gates#48859

Backup: wire the modernized dashboard to real REST + Gates#48859
dhasilva wants to merge 8 commits into
worktree-add+backup-modernization-uifrom
worktree-add+backup-modernization-data-layer

dhasilva commented May 15, 2026

Uh oh!

github-actions Bot commented May 15, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 15, 2026 •

edited

Loading

Uh oh!

jp-launch-control Bot commented May 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

dhasilva commented May 15, 2026

Proposed changes

Related product discussion/links

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

Testing instructions

Uh oh!

github-actions Bot commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control Bot commented May 15, 2026

Code Coverage Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

github-actions Bot commented May 15, 2026 •

edited

Loading

github-actions Bot commented May 15, 2026 •

edited

Loading