Untangling: apply new design to Settings -> Administration -> Reset your site

[fushar]

Fixes https://github.com/Automattic/dotcom-forge/issues/9861

Proposed Changes

This PR applies the global design layout to the "Reset your site" flow:

Note

Highlights information that users should take into account, even when skimming.

This also updates the layout in production, i.e. when the flag is not enabled yet. I think it's fine, because the flow is isolated so overall it's still consistent on its own. I don't think it is worth it to further complicate the code to retain the old layout...

Why are these changes being made?

pbxlJb-6ye-p2

Testing Instructions

1. Go to /sites
2. Click a site
3. Go to Settings -> Administration
4. Click Reset your site button
5. Verify that you can complete the flow.
6. Regression: go to /settings/general/:slug, click Reset your site, at the bottom, and verify you can still complete the flow.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-125000

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-125000&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-125000&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~17 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
site-settings       +236 B  (+0.0%)      +19 B  (+0.0%)
settings            +232 B  (+0.0%)      +22 B  (+0.0%)
staging-site        +142 B  (+0.0%)      +25 B  (+0.0%)
hosting             +142 B  (+0.0%)      +25 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug untangling/reset-site on your sandbox.

[taipeicoder]

LGTM 👍
Some layout issues on small screens:

Also, if the site is Classic view, we still redirect them to Calypso pages. For instance:

Same for the links to posts, pages, etc. We can create an issue for this and follow it up.

[fushar]

Also, if the site is Classic view, we still redirect them to Calypso pages.

I noticed that too, but it's existing behavior. The more I work on these pages, the more I discovered unmaintained "broken" links 😭

[fushar]

Some layout issues on small screens:

Thanks for catching them, fixed & merging...

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17008434

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @fushar for including a screenshot in the description! This is really helpful for our translators.

[fushar]

Also, if the site is Classic view, we still redirect them to Calypso pages. For instance:
Same for the links to posts, pages, etc. We can create an issue for this and follow it up.

Created:

• Reset/Delete site: The links should go to wp-admin for Classic-view sites #96531

[Aurorum]

Hi all, just wanted to check whether it was intentional not to feature-flag this change. I've just happened to stumble across the Site Reset and Delete Site pages, and it feels very out-of-place on production right now.

The card doesn't have sufficient width, and the button collapses onto the next line when I enter my site address. Wonder if that's a bug worth fixing? Thanks!

[a8ci18n]

Translation for this Pull Request has now been finished.

[fushar]

@Aurorum Thanks for noticing, it's fixed here: #96711. Now the content is horizontally centered (as it was before the regression).