Refactor preview site updating to depend on CLI

cli/commands/preview/create.ts

@@ -1,6 +1,7 @@
 import os from 'os';
 import path from 'path';
 import { __, sprintf } from '@wordpress/i18n';
+import { CreateLoggerAction as LoggerAction } from 'cli/commands/preview/logger-actions';
 import { uploadArchive, waitForSiteReady } from 'cli/lib/api';
 import { getAuthToken } from 'cli/lib/appdata';
 import { createArchive, cleanup } from 'cli/lib/archive';
@@ -9,14 +10,6 @@ import { validateSiteFolder, validateSiteSize } from 'cli/lib/validation';
 import { Logger, LoggerError } from 'cli/logger';
 import { RegisterCommand, OutputFormat } from 'cli/types';
 
-enum LoggerAction {
-	VALIDATE = 'validate',
-	ARCHIVE = 'archive',
-	UPLOAD = 'upload',
-	READY = 'ready',
-	APPDATA = 'appdata',
-}
-
 async function runCommand( siteFolder: string, outputFormat?: OutputFormat ): Promise< void > {
 	const archivePath = path.join(
 		os.tmpdir(),
@@ -46,8 +39,15 @@ async function runCommand( siteFolder: string, outputFormat?: OutputFormat ): Pr
 		);
 
 		logger.reportStart( LoggerAction.APPDATA, __( 'Saving preview site to Studio...' ) );
-		await upsertPreviewSiteInAppdata( siteFolder, uploadResponse.site_id, uploadResponse.site_url );
+		const snapshot = await upsertPreviewSiteInAppdata(
+			siteFolder,
+			uploadResponse.site_id,
+			uploadResponse.site_url
+		);
 		logger.reportSuccess( __( 'Preview site saved to Studio' ) );
+
+		logger.reportKeyValuePair( 'name', snapshot.name );
+		logger.reportKeyValuePair( 'url', snapshot.url );
 	} catch ( error ) {
 		if ( error instanceof LoggerError ) {
 			logger.reportError( error );
@@ -60,14 +60,14 @@ async function runCommand( siteFolder: string, outputFormat?: OutputFormat ): Pr
 	}
 }
 
-export const registerCommand: RegisterCommand = ( program ) => {
-	program
+export const registerCommand: RegisterCommand = ( parentCommand, rootCommand = parentCommand ) => {
+	parentCommand
 		.command( 'go [folder]' )
 		.description(
 			__( 'Create a preview site from the specified folder (defaults to current directory)' )
 		)
 		.action( async ( siteFolder: string = process.cwd() ) => {
-			const options = program.opts();
-			await runCommand( siteFolder, options.outputFormat );
+			const outputFormat = rootCommand.opts().outputFormat;
+			await runCommand( siteFolder, outputFormat );
 		} );
 };

cli/commands/preview/delete.ts

@@ -1,16 +1,12 @@
 import { __ } from '@wordpress/i18n';
+import { DeleteLoggerAction as LoggerAction } from 'cli/commands/preview/logger-actions';
 import { deleteSnapshot } from 'cli/lib/api';
 import { getAuthToken } from 'cli/lib/appdata';
 import { deleteSnapshotFromAppdata, getSnapshotsFromAppdata } from 'cli/lib/snapshots';
 import { normalizeHostname } from 'cli/lib/utils';
 import { Logger, LoggerError } from 'cli/logger';
 import { RegisterCommand, OutputFormat } from 'cli/types';
 
-export enum LoggerAction {
-	VALIDATE = 'validate',
-	DELETE = 'delete',
-}
-
 async function runCommand( host: string, outputFormat?: OutputFormat ): Promise< void > {
 	const logger = new Logger< LoggerAction >( outputFormat );
 
@@ -43,13 +39,13 @@ async function runCommand( host: string, outputFormat?: OutputFormat ): Promise<
 	}
 }
 
-export const registerCommand: RegisterCommand = ( program ) => {
-	program
+export const registerCommand: RegisterCommand = ( parentCommand, rootCommand = parentCommand ) => {
+	parentCommand
 		.command( 'delete <host>' )
 		.description( __( 'Delete a preview site' ) )
 		.action( async ( host: string ) => {
-			const options = program.opts();
+			const outputFormat = rootCommand.opts().outputFormat;
 			const normalizedHost = normalizeHostname( host );
-			await runCommand( normalizedHost, options.outputFormat );
+			await runCommand( normalizedHost, outputFormat );
 		} );
 };

cli/commands/preview/list.ts

@@ -1,16 +1,12 @@
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { ListLoggerAction as LoggerAction } from 'cli/commands/preview/logger-actions';
 import { getAuthToken } from 'cli/lib/appdata';
 import { getSnapshotCliTable } from 'cli/lib/output';
 import { getSnapshotsFromAppdata } from 'cli/lib/snapshots';
 import { validateSiteFolder } from 'cli/lib/validation';
 import { Logger, LoggerError } from 'cli/logger';
 import { RegisterCommand, OutputFormat } from 'cli/types';
 
-export enum LoggerAction {
-	VALIDATE = 'validate',
-	LOAD = 'load',
-}
-
 async function runCommand( siteFolder: string, outputFormat?: OutputFormat ): Promise< void > {
 	const logger = new Logger< LoggerAction >( outputFormat );
 
@@ -44,14 +40,14 @@ async function runCommand( siteFolder: string, outputFormat?: OutputFormat ): Pr
 	}
 }
 
-export const registerCommand: RegisterCommand = ( program ) => {
-	program
+export const registerCommand: RegisterCommand = ( parentCommand, rootCommand = parentCommand ) => {
+	parentCommand
 		.command( 'list [folder]' )
 		.description(
 			__( 'List preview sites for the specified folder (defaults to current directory)' )
 		)
 		.action( async ( siteFolder: string = process.cwd() ) => {
-			const options = program.opts();
-			await runCommand( siteFolder, options.outputFormat );
+			const outputFormat = rootCommand.opts().outputFormat;
+			await runCommand( siteFolder, outputFormat );
 		} );
 };

cli/commands/preview/logger-actions.ts

@@ -0,0 +1,28 @@
+// Store the actions in a separate file to avoid Webpack issues when importing them in the Studio
+// source code
+
+export enum CreateLoggerAction {
+	VALIDATE = 'validate',
+	ARCHIVE = 'archive',
+	UPLOAD = 'upload',
+	READY = 'ready',
+	APPDATA = 'appdata',
+}
+
+export enum DeleteLoggerAction {
+	VALIDATE = 'validate',
+	DELETE = 'delete',
+}
+
+export enum ListLoggerAction {
+	VALIDATE = 'validate',
+	LOAD = 'load',
+}
+
+export enum UpdateLoggerAction {
+	VALIDATE = 'validate',
+	ARCHIVE = 'archive',
+	UPLOAD = 'upload',
+	READY = 'ready',
+	APPDATA = 'appdata',
+}

cli/commands/preview/update.ts

@@ -1,6 +1,7 @@
 import os from 'node:os';
 import path from 'node:path';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { UpdateLoggerAction as LoggerAction } from 'cli/commands/preview/logger-actions';
 import { uploadArchive, waitForSiteReady } from 'cli/lib/api';
 import { getAuthToken } from 'cli/lib/appdata';
 import { cleanup, createArchive } from 'cli/lib/archive';
@@ -10,14 +11,6 @@ import { validateSiteFolder } from 'cli/lib/validation';
 import { Logger, LoggerError } from 'cli/logger';
 import { RegisterCommand, OutputFormat } from 'cli/types';
 
-enum LoggerAction {
-	VALIDATE = 'validate',
-	ARCHIVE = 'archive',
-	UPLOAD = 'upload',
-	READY = 'ready',
-	APPDATA = 'appdata',
-}
-
 async function runCommand(
 	siteFolder: string,
 	host: string,
@@ -59,8 +52,15 @@ async function runCommand(
 		);
 
 		logger.reportStart( LoggerAction.APPDATA, __( 'Saving preview site to Studio...' ) );
-		await upsertPreviewSiteInAppdata( siteFolder, uploadResponse.site_id, uploadResponse.site_url );
+		const snapshot = await upsertPreviewSiteInAppdata(
+			siteFolder,
+			uploadResponse.site_id,
+			uploadResponse.site_url
+		);
 		logger.reportSuccess( __( 'Preview site saved to Studio' ) );
+
+		logger.reportKeyValuePair( 'name', snapshot.name );
+		logger.reportKeyValuePair( 'url', snapshot.url );
 	} catch ( error ) {
 		if ( error instanceof LoggerError ) {
 			logger.reportError( error );
@@ -73,16 +73,16 @@ async function runCommand(
 	}
 }
 
-export const registerCommand: RegisterCommand = ( program ) => {
-	program
+export const registerCommand: RegisterCommand = ( parentCommand, rootCommand = parentCommand ) => {
+	parentCommand
 		.command( 'update [folder]' )
 		.description(
 			__( 'Update preview site for the specified folder (defaults to current directory)' )
 		)
 		.requiredOption( '-h, --host <host>', __( 'Host of the preview site to update' ) )
 		.action( async ( siteFolder: string = process.cwd(), options ) => {
-			const parentOptions = program.opts();
+			const outputFormat = rootCommand.opts().outputFormat;
 			const normalizedHost = normalizeHostname( options.host );
-			await runCommand( siteFolder, normalizedHost, parentOptions.outputFormat );
+			await runCommand( siteFolder, normalizedHost, outputFormat );
 		} );
 };

cli/index.ts

@@ -12,9 +12,9 @@ import { version } from 'cli/package.json';
 async function main() {
 	await loadTranslations();
 
-	const program = new Command();
+	const studioCommand = new Command();
 
-	program
+	studioCommand
 		.name( 'studio' )
 		.description( __( 'Studio by WordPress.com CLI' ) )
 		.version( version )
@@ -32,14 +32,16 @@ async function main() {
 				.hideHelp()
 		);
 
-	const previewCommand = program.command( 'preview' ).description( __( 'Manage preview sites' ) );
+	const previewCommand = studioCommand
+		.command( 'preview' )
+		.description( __( 'Manage preview sites' ) );
 
-	registerPreviewCreateCommand( program );
-	registerPreviewListCommand( previewCommand );
-	registerPreviewDeleteCommand( previewCommand );
-	registerPreviewUpdateCommand( previewCommand );
+	registerPreviewCreateCommand( studioCommand );
+	registerPreviewListCommand( previewCommand, studioCommand );
+	registerPreviewDeleteCommand( previewCommand, studioCommand );
+	registerPreviewUpdateCommand( previewCommand, studioCommand );
 
-	program.parse( process.argv );
+	studioCommand.parse( process.argv );
 }
 
 main();

cli/logger.ts

@@ -27,7 +27,7 @@ export class LoggerError extends Error {
 export class Logger< T extends string > {
 	protected readonly outputFormat: OutputFormat;
 	private spinner: Ora;
-	private currentAction: T | null;
+	private currentAction: T | 'keyValuePair' | null;
 
 	constructor( outputFormat: OutputFormat ) {
 		this.outputFormat = outputFormat;
@@ -66,7 +66,11 @@ export class Logger< T extends string > {
 		this.currentAction = null;
 	}
 
-	public reportError( error: LoggerError ) {
+	public reportError( error: LoggerError, isFatal = true ) {
+		if ( isFatal ) {
+			process.exitCode = 1;
+		}
+
 		if ( this.outputFormat === 'json' ) {
 			console.error(
 				JSON.stringify( { action: this.currentAction, status: 'fail', message: error.message } )
@@ -77,4 +81,10 @@ export class Logger< T extends string > {
 
 		this.currentAction = null;
 	}
+
+	public reportKeyValuePair( key: string, value: string ) {
+		if ( this.outputFormat === 'json' ) {
+			console.log( JSON.stringify( { action: 'keyValuePair', key, value } ) );
+		}
+	}
 }

cli/types.ts

@@ -1,4 +1,4 @@
 import { Command } from 'commander';
 
 export type OutputFormat = undefined | 'json';
-export type RegisterCommand = ( program: Command ) => void;
+export type RegisterCommand = ( parentCommand: Command, rootCommand?: Command ) => void;

package.json

@@ -13,8 +13,9 @@
 		"directory": "/"
 	},
 	"scripts": {
+		"prestart": "npm run cli:build",
 		"start": "electron-forge start",
-		"start-wayland": "electron-forge start -- --enable-features=UseOzonePlatform --ozone-platform=wayland .",
+		"start-wayland": "npm run prestart && electron-forge start -- --enable-features=UseOzonePlatform --ozone-platform=wayland .",
 		"postinstall": "patch-package && ts-node scripts/download-wp-server-files.ts && node ./scripts/download-available-site-translations.mjs",
 		"package": "electron-forge package",
 		"make": "electron-forge make",
@@ -157,7 +158,7 @@
 		"wpcom": "^5.4.2",
 		"yargs": "17.7.2",
 		"yauzl": "^3.2.0",
-		"zod": "^3.24.1"
+		"zod": "^3.24.2"
 	},
 	"optionalDependencies": {
 		"appdmg": "^0.6.6"

src/components/app.tsx

@@ -17,17 +17,24 @@ import { cx } from 'src/lib/cx';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { UserSettings } from 'src/modules/user-settings';
 import { WhatsNewModal, useWhatsNew } from 'src/modules/whats-new';
+import { useAppDispatch } from 'src/stores';
+import { snapshotThunks } from 'src/stores/snapshot-slice';
 
 export default function App() {
 	useLocalizationSupport();
 	const { needsOnboarding } = useOnboarding();
 	const { isSidebarVisible, toggleSidebar } = useSidebarVisibility();
 	const { showWhatsNew, closeWhatsNew } = useWhatsNew();
+	const dispatch = useAppDispatch();
 
 	useEffect( () => {
 		getIpcApi().setupAppMenu( { needsOnboarding } );
 	}, [ needsOnboarding ] );
 
+	useEffect( () => {
+		dispatch( snapshotThunks.getSnapshots() );
+	}, [ dispatch ] );
+
 	return (
 		<>
 			{ needsOnboarding ? (