Studio: Move the create new WPcom site inside the modal (#740)

* Move the create new WPcom site inside the modal --------- Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com>
Automattic · Dec 13, 2024 · cf5a393 · cf5a393
1 parent 8eca8f3
commit cf5a393
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 78 deletions.
diff --git a/src/components/connect-create-buttons.tsx b/src/components/connect-create-buttons.tsx
@@ -1,71 +1,84 @@
 import { __ } from '@wordpress/i18n';
+import { useOffline } from '../hooks/use-offline';
 import { cx } from '../lib/cx';
 import { getIpcApi } from '../lib/get-ipc-api';
 import { ArrowIcon } from './arrow-icon';
 import Button, { ButtonVariant } from './button';
 import offlineIcon from './offline-icon';
 import { Tooltip } from './tooltip';
 
-interface ConnectCreateButtonsProps {
-	connectSite: () => void;
-	isOffline: boolean;
-	connectButtonVariant: ButtonVariant;
-	createButtonVariant: ButtonVariant;
+interface ConnectButtonProps {
+	variant: ButtonVariant;
+	connectSite?: () => void;
 	disableConnectButtonStyle?: boolean;
+	className?: string;
+}
+
+interface CreateButtonProps {
+	variant: ButtonVariant;
 	selectedSite: SiteDetails;
+	text?: string;
+	className?: string;
 }
 
-export const ConnectCreateButtons = ( {
+export const ConnectButton = ( {
+	variant,
 	connectSite,
-	isOffline,
-	createButtonVariant,
-	connectButtonVariant,
 	disableConnectButtonStyle,
-	selectedSite,
-}: ConnectCreateButtonsProps ) => {
+	className,
+}: ConnectButtonProps ) => {
+	const isOffline = useOffline();
 	return (
-		<>
-			<Tooltip
-				disabled={ ! isOffline }
-				text={ __( 'Connecting a site requires an internet connection.' ) }
-				icon={ offlineIcon }
-				placement="top-start"
+		<Tooltip
+			disabled={ ! isOffline }
+			text={ __( 'Connecting a site requires an internet connection.' ) }
+			icon={ offlineIcon }
+			placement="top-start"
+		>
+			<Button
+				onClick={ connectSite }
+				disabled={ isOffline }
+				aria-disabled={ isOffline }
+				variant={ variant }
+				className={ cx(
+					! disableConnectButtonStyle && ! isOffline && '!text-a8c-blueberry !shadow-a8c-blueberry',
+					className
+				) }
 			>
-				<Button
-					onClick={ connectSite }
-					disabled={ isOffline }
-					aria-disabled={ isOffline }
-					variant={ connectButtonVariant }
-					className={ cx(
-						! disableConnectButtonStyle &&
-							! isOffline &&
-							'!text-a8c-blueberry !shadow-a8c-blueberry'
-					) }
-				>
-					{ __( 'Connect site' ) }
-				</Button>
-			</Tooltip>
-			<Tooltip
-				disabled={ ! isOffline }
-				text={ __( 'Creating a site requires an internet connection.' ) }
-				icon={ offlineIcon }
-				placement="top-start"
+				{ __( 'Connect site' ) }
+			</Button>
+		</Tooltip>
+	);
+};
+
+export const CreateButton = ( {
+	variant,
+	selectedSite,
+	text = __( 'Create new site' ),
+	className,
+}: CreateButtonProps ) => {
+	const isOffline = useOffline();
+	return (
+		<Tooltip
+			disabled={ ! isOffline }
+			text={ __( 'Creating a site requires an internet connection.' ) }
+			icon={ offlineIcon }
+			placement="top-start"
+		>
+			<Button
+				onClick={ () => {
+					getIpcApi().openURL(
+						`https://wordpress.com/setup/new-hosted-site?ref=studio&section=studio-sync&studioSiteId=${ selectedSite.id }`
+					);
+				} }
+				variant={ variant }
+				className={ cx( ! isOffline && '!text-a8c-blueberry !shadow-a8c-blueberry', className ) }
+				disabled={ isOffline }
+				aria-disabled={ isOffline }
 			>
-				<Button
-					onClick={ () => {
-						getIpcApi().openURL(
-							`https://wordpress.com/setup/new-hosted-site?ref=studio&section=studio-sync&studioSiteId=${ selectedSite.id }`
-						);
-					} }
-					variant={ createButtonVariant }
-					className={ cx( ! isOffline && '!text-a8c-blueberry !shadow-a8c-blueberry' ) }
-					disabled={ isOffline }
-					aria-disabled={ isOffline }
-				>
-					{ __( 'Create new site' ) }
-					<ArrowIcon />
-				</Button>
-			</Tooltip>
-		</>
+				{ text }
+				<ArrowIcon />
+			</Button>
+		</Tooltip>
 	);
 };
diff --git a/src/components/content-tab-sync.tsx b/src/components/content-tab-sync.tsx
@@ -9,7 +9,7 @@ import { useOffline } from '../hooks/use-offline';
 import { getIpcApi } from '../lib/get-ipc-api';
 import { ArrowIcon } from './arrow-icon';
 import Button from './button';
-import { ConnectCreateButtons } from './connect-create-buttons';
+import { ConnectButton, CreateButton } from './connect-create-buttons';
 import offlineIcon from './offline-icon';
 import { SyncConnectedSites } from './sync-connected-sites';
 import { SyncSitesModalSelector } from './sync-sites-modal-selector';
@@ -61,19 +61,16 @@ function CreateConnectSite( {
 	selectedSite: SiteDetails;
 } ) {
 	const { __ } = useI18n();
-	const isOffline = useOffline();
 
 	return (
 		<div className="mt-8">
 			<div className="flex gap-4">
-				<ConnectCreateButtons
+				<ConnectButton
+					variant="primary"
 					connectSite={ openSitesSyncSelector }
-					isOffline={ isOffline }
-					connectButtonVariant="primary"
-					createButtonVariant="secondary"
 					disableConnectButtonStyle={ true }
-					selectedSite={ selectedSite }
 				/>
+				<CreateButton variant="secondary" selectedSite={ selectedSite } />
 			</div>
 		</div>
 	);
@@ -214,6 +211,7 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails }
 						}
 						handleConnect( newConnectedSite );
 					} }
+					selectedSite={ selectedSite }
 				/>
 			) }
 		</div>

diff --git a/src/components/sync-connected-sites.tsx b/src/components/sync-connected-sites.tsx
@@ -15,7 +15,7 @@ import { getIpcApi } from '../lib/get-ipc-api';
 import { ArrowIcon } from './arrow-icon';
 import { Badge } from './badge';
 import Button from './button';
-import { ConnectCreateButtons } from './connect-create-buttons';
+import { ConnectButton } from './connect-create-buttons';
 import { OpenSitesSyncSelector } from './content-tab-sync';
 import { CircleRedCrossIcon } from './icons/circle-red-cross';
 import offlineIcon from './offline-icon';
@@ -409,8 +409,6 @@ export function SyncConnectedSites( {
 	disconnectSite: ( id: number ) => void;
 	selectedSite: SiteDetails;
 } ) {
-	const isOffline = useOffline();
-
 	const siteSections: ConnectedSiteSection[] = useMemo( () => {
 		const siteSections: ConnectedSiteSection[] = [];
 		const processedSites = new Set< number >();
@@ -460,13 +458,7 @@ export function SyncConnectedSites( {
 			</div>
 
 			<div className="flex mt-auto gap-4 pt-5 pb-4 px-8 border-t border-a8c-gray-5 flex-shrink-0">
-				<ConnectCreateButtons
-					connectSite={ openSitesSyncSelector }
-					isOffline={ isOffline }
-					connectButtonVariant="secondary"
-					createButtonVariant="secondary"
-					selectedSite={ selectedSite }
-				/>
+				<ConnectButton variant="secondary" connectSite={ openSitesSyncSelector } />
 			</div>
 		</div>
 	);

diff --git a/src/components/sync-sites-modal-selector.tsx b/src/components/sync-sites-modal-selector.tsx
@@ -8,9 +8,9 @@ import { cx } from '../lib/cx';
 import { getIpcApi } from '../lib/get-ipc-api';
 import { Badge } from './badge';
 import Button from './button';
+import { CreateButton } from './connect-create-buttons';
 import Modal from './modal';
 import offlineIcon from './offline-icon';
-import { WordPressShortLogo } from './wordpress-short-logo';
 
 const SearchControl = process.env.NODE_ENV === 'test' ? () => null : SearchControlWp;
 
@@ -20,12 +20,14 @@ export function SyncSitesModalSelector( {
 	onConnect,
 	syncSites,
 	onInitialRender,
+	selectedSite,
 }: {
 	isLoading?: boolean;
 	onRequestClose: () => void;
 	syncSites: SyncSite[];
 	onConnect: ( siteId: number ) => void;
 	onInitialRender?: () => void;
+	selectedSite: SiteDetails;
 } ) {
 	const { __ } = useI18n();
 	const [ selectedSiteId, setSelectedSiteId ] = useState< number | null >( null );
@@ -87,6 +89,7 @@ export function SyncSitesModalSelector( {
 						onRequestClose();
 					} }
 					disabled={ ! selectedSiteId }
+					selectedSite={ selectedSite }
 				/>
 
 				{ isOffline && (
@@ -272,22 +275,23 @@ function Footer( {
 	onRequestClose,
 	onConnect,
 	disabled,
+	selectedSite,
 }: {
 	onRequestClose: () => void;
 	onConnect: () => void;
 	disabled: boolean;
+	selectedSite: SiteDetails;
 } ) {
 	const { __ } = useI18n();
+
 	return (
 		<div className="flex px-8 py-4 border-t border-a8c-gray-5 justify-between">
-			<Button
-				variant="link"
-				className="flex items-center mb-1"
-				onClick={ () => getIpcApi().openURL( 'https://wordpress.com/hosting/' ) }
-			>
-				<div className="a8c-subtitle-small text-black">{ __( 'Powered by' ) }</div>
-				<WordPressShortLogo className="h-4.5" />
-			</Button>
+			<CreateButton
+				variant="secondary"
+				selectedSite={ selectedSite }
+				text={ __( 'Create a new WordPress.com site' ) }
+				className="!shadow-none !px-0"
+			/>
 			<div className="flex gap-4">
 				<Button variant="link" onClick={ onRequestClose }>
 					{ __( 'Cancel' ) }