Add new Site Settings (#95785)

* Add new Site Settings * Add the rest of the routes * Sidebar fixes * Constant values for consistency * Missing site route fixes * Remove wpcomtools - won't be using this moving forward
Automattic · Oct 30, 2024 · 50ee583 · 50ee583
1 parent 1585801
commit 50ee583
Show file tree

Hide file tree

Showing 6 changed files with 197 additions and 0 deletions.
diff --git a/client/sections.js b/client/sections.js
@@ -580,6 +580,12 @@ const sections = [
 		module: 'calypso/sites/marketing',
 		group: 'sites',
 	},
+	{
+		name: 'site-settings',
+		paths: [ '/sites/settings' ],
+		module: 'calypso/sites/settings',
+		group: 'sites',
+	},
 	{
 		name: 'backup',
 		paths: [ '/backup' ],

diff --git a/client/sites/components/site-preview-pane/constants.ts b/client/sites/components/site-preview-pane/constants.ts
@@ -11,6 +11,12 @@ export const DOTCOM_SITE_PERFORMANCE = 'dotcom-site-performance';
 export const SITE_MARKETING_TOOLS = 'site-marketing-tools';
 export const SITE_MARKETING_BUSINESS_TOOLS = 'site-marketing-business-tools';
 
+export const SETTINGS_SITE = 'settings-site';
+export const SETTINGS_ADMINISTRATION = 'settings-administration';
+export const SETTINGS_AGENCY = 'settings-agency';
+export const SETTINGS_CACHES = 'settings-caches';
+export const SETTINGS_WEB_SERVER = 'settings-web-server';
+
 export const FEATURE_TO_ROUTE_MAP: { [ feature: string ]: string } = {
 	[ DOTCOM_OVERVIEW ]: 'overview/:site',
 	[ DOTCOM_MONITORING ]: 'site-monitoring/:site',
@@ -25,4 +31,9 @@ export const FEATURE_TO_ROUTE_MAP: { [ feature: string ]: string } = {
 	// New Information Architecture
 	[ SITE_MARKETING_TOOLS ]: 'sites/marketing/tools/:site',
 	[ SITE_MARKETING_BUSINESS_TOOLS ]: 'sites/marketing/business-tools/:site',
+	[ SETTINGS_SITE ]: 'sites/settings/site/:site',
+	[ SETTINGS_ADMINISTRATION ]: 'sites/settings/administration/:site',
+	[ SETTINGS_AGENCY ]: 'sites/settings/agency/:site',
+	[ SETTINGS_CACHES ]: 'sites/settings/caches/:site',
+	[ SETTINGS_WEB_SERVER ]: 'sites/settings/web-server/: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
@@ -23,6 +23,11 @@ import {
 	DOTCOM_STAGING_SITE,
 	SITE_MARKETING_TOOLS,
 	SITE_MARKETING_BUSINESS_TOOLS,
+	SETTINGS_SITE,
+	SETTINGS_ADMINISTRATION,
+	SETTINGS_AGENCY,
+	SETTINGS_CACHES,
+	SETTINGS_WEB_SERVER,
 } from './constants';
 import PreviewPaneHeaderButtons from './preview-pane-header-buttons';
 import SiteEnvironmentSwitcher from './site-environment-switcher';
@@ -112,6 +117,17 @@ const DotcomPreviewPane = ( {
 				enabled: config.isEnabled( 'untangling/hosting-menu' ),
 				featureIds: [ SITE_MARKETING_TOOLS, SITE_MARKETING_BUSINESS_TOOLS ],
 			},
+			{
+				label: __( 'Settings' ),
+				enabled: config.isEnabled( 'untangling/hosting-menu' ),
+				featureIds: [
+					SETTINGS_SITE,
+					SETTINGS_ADMINISTRATION,
+					SETTINGS_AGENCY,
+					SETTINGS_CACHES,
+					SETTINGS_WEB_SERVER,
+				],
+			},
 			{
 				label: hasEnTranslation( 'Server Settings' )
 					? __( 'Server Settings' )

diff --git a/client/sites/settings/controller.tsx b/client/sites/settings/controller.tsx
@@ -0,0 +1,88 @@
+import { __ } from '@wordpress/i18n';
+import makeSidebar, { PanelWithSidebar } from '../components/panel-sidebar';
+import type { Context as PageJSContext } from '@automattic/calypso-router';
+
+const SettingsSidebar = makeSidebar( {
+	items: [
+		{
+			key: 'site',
+			get label() {
+				return __( 'Site' );
+			},
+		},
+		{
+			key: 'administration',
+			get label() {
+				return __( 'Administration' );
+			},
+		},
+		{
+			key: 'agency',
+			get label() {
+				return __( 'Agency' );
+			},
+		},
+		{
+			key: 'caches',
+			get label() {
+				return __( 'Caches' );
+			},
+		},
+		{
+			key: 'web-server',
+			get label() {
+				return __( 'Web Server' );
+			},
+		},
+	],
+} );
+
+export function siteSettings( context: PageJSContext, next: () => void ) {
+	context.primary = (
+		<PanelWithSidebar>
+			<SettingsSidebar selectedItemKey="site" />
+			<p>Site settings</p>
+		</PanelWithSidebar>
+	);
+	next();
+}
+
+export function administrationSettings( context: PageJSContext, next: () => void ) {
+	context.primary = (
+		<PanelWithSidebar>
+			<SettingsSidebar selectedItemKey="administration" />
+			<p>Administration settings</p>
+		</PanelWithSidebar>
+	);
+	next();
+}
+
+export function agencySettings( context: PageJSContext, next: () => void ) {
+	context.primary = (
+		<PanelWithSidebar>
+			<SettingsSidebar selectedItemKey="agency" />
+			<p>Agency settings</p>
+		</PanelWithSidebar>
+	);
+	next();
+}
+
+export function cachesSettings( context: PageJSContext, next: () => void ) {
+	context.primary = (
+		<PanelWithSidebar>
+			<SettingsSidebar selectedItemKey="caches" />
+			<p>Caches settings</p>
+		</PanelWithSidebar>
+	);
+	next();
+}
+
+export function webServerSettings( context: PageJSContext, next: () => void ) {
+	context.primary = (
+		<PanelWithSidebar>
+			<SettingsSidebar selectedItemKey="web-server" />
+			<p>Web server settings</p>
+		</PanelWithSidebar>
+	);
+	next();
+}
diff --git a/client/sites/settings/index.tsx b/client/sites/settings/index.tsx
@@ -0,0 +1,75 @@
+import page from '@automattic/calypso-router';
+import { makeLayout, render as clientRender } from 'calypso/controller';
+import { siteSelection, navigation, sites } from 'calypso/my-sites/controller';
+import {
+	SETTINGS_SITE,
+	SETTINGS_ADMINISTRATION,
+	SETTINGS_AGENCY,
+	SETTINGS_CACHES,
+	SETTINGS_WEB_SERVER,
+} from 'calypso/sites/components/site-preview-pane/constants';
+import { siteDashboard } from 'calypso/sites/controller';
+import {
+	siteSettings,
+	administrationSettings,
+	agencySettings,
+	cachesSettings,
+	webServerSettings,
+} from './controller';
+
+export default function () {
+	page( '/sites/settings/site', siteSelection, sites, makeLayout, clientRender );
+	page(
+		'/sites/settings/site/:site',
+		siteSelection,
+		navigation,
+		siteSettings,
+		siteDashboard( SETTINGS_SITE ),
+		makeLayout,
+		clientRender
+	);
+
+	page( '/sites/settings/administration', siteSelection, sites, makeLayout, clientRender );
+	page(
+		'/sites/settings/administration/:site',
+		siteSelection,
+		navigation,
+		administrationSettings,
+		siteDashboard( SETTINGS_ADMINISTRATION ),
+		makeLayout,
+		clientRender
+	);
+
+	page( '/sites/settings/agency', siteSelection, sites, makeLayout, clientRender );
+	page(
+		'/sites/settings/agency/:site',
+		siteSelection,
+		navigation,
+		agencySettings,
+		siteDashboard( SETTINGS_AGENCY ),
+		makeLayout,
+		clientRender
+	);
+
+	page( '/sites/settings/caches', siteSelection, sites, makeLayout, clientRender );
+	page(
+		'/sites/settings/caches/:site',
+		siteSelection,
+		navigation,
+		cachesSettings,
+		siteDashboard( SETTINGS_CACHES ),
+		makeLayout,
+		clientRender
+	);
+
+	page( '/sites/settings/web-server', siteSelection, sites, makeLayout, clientRender );
+	page(
+		'/sites/settings/web-server/:site',
+		siteSelection,
+		navigation,
+		webServerSettings,
+		siteDashboard( SETTINGS_WEB_SERVER ),
+		makeLayout,
+		clientRender
+	);
+}
diff --git a/client/state/global-sidebar/selectors.ts b/client/state/global-sidebar/selectors.ts
@@ -20,6 +20,7 @@ const SITE_DASHBOARD_ROUTES = {
 
 	// New Information Architecture
 	'site-marketing': '/sites/marketing',
+	'site-settings': '/sites/settings',
 };
 
 function isInSection( sectionName: string, sectionNames: string[] ) {