Add migration instructions basic structure #91853

renatho · 2024-06-17T17:44:52Z

Related to #91776

Proposed Changes

Partially refactor the current Launchpad step, extracting parts to be reused in other Launchpads, like this new step. So we avoid duplicating code.
- Anyway, I tried to change the minimum that I could in the Launchpad in order to avoid breaking something that we didn't realize. So, for example, the extracted logic receives classNames, so we pass them when calling the new component in the existing launchpad.
- I also reviewed the spacings in the new classes, but for the current Lanchpad, it's overriding with the existing styles to also avoid anything we could miss and break.
Create a basic structure for the Migration Instructions step.

Known issues

Migration Instructions: Site preview #91964

Testing Instructions

Activate the feature flag: migration-flow/new-migration-instructions-step.
Navigate through the flow to import a site, and in the final step make sure you see the new migration instructions screen.
Check that this screen is responsive and the page works properly.
Create a new site, and make sure the current Launchpad continues working as previously (you can open the same page on https://wordpress.com/ and on http://calypso.localhost:3000/ to compare). /setup/build/launchpad?siteSlug={SITE_SLUG}&siteId={SITE_ID}&showLaunchpad=true

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-06-17T17:45:06Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

matticbot · 2024-06-17T17:55:20Z

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

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

name                   parsed_size           gzip_size
entry-subscriptions         +234 B  (+0.0%)      +68 B  (+0.0%)
entry-stepper               +234 B  (+0.0%)      +68 B  (+0.0%)
entry-main                  +234 B  (+0.0%)      +68 B  (+0.0%)
entry-login                 +234 B  (+0.0%)      +68 B  (+0.0%)
entry-domains-landing       +234 B  (+0.0%)      +68 B  (+0.0%)
entry-browsehappy           +234 B  (+0.1%)      +68 B  (+0.1%)

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

Sections (~167 bytes added 📈 [gzipped])

name                        parsed_size           gzip_size
write-flow                       +862 B  (+0.1%)     +172 B  (+0.1%)
videopress-flow                  +862 B  (+0.1%)     +172 B  (+0.1%)
link-in-bio-tld-flow             +862 B  (+0.1%)     +172 B  (+0.0%)
build-flow                       +862 B  (+0.1%)     +172 B  (+0.1%)
with-theme-assembler-flow         +74 B  (+0.1%)       +0 B
update-options-flow               +74 B  (+0.2%)       +0 B
update-design-flow                +74 B  (+0.0%)       +0 B
trial-wooexpress-flow             +74 B  (+0.2%)       +0 B
site-setup-wg                     +74 B  (+0.1%)       +0 B
site-setup-flow                   +74 B  (+0.1%)       +0 B
site-migration-flow               +74 B  (+0.1%)       +0 B
migration-signup                  +74 B  (+0.2%)       -3 B  (-0.0%)
hosted-site-migration-flow        +74 B  (+0.1%)       +0 B
free-post-setup-flow              +74 B  (+0.2%)       +0 B
free-flow                         +74 B  (+0.1%)       -1 B  (-0.0%)
entrepreneur-flow                 +74 B  (+0.1%)       +0 B
assembler-first-flow              +74 B  (+0.1%)       +0 B
ai-assembler-flow                 +74 B  (+0.1%)       -1 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.

renatho · 2024-06-17T21:23:54Z

client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/sidebar.tsx

@@ -202,105 +202,98 @@ const Sidebar = ( {
 	return (
 		<>
 			{ site && <QueryMembershipsSettings siteId={ site.ID } source="launchpad" /> }
-			<div className="launchpad__sidebar">


The changes in this file only remove these wrapper div launchpad__sidebar because it was moved to the LaunchpadContainer component.

…struction design

renatho · 2024-06-18T19:55:45Z

...ding/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/style.scss

@@ -2,7 +2,7 @@
 @import "@automattic/onboarding/styles/mixins";

 .import-hosted-site,
-.site-migration,
+.site-migration :not(.site-migration-instructions--launchpad),


We don't want to apply the old styles to the new migration instructions step.

renatho · 2024-06-19T20:07:19Z

packages/launchpad/src/launchpad-container/style.scss

+		max-width: 360px;
+	}
+
+	// TODO: Migrate to the checklist components. The checklist could receive a special className as prop that would be responsible for this.


For now, I kept it as it is, but it would be nice to change it at some point to be a responsibility of the checklist.

renatho · 2024-06-19T21:10:41Z

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

+			stepName="site-migration-instructions"
+			isFullLayout
+			hideFormattedHeader
+			className="is-step-site-migration-instructions site-migration-instructions--launchpad"


site-migration-instructions--launchpad is a class to differentiate it from the site-migration-instructions-i2. I didn't want to give an i3 name to have a more semantic name in this case.

Did you consider just creating a new step component with its own styles? This smells kinda fragile. :-) (Though I only had very cursory look)

Hi @simison! Thank you for checking this!

new step component with its own styles?

Unfortunately, I think it wouldn't help with this case because the original class that we are trying to avoid is related to the flow itself.

We have some classes in client/landing/stepper/declarative-flow/internals/steps-repository/importer-migrate-message/style.scss applied to the whole site migration flow (.site-migration). And, among other things, one thing these classes are applying is a max-width: 720px; to the step-container__content, which we don't want in this step.

Considering this, let me know if you have any other suggestion to handle this. 😉

renatho · 2024-06-20T14:08:57Z

client/landing/stepper/declarative-flow/internals/steps-repository/launchpad/step-content.tsx

-			</div>
-		</main>
+		<LaunchpadContainer
+			headerClassName="launchpad__sidebar-header"


In the future, if we could kill all of these classes and the overrides, keeping only the new ones from the StepContainer, it would be ideal.

But I don't feel confident enough to do it without breaking things that I wouldn't think about.

renatho · 2024-06-20T14:18:28Z

@daledupreez and @simison, I added you from GitHub reviewer suggestions. If you have some time, I'd appreciate a quick check just to make sure I didn't miss anything with the refactor part of the current Launchpad step (under client/landing/stepper/declarative-flow/internals/steps-repository). 😉

daledupreez · 2024-06-20T14:33:46Z

I will only be able to take a look tomorrow, @renatho, but hopefully someone else from Serenity can take a look before then.

valterlorran

Changes are mostly looking good and tested well. I just have a couple of questions.

👍 for the tests!

valterlorran · 2024-06-20T16:57:37Z

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

+
+	return (
+		<div className="site-migration-instructions__questions-wrapper">
+			{ translate( 'Questions?' ) }{ ' ' }


Nit: Do we really need this space({ ' ' }) here? If it's a spacing issue, we could add a margin to the link.

Thank you for the suggestion! Applied here: 2bc43e1.

I also took the opportunity to move that to a different file.

valterlorran · 2024-06-20T17:02:42Z

...clarative-flow/internals/steps-repository/site-migration-instructions/site-preview/index.tsx

+			<iframe
+				className="migration-instructions-from-preview__iframe"
+				title={ translate( 'Preview of the site being imported' ) }
+				src={ fromUrl }
+			/>


Should we have a fallback in case the site can't be loaded? Aren't there a few ways to prevent sites from being embedded?

Yes! We need to make something here!

I had noticed the same, but since this PR was blocking other PRs I had created this issue to merge this one earlier.

Also, if you have any suggestion of a way it was solved somewhere already, it would be very helpful! :)

valterlorran

LGTM!

donnapep · 2024-06-21T15:00:23Z

Did a quick test. In mobile view, the iframe seems to be hidden beneath the bottom bar:

donnapep · 2024-06-21T15:09:10Z

Also, with the rounded borders, the scrollbar is being cut off when it's at the very top. Perhaps it would be best not to have rounded corners:

Screen.Recording.2024-06-21.at.11.07.25.AM.mov

renatho · 2024-06-21T19:23:12Z

Hi @donnapep! Thank you for the tests! Good catches!
Here are the fixes: 6827131 b55be6a

matticbot · 2024-06-21T19:25:24Z

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/migration-instructions-basic-structure on your sandbox.

donnapep · 2024-06-24T15:45:57Z

@renatho Is it possible to not force push? It's making review a bit difficult. 😅

donnapep

The issues I highlighted with the UI have been addressed. 👍🏻

renatho · 2024-06-24T17:32:54Z

Is it possible to not force push? It's making review a bit difficult. 😅

Hey @donnapep! Sorry for that!

My reason for that force pushes is not to pollute the commits with small tweaks I notice after pushing. But I only force push when it's not being reviewed and I never change commits already reviewed to avoid confusion.

Is there a specific case where it got confused to see if I can improve it?

a8ci18n · 2024-06-24T18:18:46Z

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

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.

donnapep · 2024-06-24T20:18:28Z

Is there a specific case where it got confused to see if I can improve it?

There was a force push between my last review when I reported the bugs and your asking for another review. There's a section on force-pushing in the team handbook PdxWSz-61-p2 in case it's helpful. 🥂

a8ci18n · 2024-06-30T12:31:18Z

Translation for this Pull Request has now been finished.

renatho self-assigned this Jun 17, 2024

renatho force-pushed the add/migration-instructions-basic-structure branch from e3b0456 to 8b3ebc6 Compare June 17, 2024 18:09

Base automatically changed from add/new-migration-instructions-feature-flag to trunk June 17, 2024 18:15

renatho force-pushed the add/migration-instructions-basic-structure branch from 8b3ebc6 to d48058e Compare June 17, 2024 18:20

Add initial structure for migration instructions

223c0b0

renatho force-pushed the add/migration-instructions-basic-structure branch from d48058e to 223c0b0 Compare June 17, 2024 18:24

renatho added 3 commits June 17, 2024 18:19

Create container component to extract logic

7d77ecd

Use extracted component

ba2fdf0

Apply launchpad container to the migration instructions

f125779

renatho commented Jun 17, 2024

View reviewed changes

renatho added 5 commits June 17, 2024 18:26

Sidebar and header moved to variables

9c1acb8

Add container tests

1cef25d

Remove className because it's already added as the stepName

5fd8bc0

Remove not needed import

95df865

Don't apply old migration instructions styles to the new migration in…

590f2c5

…struction design

renatho commented Jun 18, 2024

View reviewed changes

renatho linked an issue Jun 18, 2024 that may be closed by this pull request

Migration Instructions: Basic structure for the page #91776

Closed

4 tasks

renatho added 4 commits June 18, 2024 18:23

Add questions link and styles

56ec9ba

Add migration instructions initial sidebar

c19f39d

Move sidebar content container back to the original sidebar

dd7e23e

Rename component

0c2abdc

renatho force-pushed the add/migration-instructions-basic-structure branch from ba73822 to 0c2abdc Compare June 19, 2024 17:46

renatho added 2 commits June 19, 2024 15:25

Apply default spacings and keep original ones in the launchpad

c457a47

Set the default behavior of the launchpad container to be full height

132d669

renatho commented Jun 19, 2024

View reviewed changes

Add site preview

2f643c3

renatho commented Jun 19, 2024

View reviewed changes

Update getting the from url to a hook

9a2dd9b

renatho commented Jun 20, 2024

View reviewed changes

renatho marked this pull request as ready for review June 20, 2024 14:16

renatho requested a review from daledupreez June 20, 2024 14:16

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

renatho requested review from simison and a team June 20, 2024 14:16

daledupreez requested a review from a team June 20, 2024 14:33

valterlorran reviewed Jun 20, 2024

View reviewed changes

Change space to a CSS style

2bc43e1

valterlorran approved these changes Jun 21, 2024

View reviewed changes

renatho force-pushed the add/migration-instructions-basic-structure branch from f72c384 to eab1ce7 Compare June 21, 2024 19:15

Fix scrollbar issue

6827131

renatho force-pushed the add/migration-instructions-basic-structure branch from eab1ce7 to 6827131 Compare June 21, 2024 19:17

Fix bottom spacing for small screens

b55be6a

renatho requested a review from donnapep June 24, 2024 15:09

donnapep approved these changes Jun 24, 2024

View reviewed changes

renatho merged commit a8a50a1 into trunk Jun 24, 2024
12 checks passed

renatho deleted the add/migration-instructions-basic-structure branch June 24, 2024 17:33

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 Jun 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add migration instructions basic structure #91853

Add migration instructions basic structure #91853

renatho commented Jun 17, 2024 •

edited

Loading

github-actions bot commented Jun 17, 2024 •

edited by matticbot

Loading

matticbot commented Jun 17, 2024 •

edited

Loading

renatho Jun 17, 2024 •

edited

Loading

renatho Jun 18, 2024

renatho Jun 19, 2024

renatho Jun 19, 2024

simison Jun 20, 2024 •

edited

Loading

renatho Jun 20, 2024

renatho Jun 20, 2024

renatho commented Jun 20, 2024 •

edited

Loading

daledupreez commented Jun 20, 2024

valterlorran left a comment

valterlorran Jun 20, 2024

renatho Jun 20, 2024 •

edited

Loading

valterlorran Jun 20, 2024

renatho Jun 20, 2024

valterlorran left a comment

donnapep commented Jun 21, 2024

donnapep commented Jun 21, 2024 •

edited

Loading

renatho commented Jun 21, 2024

matticbot commented Jun 21, 2024

donnapep commented Jun 24, 2024

donnapep left a comment

renatho commented Jun 24, 2024

a8ci18n commented Jun 24, 2024

donnapep commented Jun 24, 2024

a8ci18n commented Jun 30, 2024

Add migration instructions basic structure #91853

Add migration instructions basic structure #91853

Conversation

renatho commented Jun 17, 2024 • edited Loading

Proposed Changes

Known issues

Testing Instructions

Pre-merge Checklist

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

matticbot commented Jun 17, 2024 • edited Loading

renatho Jun 17, 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

simison Jun 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

renatho commented Jun 20, 2024 • edited Loading

daledupreez commented Jun 20, 2024

valterlorran left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

renatho Jun 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

valterlorran left a comment

Choose a reason for hiding this comment

donnapep commented Jun 21, 2024

donnapep commented Jun 21, 2024 • edited Loading

renatho commented Jun 21, 2024

matticbot commented Jun 21, 2024

donnapep commented Jun 24, 2024

donnapep left a comment

Choose a reason for hiding this comment

renatho commented Jun 24, 2024

a8ci18n commented Jun 24, 2024

donnapep commented Jun 24, 2024

a8ci18n commented Jun 30, 2024

renatho commented Jun 17, 2024 •

edited

Loading

github-actions bot commented Jun 17, 2024 •

edited by matticbot

Loading

matticbot commented Jun 17, 2024 •

edited

Loading

renatho Jun 17, 2024 •

edited

Loading

simison Jun 20, 2024 •

edited

Loading

renatho commented Jun 20, 2024 •

edited

Loading

renatho Jun 20, 2024 •

edited

Loading

donnapep commented Jun 21, 2024 •

edited

Loading