Merge branch 'main' into link-follow-to-notifications

Author: aracho1

ab-testing/config/types.ts

@@ -50,6 +50,18 @@ type ABTest = {
 	 * See DCR Metrics component for end usage
 	 */
 	shouldForceMetricsCollection?: boolean;
+	/**
+	 * Determines whether the test should be included in Ophan reporting. This function
+	 * will be evaluated on the client before the Ophan network request is made.
+	 *
+	 * For example, you could use this if you have a server-side test and would like to exclude certain
+	 * pageviews from reporting based on client-side information, such as users with smaller screens.
+	 *
+	 * @example: shouldReportToOphan: () => window.innerWidth >= 1300
+	 *
+	 * On by default: if not provided, the test will report to Ophan as usual.
+	 */
+	shouldReportToOphan?: () => boolean;
 };
 
 export type { ABTest, FastlyTestParams, AudienceSpace, AllSpace };

dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.stories.tsx

@@ -70,6 +70,7 @@ export const Fixture = {
 		refreshInterval: 3_000,
 		matchHeaderURL:
 			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
+		renderingTarget: 'Web',
 	},
 	play: async ({ canvas, canvasElement, step }) => {
 		const nav = canvas.getByRole('navigation');
@@ -115,6 +116,7 @@ export const Live = {
 				footballMatch: matchDayLive,
 				reportURL: undefined,
 			}),
+		renderingTarget: 'Web',
 	},
 	play: async ({ canvas, canvasElement, step }) => {
 		await step(
@@ -158,6 +160,7 @@ export const Result = {
 				...feHeaderData,
 				footballMatch: matchResult,
 			}),
+		renderingTarget: 'Web',
 	},
 
 	play: async ({ canvas, canvasElement, step }) => {
@@ -188,6 +191,49 @@ export const Result = {
 	},
 } satisfies Story;
 
+export const AppsResult = {
+	args: {
+		initialTab: 'report',
+		edition: 'AU',
+		matchHeaderURL:
+			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
+		refreshInterval: Fixture.args.refreshInterval,
+		getHeaderData: () =>
+			getMockData({
+				...feHeaderData,
+				footballMatch: matchResult,
+			}),
+		renderingTarget: 'Apps',
+	},
+
+	play: async ({ canvas, canvasElement, step }) => {
+		await step(
+			'Placeholder shown whilst header data is being fetched',
+			async () => {
+				void expect(
+					canvasElement.querySelector('[data-name="placeholder"]'),
+				).toBeInTheDocument();
+			},
+		);
+
+		await step('Fetch match header data and render UI', async () => {
+			// Wait for 'Premier League' to appear which signals match header
+			// data has been fetched and the UI rendered on the client
+			await canvas.findByText('Premier League');
+
+			const nav = canvas.getByRole('navigation');
+			const matchInfoLink = within(nav).getByRole('link', {
+				name: 'Match info',
+			});
+
+			void expect(matchInfoLink).toHaveAttribute(
+				'href',
+				expect.stringContaining('/football/match/1'),
+			);
+		});
+	},
+} satisfies Story;
+
 const getMockData = (data: FEFootballMatchHeader) =>
 	new Promise((resolve) => {
 		setTimeout(() => {

dotcom-rendering/src/components/FootballMatchHeader/FootballMatchHeader.tsx

@@ -23,6 +23,7 @@ import {
 } from '../../lib/edition';
 import { palette } from '../../palette';
 import type { ColourName } from '../../paletteDeclarations';
+import type { RenderingTarget } from '../../types/renderingTarget';
 import { BigNumber } from '../BigNumber';
 import { FootballCrest } from '../FootballCrest';
 import { Placeholder } from '../Placeholder';
@@ -35,6 +36,7 @@ export type FootballMatchHeaderProps = {
 	initialData?: HeaderData;
 	edition: EditionId;
 	matchHeaderURL: string;
+	renderingTarget: RenderingTarget;
 };
 
 type Props = FootballMatchHeaderProps & {
@@ -45,7 +47,7 @@ type Props = FootballMatchHeaderProps & {
 export const FootballMatchHeader = (props: Props) => {
 	const { data } = useSWR<HeaderData, string>(
 		props.matchHeaderURL,
-		fetcher(props.initialTab, props.getHeaderData),
+		fetcher(props.initialTab, props.renderingTarget, props.getHeaderData),
 		swrOptions(props.refreshInterval),
 	);
 
@@ -111,10 +113,14 @@ const swrOptions = (refreshInterval: number): SWRConfiguration<HeaderData> => ({
 });
 
 const fetcher =
-	(selected: Props['initialTab'], getHeaderData: Props['getHeaderData']) =>
+	(
+		selected: Props['initialTab'],
+		renderingTarget: RenderingTarget,
+		getHeaderData: Props['getHeaderData'],
+	) =>
 	(url: string): Promise<HeaderData> =>
 		getHeaderData(url)
-			.then(parseHeaderData(selected))
+			.then(parseHeaderData(selected, renderingTarget))
 			.then((result) => {
 				if (!result.ok) {
 					log('dotcom', result.error);

dotcom-rendering/src/components/FootballMatchHeader/headerData.ts

@@ -10,6 +10,7 @@ import {
 } from '../../frontend/feFootballMatchHeader';
 import { safeParseURL } from '../../lib/parse';
 import { error, fromValibot, ok, type Result } from '../../lib/result';
+import type { RenderingTarget } from '../../types/renderingTarget';
 import type { Tabs } from './Tabs';
 
 export type HeaderData = {
@@ -19,7 +20,10 @@ export type HeaderData = {
 };
 
 export const parse =
-	(selected: HeaderData['tabs']['selected']) =>
+	(
+		selected: HeaderData['tabs']['selected'],
+		renderingTarget: RenderingTarget,
+	) =>
 	(json: unknown): Result<string, HeaderData> => {
 		const feData = fromValibot(
 			safeParse(feFootballMatchHeaderSchema, json),
@@ -39,6 +43,7 @@ export const parse =
 			selected,
 			feData.value,
 			parsedMatch.value.kind,
+			renderingTarget,
 		);
 
 		if (!maybeTabs.ok) {
@@ -58,18 +63,37 @@ type MatchURLError = {
 	kind: 'live' | 'report' | 'info';
 };
 
+const getInfoUrl = (
+	feData: FEFootballMatchHeader,
+	renderingTarget: RenderingTarget,
+): Result<MatchURLError, URL> => {
+	const parsedInfoURL = safeParseURL(feData.infoURL);
+
+	if (!parsedInfoURL.ok) {
+		return error({ kind: 'info' });
+	}
+
+	if (renderingTarget === 'Apps') {
+		const path = `football/match/${feData.footballMatch.id}`;
+		return ok(new URL(path, parsedInfoURL.value.origin));
+	}
+
+	return ok(parsedInfoURL.value);
+};
+
 const createTabs = (
 	selected: HeaderData['tabs']['selected'],
 	feData: FEFootballMatchHeader,
 	matchKind: FootballMatch['kind'],
+	renderingTarget: RenderingTarget,
 ): Result<MatchURLError, HeaderData['tabs']> => {
 	const reportURL =
 		feData.reportURL !== undefined
 			? safeParseURL(feData.reportURL)
 			: undefined;
 	const liveURL =
 		feData.liveURL !== undefined ? safeParseURL(feData.liveURL) : undefined;
-	const infoURL = safeParseURL(feData.infoURL);
+	const infoURL = getInfoUrl(feData, renderingTarget);
 
 	if (reportURL !== undefined && !reportURL.ok) {
 		return error({ kind: 'report' });

dotcom-rendering/src/components/FootballMatchHeaderWrapper.importable.tsx

@@ -20,6 +20,7 @@ export const FootballMatchHeaderWrapper = (props: Props) => (
 		matchHeaderURL={props.matchHeaderURL}
 		getHeaderData={getHeaderData}
 		refreshInterval={16_000}
+		renderingTarget={props.renderingTarget}
 	/>
 );
 

dotcom-rendering/src/components/FootballMatchInfoPage.stories.tsx

@@ -30,5 +30,6 @@ export const FootballMatchInfoPage = {
 		matchHeaderUrl: new URL(
 			'https://api.nextgen.guardianapps.co.uk/football/api/match-header/2026/02/08/26247/48490.json',
 		),
+		renderingTarget: 'Web',
 	},
 } satisfies Story;

dotcom-rendering/src/components/FootballMatchInfoPage.tsx

@@ -7,6 +7,7 @@ import { type FootballTableSummary } from '../footballTables';
 import { grid } from '../grid';
 import { type EditionId } from '../lib/edition';
 import { palette } from '../palette';
+import type { RenderingTarget } from '../types/renderingTarget';
 import { FootballMatchInfo } from './FootballMatchInfo';
 import { Island } from './Island';
 
@@ -16,13 +17,15 @@ export const FootballMatchInfoPage = ({
 	competitionName,
 	edition,
 	matchHeaderUrl,
+	renderingTarget,
 	table,
 }: {
 	matchStats: FootballMatchStats;
 	matchInfo: FootballMatch;
 	competitionName: string;
 	edition: EditionId;
 	matchHeaderUrl: URL;
+	renderingTarget: RenderingTarget;
 	table?: FootballTableSummary;
 }) => {
 	return (
@@ -43,6 +46,7 @@ export const FootballMatchInfoPage = ({
 					}}
 					edition={edition}
 					matchHeaderURL={matchHeaderUrl.href}
+					renderingTarget={renderingTarget}
 				/>
 			</Island>
 			<div css={bodyGridStyles}>

dotcom-rendering/src/components/InteractiveLayoutAtom.tsx

@@ -18,7 +18,7 @@ export const InteractiveLayoutAtom = ({
 	elementJs,
 	elementCss,
 }: InteractiveLayoutAtomType) => (
-	<figure
+	<div
 		className="interactive interactive-atom"
 		css={containerStyles}
 		data-atom-id={id}
@@ -42,5 +42,5 @@ export const InteractiveLayoutAtom = ({
 				dangerouslySetInnerHTML={{ __html: elementJs }}
 			/>
 		)}
-	</figure>
+	</div>
 );

dotcom-rendering/src/experiments/lib/beta-ab-tests.ts

@@ -1,3 +1,4 @@
+import { activeABtests } from '@guardian/ab-testing-config';
 import { isUndefined } from '@guardian/libs';
 import { getABTestParticipations } from '../../client/abTesting';
 
@@ -81,9 +82,18 @@ export class BetaABTests implements BetaABTestAPI {
 		});
 	}
 
-	private buildOphanPayload(errorReporter: ErrorReporter) {
+	private shouldReportToOphan(testId: string): boolean {
+		const activeTest = activeABtests.find(({ name }) => name === testId);
+		return activeTest?.shouldReportToOphan
+			? activeTest.shouldReportToOphan()
+			: true;
+	}
+
+	private buildOphanPayload(errorReporter: ErrorReporter): OphanABPayload {
 		try {
-			const testAndVariantIds = Object.entries(this.participations);
+			const testAndVariantIds = Object.entries(
+				this.participations,
+			).filter(([testId]) => this.shouldReportToOphan(testId));
 
 			return testAndVariantIds.reduce<OphanABPayload>(
 				(eventLog, [testId, variantId]) => {

dotcom-rendering/src/layouts/LiveLayout.tsx

@@ -395,6 +395,7 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 									initialTab="live"
 									edition={article.editionId}
 									matchHeaderURL={footballMatchHeaderUrl}
+									renderingTarget={renderingTarget}
 								/>
 							</Island>
 						)