Add upsell to Advanced Tools tab (#96609)

* add hosting features content to advanced tools tab

* update route conditions

* move hosting features components to sites/tools directory

* add translations for advanced tools

* address feedback

* move hosting-feature components one level up

client/hosting/hosting-features/controller.tsx

@@ -1,5 +1,5 @@
 import { Context as PageJSContext } from '@automattic/calypso-router';
-import HostingFeatures from './components/hosting-features';
+import HostingFeatures from 'calypso/sites/hosting-features/components/hosting-features';
 
 export function hostingFeatures( context: PageJSContext, next: () => void ) {
 	context.primary = <HostingFeatures />;

client/sites/components/site-preview-pane/constants.ts

@@ -20,6 +20,7 @@ export const TOOLS_LOGS_PHP = 'tools-logs-php';
 export const TOOLS_LOGS_WEB = 'tools-logs-web';
 export const TOOLS_SFTP_SSH = 'tools-sftp-ssh';
 export const TOOLS_DATABASE = 'tools-database';
+export const TOOLS = 'tools';
 
 export const SETTINGS_SITE = 'settings-site';
 export const SETTINGS_ADMINISTRATION = 'settings-administration';
@@ -55,6 +56,7 @@ export const FEATURE_TO_ROUTE_MAP: { [ feature: string ]: string } = {
 	[ TOOLS_LOGS_WEB ]: 'sites/tools/logs/:site/web',
 	[ TOOLS_SFTP_SSH ]: 'sites/tools/sftp-ssh/:site',
 	[ TOOLS_DATABASE ]: 'sites/tools/database/:site',
+	[ TOOLS ]: 'sites/tools/:site',
 	[ SETTINGS_SITE ]: 'sites/settings/site/:site',
 	[ SETTINGS_ADMINISTRATION ]: 'sites/settings/administration/:site',
 	[ SETTINGS_ADMINISTRATION_RESET_SITE ]: 'sites/settings/administration/:site/reset-site',

client/sites/components/site-preview-pane/dotcom-preview-pane.tsx

@@ -4,7 +4,7 @@ import { SiteExcerptData } from '@automattic/sites';
 import { useI18n } from '@wordpress/react-i18n';
 import React, { useMemo, useEffect } from 'react';
 import ItemPreviewPane from 'calypso/a8c-for-agencies/components/items-dashboard/item-preview-pane';
-import HostingFeaturesIcon from 'calypso/hosting/hosting-features/components/hosting-features-icon';
+import HostingFeaturesIcon from 'calypso/sites/hosting-features/components/hosting-features-icon';
 import { areHostingFeaturesSupported } from 'calypso/sites/hosting-features/features';
 import { useStagingSite } from 'calypso/sites/tools/staging-site/hooks/use-staging-site';
 import { getMigrationStatus } from 'calypso/sites-dashboard/utils';
@@ -43,6 +43,7 @@ import {
 	FEATURE_TO_ROUTE_MAP,
 	MARKETING_TRAFFIC,
 	MARKETING_SHARING,
+	TOOLS,
 } from './constants';
 import PreviewPaneHeaderButtons from './preview-pane-header-buttons';
 import SiteEnvironmentSwitcher from './site-environment-switcher';
@@ -97,7 +98,8 @@ const DotcomPreviewPane = ( {
 						<HostingFeaturesIcon />
 					</span>
 				),
-				enabled: isSimpleSite || isPlanExpired,
+				enabled:
+					( isSimpleSite || isPlanExpired ) && ! config.isEnabled( 'untangling/hosting-menu' ),
 				featureIds: [ DOTCOM_HOSTING_FEATURES ],
 			},
 			{
@@ -149,6 +151,17 @@ const DotcomPreviewPane = ( {
 					TOOLS_DATABASE,
 				],
 			},
+			{
+				label: (
+					<span>
+						{ __( 'Advanced Tools' ) }
+						<HostingFeaturesIcon />
+					</span>
+				),
+				enabled:
+					! areHostingFeaturesSupported( site ) && config.isEnabled( 'untangling/hosting-menu' ),
+				featureIds: [ TOOLS ],
+			},
 			{
 				label: __( 'Settings' ),
 				enabled: config.isEnabled( 'untangling/hosting-menu' ),

client/sites/controller.tsx

@@ -152,7 +152,7 @@ export function redirectToHostingFeaturesIfNotAtomic( context: PageJSContext, ne
 	const site = getSelectedSite( state );
 
 	if ( ! areHostingFeaturesSupported( site ) ) {
-		return page.redirect( `/hosting-features/${ site?.slug }` );
+		return page.redirect( `/sites/tools/${ site?.slug }` );
 	}
 
 	next();

client/hosting/hosting-features/components/hosting-features.tsx → client/sites/hosting-features/components/hosting-features.tsx

@@ -36,7 +36,11 @@ const PromoCard = ( { title, text, supportContext }: PromoCardProps ) => (
 	</HostingCard>
 );
 
-const HostingFeatures = () => {
+type HostingFeaturesProps = {
+	showAsTools?: boolean;
+};
+
+const HostingFeatures = ( { showAsTools }: HostingFeaturesProps ) => {
 	const dispatch = useDispatch();
 	const { searchParams } = new URL( document.location.toString() );
 	const siteId = useSelector( getSelectedSiteId );
@@ -116,10 +120,30 @@ const HostingFeatures = () => {
 		? translate( 'Activate all hosting features' )
 		: translate( 'Activate all developer tools' );
 
+	const activateTitleAsTools = hasEnTranslation( 'Activate all advanced tools' );
+
+	const activationStatusTitle = translate( 'Activating hosting features' );
+	const activationStatusTitleAsTools = translate( 'Activating advanced tools' );
+
+	const activationStatusDescription = translate(
+		"The hosting features will appear here automatically when they're ready!",
+		{
+			comment: 'Description of the hosting features page when the features are being activated.',
+		}
+	);
+	const activationStatusDescriptionAsTools = translate(
+		"The advanced tools will appear here automatically when they're ready!",
+		{
+			comment: 'Description of the advanced tools page when the features are being activated.',
+		}
+	);
+
 	const unlockTitle = hasEnTranslation( 'Unlock all hosting features' )
 		? translate( 'Unlock all hosting features' )
 		: translate( 'Unlock all developer tools' );
 
+	const unlockTitleAsTools = translate( 'Unlock all advanced tools' );
+
 	const activateDescription = hasEnTranslation(
 		'Your plan includes all the hosting features listed below. Click "Activate now" to begin.'
 	)
@@ -130,6 +154,10 @@ const HostingFeatures = () => {
 				'Your plan includes all the developer tools listed below. Click "Activate now" to begin.'
 		  );
 
+	const activateDescriptionAsTools = translate(
+		'Your plan includes all the advanced tools listed below. Click "Activate now" to begin.'
+	);
+
 	const unlockDescription = hasEnTranslation(
 		'Upgrade to the %(planName)s plan or higher to get access to all hosting features'
 	)
@@ -152,24 +180,28 @@ const HostingFeatures = () => {
 				}
 		  );
 
+	const unlockDescriptionAsTools = translate(
+		'Upgrade to the %(planName)s plan or higher to get access to all advanced tools',
+		{
+			args: {
+				planName: getPlan( PLAN_BUSINESS )?.getTitle() ?? '',
+			},
+		}
+	);
+
 	let title;
 	let description;
 	let buttons;
 	if ( shouldRenderActivatingCopy ) {
-		title = translate( 'Activating hosting features' );
-		description = translate(
-			"The hosting features will appear here automatically when they're ready!",
-			{
-				comment: 'Description of the hosting features page when the features are being activated.',
-			}
-		);
+		title = showAsTools ? activationStatusTitleAsTools : activationStatusTitle;
+		description = showAsTools ? activationStatusDescriptionAsTools : activationStatusDescription;
 	} else if ( showActivationButton ) {
-		title = activateTitle;
-		description = activateDescription;
+		title = showAsTools ? activateTitleAsTools : activateTitle;
+		description = showAsTools ? activateDescriptionAsTools : activateDescription;
 		buttons = <HostingActivationButton redirectUrl={ redirectUrl } />;
 	} else {
-		title = unlockTitle;
-		description = unlockDescription;
+		title = showAsTools ? unlockTitleAsTools : unlockTitle;
+		description = showAsTools ? unlockDescriptionAsTools : unlockDescription;
 		buttons = (
 			<HostingHeroButton
 				href={ upgradeLink }

client/sites/tools/controller.tsx

@@ -1,5 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { useSelector } from 'react-redux';
+import HostingFeatures from 'calypso/sites/hosting-features/components/hosting-features';
 import { getSelectedSiteSlug } from 'calypso/state/ui/selectors';
 import { SidebarItem, Sidebar, PanelWithSidebar } from '../components/panel-sidebar';
 import { useAreAdvancedHostingFeaturesSupported } from '../hosting-features/features';
@@ -50,6 +51,11 @@ export function ToolsSidebar() {
 	);
 }
 
+export function tools( context: PageJSContext, next: () => void ) {
+	context.primary = <HostingFeatures showAsTools />;
+	next();
+}
+
 export function stagingSite( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>

client/sites/tools/index.tsx

@@ -9,6 +9,7 @@ import {
 	TOOLS_STAGING_SITE,
 	TOOLS_SFTP_SSH,
 	TOOLS_DATABASE,
+	TOOLS,
 } from 'calypso/sites/components/site-preview-pane/constants';
 import { redirectToHostingFeaturesIfNotAtomic, siteDashboard } from 'calypso/sites/controller';
 import {
@@ -22,9 +23,21 @@ import {
 	deploymentCreation,
 	deploymentManagement,
 	deploymentRunLogs,
+	tools,
 } from './controller';
 
 export default function () {
+	page( '/sites/tools', siteSelection, sites, makeLayout, clientRender );
+	page(
+		'/sites/tools/:site',
+		siteSelection,
+		navigation,
+		tools,
+		siteDashboard( TOOLS ),
+		makeLayout,
+		clientRender
+	);
+
 	page( '/sites/tools/staging-site', siteSelection, sites, makeLayout, clientRender );
 	page(
 		'/sites/tools/staging-site/:site',