Add site context menu

src/components/delete-site.tsx

@@ -1,75 +1,29 @@
-import * as Sentry from '@sentry/electron/renderer';
 import { MenuItem } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
+import { useDeleteSite } from 'src/hooks/use-delete-site';
 import { useSiteDetails } from 'src/hooks/use-site-details';
-import { getIpcApi } from 'src/lib/get-ipc-api';
-
-const MAX_LENGTH_SITE_TITLE = 35;
 
 type DeleteSiteProps = {
 	onClose: () => void;
 };
 
 const DeleteSite = ( { onClose }: DeleteSiteProps ) => {
 	const { __ } = useI18n();
-	const { selectedSite, deleteSite, isDeleting } = useSiteDetails();
-
-	const handleDeleteSite = async () => {
-		if ( ! selectedSite ) {
-			return;
-		}
-
-		const DELETE_BUTTON_INDEX = 0;
-		const CANCEL_BUTTON_INDEX = 1;
-
-		const trimmedSiteTitle = getTrimmedSiteTitle( selectedSite.name );
-
-		const { response, checkboxChecked } = await getIpcApi().showMessageBox( {
-			type: 'warning',
-			message: sprintf( __( 'Delete %s' ), trimmedSiteTitle ),
-			detail: __(
-				'The site’s database will be lost. Including all posts, pages, comments, and media.'
-			),
-			buttons: [ __( 'Delete site' ), __( 'Cancel' ) ],
-			cancelId: CANCEL_BUTTON_INDEX,
-			checkboxLabel: __( 'Delete site files from my computer' ),
-			checkboxChecked: true,
-		} );
-
-		if ( response === DELETE_BUTTON_INDEX ) {
-			try {
-				await deleteSite( selectedSite.id, checkboxChecked );
-			} catch ( error ) {
-				getIpcApi().showErrorMessageBox( {
-					title: __( 'Deletion failed' ),
-					message: sprintf(
-						__( "We couldn't delete the site '%s'. Please try again" ),
-						trimmedSiteTitle
-					),
-					error,
-				} );
-				Sentry.captureException( error );
-			}
-		}
-	};
-
-	const getTrimmedSiteTitle = ( name: string ) =>
-		name.length > MAX_LENGTH_SITE_TITLE
-			? `${ name.substring( 0, MAX_LENGTH_SITE_TITLE - 3 ) }…`
-			: name;
+	const { selectedSite, isDeleting } = useSiteDetails();
+	const { handleDeleteSite } = useDeleteSite();
 
 	const isSiteDeletionDisabled = ! selectedSite || isDeleting;
 
 	return (
 		<MenuItem
 			aria-disabled={ isSiteDeletionDisabled }
 			onClick={ () => {
-				if ( isSiteDeletionDisabled ) {
+				if ( isSiteDeletionDisabled || ! selectedSite ) {
 					return;
 				}
 				onClose();
-				void handleDeleteSite();
+				void handleDeleteSite( selectedSite.id, selectedSite.name );
 			} }
 			isDestructive
 			disabled={ isSiteDeletionDisabled }

src/components/site-menu.tsx

@@ -1,13 +1,20 @@
+import * as Sentry from '@sentry/electron/renderer';
 import { speak } from '@wordpress/a11y';
 import { Spinner } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from 'react';
 import { Tooltip } from 'src/components/tooltip';
 import { useSyncSites } from 'src/hooks/sync-sites';
+import { useContentTabs } from 'src/hooks/use-content-tabs';
+import { useDeleteSite } from 'src/hooks/use-delete-site';
 import { useImportExport } from 'src/hooks/use-import-export';
 import { useSiteDetails } from 'src/hooks/use-site-details';
-import { isMac } from 'src/lib/app-globals';
+import { isMac, isWindows } from 'src/lib/app-globals';
 import { cx } from 'src/lib/cx';
+import { getIpcApi } from 'src/lib/get-ipc-api';
+import { supportedEditorConfig } from 'src/modules/user-settings/lib/editor';
+import { getTerminalName } from 'src/modules/user-settings/lib/terminal';
+import { useGetUserEditorQuery, useGetUserTerminalQuery } from 'src/stores/installed-apps-api';
 
 interface SiteMenuProps {
 	className?: string;
@@ -108,10 +115,21 @@ function ButtonToRun( { running, id, name }: Pick< SiteDetails, 'running' | 'id'
 	);
 }
 function SiteItem( { site }: { site: SiteDetails } ) {
-	const { selectedSite, setSelectedSiteId } = useSiteDetails();
+	const {
+		selectedSite,
+		setSelectedSiteId,
+		startServer,
+		stopServer,
+		loadingServer,
+		setIsEditModalOpen,
+	} = useSiteDetails();
+	const { setSelectedTab } = useContentTabs();
+	const { handleDeleteSite } = useDeleteSite();
 	const isSelected = site === selectedSite;
 	const { isSiteImporting, isSiteExporting } = useImportExport();
 	const { isSiteIdPulling } = useSyncSites();
+	const { data: editor } = useGetUserEditorQuery();
+	const { data: terminal } = useGetUserTerminalQuery();
 	const isImporting = isSiteImporting( site.id );
 	const isExporting = isSiteExporting( site.id );
 	const isPulling = isSiteIdPulling( site.id );
@@ -128,13 +146,111 @@ function SiteItem( { site }: { site: SiteDetails } ) {
 		tooltipText = __( 'Loading' );
 	}
 
+	const handleContextMenu = ( e: React.MouseEvent ) => {
+		e.preventDefault();
+		const ipcApi = getIpcApi();
+		const isLoading = loadingServer[ site.id ] || false;
+		const isAddingSite = site.isAddingSite || false;
+		const finderLabel = isWindows() ? __( 'File Explorer' ) : __( 'Finder' );
+		const editorLabel =
+			editor && supportedEditorConfig[ editor ] ? supportedEditorConfig[ editor ].label : null;
+		const terminalLabel = getTerminalName( terminal );
+
+		ipcApi.showSiteContextMenu( {
+			siteId: site.id,
+			isRunning: site.running,
+			isLoading,
+			isAddingSite,
+			finderLabel,
+			editorLabel,
+			terminalLabel,
+		} );
+	};
+
+	useEffect( () => {
+		const unsubscribe = window.ipcListener.subscribe(
+			'site-context-menu-action',
+			async ( _, data: { action: string; siteId: string } ) => {
+				if ( data.siteId === site.id ) {
+					const ipcApi = getIpcApi();
+					switch ( data.action ) {
+						case 'start':
+							void startServer( site.id );
+							break;
+						case 'stop':
+							void stopServer( site.id );
+							break;
+						case 'open-site':
+							if ( ! site.running ) {
+								await startServer( site.id );
+							}
+							ipcApi.openSiteURL( site.id, '', { autoLogin: false } );
+							break;
+						case 'open-admin':
+							if ( ! site.running ) {
+								await startServer( site.id );
+							}
+							ipcApi.openSiteURL( site.id, '/wp-admin/' );
+							break;
+						case 'open-finder':
+							ipcApi.openLocalPath( site.path );
+							break;
+						case 'open-editor':
+							if ( editor ) {
+								void ipcApi.openAppAtPath( editor, site.path );
+							}
+							break;
+						case 'open-terminal':
+							void ( async () => {
+								try {
+									await ipcApi.openTerminalAtPath( site.path );
+								} catch ( error ) {
+									Sentry.captureException( error );
+									alert( __( 'Could not open the terminal.' ) );
+								}
+							} )();
+							break;
+						case 'edit-site':
+							if ( site.id !== selectedSite?.id ) {
+								setSelectedSiteId( site.id );
+							}
+							setSelectedTab( 'settings' );
+							setIsEditModalOpen( true );
+							break;
+						case 'delete':
+							await handleDeleteSite( site.id, site.name );
+							break;
+					}
+				}
+			}
+		);
+
+		return () => {
+			unsubscribe?.();
+		};
+	}, [
+		site.id,
+		site.name,
+		site.path,
+		site.running,
+		startServer,
+		stopServer,
+		editor,
+		selectedSite?.id,
+		setSelectedTab,
+		setIsEditModalOpen,
+		setSelectedSiteId,
+		handleDeleteSite,
+	] );
+
 	return (
 		<li
 			className={ cx(
 				'flex flex-row min-w-[168px] h-8 hover:bg-[#ffffff0C] rounded transition-all ms-1',
 				isMac() ? 'me-5' : 'me-4',
 				isSelected && 'bg-[#ffffff19] hover:bg-[#ffffff19]'
 			) }
+			onContextMenu={ handleContextMenu }
 		>
 			<button
 				className="p-2 text-xs rounded-tl rounded-bl whitespace-nowrap overflow-hidden text-ellipsis w-full text-left rtl:text-right focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-a8c-blue-50"

src/components/tests/content-tab-settings.test.tsx

@@ -269,13 +269,28 @@ describe( 'ContentTabSettings', () => {
 				updateSite,
 				startServer,
 				stopServer,
+				isEditModalOpen: false,
+				setIsEditModalOpen: jest.fn(),
 			} );
 
 			const { rerender } = renderWithProvider(
 				<ContentTabSettings selectedSite={ selectedSite } />
 			);
 			expect( screen.getByText( '8.3' ) ).toBeVisible();
 			await user.click( screen.getByRole( 'button', { name: 'Edit site' } ) );
+			( useSiteDetails as jest.Mock ).mockReturnValue( {
+				selectedSite: { ...selectedSite, running: false } as SiteDetails,
+				updateSite,
+				startServer,
+				stopServer,
+				isEditModalOpen: true,
+				setIsEditModalOpen: jest.fn(),
+			} );
+			rerenderWithProvider( rerender, <ContentTabSettings selectedSite={ selectedSite } /> );
+			await waitFor( () => {
+				expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
+			} );
+
 			const dialog = screen.getByRole( 'dialog' );
 			expect( dialog ).toBeVisible();
 			await user.selectOptions( within( dialog ).getByLabelText( 'PHP version' ), '8.2' );
@@ -285,6 +300,16 @@ describe( 'ContentTabSettings', () => {
 				} )
 			);
 
+			( useSiteDetails as jest.Mock ).mockReturnValue( {
+				selectedSite: { ...selectedSite, running: false } as SiteDetails,
+				updateSite,
+				startServer,
+				stopServer,
+				isEditModalOpen: false,
+				setIsEditModalOpen: jest.fn(),
+			} );
+			rerenderWithProvider( rerender, <ContentTabSettings selectedSite={ selectedSite } /> );
+
 			await waitFor( () => {
 				expect( updateSite ).toHaveBeenCalledWith(
 					expect.objectContaining( { phpVersion: '8.2' } )
@@ -315,13 +340,27 @@ describe( 'ContentTabSettings', () => {
 				updateSite,
 				startServer,
 				stopServer,
+				isEditModalOpen: false,
+				setIsEditModalOpen: jest.fn(),
 			} );
 
 			const { rerender } = renderWithProvider(
 				<ContentTabSettings selectedSite={ selectedSite } />
 			);
 			expect( screen.getByText( '8.3' ) ).toBeVisible();
 			await user.click( screen.getByRole( 'button', { name: 'Edit site' } ) );
+			( useSiteDetails as jest.Mock ).mockReturnValue( {
+				selectedSite: { ...selectedSite, running: true } as SiteDetails,
+				updateSite,
+				startServer,
+				stopServer,
+				isEditModalOpen: true,
+				setIsEditModalOpen: jest.fn(),
+			} );
+			rerenderWithProvider( rerender, <ContentTabSettings selectedSite={ selectedSite } /> );
+			await waitFor( () => {
+				expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
+			} );
 			const dialog = screen.getByRole( 'dialog' );
 			expect( dialog ).toBeVisible();
 			await user.selectOptions( within( dialog ).getByLabelText( 'PHP version' ), '8.2' );
@@ -331,6 +370,16 @@ describe( 'ContentTabSettings', () => {
 				} )
 			);
 
+			( useSiteDetails as jest.Mock ).mockReturnValue( {
+				selectedSite: { ...selectedSite, running: true } as SiteDetails,
+				updateSite,
+				startServer,
+				stopServer,
+				isEditModalOpen: false,
+				setIsEditModalOpen: jest.fn(),
+			} );
+			rerenderWithProvider( rerender, <ContentTabSettings selectedSite={ selectedSite } /> );
+
 			await waitFor( () => {
 				expect( updateSite ).toHaveBeenCalledWith(
 					expect.objectContaining( { phpVersion: '8.2' } )

src/components/tests/main-sidebar.test.tsx

@@ -50,6 +50,8 @@ jest.mock( 'src/lib/get-ipc-api', () => ( {
 		generateProposedSitePath: jest.fn(),
 		openURL: jest.fn(),
 		getAllCustomDomains: jest.fn().mockResolvedValue( [] ),
+		getUserEditor: jest.fn().mockResolvedValue( 'cursor' ),
+		getUserTerminal: jest.fn().mockResolvedValue( 'terminal' ),
 		setWindowControlVisibility: jest.fn(),
 	} ),
 } ) );

src/constants.ts

@@ -93,6 +93,7 @@ export const IPC_VOID_HANDLERS = < const >[
 	'popupAppMenu',
 	'setWindowButtonVisibility',
 	'showErrorMessageBox',
+	'showSiteContextMenu',
 	'showItemInFolder',
 	'showNotification',
 	'authenticate',