Customize Studio site URL

src/components/content-tab-settings.tsx

@@ -4,6 +4,7 @@ import { useGetWpVersion } from '../hooks/use-get-wp-version';
 import { decodePassword } from '../lib/passwords';
 import { CopyTextButton } from './copy-text-button';
 import DeleteSite from './delete-site';
+import EditAbsoluteUrl from './edit-absolute-url';
 import EditPhpVersion from './edit-php-version';
 import EditSite from './edit-site';
 
@@ -29,6 +30,7 @@ export function ContentTabSettings( { selectedSite }: ContentTabSettingsProps )
 	const storedPassword = decodePassword( selectedSite.adminPassword ?? '' );
 	const password = storedPassword === '' ? 'password' : storedPassword;
 	const wpVersion = useGetWpVersion( selectedSite );
+	const url = selectedSite.absoluteUrl || `http://localhost:${ selectedSite.port }`;
 	return (
 		<div className="p-8">
 			<table className="mb-2 m-w-full" cellPadding={ 0 } cellSpacing={ 0 }>
@@ -44,14 +46,17 @@ export function ContentTabSettings( { selectedSite }: ContentTabSettingsProps )
 							<EditSite />
 						</div>
 					</SettingsRow>
-					<SettingsRow label={ __( 'Local URL' ) }>
-						<CopyTextButton
-							text={ `http://localhost:${ selectedSite.port }` }
-							label={ `localhost:${ selectedSite.port }, ${ __( 'Copy site url to clipboard' ) }` }
-							copyConfirmation={ __( 'Copied!' ) }
-						>
-							{ `localhost:${ selectedSite.port }` }
-						</CopyTextButton>
+					<SettingsRow label={ __( 'URL' ) }>
+						<div className="flex">
+							<CopyTextButton
+								text={ url }
+								label={ `${ url }, ${ __( 'Copy site url to clipboard' ) }` }
+								copyConfirmation={ __( 'Copied!' ) }
+							>
+								{ url.replace( /http(s)?:\/\//, '' ) }
+							</CopyTextButton>
+							<EditAbsoluteUrl />
+						</div>
 					</SettingsRow>
 					<SettingsRow label={ __( 'Local path' ) }>
 						<div className="flex">

src/components/edit-absolute-url.tsx

@@ -0,0 +1,89 @@
+import { useI18n } from '@wordpress/react-i18n';
+import { FormEvent, useCallback, useState } from 'react';
+import { useSiteDetails } from '../hooks/use-site-details';
+import Button from './button';
+import Modal from './modal';
+import TextControlComponent from './text-control';
+
+export default function EditAbsoluteUrl() {
+	const { __ } = useI18n();
+	const { updateSite, selectedSite, stopServer, startServer } = useSiteDetails();
+	const [ isEditingSite, setIsEditingSite ] = useState( false );
+	const [ showEditAbsoluteUrlModal, setShowEditAbsoluteUrlModal ] = useState( false );
+	const [ localUrl, setLocalUrl ] = useState(
+		selectedSite?.absoluteUrl || `http://localhost:${ selectedSite?.port }`
+	);
+
+	const onLocalUrlEdit = useCallback(
+		async ( event: FormEvent ) => {
+			event.preventDefault();
+			if ( ! selectedSite ) {
+				return;
+			}
+
+			setIsEditingSite( true );
+			await updateSite( {
+				...selectedSite,
+				absoluteUrl: localUrl,
+			} );
+			if ( selectedSite.running ) {
+				await stopServer( selectedSite.id );
+				await startServer( selectedSite.id );
+			}
+			setIsEditingSite( false );
+			setShowEditAbsoluteUrlModal( false );
+		},
+		[ selectedSite, localUrl, updateSite, stopServer, startServer ]
+	);
+
+	return (
+		<>
+			{ showEditAbsoluteUrlModal && (
+				<Modal
+					size="medium"
+					title={ __( 'Edit Local URL' ) }
+					isDismissible
+					focusOnMount="firstContentElement"
+					onRequestClose={ () => setShowEditAbsoluteUrlModal( false ) }
+				>
+					<form onSubmit={ onLocalUrlEdit }>
+						<label className="flex flex-col gap-1.5 leading-4 mb-6">
+							<span className="font-semibold">{ __( 'Local URL' ) }</span>
+							<TextControlComponent onChange={ setLocalUrl } value={ localUrl } />
+						</label>
+						<div className="flex flex-row justify-end gap-x-5 mt-6">
+							<Button
+								onClick={ () => setShowEditAbsoluteUrlModal( false ) }
+								disabled={ isEditingSite }
+								variant="tertiary"
+							>
+								{ __( 'Cancel' ) }
+							</Button>
+							<Button
+								type="submit"
+								variant="primary"
+								isBusy={ isEditingSite }
+								disabled={ isEditingSite || ! selectedSite || ! localUrl.trim() }
+							>
+								{ isEditingSite ? __( 'Restarting server…' ) : __( 'Save' ) }
+							</Button>
+						</div>
+					</form>
+				</Modal>
+			) }
+			<Button
+				disabled={ ! selectedSite }
+				className="!mx-4 shrink-0"
+				onClick={ () => {
+					if ( selectedSite ) {
+						setShowEditAbsoluteUrlModal( true );
+					}
+				} }
+				label={ __( 'Edit Local URL' ) }
+				variant="link"
+			>
+				{ __( 'Edit' ) }
+			</Button>
+		</>
+	);
+}

src/ipc-types.d.ts

@@ -17,6 +17,7 @@ interface StoppedSiteDetails {
 	id: string;
 	name: string;
 	path: string;
+	absoluteUrl?: string;
 	port?: number;
 	phpVersion: string;
 	adminPassword?: string;

src/site-server.ts

@@ -88,8 +88,7 @@ export class SiteServer {
 			siteTitle: this.details.name,
 			php: this.details.phpVersion,
 		} );
-		const absoluteUrl = `http://localhost:${ port }`;
-		options.absoluteUrl = absoluteUrl;
+		options.absoluteUrl = this.details.absoluteUrl || `http://localhost:${ port }`;
 		options.siteLanguage = await getPreferredSiteLanguage( options.wordPressVersion );
 
 		if ( options.mode !== WPNowMode.WORDPRESS ) {
@@ -124,6 +123,7 @@ export class SiteServer {
 			name: site.name,
 			path: site.path,
 			phpVersion: site.phpVersion,
+			absoluteUrl: site.absoluteUrl,
 		};
 	}
 

src/storage/user-data.ts

@@ -104,29 +104,35 @@ export async function saveUserData( data: UserData ): Promise< void > {
 function toDiskFormat( { sites, ...rest }: UserData ): PersistedUserData {
 	return {
 		version: 1,
-		sites: sites.map( ( { id, path, adminPassword, port, phpVersion, name, themeDetails } ) => {
-			// No object spreading allowed. TypeScript's structural typing is too permissive and
-			// will permit us to persist properties that aren't in the type definition.
-			// Add each property explicitly instead.
-			const persistedSiteDetails: PersistedUserData[ 'sites' ][ number ] = {
-				id,
-				name,
-				path,
-				adminPassword,
-				port,
-				phpVersion,
-				themeDetails: {
-					name: themeDetails?.name || '',
-					path: themeDetails?.path || '',
-					slug: themeDetails?.slug || '',
-					isBlockTheme: themeDetails?.isBlockTheme || false,
-					supportsWidgets: themeDetails?.supportsWidgets || false,
-					supportsMenus: themeDetails?.supportsMenus || false,
-				},
-			};
+		sites: sites.map(
+			( { id, path, adminPassword, port, phpVersion, name, themeDetails, absoluteUrl } ) => {
+				// No object spreading allowed. TypeScript's structural typing is too permissive and
+				// will permit us to persist properties that aren't in the type definition.
+				// Add each property explicitly instead.
+				const persistedSiteDetails: PersistedUserData[ 'sites' ][ number ] = {
+					id,
+					name,
+					path,
+					adminPassword,
+					port,
+					phpVersion,
+					themeDetails: {
+						name: themeDetails?.name || '',
+						path: themeDetails?.path || '',
+						slug: themeDetails?.slug || '',
+						isBlockTheme: themeDetails?.isBlockTheme || false,
+						supportsWidgets: themeDetails?.supportsWidgets || false,
+						supportsMenus: themeDetails?.supportsMenus || false,
+					},
+				};
 
-			return persistedSiteDetails;
-		} ),
+				if ( absoluteUrl ) {
+					persistedSiteDetails.absoluteUrl = absoluteUrl;
+				}
+
+				return persistedSiteDetails;
+			}
+		),
 		...rest,
 	};
 }