Site Migration: Update migration instructions screen #88813

gabrielcaires · 2024-03-22T19:13:51Z

Related to #88588

Proposed Changes

Update the site migration instructions page to reflect the figma layout 5yhaC6umexdQLlLpCrCyEe-fi-2095_9011
Update the instructions
Automatically load the migration key without any user interaction
Show a different message when we can’t get the migration link
Add links directly to the related pages

More context: p1711029899474269-slack-C0Q664T29

Testing Instructions

SHORT VERSION:

Enable the feature toggle
Access /setup/site-migration/site-migration-instructions?from=[JN site]&siteSlug=[YOUR_WORDPRESS.COM site created by previous migrations]
Jump to the steps 10, 11 and 12.

LONG VERSION:

Go to the /start URL using the calypso.live instructions
Follow the flow until see the "Goals" page
Open the browser Web developer tools and copy and paste the following code sessionStorage.setItem('flags', "onboarding/new-migration-flow")
Type Enter
Reload the goals page
Select "Import or migrate content"
"Where will you import from?" set https://test-vanilla-wp.godaddy.test-wpcom-migrations.net/
Select "Everything (requires a Creator Plan)" on "What do you want to migrate?"
When you arrive at the "Ready to migrate your site?" follow the instructions using the page links and copying the migration key. Screenshot 1(a,b)
After following the instructions, refresh the page to see a screen variation. Screenshot 2(a,b)
Check again the instructions for the new version, using the links.

NOTE: The screen variation with the migration key is only shown the first time the user sees the screen, after a reload only the second variation is shown.

NOTE 2: If you want to reset the site state to see screen 1 again, you just need to open the URL([TARGET_SITE]/_cli) and run the command wp option delete wpcom_site_migration_migrate_guru_key_read to delete the site option we are using to not show again the migration key.

Screenshots

1a. Desktop - Migration key available

1.b Mobile - Migration key available

2a. Desktop - Migration key not available

2b. Mobile - Migration key not available

Interactions:

7itXHm.mp4

github-actions · 2024-03-22T19:14:04Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-03-22T19:17:49Z

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

gabrielcaires · 2024-03-22T20:01:52Z

@javierarce I added a video showing the animations and interactions but feel free to see the real screen.

gabrielcaires · 2024-03-22T20:03:53Z

@javierarce The show/hide eyes icon is different from the layout because there is a recommendation to use the wordpress/icons library

https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library

javierarce · 2024-03-25T09:33:09Z

@javierarce The show/hide eyes icon is different from the layout because there is a recommendation to use the wordpress/icons library

You are totally right, sorry about that, I'll update the icon in Figma.

Regarding the implementation of the design, it looks great, but if we made two little adjustments to the heights of the button and the input field, they'd look better. Could we make the height of the input field 44px and the height of the button 28px?

@michaelpick could you and Francisco review the copy of the instructions step (5yhaC6umexdQLlLpCrCyEe-fi-2095_9011)? I think I never showed them to you.

Here's the text:

Ready to migrate your site?
Follow these steps to get started.

Install and activate the Migrate Guru plugin on your existing site.

In the Migrate Guru plugin settings page, enter your email address and click Migrate.

When asked to select a destination host, pick “Automattic.”

Copy and paste the migration key below in the “Migrate Guru Migration Key” field and click Migrate.

And you are done! When the migration finishes, Migrate Guru will send you an email.

gabrielcaires · 2024-03-25T14:01:46Z

Regarding the implementation of the design, it looks great, but if we made two little adjustments to the heights of the button and the input field, they'd look better. Could we make the height of the input field 44px and the height of the button 28px?

@javierarce size updated!

I also prevented the component from automatically selecting the key when it is hidden.

...ng/stepper/declarative-flow/internals/steps-repository/site-migration-instructions/index.tsx

javierarce · 2024-03-26T08:35:37Z

@javierarce size updated!
I also prevented the component from automatically selecting the key when it is hidden.

Fantastic, much better, thanks!

javierarce · 2024-03-26T08:38:57Z

One last thing that I noted (but we can update this after we get the content review) is the use of italics. Since we are using quotes the italics are redundant.

daledupreez

I have some quick feedback from inspection.

...ng/stepper/declarative-flow/internals/steps-repository/site-migration-instructions/index.tsx

daledupreez · 2024-03-26T09:08:29Z

...ng/stepper/declarative-flow/internals/steps-repository/site-migration-instructions/index.tsx

+				{ isSuccess && migrationKey && (
+					<li>
+						{ translate(
+							'Copy and paste the migration key below in the {{em}}“Migrate Guru Migration Key”{{/em}} field and click {{strong}}Migrate{{/strong}}.',


Question: are the label and button CTA translated in the Blog Vault/Migrate Guru UI?
We run the risk of translating these terms when they are not translated in the underlying screen.

Good question!
I checked and saw they were not translating the CTAs, so I applied this change d22bc4d to protect then to be translated.

...ng/stepper/declarative-flow/internals/steps-repository/site-migration-instructions/index.tsx

Improve copy

gabrielcaires · 2024-03-26T10:18:17Z

One last thing that I noted (but we can update this after we get the content review) is the use of italics. Since we are using quotes the italics are redundant.\

@javierarce Sure! I removed the quotes here 9f9478c

Currently, the main Migrate Guru CTA are not translatable, so we want to protect the button and fields names to be translated from our translation team.

matticbot · 2024-03-26T11:42:40Z

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

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

wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/improve-site-migration-instructions-page on your sandbox.

andres-blanco · 2024-03-26T12:25:54Z

...ng/stepper/declarative-flow/internals/steps-repository/site-migration-instructions/index.tsx

+							{
+								components: {
+									migrationKeyField: (
+										<DoNotTranslateIt value="Migrate Guru Migration key" as="em" />


What's the reasoning behind adding a DoNotTranslateIt component?

maybe adding the markup in the input string directly and passing the Migrate Guru Migration key | Migrate strings as an arg is enough?

@andres-blanco
The idea is to express the intent the value should not be translated, especially considering we don't have any kind of automated test testing translations.

My concern is we can easily remove the args value just because the intent is not clear and we don't have a test suite testing translations.

ok, then my only comment is that it would be good to remove the markup from the DoNotTranslateIt element and keep it in the input string. That way is more readable, and also extendable (imagine if you want to do something like STRING).
But it's just a nitpick, not a blocker. Go with your gut :)

Good point; I tested, and we can still do it via {{strong}} {{migrationKeyField /}} {{/ strong }}. but I still agree with you because it blocks the translators to freely move the formatting position.
So, I update here 17eefe3

daledupreez

Overall, this is LGTM, though I do have some non-blocking feedback.

daledupreez · 2024-03-27T09:02:26Z

client/landing/stepper/hooks/use-site-migraiton-key.ts

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';


Nit: the filename has a typo. -migraiton- => -migration-

Fixed 694f4fc

daledupreez · 2024-03-27T09:05:46Z

client/landing/stepper/hooks/use-site-migraiton-key.ts

+	return useQuery( {
+		queryKey: [ 'site-migration-key', siteId ],
+		queryFn: () => getMigrationKey( siteId! ),
+		retry: false,
+		enabled: !! siteId,
+		select: ( data ) => ( { migrationKey: data?.migration_key } ),
+		refetchOnWindowFocus: false,
+	} );


Should we specify staleTime on the useQuery() call to allow the data to be kept in memory for a little while before we try to refetch? (reference)

I set 60 seconds as staleTime as we discussed on slack.
a8022e4

daledupreez · 2024-03-27T09:06:34Z

client/landing/stepper/hooks/use-site-migraiton-key.ts

+export const useSiteMigrationKey = ( siteId?: number ) => {
+	return useQuery( {
+		queryKey: [ 'site-migration-key', siteId ],
+		queryFn: () => getMigrationKey( siteId! ),


Is the ! intentional? If so, what does it do?!?

Yes, It is saying that typescript can assume the siteId will be available when the function is executed.
The enabled flag is already ensuring it.

The line above ensures that react-query only triggers the queryFn when the siteId is available.

enabled: !! siteId, `` `

daledupreez · 2024-03-27T09:09:07Z

client/landing/stepper/hooks/test/use-site-migration-key.tsx

+			.once()
+			.reply( 200, { migration_key: 'some-migration-key' } );
+
+		const { result } = renderHook( () => useSiteMigrationKey( 'some-site-id' ), { wrapper } );


Nit: the argument expects the siteId argument to be numeric, so we should likely test it with a number (or allow a site slug to be specified in the types).

Fixed here 67c80a1

We are with the typescript checking disabled on the test files on our pipeline😢 .

daledupreez · 2024-03-27T09:14:48Z

...ative-flow/internals/steps-repository/site-migration-instructions/show-hide-input/style.scss

+	max-width: 456px;
+	transition: all 0.2s;
+
+	&--hidden {


Nit: I have a strong personal preference for avoiding & as selector/text duplicator in CSS selectors because it makes it much harder to find the selector when debugging in an IDE.

While that may not seem like a common use case, every now and then we hit issues with CSS selectivity in Calypso as a result of duplicate selector names that are defined in different CSS bundles, and knowing where and how the rules were defined is relatively important.

Also, I find I need to think extra-hard to make sure I know what & actually represents, especially within patch diffs where the wrapping selector may not be visible.

Thanks for the context:
I removed b24b270 the usage of &

daledupreez · 2024-03-27T09:25:21Z

...ng/stepper/declarative-flow/internals/steps-repository/site-migration-instructions/index.tsx

 					{ translate(
-						'You will see a screen showing multiple hosting providers. Select {{em}}Automattic{{/em}} as the destination host.',
+						'Go to the {{a}}Migrate Guru page on your source site{{/a}}, enter your email address, and click {{strong}}{{migrateButton /}}{{/strong}}.',
 						{
 							components: {
-								em: <em />,
+								a: <a href={ getMigrateGuruPageURL( fromUrl ) } target="_blank" rel="noreferrer" />,
+								migrateButton: <DoNotTranslateIt value="Migrate" />,
+								strong: <strong />,
 							},
 						}
 					) }


I don't have a super-strong opinion on this, but I do think it would still be relatively easy and clear if we handle this with args and a comment. (We may need the comment anyway.) e.g.

Suggested change

{ translate(

'You will see a screen showing multiple hosting providers. Select {{em}}Automattic{{/em}} as the destination host.',

'Go to the {{a}}Migrate Guru page on your source site{{/a}}, enter your email address, and click {{strong}}{{migrateButton /}}{{/strong}}.',

{

components: {

em: ,

a: <a href={ getMigrateGuruPageURL( fromUrl ) } target="_blank" rel="noreferrer" />,

migrateButton: <DoNotTranslateIt value="Migrate" />,

strong: ,

},

}

) }

{ translate(

'Go to the {{a}}Migrate Guru page on your source site{{/a}}, enter your email address, and click {{strong}}%(migrate)s{{/strong}}.',

{

comment: 'Note that the migrate arg will always be "Migrate", as the Blog Vault UI is not translated',

args: {

migrate: 'Migrate',

},

components: {

a: <a href={ getMigrateGuruPageURL( fromUrl ) } target="_blank" rel="noreferrer" />,

strong: ,

},

}

) }

The feedback I received was that the translators sometimes don't read the comments.

Regarding the args, I explained my concern here.
#88813 (comment)

javierarce · 2024-03-27T09:55:22Z

@javierarce Sure! I removed the quotes here 9f9478c

Oh, I meant to remove the italics and leave the quotes. We don't italicize that type of text.

I've pinged Francisco to do a content review of the text. If possible, let's wait for it before we merge this PR.

javierarce · 2024-03-27T10:19:36Z

Ok, here are the corrections (1e1T4v-g_4Lu6Kv2uCRIRYGr7KAlqlv0hxcpTm34FWbA-gdoc):

Title: Ready to migrate your site?
Subtitle: Follow these steps

1. Install and activate the [Migrate Guru plugin] on your existing site.
2. Go to the [Migrate Guru page on your source site], enter your email address, and click **Migrate**.
3. When asked to select a destination host, pick ‘WordPress.com‘
4. Copy and paste the migration key below in the ‘Migrate Guru Migration Key‘ field and click **Migrate** once more.

And you are done! When the migration is ready, Migrate Guru will send you an email.

Title: Ready to migrate your site?
Subtitle: Follow these steps

1. Install and activate the [Migrate Guru plugin] on your existing site.
2. Go to the [Migrate Guru page on your source site], enter your email address, and click Migrate.
3. When asked to select a destination host, pick ‘WordPress.com‘
4. Head to the [Migrate Guru page on the new WordPress.com site] and copy the migration key. 
5. Paste the migration key on the ‘Migrate Guru Migration Key’ field of your existing site and click **Migrate** once more.

And you are done! When the migration is ready, Migrate Guru will send you an email.

gabrielcaires · 2024-03-27T10:44:37Z

@javierarce @daledupreez Due to some github bug I only could see your suggestions after I merged.
I am going to open a new PR to fix your comment.

* Add hook to get the site-migration-key * Add component to show/hide the migration key * Update layout * Add animation * Adjust migration key input size * Replace Automattic to WordPress.com * Remove quotes * Add log when we are showing the migration key fallback instructions Improve copy * Improve copy * Fix test * Protect the CTA to be translated Currently, the main Migrate Guru CTA are not translatable, so we want to protect the button and fields names to be translated from our translation team. * Fix typescript checking * Fix typescript checking * Remove tag from DoNotTranslateIt * Add missing strong tag * Fix unexpected scroll

gabrielcaires requested a review from a team March 22, 2024 19:54

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

gabrielcaires added the [Feature] Site Migration Features related to site migrations to WPcom label Mar 22, 2024

gabrielcaires marked this pull request as ready for review March 22, 2024 19:56

gabrielcaires changed the title ~~Update/improve site migration instructions page~~ Site Migration: Update migration instructions screen Mar 22, 2024

gabrielcaires self-assigned this Mar 22, 2024

gabrielcaires mentioned this pull request Mar 22, 2024

Site Migration: Consider adding direct link to migration plugin #88624

Closed

javierarce self-requested a review March 25, 2024 08:45

valterlorran reviewed Mar 26, 2024

View reviewed changes

...ng/stepper/declarative-flow/internals/steps-repository/site-migration-instructions/index.tsx Outdated Show resolved Hide resolved

daledupreez reviewed Mar 26, 2024

View reviewed changes

gabrielcaires requested review from a team as code owners March 26, 2024 10:13

gabrielcaires requested a review from chriskmnds March 26, 2024 10:13

gabrielcaires added 8 commits March 26, 2024 10:16

Add hook to get the site-migration-key

640ca1f

Add component to show/hide the migration key

bf1eb18

Update layout

2fd2ae6

Add animation

027d2ce

Adjust migration key input size

44067ed

Replace Automattic to WordPress.com

cc012de

Remove quotes

9f9478c

Add log when we are showing the migration key fallback instructions

aab8514

Improve copy

Improve copy

658ae3d

gabrielcaires force-pushed the update/improve-site-migration-instructions-page branch from b860201 to 658ae3d Compare March 26, 2024 10:16

gabrielcaires added 2 commits March 26, 2024 10:31

Fix test

75c9074

Protect the CTA to be translated

d22bc4d

Currently, the main Migrate Guru CTA are not translatable, so we want to protect the button and fields names to be translated from our translation team.

gabrielcaires removed request for a team and chriskmnds March 26, 2024 11:26

gabrielcaires requested a review from daledupreez March 26, 2024 11:58

andres-blanco reviewed Mar 26, 2024

View reviewed changes

gabrielcaires added 2 commits March 26, 2024 13:52

Fix typescript checking

e785772

Fix typescript checking

0c39e1e

gabrielcaires requested review from valterlorran and andres-blanco March 26, 2024 14:03

gabrielcaires added 3 commits March 26, 2024 15:49

Remove tag from DoNotTranslateIt

17eefe3

Add missing strong tag

c6cadaa

Fix unexpected scroll

f168041

daledupreez approved these changes Mar 27, 2024

View reviewed changes

gabrielcaires merged commit b73f08f into trunk Mar 27, 2024
11 checks passed

gabrielcaires deleted the update/improve-site-migration-instructions-page branch March 27, 2024 10:38

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 27, 2024

This was referenced Mar 27, 2024

Site Migration: Migration Instructions screen improvements #88952

Merged

Site Migration: Migration Instructions screen improvements #89006

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Site Migration: Update migration instructions screen #88813

Site Migration: Update migration instructions screen #88813

gabrielcaires commented Mar 22, 2024 •

edited

Loading

github-actions bot commented Mar 22, 2024 •

edited by matticbot

Loading

matticbot commented Mar 22, 2024 •

edited

Loading

gabrielcaires commented Mar 22, 2024

gabrielcaires commented Mar 22, 2024

javierarce commented Mar 25, 2024

gabrielcaires commented Mar 25, 2024

javierarce commented Mar 26, 2024

javierarce commented Mar 26, 2024

daledupreez left a comment

daledupreez Mar 26, 2024

gabrielcaires Mar 26, 2024

gabrielcaires commented Mar 26, 2024 •

edited

Loading

matticbot commented Mar 26, 2024 •

edited

Loading

andres-blanco Mar 26, 2024 •

edited

Loading

gabrielcaires Mar 26, 2024

andres-blanco Mar 26, 2024

gabrielcaires Mar 26, 2024

daledupreez left a comment

daledupreez Mar 27, 2024

gabrielcaires Mar 27, 2024

daledupreez Mar 27, 2024

gabrielcaires Mar 27, 2024

daledupreez Mar 27, 2024

gabrielcaires Mar 27, 2024

daledupreez Mar 27, 2024

gabrielcaires Mar 27, 2024

daledupreez Mar 27, 2024

gabrielcaires Mar 27, 2024

daledupreez Mar 27, 2024

gabrielcaires Mar 27, 2024

javierarce commented Mar 27, 2024

javierarce commented Mar 27, 2024 •

edited

Loading

gabrielcaires commented Mar 27, 2024

		@@ -0,0 +1,22 @@
		import { useQuery } from '@tanstack/react-query';

Site Migration: Update migration instructions screen #88813

Site Migration: Update migration instructions screen #88813

Conversation

gabrielcaires commented Mar 22, 2024 • edited Loading

Proposed Changes

Testing Instructions

Screenshots

github-actions bot commented Mar 22, 2024 • edited by matticbot Loading

matticbot commented Mar 22, 2024 • edited Loading

gabrielcaires commented Mar 22, 2024

gabrielcaires commented Mar 22, 2024

javierarce commented Mar 25, 2024

gabrielcaires commented Mar 25, 2024

javierarce commented Mar 26, 2024

javierarce commented Mar 26, 2024

daledupreez left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gabrielcaires commented Mar 26, 2024 • edited Loading

matticbot commented Mar 26, 2024 • edited Loading

andres-blanco Mar 26, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

daledupreez left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

javierarce commented Mar 27, 2024

javierarce commented Mar 27, 2024 • edited Loading

gabrielcaires commented Mar 27, 2024

gabrielcaires commented Mar 22, 2024 •

edited

Loading

github-actions bot commented Mar 22, 2024 •

edited by matticbot

Loading

matticbot commented Mar 22, 2024 •

edited

Loading

gabrielcaires commented Mar 26, 2024 •

edited

Loading

matticbot commented Mar 26, 2024 •

edited

Loading

andres-blanco Mar 26, 2024 •

edited

Loading

javierarce commented Mar 27, 2024 •

edited

Loading