Fix empty Studio state with a new page

jest.config.ts

@@ -16,6 +16,7 @@ module.exports = {
 			},
 		],
 		'^.+\\.m?js$': [ 'babel-jest', { presets: [ '@babel/preset-env' ] } ],
+		"^.+\\.svg$": 'jest-transform-stub',
 	},
 	transformIgnorePatterns: [ 'node_modules/(?!(@php-wasm|@wp-playground)/)' ],
 	moduleNameMapper: {

package.json

@@ -150,6 +150,7 @@
 		"fs-extra": "11.1.1",
 		"hpagent": "1.2.0",
 		"http-proxy": "^1.18.1",
+		"jest-transform-stub": "^2.0.0",
 		"lockfile": "^1.0.4",
 		"lodash": "^4.17.21",
 		"node-fetch": "^2.7.0",

src/components/empty-studio/index.tsx

@@ -0,0 +1,26 @@
+import { useI18n } from '@wordpress/react-i18n';
+import emptyStudioIllustration from 'src/components/empty-studio/empty-studio.svg';
+import AddSite from 'src/modules/add-site';
+
+export function EmptyStudio() {
+	const { __ } = useI18n();
+
+	return (
+		<div className="w-full h-full flex items-center app-no-drag-region">
+			<div className="mx-auto px-[85px] flex items-center gap-[44px] max-w-[786px]">
+				<div>
+					<div className="text-[16px] font-semibold text-black mb-[4px]">
+						{ __( 'Ready for a new start?' ) }
+					</div>
+					<p className="text-[13px] text-gray-700 mb-[32px]">
+						{ __( "You don't have any sites right now. Add a new one to get started again." ) }
+					</p>
+
+					<AddSite variant="primary" />
+				</div>
+
+				<img src={ emptyStudioIllustration } alt={ __( 'Empty Studio illustration' ) } />
+			</div>
+		</div>
+	);
+}

src/components/main-sidebar.tsx

@@ -1,6 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { RunningSites } from 'src/components/running-sites';
 import SiteMenu from 'src/components/site-menu';
+import { useSiteDetails } from 'src/hooks/use-site-details';
 import { isMac } from 'src/lib/app-globals';
 import { cx } from 'src/lib/cx';
 import AddSite from 'src/modules/add-site';
@@ -10,6 +11,8 @@ interface MainSidebarProps {
 }
 
 export default function MainSidebar( { className }: MainSidebarProps ) {
+	const { data: localSites } = useSiteDetails();
+
 	return (
 		<div
 			data-testid="main-sidebar"
@@ -20,22 +23,28 @@ export default function MainSidebar( { className }: MainSidebarProps ) {
 				className
 			) }
 		>
-			<div className="flex flex-col h-full">
-				<div
-					className={ cx(
-						'flex-1 overflow-y-auto sites-scrollbar app-no-drag-region',
-						isMac() ? 'ms-4' : 'ms-3'
-					) }
-				>
-					<SiteMenu />
+			{ ! localSites.length ? (
+				<div className="flex h-full px-[20px] justify-center items-center app-no-drag-region text-center text-[12px] text-a8c-gray-50">
+					{ __( 'Your sites will show up here once you create them' ) }
 				</div>
-				<div className="flex flex-col gap-4 pt-5 border-white border-t border-opacity-10 app-no-drag-region">
-					<RunningSites />
-					<div className={ cx( isMac() ? 'mx-5' : 'mx-4' ) }>
-						<AddSite className="min-w-[168px] w-full mb-4" />
+			) : (
+				<div className="flex flex-col h-full">
+					<div
+						className={ cx(
+							'flex-1 overflow-y-auto sites-scrollbar app-no-drag-region',
+							isMac() ? 'ms-4' : 'ms-3'
+						) }
+					>
+						<SiteMenu />
+					</div>
+					<div className="flex flex-col gap-4 pt-5 border-white border-t border-opacity-10 app-no-drag-region">
+						<RunningSites />
+						<div className={ cx( isMac() ? 'mx-5' : 'mx-4' ) }>
+							<AddSite className="min-w-[168px] w-full mb-4" />
+						</div>
 					</div>
 				</div>
-			</div>
+			) }
 		</div>
 	);
 }

src/components/site-content-tabs.tsx

@@ -5,6 +5,7 @@ import { ContentTabImportExport } from 'src/components/content-tab-import-export
 import { ContentTabOverview } from 'src/components/content-tab-overview';
 import { ContentTabPreviews } from 'src/components/content-tab-previews';
 import { ContentTabSettings } from 'src/components/content-tab-settings';
+import { EmptyStudio } from 'src/components/empty-studio';
 import Header from 'src/components/header';
 import { SiteLoadingIndicator } from 'src/components/site-loading-indicator';
 import { MIN_WIDTH_CLASS_TO_MEASURE } from 'src/constants';
@@ -15,11 +16,15 @@ import { cx } from 'src/lib/cx';
 import { ContentTabSync } from 'src/modules/sync';
 
 export function SiteContentTabs() {
-	const { selectedSite } = useSiteDetails();
+	const { selectedSite, data: localSites } = useSiteDetails();
 	const { importState } = useImportExport();
 	const { tabs, selectedTab, setSelectedTab } = useContentTabs();
 	const { __ } = useI18n();
 
+	if ( ! localSites.length ) {
+		return <EmptyStudio />;
+	}
+
 	if ( ! selectedSite ) {
 		return (
 			<div className="w-full h-full flex items-center justify-center app-no-drag-region">

src/components/tests/site-content-tabs.test.tsx

@@ -56,6 +56,7 @@ describe( 'SiteContentTabs', () => {
 		( useSiteDetails as jest.Mock ).mockReturnValue( {
 			selectedSite,
 			snapshots: [],
+			data: [ selectedSite ],
 			loadingServer: {},
 		} );
 		await act( async () => renderWithProvider( <SiteContentTabs /> ) );
@@ -71,6 +72,7 @@ describe( 'SiteContentTabs', () => {
 		( useSiteDetails as jest.Mock ).mockReturnValue( {
 			selectedSite,
 			snapshots: [],
+			data: [ selectedSite ],
 			loadingServer: {},
 		} );
 		await act( async () => renderWithProvider( <SiteContentTabs /> ) );
@@ -81,7 +83,7 @@ describe( 'SiteContentTabs', () => {
 		expect( screen.queryByRole( 'tab', { name: 'Assistant', selected: false } ) ).toBeVisible();
 		expect( screen.queryByRole( 'tab', { name: 'Backup', selected: false } ) ).toBeNull();
 	} );
-	it( 'should render a "No Site" screen if selected site is absent', async () => {
+	it( 'should render a "No Site" screen if all sites are removed', async () => {
 		( useSiteDetails as jest.Mock ).mockReturnValue( {
 			undefined,
 			snapshots: [],
@@ -95,6 +97,8 @@ describe( 'SiteContentTabs', () => {
 		expect( screen.queryByRole( 'tab', { name: 'Launchpad' } ) ).toBeNull();
 		expect( screen.queryByRole( 'tab', { name: 'Publish' } ) ).toBeNull();
 		expect( screen.queryByRole( 'tab', { name: 'Export' } ) ).toBeNull();
-		expect( screen.getByText( 'Select a site to view details.' ) ).toBeVisible();
+		expect(
+			screen.getByText( "You don't have any sites right now. Add a new one to get started again." )
+		).toBeVisible();
 	} );
 } );

src/modules/add-site/index.tsx

@@ -3,7 +3,7 @@ import { Navigator, useNavigator } from '@wordpress/components';
 import { sprintf } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
 import { FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
-import Button from 'src/components/button';
+import Button, { ButtonVariant } from 'src/components/button';
 import { FullscreenModal } from 'src/components/fullscreen-modal';
 import { useAddSite } from 'src/hooks/use-add-site';
 import { useFeatureFlags } from 'src/hooks/use-feature-flags';
@@ -27,6 +27,7 @@ import Stepper from './components/stepper';
 
 interface AddSiteProps {
 	className?: string;
+	variant?: ButtonVariant;
 }
 
 type BlueprintsData = ReturnType< typeof useGetBlueprints >[ 'data' ];
@@ -190,7 +191,7 @@ function NavigationContent( props: NavigationContentProps ) {
 	);
 }
 
-export default function AddSite( { className }: AddSiteProps ) {
+export default function AddSite( { className, variant = 'outlined' }: AddSiteProps ) {
 	const { __ } = useI18n();
 	const { enableBlueprints } = useFeatureFlags();
 	const [ showModal, setShowModal ] = useState( false );
@@ -353,7 +354,7 @@ export default function AddSite( { className }: AddSiteProps ) {
 				</Navigator>
 			</FullscreenModal>
 			<Button
-				variant="outlined"
+				variant={ variant }
 				className={ className }
 				onClick={ openModal }
 				disabled={ isAnySiteProcessing }