WOOA7S-2037: Premium Analytics: Share one drawer shell across the page options panels

[Nikschavan]

Part of WOOA7S-2037

Proposed changes

• The page options menu is getting a second drawer: Usage (WOOA7S-2037) opens from the same menu as Settings (WOOA7S-1769: Premium Analytics: Add a Stats settings drawer to the page options menu #52870), and the design gives both the same shell, the same group headings and cards, and the same offset below the admin bar. If the Usage drawer copied that shell from SettingsDrawer, the two would drift apart the first time one of them changes.
• PageDrawer now holds what every drawer of this menu shares: the drawer root that slides in from the end of the page, the large size, the offset below the admin bar, the header with its title and close button, and the rule that the drawer stays open while it is busy (a save in progress). DrawerGroup is the titled card that was SettingsGroup. The Settings drawer keeps only its form, its footer, and its save logic.
• The query provider moves from the Settings drawer to the page options menu, around every drawer it opens. The menu renders in the page header, outside the widgets' provider, and a drawer's busy state comes from a query hook that has to run inside it.
• Nothing changes for the reader. This PR is stacked on WOOA7S-1769: Premium Analytics: Add a Stats settings drawer to the page options menu #52870 and should merge after it.

Related product discussion/links

• WOOA7S-2037
• WOOA7S-1769: Premium Analytics: Add a Stats settings drawer to the page options menu #52870

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

No.

Testing instructions

Use a site with this branch and the Stats v2 preview switched on: a Jurassic Ninja site with the branch synced, or the Jetpack Beta Tester plugin pointed at this branch.

• Go to Stats v2, open the page options menu (the three dots at the top right) and pick Settings. The drawer slides in from the right below the admin bar and looks the same as on WOOA7S-1769: Premium Analytics: Add a Stats settings drawer to the page options menu #52870.
• Change a setting and click Save. While it saves, Escape and the close button do not close the drawer. After the save, the "Settings saved." snackbar shows and the drawer closes.
• Open /wp-admin/admin.php?page=jetpack-premium-analytics-wp-admin&p=%2F%3Fsettings%3D1. The drawer opens on load, and closing it removes settings=1 from the URL.

I checked the Settings drawer on my local site against #52870, and it looks and behaves the same.

[github-actions]

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), and enable the wooa7s-2037-page-drawer-refactor branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack wooa7s-2037-page-drawer-refactor

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]

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!

[jp-launch-control]

Code Coverage Summary

No summary data is available for parent commit ace8e6e, 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 ace8e6e is available.

Full summary · PHP report · JS report