Copy Site: Prototype flow to copy an existing site #71913

sejas · 2023-01-11T07:49:37Z

Closes https://github.com/Automattic/dotcom-forge/issues/1468

Proposed Changes

Add a new Copy Site item on SMP site actions for atomic sites that you own.
Create a new rough Copy Site flow to create a new site, buy a plan and migrate it to Atomic.

Testing Instructions

If It's not yet deployed, Apply and sandbox D97450-code.
Go to /sites.
On an atomic site you own, Click on the ellipsis action menu.
Click on Create a copy of this site.
Observe a new flow is open.
Follow the steps, pay the plan, and observe a Success message after copying your site.

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-ajp-p2)?

github-actions · 2023-01-11T07:49:49Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2023-01-11T07:54:31Z

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

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

name                   parsed_size           gzip_size
entry-stepper              +1426 B  (+0.1%)     +870 B  (+0.1%)
entry-main                  +768 B  (+0.1%)     +266 B  (+0.1%)
entry-gutenboarding         +401 B  (+0.0%)     +214 B  (+0.0%)
entry-login                 +336 B  (+0.0%)     +121 B  (+0.0%)
entry-domains-landing       +336 B  (+0.1%)     +121 B  (+0.1%)
entry-browsehappy           +336 B  (+0.3%)     +121 B  (+0.4%)

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

Sections (~526 bytes added 📈 [gzipped])

name                     parsed_size            gzip_size
sites-dashboard             +41767 B  (+14.6%)   +12224 B  (+13.3%)
copy-site                   +28678 B     (new)    +9471 B     (new)
link-in-bio-flow              +328 B   (+0.0%)      +98 B   (+0.1%)
free-flow                     +328 B   (+0.1%)      +90 B   (+0.1%)
videopress-flow               +315 B   (+0.1%)      +81 B   (+0.1%)
newsletter-flow               +315 B   (+0.1%)      +83 B   (+0.1%)
devdocs                       +216 B   (+0.1%)      +91 B   (+0.2%)
signup                        +157 B   (+0.1%)      +64 B   (+0.1%)
settings                       +80 B   (+0.0%)    +1559 B   (+0.8%)
plugins                        +78 B   (+0.0%)      -42 B   (-0.0%)
stats                          +65 B   (+0.0%)      +27 B   (+0.0%)
plans                          +65 B   (+0.0%)      +25 B   (+0.0%)
marketplace                    +65 B   (+0.0%)      +26 B   (+0.0%)
jetpack-connect                +65 B   (+0.0%)      +25 B   (+0.0%)
domains                        +65 B   (+0.0%)      +25 B   (+0.0%)
checkout                       +65 B   (+0.0%)      +27 B   (+0.0%)
accept-invite                  +65 B   (+0.0%)      +25 B   (+0.0%)
trial-wooexpress-flow          +13 B   (+0.0%)       +5 B   (+0.1%)
tailored-ecommerce-flow        +13 B   (+0.0%)       +5 B   (+0.0%)
link-in-bio-tld-flow           +13 B   (+0.0%)       +5 B   (+0.0%)
import-flow                    +13 B   (+0.0%)       +6 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 (~13197 bytes added 📈 [gzipped])

name                                              parsed_size           gzip_size
async-load-design                                    +41754 B  (+2.1%)   +12242 B  (+2.5%)
async-load-design-blocks                                +65 B  (+0.0%)      +27 B  (+0.0%)
async-load-calypso-layout-masterbar-checkout-tsx        +65 B  (+0.1%)      +23 B  (+0.1%)
async-load-calypso-layout-masterbar-checkout            +65 B  (+0.1%)      +28 B  (+0.1%)
async-load-calypso-blocks-editor-checkout-modal         +65 B  (+0.0%)      +23 B  (+0.0%)
async-load-design-playground                            -13 B  (-0.0%)     +238 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.

client/landing/stepper/declarative-flow/copy-site.tsx

...nt/landing/stepper/declarative-flow/internals/steps-repository/automated-copy-site/index.tsx

client/landing/stepper/declarative-flow/internals/steps-repository/intro/index.tsx

...nt/landing/stepper/declarative-flow/internals/steps-repository/automated-copy-site/index.tsx

danielbachhuber · 2023-01-12T12:23:03Z

client/sites-dashboard/components/sites-ellipsis-menu.tsx

+			href={ copySiteHref }
+			onClick={ () => recordTracks( 'calypso_sites_dashboard_site_action_copy_site' ) }
+		>
+			{ __( 'Create a copy of this site' ) }


Suggested change

{ __( 'Create a copy of this site' ) }

{ __( 'Copy site' ) }

Can we shorten this?

Done here 3306167
Don't you think that Copy site is a vague description?
Users may be confused and think they will copy the site URL to the clipboard to paste it somewhere.
I suggest using Duplicate site or Clone site.

Don't you think that Copy site is a vague description?
Users may be confused and think they will copy the site URL to the clipboard to paste it somewhere.

That's a good point. We can iterate on it.

client/sites-dashboard/components/sites-ellipsis-menu.tsx

danielbachhuber · 2023-01-12T12:34:33Z

client/sites-dashboard/components/sites-ellipsis-menu.tsx

@@ -244,6 +274,7 @@ export const SitesEllipsisMenu = ( {
 					<ManagePluginsItem { ...props } />
 					{ ! isNotAtomicJetpack( site ) && <HostingConfigItem { ...props } /> }
 					{ site.is_coming_soon && <PreviewSiteModalItem { ...props } /> }
+					{ isEnabled( 'sites/copy-site' ) && <CopySiteItem { ...props } /> }


Can we make sure this is only present for the site owner too?

The check is inside the component.

wp-calypso/client/sites-dashboard/components/sites-ellipsis-menu.tsx

Lines 190 to 192 in 24545be

if ( ! hasAtomicFeature || ! isSiteOwner || ! plan ) {

return null;

}

Ah, cool. I think it'd be easier to read if it was outside of the component, but not a strong opinion on my end.

packages/onboarding/src/flow-progress/use-flow-progress.ts

* CopySite: Auto-add used plan to the cart and trigger the site copy-transfer * CopySite: increase the progress bar flow

…able results

* fix: Remove adding product to cart before submit to avoid race conditions of dispatch and window.assign * fix: Move setting the cart item inside the submit to avoid console errors * add: Refactor automated copy site component and use a progress bar to show the copy of the site

…te` feature flag (#72056) * CopySite: use hyphens in step urls * CopySite: reduce the text in Copy Site SMP CTA Action * CopySite: fix siteDetails type * CopySite: add guard to make sourceSlug a required param * CopySite: enable flow only if feature flag sites/copy-site is enabled * CopySite: restore global.scss unwanted changes

* fix: Remove product_slug from copy site parameters * fix: Rename dispatch to use useReduxDispatch

wojtekn

Looks great, and works as expected. Good job on adding a new onboarding flow 🙂

client/sites-dashboard/components/sites-ellipsis-menu.tsx

wojtekn · 2023-01-13T12:49:33Z

client/landing/stepper/declarative-flow/internals/steps-repository/intro/index.tsx

+				title: __( 'Copy Site' ),
+				text: createInterpolateElement(
+					__(
+						'You’re 5 minutes away from<br />creating a new copy site from <SourceUrl/>.<br />Ready?'


Should we validate sourceSlug at this point? I can replace it with a simple site URL, and the page renders saying it will copy my simple site.

The flow will end up with the error as REST API doesn't allow for that, but it makes sense to validate it early.

I've added 1503-gh-Automattic/dotcom-forge for that.

client/landing/stepper/declarative-flow/copy-site.tsx

client/sites-dashboard/components/sites-ellipsis-menu.tsx

client/landing/stepper/declarative-flow/copy-site.tsx

danielbachhuber

Seems to work fine 👍 Just a few small nits remaining

client/landing/stepper/declarative-flow/copy-site.tsx

danielbachhuber · 2023-01-13T13:04:16Z

client/sites-dashboard/components/sites-ellipsis-menu.tsx

@@ -244,6 +274,7 @@ export const SitesEllipsisMenu = ( {
 					<ManagePluginsItem { ...props } />
 					{ ! isNotAtomicJetpack( site ) && <HostingConfigItem { ...props } /> }
 					{ site.is_coming_soon && <PreviewSiteModalItem { ...props } /> }
+					{ isEnabled( 'sites/copy-site' ) && <CopySiteItem { ...props } /> }


Ah, cool. I think it'd be easier to read if it was outside of the component, but not a strong opinion on my end.

danielbachhuber · 2023-01-13T13:07:53Z

client/landing/stepper/declarative-flow/copy-site.tsx

+				case 'processing': {
+					const destination = addQueryArgs( `/setup/${ this.name }/automated-copy`, {
+						sourceSlug: urlQueryParams.get( 'sourceSlug' ),
+						siteSlug: providedDependencies?.siteSlug,


siteSlug is a little ambiguous here. Should it be destinationSlug ?

siteSlug is used as a convention in some steps to refer to the site we are creating. However I find it confusing as well, and in this particular scenario I guess it makes sense to rename it to destinationSlug.
I also would like the opinion of @sejas as well.

Let's keep siteSlug for now. That param name makes it easier to grab the site using the useSite hook.

client/sites-dashboard/components/sites-ellipsis-menu.tsx

…72081) * fix: Change the theme to the default for WP Sites at copy site flow * update: Move default theme to a constant

a8ci18n · 2023-01-13T18:23:27Z

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

Hi @sejas, could you please edit the description of this PR and add a screenshot for our translators? Ideally it'd include all of the following strings:

Copy Site
Copy site

Thank you in advance!

a8ci18n · 2023-01-23T10:30:41Z

Translation for this Pull Request has now been finished.

sejas self-assigned this Jan 11, 2023

sejas added [Feature] Copy Site The copy site tool. [Feature] Tailored Onboarding Flows All onbaording flows targeted to a specific marketshare / audience. Stepper labels Jan 11, 2023

sejas mentioned this pull request Jan 12, 2023

CopySite: add cart and transfer to the flow #71969

Merged

7 tasks

danielbachhuber reviewed Jan 12, 2023

View reviewed changes

danielbachhuber changed the title ~~CopySite: add a new flow to copy an existing site~~ Copy Site: add a new flow to copy an existing site Jan 12, 2023

danielbachhuber reviewed Jan 12, 2023

View reviewed changes

packages/onboarding/src/flow-progress/use-flow-progress.ts Show resolved Hide resolved

danielbachhuber changed the title ~~Copy Site: add a new flow to copy an existing site~~ Copy Site: Prototype flow to copy an existing site Jan 12, 2023

sejas mentioned this pull request Jan 13, 2023

CopySite: small improvements and protect it behind the sites/copy-site feature flag #72056

Merged

7 tasks

sejas and others added 9 commits January 13, 2023 11:15

CopySite: add feature flags

c96f27f

CopySite: add button item to SMP site actions

3fc8ced

CopySite: create copy site flow

96bc301

CopySite: add first parameters to setup/copy-site (#71920)

96075e1

add: Add plan params to copy site url (#71930)

4847b85

CopySite: add cart and transfer to the flow (#71969)

50634d3

* CopySite: Auto-add used plan to the cart and trigger the site copy-transfer * CopySite: increase the progress bar flow

CopySite: use getSite instead of getSiteIdBySlug since it has more st…

4c2511e

…able results

sejas force-pushed the add/copy-site-rough-flow branch from 757cd5b to 40d2a0d Compare January 13, 2023 11:17

sejas marked this pull request as ready for review January 13, 2023 11:18

sejas requested a review from a team January 13, 2023 11:18

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

fix: Remove product_slug from copy site parameters (#72060)

2e006e3

* fix: Remove product_slug from copy site parameters * fix: Rename dispatch to use useReduxDispatch

wojtekn reviewed Jan 13, 2023

View reviewed changes

danielbachhuber approved these changes Jan 13, 2023

View reviewed changes

update: Add a @todo as a placeholder for the retry step

b63a634

kozer and others added 2 commits January 13, 2023 17:32

fix: Change the theme to the default for WP Sites at copy site flow (#…

20d5026

…72081) * fix: Change the theme to the default for WP Sites at copy site flow * update: Move default theme to a constant

CopySite: remove sourceUrl in favor of sourceSlug

9f5c518

sejas merged commit 0110af4 into trunk Jan 13, 2023

sejas deleted the add/copy-site-rough-flow branch January 13, 2023 17:31

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 Jan 13, 2023

wojtekn mentioned this pull request Jan 16, 2023

Extract remaining theme constants to make code consistent #72140

Merged

7 tasks

danielbachhuber mentioned this pull request Feb 9, 2023

Copy Site: resetOnboardStore() when initializing Stepper #73166

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Copy Site: Prototype flow to copy an existing site #71913

Copy Site: Prototype flow to copy an existing site #71913

sejas commented Jan 11, 2023 •

edited

Loading

github-actions bot commented Jan 11, 2023 •

edited by matticbot

Loading

matticbot commented Jan 11, 2023 •

edited

Loading

danielbachhuber Jan 12, 2023

sejas Jan 13, 2023 •

edited

Loading

danielbachhuber Jan 13, 2023

danielbachhuber Jan 12, 2023

sejas Jan 13, 2023

danielbachhuber Jan 13, 2023

wojtekn left a comment

wojtekn Jan 13, 2023 •

edited

Loading

wojtekn Jan 16, 2023

danielbachhuber left a comment

danielbachhuber Jan 13, 2023

danielbachhuber Jan 13, 2023

kozer Jan 13, 2023

sejas Jan 13, 2023

a8ci18n commented Jan 13, 2023 •

edited

Loading

a8ci18n commented Jan 23, 2023

	if ( ! hasAtomicFeature \|\| ! isSiteOwner \|\| ! plan ) {
	return null;
	}

Copy Site: Prototype flow to copy an existing site #71913

Copy Site: Prototype flow to copy an existing site #71913

Conversation

sejas commented Jan 11, 2023 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Jan 11, 2023 • edited by matticbot Loading

matticbot commented Jan 11, 2023 • edited Loading

Choose a reason for hiding this comment

sejas Jan 13, 2023 • 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

Choose a reason for hiding this comment

wojtekn left a comment

Choose a reason for hiding this comment

wojtekn Jan 13, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danielbachhuber 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

a8ci18n commented Jan 13, 2023 • edited Loading

a8ci18n commented Jan 23, 2023

sejas commented Jan 11, 2023 •

edited

Loading

github-actions bot commented Jan 11, 2023 •

edited by matticbot

Loading

matticbot commented Jan 11, 2023 •

edited

Loading

sejas Jan 13, 2023 •

edited

Loading

wojtekn Jan 13, 2023 •

edited

Loading

a8ci18n commented Jan 13, 2023 •

edited

Loading