Staging Sites Redesign: Add information component on staging site management move

[ivan-ottinger]

Resolves DOTDEV-182

Proposed Changes

• add temporary information component describing staging site management move

design in Figma: ASqz3fW9Go9m5bHL2XiuUR-fi-724_136351

Why are these changes being made?

DOTDEV-182

Testing Instructions

1. Check out the PR branch and build the app with yarn start (or use Calypso Live).
2. Ensure the hosting/staging-sites-redesign feature flag is enabled (by using ?flags=hosting/staging-sites-redesign query parameter).
3. Head over to the /sites dashboard and select an Atomic test site with a staging site.
4. Click on the Staging site tab. Instead of staging site management buttons a new information tab content should be rendered (as can be seen in the screenshot above). The content should be clear and make sense.
5. The same content should be rendered for staging and production site.
6. Content should render correctly on mobile and RTL as well.

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 tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• 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 UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• 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-149984

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

Sections (~1677 bytes added 📈 [gzipped])

name          parsed_size           gzip_size
staging-site      +5270 B  (+0.4%)    +1677 B  (+0.4%)

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

• help-center
• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/staging-site-management-move-info on your sandbox.

[epeicher]

Thanks Ivan! I have tested it, and it works as expected. I can see the new page displayed and it behaves as expected at different screen sizes and in mobile. LGTM! 🚢

Staging	Production	RTL

[a8ci18n]

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

Some locales (Brazilian Portuguese, Hebrew) 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 @ivan-ottinger for including a screenshot in the description! This is really helpful for our translators.