Agentic UI: Reuse classic onboarding in Desks

apps/ui/src/ui-classic/router/layout-onboarding/index.tsx

@@ -3,7 +3,7 @@ import { OnboardingLayout } from '@/components/onboarding-layout';
 import { useSites } from '@/data/queries/use-sites';
 import { rootRoute } from '../layout-root';
 
-function OnboardingShell() {
+export function OnboardingShell() {
 	const navigate = useNavigate();
 	const { data: sites } = useSites();
 	const hasSites = ( sites?.length ?? 0 ) > 0;

apps/ui/src/ui-classic/router/route-onboarding-blueprint/index.tsx

@@ -2,7 +2,7 @@ import {
 	extractFormValuesFromBlueprint,
 	updateBlueprintWithFormValues,
 } from '@studio/common/lib/blueprint-settings';
-import { createRoute, useNavigate } from '@tanstack/react-router';
+import { createRoute, useNavigate, useSearch } from '@tanstack/react-router';
 import { __ } from '@wordpress/i18n';
 import { arrowLeft } from '@wordpress/icons';
 import { Button, Icon } from '@wordpress/ui';
@@ -24,8 +24,8 @@ interface BlueprintSearch {
 	step?: Step;
 }
 
-function OnboardingBlueprintPage() {
-	const { step } = onboardingBlueprintRoute.useSearch();
+export function OnboardingBlueprintPage() {
+	const { step } = useSearch( { strict: false } ) as BlueprintSearch;
 	const navigate = useNavigate();
 	const activeStep: Step = step === 'configure' ? 'configure' : 'select';
 
@@ -193,15 +193,17 @@ function mapBlueprintSettingsToFormValues(
 	};
 }
 
+export function validateBlueprintSearch( search: Record< string, unknown > ): BlueprintSearch {
+	const value = search.step;
+	if ( value === 'configure' || value === 'select' ) {
+		return { step: value };
+	}
+	return {};
+}
+
 export const onboardingBlueprintRoute = createRoute( {
 	getParentRoute: () => onboardingLayoutRoute,
 	path: '/onboarding/blueprint',
-	validateSearch: ( search: Record< string, unknown > ): BlueprintSearch => {
-		const value = search.step;
-		if ( value === 'configure' || value === 'select' ) {
-			return { step: value };
-		}
-		return {};
-	},
+	validateSearch: validateBlueprintSearch,
 	component: OnboardingBlueprintPage,
 } );

apps/ui/src/ui-classic/router/route-onboarding-create/index.tsx

@@ -11,7 +11,7 @@ import { onboardingLayoutRoute } from '../layout-onboarding';
 import styles from '../layout-onboarding/style.module.css';
 import type { CreateSiteFormValues } from '@/components/create-site-form';
 
-function CreateSitePage() {
+export function CreateSitePage() {
 	const navigate = useNavigate();
 	const { data: sites } = useSites();
 	const { data: existingDomainNames } = useExistingCustomDomains();

apps/ui/src/ui-classic/router/route-onboarding-home/index.tsx

@@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { onboardingLayoutRoute } from '../layout-onboarding';
 import styles from '../layout-onboarding/style.module.css';
 
-function OnboardingHomePage() {
+export function OnboardingHomePage() {
 	return (
 		<div className={ styles.page }>
 			<h1 className={ styles.title }>{ __( 'Start a new site' ) }</h1>

apps/ui/src/ui-classic/router/route-onboarding-import/index.tsx

@@ -1,5 +1,5 @@
 import { ACCEPTED_IMPORT_FILE_TYPES } from '@studio/common/constants';
-import { createRoute, useNavigate } from '@tanstack/react-router';
+import { createRoute, useNavigate, useSearch } from '@tanstack/react-router';
 import { __ } from '@wordpress/i18n';
 import { arrowLeft, download } from '@wordpress/icons';
 import { Button, Icon } from '@wordpress/ui';
@@ -50,8 +50,8 @@ function nameFromFilename( filename: string ): string {
 		.trim();
 }
 
-function OnboardingImportPage() {
-	const { step } = onboardingImportRoute.useSearch();
+export function OnboardingImportPage() {
+	const { step } = useSearch( { strict: false } ) as ImportSearch;
 	const navigate = useNavigate();
 	const connector = useConnector();
 	const activeStep: Step = step === 'configure' ? 'configure' : 'select';
@@ -211,15 +211,17 @@ function OnboardingImportPage() {
 	);
 }
 
+export function validateImportSearch( search: Record< string, unknown > ): ImportSearch {
+	const value = search.step;
+	if ( value === 'configure' || value === 'select' ) {
+		return { step: value };
+	}
+	return {};
+}
+
 export const onboardingImportRoute = createRoute( {
 	getParentRoute: () => onboardingLayoutRoute,
 	path: '/onboarding/import',
-	validateSearch: ( search: Record< string, unknown > ): ImportSearch => {
-		const value = search.step;
-		if ( value === 'configure' || value === 'select' ) {
-			return { step: value };
-		}
-		return {};
-	},
+	validateSearch: validateImportSearch,
 	component: OnboardingImportPage,
 } );

apps/ui/src/ui-desks/app.tsx

@@ -2,10 +2,13 @@ import { RouterProvider, createRouter } from '@tanstack/react-router';
 import { useMemo } from 'react';
 import { createPackagedRouterHistory } from '@/app/router-history';
 import {
+	desksDashboardRedirectRoute,
+	desksNewSiteRedirectRoute,
 	desksOnboardingBlueprintRoute,
 	desksOnboardingCreateRoute,
 	desksOnboardingHomeRoute,
 	desksOnboardingImportRoute,
+	desksOnboardingLayoutRoute,
 } from './onboarding';
 import { desksRootRoute } from './router/root';
 import { siteDeskRoute } from './site-desk';
@@ -16,10 +19,14 @@ const routeTree = desksRootRoute.addChildren( [
 	userDeskRoute,
 	desksSiteSettingsRoute,
 	siteDeskRoute,
-	desksOnboardingHomeRoute,
-	desksOnboardingCreateRoute,
-	desksOnboardingBlueprintRoute,
-	desksOnboardingImportRoute,
+	desksOnboardingLayoutRoute.addChildren( [
+		desksOnboardingHomeRoute,
+		desksOnboardingCreateRoute,
+		desksOnboardingBlueprintRoute,
+		desksOnboardingImportRoute,
+	] ),
+	desksDashboardRedirectRoute,
+	desksNewSiteRedirectRoute,
 ] );
 
 export function createDesksRouter() {