Merge branch 'main' into mob/inline-product-card

Author: charleycampbell

apps-rendering/package.json

@@ -46,7 +46,6 @@
 		"@guardian/cdk": "61.4.0",
 		"@guardian/content-api-models": "31.0.0",
 		"@guardian/content-atom-model": "6.1.0",
-		"@guardian/eslint-config": "7.0.1",
 		"@guardian/eslint-config-typescript": "9.0.1",
 		"@guardian/libs": "22.0.0",
 		"@guardian/renditions": "0.2.0",

dotcom-rendering/src/client/abTesting.ts

@@ -29,18 +29,22 @@ const getClientParticipations = (): ABParticipations => {
 
 	return {};
 };
-const initABTesting = (): void => {
-	const { serverSideABTests } = window.guardian.config;
 
-	const clientSideABTests = getClientParticipations();
-
-	const participations = {
-		...clientSideABTests,
-		...serverSideABTests,
+/**
+ * Get all AB test participations, client and server side
+ */
+const getABTestParticipations = (): ABParticipations => {
+	return {
+		...getClientParticipations(),
+		...window.guardian.config.serverSideABTests,
 	};
+};
+
+const initWindowABTesting = (): void => {
+	const participations = getABTestParticipations();
 
 	window.guardian.modules.abTests = {
-		getParticipations: () => participations,
+		getParticipations: getABTestParticipations,
 		isUserInTest: (testId: string) => {
 			return !isUndefined(participations[testId]);
 		},
@@ -50,4 +54,4 @@ const initABTesting = (): void => {
 	};
 };
 
-export { initABTesting };
+export { initWindowABTesting, getABTestParticipations };

dotcom-rendering/src/client/main.web.ts

@@ -61,7 +61,7 @@ void (async () => {
 		'abTesting',
 		() =>
 			import(/* webpackMode: 'eager' */ './abTesting').then(
-				({ initABTesting }) => initABTesting(),
+				({ initWindowABTesting }) => initWindowABTesting(),
 			),
 		{ priority: 'critical' },
 	);

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

@@ -103,7 +103,7 @@ export const DiscussionWeb = (
 			});
 	}, [authStatus, props.discussionApiUrl]);
 
-	if (!hydrated) return <Placeholder height={324} />;
+	if (!hydrated) return <Placeholder heights={new Map([['mobile', 324]])} />;
 
 	return (
 		<Discussion

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

@@ -0,0 +1,156 @@
+import { isNonNullable, isObject } from '@guardian/libs';
+import { useEffect, useState } from 'react';
+import { decideFormat } from '../lib/articleFormat';
+import { getDataLinkNameCard } from '../lib/getDataLinkName';
+import { addDiscussionIds } from '../lib/useCommentCount';
+import { palette } from '../palette';
+import { type DCRFrontImage } from '../types/front';
+import { type MainMedia } from '../types/mainMedia';
+import type { FETrailType, TrailType } from '../types/trails';
+import { MoreGalleries } from './MoreGalleries';
+import { Placeholder } from './Placeholder';
+
+type Props = {
+	discussionApiUrl: string;
+	absoluteServerTimes: boolean;
+	isAdFreeUser: boolean;
+	ajaxUrl: string;
+	guardianBaseUrl: string;
+};
+
+type MoreGalleriesResponse = {
+	heading: string;
+	trails: FETrailType[];
+};
+
+const getMedia = (galleryCount?: number): MainMedia | undefined => {
+	if (typeof galleryCount === 'number') {
+		return { type: 'Gallery', count: galleryCount.toString() };
+	}
+	return undefined;
+};
+
+const toGalleryTrail = (trail: FETrailType, index: number): TrailType => {
+	const format = decideFormat(trail.format);
+	const image: DCRFrontImage | undefined = trail.masterImage
+		? {
+				src: trail.masterImage,
+				altText: '',
+		  }
+		: undefined;
+
+	return {
+		...trail,
+		image,
+		format,
+		dataLinkName: getDataLinkNameCard(format, '0', index),
+		mainMedia: getMedia(trail.galleryCount),
+	};
+};
+
+const buildTrails = (
+	trails: FETrailType[],
+	trailLimit: number,
+	isAdFreeUser: boolean,
+): TrailType[] => {
+	return trails
+		.filter(
+			(trailType) =>
+				!(
+					trailType.branding?.brandingType?.name === 'paid-content' &&
+					isAdFreeUser
+				),
+		)
+		.slice(0, trailLimit)
+		.map(toGalleryTrail);
+};
+
+const fetchJson = async (ajaxUrl: string): Promise<MoreGalleriesResponse> => {
+	const url = `${ajaxUrl}/gallery/most-viewed.json?dcr=true`;
+	const fetchResponse = await fetch(url);
+	if (!fetchResponse.ok) {
+		throw new Error(`HTTP error! status: ${fetchResponse.status}`);
+	}
+
+	const responseJson: unknown = await fetchResponse.json();
+
+	if (isObject(responseJson)) {
+		// TODO: we need to properly validate this data in a future PR
+		return responseJson as MoreGalleriesResponse;
+	} else {
+		throw new Error(
+			'Failed to parse JSON MoreGalleriesResponse as an object',
+		);
+	}
+};
+
+export const FetchMoreGalleriesData = ({
+	discussionApiUrl,
+	absoluteServerTimes,
+	isAdFreeUser,
+	ajaxUrl,
+	guardianBaseUrl,
+}: Props) => {
+	const [data, setData] = useState<MoreGalleriesResponse | undefined>(
+		undefined,
+	);
+	const [error, setError] = useState<Error | undefined>(undefined);
+
+	useEffect(() => {
+		fetchJson(ajaxUrl)
+			.then((fetchedData) => {
+				setData(fetchedData);
+				setError(undefined);
+				addDiscussionIds(
+					fetchedData.trails
+						.map((trail) => trail.discussion?.discussionId)
+						.filter(isNonNullable),
+				);
+			})
+			.catch((err) => {
+				setError(
+					err instanceof Error ? err : new Error('Unknown error'),
+				);
+				setData(undefined);
+			});
+	}, [ajaxUrl]);
+
+	if (error) {
+		// Send the error to Sentry and then prevent the element from rendering
+		window.guardian.modules.sentry.reportError(error, 'more-galleries');
+		return null;
+	}
+
+	if (!data?.trails) {
+		return (
+			<Placeholder
+				// Since the height of the 'MoreGalleries' component could vary quite a lot
+				// on different breakpoints, we provide a map of heights for each breakpoint
+				// in order to prevent layout shift
+				heights={
+					new Map([
+						['mobile', 1020],
+						['mobileMedium', 1040],
+						['mobileLandscape', 1100],
+						['phablet', 1200],
+						['tablet', 700],
+						['desktop', 800],
+						['leftCol', 740],
+						['wide', 790],
+					])
+				}
+				shouldShimmer={false}
+				backgroundColor={palette('--onward-background')}
+			/>
+		);
+	}
+
+	return (
+		<MoreGalleries
+			absoluteServerTimes={absoluteServerTimes}
+			trails={buildTrails(data.trails, 5, isAdFreeUser)}
+			discussionApiUrl={discussionApiUrl}
+			guardianBaseUrl={guardianBaseUrl}
+		/>
+	);
+};

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

@@ -72,7 +72,7 @@ export const FetchOnwardsData = ({
 	if (!data?.trails) {
 		return (
 			<Placeholder
-				height={340} // best guess at typical height
+				heights={new Map([['mobile', 340]])} // best guess at typical height
 				shouldShimmer={false}
 				backgroundColor={palette('--article-background')}
 			/>

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

@@ -10,7 +10,7 @@ type Props = {
 	format: ArticleFormat;
 };
 
-const Loading = () => <Placeholder height={172} />;
+const Loading = () => <Placeholder heights={new Map([['mobile', 172]])} />;
 
 export const GetCricketScoreboard = ({ matchUrl, format }: Props) => {
 	const options: SWRConfiguration = {

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

@@ -11,7 +11,7 @@ type Props = {
 	format: ArticleFormat;
 };
 
-const Loading = () => <Placeholder height={800} />;
+const Loading = () => <Placeholder heights={new Map([['mobile', 800]])} />;
 
 const cleanTeamCodes = ({
 	name,

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

@@ -8,7 +8,7 @@ type Props = {
 	format: ArticleFormat;
 };
 
-const Loading = () => <Placeholder height={40} />;
+const Loading = () => <Placeholder heights={new Map([['mobile', 40]])} />;
 
 /**
  * ## Why does this need to be an Island?

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

@@ -459,7 +459,7 @@ export const InteractiveBlockComponent = ({
 				{!loaded && (
 					<>
 						<Placeholder // removed by HydrateInteractiveOnce
-							height={decideHeight(role)}
+							heights={new Map([['mobile', decideHeight(role)]])}
 							shouldShimmer={false}
 						/>
 						<a