Make Site Settings available to duplicate views experiment users (#98875)

* PoC

* Tidy up the styles

* /sites/settings/administration -> /sites/settings/site

* Add "Admin interface style" to General Settings

* Redirect /settings/general to /sites/settings/site

* Hide settings sidebar for simple sites

* Introduce `useRemoveDuplicateViewsExperimentEnabled`

* Update flags

* Update flags in controllers

* Update flags in components

* Fix type error

* Remove Admin interface style

Revert "Add "Admin interface style" to General Settings"

This reverts commit b0caa4b.

* Use PanelCard instead of HostingCard

* Don't use wide Panel card

* Proper switching b/w /hosting-feature <-> /hosting-config

- Switching to Atomic while on /hosting-feature: Redirect to /hosting-config/:site
- Switching to Simple while on /hosting-config: Redirect to /sites/settings/site/:site

* Remove the notice for staging sites

* Remove /settings/general -> /sites/settings/site redirection

* Revert "Remove /settings/general -> /sites/settings/site redirection"

This reverts commit 2d5d325.

* Limit re-instated /settings/general/:site redirect to classic view only

* Redirect if the user is not admin

* Add redirects to wp-admin based on #98664

* Fix unexpected redirection to options-general.php

* Redirect /settings to site settings if in treatment group

* Remove redirects

* Move settings redirects to local controller

* Typo

---------

Co-authored-by: Louis Laugesen <[email protected]>

Author: 2 people

client/controller/index.web.js

@@ -21,6 +21,7 @@ import { loadExperimentAssignment } from 'calypso/lib/explat';
 import { navigate } from 'calypso/lib/navigate';
 import { createAccountUrl, login } from 'calypso/lib/paths';
 import { CalypsoReactQueryDevtools } from 'calypso/lib/react-query-devtools-helper';
+import { getIsRemoveDuplicateViewsExperimentEnabled } from 'calypso/lib/remove-duplicate-views-experiment';
 import { addQueryArgs, getSiteFragment } from 'calypso/lib/route';
 import {
 	getProductSlugFromContext,
@@ -312,12 +313,19 @@ export function redirectIfJetpackNonAtomic( context, next ) {
  * @param   {Function} next    Calls next middleware
  * @returns {void}
  */
-export function redirectToHostingPromoIfNotAtomic( context, next ) {
+export async function redirectToHostingPromoIfNotAtomic( context, next ) {
 	const state = context.store.getState();
 	const site = getSelectedSite( state );
 	const isAtomicSite = !! site?.is_wpcom_atomic || !! site?.is_wpcom_staging_site;
 
 	if ( ! isAtomicSite || site.plan?.expired ) {
+		// Keep the user within the Settings tab
+		const isRemoveDuplicateViewsExperimentEnabled =
+			await getIsRemoveDuplicateViewsExperimentEnabled();
+		if ( isRemoveDuplicateViewsExperimentEnabled ) {
+			return page.redirect( '/sites/settings/site/' + context.params.site_id );
+		}
+
 		return page.redirect( `/hosting-features/${ site?.slug }` );
 	}
 
@@ -395,11 +403,11 @@ export const ssrSetupLocale = ( _context, next ) => {
 };
 
 export const redirectIfDuplicatedView = ( wpAdminPath ) => async ( context, next ) => {
-	const experimentName = 'calypso_post_onboarding_holdout_160125';
 	const aaTestName = 'calypso_post_onboarding_aa_150125';
 
 	loadExperimentAssignment( aaTestName );
-	const duplicateViewsExperimentAssignment = await loadExperimentAssignment( experimentName );
+	const isRemoveDuplicateViewsExperimentEnabled =
+		await getIsRemoveDuplicateViewsExperimentEnabled();
 
 	const overrideAssignment = getPreference(
 		context.store.getState(),
@@ -411,7 +419,7 @@ export const redirectIfDuplicatedView = ( wpAdminPath ) => async ( context, next
 		return;
 	}
 
-	if ( isE2ETest() || duplicateViewsExperimentAssignment.variationName === 'treatment' ) {
+	if ( isE2ETest() || isRemoveDuplicateViewsExperimentEnabled ) {
 		const state = context.store.getState();
 		const siteId = getSelectedSiteId( state );
 		const wpAdminUrl = getSiteAdminUrl( state, siteId, wpAdminPath );

client/hosting/overview/controller.tsx

@@ -4,7 +4,10 @@ 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 { getIsRemoveDuplicateViewsExperimentEnabled } from 'calypso/lib/remove-duplicate-views-experiment';
+import { PanelWithSidebar } from 'calypso/sites/components/panel-sidebar';
 import HostingOverview from 'calypso/sites/overview/components/hosting-overview';
+import { SettingsSidebar } from 'calypso/sites/settings/controller';
 import { successNotice } from 'calypso/state/notices/actions';
 
 export function hostingOverview( context: PageJSContext, next: () => void ) {
@@ -17,7 +20,7 @@ export function hostingOverview( context: PageJSContext, next: () => void ) {
 	next();
 }
 
-export function hostingConfiguration( context: PageJSContext, next: () => void ) {
+export async function hostingConfiguration( context: PageJSContext, next: () => void ) {
 	// Update the url and show the notice after a redirect
 	if ( context.query && context.query.hosting_features === 'activated' ) {
 		context.store.dispatch(
@@ -32,16 +35,34 @@ export function hostingConfiguration( context: PageJSContext, next: () => void )
 			removeQueryArgs( window.location.href, 'hosting_features' )
 		);
 	}
-	context.primary = (
+	const isRemoveDuplicateViewsExperimentEnabled =
+		await getIsRemoveDuplicateViewsExperimentEnabled();
+	context.primary = isRemoveDuplicateViewsExperimentEnabled ? (
+		<PanelWithSidebar>
+			<SettingsSidebar />
+			<div className="hosting-configuration">
+				<Hosting />
+			</div>
+		</PanelWithSidebar>
+	) : (
 		<div className="hosting-configuration">
 			<Hosting />
 		</div>
 	);
 	next();
 }
 
-export function hostingActivate( context: PageJSContext, next: () => void ) {
-	context.primary = (
+export async function hostingActivate( context: PageJSContext, next: () => void ) {
+	const isRemoveDuplicateViewsExperimentEnabled =
+		await getIsRemoveDuplicateViewsExperimentEnabled();
+	context.primary = isRemoveDuplicateViewsExperimentEnabled ? (
+		<PanelWithSidebar>
+			<SettingsSidebar />
+			<div className="hosting-configuration">
+				<HostingActivate />
+			</div>
+		</PanelWithSidebar>
+	) : (
 		<div className="hosting-configuration">
 			<HostingActivate />
 		</div>

client/hosting/server-settings/main.tsx

@@ -26,11 +26,11 @@ import { SftpCard } from 'calypso/hosting/server-settings/components/sftp-card/c
 import HostingActivateStatus from 'calypso/hosting/server-settings/hosting-activate-status';
 import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import TrackComponentView from 'calypso/lib/analytics/track-component-view';
+import { useRemoveDuplicateViewsExperimentEnabled } from 'calypso/lib/remove-duplicate-views-experiment';
 import { TrialAcknowledgeModal } from 'calypso/my-sites/plans/trials/trial-acknowledge/acknowlege-modal';
 import { WithOnclickTrialRequest } from 'calypso/my-sites/plans/trials/trial-acknowledge/with-onclick-trial-request';
 import TrialBanner from 'calypso/my-sites/plans/trials/trial-banner';
 import JetpackMonitor from 'calypso/my-sites/site-settings/form-jetpack-monitor';
-import SiteAdminInterface from 'calypso/my-sites/site-settings/site-admin-interface';
 import CacheCard from 'calypso/sites/settings/caching/form';
 import DefensiveModeCard from 'calypso/sites/settings/web-server/defensive-mode-form';
 import WebServerSettingsCard from 'calypso/sites/settings/web-server/server-configuration-form';
@@ -109,7 +109,6 @@ const AllCards = ( {
 	isAdvancedHostingDisabled,
 	isBasicHostingDisabled,
 	siteId,
-	siteSlug,
 	isJetpack,
 }: AllCardsProps ) => {
 	const allCards: CardEntry[] = [
@@ -135,14 +134,6 @@ const AllCards = ( {
 		},
 	];
 
-	if ( siteId ) {
-		allCards.push( {
-			feature: 'wp-admin',
-			content: <SiteAdminInterface siteId={ siteId } siteSlug={ siteSlug } isHosting />,
-			type: 'basic',
-		} );
-	}
-
 	if ( config.isEnabled( 'hosting-server-settings-enhancements' ) ) {
 		allCards.push( {
 			feature: 'defensive-mode',
@@ -177,6 +168,53 @@ const AllCards = ( {
 	return <ShowEnabledFeatureCards cards={ allCards } availableTypes={ availableTypes } />;
 };
 
+const InnerDiv = ( { children }: { children: React.ReactNode } ) => <>{ children }</>;
+
+const Content = ( {
+	hasAtomicFeature,
+	hasSftpFeature,
+	hasTransfer,
+	isBusinessTrial,
+	isRemoveDuplicateViewsExperimentEnabled,
+	isJetpack,
+	isSiteAtomic,
+	siteId,
+	siteSlug,
+}: {
+	hasAtomicFeature: boolean;
+	hasSftpFeature: boolean;
+	hasTransfer: boolean;
+	isBusinessTrial: boolean;
+	isRemoveDuplicateViewsExperimentEnabled: boolean;
+	isJetpack: boolean | null;
+	isSiteAtomic: boolean;
+	siteId: number | null;
+	siteSlug: string | null;
+} ) => {
+	const WrapperComponent = ! isSiteAtomic ? FeatureExample : Fragment;
+
+	const Inner = isRemoveDuplicateViewsExperimentEnabled ? InnerDiv : MasonryGrid;
+
+	return (
+		<>
+			{ isSiteAtomic && <QuerySites siteId={ siteId } /> }
+			{ isJetpack && siteId && <QueryJetpackModules siteId={ siteId } /> }
+			<WrapperComponent>
+				<Inner>
+					<AllCards
+						isAdvancedHostingDisabled={ ! hasSftpFeature || ! isSiteAtomic }
+						isBasicHostingDisabled={ ! hasAtomicFeature || ! isSiteAtomic }
+						isBusinessTrial={ isBusinessTrial && ! hasTransfer }
+						siteId={ siteId }
+						siteSlug={ siteSlug }
+						isJetpack={ isJetpack }
+					/>
+				</Inner>
+			</WrapperComponent>
+		</>
+	);
+};
+
 type ServerSettingsProps = {
 	fetchUpdatedData: () => void;
 };
@@ -185,6 +223,8 @@ const ServerSettings = ( { fetchUpdatedData }: ServerSettingsProps ) => {
 	const translate = useTranslate();
 	const dispatch = useDispatch();
 
+	const isRemoveDuplicateViewsExperimentEnabled = useRemoveDuplicateViewsExperimentEnabled();
+
 	const clickActivate = () =>
 		dispatch( recordTracksEvent( 'calypso_hosting_configuration_activate_click' ) );
 
@@ -236,11 +276,11 @@ const ServerSettings = ( { fetchUpdatedData }: ServerSettingsProps ) => {
 				fetchUpdatedData();
 			}
 		},
-		[ hasTransfer ]
+		[ fetchUpdatedData, hasTransfer ]
 	);
 
 	const getPageTitle = () => {
-		return translate( 'Server Settings' );
+		return translate( 'Server settings' );
 	};
 
 	const getUpgradeBanner = () => {
@@ -278,29 +318,6 @@ const ServerSettings = ( { fetchUpdatedData }: ServerSettingsProps ) => {
 		}
 	};
 
-	const getContent = () => {
-		const WrapperComponent = ! isSiteAtomic ? FeatureExample : Fragment;
-
-		return (
-			<>
-				{ isSiteAtomic && <QuerySites siteId={ siteId } /> }
-				{ isJetpack && siteId && <QueryJetpackModules siteId={ siteId } /> }
-				<WrapperComponent>
-					<MasonryGrid>
-						<AllCards
-							isAdvancedHostingDisabled={ ! hasSftpFeature || ! isSiteAtomic }
-							isBasicHostingDisabled={ ! hasAtomicFeature || ! isSiteAtomic }
-							isBusinessTrial={ isBusinessTrial && ! hasTransfer }
-							siteId={ siteId }
-							siteSlug={ siteSlug }
-							isJetpack={ isJetpack }
-						/>
-					</MasonryGrid>
-				</WrapperComponent>
-			</>
-		);
-	};
-
 	/* We want to show the upsell banner for the following cases:
 	 * 1. The site is on an eCommerce trial.
 	 * 2. The site does not have the Atomic feature.
@@ -317,7 +334,7 @@ const ServerSettings = ( { fetchUpdatedData }: ServerSettingsProps ) => {
 	}
 
 	return (
-		<Panel wide className="page-server-settings">
+		<Panel wide={ ! isRemoveDuplicateViewsExperimentEnabled } className="page-server-settings">
 			{ ! isLoadingSftpData && (
 				<ScrollToAnchorOnMount
 					offset={ HEADING_OFFSET }
@@ -352,7 +369,17 @@ const ServerSettings = ( { fetchUpdatedData }: ServerSettingsProps ) => {
 					}
 				/>
 			) }
-			{ getContent() }
+			<Content
+				hasAtomicFeature={ hasAtomicFeature }
+				hasSftpFeature={ hasSftpFeature }
+				hasTransfer={ hasTransfer }
+				isBusinessTrial={ isBusinessTrial }
+				isRemoveDuplicateViewsExperimentEnabled={ isRemoveDuplicateViewsExperimentEnabled }
+				isJetpack={ isJetpack }
+				isSiteAtomic={ isSiteAtomic }
+				siteId={ siteId }
+				siteSlug={ siteSlug }
+			/>
 			{ isEligibleForHostingTrial && isTrialAcknowledgeModalOpen && (
 				<TrialAcknowledgeModal
 					setOpenModal={ ( isOpen ) => {

client/lib/remove-duplicate-views-experiment/index.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { loadExperimentAssignment } from 'calypso/lib/explat';
+
+const EXPERIMENT_NAME = 'calypso_post_onboarding_holdout_160125';
+
+export const getIsRemoveDuplicateViewsExperimentEnabled = async (): Promise< boolean > => {
+	const experimentAssignment = await loadExperimentAssignment( EXPERIMENT_NAME );
+	return experimentAssignment?.variationName === 'treatment';
+};
+
+export const useRemoveDuplicateViewsExperimentEnabled = (): boolean => {
+	const [ isRemoveDuplicateViewsExperimentEnabled, setIsRemoveDuplicateViewsExperimentEnabled ] =
+		useState( false );
+
+	useEffect( () => {
+		getIsRemoveDuplicateViewsExperimentEnabled().then( setIsRemoveDuplicateViewsExperimentEnabled );
+	}, [] );
+
+	return isRemoveDuplicateViewsExperimentEnabled;
+};

client/my-sites/site-settings/form-general.jsx

@@ -1,4 +1,3 @@
-import { isEnabled } from '@automattic/calypso-config';
 import { Card, Button, FormLabel, Gridicon } from '@automattic/components';
 import { guessTimezone, localizeUrl } from '@automattic/i18n-utils';
 import languages from '@automattic/languages';
@@ -15,6 +14,7 @@ import SiteLanguagePicker from 'calypso/components/language-picker/site-language
 import Notice from 'calypso/components/notice';
 import NoticeAction from 'calypso/components/notice/notice-action';
 import Timezone from 'calypso/components/timezone';
+import { getIsRemoveDuplicateViewsExperimentEnabled } from 'calypso/lib/remove-duplicate-views-experiment';
 import scrollToAnchor from 'calypso/lib/scroll-to-anchor';
 import { domainManagementEdit } from 'calypso/my-sites/domains/paths';
 import SettingsSectionHeader from 'calypso/my-sites/site-settings/settings-section-header';
@@ -40,8 +40,22 @@ import SiteIconSetting from './site-icon-setting';
 import wrapSettingsForm from './wrap-settings-form';
 
 export class SiteSettingsFormGeneral extends Component {
+	state = {
+		isRemoveDuplicateViewsExperimentEnabled: false,
+	};
+
 	componentDidMount() {
 		setTimeout( () => scrollToAnchor( { offset: 15 } ) );
+		getIsRemoveDuplicateViewsExperimentEnabled().then(
+			( isRemoveDuplicateViewsExperimentEnabled ) => {
+				if (
+					this.state.isRemoveDuplicateViewsExperimentEnabled !==
+					isRemoveDuplicateViewsExperimentEnabled
+				) {
+					this.setState( { isRemoveDuplicateViewsExperimentEnabled } );
+				}
+			}
+		);
 	}
 
 	getIncompleteLocaleNoticeMessage = ( language ) => {
@@ -382,6 +396,7 @@ export class SiteSettingsFormGeneral extends Component {
 			translate,
 			adminInterfaceIsWPAdmin,
 		} = this.props;
+		const { isRemoveDuplicateViewsExperimentEnabled } = this.state;
 		const classes = clsx( 'site-settings__general-settings', {
 			'is-loading': isRequestingSettings,
 		} );
@@ -418,7 +433,7 @@ export class SiteSettingsFormGeneral extends Component {
 						</Card>
 					</>
 				) }
-				{ ! isEnabled( 'untangling/hosting-menu' ) && <SiteSettingsForm { ...this.props } /> }
+				{ ! isRemoveDuplicateViewsExperimentEnabled && <SiteSettingsForm { ...this.props } /> }
 				{ ! isDevelopmentSite && this.renderAdminInterface() }
 			</div>
 		);