A4A > Migrations: Initial implementation of self site migration tool #96401

yashwin · 2024-11-14T11:18:29Z

Closes https://github.com/Automattic/automattic-for-agencies-dev/issues/1475
Closes https://github.com/Automattic/automattic-for-agencies-dev/issues/1476
Closes https://github.com/Automattic/automattic-for-agencies-dev/issues/1441

Proposed Changes

This PR:

Updates the Migrate your sites to a dropdown menu, giving multiple options
Creates the section, context, and initial page structure for Migrate to Pressable and Migrate to WordPress.com pages

Why are these changes being made?

To lay the initial work for the self-migration tool.

Testing Instructions

Open the A4A live link
Append the URL with ?flags=-a4a-tracking-site-migrations > Go to Migrations and verify the Migrate your sites button opens up the contact support form
Refresh the page and verify you are redirected to /migrations/overview page and you can now see the options for the Migrate your sites button

Verify that clicking on Concierge service opens up the support form modal, and other options redirect you to appropriate pages as shown below:

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-11-14T11:18:44Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-11-14T11:19:02Z

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/a4a/migration-self-migrate-initial-implementation on your sandbox.

matticbot · 2024-11-14T11:20:26Z

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

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

name           parsed_size           gzip_size
entry-stepper        +84 B  (+0.0%)      +12 B  (+0.0%)
entry-main           +84 B  (+0.0%)      +12 B  (+0.0%)

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

Sections (~1211 bytes added 📈 [gzipped])

name                                parsed_size           gzip_size
a8c-for-agencies-migrations             +4119 B  (+0.4%)     +899 B  (+0.3%)
write-flow                               +181 B  (+0.0%)       +8 B  (+0.0%)
reader                                   +181 B  (+0.0%)       +8 B  (+0.0%)
plugins                                  +181 B  (+0.0%)       +8 B  (+0.0%)
link-in-bio-tld-flow                     +181 B  (+0.0%)       +8 B  (+0.0%)
jetpack-cloud-plugin-management          +181 B  (+0.0%)       +8 B  (+0.0%)
home                                     +181 B  (+0.0%)       +8 B  (+0.0%)
build-flow                               +181 B  (+0.0%)       +8 B  (+0.0%)
a8c-for-agencies-team                    +140 B  (+0.0%)      +36 B  (+0.0%)
a8c-for-agencies-sites                   +140 B  (+0.0%)      +36 B  (+0.0%)
a8c-for-agencies-settings                +140 B  (+0.1%)      +36 B  (+0.1%)
a8c-for-agencies-referrals               +140 B  (+0.0%)      +37 B  (+0.0%)
a8c-for-agencies-purchases               +140 B  (+0.0%)      +38 B  (+0.0%)
a8c-for-agencies-plugins                 +140 B  (+0.1%)      +36 B  (+0.1%)
a8c-for-agencies-partner-directory       +140 B  (+0.0%)      +34 B  (+0.0%)
a8c-for-agencies-overview                +140 B  (+0.0%)      +36 B  (+0.0%)
a8c-for-agencies-marketplace             +140 B  (+0.0%)      +41 B  (+0.0%)
a8c-for-agencies-client                  +140 B  (+0.0%)      +37 B  (+0.0%)
a8c-for-agencies-agency-tier             +140 B  (+0.1%)      +36 B  (+0.1%)
a8c-for-agencies                         +140 B  (+0.1%)      +35 B  (+0.1%)
staging-site                              +78 B  (+0.0%)      +28 B  (+0.0%)
sites-dashboard                           +78 B  (+0.0%)      +28 B  (+0.0%)
site-tools                                +78 B  (+0.0%)      +28 B  (+0.0%)
site-settings                             +78 B  (+0.0%)      +28 B  (+0.0%)
site-performance                          +78 B  (+0.0%)      +28 B  (+0.0%)
site-monitoring                           +78 B  (+0.0%)      +28 B  (+0.0%)
site-marketing                            +78 B  (+0.0%)      +28 B  (+0.0%)
site-logs                                 +78 B  (+0.0%)      +28 B  (+0.0%)
scan                                      +78 B  (+0.0%)      +28 B  (+0.0%)
jetpack-social                            +78 B  (+0.0%)      +27 B  (+0.0%)
jetpack-search                            +78 B  (+0.0%)      +25 B  (+0.0%)
jetpack-cloud-agency-sites-v2             +78 B  (+0.0%)      +30 B  (+0.0%)
hosting-features                          +78 B  (+0.0%)      +28 B  (+0.0%)
hosting                                   +78 B  (+0.0%)      +28 B  (+0.0%)
github-deployments                        +78 B  (+0.0%)      +28 B  (+0.0%)
backup                                    +78 B  (+0.0%)      +28 B  (+0.0%)
a8c-for-agencies-signup                   +78 B  (+0.1%)      +28 B  (+0.1%)
a8c-for-agencies-landing                  +78 B  (+0.1%)      +27 B  (+0.1%)

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 (~8 bytes added 📈 [gzipped])

name                                                     parsed_size           gzip_size
async-load-design-blocks                                      +181 B  (+0.0%)       +8 B  (+0.0%)
async-load-calypso-components-web-preview-component           +181 B  (+0.0%)       +8 B  (+0.0%)
async-load-calypso-blocks-support-article-dialog-dialog       +181 B  (+0.2%)       +8 B  (+0.0%)

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.

jkguidaven · 2024-11-15T10:21:31Z

A small improvement that we can add here is that we can highlight the Overview menu if we are viewing a subpage that is part of the overview page.

jkguidaven · 2024-11-15T10:31:30Z

Can we align the popover menu to the dropdown button? Similar to how we did with the 'Add new site' dropdown button.

jkguidaven

Overall it is working as expected. Good job! 👍

I left a few comments for improvement. Let me know what you think.

jkguidaven · 2024-11-15T10:26:44Z

.../a8c-for-agencies/sections/migrations/primary/migrations-overview-v2/migrate-site-button.tsx

+		setMenuVisible( ( isVisible ) => ! isVisible );
+	};
+
+	const popoverContent = (


Same as my previous comment on another PR. We can wrap this with useMemo to avoid redrawing it or just move it within the template.

Fixed it here: 8af12d3.

jkguidaven · 2024-11-15T10:28:57Z

client/a8c-for-agencies/sections/migrations/primary/self-migration-tool/index.tsx

+								href: A4A_MIGRATIONS_LINK,
+							},
+							{
+								label: translate( 'Overview' ),


Can we make this clickable just to be consistent with breadcrumb behavior?

We are removing this in another PR. So, leaving this as-is

yashwin · 2024-11-15T11:40:28Z

Thanks for the review, @jkguidaven!

A small improvement that we can add here is that we can highlight the Overview menu if we are viewing a subpage that is part of the overview page.

I will fix this in my next PR here: #96443 as we are updating this there.

Can we align the popover menu to the dropdown button? Similar to how we did with the 'Add new site' dropdown button.

Good one. Fixed it here: 8af12d3.

Could you please take another look?

jkguidaven

Thanks for addressing my comments.
I tested the new changes, and they look good.
No more comments from me.

Initial implementation of self-migrate site

56d09b0

yashwin added the A8c Agencies label Nov 14, 2024

yashwin requested a review from a team November 14, 2024 11:18

yashwin self-assigned this Nov 14, 2024

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

yashwin changed the title ~~A4A > Migrations: Initial implementation of self site migration~~ A4A > Migrations: Initial implementation of self site migration tool Nov 14, 2024

yashwin mentioned this pull request Nov 15, 2024

A4A > Migrations: Implement the self migration tool #96443

Open

7 tasks

jkguidaven reviewed Nov 15, 2024

View reviewed changes

address PR comment

8af12d3

yashwin force-pushed the add/a4a/migration-self-migrate-initial-implementation branch from 5922c7a to 8af12d3 Compare November 15, 2024 11:38

jkguidaven approved these changes Nov 15, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

A4A > Migrations: Initial implementation of self site migration tool #96401

A4A > Migrations: Initial implementation of self site migration tool #96401

yashwin commented Nov 14, 2024 •

edited

Loading

github-actions bot commented Nov 14, 2024 •

edited by matticbot

Loading

matticbot commented Nov 14, 2024

matticbot commented Nov 14, 2024 •

edited

Loading

jkguidaven commented Nov 15, 2024

jkguidaven commented Nov 15, 2024 •

edited

Loading

jkguidaven left a comment

jkguidaven Nov 15, 2024

yashwin Nov 15, 2024

jkguidaven Nov 15, 2024

yashwin Nov 15, 2024

yashwin commented Nov 15, 2024

jkguidaven left a comment

A4A > Migrations: Initial implementation of self site migration tool #96401

Are you sure you want to change the base?

A4A > Migrations: Initial implementation of self site migration tool #96401

Conversation

yashwin commented Nov 14, 2024 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Nov 14, 2024 • edited by matticbot Loading

matticbot commented Nov 14, 2024

matticbot commented Nov 14, 2024 • edited Loading

jkguidaven commented Nov 15, 2024

jkguidaven commented Nov 15, 2024 • edited Loading

jkguidaven left a comment

Choose a reason for hiding this comment

jkguidaven Nov 15, 2024

Choose a reason for hiding this comment

yashwin Nov 15, 2024

Choose a reason for hiding this comment

jkguidaven Nov 15, 2024

Choose a reason for hiding this comment

yashwin Nov 15, 2024

Choose a reason for hiding this comment

yashwin commented Nov 15, 2024

jkguidaven left a comment

Choose a reason for hiding this comment

yashwin commented Nov 14, 2024 •

edited

Loading

github-actions bot commented Nov 14, 2024 •

edited by matticbot

Loading

matticbot commented Nov 14, 2024 •

edited

Loading

jkguidaven commented Nov 15, 2024 •

edited

Loading