Studio: Ensure the site can't be deleted when syncing

src/components/delete-site.tsx

@@ -1,6 +1,7 @@
 import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
+import { useSyncSites } from 'src/hooks/sync-sites/sync-sites-context';
 import { useDeleteSite } from 'src/hooks/use-delete-site';
 import { useSiteDetails } from 'src/hooks/use-site-details';
 
@@ -12,8 +13,11 @@ const DeleteSite = ( { onClose }: DeleteSiteProps ) => {
 	const { __ } = useI18n();
 	const { selectedSite, isDeleting } = useSiteDetails();
 	const { handleDeleteSite } = useDeleteSite();
+	const { isSiteIdPulling, isSiteIdPushing } = useSyncSites();
+	const isThisSiteSyncing =
+		isSiteIdPulling( selectedSite?.id ?? '' ) || isSiteIdPushing( selectedSite?.id ?? '' );
 
-	const isSiteDeletionDisabled = ! selectedSite || isDeleting;
+	const isSiteDeletionDisabled = ! selectedSite || isDeleting || isThisSiteSyncing;
 
 	return (
 		<MenuItem

src/components/site-menu.tsx

@@ -118,20 +118,22 @@ function SiteItem( { site }: { site: SiteDetails } ) {
 	const { selectedSite, setSelectedSiteId, loadingServer } = useSiteDetails();
 	const isSelected = site === selectedSite;
 	const { isSiteImporting, isSiteExporting } = useImportExport();
-	const { isSiteIdPulling } = useSyncSites();
+	const { isSiteIdPulling, isSiteIdPushing } = useSyncSites();
 	const { data: editor } = useGetUserEditorQuery();
 	const { data: terminal } = useGetUserTerminalQuery();
 	const isImporting = isSiteImporting( site.id );
 	const isExporting = isSiteExporting( site.id );
 	const isPulling = isSiteIdPulling( site.id );
-	const showSpinner = site.isAddingSite || isImporting || isPulling || isExporting;
+	const isPushing = isSiteIdPushing( site.id );
+	const isSyncing = isPulling || isPushing;
+	const showSpinner = site.isAddingSite || isImporting || isPulling || isPushing || isExporting;
 
 	let tooltipText;
 	if ( site.isAddingSite ) {
 		tooltipText = __( 'Adding' );
 	} else if ( isImporting ) {
 		tooltipText = __( 'Importing' );
-	} else if ( isPulling ) {
+	} else if ( isSyncing ) {
 		tooltipText = __( 'Syncing' );
 	} else {
 		tooltipText = __( 'Loading' );
@@ -152,6 +154,7 @@ function SiteItem( { site }: { site: SiteDetails } ) {
 			isRunning: site.running,
 			isLoading,
 			isAddingSite,
+			isSyncing,
 			finderLabel,
 			editorLabel,
 			terminalLabel,

src/ipc-handlers.ts

@@ -1035,13 +1035,22 @@ export function showSiteContextMenu(
 		isRunning: boolean;
 		isLoading: boolean;
 		isAddingSite: boolean;
+		isSyncing: boolean;
 		finderLabel: string;
 		editorLabel: string | null;
 		terminalLabel: string;
 	}
 ) {
-	const { siteId, isRunning, isLoading, isAddingSite, finderLabel, editorLabel, terminalLabel } =
-		context;
+	const {
+		siteId,
+		isRunning,
+		isLoading,
+		isAddingSite,
+		isSyncing,
+		finderLabel,
+		editorLabel,
+		terminalLabel,
+	} = context;
 	const menu = new Menu();
 
 	if ( isRunning ) {
@@ -1205,7 +1214,7 @@ export function showSiteContextMenu(
 	menu.append(
 		new MenuItem( {
 			label: __( 'Delete site…' ),
-			enabled: ! isLoading && ! isAddingSite,
+			enabled: ! isLoading && ! isAddingSite && ! isSyncing,
 			click: () => {
 				sendIpcEventToRendererWithWindow(
 					BrowserWindow.fromWebContents( event.sender ),

src/tests/show-site-context-menu.test.ts

@@ -49,6 +49,7 @@ describe( 'showSiteContextMenu', () => {
 				isRunning: true,
 				isLoading: false,
 				isAddingSite: false,
+				isSyncing: false,
 			} );
 
 			const stopItem = menuItems.find( ( item ) => item.label === 'Stop' );
@@ -62,6 +63,7 @@ describe( 'showSiteContextMenu', () => {
 				isRunning: true,
 				isLoading: false,
 				isAddingSite: false,
+				isSyncing: false,
 			} );
 
 			const stopItem = menuItems.find( ( item ) => item.label === 'Stop' );
@@ -85,6 +87,7 @@ describe( 'showSiteContextMenu', () => {
 				isRunning: true,
 				isLoading: false,
 				isAddingSite: true,
+				isSyncing: false,
 			} );
 
 			const stopItem = menuItems.find( ( item ) => item.label === 'Stop' );
@@ -110,6 +113,7 @@ describe( 'showSiteContextMenu', () => {
 				isRunning: false,
 				isLoading: false,
 				isAddingSite: true,
+				isSyncing: false,
 			} );
 
 			const startItem = menuItems.find( ( item ) => item.label === 'Start' );
@@ -124,6 +128,7 @@ describe( 'showSiteContextMenu', () => {
 				isRunning: false,
 				isLoading: false,
 				isAddingSite: false,
+				isSyncing: false,
 			} );
 
 			const startItem = menuItems.find( ( item ) => item.label === 'Start' );
@@ -137,6 +142,7 @@ describe( 'showSiteContextMenu', () => {
 				isRunning: false,
 				isLoading: true,
 				isAddingSite: false,
+				isSyncing: false,
 			} );
 
 			const startItem = menuItems.find( ( item ) => item.label === 'Start' );
@@ -150,6 +156,7 @@ describe( 'showSiteContextMenu', () => {
 				isRunning: false,
 				isLoading: false,
 				isAddingSite: false,
+				isSyncing: false,
 			} );
 
 			const startItem = menuItems.find( ( item ) => item.label === 'Start' );
@@ -173,6 +180,7 @@ describe( 'showSiteContextMenu', () => {
 				isRunning: true,
 				isLoading: false,
 				isAddingSite: false,
+				isSyncing: false,
 			} );
 		} );
 
@@ -283,6 +291,7 @@ describe( 'showSiteContextMenu', () => {
 				isRunning: false,
 				isLoading: false,
 				isAddingSite: false,
+				isSyncing: false,
 			} );
 
 			const editorItem = menuItems.find(
@@ -299,6 +308,7 @@ describe( 'showSiteContextMenu', () => {
 				isRunning: false,
 				isLoading: false,
 				isAddingSite: false,
+				isSyncing: false,
 			} );
 
 			const separators = menuItems.filter( ( item ) => item.type === 'separator' );
@@ -311,6 +321,7 @@ describe( 'showSiteContextMenu', () => {
 				isRunning: false,
 				isLoading: false,
 				isAddingSite: false,
+				isSyncing: false,
 			} );
 
 			expect( mockMenu.popup ).toHaveBeenCalledWith( { window: mockWindow } );