Replace overview when site is with a pending migration #95497

renatho · 2024-10-17T20:44:23Z

Proposed Changes

Extract some components from the "Hosting Features" tab, so we can reuse it.
It customizes the Sites overview with a button to continue the migration when it's pending.
The button contains a ref as hosting-migration-overview, so we can identify when the user is coming from this page.

This PR Doesn't Include

Disable other tabs from the menu.
Update the header when navigating to the site, similar to the changes we have in the listing.

@donnapep, do you think it's fine to deploy it as it is and implement these other parts in other PRs? I think one issue would be fine for both changes. I'll wait for your answer to then create the new issue, otherwise, I'll continue working on this one.

Why are these changes being made?

We want to offer a way for the users to continue their migration if they stopped in the middle.

Testing Instructions

If Create pending sticker when loading the "how to migrate" step #95413 wasn't merged yet, merge it into this branch to make tests more real and easier.
Navigate to the flow /setup/migration.
Navigate until the "How to migrate" step.
Navigate to /sites.
Click on the site, and click on "Start your migration".
Make sure you navigate back to where you were in the flow.
Click on the "Do it for me" option.
Navigate again to the /sites and click on "Start your migration".
Make sure you navigate back to your choice.
Return one step and choose the "Do it myself".
Navigate to the /sites.
Check that you won't see the button because it changes quickly to the "started" status that will be implemented as part of Post-purchase Migration Experience: Handle selecting a DIFM site in the Sites dashboard that has started migration #95383.
Now repeat the tests using the flow /setup/hosted-site-migration and make sure it works properly.

Screenshots

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 · 2024-10-17T20:44:37Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

renatho · 2024-10-17T20:46:28Z

client/hosting/hosting-features/components/hosting-features.tsx

 		);
 	}

 	return (
 		<div className="hosting-features">
-			<div className="hosting-features__hero">
+			<HostingHero>


Components were extracted so that we could reuse them.

matticbot · 2024-10-17T20:53:13Z

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

App Entrypoints (~160 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
entry-stepper       +499 B  (+0.0%)     +160 B  (+0.0%)
entry-main          +499 B  (+0.0%)     +160 B  (+0.0%)
entry-login         +283 B  (+0.0%)     +118 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~1945 bytes removed 📉 [gzipped])

name                parsed_size           gzip_size
hosting                 +2917 B  (+0.2%)    +1297 B  (+0.3%)
hosting-features         +242 B  (+0.0%)     +199 B  (+0.1%)
site-monitoring          +133 B  (+0.0%)      +45 B  (+0.0%)
site-logs                +133 B  (+0.0%)      +45 B  (+0.0%)
settings                 +133 B  (+0.0%)      +50 B  (+0.0%)
github-deployments       +133 B  (+0.0%)      +45 B  (+0.0%)
staging-site              +95 B  (+0.0%)      +17 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.

Async-loaded Components (~48 bytes added 📈 [gzipped])

name                                       parsed_size           gzip_size
async-load-calypso-layout-command-palette       +133 B  (+0.1%)      +48 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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.

renatho · 2024-10-18T21:31:04Z

@donnapep, do you think it's fine to deploy it as it is and implement these other parts in other PRs? I think one issue would be fine for both changes. I'll wait for your answer to then create the new issue, otherwise, I'll continue working on this one.

I added the "[Status] String Freeze" because we have many new texts, so we'll delay a little to merge this anyway.

renatho · 2024-10-18T21:33:12Z

client/hosting/sites/components/dotcom-style.scss

@@ -473,6 +473,7 @@
 			margin-top: 0;
 			margin-left: 0;
 			margin-right: 0;
+			margin-bottom: auto;


This fixes the spacing at the bottom of the tabs.

Without this, it wasn't respecting the padding.

a8ci18n · 2024-10-18T22:23:48Z

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

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 @renatho for including a screenshot in the description! This is really helpful for our translators.

m1r0

Looks good and works as described! Thanks for splitting those components.

I've added one small non-blocker suggestion.

client/sites-dashboard/test/utils.js

donnapep · 2024-10-21T16:12:40Z

@renatho Could you add some additional context or screen shots of what these mean? It's a bit unclear to me.

Disable other tabs from the menu.
Update the header when navigating to the site, similar to the changes we have in the listing.

renatho · 2024-10-21T17:12:01Z

@renatho Could you add some additional context or screen shots of what these mean? It's a bit unclear to me.

@donnapep Sure! I was referring to these parts (screenshot from the design):

matticbot · 2024-10-21T17:21:36Z

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 add/site-overview-pending-migration on your sandbox.

a8ci18n · 2024-10-22T14:29:41Z

Translation for this Pull Request has now been finished.

donnapep · 2024-10-22T17:04:25Z

@renatho Thank, I missed those subtleties. I can create an issue for adding the status to the header.

@fditrapani Can you confirm that we should disable the Hosting settings tab for pending / started migrations?

fditrapani · 2024-10-22T17:42:09Z

Thanks for the ping. This looks good from the screenshots. We had some back and forth about this with Michael. I figured it made sense to keep it disabled so you can stay focused on starting your migration. I can see the other side of it that people might want to poke around so I can be convinced otherwise. What do you all think?

Imran92 · 2024-10-22T19:15:28Z

client/hosting/overview/components/migration-overview.tsx

+		if ( isFreePlan ) {
+			// For the flows where the checkout is after the choice.
+			switch ( migrationType ) {
+				case 'diy':
+					continueMigrationUrl = addQueryArgs(
+						{
+							...baseQueryArgs,
+							destination: 'upgrade',
+							how: 'myself',
+						},
+						'/setup/site-migration/site-migration-upgrade-plan'
+					);
+					break;
+				case 'difm':
+					continueMigrationUrl = addQueryArgs(
+						{
+							...baseQueryArgs,
+							destination: 'upgrade',
+							how: 'difm',
+						},
+						'/setup/site-migration/site-migration-upgrade-plan'
+					);
+					break;
+				default:
+					continueMigrationUrl = addQueryArgs(
+						baseQueryArgs,
+						'/setup/site-migration/site-migration-how-to-migrate'
+					);
+			}


Just a little concern, as we're only checking if the site is on a free plan or not, in case the site is on a Personal or Premium plan, will it send the user to the credentials or how-to-migrate step instead of the pre-checkout step?

Hmm!! Good point, @Imran92! I was thinking that in our flows users wouldn't be able to pick a Personal or Premium plan and then try to migrate, but after you said, I tested it and I could do it through the /start, buying the plan (Personal or Premium), select the intent to migrate and use the flow.

I'll update it to a different check.

Updated the check to match what we check in the flows to see if we'll redirect the user to the upgrade plan step or not. Now it makes more sense! Thank you for reviewing and catching this!

I also took the opportunity to refactor the duplicate code.

3887d73 2da505c

@renatho can you update the unit tests as well?

Oops! Fixed here: e5d856e

donnapep · 2024-10-23T14:16:10Z

I figured it made sense to keep it disabled so you can stay focused on starting your migration.

I'd agree with this logic. Makes sense to keep them focused on migrating. I'll update the issue to include this.

renatho · 2024-10-23T15:11:48Z

@m1r0 and @Imran92, since we had some iterations after the approval, I'll wait for a new approval, okay?

Imran92 · 2024-10-23T15:30:44Z

client/hosting/overview/components/migration-overview.tsx

+				case 'diy':
+					continueMigrationUrl = addQueryArgs(
+						baseQueryArgs,
+						'/setup/migration/migration-how-to-migrate'


According to the issue, in case of migration-pending-diy sticker, the user should be taken to the site-migration-instructions step. Looks like this here is taking us to the migration-how-to-migrate step. In case it's not intentional, should we fix it?

Good catch, @Imran92! Fixed in 2de7505

Imran92

I'm seeing a weird issue, but not sure why it's happening.

I had a site in a pending state. In the overview, section worked as expected, showing me correct button and everything relevant.

Then I changed the sticker to 'migration-completed-*'. But even after refreshing and hard-refreshing the page section many times, I still see the the migration-pending overview page.

Screen.Recording.2024-10-24.at.8.42.34.PM.mov

But apart from that, LGTM. So I'm approving. Feel free to look into the issue either separately or here.

Imran92

LGTM 👍 Cache gets cleared after a couple of minutes

Since the parent has an overflow hidden and a padding bottom it wasn't being respected.

When we implement the started status, we can also use the MigrationOverview, and remove this conditional.

Similar to the other mocks in these tests.

renatho · 2024-10-25T14:15:11Z

I just rebased to fix a conflict, so I'm doing a sanity test, and I'll wait for the tests and merge it.

renatho self-assigned this Oct 17, 2024

renatho linked an issue Oct 17, 2024 that may be closed by this pull request

Post-purchase Migration Experience: Handle selecting a site in the Sites dashboard that is pending migration #95380

Closed

renatho linked an issue Oct 17, 2024 that may be closed by this pull request

Post-purchase Migration Experience: Handle selecting a DIFM site in the Sites dashboard that is pending migration #95379

Closed

renatho commented Oct 17, 2024

View reviewed changes

renatho changed the title ~~Add/site overview pending migration~~ Replace overview when site is with a pending migration Oct 17, 2024

renatho force-pushed the add/site-overview-pending-migration branch from a18a2c4 to 2150032 Compare October 18, 2024 21:10

renatho added the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Oct 18, 2024

renatho marked this pull request as ready for review October 18, 2024 21:31

renatho requested a review from a team October 18, 2024 21:31

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 18, 2024

renatho commented Oct 18, 2024

View reviewed changes

m1r0 approved these changes Oct 21, 2024

View reviewed changes

client/sites-dashboard/test/utils.js Outdated Show resolved Hide resolved

renatho mentioned this pull request Oct 22, 2024

Post-purchase Migration Experience: Handle selecting a DIFM site in the Sites dashboard that has started migration #95383

Closed

Imran92 reviewed Oct 22, 2024

View reviewed changes

renatho requested review from m1r0 and Imran92 October 23, 2024 15:10

Imran92 reviewed Oct 23, 2024

View reviewed changes

Imran92 reviewed Oct 24, 2024

View reviewed changes

renatho force-pushed the add/site-overview-pending-migration branch from 3b1a5e6 to 91bfc81 Compare October 24, 2024 22:57

Imran92 approved these changes Oct 25, 2024

View reviewed changes

renatho added 21 commits October 25, 2024 11:11

Fix bottom spacing in the content

8e6a822

Since the parent has an overflow hidden and a padding bottom it wasn't being respected.

Extract hero components

5b6d58e

Move type to follow the same standard of the others

c245302

Add key to the loop

4ecbb13

Extract grid component

884d32a

Add functions to get migration status and migration type

80ddebc

Tweak styles for when it does not have a link

aaa9573

Add migration overview variation

a9d4347

Temporarily add check for pending

8928500

When we implement the started status, we can also use the MigrationOverview, and remove this conditional.

Redirect users to the proper step

2ddfa20

Redirect users to the proper step when the user didn't buy a plan yet

f420907

Add query string to trigger the calypso_signup_start event

762a53d

Add tests for the links

838443e

Join imports

f96b9a6

Extract canInstallPlugins logic

1908e81

Improve check to match what is checked in the flows

d3c7684

Fix tests

5d7373b

Fix type to get from relative path

ac24816

Fix DYI URL

61c8da1

Remove not used conditional

fea5c28

Update tests to also mock the canInstallPlugins

2e90338

Similar to the other mocks in these tests.

renatho force-pushed the add/site-overview-pending-migration branch from 91bfc81 to 2e90338 Compare October 25, 2024 14:14

Remove missed import after rebase

8f4c95a

renatho merged commit 06d23d9 into trunk Oct 25, 2024
11 checks passed

renatho deleted the add/site-overview-pending-migration branch October 25, 2024 14:34

github-actions bot removed [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Oct 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace overview when site is with a pending migration #95497

Replace overview when site is with a pending migration #95497

renatho commented Oct 17, 2024 •

edited

Loading

github-actions bot commented Oct 17, 2024 •

edited by matticbot

Loading

renatho Oct 17, 2024

matticbot commented Oct 17, 2024 •

edited

Loading

renatho commented Oct 18, 2024

renatho Oct 18, 2024

a8ci18n commented Oct 18, 2024

m1r0 left a comment

donnapep commented Oct 21, 2024

renatho commented Oct 21, 2024 •

edited

Loading

matticbot commented Oct 21, 2024

a8ci18n commented Oct 22, 2024

donnapep commented Oct 22, 2024

fditrapani commented Oct 22, 2024

Imran92 Oct 22, 2024

renatho Oct 22, 2024

renatho Oct 22, 2024 •

edited

Loading

m1r0 Oct 23, 2024

renatho Oct 23, 2024

donnapep commented Oct 23, 2024

renatho commented Oct 23, 2024

Imran92 Oct 23, 2024 •

edited

Loading

renatho Oct 23, 2024

Imran92 left a comment

Imran92 left a comment

renatho commented Oct 25, 2024

Replace overview when site is with a pending migration #95497

Replace overview when site is with a pending migration #95497

Conversation

renatho commented Oct 17, 2024 • edited Loading

Proposed Changes

This PR Doesn't Include

Why are these changes being made?

Testing Instructions

Screenshots

Pre-merge Checklist

github-actions bot commented Oct 17, 2024 • edited by matticbot Loading

renatho Oct 17, 2024

Choose a reason for hiding this comment

matticbot commented Oct 17, 2024 • edited Loading

renatho commented Oct 18, 2024

renatho Oct 18, 2024

Choose a reason for hiding this comment

a8ci18n commented Oct 18, 2024

m1r0 left a comment

Choose a reason for hiding this comment

donnapep commented Oct 21, 2024

renatho commented Oct 21, 2024 • edited Loading

matticbot commented Oct 21, 2024

a8ci18n commented Oct 22, 2024

donnapep commented Oct 22, 2024

fditrapani commented Oct 22, 2024

Imran92 Oct 22, 2024

Choose a reason for hiding this comment

renatho Oct 22, 2024

Choose a reason for hiding this comment

renatho Oct 22, 2024 • edited Loading

Choose a reason for hiding this comment

m1r0 Oct 23, 2024

Choose a reason for hiding this comment

renatho Oct 23, 2024

Choose a reason for hiding this comment

donnapep commented Oct 23, 2024

renatho commented Oct 23, 2024

Imran92 Oct 23, 2024 • edited Loading

Choose a reason for hiding this comment

renatho Oct 23, 2024

Choose a reason for hiding this comment

Imran92 left a comment

Choose a reason for hiding this comment

Imran92 left a comment

Choose a reason for hiding this comment

renatho commented Oct 25, 2024

renatho commented Oct 17, 2024 •

edited

Loading

github-actions bot commented Oct 17, 2024 •

edited by matticbot

Loading

matticbot commented Oct 17, 2024 •

edited

Loading

renatho commented Oct 21, 2024 •

edited

Loading

renatho Oct 22, 2024 •

edited

Loading

Imran92 Oct 23, 2024 •

edited

Loading