Only allow headline ab testing on the US network front

app/model/FeatureSwitches.scala

@@ -26,18 +26,10 @@ object PageViewDataVisualisation
       enabled = true
     )
 
-object HeadlineABTesting
-    extends FeatureSwitch(
-      key = "headline-ab-testing",
-      title = "Enable toggle switch for AB testing headlines",
-      enabled = false
-    )
-
 object FeatureSwitches {
   val all: List[FeatureSwitch] = List(
     ObscureFeed,
-    PageViewDataVisualisation,
-    HeadlineABTesting
+    PageViewDataVisualisation
   )
 
   def updateFeatureSwitchesForUser(

fronts-client/src/components/FrontsEdit/CollectionComponents/Collection.tsx

@@ -45,7 +45,6 @@ import LoadingGif from 'images/icons/loading.gif';
 import OpenFormsWarning from './OpenFormsWarning';
 import AbTestHeadlineWarning from './AbTestHeadlineWarning';
 import { createSelectActiveAbTestHeadlineErrorsForCollection } from 'selectors/collection';
-import { selectFeatureValue } from 'selectors/featureSwitchesSelectors';
 import { selectors as editionsIssueSelectors } from '../../../bundles/editionsIssueBundle';
 import { moveFrontCollection } from '../../../actions/Editions';
 
@@ -234,6 +233,8 @@ class Collection extends React.Component<CollectionProps, CollectionState> {
 
 		const groupIds = groups.map((group) => group.uuid);
 
+		const isUSNetworkFront = frontId === 'us';
+
 		return (
 			<>
 				<CollectionDisplay
@@ -309,11 +310,13 @@ class Collection extends React.Component<CollectionProps, CollectionState> {
 											<OpenFormsWarning collectionId={id} frontId={frontId} />
 										</OpenFormsWarningContainer>
 									)}
-									{hasAbTestHeadlineErrors && this.state.showFormWarnings && (
-										<OpenFormsWarningContainer>
-											<AbTestHeadlineWarning collectionId={id} />
-										</OpenFormsWarningContainer>
-									)}
+									{hasAbTestHeadlineErrors &&
+										isUSNetworkFront &&
+										this.state.showFormWarnings && (
+											<OpenFormsWarningContainer>
+												<AbTestHeadlineWarning collectionId={id} />
+											</OpenFormsWarningContainer>
+										)}
 									<EditModeVisibility visibleMode="fronts">
 										<Button
 											size="l"
@@ -445,7 +448,6 @@ const createMapStateToProps = () => {
 		hasContent: !!selectors.selectById(state, collectionId),
 		hasOpenForms: selectHasOpenForms(state, { collectionId, frontId }),
 		hasAbTestHeadlineErrors:
-			selectFeatureValue(state, 'headline-ab-testing') &&
 			selectActiveAbTestHeadlineErrorsForCollection(state, { collectionId })
 				.length > 0,
 		isFeast: editionsIssueSelectors.selectAll(state)?.platform === 'feast',

fronts-client/src/components/FrontsEdit/CollectionOverview.tsx

@@ -20,7 +20,6 @@ import EditModeVisibility from 'components/util/EditModeVisibility';
 import { createSelectCollectionIdsWithOpenForms } from 'bundles/frontsUI';
 import { css } from 'styled-components';
 import { ConicalFlaskIcon } from 'components/icons/Icons';
-import { selectFeatureValue } from 'selectors/featureSwitchesSelectors';
 import { hasActiveAbTestOnCard } from '../../util/abTests';
 
 interface FrontCollectionOverviewContainerProps {
@@ -37,7 +36,6 @@ type FrontCollectionOverviewProps = FrontCollectionOverviewContainerProps & {
 	hasUnpublishedChanges: boolean;
 	hasOpenForms: boolean;
 	liveAndDraftCards: Card[];
-	headlineABTestingIsEnabled?: boolean;
 };
 
 const Container = styled.div<{
@@ -140,9 +138,14 @@ const CollectionOverview = ({
 	isSelected,
 	hasOpenForms,
 	liveAndDraftCards,
-	headlineABTestingIsEnabled,
-}: FrontCollectionOverviewProps) =>
-	collection ? (
+}: FrontCollectionOverviewProps) => {
+	/*
+	 * Initial rollout of Editorial AB testing will be limited to the US front only.
+	 * Removal of this front restriction will be covered by https://github.com/guardian/frontend/issues/29129
+	 */
+	const isUSNetworkFront = frontId === 'us';
+
+	return collection ? (
 		<Container
 			onClick={(e: React.MouseEvent) => {
 				e.preventDefault();
@@ -199,7 +202,7 @@ const CollectionOverview = ({
 						</EditModeVisibility>
 					) : null)}
 				{liveAndDraftCards.some(
-					(card) => hasActiveAbTestOnCard(card) && headlineABTestingIsEnabled,
+					(card) => hasActiveAbTestOnCard(card) && isUSNetworkFront,
 				) && (
 					<EditModeVisibility visibleMode="fronts">
 						<TestIndicator priority="primary" size="s" title="Active tests">
@@ -210,7 +213,7 @@ const CollectionOverview = ({
 			</TextContainerRight>
 		</Container>
 	) : null;
-
+};
 const mapStateToProps = () => {
 	const selectCollection = createSelectCollection();
 	const selectCardsInCollection = createSelectCardsInCollection();
@@ -243,10 +246,6 @@ const mapStateToProps = () => {
 				collectionId,
 			) !== -1,
 		liveAndDraftCards: selectLiveAndDraftCards(state, collectionId),
-		headlineABTestingIsEnabled: selectFeatureValue(
-			state,
-			'headline-ab-testing',
-		),
 	});
 };
 

fronts-client/src/components/card/article/ArticleBody.tsx

@@ -247,7 +247,6 @@ interface ArticleBodyProps {
 	};
 	abTestEnabled?: boolean;
 	hasLiveAbTest?: boolean;
-	headlineABTestingIsEnabled?: boolean;
 	headlineTestError?: AbTestHeadlineErrorType | null;
 }
 
@@ -308,7 +307,6 @@ const articleBodyDefault = React.memo(
 		intendedAudience,
 		abTestEnabled,
 		hasLiveAbTest,
-		headlineABTestingIsEnabled,
 		headlineTestError,
 	}: ArticleBodyProps) => {
 		const displayByline = size === 'default' && showByline && byline;
@@ -410,6 +408,14 @@ const articleBodyDefault = React.memo(
 			headlineTestError,
 		);
 
+		/*
+		 * Initial rollout of Editorial AB testing will be limited to the US front only.
+		 * Removal of this front restriction will be covered by https://github.com/guardian/frontend/issues/29129
+		 */
+		const isUSNetworkFront = frontId === 'us';
+
+		const shouldShowAbTestStatus = !!abTestStatus && isUSNetworkFront;
+
 		return (
 			<>
 				{showMeta && (
@@ -536,7 +542,7 @@ const articleBodyDefault = React.memo(
 						)}
 						{displayByline && <ArticleBodyByline>{byline}</ArticleBodyByline>}
 					</CardHeadingContainer>
-					{abTestStatus && headlineABTestingIsEnabled && (
+					{shouldShowAbTestStatus && (
 						<ABTestStatus abTestTheme={abTestStatus.theme}>
 							{abTestStatus.theme === 'error' ? (
 								<ExclamationIcon fill={abTestStatus.palette.icon} size={'s'} />

fronts-client/src/components/card/article/ArticleCard.tsx

@@ -74,7 +74,6 @@ interface ArticleComponentProps {
 	groupIndex?: number;
 	otherCollectionsOnSameFrontThisCardIsOn?: OtherCollectionsOnSameFrontThisCardIsOn;
 	hasLiveAbTest?: boolean;
-	headlineABTestingIsEnabled?: boolean;
 	headlineTestError?: AbTestHeadlineErrorType | null;
 }
 
@@ -128,7 +127,6 @@ class ArticleCard extends React.Component<ComponentProps, ComponentState> {
 			groupIndex,
 			otherCollectionsOnSameFrontThisCardIsOn,
 			hasLiveAbTest,
-			headlineABTestingIsEnabled,
 			headlineTestError,
 		} = this.props;
 
@@ -204,7 +202,6 @@ class ArticleCard extends React.Component<ComponentProps, ComponentState> {
 									intendedAudienceFromTags(article.tags)
 								}
 								hasLiveAbTest={hasLiveAbTest}
-								headlineABTestingIsEnabled={headlineABTestingIsEnabled}
 								headlineTestError={headlineTestError}
 							/>
 						</ArticleBodyContainer>
@@ -228,7 +225,6 @@ const createMapStateToProps = () => {
 		isLoading: boolean;
 		featureFlagPageViewData: boolean;
 		hasLiveAbTest?: boolean;
-		headlineABTestingIsEnabled: boolean;
 		headlineTestError: AbTestHeadlineErrorType | null;
 	} => {
 		const article = selectArticle(state, props.id);
@@ -250,10 +246,6 @@ const createMapStateToProps = () => {
 				'page-view-data-visualisation',
 			),
 			hasLiveAbTest: hasLiveAbTest,
-			headlineABTestingIsEnabled: selectFeatureValue(
-				state,
-				'headline-ab-testing',
-			),
 			headlineTestError: headlineTestError,
 		};
 	};

fronts-client/src/components/form/ArticleMetaForm.tsx

@@ -731,6 +731,7 @@ class FormComponent extends React.Component<Props, FormComponentState> {
 								editableFields={editableFields}
 								snapType={this.props.snapType}
 								onAbTestToggle={handleAbTestToggle}
+								frontId={this.props.frontId}
 							/>
 						)}
 						<CheckboxFieldsContainer

fronts-client/src/components/form/__tests__/ArticleMetaForm.spec.tsx

@@ -15,20 +15,6 @@ const variantMeta: VariantMeta[] = [
 	{ id: 'B', meta: { headline: 'Headline B variant' } },
 ];
 
-// TODO: Remove when no longer gated behind feature switch
-jest.mock('util/extractConfigFromPage', () => {
-	const baseConfig = jest.requireActual('fixtures/config').default;
-	return {
-		__esModule: true,
-		default: {
-			...baseConfig,
-			userData: {
-				featureSwitches: [{ key: 'headline-ab-testing', enabled: true }],
-			},
-		},
-	};
-});
-
 afterEach(cleanup);
 
 const cardId = 'exampleId';
@@ -54,7 +40,7 @@ const renderForm = (state: State) => {
 					<ArticleMetaForm
 						cardId={cardId}
 						form={cardId}
-						frontId="frontId"
+						frontId="us"
 						onSave={jest.fn()}
 						onCancel={jest.fn()}
 					/>
@@ -74,7 +60,7 @@ describe('ArticleMetaForm - headline AB testing', () => {
 					<ArticleMetaForm
 						cardId={cardId}
 						form={cardId}
-						frontId="frontId"
+						frontId="us"
 						onSave={jest.fn()}
 						onCancel={jest.fn()}
 					/>

fronts-client/src/components/inputs/HeadlineInput.tsx

@@ -7,7 +7,6 @@ import InputCheckboxToggleInline from './InputCheckboxToggleInline';
 import ConditionalField from './ConditionalField';
 import { OphanBanner } from '../OphanBanner';
 import styled from 'styled-components';
-import pageConfig from '../../util/extractConfigFromPage';
 import { normaliseHeadline } from '../../util/abTests';
 
 interface HeadlineInputProps {
@@ -18,6 +17,7 @@ interface HeadlineInputProps {
 	editableFields: string[];
 	snapType: string | undefined;
 	onAbTestToggle?: EventWithDataHandler<React.ChangeEvent<any>>;
+	frontId: string;
 }
 
 const HeadlineInputContainer = styled('div')<{ abTestEnabled: boolean }>`
@@ -68,17 +68,16 @@ const HeadlineInput = ({ ...props }: HeadlineInputProps) => {
 
 	const getInputId = (cardId: string, label: string) => `${cardId}-${label}`;
 
-	const headlineABTestingFeatureSwitch =
-		pageConfig?.userData?.featureSwitches.find(
-			(feature) => feature.key === 'headline-ab-testing',
-		);
-
-	const abTestFeatureEnabled = headlineABTestingFeatureSwitch?.enabled === true;
+	/*
+	 * Initial rollout of Editorial AB testing will be limited to the US front only.
+	 * Removal of this front restriction will be covered by https://github.com/guardian/frontend/issues/29129
+	 */
+	const isUSNetworkFront = props.frontId === 'us';
 	return (
 		<HeadlineInputContainer
-			abTestEnabled={props.abTestEnabled && abTestFeatureEnabled}
+			abTestEnabled={props.abTestEnabled && isUSNetworkFront}
 		>
-			{props.cardId && abTestFeatureEnabled && (
+			{props.cardId && isUSNetworkFront && (
 				<ABTestToggleContainer>
 					<Field
 						name="abTestEnabled"
@@ -94,7 +93,7 @@ const HeadlineInput = ({ ...props }: HeadlineInputProps) => {
 				</ABTestToggleContainer>
 			)}
 
-			{props.abTestEnabled && abTestFeatureEnabled ? (
+			{props.abTestEnabled && isUSNetworkFront ? (
 				<HeadlineVariantContainer>
 					<ConditionalField
 						permittedFields={props.editableFields}
@@ -129,7 +128,7 @@ const HeadlineInput = ({ ...props }: HeadlineInputProps) => {
 					data-testid="edit-form-headline-field"
 				/>
 			)}
-			{abTestFeatureEnabled && props.abTestEnabled && props.hasActiveABTest && (
+			{isUSNetworkFront && props.abTestEnabled && props.hasActiveABTest && (
 				<OphanBanner />
 			)}
 		</HeadlineInputContainer>