Add the ability to copy an existing site

common/types/stats.ts

@@ -33,6 +33,7 @@ export enum StatsMetric {
 	REMOTE_BLUEPRINT = 'remote-blueprint',
 	FILE_BLUEPRINT = 'file-blueprint',
 	NO_BLUEPRINT = 'no-blueprint',
+	SITE_COPIED = 'site-copied',
 }
 
 export type AggregateInterval = 'daily' | 'weekly' | 'monthly';

src/components/content-tab-settings.tsx

@@ -2,6 +2,7 @@ import { DropdownMenu, MenuGroup, Button } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import { PropsWithChildren } from 'react';
+import CopySite from 'src/components/copy-site';
 import { CopyTextButton } from 'src/components/copy-text-button';
 import DeleteSite from 'src/components/delete-site';
 import { useGetWpVersion } from 'src/hooks/use-get-wp-version';
@@ -64,7 +65,8 @@ export function ContentTabSettings( { selectedSite }: ContentTabSettingsProps )
 						className="flex items-center"
 					>
 						{ ( { onClose }: { onClose: () => void } ) => (
-							<MenuGroup>
+							<MenuGroup className="max-w-[160px]">
+								<CopySite onClose={ onClose } />
 								<DeleteSite onClose={ onClose } />
 							</MenuGroup>
 						) }

src/components/copy-site.tsx

@@ -0,0 +1,33 @@
+import { MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useI18n } from '@wordpress/react-i18n';
+import { useSiteDetails } from 'src/hooks/use-site-details';
+import { getIpcApi } from 'src/lib/get-ipc-api';
+
+type CopySiteProps = {
+	onClose: () => void;
+};
+
+const CopySite = ( { onClose }: CopySiteProps ) => {
+	const { __ } = useI18n();
+	const { selectedSite } = useSiteDetails();
+
+	const isCopyDisabled = ! selectedSite;
+
+	return (
+		<MenuItem
+			aria-disabled={ isCopyDisabled }
+			onClick={ () => {
+				if ( isCopyDisabled || ! selectedSite ) {
+					return;
+				}
+				onClose();
+				getIpcApi().triggerAddSiteCopy( selectedSite.id );
+			} }
+			disabled={ isCopyDisabled }
+		>
+			{ __( 'Copy site' ) }
+		</MenuItem>
+	);
+};
+export default CopySite;

src/components/site-form.tsx

@@ -55,6 +55,7 @@ interface SiteFormErrorProps {
 interface SiteFormProps {
 	className?: string;
 	children?: React.ReactNode;
+	beforeAdvancedSettings?: React.ReactNode;
 	siteName: string;
 	setSiteName: ( name: string ) => void;
 	sitePath?: string;
@@ -250,6 +251,7 @@ function FormImportComponent( {
 export const SiteForm = ( {
 	className,
 	children,
+	beforeAdvancedSettings,
 	siteName,
 	setSiteName,
 	phpVersion,
@@ -369,6 +371,8 @@ export const SiteForm = ( {
 					</>
 				) }
 
+				{ beforeAdvancedSettings }
+
 				{ onSelectPath && (
 					<>
 						<div className="flex flex-row items-center mb-1">

src/components/site-menu.tsx

@@ -249,6 +249,9 @@ export default function SiteMenu( { className }: SiteMenuProps ) {
 						setSelectedTab( 'settings' );
 						setIsEditModalOpen( true );
 						break;
+					case 'copy-site':
+						ipcApi.triggerAddSiteCopy( site.id );
+						break;
 					case 'delete':
 						await handleDeleteSite( site.id, site.name );
 						break;

src/constants.ts

@@ -98,6 +98,7 @@ export const IPC_VOID_HANDLERS = < const >[
 	'showItemInFolder',
 	'showNotification',
 	'authenticate',
+	'triggerAddSiteCopy',
 ];
 
 // What's New

src/hooks/use-site-details.tsx

@@ -34,6 +34,10 @@ interface SiteDetailsContext {
 		blueprint?: Blueprint,
 		callback?: ( site: SiteDetails ) => Promise< void >
 	) => Promise< SiteDetails | void >;
+	copySite: (
+		sourceId: string,
+		config: Omit< CopySiteConfig, 'siteId' >
+	) => Promise< SiteDetails | void >;
 	startServer: ( id: string ) => Promise< void >;
 	stopServer: ( id: string ) => Promise< void >;
 	stopAllRunningSites: () => Promise< void >;
@@ -55,6 +59,7 @@ const defaultContext: SiteDetailsContext = {
 	siteCreationMessages: {},
 	setSelectedSiteId: () => undefined,
 	createSite: async () => undefined,
+	copySite: async () => undefined,
 	startServer: async () => undefined,
 	stopServer: async () => undefined,
 	stopAllRunningSites: async () => undefined,
@@ -186,6 +191,15 @@ export function SiteDetailsProvider( { children }: SiteDetailsProviderProps ) {
 		}
 	} );
 
+	useIpcListener( 'copySiteProgress', ( _, { siteId, message } ) => {
+		if ( siteId && message ) {
+			setSiteCreationMessages( ( prev ) => ( {
+				...prev,
+				[ siteId ]: message,
+			} ) );
+		}
+	} );
+
 	const toggleLoadingServerForSite = useCallback( ( siteId: string ) => {
 		setLoadingServer( ( currentLoading ) => ( {
 			...currentLoading,
@@ -334,6 +348,95 @@ export function SiteDetailsProvider( { children }: SiteDetailsProviderProps ) {
 		[ selectedTab, setSelectedSiteId, setSelectedTab ]
 	);
 
+	const copySite = useCallback(
+		async (
+			sourceId: string,
+			config: Omit< CopySiteConfig, 'siteId' >
+		): Promise< SiteDetails | void > => {
+			const tempSiteId = crypto.randomUUID();
+			setAddingSiteIds( ( prev ) => [ ...prev, tempSiteId ] );
+			setData( ( prevData ) =>
+				sortSites( [
+					...prevData,
+					{
+						id: tempSiteId,
+						name: config.newName,
+						path: config.newPath,
+						port: -1,
+						running: false,
+						isAddingSite: true,
+						phpVersion: '',
+					},
+				] )
+			);
+			setSelectedSiteId( tempSiteId );
+
+			let newSite: SiteDetails;
+			try {
+				newSite = await getIpcApi().copySite( sourceId, {
+					...config,
+					siteId: tempSiteId,
+				} );
+				if ( ! newSite ) {
+					setTimeout( () => {
+						setAddingSiteIds( ( prev ) => prev.filter( ( id ) => id !== tempSiteId ) );
+						setData( ( prevData ) =>
+							sortSites( prevData.filter( ( site ) => site.id !== tempSiteId ) )
+						);
+					}, 2000 );
+					return;
+				}
+
+				setAddingSiteIds( ( prev ) => {
+					prev.push( newSite.id );
+					return prev;
+				} );
+
+				setSelectedSiteId( ( prevSelectedSiteId ) => {
+					if ( prevSelectedSiteId === tempSiteId ) {
+						if ( selectedTab !== 'overview' ) {
+							setSelectedTab( 'overview' );
+						}
+						return newSite.id;
+					}
+					return prevSelectedSiteId;
+				} );
+
+				setData( ( prevData ) =>
+					prevData.map( ( site ) => ( site.id === tempSiteId ? newSite : site ) )
+				);
+
+				setSiteCreationMessages( ( prev ) => {
+					const { [ newSite.id ]: _, ...rest } = prev;
+					return rest;
+				} );
+
+				return newSite;
+			} catch ( error ) {
+				getIpcApi().showErrorMessageBox( {
+					title: __( 'Failed to copy site' ),
+					message: __(
+						'An error occurred while copying the site. Please try again. If this problem persists, please contact support.'
+					),
+					error: simplifyErrorForDisplay( error ),
+					showOpenLogs: true,
+				} );
+
+				setTimeout( () => {
+					setAddingSiteIds( ( prev ) => prev.filter( ( id ) => id !== tempSiteId ) );
+					setData( ( prevData ) =>
+						sortSites( prevData.filter( ( site ) => site.id !== tempSiteId ) )
+					);
+				}, 2000 );
+			} finally {
+				setAddingSiteIds( ( prev ) =>
+					prev.filter( ( id ) => id !== tempSiteId && id !== newSite?.id )
+				);
+			}
+		},
+		[ selectedTab, setSelectedSiteId, setSelectedTab ]
+	);
+
 	const updateSite = useCallback( async ( site: SiteDetails ) => {
 		await getIpcApi().updateSite( site );
 		const updatedSites = await getIpcApi().getSiteDetails();
@@ -511,6 +614,7 @@ export function SiteDetailsProvider( { children }: SiteDetailsProviderProps ) {
 			data,
 			setSelectedSiteId,
 			createSite,
+			copySite,
 			updateSite,
 			startServer,
 			stopServer,
@@ -530,6 +634,7 @@ export function SiteDetailsProvider( { children }: SiteDetailsProviderProps ) {
 			data,
 			setSelectedSiteId,
 			createSite,
+			copySite,
 			updateSite,
 			startServer,
 			stopServer,