Protect Dashboard: Add Scan, Monitor, Firewall and Login protection sections

[enejb]

Fixes #

Proposed changes

Stacked on #53182, which adds the flag-gated protect-dashboard module and its blank page. Please review that PR first.

• Fill the Protect dashboard (admin.php?page=jetpack-protect) with four sections. Each has an icon, a short description, a status badge and a link to manage it:
  • Scan: "Active" when the site's plan includes Scan, using My Jetpack's Scan::has_paid_plan_for_product(), which is cached in a transient; otherwise "Upgrade". It links to the scan results, or to My Jetpack's Get Scan flow.
  • Monitor: on / off / unavailable from the monitor module. It links to Jetpack Settings → Security.
  • Firewall: the same, from the waf module.
  • Login protection: the same, from the protect (Brute Force Protection) module.
• Add the Jetpack logo to the page header with Page's visual slot, the Protect plugin's tagline as the subtitle, and JetpackFooter at the bottom, matching the Backup and Forms wp-build dashboards.
• PHP prints the section state as window.jetpackProtectDashboard just before the page renders.
• The sections are a two-column grid on wide screens and a single column below 782px.

Related product discussion/links

• Protect Dashboard: Add a feature-flagged module that takes over the Protect page #53182 (base)
• Jetpack: Explore a Protect dashboard module #52777, the exploration spike

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

No.

Testing instructions

1. Build and sync the Jetpack plugin to a connected test site, e.g. a Jurassic Ninja site with JETPACK_AUTOLOAD_DEV set.
2. Turn on the flag (wp companion feature-flag enable jetpack-protect-dashboard, or the JN feature-flag UI), then run wp jetpack module activate protect-dashboard.
   • If WP-CLI says the module isn't valid right after a sync, clear the cached module list: wp eval 'Jetpack_Options::delete_option("available_modules");'.
3. Open Jetpack → Protect. The header should show the Jetpack logo, "Protect" and the tagline, with four sections below: Scan, Monitor, Firewall and Login protection.
4. On a site without a Scan plan, Scan should show Upgrade with a "Get Scan" link to My Jetpack.
5. Turn Monitor, the firewall (waf) and Brute Force Protection (protect) on and off in Jetpack → Settings → Security, or with wp jetpack module activate|deactivate. After a reload, each section's badge should follow: On with "Manage settings", or Off with "Turn on in Settings".
6. Narrow the window below 782px. The sections should stack in one column.

[github-actions]

Are you an Automattician? The PR will need to be tested on WordPress.com. This comment will be updated with testing instructions as soon the build is complete.

[github-actions]

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:

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]

Code Coverage Summary

Cannot generate coverage summary while tests are failing. 🤐

Please fix the tests, or re-run the Code coverage job if it was something being flaky.

Full summary · PHP report