Backport Site Settings v2 to existing dashboard

client/sites/settings/controller.tsx

@@ -1,3 +1,4 @@
+import { isEnabled } from '@automattic/calypso-config';
 import page from '@automattic/calypso-router';
 import { __ } from '@wordpress/i18n';
 import { useSelector } from 'react-redux';
@@ -23,6 +24,7 @@ import ServerSettings from './server';
 import SftpSshSettings from './sftp-ssh';
 import useSftpSshSettingTitle from './sftp-ssh/hooks/use-sftp-ssh-setting-title';
 import SiteSettings from './site';
+import SiteSettingsV2Layout from './v2';
 import type { Context as PageJSContext } from '@automattic/calypso-router';
 
 export function SettingsSidebar() {
@@ -202,3 +204,24 @@ export function performanceSettings( context: PageJSContext, next: () => void )
 	);
 	next();
 }
+
+/**
+ * Backport Hosting Dashboard V2 Settings page to the current one.
+ */
+export function siteSettingsV2( context: PageJSContext, next: () => void ) {
+	const state = context.store.getState();
+	const site = getSelectedSite( state );
+
+	if ( ! isEnabled( 'dashboard/v2' ) ) {
+		return page.redirect( `/sites/settings/site/${ site?.slug }` );
+	}
+
+	context.primary = (
+		<>
+			<PageViewTracker title="Sites > Settings > General" path={ getRouteFromContext( context ) } />
+			<SiteSettingsV2Layout />
+		</>
+	);
+
+	next();
+}

client/sites/settings/index.tsx

@@ -22,6 +22,7 @@ import {
 } from './administration/controller';
 import {
 	siteSettings,
+	siteSettingsV2,
 	administrationToolDeleteSite,
 	administrationToolResetSite,
 	administrationToolTransferSite,
@@ -124,4 +125,18 @@ export default function () {
 		makeLayout,
 		clientRender
 	);
+
+	/**
+	 * Settings V2
+	 */
+	page( '/sites/settings/v2', siteSelection, sites, makeLayout, clientRender );
+	page(
+		'/sites/settings/v2/*',
+		siteSelection,
+		navigation,
+		siteSettingsV2,
+		siteDashboard( SETTINGS_SITE ),
+		makeLayout,
+		clientRender
+	);
 }

client/sites/settings/v2/index.tsx

@@ -0,0 +1,42 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { RouterProvider } from '@tanstack/react-router';
+import { useEffect, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { persistPromise, queryClient } from 'calypso/dashboard/app/query-client';
+import { getRouter } from './router';
+
+export default function Layout() {
+	const rootInstanceRef = useRef< ReturnType< typeof createRoot > | null >( null );
+
+	useEffect( () => {
+		const rootElement = document.querySelector( '.hosting-dashboard-item-view__content' );
+		if ( ! rootElement ) {
+			return;
+		}
+
+		const router = getRouter();
+		if ( ! rootInstanceRef.current ) {
+			rootInstanceRef.current = createRoot( rootElement );
+		}
+
+		persistPromise.then( () => {
+			rootInstanceRef.current?.render(
+				<QueryClientProvider client={ queryClient }>
+					<RouterProvider router={ router } />
+				</QueryClientProvider>
+			);
+		} );
+
+		return () => {
+			if ( rootInstanceRef.current ) {
+				// Wait for the router to unmount.
+				setTimeout( () => {
+					rootInstanceRef.current?.unmount();
+					rootInstanceRef.current = null;
+				} );
+			}
+		};
+	}, [] );
+
+	return null;
+}

client/sites/settings/v2/root.tsx

@@ -0,0 +1,10 @@
+import { Outlet } from '@tanstack/react-router';
+import './style.scss';
+
+export default function Root() {
+	return (
+		<main>
+			<Outlet />
+		</main>
+	);
+}

client/sites/settings/v2/router.tsx

@@ -0,0 +1,97 @@
+import {
+	Outlet,
+	Router,
+	createLazyRoute,
+	createRootRoute,
+	createRoute,
+	redirect,
+} from '@tanstack/react-router';
+import { siteSettingsQuery } from 'calypso/dashboard/app/queries';
+import { queryClient } from 'calypso/dashboard/app/query-client';
+import Root from './root';
+
+const rootRoute = createRootRoute( { component: Root } );
+
+const v2CompatibilityRouteRoot = createRoute( {
+	getParentRoute: () => rootRoute,
+	path: 'sites/$siteSlug/settings',
+	loader: ( { params: { siteSlug } } ) => {
+		throw redirect( { to: `/${ siteSlug }` } );
+	},
+} );
+
+const v2CompatibilityRouteWithFeature = createRoute( {
+	getParentRoute: () => rootRoute,
+	path: 'sites/$siteSlug/settings/$feature',
+	loader: ( { params: { siteSlug, feature } } ) => {
+		throw redirect( { to: `/${ siteSlug }/${ feature }` } );
+	},
+} );
+
+const siteRoute = createRoute( {
+	getParentRoute: () => rootRoute,
+	path: '$siteSlug',
+	loader: ( { params: { siteSlug } } ) =>
+		queryClient.ensureQueryData( siteSettingsQuery( siteSlug ) ),
+	component: () => <Outlet />,
+} );
+
+const settingsRoute = createRoute( {
+	getParentRoute: () => siteRoute,
+	path: '/',
+} ).lazy( () =>
+	import( 'calypso/dashboard/sites/settings' ).then( ( d ) =>
+		createLazyRoute( 'settings' )( {
+			component: () => <d.default siteSlug={ siteRoute.useParams().siteSlug } />,
+		} )
+	)
+);
+
+const siteVisibilityRoute = createRoute( {
+	getParentRoute: () => siteRoute,
+	path: 'site-visibility',
+	loader: ( { params: { siteSlug } } ) =>
+		queryClient.ensureQueryData( siteSettingsQuery( siteSlug ) ),
+} ).lazy( () =>
+	import( 'calypso/dashboard/sites/settings-site-visibility' ).then( ( d ) =>
+		createLazyRoute( 'site-visibility' )( {
+			component: () => <d.default siteSlug={ siteRoute.useParams().siteSlug } />,
+		} )
+	)
+);
+
+const subscriptionGiftingRoute = createRoute( {
+	getParentRoute: () => siteRoute,
+	path: 'subscription-gifting',
+	loader: ( { params: { siteSlug } } ) =>
+		queryClient.ensureQueryData( siteSettingsQuery( siteSlug ) ),
+} ).lazy( () =>
+	import( 'calypso/dashboard/sites/settings-subscription-gifting' ).then( ( d ) =>
+		createLazyRoute( 'subscription-gifting' )( {
+			component: () => <d.default siteSlug={ siteRoute.useParams().siteSlug } />,
+		} )
+	)
+);
+
+const createRouteTree = () =>
+	rootRoute.addChildren( [
+		siteRoute.addChildren( [ settingsRoute, siteVisibilityRoute, subscriptionGiftingRoute ] ),
+		v2CompatibilityRouteRoot,
+		v2CompatibilityRouteWithFeature,
+	] );
+
+export const getRouter = () => {
+	const routeTree = createRouteTree();
+
+	const router = new Router( {
+		routeTree,
+		basepath: '/sites/settings/v2',
+		defaultPreload: 'intent',
+		defaultPreloadStaleTime: 0,
+		defaultNotFoundComponent: () => null,
+	} );
+
+	return router;
+};
+
+export { settingsRoute, subscriptionGiftingRoute };

client/sites/settings/v2/style.scss

@@ -0,0 +1,18 @@
+@import 'calypso/dashboard/app-dotcom/style.scss';
+
+.is-section-site-settings .dashboard-page-layout {
+	align-self: center;
+	padding: 0;
+
+	h1 {
+		font-family: var( --dashboard-h1__font-family );
+		font-weight: var( --dashboard-h1__font-weight ) !important;
+	}
+
+	h2 {
+		font-size: 1.25rem;
+		font-weight: 500;
+		line-height: 1.5;
+		margin-bottom: 0;
+	}
+}