From f30e309848c6d87650af96a9a4136a086cca46e7 Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <ashar.fuadi@automattic.com>
Date: Wed, 4 Dec 2024 14:26:16 +0700
Subject: [PATCH] Untangling: fire calypso_page_view event on global view page
 load (#96999)

---
 client/hosting/overview/controller.tsx        |  8 ++-
 .../overview/components/hosting-overview.tsx  |  2 -
 client/sites/overview/controller.tsx          |  9 +++-
 client/sites/settings/controller.tsx          | 24 +++++++++
 client/sites/tools/controller.tsx             | 49 ++++++++++++++++++-
 client/utils.ts                               | 11 +++++
 6 files changed, 98 insertions(+), 5 deletions(-)

diff --git a/client/hosting/overview/controller.tsx b/client/hosting/overview/controller.tsx
index 856b22224b2a30..b76b25eb9bcf01 100644
--- a/client/hosting/overview/controller.tsx
+++ b/client/hosting/overview/controller.tsx
@@ -3,11 +3,17 @@ import { removeQueryArgs } from '@wordpress/url';
 import i18n from 'i18n-calypso';
 import HostingActivate from 'calypso/hosting/server-settings/hosting-activate';
 import Hosting from 'calypso/hosting/server-settings/main';
+import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import HostingOverview from 'calypso/sites/overview/components/hosting-overview';
 import { successNotice } from 'calypso/state/notices/actions';
 
 export function hostingOverview( context: PageJSContext, next: () => void ) {
-	context.primary = <HostingOverview />;
+	context.primary = (
+		<>
+			<PageViewTracker path="/overview/:site" title="Site Overview" />
+			<HostingOverview />
+		</>
+	);
 	next();
 }
 
diff --git a/client/sites/overview/components/hosting-overview.tsx b/client/sites/overview/components/hosting-overview.tsx
index 4ed1ff17f61fae..46885522a16cc3 100644
--- a/client/sites/overview/components/hosting-overview.tsx
+++ b/client/sites/overview/components/hosting-overview.tsx
@@ -1,7 +1,6 @@
 import { translate } from 'i18n-calypso';
 import { FC } from 'react';
 import NavigationHeader from 'calypso/components/navigation-header';
-import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import { isNotAtomicJetpack, isMigrationInProgress } from 'calypso/sites-dashboard/utils';
 import { useSelector } from 'calypso/state';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
@@ -30,7 +29,6 @@ const HostingOverview: FC = () => {
 
 	return (
 		<div className="hosting-overview">
-			<PageViewTracker path="/overview/:site" title="Site Overview" />
 			<NavigationHeader
 				className="hosting-overview__navigation-header"
 				title={ translate( 'Overview' ) }
diff --git a/client/sites/overview/controller.tsx b/client/sites/overview/controller.tsx
index e76cc588768cef..b9b983eea4dcde 100644
--- a/client/sites/overview/controller.tsx
+++ b/client/sites/overview/controller.tsx
@@ -1,7 +1,14 @@
+import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
+import { getRouteFromContext } from 'calypso/utils';
 import HostingOverview from './components/hosting-overview';
 import type { Context as PageJSContext } from '@automattic/calypso-router';
 
 export function overview( context: PageJSContext, next: () => void ) {
-	context.primary = <HostingOverview />;
+	context.primary = (
+		<>
+			<PageViewTracker title="Sites > Overview" path={ getRouteFromContext( context ) } />
+			<HostingOverview />
+		</>
+	);
 	next();
 }
diff --git a/client/sites/settings/controller.tsx b/client/sites/settings/controller.tsx
index c2ed0e449b5314..c465b52b298989 100644
--- a/client/sites/settings/controller.tsx
+++ b/client/sites/settings/controller.tsx
@@ -1,6 +1,8 @@
 import { __ } from '@wordpress/i18n';
 import { useSelector } from 'react-redux';
+import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import { getSelectedSiteSlug } from 'calypso/state/ui/selectors';
+import { getRouteFromContext } from 'calypso/utils';
 import { SidebarItem, Sidebar, PanelWithSidebar } from '../components/panel-sidebar';
 import AdministrationSettings from './administration';
 import useIsAdministrationSettingSupported from './administration/hooks/use-is-administration-setting-supported';
@@ -37,6 +39,7 @@ export function SettingsSidebar() {
 export function siteSettings( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker title="Sites > Settings > Site" path={ getRouteFromContext( context ) } />
 			<SettingsSidebar />
 			<SiteSettings />
 		</PanelWithSidebar>
@@ -47,6 +50,10 @@ export function siteSettings( context: PageJSContext, next: () => void ) {
 export function administrationSettings( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Settings > Administration"
+				path={ getRouteFromContext( context ) }
+			/>
 			<SettingsSidebar />
 			<AdministrationSettings />
 		</PanelWithSidebar>
@@ -57,6 +64,10 @@ export function administrationSettings( context: PageJSContext, next: () => void
 export function administrationToolResetSite( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Settings > Administration > Reset site"
+				path={ getRouteFromContext( context ) }
+			/>
 			<SettingsSidebar />
 			<ResetSite />
 		</PanelWithSidebar>
@@ -67,6 +78,10 @@ export function administrationToolResetSite( context: PageJSContext, next: () =>
 export function administrationToolTransferSite( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Settings > Administration > Transfer site"
+				path={ getRouteFromContext( context ) }
+			/>
 			<SettingsSidebar />
 			<TransferSite />
 		</PanelWithSidebar>
@@ -77,6 +92,10 @@ export function administrationToolTransferSite( context: PageJSContext, next: ()
 export function administrationToolDeleteSite( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Settings > Administration > Delete site"
+				path={ getRouteFromContext( context ) }
+			/>
 			<SettingsSidebar />
 			<DeleteSite />
 		</PanelWithSidebar>
@@ -87,6 +106,7 @@ export function administrationToolDeleteSite( context: PageJSContext, next: () =
 export function cachingSettings( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker title="Sites > Settings > Caching" path={ getRouteFromContext( context ) } />
 			<SettingsSidebar />
 			<CachingSettings />
 		</PanelWithSidebar>
@@ -97,6 +117,10 @@ export function cachingSettings( context: PageJSContext, next: () => void ) {
 export function webServerSettings( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Settings > Web server"
+				path={ getRouteFromContext( context ) }
+			/>
 			<SettingsSidebar />
 			<WebServerSettings />
 		</PanelWithSidebar>
diff --git a/client/sites/tools/controller.tsx b/client/sites/tools/controller.tsx
index 405d42ef755fd2..deeb45d8f51a44 100644
--- a/client/sites/tools/controller.tsx
+++ b/client/sites/tools/controller.tsx
@@ -1,8 +1,10 @@
 import page, { Context as PageJSContext } from '@automattic/calypso-router';
 import { __ } from '@wordpress/i18n';
 import { useSelector } from 'react-redux';
+import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import HostingFeatures from 'calypso/sites/hosting-features/components/hosting-features';
 import { getSelectedSite, getSelectedSiteSlug } from 'calypso/state/ui/selectors';
+import { getRouteFromContext } from 'calypso/utils';
 import { SidebarItem, Sidebar, PanelWithSidebar } from '../components/panel-sidebar';
 import { areHostingFeaturesSupported } from '../hosting-features/features';
 import Database from './database/page';
@@ -49,13 +51,22 @@ export function tools( context: PageJSContext, next: () => void ) {
 		return page.redirect( `/sites/tools/staging-site/${ site?.slug }` );
 	}
 
-	context.primary = <HostingFeatures showAsTools />;
+	context.primary = (
+		<>
+			<PageViewTracker title="Sites > Advanced Tools" path={ getRouteFromContext( context ) } />
+			<HostingFeatures showAsTools />
+		</>
+	);
 	next();
 }
 
 export function stagingSite( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Advanced Tools > Staging site"
+				path={ getRouteFromContext( context ) }
+			/>
 			<ToolsSidebar />
 			<StagingSite />
 		</PanelWithSidebar>
@@ -66,6 +77,10 @@ export function stagingSite( context: PageJSContext, next: () => void ) {
 export function deployments( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Advanced Tools > Deployments"
+				path={ getRouteFromContext( context ) }
+			/>
 			<ToolsSidebar />
 			<Deployments />
 		</PanelWithSidebar>
@@ -76,6 +91,10 @@ export function deployments( context: PageJSContext, next: () => void ) {
 export function deploymentCreation( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Advanced Tools > Deployments > Create"
+				path={ getRouteFromContext( context ) }
+			/>
 			<ToolsSidebar />
 			<DeploymentCreation />
 		</PanelWithSidebar>
@@ -94,6 +113,10 @@ export function deploymentManagement( context: PageJSContext, next: () => void )
 
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Advanced Tools > Deployments > Manage"
+				path={ getRouteFromContext( context ) }
+			/>
 			<ToolsSidebar />
 			<DeploymentManagement codeDeploymentId={ codeDeploymentId } />
 		</PanelWithSidebar>
@@ -112,6 +135,10 @@ export function deploymentRunLogs( context: PageJSContext, next: () => void ) {
 
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Advanced Tools > Deployments > Run logs"
+				path={ getRouteFromContext( context ) }
+			/>
 			<ToolsSidebar />
 			<DeploymentRunLogs codeDeploymentId={ codeDeploymentId } />
 		</PanelWithSidebar>
@@ -122,6 +149,10 @@ export function deploymentRunLogs( context: PageJSContext, next: () => void ) {
 export function monitoring( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Advanced Tools > Monitoring"
+				path={ getRouteFromContext( context ) }
+			/>
 			<ToolsSidebar />
 			<Monitoring />
 		</PanelWithSidebar>
@@ -132,6 +163,10 @@ export function monitoring( context: PageJSContext, next: () => void ) {
 export function phpErrorLogs( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Advanced Tools > Logs > PHP"
+				path={ getRouteFromContext( context ) }
+			/>
 			<ToolsSidebar />
 			<Logs logType="php" />
 		</PanelWithSidebar>
@@ -142,6 +177,10 @@ export function phpErrorLogs( context: PageJSContext, next: () => void ) {
 export function webServerLogs( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Advanced Tools > Logs > Web"
+				path={ getRouteFromContext( context ) }
+			/>
 			<ToolsSidebar />
 			<Logs logType="web" />
 		</PanelWithSidebar>
@@ -152,6 +191,10 @@ export function webServerLogs( context: PageJSContext, next: () => void ) {
 export function sftpSsh( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Advanced Tools > SFTP/SSH"
+				path={ getRouteFromContext( context ) }
+			/>
 			<ToolsSidebar />
 			<SftpSsh />
 		</PanelWithSidebar>
@@ -162,6 +205,10 @@ export function sftpSsh( context: PageJSContext, next: () => void ) {
 export function database( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<PanelWithSidebar>
+			<PageViewTracker
+				title="Sites > Advanced Tools > Database"
+				path={ getRouteFromContext( context ) }
+			/>
 			<ToolsSidebar />
 			<Database />
 		</PanelWithSidebar>
diff --git a/client/utils.ts b/client/utils.ts
index ff9fb30f7e0f9f..322f696536bf13 100644
--- a/client/utils.ts
+++ b/client/utils.ts
@@ -1,3 +1,4 @@
+import { Context } from '@automattic/calypso-router';
 import { addQueryArgs } from 'calypso/lib/url';
 // Adapts route paths to also include wildcard
 // subroutes under the root level section.
@@ -50,3 +51,13 @@ export function isEligibleForProductSampling( userId: number, percentage: number
 
 	return userSegment < percentage;
 }
+
+export function getRouteFromContext( context: Context ) {
+	let route = context.path;
+	for ( const [ key, value ] of Object.entries( context.params ) ) {
+		if ( key !== '0' ) {
+			route = route.replace( value, ':' + key );
+		}
+	}
+	return route;
+}