@remit/web-client 0.0.134 → 0.0.136

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.134",
+  "version": "0.0.136",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/compose/ComposeForm.tsx

@@ -3,7 +3,6 @@ import {
 	outboxDetailOperationsDeleteOutboxMessageMutation,
 	outboxDetailOperationsGetOutboxMessageOptions,
 	outboxDetailOperationsSendOutboxMessageMutation,
-	outboxOperationsCreateOutboxMessageMutation,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type {
 	RemitImapAccountResponse,
@@ -442,10 +441,11 @@ export const ComposeForm = ({
 		[setOutboxMessageId],
 	);
 
-	const { saveStatus, saveError, saveDraft, stopAutoSave } = useSaveDraft({
-		outboxMessageId,
-		onDraftCreated: adoptCreatedDraft,
-	});
+	const { saveStatus, saveError, saveDraft, saveImmediately, stopAutoSave } =
+		useSaveDraft({
+			outboxMessageId,
+			onDraftCreated: adoptCreatedDraft,
+		});
 
 	// Auto-save runs on a debounce, so a failure has no inline call site to
 	// surface it. Push the real error detail to a banner instead of leaving only
@@ -460,10 +460,6 @@ export const ComposeForm = ({
 		});
 	}, [saveError, pushError]);
 
-	const createMutation = useMutation(
-		outboxOperationsCreateOutboxMessageMutation(),
-	);
-
 	const sendMutation = useMutation(
 		outboxDetailOperationsSendOutboxMessageMutation(),
 	);
@@ -496,7 +492,11 @@ export const ComposeForm = ({
 		? accountIsMissingSmtp(selectedAccount)
 		: false;
 
-	const isSending = createMutation.isPending || sendMutation.isPending;
+	// The action bar refuses a second press while one is in flight, but the
+	// editor's own Cmd+Enter goes straight to `handleSend`, and the write that
+	// now precedes the request widens the window a second press lands in.
+	const sendInFlightRef = useRef(false);
+	const [isSending, setIsSending] = useState(false);
 	const canSend =
 		toAddresses.length > 0 &&
 		!!selectedAccountId &&
@@ -538,76 +538,79 @@ export const ComposeForm = ({
 	]);
 
 	const handleSend = useCallback(async () => {
+		if (sendInFlightRef.current) return;
 		if (!selectedAccountId || toAddresses.length === 0) return;
 
-		stopAutoSave();
-
-		const replyData =
-			sourceMessage && (mode === "reply" || mode === "reply_all")
-				? getReferences(sourceMessage)
-				: {};
+		sendInFlightRef.current = true;
+		setIsSending(true);
+		try {
+			stopAutoSave();
 
-		let messageId = outboxMessageId;
-		let createdThisAttempt = false;
+			const replyData =
+				sourceMessage && (mode === "reply" || mode === "reply_all")
+					? getReferences(sourceMessage)
+					: {};
 
-		if (!messageId) {
 			const { html: htmlBody, text: textBody } = body;
+			const createdThisAttempt = !outboxMessageId;
+
+			// The debounce dropped above may have been holding the last two seconds
+			// of typing, and an existing entry would otherwise go out as the server
+			// last saw it (#674). What is on screen is written first, and a write
+			// that fails stops the send rather than transmitting the older copy.
+			const flushed = await saveImmediately({
+				accountId: selectedAccountId,
+				toAddresses: toAddresses.map((a) => a.email),
+				ccAddresses:
+					ccAddresses.length > 0 ? ccAddresses.map((a) => a.email) : undefined,
+				bccAddresses:
+					bccAddresses.length > 0
+						? bccAddresses.map((a) => a.email)
+						: undefined,
+				subject: subject || undefined,
+				textBody: textBody || undefined,
+				htmlBody: htmlBody || undefined,
+				...replyData,
+			});
 
-			const outboxMessage = await createMutation
+			if (flushed.outcome === "failed") {
+				pushError({
+					title: "Couldn't send message",
+					detail:
+						formatErrorDetail(flushed.error) ??
+						"Saving the message failed, so nothing was sent. Try again.",
+					error: flushed.error,
+				});
+				return;
+			}
+
+			const messageId = flushed.outboxMessageId;
+
+			const sent = await sendMutation
 				.mutateAsync({
-					body: {
-						accountId: selectedAccountId,
-						toAddresses: toAddresses.map((a) => a.email),
-						ccAddresses:
-							ccAddresses.length > 0
-								? ccAddresses.map((a) => a.email)
-								: undefined,
-						bccAddresses:
-							bccAddresses.length > 0
-								? bccAddresses.map((a) => a.email)
-								: undefined,
-						subject: subject || undefined,
-						textBody: textBody || undefined,
-						htmlBody: htmlBody || undefined,
-						sendImmediately: false,
-						...replyData,
-					},
+					path: { outboxMessageId: messageId },
 				})
 				.catch((error: unknown) => {
 					pushError({
 						title: "Couldn't send message",
-						detail: formatErrorDetail(error) ?? "Saving the draft failed.",
+						detail:
+							formatErrorDetail(error) ??
+							(createdThisAttempt
+								? "The draft was saved but the send request failed. Try again from the Outbox."
+								: "The send request failed. Try again."),
 						error,
 					});
 					return null;
 				});
-			if (outboxMessage === null) return;
-			messageId = outboxMessage.outboxMessageId;
-			createdThisAttempt = true;
-			setOutboxMessageId(messageId);
+			if (sent === null) return;
+
+			stopAutoSave(messageId);
+			startSendPolling(messageId);
+			onClose();
+		} finally {
+			sendInFlightRef.current = false;
+			setIsSending(false);
 		}
-
-		const sent = await sendMutation
-			.mutateAsync({
-				path: { outboxMessageId: messageId },
-			})
-			.catch((error: unknown) => {
-				pushError({
-					title: "Couldn't send message",
-					detail:
-						formatErrorDetail(error) ??
-						(createdThisAttempt
-							? "The draft was saved but the send request failed. Try again from the Outbox."
-							: "The send request failed. Try again."),
-					error,
-				});
-				return null;
-			});
-		if (sent === null) return;
-
-		stopAutoSave(messageId);
-		startSendPolling(messageId);
-		onClose();
 	}, [
 		selectedAccountId,
 		toAddresses,
@@ -618,11 +621,10 @@ export const ComposeForm = ({
 		mode,
 		sourceMessage,
 		outboxMessageId,
-		createMutation,
+		saveImmediately,
 		sendMutation,
 		stopAutoSave,
 		startSendPolling,
-		setOutboxMessageId,
 		pushError,
 		onClose,
 	]);

package/src/components/compose/compose-send-stops-autosave.render.test.ts

@@ -14,6 +14,12 @@
  * then sends it — and creating it as already-queued makes that send a second
  * dispatch, which the server refuses.
  *
+ * Issue #674 is the boundary between the two: pressing Send inside the two
+ * seconds the debounce is still counting down. The cancelled timer was carrying
+ * the last edits, and the entry went out as the server last saw it. So the send
+ * writes what is on screen first, and a write that fails takes the send with it
+ * rather than transmitting the older copy behind the user's back.
+ *
  * The stub holds the outbox rule the API holds: only a draft accepts a send.
  */
 
@@ -81,8 +87,18 @@ afterEach(() => {
 const callsTo = (suffix: string) =>
 	(http?.calls ?? []).filter((call) => call.path.endsWith(suffix));
 
-const patchCount = (): number =>
-	(http?.calls ?? []).filter((call) => call.method === "PATCH").length;
+const patches = () =>
+	(http?.calls ?? []).filter((call) => call.method === "PATCH");
+
+const patchCount = (): number => patches().length;
+
+const patchesAfterTheSend = (): number => {
+	const calls = http?.calls ?? [];
+	const sendIndex = calls.findIndex((call) => call.path.endsWith("/send"));
+	if (sendIndex === -1) throw new Error("the send never went out");
+	return calls.slice(sendIndex + 1).filter((call) => call.method === "PATCH")
+		.length;
+};
 
 const Opened = ({ outboxMessageId }: { outboxMessageId?: string }) => {
 	const { state, openCompose } = useCompose();
@@ -108,6 +124,8 @@ interface MountOptions {
 	outboxMessageId?: string;
 	/** Hold the PATCH response open so a save is still in flight at send time. */
 	gatePatch?: boolean;
+	/** Refuse every PATCH, so the write compose makes before sending fails. */
+	failPatch?: boolean;
 }
 
 const mount = async (
@@ -140,6 +158,7 @@ const mount = async (
 
 		if (call.method === "PATCH") {
 			await patchGate;
+			if (options.failPatch) return httpError(409, "The draft moved on.");
 			return outboxEntry(status);
 		}
 
@@ -172,7 +191,7 @@ const sendButton = (): HTMLElement => {
 	return button;
 };
 
-describe("compose and the outbox entry it is sending (#604)", () => {
+describe("compose and the outbox entry it is sending (#604, #674)", () => {
 	it("writes no further PATCH to an entry once it has been sent", async () => {
 		const { releasePatch } = await mount({
 			outboxMessageId: OUTBOX_MESSAGE_ID,
@@ -193,7 +212,76 @@ describe("compose and the outbox entry it is sending (#604)", () => {
 		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 200);
 
 		assert.equal(callsTo("/send").length, 1, "the send went out");
-		assert.equal(patchCount(), 1, "no autosave PATCH followed the send");
+		assert.equal(patchesAfterTheSend(), 0, "no write followed the send");
+		// The in-flight autosave and the write before the send are the two, in
+		// that order: a second write issued alongside the first could land behind
+		// it and put the older body back.
+		assert.equal(
+			patchCount(),
+			2,
+			"the two writes went out one after the other",
+		);
+	});
+
+	it("writes the edit made inside the debounce window before it sends", async () => {
+		await mount({ outboxMessageId: OUTBOX_MESSAGE_ID });
+
+		harness?.type(subjectField(), "Re: Lunch tomorrow");
+		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 100);
+		assert.equal(patchCount(), 1, "the typing burst autosaves once");
+
+		// Inside the two seconds the next autosave would have waited.
+		harness?.type(subjectField(), "Re: Lunch on Thursday");
+		harness?.click(sendButton());
+		await harness?.flush();
+		await harness?.wait(100);
+
+		assert.equal(callsTo("/send").length, 1, "the send went out");
+		const written = patches().at(-1);
+		assert.equal(
+			written?.body?.subject,
+			"Re: Lunch on Thursday",
+			"the entry carries the edit the debounce was still holding",
+		);
+		// Autosave never writes these, so an entry autosaved before Send used to
+		// go out unchained from the message it replies to.
+		assert.equal(written?.body?.inReplyTo, "<m1@example.com>");
+		assert.deepEqual(written?.body?.references, ["<m1@example.com>"]);
+		assert.equal(closed, 1, "compose closed on a successful send");
+	});
+
+	it("sends nothing, and says so, when that write fails", async () => {
+		await mount({ outboxMessageId: OUTBOX_MESSAGE_ID, failPatch: true });
+
+		harness?.type(subjectField(), "Re: Lunch on Thursday");
+		harness?.click(sendButton());
+		await harness?.flush();
+		await harness?.wait(100);
+
+		assert.equal(patchCount(), 1, "the write was attempted");
+		assert.equal(callsTo("/send").length, 0, "the older copy stayed put");
+		assert.equal(closed, 0, "compose stayed open");
+		assert.match(harness?.text() ?? "", /Couldn't send message/);
+	});
+
+	it("dispatches once when Send is pressed twice over the write", async () => {
+		const { releasePatch } = await mount({
+			outboxMessageId: OUTBOX_MESSAGE_ID,
+			gatePatch: true,
+		});
+
+		harness?.type(subjectField(), "Re: Lunch on Thursday");
+		harness?.click(sendButton());
+		harness?.click(sendButton());
+		await harness?.flush();
+
+		releasePatch();
+		await harness?.flush();
+		await harness?.wait(100);
+
+		assert.equal(patchCount(), 1, "the entry was written once");
+		assert.equal(callsTo("/send").length, 1, "the message went out once");
+		assert.equal(closed, 1, "compose closed on a successful send");
 	});
 
 	it("sends a reply pressed before the first autosave, in one dispatch", async () => {

package/src/components/mail/MessageAttachments.interaction.test.ts

@@ -0,0 +1,245 @@
+/**
+ * The attachment list wired to the real download (#683): a click fetches the
+ * part's `contentUrl` and hands the bytes to the browser under the sanitized
+ * name, and a fetch that fails says what failed instead of doing nothing.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { messageOperationsDescribeMessageQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapBodyPartResponse } from "@remit/api-http-client/types.gen.ts";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { MessageAttachments } from "./MessageAttachments";
+
+let harness: DomHarness | undefined;
+const originalFetch = globalThis.fetch;
+const originalCreateElement = document.createElement.bind(document);
+const objectUrls = globalThis.URL as unknown as {
+	createObjectURL?: (blob: Blob) => string;
+	revokeObjectURL?: (value: string) => void;
+};
+const originalCreateObjectURL = objectUrls.createObjectURL;
+const originalRevokeObjectURL = objectUrls.revokeObjectURL;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	globalThis.fetch = originalFetch;
+	document.createElement = originalCreateElement;
+	objectUrls.createObjectURL = originalCreateObjectURL;
+	objectUrls.revokeObjectURL = originalRevokeObjectURL;
+});
+
+const bodyParts = (
+	...overrides: Partial<RemitImapBodyPartResponse>[]
+): RemitImapBodyPartResponse[] =>
+	overrides.map(
+		(override, index) =>
+			({
+				bodyPartId: `part-${index + 1}`,
+				mediaType: "APPLICATION",
+				mediaSubtype: "PDF",
+				sizeOctets: 4096,
+				disposition: "attachment",
+				dispositionFilename: "report.pdf",
+				contentUrl: `https://cdn.test/content/parts/${index + 2}`,
+				isMultipart: false,
+				...override,
+			}) as RemitImapBodyPartResponse,
+	);
+
+interface SavedFile {
+	filename: string;
+	url: string;
+}
+
+const captureSaves = (): SavedFile[] => {
+	const saved: SavedFile[] = [];
+	objectUrls.createObjectURL = () => "blob:test";
+	objectUrls.revokeObjectURL = () => undefined;
+
+	document.createElement = ((tag: string) => {
+		const element = originalCreateElement(tag);
+		if (tag === "a") {
+			const anchor = element as HTMLAnchorElement;
+			anchor.click = () =>
+				saved.push({ filename: anchor.download, url: anchor.href });
+		}
+		return element;
+	}) as typeof document.createElement;
+	return saved;
+};
+
+const MESSAGE_ID = "msg-1";
+
+const mount = (parts?: RemitImapBodyPartResponse[], hasAttachment = true) => {
+	harness = createDomHarness();
+	harness.renderApp(
+		createElement(MessageAttachments, {
+			messageId: MESSAGE_ID,
+			bodyParts: parts,
+			hasAttachment,
+		}),
+	);
+	return harness;
+};
+
+describe("MessageAttachments", () => {
+	it("lists each attachment part with a download control", () => {
+		const dom = mount(
+			bodyParts(
+				{ dispositionFilename: "board-pack.pdf" },
+				{
+					dispositionFilename: "site-plan.png",
+					mediaType: "IMAGE",
+					mediaSubtype: "PNG",
+					sizeOctets: 1024,
+				},
+			),
+		);
+
+		assert.match(dom.text(), /2 attachments/);
+		assert.ok(dom.byLabel("Download board-pack.pdf"));
+		assert.ok(dom.byLabel("Download site-plan.png"));
+		assert.match(dom.text(), /PNG · 1 KB/);
+	});
+
+	it("renders nothing for a message with no attachments", () => {
+		const dom = mount(
+			bodyParts({ disposition: "inline", mediaSubtype: "HTML" }),
+			false,
+		);
+		assert.equal(dom.html(), "");
+	});
+
+	it("downloads the part's content URL and saves it under the sanitized name", async () => {
+		const requested: string[] = [];
+		globalThis.fetch = (async (url: string) => {
+			requested.push(String(url));
+			return new Response("payload", { status: 200 });
+		}) as unknown as typeof fetch;
+		const saved = captureSaves();
+
+		const dom = mount(
+			bodyParts({
+				dispositionFilename: "../../../etc/passwd",
+				contentUrl: "https://cdn.test/content/parts/2",
+			}),
+		);
+		dom.click(dom.byLabel("Download passwd"));
+		await dom.flush();
+
+		assert.deepEqual(requested, ["https://cdn.test/content/parts/2"]);
+		assert.deepEqual(saved, [{ filename: "passwd", url: "blob:test" }]);
+	});
+
+	it("states what failed and offers a retry instead of doing nothing", async () => {
+		globalThis.fetch = (async () =>
+			new Response("gone", {
+				status: 404,
+				statusText: "Not Found",
+			})) as unknown as typeof fetch;
+
+		const dom = mount(bodyParts({ dispositionFilename: "board-pack.pdf" }));
+		dom.click(dom.byLabel("Download board-pack.pdf"));
+		await dom.flush();
+
+		const alert = dom.query('[data-testid="attachment-error"]');
+		assert.ok(alert, "a failed download must render an alert");
+		assert.match(alert.textContent ?? "", /missing from storage/);
+		assert.match(alert.textContent ?? "", /Re-sync the account/);
+		assert.match(alert.textContent ?? "", /Try again/);
+		assert.match(alert.innerHTML, /issues\/new/);
+	});
+
+	it("retries the same part when the failure's retry is taken", async () => {
+		let attempts = 0;
+		globalThis.fetch = (async () => {
+			attempts += 1;
+			return attempts === 1
+				? new Response("gone", { status: 404, statusText: "Not Found" })
+				: new Response("payload", { status: 200 });
+		}) as unknown as typeof fetch;
+		const saved = captureSaves();
+
+		const dom = mount(bodyParts({ dispositionFilename: "board-pack.pdf" }));
+		dom.click(dom.byLabel("Download board-pack.pdf"));
+		await dom.flush();
+
+		dom.click(dom.byText("button", "Try again"));
+		await dom.flush();
+
+		assert.equal(attempts, 2);
+		assert.deepEqual(saved, [{ filename: "board-pack.pdf", url: "blob:test" }]);
+		assert.equal(dom.query('[data-testid="attachment-error"]'), null);
+	});
+
+	// The signed content URL outlives neither an hour nor a re-signing, and a
+	// deferred part is materialized by the describe read itself. Re-hitting the
+	// same URL cannot fix either, so the retry goes back through describeMessage
+	// and uses the URL that read minted.
+	it("renews the content URL through describeMessage when the link expired", async () => {
+		const requested: string[] = [];
+		globalThis.fetch = (async (url: string) => {
+			requested.push(String(url));
+			return requested.length === 1
+				? new Response("expired", {
+						status: 403,
+						headers: { "x-remit-403-reason": "expired" },
+					})
+				: new Response("payload", { status: 200 });
+		}) as unknown as typeof fetch;
+		const saved = captureSaves();
+
+		const dom = mount(
+			bodyParts({ contentUrl: "https://cdn.test/parts/2?exp=1&sig=old" }),
+		);
+		dom.queryClient.setQueryData(
+			messageOperationsDescribeMessageQueryKey({
+				path: { messageId: MESSAGE_ID },
+			}),
+			{
+				bodyParts: bodyParts({
+					contentUrl: "https://cdn.test/parts/2?exp=2&sig=new",
+				}),
+			},
+		);
+
+		dom.click(dom.byLabel("Download report.pdf"));
+		await dom.flush();
+		await dom.flush();
+
+		assert.deepEqual(requested, [
+			"https://cdn.test/parts/2?exp=1&sig=old",
+			"https://cdn.test/parts/2?exp=2&sig=new",
+		]);
+		assert.equal(saved.length, 1);
+		assert.equal(dom.query('[data-testid="attachment-error"]'), null);
+	});
+
+	it("does not re-read the message for a failure a re-read cannot fix", async () => {
+		let attempts = 0;
+		globalThis.fetch = (async () => {
+			attempts += 1;
+			return new Response("gone", { status: 404, statusText: "Not Found" });
+		}) as unknown as typeof fetch;
+
+		const dom = mount(bodyParts({}));
+		dom.click(dom.byLabel("Download report.pdf"));
+		await dom.flush();
+
+		assert.equal(attempts, 1);
+		assert.ok(dom.query('[data-testid="attachment-error"]'));
+	});
+
+	it("says so when the server flags an attachment no part describes", () => {
+		const dom = mount([], true);
+		assert.match(dom.text(), /none of its parts describe one/);
+	});
+
+	it("claims nothing while the message is still loading", () => {
+		const dom = mount(undefined, true);
+		assert.equal(dom.html(), "");
+	});
+});