store layouts in s3

apps/newsletters-api/env.local.example.txt

@@ -3,6 +3,9 @@
 # To use s3 locally (overriding the s3 values below, set to true)
 USE_IN_MEMORY_STORAGE=false
 
+# To the local in-memory version of the layout storage instead of using the s3 bucket
+USE_IN_MEMORY_LAYOUT_STORAGE=true
+
 # the name of the s3 bucket holding the data. (avoid committing actual bucket names in the repo)
 NEWSLETTER_BUCKET_NAME=your-bucket-name
 

apps/newsletters-api/src/apiDeploymentSettings.spec.ts

@@ -3,7 +3,8 @@ import {
 	isServingReadWriteEndpoints,
 	isServingUI,
 	isUndefinedAndNotProduction,
-	isUsingInMemoryStorage,
+	isUsingInMemoryLayoutStorage,
+	isUsingInMemoryNewsletterStorage,
 } from './apiDeploymentSettings';
 
 const ORIGINAL_ENV = process.env;
@@ -148,20 +149,38 @@ describe('isServingReadWriteEndpoints', () => {
 	});
 });
 
-describe('isUsingInMemoryStorage', () => {
+describe('isUsingInMemoryNewsletterStorage', () => {
 	it('returns false where USE_IN_MEMORY_STORAGE is not set', () => {
-		expect(isUsingInMemoryStorage()).toBe(false);
+		expect(isUsingInMemoryNewsletterStorage()).toBe(false);
 	});
 	it('returns false where USE_IN_MEMORY_STORAGE is false', () => {
 		process.env.USE_IN_MEMORY_STORAGE = 'false';
-		expect(isUsingInMemoryStorage()).toBe(false);
+		expect(isUsingInMemoryNewsletterStorage()).toBe(false);
 	});
 	it('returns true where USE_IN_MEMORY_STORAGE is true', () => {
 		process.env.USE_IN_MEMORY_STORAGE = 'true';
-		expect(isUsingInMemoryStorage()).toBe(true);
+		expect(isUsingInMemoryNewsletterStorage()).toBe(true);
 	});
 	it('returns false if USE_IN_MEMORY_STORAGE is something other than true or false', () => {
 		process.env.USE_IN_MEMORY_STORAGE = 'foo';
-		expect(isUsingInMemoryStorage()).toBe(false);
+		expect(isUsingInMemoryNewsletterStorage()).toBe(false);
+	});
+});
+
+describe(isUsingInMemoryLayoutStorage.name, () => {
+	it('returns false where USE_IN_MEMORY_LAYOUT_STORAGE is not set', () => {
+		expect(isUsingInMemoryLayoutStorage()).toBe(false);
+	});
+	it('returns false where USE_IN_MEMORY_LAYOUT_STORAGE is false', () => {
+		process.env.USE_IN_MEMORY_LAYOUT_STORAGE = 'false';
+		expect(isUsingInMemoryLayoutStorage()).toBe(false);
+	});
+	it('returns true where USE_IN_MEMORY_LAYOUT_STORAGE is true', () => {
+		process.env.USE_IN_MEMORY_LAYOUT_STORAGE = 'true';
+		expect(isUsingInMemoryLayoutStorage()).toBe(true);
+	});
+	it('returns false if USE_IN_MEMORY_LAYOUT_STORAGE is something other than true or false', () => {
+		process.env.USE_IN_MEMORY_LAYOUT_STORAGE = 'foo';
+		expect(isUsingInMemoryLayoutStorage()).toBe(false);
 	});
 });

apps/newsletters-api/src/apiDeploymentSettings.ts

@@ -53,9 +53,12 @@ export const isServingReadEndpoints = () => {
 	return undefinedAndNotProduction || isApiRead || isApiReadWrite;
 };
 
-export const isUsingInMemoryStorage = () =>
+export const isUsingInMemoryNewsletterStorage = () =>
 	process.env.USE_IN_MEMORY_STORAGE === 'true';
 
+export const isUsingInMemoryLayoutStorage = () =>
+	process.env.USE_IN_MEMORY_LAYOUT_STORAGE === 'true';
+
 export const getTestJwtProfileDataIfUsing = () => {
 	return process.env.USE_FAKE_JWT === 'true' ? process.env.FAKE_JWT : undefined;
 };

apps/newsletters-api/src/app/headers.ts

@@ -23,6 +23,9 @@ export const getCacheControl = (
 	if (req.routerPath.startsWith('/api/legacy')) {
 		return newsletterTtl;
 	}
+	if (req.routerPath.startsWith('/api/layouts')) {
+		return newsletterTtl;
+	}
 
 	return undefined;
 };

apps/newsletters-api/src/app/routes/layouts.ts

@@ -0,0 +1,92 @@
+import type { FastifyInstance } from 'fastify';
+import {
+	editionIdSchema,
+	layoutSchema,
+} from '@newsletters-nx/newsletters-data-client';
+import { permissionService } from '../../services/permissions';
+import { layoutStore } from '../../services/storage';
+import { getUserProfile } from '../get-user-profile';
+import {
+	makeErrorResponse,
+	makeSuccessResponse,
+	mapStorageFailureReasonToStatusCode,
+} from '../responses';
+
+export function registerReadLayoutRoutes(app: FastifyInstance) {
+	app.get('/api/layouts', async (req, res) => {
+		const storageResponse = await layoutStore.readAll();
+		if (!storageResponse.ok) {
+			return res
+				.status(mapStorageFailureReasonToStatusCode(storageResponse.reason))
+				.send(makeErrorResponse(storageResponse.message));
+		}
+		return makeSuccessResponse(storageResponse.data);
+	});
+
+	app.get<{
+		Params: { editionId: string };
+	}>('/api/layouts/:editionId', async (req, res) => {
+		const { editionId } = req.params;
+
+		const idParseResult = editionIdSchema.safeParse(editionId.toUpperCase());
+
+		if (!idParseResult.success) {
+			return res
+				.status(400)
+				.send(makeErrorResponse(`No such edition ${editionId}`));
+		}
+
+		const storageResponse = await layoutStore.read(idParseResult.data);
+
+		if (!storageResponse.ok) {
+			return res
+				.status(mapStorageFailureReasonToStatusCode(storageResponse.reason))
+				.send(makeErrorResponse(storageResponse.message));
+		}
+		return makeSuccessResponse(storageResponse.data);
+	});
+}
+
+export function registerWriteLayoutRoutes(app: FastifyInstance) {
+	app.post<{
+		Body: unknown;
+		Params: { editionId: string };
+	}>('/api/layouts/:editionId', async (req, res) => {
+		const { editionId } = req.params;
+		const layout: unknown = req.body;
+		const user = getUserProfile(req);
+		const permissions = await permissionService.get(user.profile);
+
+		if (!permissions.editLayouts) {
+			return res
+				.status(403)
+				.send(makeErrorResponse(`You don't have permission to edit layouts.`));
+		}
+
+		const idParseResult = editionIdSchema.safeParse(editionId.toUpperCase());
+		if (!idParseResult.success) {
+			return res
+				.status(400)
+				.send(makeErrorResponse(`No such edition ${editionId}`));
+		}
+
+		const layoutParseResult = layoutSchema.safeParse(layout);
+		if (!layoutParseResult.success) {
+			return res.status(400).send(makeErrorResponse(`invalid layout data`));
+		}
+
+		// TO DO - need a separate route or param for 'create' requests
+		// that will fail if the layout exists already rather than replacing with blanks
+		const storageResponse = await layoutStore.update(
+			idParseResult.data,
+			layoutParseResult.data,
+		);
+
+		if (!storageResponse.ok) {
+			return res
+				.status(mapStorageFailureReasonToStatusCode(storageResponse.reason))
+				.send(makeErrorResponse(storageResponse.message));
+		}
+		return makeSuccessResponse(storageResponse.data);
+	});
+}

apps/newsletters-api/src/main.ts

@@ -8,6 +8,10 @@ import { setHeaderHook } from './app/headers';
 import { registerCurrentStepRoute } from './app/routes/currentStep';
 import { registerDraftsRoutes } from './app/routes/drafts';
 import { registerHealthRoute } from './app/routes/health';
+import {
+	registerReadLayoutRoutes,
+	registerWriteLayoutRoutes,
+} from './app/routes/layouts';
 import {
 	registerReadNewsletterRoutes,
 	registerReadWriteNewsletterRoutes,
@@ -27,11 +31,13 @@ if (isServingReadWriteEndpoints()) {
 	registerUserRoute(app);
 	registerReadWriteNewsletterRoutes(app);
 	registerNotificationRoutes(app);
+	registerWriteLayoutRoutes(app);
 }
 if (isServingReadEndpoints()) {
 	registerReadNewsletterRoutes(app);
 	registerDraftsRoutes(app);
 	registerRenderingTemplatesRoutes(app);
+	registerReadLayoutRoutes(app);
 }
 
 app.addHook('onSend', setHeaderHook);

apps/newsletters-api/src/register-ui-server.ts

@@ -27,4 +27,6 @@ export function registerUIServer(app: FastifyInstance) {
 	app.get('/launched', handleUiRequest);
 	app.get('/templates/*', handleUiRequest);
 	app.get('/templates', handleUiRequest);
+	app.get('/layouts/*', handleUiRequest);
+	app.get('/layouts', handleUiRequest);
 }

apps/newsletters-api/src/services/storage/index.ts

@@ -1,42 +1,56 @@
 import type { SESClient } from '@aws-sdk/client-ses';
 import type {
 	DraftStorage,
+	EditionsLayouts,
 	EmailEnvInfo,
+	LayoutStorage,
 	NewsletterData,
 	NewsletterStorage,
 	UserProfile,
 } from '@newsletters-nx/newsletters-data-client';
 import {
 	DraftService,
+	InMemoryLayoutStorage,
 	InMemoryNewsletterStorage,
 	isNewsletterData,
 	LaunchService,
 } from '@newsletters-nx/newsletters-data-client';
+import layoutsData from '../../../static/layouts.local.json';
 import newslettersData from '../../../static/newsletters.local.json';
-import { isUsingInMemoryStorage } from '../../apiDeploymentSettings';
+import {
+	isUsingInMemoryLayoutStorage,
+	isUsingInMemoryNewsletterStorage,
+} from '../../apiDeploymentSettings';
 import { makeEmailEnvInfo } from '../notifications/email-env';
 import { makeSesClient } from '../notifications/email-service';
 import { makeInMemoryStorageInstance } from './inMemoryStorageInstance';
 import {
+	getS3LayoutStore,
 	getS3NewsletterStore,
 	makeS3DraftStorageInstance,
 } from './s3StorageInstance';
 
-const isUsingInMemoryStore = isUsingInMemoryStorage();
+const isUsingInMemoryNewslettersStore = isUsingInMemoryNewsletterStorage();
 
-const draftStore: DraftStorage = isUsingInMemoryStore
+const draftStore: DraftStorage = isUsingInMemoryNewslettersStore
 	? makeInMemoryStorageInstance()
 	: makeS3DraftStorageInstance();
 
 const validNewsletters = newslettersData.filter((item) =>
 	isNewsletterData(item),
 );
-const newsletterStore: NewsletterStorage = isUsingInMemoryStore
+const newsletterStore: NewsletterStorage = isUsingInMemoryNewslettersStore
 	? new InMemoryNewsletterStorage(
 			validNewsletters as unknown as NewsletterData[],
 	  )
 	: getS3NewsletterStore();
 
+const isUsingInMemoryLayoutStore = isUsingInMemoryLayoutStorage();
+
+const layoutStore: LayoutStorage = isUsingInMemoryLayoutStore
+	? new InMemoryLayoutStorage(layoutsData as unknown as EditionsLayouts)
+	: getS3LayoutStore();
+
 const makelaunchServiceForUser = (userProfile: UserProfile) =>
 	new LaunchService(
 		draftStore,
@@ -57,4 +71,5 @@ export {
 	makeDraftServiceForUser,
 	makelaunchServiceForUser,
 	newsletterStore,
+	layoutStore,
 };

apps/newsletters-api/src/services/storage/s3StorageInstance.ts

@@ -1,5 +1,6 @@
 import {
 	S3DraftStorage,
+	S3LayoutStorage,
 	S3NewsletterStorage,
 } from '@newsletters-nx/newsletters-data-client';
 import { getS3Client } from './s3-client-factory';
@@ -21,4 +22,8 @@ const getS3NewsletterStore = (): S3NewsletterStorage => {
 	return new S3NewsletterStorage(getS3BucketName(), getS3Client());
 };
 
-export { makeS3DraftStorageInstance, getS3NewsletterStore };
+const getS3LayoutStore = (): S3LayoutStorage => {
+	return new S3LayoutStorage(getS3BucketName(), getS3Client());
+};
+
+export { makeS3DraftStorageInstance, getS3NewsletterStore, getS3LayoutStore };

apps/newsletters-api/static/layouts.local.json

@@ -0,0 +1,23 @@
+{
+	"UK": [
+		{
+			"title": "Get started",
+			"newsletters": [
+				"bmx-tesla",
+				"roi-female",
+				"electric-bicycle",
+				"dram-security",
+				"does-not-exist"
+			]
+		},
+		{
+			"title": "In depth",
+			"newsletters": [
+				"muddle-teal",
+				"van-coordinator",
+				"does-not-exist-two",
+				"dram-security"
+			]
+		}
+	]
+}

apps/newsletters-ui/src/app/components/Illustration.tsx

@@ -4,13 +4,17 @@ import { Stack, Typography } from '@mui/material';
 interface Props {
 	name: string;
 	url?: string;
+	height?: number;
 }
 
-export const Illustration = ({ name, url }: Props) => {
+export const Illustration = ({ name, url, height = 200 }: Props) => {
 	const image = url ? (
-		<img src={url} alt="" height={200} />
+		<img src={url} alt="" height={height} />
 	) : (
-		<ImageNotSupportedIcon color="primary" sx={{ height: 200, width: 200 }} />
+		<ImageNotSupportedIcon
+			color="primary"
+			sx={{ height: height, width: height }}
+		/>
 	);
 
 	const captionText = url

apps/newsletters-ui/src/app/components/JsonEditor.tsx

@@ -9,27 +9,19 @@ import {
 	TextField,
 } from '@mui/material';
 import { useEffect, useState } from 'react';
-import type { z, ZodIssue, ZodObject, ZodRawShape } from 'zod';
+import type { Schema, ZodIssue } from 'zod';
 import { ZodIssuesReport } from './ZodIssuesReport';
 
-type JsonRecord = Record<string, unknown>;
+type JsonRecordOrArray = Record<string, unknown> | unknown[];
 
-interface Props<T extends ZodRawShape> {
-	originalData: SchemaObjectType<T>;
-	schema: ZodObject<T>;
-	submit: { (data: SchemaObjectType<T>): void | Promise<void> };
+interface Props<T extends JsonRecordOrArray> {
+	originalData: T;
+	schema: Schema<T>;
+	submit: { (data: T): void | Promise<void> };
 }
 
-type SchemaObjectType<T extends z.ZodRawShape> = {
-	[k in keyof z.objectUtil.addQuestionMarks<{
-		[k in keyof T]: T[k]['_output'];
-	}>]: z.objectUtil.addQuestionMarks<{
-		[k in keyof T]: T[k]['_output'];
-	}>[k];
-};
-
 const getFormattedJsonString = (
-	data: JsonRecord,
+	data: JsonRecordOrArray,
 ): { ok: true; json: string } | { ok: false } => {
 	try {
 		const json = JSON.stringify(data, undefined, 4);
@@ -39,9 +31,9 @@ const getFormattedJsonString = (
 	}
 };
 
-const safeJsonParse = (value: string): JsonRecord | undefined => {
+const safeJsonParse = (value: string): JsonRecordOrArray | undefined => {
 	try {
-		return JSON.parse(value) as JsonRecord;
+		return JSON.parse(value) as JsonRecordOrArray;
 	} catch (err) {
 		return undefined;
 	}
@@ -79,7 +71,7 @@ const CheckResultMessage = (props: {
 	);
 };
 
-export const JsonEditor = <T extends ZodRawShape>({
+export const JsonEditor = <T extends JsonRecordOrArray>({
 	originalData,
 	schema,
 	submit,