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',