Merge branch 'main' into sub-1

Author: abeddow91

dotcom-rendering/src/components/MainMediaGallery.tsx

@@ -12,7 +12,7 @@ import { LightboxLink } from './LightboxLink';
 import { Picture } from './Picture';
 
 type Props = {
-	mainMedia: ImageBlockElement;
+	mainMedia?: ImageBlockElement;
 	format: ArticleFormat;
 	renderingTarget: RenderingTarget;
 };
@@ -32,6 +32,10 @@ export const MainMediaGallery = ({
 	format,
 	renderingTarget,
 }: Props) => {
+	// This is to support some galleries created in 2007 where mainMedia is missing
+	if (isUndefined(mainMedia)) {
+		return <div css={styles}></div>;
+	}
 	const asset = getImage(mainMedia.media.allImages);
 
 	if (asset === undefined) {

dotcom-rendering/src/layouts/GalleryLayout.stories.tsx

@@ -105,3 +105,26 @@ export const Web = {
 		],
 	},
 } satisfies Story;
+
+export const WebWithoutMainMedia = {
+	args: {
+		renderingTarget: 'Web',
+		NAV: {
+			...extractNAV(webArticle.frontendData.nav),
+			selectedPillar: getCurrentPillar(webArticle.frontendData),
+		},
+		gallery: {
+			...addBrandingAndAffiliateDisclaimer(webArticle),
+			mainMedia: undefined,
+		},
+	},
+	parameters: {
+		formats: [
+			{
+				design: webArticle.design,
+				display: webArticle.display,
+				theme: webArticle.theme,
+			},
+		],
+	},
+} satisfies Story;

dotcom-rendering/src/types/article.ts

@@ -18,6 +18,7 @@ import {
 	type TableOfContentsItem,
 } from '../model/enhanceTableOfContents';
 import { enhancePinnedPost } from '../model/pinnedPost';
+import { logger } from '../server/lib/logging';
 import { parse as parseStoryPackage, type StoryPackage } from '../storyPackage';
 import type {
 	AdPlaceholderBlockElement,
@@ -48,7 +49,7 @@ export type ArticleFields = {
 export type Gallery = ArticleFields & {
 	design: ArticleDesign.Gallery;
 	bodyElements: (ImageBlockElement | AdPlaceholderBlockElement)[];
-	mainMedia: ImageBlockElement;
+	mainMedia?: ImageBlockElement;
 };
 
 export type OtherArticles = ArticleFields & {
@@ -60,12 +61,12 @@ export type Article = Gallery | OtherArticles;
 export const getGalleryMainMedia = (
 	mainMediaElements: FEElement[],
 	trailImage?: ImageBlockElement,
-): ImageBlockElement => {
+): ImageBlockElement | undefined => {
 	const mainMedia = mainMediaElements[0];
 
 	if (isUndefined(mainMedia)) {
 		if (isUndefined(trailImage)) {
-			throw new Error('No main media or trail picture found');
+			logger.warn('No main media or trail picture found');
 		}
 		return trailImage;
 	}