Implement new site launch and import buttons (#2002)

* Implement new site launch and import buttons

* Fix linting errors

* Use connect button when there is a site connected

* Simplify state, update button text and fix tests

* Update wording, reuse ConnectButton component

* Add a new type and simplify code

* Fix types

* Simplify logic

* Remove superfluous comment and simplify

* Use strict equality operator

* Use local variable to avoid non-null assertion

* Simplify logic for selecting sites, fix typo

* Move SyncModalMode piece of state to Redux

* Apply code review suggestion, use Next for Sync dialog button

* Do not connect if cancelling the Push or Pull dialog

* Connect site before calling push/pull

* Add border and text color from design to secondary button

* Disable buttons when there is another site syncing

Author: epeicher

src/modules/sync/components/connect-button.tsx

@@ -3,40 +3,40 @@ import Button, { ButtonVariant } from 'src/components/button';
 import offlineIcon from 'src/components/offline-icon';
 import { Tooltip } from 'src/components/tooltip';
 import { useOffline } from 'src/hooks/use-offline';
-import { cx } from 'src/lib/cx';
 
 interface ConnectButtonProps {
 	variant: ButtonVariant;
 	connectSite?: () => void;
-	disableConnectButtonStyle?: boolean;
+	disabled?: boolean;
 	className?: string;
 	children?: React.ReactNode;
+	tooltipText?: string;
 }
 
 export const ConnectButton = ( {
 	variant,
 	connectSite,
-	disableConnectButtonStyle,
+	disabled,
 	className,
 	children,
+	tooltipText,
 }: ConnectButtonProps ) => {
 	const isOffline = useOffline();
+	const tooltipContent = tooltipText ?? __( 'Connecting a site requires an internet connection.' );
+	const isDisabled = disabled || isOffline;
 	return (
 		<Tooltip
-			disabled={ ! isOffline }
-			text={ __( 'Connecting a site requires an internet connection.' ) }
+			disabled={ ! isDisabled }
+			text={ tooltipContent }
 			icon={ offlineIcon }
 			placement="top-start"
 		>
 			<Button
 				onClick={ connectSite }
-				disabled={ isOffline }
-				aria-disabled={ isOffline }
+				disabled={ isDisabled }
+				aria-disabled={ isDisabled }
 				variant={ variant }
-				className={ cx(
-					! disableConnectButtonStyle && ! isOffline && '!text-a8c-blue-50 !shadow-a8c-blue-50',
-					className
-				) }
+				className={ className }
 			>
 				{ children }
 			</Button>

src/modules/sync/components/sync-sites-modal-selector.tsx

@@ -17,6 +17,7 @@ import { EnvironmentBadge } from 'src/modules/sync/components/environment-badge'
 import { getSiteEnvironment } from 'src/modules/sync/lib/environment-utils';
 import { useI18nLocale } from 'src/stores';
 import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
+import type { SyncModalMode } from 'src/modules/sync/types';
 
 const SearchControl = process.env.NODE_ENV === 'test' ? () => null : SearchControlWp;
 
@@ -32,13 +33,15 @@ export function SyncSitesModalSelector( {
 	syncSites,
 	onInitialRender,
 	selectedSite,
+	mode = 'connect',
 }: {
 	isLoading?: boolean;
 	onRequestClose: () => void;
 	syncSites: SyncSite[];
 	onConnect: ( siteId: number ) => void;
 	onInitialRender?: () => void;
 	selectedSite: SiteDetails;
+	mode?: SyncModalMode;
 } ) {
 	const { __ } = useI18n();
 	const [ selectedSiteId, setSelectedSiteId ] = useState< number | null >( null );
@@ -53,6 +56,18 @@ export function SyncSitesModalSelector( {
 	} );
 	const isEmpty = filteredSites.length === 0;
 
+	const getModalTitle = () => {
+		switch ( mode ) {
+			case 'push':
+				return __( 'Publish your site' );
+			case 'pull':
+				return __( 'Select a site to import' );
+			case 'connect':
+			default:
+				return __( 'Connect your site' );
+		}
+	};
+
 	useEffect( () => {
 		if ( onInitialRender ) {
 			onInitialRender();
@@ -63,7 +78,7 @@ export function SyncSitesModalSelector( {
 		<Modal
 			className="w-3/5 min-w-[550px] h-full max-h-[84vh] [&>div]:!p-0"
 			onRequestClose={ onRequestClose }
-			title={ __( 'Connect your site' ) }
+			title={ getModalTitle() }
 		>
 			<div className="relative" data-testid="sync-sites-modal-selector">
 				<SearchSites searchQuery={ searchQuery } setSearchQuery={ setSearchQuery } />
@@ -100,11 +115,12 @@ export function SyncSitesModalSelector( {
 					} }
 					disabled={ ! selectedSiteId }
 					selectedSite={ selectedSite }
+					mode={ mode }
 				/>
 
 				{ isOffline && (
 					<div className="absolute inset-0 bg-white/80 z-10 flex items-center justify-center">
-						<SyncSitesOfflineView />
+						<SyncSitesOfflineView mode={ mode } />
 					</div>
 				) }
 			</div>
@@ -335,14 +351,27 @@ function Footer( {
 	onConnect,
 	disabled,
 	selectedSite,
+	mode = 'connect',
 }: {
 	onRequestClose: () => void;
 	onConnect: () => void;
 	disabled: boolean;
 	selectedSite: SiteDetails;
+	mode?: SyncModalMode;
 } ) {
 	const { __ } = useI18n();
 
+	const getButtonText = () => {
+		switch ( mode ) {
+			case 'push':
+			case 'pull':
+				return __( 'Next' );
+			case 'connect':
+			default:
+				return __( 'Connect' );
+		}
+	};
+
 	useEffect( () => {
 		if ( ! disabled ) {
 			focusConnectButton();
@@ -361,20 +390,31 @@ function Footer( {
 					{ __( 'Cancel' ) }
 				</Button>
 				<Button id="connect-button" variant="primary" disabled={ disabled } onClick={ onConnect }>
-					{ __( 'Connect' ) }
+					{ getButtonText() }
 				</Button>
 			</div>
 		</div>
 	);
 }
 
-const SyncSitesOfflineView = () => {
-	const offlineMessage = __( 'Connecting a site requires an internet connection.' );
+const SyncSitesOfflineView = ( { mode = 'connect' }: { mode?: SyncModalMode } ) => {
+	const { __ } = useI18n();
+	const getOfflineMessage = () => {
+		switch ( mode ) {
+			case 'push':
+				return __( 'Publishing your site requires an internet connection.' );
+			case 'pull':
+				return __( 'Importing a remote site requires an internet connection.' );
+			case 'connect':
+			default:
+				return __( 'Connecting a site requires an internet connection.' );
+		}
+	};
 
 	return (
 		<div className="flex items-center justify-center h-12 px-2 pt-4 text-a8c-gray-70 gap-1">
 			<Icon className="m-1 fill-a8c-gray-70" size={ 24 } icon={ offlineIcon } />
-			<span className="text-[13px] leading-[16px]">{ offlineMessage }</span>
+			<span className="text-[13px] leading-[16px]">{ getOfflineMessage() }</span>
 		</div>
 	);
 };

src/modules/sync/index.tsx

@@ -1,17 +1,23 @@
 import { check, Icon } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
-import { PropsWithChildren, useEffect } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 import { ArrowIcon } from 'src/components/arrow-icon';
 import Button from 'src/components/button';
 import offlineIcon from 'src/components/offline-icon';
 import { Tooltip } from 'src/components/tooltip';
+import { useSyncSites } from 'src/hooks/sync-sites';
 import { useAuth } from 'src/hooks/use-auth';
 import { useOffline } from 'src/hooks/use-offline';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { ConnectButton } from 'src/modules/sync/components/connect-button';
 import { SyncConnectedSites } from 'src/modules/sync/components/sync-connected-sites';
+import { SyncDialog } from 'src/modules/sync/components/sync-dialog';
 import { SyncSitesModalSelector } from 'src/modules/sync/components/sync-sites-modal-selector';
 import { SyncTabImage } from 'src/modules/sync/components/sync-tab-image';
+import {
+	convertTreeToPullOptions,
+	convertTreeToPushOptions,
+} from 'src/modules/sync/lib/convert-tree-to-sync-options';
 import { useAppDispatch, useRootSelector } from 'src/stores';
 import {
 	useConnectedSitesData,
@@ -21,6 +27,7 @@ import {
 	connectedSitesActions,
 } from 'src/stores/sync';
 import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
+import type { SyncModalMode } from 'src/modules/sync/types';
 
 function SiteSyncDescription( { children }: PropsWithChildren ) {
 	const { __ } = useI18n();
@@ -34,13 +41,13 @@ function SiteSyncDescription( { children }: PropsWithChildren ) {
 				</div>
 				<div className="max-w-[40ch] text-a8c-gray-70 a8c-body">
 					{ __(
-						'Connect your existing WordPress.com or Pressable sites with Jetpack activated, or create a new one. Then share your work with the world.'
+						'Launch your existing WordPress.com or Jetpack-activated Pressable sites, or import an existing one. Then, share your work with the world.'
 					) }
 				</div>
 				<div className="mt-6">
 					{ [
 						__( 'Push and pull changes from your live site.' ),
-						__( 'Connect multiple environments.' ),
+						__( 'Supports staging and production sites.' ),
 						__( 'Sync database and file changes.' ),
 					].map( ( text ) => (
 						<div key={ text } className="text-a8c-gray-70 a8c-body flex items-center">
@@ -120,9 +127,14 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails }
 	const { __ } = useI18n();
 	const dispatch = useAppDispatch();
 	const isModalOpen = useRootSelector( connectedSitesSelectors.selectIsModalOpen );
+	const reduxModalMode = useRootSelector( connectedSitesSelectors.selectModalMode );
 	const { connectedSites } = useConnectedSitesData();
 	const { syncSites, isFetching, refetchSites } = useSyncSitesData();
 	const { connectSite, disconnectSite } = useConnectedSitesOperations();
+	const { pushSite, pullSite, isAnySitePulling, isAnySitePushing } = useSyncSites();
+	const isAnySiteSyncing = isAnySitePulling || isAnySitePushing;
+
+	const [ selectedRemoteSite, setSelectedRemoteSite ] = useState< SyncSite | null >( null );
 
 	const { isAuthenticated } = useAuth();
 
@@ -147,6 +159,41 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails }
 		}
 	};
 
+	const handleLaunchSite = () => {
+		dispatch( connectedSitesActions.openModal( 'push' ) );
+	};
+
+	const handleImportSite = () => {
+		dispatch( connectedSitesActions.openModal( 'pull' ) );
+	};
+
+	const handleSiteSelection = async ( siteId: number, mode: SyncModalMode | null ) => {
+		const disconnectSiteId =
+			typeof isModalOpen === 'object' ? isModalOpen.disconnectSiteId : undefined;
+
+		if ( disconnectSiteId ) {
+			await disconnectSite( disconnectSiteId );
+		}
+
+		const selectedSiteFromList = syncSites.find( ( site ) => site.id === siteId );
+		if ( ! selectedSiteFromList ) {
+			getIpcApi().showErrorMessageBox( {
+				title: __( 'Failed to select site' ),
+				message: __( 'Please try again.' ),
+			} );
+			return;
+		}
+
+		if ( mode === 'push' || mode === 'pull' ) {
+			dispatch( connectedSitesActions.setModalMode( mode ) );
+			setSelectedRemoteSite( selectedSiteFromList );
+		} else {
+			await handleConnect( selectedSiteFromList );
+			dispatch( connectedSitesActions.setModalMode( null ) );
+			dispatch( connectedSitesActions.closeModal() );
+		}
+	};
+
 	return (
 		<div className="flex flex-col h-full overflow-y-auto">
 			{ connectedSites.length > 0 ? (
@@ -159,54 +206,79 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails }
 					<div className="sticky bottom-0 bg-white/[0.8] backdrop-blur-sm w-full px-8 py-6 mt-auto">
 						<ConnectButton
 							variant="primary"
-							connectSite={ () => dispatch( connectedSitesActions.openModal() ) }
-							disableConnectButtonStyle={ true }
+							connectSite={ () => dispatch( connectedSitesActions.openModal( 'connect' ) ) }
 						>
 							{ __( 'Connect another site' ) }
 						</ConnectButton>
 					</div>
 				</div>
 			) : (
 				<SiteSyncDescription>
-					<div className="mt-8">
+					<div className="mt-8 flex flex-wrap gap-4">
 						<ConnectButton
 							variant="primary"
-							connectSite={ () => dispatch( connectedSitesActions.openModal() ) }
-							disableConnectButtonStyle={ true }
+							connectSite={ handleLaunchSite }
+							disabled={ isAnySiteSyncing }
+							tooltipText={
+								isAnySiteSyncing
+									? __(
+											'Another site is syncing. Please wait for the sync to finish before you publish your site.'
+									  )
+									: __( 'Publishing your site requires an internet connection.' )
+							}
+						>
+							{ __( 'Publish site' ) }
+						</ConnectButton>
+						<ConnectButton
+							variant="secondary"
+							connectSite={ handleImportSite }
+							className={ isAnySiteSyncing ? '' : '!text-a8c-blue-50 !shadow-a8c-blue-50' }
+							disabled={ isAnySiteSyncing }
+							tooltipText={ __( 'Importing a remote site requires an internet connection.' ) }
 						>
-							{ __( 'Connect site' ) }
+							{ __( 'Pull site' ) }
 						</ConnectButton>
 					</div>
 				</SiteSyncDescription>
 			) }
 
 			{ isModalOpen && (
 				<SyncSitesModalSelector
+					mode={ reduxModalMode || 'connect' }
 					isLoading={ isFetching }
-					onRequestClose={ () => dispatch( connectedSitesActions.closeModal() ) }
+					onRequestClose={ () => {
+						dispatch( connectedSitesActions.closeModal() );
+					} }
 					syncSites={ syncSites }
 					onInitialRender={ refetchSites }
-					onConnect={ async ( siteId ) => {
-						const disconnectSiteId =
-							typeof isModalOpen === 'object' ? isModalOpen.disconnectSiteId : undefined;
-
-						if ( disconnectSiteId ) {
-							await disconnectSite( disconnectSiteId );
-						}
-
-						const newConnectedSite = syncSites.find( ( site ) => site.id === siteId );
-						if ( ! newConnectedSite ) {
-							getIpcApi().showErrorMessageBox( {
-								title: __( 'Failed to connect to site' ),
-								message: __( 'Please try again.' ),
-							} );
-							return;
-						}
-						void handleConnect( newConnectedSite );
+					onConnect={ async ( siteId: number ) => {
+						await handleSiteSelection( siteId, reduxModalMode );
 					} }
 					selectedSite={ selectedSite }
 				/>
 			) }
+
+			{ reduxModalMode && reduxModalMode !== 'connect' && selectedRemoteSite && (
+				<SyncDialog
+					type={ reduxModalMode }
+					localSite={ selectedSite }
+					remoteSite={ selectedRemoteSite }
+					onPush={ async ( tree ) => {
+						await handleConnect( selectedRemoteSite );
+						const pushOptions = convertTreeToPushOptions( tree );
+						void pushSite( selectedRemoteSite, selectedSite, pushOptions );
+					} }
+					onPull={ async ( tree ) => {
+						await handleConnect( selectedRemoteSite );
+						const pullOptions = convertTreeToPullOptions( tree );
+						void pullSite( selectedRemoteSite, selectedSite, pullOptions );
+					} }
+					onRequestClose={ () => {
+						setSelectedRemoteSite( null );
+						dispatch( connectedSitesActions.setModalMode( null ) );
+					} }
+				/>
+			) }
 		</div>
 	);
 }