@remit/web-client 0.0.135 → 0.0.137

package/src/components/compose/compose-mode.test.ts

@@ -0,0 +1,76 @@
+/**
+ * Which surface a draft reopens in, and when a mode switch is refused.
+ *
+ * The mode is derived from `htmlBody`, with no field of its own. It has to be
+ * "a non-empty string" and not "truthy": the rich editor serializes an empty
+ * document to `<p><br></p>` and a plain draft clears the column to `""`, so a
+ * falsy check opens a plain draft correctly by accident and an absent column
+ * — an old draft, a partial write — the wrong way round.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	conversionOutcome,
+	modeOfDraft,
+	switchNeedsWarning,
+} from "./compose-mode.js";
+
+describe("the mode a draft reopens in", () => {
+	it("opens a draft with HTML as rich", () => {
+		assert.equal(modeOfDraft("<p>Hello</p>"), "rich");
+	});
+
+	it("opens an empty rich document as rich", () => {
+		assert.equal(modeOfDraft("<p><br></p>"), "rich");
+	});
+
+	it("opens a draft whose HTML was cleared as plain", () => {
+		assert.equal(modeOfDraft(""), "plain");
+	});
+
+	it("opens a draft that never had HTML as plain", () => {
+		assert.equal(modeOfDraft(undefined), "plain");
+	});
+});
+
+describe("whether the switch warns first", () => {
+	it("warns when the document holds formatting", () => {
+		assert.equal(switchNeedsWarning("plain", ["table"]), true);
+	});
+
+	it("says nothing over plain paragraphs", () => {
+		assert.equal(switchNeedsWarning("plain", []), false);
+	});
+
+	it("never warns on the way back to rich", () => {
+		assert.equal(switchNeedsWarning("rich", ["table", "bold"]), false);
+	});
+});
+
+describe("a conversion that would empty a written message", () => {
+	it("goes ahead when the conversion carried the message across", () => {
+		assert.deepEqual(conversionOutcome("plain", "Due Friday.", "Due Friday."), {
+			outcome: "switch",
+		});
+	});
+
+	it("goes ahead when there was nothing to carry", () => {
+		assert.deepEqual(conversionOutcome("plain", "", ""), { outcome: "switch" });
+	});
+
+	it("refuses, naming the direction, when plain text came back empty", () => {
+		assert.deepEqual(conversionOutcome("plain", "Due Friday.", "   "), {
+			outcome: "blocked",
+			title: "Couldn't switch to plain text",
+			detail: "The conversion came back empty, so your message is unchanged.",
+		});
+	});
+
+	it("refuses, naming the direction, when rich text came back empty", () => {
+		assert.deepEqual(conversionOutcome("rich", "Due Friday.", ""), {
+			outcome: "blocked",
+			title: "Couldn't switch to rich text",
+			detail: "The conversion came back empty, so your message is unchanged.",
+		});
+	});
+});

package/src/components/compose/compose-mode.ts

@@ -0,0 +1,50 @@
+import type { ComposeBodyMode } from "@remit/ui/rich-text";
+
+/**
+ * Which surface a draft reopens in, with no field of its own. `htmlBody` a
+ * non-empty string is a rich draft; anything else is plain.
+ *
+ * Not "falsy": the rich editor serializes an empty document to `<p><br></p>`,
+ * so a rich draft's `htmlBody` is never absent, and a plain draft clears the
+ * column to the empty string rather than omitting it — absent means "leave
+ * alone" at every layer below this one.
+ */
+export const modeOfDraft = (htmlBody: string | undefined): ComposeBodyMode =>
+	typeof htmlBody === "string" && htmlBody.length > 0 ? "rich" : "plain";
+
+/**
+ * Whether switching to plain text destroys something. True for any node type or
+ * text format the document holds that plain text cannot carry.
+ */
+export const switchNeedsWarning = (
+	target: ComposeBodyMode,
+	formatting: readonly string[],
+): boolean => target === "plain" && formatting.length > 0;
+
+export type ConversionOutcome =
+	| { outcome: "switch" }
+	| { outcome: "blocked"; title: string; detail: string };
+
+const BLOCKED_TITLES: Record<ComposeBodyMode, string> = {
+	plain: "Couldn't switch to plain text",
+	rich: "Couldn't switch to rich text",
+};
+
+/**
+ * A conversion that empties a written message does not happen. Autosave would
+ * persist the blank body a moment later, so the draft would be gone with
+ * nothing said. An empty body converting to an empty body is not this case.
+ */
+export const conversionOutcome = (
+	target: ComposeBodyMode,
+	source: string,
+	converted: string,
+): ConversionOutcome => {
+	if (source.trim() === "" || converted.trim() !== "")
+		return { outcome: "switch" };
+	return {
+		outcome: "blocked",
+		title: BLOCKED_TITLES[target],
+		detail: "The conversion came back empty, so your message is unchanged.",
+	};
+};

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(), "");
+	});
+});

package/src/components/mail/MessageAttachments.tsx

@@ -0,0 +1,153 @@
+import { messageOperationsDescribeMessageQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type {
+	RemitImapBodyPartResponse,
+	RemitImapDescribeMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import { type AttachmentDownloadState, AttachmentList } from "@remit/ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { useAuthProvider } from "@/auth/provider";
+import {
+	attachmentFailureContent,
+	attachmentReportUrl,
+	extractAttachmentFailureDetail,
+	extractAttachmentFailureReason,
+	fetchAttachment,
+	isRepairableByRefetch,
+	saveBlob,
+} from "@/lib/attachment-download";
+import {
+	type MessageAttachment,
+	selectMessageAttachments,
+} from "@/lib/message-attachments";
+
+interface MessageAttachmentsProps {
+	messageId: string;
+	/** Body parts from `describeMessage`; absent while the message is loading. */
+	bodyParts?: readonly RemitImapBodyPartResponse[];
+	/** The thread row's server-side attachment flag. */
+	hasAttachment?: boolean;
+	className?: string;
+}
+
+const IDLE: AttachmentDownloadState = { status: "idle" };
+
+/**
+ * The attachments carried by an open message, and the download behind each row.
+ *
+ * Download state is per row and lives here rather than in a query: a download is
+ * a one-shot user action with no cached result to hold, and the bytes are handed
+ * to the browser rather than rendered.
+ */
+export const MessageAttachments = ({
+	messageId,
+	bodyParts,
+	hasAttachment = false,
+	className,
+}: MessageAttachmentsProps) => {
+	const { getToken } = useAuthProvider();
+	const queryClient = useQueryClient();
+	const [downloads, setDownloads] = useState<
+		Record<string, AttachmentDownloadState>
+	>({});
+
+	const attachments = useMemo(
+		() => selectMessageAttachments(bodyParts ?? []),
+		[bodyParts],
+	);
+
+	const describeKey = messageOperationsDescribeMessageQueryKey({
+		path: { messageId },
+	});
+
+	/**
+	 * A stale signature and an unmaterialized part are both repaired by re-reading
+	 * the message: `describeMessage` re-signs every `contentUrl`, and it
+	 * materializes the deferred per-part objects on its way through. Re-hitting
+	 * the same URL alone cannot fix either (remit-mail/remit#1240), so the retry
+	 * goes through the read path and then uses the URL it just minted.
+	 */
+	const fetchThroughRefreshedDescribe = (
+		attachment: MessageAttachment,
+	): Promise<Blob> =>
+		fetchAttachment(attachment.contentUrl, getToken).catch(
+			(error: unknown): Promise<Blob> => {
+				if (!isRepairableByRefetch(extractAttachmentFailureReason(error))) {
+					throw error;
+				}
+				return queryClient
+					.refetchQueries({ queryKey: describeKey })
+					.then(() => {
+						const refreshed =
+							queryClient.getQueryData<RemitImapDescribeMessageResponse>(
+								describeKey,
+							);
+						const renewed = refreshed
+							? selectMessageAttachments(refreshed.bodyParts).find(
+									(candidate) => candidate.bodyPartId === attachment.bodyPartId,
+								)
+							: undefined;
+						return fetchAttachment(
+							renewed?.contentUrl ?? attachment.contentUrl,
+							getToken,
+						);
+					});
+			},
+		);
+
+	const setState = (id: string, state: AttachmentDownloadState) =>
+		setDownloads((current) => ({ ...current, [id]: state }));
+
+	const download = (bodyPartId: string) => {
+		const attachment = attachments.find(
+			(candidate) => candidate.bodyPartId === bodyPartId,
+		);
+		if (!attachment) {
+			throw new Error(
+				`No attachment part ${bodyPartId} on message ${messageId}`,
+			);
+		}
+
+		setState(bodyPartId, { status: "downloading" });
+		fetchThroughRefreshedDescribe(attachment)
+			.then((blob) => {
+				saveBlob(blob, attachment.filename);
+				setState(bodyPartId, IDLE);
+			})
+			.catch((error: unknown) => {
+				const reason = extractAttachmentFailureReason(error);
+				const fallback = extractAttachmentFailureDetail(error);
+				const { title, detail } = attachmentFailureContent(
+					reason,
+					attachment.filename,
+					fallback,
+				);
+				setState(bodyPartId, {
+					status: "failed",
+					title,
+					detail,
+					reportUrl: attachmentReportUrl(reason, attachment.filename, fallback),
+				});
+			});
+	};
+
+	// Only claim an attachment is unaccounted for once the parts have arrived;
+	// while `describeMessage` is in flight there is nothing to contradict.
+	const hasUnlistedAttachment =
+		hasAttachment && bodyParts !== undefined && attachments.length === 0;
+
+	return (
+		<AttachmentList
+			className={className}
+			attachments={attachments.map((attachment) => ({
+				attachmentId: attachment.bodyPartId,
+				filename: attachment.filename,
+				typeLabel: attachment.typeLabel,
+				sizeOctets: attachment.sizeOctets,
+				download: downloads[attachment.bodyPartId] ?? IDLE,
+			}))}
+			onDownload={download}
+			hasUnlistedAttachment={hasUnlistedAttachment}
+		/>
+	);
+};

package/src/components/mail/MessageCard.tsx

@@ -16,6 +16,7 @@ import { formatDatePreset } from "@/lib/format";
 import { cn } from "@/lib/utils";
 import { AutoMovedIndicator } from "./AutoMovedIndicator";
 import { MessageActionMenu } from "./MessageActionMenu";
+import { MessageAttachments } from "./MessageAttachments";
 import { MessageBody } from "./MessageBody";
 import { MobileMessageBar } from "./MobileMessageBar";
 import { RawMessageView } from "./RawMessageView";
@@ -134,7 +135,11 @@ const CollapsedCard = ({
 			trailing={
 				<>
 					{threadMessage.hasAttachment && (
-						<Paperclip className="size-3 shrink-0 text-fg-subtle" />
+						<Paperclip
+							className="size-3 shrink-0 text-fg-subtle"
+							role="img"
+							aria-label="Has an attachment"
+						/>
 					)}
 					<StarButton
 						isStarred={threadMessage.hasStars}
@@ -238,11 +243,6 @@ const ExpandedCard = ({
 										onToggleStar={onToggleStar}
 										isStarPending={isStarPending}
 									/>
-									{threadMessage.hasAttachment && (
-										<span className="text-fg-subtle p-0.5">
-											<Paperclip className="size-3.5" />
-										</span>
-									)}
 								</div>
 								{isUnread && (
 									// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on decorative indicator provides useful context for assistive tech
@@ -324,6 +324,15 @@ const ExpandedCard = ({
 							isTrusted={isTrusted}
 							category={toDisplayCategory(threadMessage.category)}
 						/>
+						{/* The body slot runs edge to edge on a phone; the attachment
+						    list is app chrome, not part of the email, so it takes the
+						    gutter back. */}
+						<MessageAttachments
+							messageId={threadMessage.messageId}
+							bodyParts={messageData?.bodyParts}
+							hasAttachment={threadMessage.hasAttachment}
+							className="mt-4 px-2 lg:px-0"
+						/>
 					</div>
 				)
 			}

package/src/components/ui/ConfirmDialog.tsx

@@ -57,16 +57,29 @@ export const ConfirmDialog = ({
 		return () => window.removeEventListener("keydown", handleKeyDown, true);
 	}, [isOpen, handleKeyDown]);
 
+	// Whoever opened the dialog gets the focus back when it closes. Without this
+	// a cancelled confirmation drops focus to the body, and the control the user
+	// was on — the compose mode toggle, a row's delete button — is gone from
+	// under the keyboard.
 	useEffect(() => {
-		if (isOpen) {
-			cancelRef.current?.focus();
-		}
+		if (!isOpen) return;
+		const opener =
+			document.activeElement instanceof HTMLElement
+				? document.activeElement
+				: null;
+		cancelRef.current?.focus();
+		return () => {
+			if (opener?.isConnected) opener.focus();
+		};
 	}, [isOpen]);
 
 	if (!isOpen) return null;
 
 	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center">
+		// Above every other overlay, the mobile compose sheet included: a
+		// confirmation is the decision blocking whatever is under it, and a drawer
+		// portalled to the body at the same level would cover it.
+		<div className="fixed inset-0 z-[60] flex items-center justify-center">
 			{/* Backdrop. It carries the click-to-dismiss and the aria-hidden: the
 			    dialog itself must stay in the accessibility tree, and an
 			    aria-hidden ancestor would take it out. */}