diff --git a/client/hosting/hosting-features/controller.tsx b/client/hosting/hosting-features/controller.tsx
index 714dcb705a567..d7de63fd431d9 100644
--- a/client/hosting/hosting-features/controller.tsx
+++ b/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 = ;
diff --git a/client/sites/components/site-preview-pane/constants.ts b/client/sites/components/site-preview-pane/constants.ts
index 0254c28cd8c85..6f09dd49ff9b7 100644
--- a/client/sites/components/site-preview-pane/constants.ts
+++ b/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',
diff --git a/client/sites/components/site-preview-pane/dotcom-preview-pane.tsx b/client/sites/components/site-preview-pane/dotcom-preview-pane.tsx
index c71f41f192569..02a456406b0e2 100644
--- a/client/sites/components/site-preview-pane/dotcom-preview-pane.tsx
+++ b/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 = ( {
),
- enabled: isSimpleSite || isPlanExpired,
+ enabled:
+ ( isSimpleSite || isPlanExpired ) && ! config.isEnabled( 'untangling/hosting-menu' ),
featureIds: [ DOTCOM_HOSTING_FEATURES ],
},
{
@@ -149,6 +151,17 @@ const DotcomPreviewPane = ( {
TOOLS_DATABASE,
],
},
+ {
+ label: (
+
+ { __( 'Advanced Tools' ) }
+
+
+ ),
+ enabled:
+ ! areHostingFeaturesSupported( site ) && config.isEnabled( 'untangling/hosting-menu' ),
+ featureIds: [ TOOLS ],
+ },
{
label: __( 'Settings' ),
enabled: config.isEnabled( 'untangling/hosting-menu' ),
diff --git a/client/sites/controller.tsx b/client/sites/controller.tsx
index e63f7e6291d7b..39c0629cf5503 100644
--- a/client/sites/controller.tsx
+++ b/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();
diff --git a/client/hosting/hosting-features/components/hosting-features-icon.jsx b/client/sites/hosting-features/components/hosting-features-icon.jsx
similarity index 100%
rename from client/hosting/hosting-features/components/hosting-features-icon.jsx
rename to client/sites/hosting-features/components/hosting-features-icon.jsx
diff --git a/client/hosting/hosting-features/components/hosting-features.tsx b/client/sites/hosting-features/components/hosting-features.tsx
similarity index 79%
rename from client/hosting/hosting-features/components/hosting-features.tsx
rename to client/sites/hosting-features/components/hosting-features.tsx
index 72eb975af05b7..546f77258ac86 100644
--- a/client/hosting/hosting-features/components/hosting-features.tsx
+++ b/client/sites/hosting-features/components/hosting-features.tsx
@@ -36,7 +36,11 @@ const PromoCard = ( { title, text, supportContext }: PromoCardProps ) => (
);
-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 = ;
} else {
- title = unlockTitle;
- description = unlockDescription;
+ title = showAsTools ? unlockTitleAsTools : unlockTitle;
+ description = showAsTools ? unlockDescriptionAsTools : unlockDescription;
buttons = (
void ) {
+ context.primary = ;
+ next();
+}
+
export function stagingSite( context: PageJSContext, next: () => void ) {
context.primary = (
diff --git a/client/sites/tools/index.tsx b/client/sites/tools/index.tsx
index 290adce686094..e5cf49682021d 100644
--- a/client/sites/tools/index.tsx
+++ b/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',