Site migration: add View Site button to homepage banner

[andfinally]

Changes proposed in this Pull Request

• Adds a View Site button to the banner we show at the top of the Customer Home on a site which has been migrated to in the last two days. (Related PR)

Testing instructions

• Apply the PR and run Calypso locally, or use calypso.live (for the latter, add ?flags=tools/migrate to the end of the URL to enable the feature flag).
• Do a migration: go to the import section of a Simple site, enter the URL of a Jetpack site and follow the steps you're presented with. (If you're migrating to a site you've migrated to whose done status hasn't been cleared yet, you may need to reset the migration first with a request to the reset-migration endpoint.)
• When the migration finishes you should be redirected to My Home, unless there was an error.
• The "Your site has been imported!" banner at the top of My Home should include a "View Site" button.

[matticbot]

Test live: https://calypso.live/?branch=update/migration__view-site

[andfinally]

@danhauk Customising the checklist on My Home turned out to be tricky – it wasn't obvious how I could adapt it to show a special checklist for our situation, and we don't currently show a checklist for Atomic sites anyway. So I've gone with this as a workaround.

[matticbot]

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

Sections (~4 bytes added 📈 [gzipped])

name  parsed_size           gzip_size
home        +42 B  (+0.0%)       +4 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.

[danhauk]

Thanks @andfinally. Let's hold off on trying to get a customized checklist working as we're re-evaluating the usefulness of leaning on a checklist for everything.

Rather than creating a custom banner like this, could we utilize the existing pattern established with the "Your site is launched" banner? Keeping the page header with "My Home" and the View Site button. That also helps with maintenance going forward, not having the custom styles for this one specific banner and button.

[dezzie]

👋 @andfinally! Backing up @danhauk on keeping the View Site button and the congratulatory banner separate.

Thanks for attempting the custom checklist too though, and for reminding us of that limitation pertaining to atomic sites. Seems like this is a mutually-beneficial work-around!

I haven't seen the Go Mobile card show up like that before. Normally it's stacked underneath all the other content on the right-hand side. Unless this behavior is related to this PR, I'm happy with all the work here.

[dezzie]

Check out my last comment where I had a question I think is unrelated, I'm otherwise good!

[andfinally]

Thanks @danhauk and @dezzie, now updated to use the Launched layout.

[andfinally]

Thanks for checking it out! I haven't moved Go Mobile in this PR – I believe that new position is intentional. I found this comment in the code:

"Go Mobile" has the highest priority placement when viewed in smaller viewports, so folks can see it on their phone without needing to scroll.

[sirreal]

#38356 migrated this to use webpack file loader. The static image was temporarily preserved to prevent 404s, but please avoid it in the future.

Fix in #39861