@remit/web-client 0.0.297 → 0.0.299

package/src/lib/compose-attachment-controller.test.ts

@@ -0,0 +1,242 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	type AttachmentTransport,
+	ComposeAttachmentController,
+	type MintedAttachment,
+} from "./compose-attachment-controller";
+
+const DRAFT = "draft-1";
+
+interface Deferred<T> {
+	promise: Promise<T>;
+	resolve: (value: T) => void;
+	reject: (error: unknown) => void;
+}
+
+const deferred = <T>(): Deferred<T> => {
+	let resolve: (value: T) => void = () => {};
+	let reject: (error: unknown) => void = () => {};
+	const promise = new Promise<T>((res, rej) => {
+		resolve = res;
+		reject = rej;
+	});
+	return { promise, resolve, reject };
+};
+
+const settle = () => new Promise((resolve) => setImmediate(resolve));
+
+/**
+ * A server that answers each request only when the test says so, and remembers
+ * what the draft holds the way `retainOnly` does: a keep list drops every
+ * reservation it does not name.
+ */
+const createServer = () => {
+	const mints = new Map<string, Deferred<MintedAttachment>>();
+	const onDraft = new Set<string>();
+	const put: string[] = [];
+	const completed: string[] = [];
+	const keeps: string[][] = [];
+	let keepFailure: Error | null = null;
+	let keepGate: Promise<void> | null = null;
+
+	const transport: AttachmentTransport = {
+		mint: (_draft, file) => {
+			const answer = deferred<MintedAttachment>();
+			mints.set(file.name, answer);
+			return answer.promise.then((minted) => {
+				onDraft.add(minted.outboxAttachmentId);
+				return minted;
+			});
+		},
+		put: async (uploadUrl, _file, signal) => {
+			if (signal.aborted) throw new Error("aborted");
+			put.push(uploadUrl);
+		},
+		complete: async (_draft, outboxAttachmentId) => {
+			completed.push(outboxAttachmentId);
+		},
+		keep: async (_draft, attachmentIds) => {
+			keeps.push(attachmentIds);
+			if (keepGate) await keepGate;
+			if (keepFailure) throw keepFailure;
+			for (const id of [...onDraft]) {
+				if (!attachmentIds.includes(id)) onDraft.delete(id);
+			}
+		},
+	};
+
+	const answerMint = (filename: string, outboxAttachmentId: string) => {
+		const answer = mints.get(filename);
+		if (!answer) throw new Error(`no reservation asked for ${filename}`);
+		answer.resolve({
+			outboxAttachmentId,
+			filename,
+			uploadUrl: `https://upload.test/${outboxAttachmentId}`,
+		});
+	};
+
+	return {
+		transport,
+		answerMint,
+		onDraft,
+		put,
+		completed,
+		keeps,
+		failKeeps: (error: Error | null) => {
+			keepFailure = error;
+		},
+		holdKeeps: () => {
+			const gate = deferred<void>();
+			keepGate = gate.promise;
+			return () => {
+				keepGate = null;
+				gate.resolve();
+			};
+		},
+	};
+};
+
+const file = (name: string) => new File(["bytes"], name);
+
+const setup = () => {
+	const server = createServer();
+	const controller = new ComposeAttachmentController({
+		transport: () => server.transport,
+		ensureDraft: async () => ({ outcome: "ready", outboxMessageId: DRAFT }),
+	});
+	return { server, controller };
+};
+
+const rowFor = (controller: ComposeAttachmentController, filename: string) =>
+	controller.getSnapshot().find((item) => item.filename === filename);
+
+describe("ComposeAttachmentController", () => {
+	it("attaches a file through reserve, upload and confirm", async () => {
+		const { server, controller } = setup();
+
+		const attaching = controller.attach([file("report.pdf")]);
+		await settle();
+		server.answerMint("report.pdf", "att-1");
+		await attaching;
+
+		assert.deepEqual(rowFor(controller, "report.pdf")?.state, {
+			status: "attached",
+		});
+		assert.deepEqual(server.put, ["https://upload.test/att-1"]);
+		assert.deepEqual(server.completed, ["att-1"]);
+		assert.equal(controller.blockingReason(), undefined);
+	});
+
+	it("takes a file removed while its reservation is out off the draft, and never uploads it", async () => {
+		const { server, controller } = setup();
+
+		const attaching = controller.attach([file("payroll.xlsx")]);
+		await settle();
+		const removing = controller.remove(controller.getSnapshot()[0].key);
+		assert.equal(controller.getSnapshot().length, 0, "the row goes at once");
+
+		server.answerMint("payroll.xlsx", "att-payroll");
+		await Promise.all([attaching, removing]);
+
+		assert.deepEqual(server.put, [], "nothing was uploaded");
+		assert.deepEqual(server.completed, [], "nothing was confirmed");
+		assert.deepEqual(server.keeps, [[]], "the draft was told it keeps nothing");
+		assert.equal(server.onDraft.has("att-payroll"), false);
+		assert.equal(controller.blockingReason(), undefined);
+	});
+
+	it("keeps a file whose reservation is still out when another one is removed", async () => {
+		const { server, controller } = setup();
+
+		const first = controller.attach([file("first.pdf")]);
+		await settle();
+		server.answerMint("first.pdf", "att-first");
+		await first;
+
+		const second = controller.attach([file("second.pdf")]);
+		await settle();
+		const removing = controller.remove(
+			rowFor(controller, "first.pdf")?.key ?? "",
+		);
+		await settle();
+		assert.deepEqual(
+			server.keeps,
+			[],
+			"the keep list waits for the reservation",
+		);
+
+		server.answerMint("second.pdf", "att-second");
+		await Promise.all([second, removing]);
+
+		assert.deepEqual(server.keeps, [["att-second"]]);
+		assert.equal(server.onDraft.has("att-second"), true);
+		assert.equal(server.onDraft.has("att-first"), false);
+		assert.deepEqual(rowFor(controller, "second.pdf")?.state, {
+			status: "attached",
+		});
+	});
+
+	it("puts a file back, marked, when the server would not remove it", async () => {
+		const { server, controller } = setup();
+
+		const attaching = controller.attach([file("contract.pdf")]);
+		await settle();
+		server.answerMint("contract.pdf", "att-contract");
+		await attaching;
+
+		server.failKeeps(new Error("the server answered 500"));
+		await controller.remove(controller.getSnapshot()[0].key);
+
+		const row = rowFor(controller, "contract.pdf");
+		assert.equal(row?.state.status, "failed");
+		assert.match(
+			row?.state.status === "failed" ? row.state.reason : "",
+			/"contract\.pdf" could not be removed: the server answered 500\. It is still on the draft/,
+		);
+		assert.match(
+			controller.blockingReason() ?? "",
+			/"contract\.pdf" is not attached/,
+		);
+
+		server.failKeeps(null);
+		await controller.remove(controller.getSnapshot()[0].key);
+		assert.deepEqual(server.keeps.at(-1), []);
+		assert.equal(controller.getSnapshot().length, 0);
+	});
+
+	it("keeps Send refused, naming the file, until the server has dropped it", async () => {
+		const { server, controller } = setup();
+
+		const attaching = controller.attach([file("payroll.xlsx")]);
+		await settle();
+		server.answerMint("payroll.xlsx", "att-payroll");
+		await attaching;
+
+		const release = server.holdKeeps();
+		const removing = controller.remove(controller.getSnapshot()[0].key);
+		await settle();
+		assert.equal(controller.getSnapshot().length, 0, "the row goes at once");
+		assert.equal(controller.blockingReason(), 'Removing "payroll.xlsx"…');
+
+		release();
+		await removing;
+		assert.equal(controller.blockingReason(), undefined);
+		assert.equal(server.onDraft.has("att-payroll"), false);
+	});
+
+	it("blocks sending while a file uploads, naming it", async () => {
+		const { server, controller } = setup();
+
+		const attaching = controller.attach([file("minutes.docx")]);
+		await settle();
+		assert.equal(
+			controller.blockingReason(),
+			'"minutes.docx" is still uploading.',
+		);
+
+		server.answerMint("minutes.docx", "att-minutes");
+		await attaching;
+		assert.equal(controller.blockingReason(), undefined);
+	});
+});

package/src/lib/compose-attachment-controller.ts

@@ -0,0 +1,415 @@
+import type {
+	RemitImapOutboxAttachmentRejectionReason,
+	RemitImapOutboxAttachmentResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import type { ComposeAttachmentItem, ComposeAttachmentState } from "@remit/ui";
+import { formatErrorDetail } from "../components/ui/error-banners";
+
+export type DraftForAttachment =
+	| { outcome: "ready"; outboxMessageId: string }
+	| { outcome: "refused"; reason: string };
+
+export interface MintedAttachment {
+	outboxAttachmentId: string;
+	filename: string;
+	uploadUrl: string;
+}
+
+/** The four requests a file on a draft is made of. Each throws on failure. */
+export interface AttachmentTransport {
+	mint: (outboxMessageId: string, file: File) => Promise<MintedAttachment>;
+	put: (uploadUrl: string, file: File, signal: AbortSignal) => Promise<void>;
+	complete: (
+		outboxMessageId: string,
+		outboxAttachmentId: string,
+	) => Promise<void>;
+	keep: (outboxMessageId: string, attachmentIds: string[]) => Promise<void>;
+}
+
+export interface ComposeAttachmentControllerDeps {
+	transport: () => AttachmentTransport;
+	ensureDraft: () => Promise<DraftForAttachment>;
+}
+
+interface Entry extends ComposeAttachmentItem {
+	serverId: string | null;
+	file: File | null;
+}
+
+interface AttachmentRejection {
+	code: "attachment_rejected";
+	reason: RemitImapOutboxAttachmentRejectionReason;
+	message: string;
+}
+
+const isRejection = (error: unknown): error is AttachmentRejection =>
+	typeof error === "object" &&
+	error !== null &&
+	"code" in error &&
+	error.code === "attachment_rejected" &&
+	"message" in error &&
+	typeof error.message === "string";
+
+/**
+ * Refusals about the file itself. Pressing again sends the same file and is
+ * refused the same way, so the row offers removal and nothing else.
+ */
+const FINAL_REASONS: ReadonlySet<RemitImapOutboxAttachmentRejectionReason> =
+	new Set([
+		"EmptyFile",
+		"UnusableFilename",
+		"FileTooLarge",
+		"TooManyAttachments",
+	]);
+
+const UPLOADING: ComposeAttachmentState = { status: "uploading" };
+const ATTACHED: ComposeAttachmentState = { status: "attached" };
+
+const failed = (
+	reason: string,
+	retryable: boolean,
+): ComposeAttachmentState => ({
+	status: "failed",
+	reason,
+	retryable,
+});
+
+const refusalOf = (
+	filename: string,
+	error: unknown,
+): ComposeAttachmentState => {
+	if (isRejection(error)) {
+		return failed(error.message, !FINAL_REASONS.has(error.reason));
+	}
+	return failed(
+		`"${filename}" could not be attached: ${formatErrorDetail(error) ?? "the request failed"}. Try again.`,
+		true,
+	);
+};
+
+const fromServer = (attachment: RemitImapOutboxAttachmentResponse): Entry => ({
+	key: attachment.outboxAttachmentId,
+	serverId: attachment.outboxAttachmentId,
+	file: null,
+	filename: attachment.filename,
+	sizeBytes: attachment.sizeBytes,
+	state:
+		attachment.state === "Stored"
+			? ATTACHED
+			: failed(
+					`"${attachment.filename}" did not finish uploading. Remove it and attach it again.`,
+					false,
+				),
+});
+
+/**
+ * The files on the draft being written, and the requests that put each one
+ * there: reserve room, upload the bytes, confirm them.
+ *
+ * What the draft keeps is stated to the server as a whole list, so a removal
+ * waits for every reservation still in flight: a list sent before one comes
+ * back would not name it, and the server would drop a file the writer kept.
+ * A file removed mid-upload is left out of that list once its reservation
+ * lands, which is what takes it off the draft — pulling the row alone would
+ * leave the upload to finish and the file to go out unseen.
+ */
+export class ComposeAttachmentController {
+	private entries: Entry[] = [];
+	private snapshot: ComposeAttachmentItem[] = [];
+	private readonly listeners = new Set<() => void>();
+	private generation = 0;
+	private draftId: string | undefined;
+	private nextKey = 0;
+	private readonly reservationsInFlight = new Set<Promise<void>>();
+	private readonly inFlight = new Map<string, AbortController>();
+	private readonly mintedAfterRemoval = new Map<string, string>();
+	private readonly removing = new Map<string, string>();
+
+	constructor(private readonly deps: ComposeAttachmentControllerDeps) {}
+
+	subscribe = (listener: () => void): (() => void) => {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	};
+
+	getSnapshot = (): ComposeAttachmentItem[] => this.snapshot;
+
+	blockingReason = (): string | undefined => {
+		const [removing] = this.removing.values();
+		if (removing !== undefined) return `Removing "${removing}"…`;
+		const uploading = this.entries.find(
+			(entry) => entry.state.status === "uploading",
+		);
+		if (uploading) return `"${uploading.filename}" is still uploading.`;
+		const broken = this.entries.find(
+			(entry) => entry.state.status === "failed",
+		);
+		if (broken) {
+			return `"${broken.filename}" is not attached. Try it again or remove it before sending.`;
+		}
+		return undefined;
+	};
+
+	private set(next: Entry[]): void {
+		this.entries = next;
+		this.snapshot = next.map(({ key, filename, sizeBytes, state }) => ({
+			key,
+			filename,
+			sizeBytes,
+			state,
+		}));
+		for (const listener of this.listeners) listener();
+	}
+
+	private patch(generation: number, key: string, change: Partial<Entry>): void {
+		if (generation !== this.generation) return;
+		if (!this.entries.some((entry) => entry.key === key)) return;
+		this.set(
+			this.entries.map((entry) =>
+				entry.key === key ? { ...entry, ...change } : entry,
+			),
+		);
+	}
+
+	private reserve(
+		outboxMessageId: string,
+		file: File,
+	): { minted: Promise<MintedAttachment>; settle: () => void } {
+		let settle = () => {};
+		const slot = new Promise<void>((resolve) => {
+			settle = () => {
+				this.reservationsInFlight.delete(slot);
+				resolve();
+			};
+		});
+		this.reservationsInFlight.add(slot);
+		return {
+			minted: this.deps.transport().mint(outboxMessageId, file),
+			settle,
+		};
+	}
+
+	private upload = async (
+		generation: number,
+		key: string,
+		file: File,
+		outboxMessageId: string,
+		signal: AbortSignal,
+	): Promise<void> => {
+		if (signal.aborted) return;
+		const transport = this.deps.transport();
+		const { minted: minting, settle } = this.reserve(outboxMessageId, file);
+		const minted = await minting.catch((error: unknown) => {
+			this.patch(generation, key, { state: refusalOf(file.name, error) });
+			return null;
+		});
+		if (minted !== null && signal.aborted) {
+			this.mintedAfterRemoval.set(key, minted.outboxAttachmentId);
+		}
+		if (minted !== null && !signal.aborted) {
+			this.patch(generation, key, {
+				serverId: minted.outboxAttachmentId,
+				filename: minted.filename,
+			});
+		}
+		settle();
+		if (minted === null || signal.aborted) return;
+
+		const putFailure = await transport.put(minted.uploadUrl, file, signal).then(
+			() => null,
+			(error: unknown) => formatErrorDetail(error) ?? "the connection dropped",
+		);
+		if (signal.aborted) return;
+		if (putFailure !== null) {
+			this.patch(generation, key, {
+				state: failed(
+					`"${minted.filename}" did not finish uploading: ${putFailure}. Try again.`,
+					true,
+				),
+			});
+			return;
+		}
+
+		const completed = await transport
+			.complete(outboxMessageId, minted.outboxAttachmentId)
+			.then(
+				() => true,
+				(error: unknown) => {
+					this.patch(generation, key, {
+						state: refusalOf(minted.filename, error),
+					});
+					return false;
+				},
+			);
+		if (!completed || signal.aborted) return;
+		this.patch(generation, key, { state: ATTACHED });
+	};
+
+	private run = async (
+		generation: number,
+		key: string,
+		file: File,
+		outboxMessageId: string,
+		signal: AbortSignal,
+	): Promise<void> => {
+		await this.upload(generation, key, file, outboxMessageId, signal);
+		if (this.inFlight.get(key)?.signal === signal) this.inFlight.delete(key);
+	};
+
+	/**
+	 * Tell the server what the draft keeps, once no reservation is still out.
+	 * Answers whether the server took it.
+	 */
+	private syncKept = async (generation: number): Promise<unknown> => {
+		while (this.reservationsInFlight.size > 0) {
+			await Promise.all([...this.reservationsInFlight]);
+		}
+		const outboxMessageId = this.draftId;
+		if (generation !== this.generation || outboxMessageId === undefined) {
+			return null;
+		}
+		return this.deps
+			.transport()
+			.keep(
+				outboxMessageId,
+				this.entries.flatMap((entry) =>
+					entry.serverId === null ? [] : [entry.serverId],
+				),
+			)
+			.then(
+				() => null,
+				(error: unknown) => error ?? new Error("the request failed"),
+			);
+	};
+
+	attach = async (files: File[]): Promise<void> => {
+		const generation = this.generation;
+		const added = files.map((file) => {
+			this.nextKey += 1;
+			const entry: Entry = {
+				key: `local-${this.nextKey}`,
+				serverId: null,
+				file,
+				filename: file.name,
+				sizeBytes: file.size,
+				state: UPLOADING,
+			};
+			const controller = new AbortController();
+			this.inFlight.set(entry.key, controller);
+			return { entry, file, signal: controller.signal };
+		});
+		this.set([...this.entries, ...added.map(({ entry }) => entry)]);
+
+		const draft = await this.deps.ensureDraft();
+		if (draft.outcome === "refused") {
+			for (const { entry } of added) {
+				this.inFlight.delete(entry.key);
+				this.patch(generation, entry.key, {
+					state: failed(draft.reason, true),
+				});
+			}
+			return;
+		}
+		if (generation !== this.generation) return;
+		this.draftId = draft.outboxMessageId;
+
+		await Promise.all(
+			added.map(({ entry, file, signal }) =>
+				this.run(generation, entry.key, file, draft.outboxMessageId, signal),
+			),
+		);
+	};
+
+	retry = async (key: string): Promise<void> => {
+		const entry = this.entries.find((candidate) => candidate.key === key);
+		if (!entry || entry.file === null || this.inFlight.has(key)) return;
+		const file = entry.file;
+		const generation = this.generation;
+		const controller = new AbortController();
+		this.inFlight.set(key, controller);
+		this.patch(generation, key, { state: UPLOADING, serverId: null });
+
+		const draft = await this.deps.ensureDraft();
+		if (draft.outcome === "refused") {
+			this.inFlight.delete(key);
+			this.patch(generation, key, { state: failed(draft.reason, true) });
+			return;
+		}
+		this.draftId = draft.outboxMessageId;
+
+		if (entry.serverId !== null) {
+			const failure = await this.syncKept(generation);
+			if (failure !== null) {
+				this.inFlight.delete(key);
+				this.patch(generation, key, {
+					serverId: entry.serverId,
+					state: refusalOf(file.name, failure),
+				});
+				return;
+			}
+		}
+
+		await this.run(
+			generation,
+			key,
+			file,
+			draft.outboxMessageId,
+			controller.signal,
+		);
+	};
+
+	remove = async (key: string): Promise<void> => {
+		const entry = this.entries.find((candidate) => candidate.key === key);
+		if (!entry) return;
+		const generation = this.generation;
+		const uploading = this.inFlight.get(key);
+		this.set(this.entries.filter((candidate) => candidate.key !== key));
+		if (uploading) {
+			this.inFlight.delete(key);
+			uploading.abort();
+		}
+		if (entry.serverId === null && !uploading) return;
+
+		// Until the server has dropped it the file is still on the draft, and a
+		// Send pressed in that window would carry it.
+		this.removing.set(key, entry.filename);
+		this.set(this.entries);
+		const failure = await this.syncKept(generation);
+		this.removing.delete(key);
+		this.set(this.entries);
+		const serverId = entry.serverId ?? this.mintedAfterRemoval.get(key) ?? null;
+		this.mintedAfterRemoval.delete(key);
+		if (failure === null || generation !== this.generation) return;
+		if (serverId === null) return;
+		this.set([
+			...this.entries,
+			{
+				...entry,
+				serverId,
+				file: null,
+				state: failed(
+					`"${entry.filename}" could not be removed: ${formatErrorDetail(failure) ?? "the request failed"}. It is still on the draft — remove it again.`,
+					false,
+				),
+			},
+		]);
+	};
+
+	load = (
+		outboxMessageId: string,
+		attachments: readonly RemitImapOutboxAttachmentResponse[],
+	): void => {
+		this.draftId = outboxMessageId;
+		this.set(attachments.map(fromServer));
+	};
+
+	reset = (outboxMessageId: string | undefined): void => {
+		this.generation += 1;
+		for (const controller of this.inFlight.values()) controller.abort();
+		this.inFlight.clear();
+		this.mintedAfterRemoval.clear();
+		this.removing.clear();
+		this.draftId = outboxMessageId;
+		this.set([]);
+	};
+}

package/src/routes/settings/-accounts.test.ts

@@ -34,6 +34,13 @@ describe("mapOauthError", () => {
 		);
 	});
 
+	test("scope_not_granted sends the person back through the consent", () => {
+		assert.match(
+			mapOauthError("scope_not_granted"),
+			/did not grant access to every service you picked/,
+		);
+	});
+
 	test("consent_required returns admin consent message", () => {
 		const result = mapOauthError("consent_required");
 		assert.ok(
@@ -99,6 +106,7 @@ const REAUTH_ACCOUNT = {
 	displayName: "Matthijs",
 	authType: "oauthMicrosoft",
 	connectionState: "reauth_required",
+	syncedServices: ["Mail", "Calendar"],
 };
 
 // The router reads `self` at construction; the shared jsdom globals stop at
@@ -195,6 +203,16 @@ describe("the Reconnect button and the redirect it starts", () => {
 		Reflect.deleteProperty(document, "visibilityState");
 	});
 
+	test("asks Microsoft again for every service the account syncs", async () => {
+		const dom = await mountAccounts();
+		await startReconnect(dom);
+
+		assert.deepEqual(http?.to("/oauth/microsoft/start")[0]?.body, {
+			email: REAUTH_ACCOUNT.email,
+			services: ["Mail", "Calendar"],
+		});
+	});
+
 	test("goes busy and stays busy while the redirect is in flight", async () => {
 		const dom = await mountAccounts();
 		await startReconnect(dom);