KeyEvents in LiveLayout (#3595)

* fix: Missing key prop

* fix: Jest config to work with common-rendering

* feat: Added KeyEvents to LiveLayout

* chore: I ran prettier

* feat: Removed superfluous caching

Co-authored-by: Olly <olly.namey@theguardian.com>

* fix: Formatting

Co-authored-by: OllysCoding

* fix: Add yarn command back in

Co-authored by @OllysCoding

* chore: Oh my God, how hard is this

Co-Authored-By: Olly <9575458+OllysCoding@users.noreply.github.com>

* fix: Skipping for now while we wait to fix jest config

Co-Authored-By: Olly <9575458+OllysCoding@users.noreply.github.com>

* fix: Added `preserveSymlinks` to jest config to workaround monorepo issues with jest

kulshekhar/ts-jest#1336 (comment)

* fix: Added `preserveSymLinks` to tsconfig.test

kulshekhar/ts-jest#1336 (comment)

* fix: Restore tests

* fix: Restore previous config

* refactor: Replace reduce with filter > map

Co-authored-by: Olly <olly.namey@theguardian.com>
Co-authored-by: Olly <9575458+OllysCoding@users.noreply.github.com>

common-rendering/src/components/keyEvents.tsx

@@ -231,8 +231,9 @@ const KeyEvents = ({ keyEvents, theme, supportsDarkMode }: KeyEventsProps) => {
 					</span>
 				</summary>
 				<ul css={listStyles(supportsDarkMode)}>
-					{keyEvents.slice(0, 7).map((event) => (
+					{keyEvents.slice(0, 7).map((event, index) => (
 						<ListItem
+							key={`${event.url}${index}`}
 							keyEvent={event}
 							theme={theme}
 							supportsDarkMode={supportsDarkMode}

dotcom-rendering/src/web/components/KeyEventsContainer.test.tsx

@@ -0,0 +1,82 @@
+import { render } from '@testing-library/react';
+import { ArticleDisplay, ArticleDesign, ArticlePillar } from '@guardian/libs';
+
+import { KeyEventsContainer } from './KeyEventsContainer';
+
+const baseProperties = {
+	id: '123',
+	elements: [],
+	primaryDateLine: '',
+	secondaryDateLine: '',
+};
+
+describe('KeyEventsContainer', () => {
+	it('It should render KeyEventsContainer as expected', () => {
+		const { container } = render(
+			<KeyEventsContainer
+				format={{
+					display: ArticleDisplay.Standard,
+					design: ArticleDesign.Standard,
+					theme: ArticlePillar.News,
+				}}
+				keyEvents={[
+					{
+						...baseProperties,
+						blockFirstPublishedDisplay:
+							'blockFirstPublishedDisplay',
+						title: 'title',
+					},
+				]}
+			/>,
+		);
+		expect(container).toHaveTextContent('title');
+	});
+
+	it('It should not render events without a blockFirstPublishedDisplay property', () => {
+		const { container } = render(
+			<KeyEventsContainer
+				format={{
+					display: ArticleDisplay.Standard,
+					design: ArticleDesign.Standard,
+					theme: ArticlePillar.News,
+				}}
+				keyEvents={[
+					{
+						...baseProperties,
+						blockFirstPublishedDisplay:
+							'blockFirstPublishedDisplay',
+						title: 'title',
+					},
+					{ ...baseProperties, title: 'should not exist' },
+				]}
+			/>,
+		);
+		expect(container).toHaveTextContent('title');
+		expect(container).not.toHaveTextContent('should not exist');
+	});
+
+	it('It should not render events without a title property', () => {
+		const { container } = render(
+			<KeyEventsContainer
+				format={{
+					display: ArticleDisplay.Standard,
+					design: ArticleDesign.Standard,
+					theme: ArticlePillar.News,
+				}}
+				keyEvents={[
+					{
+						...baseProperties,
+						blockFirstPublishedDisplay: 'should exist',
+						title: 'title',
+					},
+					{
+						...baseProperties,
+						blockFirstPublishedDisplay: 'should not exist',
+					},
+				]}
+			/>,
+		);
+		expect(container).toHaveTextContent('title');
+		expect(container).not.toHaveTextContent('should not exist');
+	});
+});

dotcom-rendering/src/web/components/KeyEventsContainer.tsx

@@ -0,0 +1,30 @@
+import KeyEvents, {
+	KeyEvent,
+} from '@guardian/common-rendering/src/components/keyEvents';
+
+type Props = {
+	keyEvents: Block[];
+	format: ArticleFormat;
+};
+
+export const KeyEventsContainer = ({ keyEvents, format }: Props) => {
+	const transformedKeyEvents: KeyEvent[] = keyEvents
+		.filter((keyEvent) => {
+			return keyEvent.title && keyEvent.blockFirstPublishedDisplay;
+		})
+		.map((keyEvent) => {
+			return {
+				text: keyEvent.title || '', // We fallback to '' here purely to keep ts happy
+				url: `?page=with:block-${keyEvent.id}#block-${keyEvent.id}`,
+				time: keyEvent.blockFirstPublishedDisplay || '', // We fallback to '' here purely to keep ts happy
+			};
+		});
+
+	return (
+		<KeyEvents
+			theme={format.theme}
+			keyEvents={transformedKeyEvents}
+			supportsDarkMode={false}
+		/>
+	);
+};

dotcom-rendering/src/web/layouts/LiveLayout.tsx

@@ -33,6 +33,7 @@ import { GridItem } from '@root/src/web/components/GridItem';
 import { AgeWarning } from '@root/src/web/components/AgeWarning';
 import { Discussion } from '@frontend/web/components/Discussion';
 import { Pagination } from '@frontend/web/components/Pagination';
+import { KeyEventsContainer } from '@frontend/web/components/KeyEventsContainer';
 
 import { buildAdTargeting } from '@root/src/lib/ad-targeting';
 import { parse } from '@frontend/lib/slot-machine-flags';
@@ -80,19 +81,21 @@ const LiveGrid = ({ children }: { children: React.ReactNode }) => (
 				${from.desktop} {
 					grid-template-columns: 309px 1px 1fr;
 					grid-template-areas:
-						'lines border media'
-						'meta  border media'
-						'meta  border body'
-						'.     border .';
+						'lines		border media'
+						'meta		border media'
+						'keyevents	border media'
+						'.			border body'
+						'. 			border .';
 				}
 
 				${from.wide} {
 					grid-template-columns: 309px 1px 1fr 340px;
 					grid-template-areas:
-						'lines border media right-column'
-						'meta  border media right-column'
-						'meta  border body  right-column'
-						'.     border .     right-column';
+						'lines 		border media right-column'
+						'meta  		border media right-column'
+						'keyevents  border media right-column'
+						'.  		border body  right-column'
+						'.			border .     right-column';
 				}
 
 				${until.desktop} {
@@ -101,6 +104,7 @@ const LiveGrid = ({ children }: { children: React.ReactNode }) => (
 						'media'
 						'lines'
 						'meta'
+						'keyevents'
 						'body';
 				}
 
@@ -112,6 +116,7 @@ const LiveGrid = ({ children }: { children: React.ReactNode }) => (
 						'media'
 						'lines'
 						'meta'
+						'keyevents'
 						'body';
 				}
 			}
@@ -414,6 +419,12 @@ export const LiveLayout = ({ CAPI, NAV, format, palette }: Props) => {
 							/>
 						</div>
 					</GridItem>
+					<GridItem area="keyevents">
+						<KeyEventsContainer
+							format={format}
+							keyEvents={CAPI.keyEvents}
+						/>
+					</GridItem>
 					<GridItem area="body">
 						<ArticleContainer>
 							<main css={articleWidth}>

dotcom-rendering/tsconfig.test.json

@@ -1,6 +1,7 @@
 {
     "extends": "./tsconfig.json",
     "compilerOptions": {
+        "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
         "target": "ES2018" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
     }
 }