@remit/web-client 0.0.190 → 0.0.191

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.190",
+  "version": "0.0.191",
   "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/mail/DeleteConfirmDialog.render.test.ts

@@ -9,9 +9,12 @@
  */
 import assert from "node:assert/strict";
 import { after, afterEach, before, beforeEach, describe, it } from "node:test";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import i18next from "i18next";
 import type { JSDOM } from "jsdom";
-import { act, createElement, Fragment } from "react";
+import React, { act, createElement, Fragment } from "react";
 import { createRoot, type Root } from "react-dom/client";
+import { I18nextProvider, initReactI18next } from "react-i18next";
 import {
 	type AuthProvider,
 	AuthProviderProvider,
@@ -19,10 +22,25 @@ import {
 } from "@/auth/provider";
 import type { DeleteOutcome } from "@/lib/format";
 import { DeleteConfirmDialog } from "./DeleteConfirmDialog";
+import { RoleAppointmentPromptProvider } from "./RoleAppointmentPromptProvider";
+
+// remit-ui's `.tsx` is transpiled with the classic JSX runtime, which
+// references a global `React`; the app uses the automatic runtime, so this
+// shim only exists for the test harness.
+(globalThis as { React?: typeof React }).React = React;
+
+const i18n = i18next.createInstance();
+i18n.use(initReactI18next).init({
+	lng: "en",
+	ns: ["mail"],
+	defaultNS: "mail",
+	resources: { en: { mail: {} } },
+});
 
 let dom: JSDOM;
 let container: HTMLElement;
 let root: Root;
+const originalFetch = globalThis.fetch;
 
 before(async () => {
 	const { JSDOM: JSDOMCtor } = await import("jsdom");
@@ -51,10 +69,61 @@ beforeEach(() => {
 	) as unknown as HTMLElement;
 	container.innerHTML = "";
 	root = createRoot(container);
+	globalThis.fetch = (async (input: RequestInfo | URL) => {
+		const path = new URL(
+			input instanceof Request ? input.url : String(input),
+			"http://localhost",
+		).pathname;
+		return new Response(JSON.stringify(answerFor(path)), {
+			status: 200,
+			headers: { "Content-Type": "application/json" },
+		});
+	}) as typeof fetch;
 });
 
+const ACCOUNT = "acc-1";
+
+/** Enough of the account for the appointment prompt to have folders to offer. */
+const answerFor = (path: string): unknown => {
+	if (path.endsWith("/config")) {
+		return {
+			accounts: [
+				{
+					accountId: ACCOUNT,
+					email: `${ACCOUNT}@example.com`,
+					folderAppointments: [{ role: "Trash", source: "None" }],
+				},
+			],
+		};
+	}
+	if (path.endsWith("/mailboxes")) {
+		return {
+			items: [
+				{
+					mailboxId: "mbx-trash",
+					accountId: ACCOUNT,
+					fullPath: "Prullenbak",
+					hierarchyDelimiter: "/",
+					messageCount: 3,
+				},
+			],
+		};
+	}
+	return {};
+};
+
+/** Let the queries and the two writes behind the confirm run to completion. */
+const settle = async (): Promise<void> => {
+	for (let round = 0; round < 8; round += 1) {
+		await act(async () => {
+			await Promise.resolve();
+		});
+	}
+};
+
 afterEach(() => {
 	act(() => root.unmount());
+	globalThis.fetch = originalFetch;
 });
 
 /** A deployment with an identity system and a live session to sign back into. */
@@ -72,23 +141,47 @@ const mount = (options: {
 	outcome: DeleteOutcome;
 	count?: number;
 	isDeleting?: boolean;
+	accountId?: string;
+	trashFolderLabel?: string;
+	staleFolderLabel?: string;
+	trashIsUnconfirmed?: boolean;
 	authProvider?: AuthProvider;
-	onConfirm?: () => void;
+	onConfirm?: (messageIds: string[]) => void;
 }) => {
 	const onConfirm = options.onConfirm ?? (() => undefined);
+	const messageIds = Array.from(
+		{ length: options.count ?? 1 },
+		(_, index) => `msg-${index}`,
+	);
 	act(() =>
 		root.render(
 			createElement(
-				AuthProviderProvider,
-				{ value: options.authProvider ?? noneAuthProvider },
-				createElement(DeleteConfirmDialog, {
-					isOpen: true,
-					count: options.count ?? 1,
-					outcome: options.outcome,
-					isDeleting: options.isDeleting,
-					onConfirm,
-					onCancel: () => undefined,
-				}),
+				I18nextProvider,
+				{ i18n },
+				createElement(
+					QueryClientProvider,
+					{ client: new QueryClient() },
+					createElement(
+						RoleAppointmentPromptProvider,
+						null,
+						createElement(
+							AuthProviderProvider,
+							{ value: options.authProvider ?? noneAuthProvider },
+							createElement(DeleteConfirmDialog, {
+								isOpen: true,
+								messageIds,
+								outcome: options.outcome,
+								accountId: options.accountId,
+								trashFolderLabel: options.trashFolderLabel,
+								staleFolderLabel: options.staleFolderLabel,
+								trashIsUnconfirmed: options.trashIsUnconfirmed,
+								isDeleting: options.isDeleting,
+								onConfirm,
+								onCancel: () => undefined,
+							}),
+						),
+					),
+				),
 			),
 		),
 	);
@@ -98,6 +191,8 @@ const mount = (options: {
 			Array.from(
 				dom.window.document.querySelectorAll<HTMLButtonElement>("button"),
 			).find((b) => b.textContent === label),
+		byLabel: (label: string) =>
+			dom.window.document.querySelector<HTMLElement>(`[aria-label="${label}"]`),
 	};
 };
 
@@ -182,33 +277,120 @@ describe("DeleteConfirmDialog — a read that failed refuses the delete", () =>
 });
 
 /**
- * An account that appoints no Trash is a resolved answer of "none", not a
- * missing one: the server refuses that delete outright (#846) rather than
- * moving anything, so the dialog may not offer a move — and the remedy is the
- * appointment, not the session.
+ * An account that appoints no Trash, or one whose appointed folder is gone, is
+ * a resolved answer: the server refuses that delete outright (#846) rather than
+ * moving anything. The remedy is the appointment, made where the refusal
+ * happened — never a link to Settings the user has to come back from (#887).
  */
-describe("DeleteConfirmDialog — no Trash appointed is not a move", () => {
+describe("DeleteConfirmDialog — a refusal answers itself", () => {
 	it("refuses rather than promising a restore", () => {
-		const view = mount({ outcome: "noTrash", count: 2 });
+		const view = mount({ outcome: "noTrash", count: 2, accountId: "acc-1" });
 		const text = view.text();
-		assert.match(text, /Can.t delete 2 messages/);
-		assert.match(text, /appointed as Trash/);
+		assert.match(text, /Can.t delete 2 messages yet/);
+		assert.match(text, /No folder on this account is set as Trash/);
 		assert.doesNotMatch(text, /Move 2 messages to Trash?/);
 		assert.doesNotMatch(text, /restore them from Trash later/);
 	});
 
-	it("names the screen that fixes it, and cannot reach the delete", () => {
+	it("opens the appointment prompt instead of leaving for Settings", () => {
 		let confirmed = 0;
 		const view = mount({
 			outcome: "noTrash",
+			accountId: "acc-1",
 			onConfirm: () => {
 				confirmed += 1;
 			},
 		});
-		const settings = view.button("Open folder settings");
-		assert.ok(settings, "the remedy the copy names is on screen");
-		assert.equal(settings?.disabled, false, "and it can be pressed");
-		assert.equal(view.button("Move to Trash"), undefined);
-		assert.equal(confirmed, 0);
+		assert.equal(view.button("Open folder settings"), undefined);
+		const pick = view.button("Pick a Trash folder");
+		assert.ok(pick, "the remedy the copy names is on screen");
+		assert.equal(pick?.disabled, false);
+
+		act(() => pick?.click());
+		assert.match(view.text(), /No folder is set as Trash/);
+		assert.equal(confirmed, 0, "the refusal never reaches the delete");
+	});
+
+	it("names the folder that vanished, and repairs it in place", () => {
+		const view = mount({
+			outcome: "staleTrash",
+			count: 2,
+			accountId: "acc-1",
+			staleFolderLabel: "INBOX/Prullenbak",
+		});
+		assert.match(view.text(), /INBOX\/Prullenbak/);
+		const pick = view.button("Pick another folder");
+		assert.ok(pick);
+		act(() => pick?.click());
+		assert.match(view.text(), /The Trash folder you chose is gone/);
+	});
+
+	it("still acts when no single account owns the rows", () => {
+		const confirmed: string[][] = [];
+		const view = mount({
+			outcome: "noTrash",
+			onConfirm: (ids) => confirmed.push(ids),
+		});
+		const pick = view.button("Pick a Trash folder");
+		assert.equal(pick?.disabled, false, "never a control that does nothing");
+		act(() => pick?.click());
+		assert.deepEqual(
+			confirmed,
+			[["msg-0"]],
+			"the server's own 409 names the account",
+		);
+	});
+
+	// The dialog is gone by the time the appointment lands, so the replay cannot
+	// read the caller's pending state — it carries the rows it was about.
+	it("hands the replay the rows the delete was about", async () => {
+		const confirmed: string[][] = [];
+		const view = mount({
+			outcome: "noTrash",
+			count: 3,
+			accountId: ACCOUNT,
+			onConfirm: (ids) => confirmed.push(ids),
+		});
+
+		act(() => view.button("Pick a Trash folder")?.click());
+		await settle();
+		assert.deepEqual(
+			confirmed,
+			[],
+			"nothing is deleted before a folder is set",
+		);
+
+		act(() => view.byLabel("Set Prullenbak, 3 messages, as Trash")?.click());
+		await settle();
+		act(() => view.button("Set as Trash and delete 3 messages")?.click());
+		await settle();
+
+		assert.deepEqual(confirmed, [["msg-0", "msg-1", "msg-2"]]);
+	});
+});
+
+/**
+ * D4a: an expunge inside a Trash reader only matched by name still goes
+ * through — the user asked for these specific rows — but they are told which
+ * folder that is, and that nobody chose it, before it happens.
+ */
+describe("DeleteConfirmDialog — an expunge inside a Trash nobody confirmed", () => {
+	it("keeps today's words for a confirmed Trash", () => {
+		const view = mount({ outcome: "permanent", count: 3 });
+		assert.doesNotMatch(view.text(), /nobody confirmed it/);
+	});
+
+	it("names the folder and says nobody chose it", () => {
+		const view = mount({
+			outcome: "permanent",
+			count: 3,
+			trashFolderLabel: "Deleted Messages",
+			trashIsUnconfirmed: true,
+		});
+		const text = view.text();
+		assert.match(text, /Permanently delete 3 messages\?/);
+		assert.match(text, /They are in Deleted Messages/);
+		assert.match(text, /nobody confirmed it/);
+		assert.equal(view.button("Delete permanently")?.disabled, false);
 	});
 });

package/src/components/mail/DeleteConfirmDialog.tsx

@@ -5,49 +5,85 @@
  * and Flagged — so the wording and the refusal cannot drift apart again the way
  * they did between #845 and #855.
  *
- * Two of the outcomes are not confirmations at all. When the account appoints
- * no Trash the server refuses the delete outright, and when its folder settings
- * could not be read reader cannot say whether a delete moves the mail or erases
- * it. Both refuse: the affirmative control carries the remedy the copy names —
- * folder settings, or signing back in — and the caller's `onConfirm` is never
- * reached. Neither may render as "this folder is not Trash".
+ * Three of the outcomes are not confirmations at all. When the account has no
+ * Trash, or the folder it appointed is gone, the server refuses the delete
+ * outright; when its folder settings could not be read reader cannot say
+ * whether a delete moves the mail or erases it. All three refuse and the
+ * caller's `onConfirm` is never reached directly. The first two are answered
+ * in place — the affirmative control opens the appointment prompt, whose own
+ * confirm appoints the folder and then runs this delete. None of them may
+ * render as "this folder is not Trash".
  */
 import { ConfirmDialog } from "@remit/ui";
 import { useAuthProvider } from "@/auth/provider";
 import { type DeleteOutcome, deleteConfirmationCopy } from "@/lib/format";
-
-/** Where a missing Trash appointment is made — the remedy the copy names. */
-const FOLDER_SETTINGS_PATH = "/settings/folders";
+import { useRoleAppointmentPrompt } from "./RoleAppointmentPromptProvider";
 
 interface DeleteConfirmDialogProps {
 	isOpen: boolean;
-	/** How many messages the pending delete covers. */
-	count: number;
+	/**
+	 * The rows the pending delete covers. Carried rather than counted, because
+	 * an appointment replays this delete after the dialog has closed — reading
+	 * the caller's pending state by then would replay nothing.
+	 */
+	messageIds: readonly string[];
 	outcome: DeleteOutcome;
+	/** The account the appointment would be made on, when the rows share one. */
+	accountId?: string;
+	/** The folder reader files this account's deletes in. */
+	trashFolderLabel?: string;
+	/** The folder the user appointed, now gone from the mail server. */
+	staleFolderLabel?: string;
+	/** That folder is a name match nobody ever confirmed. */
+	trashIsUnconfirmed?: boolean;
 	/** A delete is already in flight, so the confirm cannot be pressed again. */
 	isDeleting?: boolean;
-	onConfirm: () => void;
+	onConfirm: (messageIds: string[]) => void;
 	onCancel: () => void;
 }
 
 export const DeleteConfirmDialog = ({
 	isOpen,
-	count,
+	messageIds,
 	outcome,
+	accountId,
+	trashFolderLabel,
+	staleFolderLabel,
+	trashIsUnconfirmed = false,
 	isDeleting = false,
 	onConfirm,
 	onCancel,
 }: DeleteConfirmDialogProps) => {
 	const { Account } = useAuthProvider();
-	const copy = deleteConfirmationCopy(count, outcome);
+	const { requestAppointment } = useRoleAppointmentPrompt();
+	const count = messageIds.length;
+	const confirm = () => onConfirm([...messageIds]);
+	const copy = deleteConfirmationCopy(count, outcome, {
+		trashFolderLabel,
+		staleFolderLabel,
+		trashIsUnconfirmed,
+	});
 
-	if (outcome === "noTrash") {
+	if (outcome === "noTrash" || outcome === "staleTrash") {
 		return (
 			<ConfirmDialog
 				isOpen={isOpen}
 				{...copy}
 				onConfirm={() => {
-					window.location.assign(FOLDER_SETTINGS_PATH);
+					// With no account to appoint on, the delete is issued anyway and
+					// the server's own 409 opens the prompt naming the account it
+					// refused for. Never a control that does nothing.
+					if (!accountId) return confirm();
+					const replay = [...messageIds];
+					onCancel();
+					requestAppointment({
+						accountId,
+						role: "Trash",
+						reason: outcome === "noTrash" ? "none" : "stale",
+						action: { kind: "delete", count },
+						staleFolderLabel,
+						onAppointed: async () => onConfirm(replay),
+					});
 				}}
 				onCancel={onCancel}
 			/>
@@ -88,7 +124,7 @@ export const DeleteConfirmDialog = ({
 			// The confirm holds while the appointment is still arriving: the answer
 			// is seconds away and it decides which of two dialogs this is.
 			isBusy={isDeleting || outcome === "unknown"}
-			onConfirm={onConfirm}
+			onConfirm={confirm}
 			onCancel={onCancel}
 		/>
 	);

package/src/components/mail/MessageList.tsx

@@ -304,7 +304,11 @@ export const MessageList = ({
 		() => [{ accountId, mailboxId }],
 		[accountId, mailboxId],
 	);
-	const deleteOutcome = useDeleteOutcome(deleteScope);
+	const {
+		outcome: deleteOutcome,
+		trashIsUnconfirmed,
+		staleFolderLabel,
+	} = useDeleteOutcome(deleteScope);
 
 	// Selection state
 	const {
@@ -688,76 +692,75 @@ export const MessageList = ({
 
 	// Confirm handler: run the actual delete, then clear selection and move
 	// focus to a sensible neighbor (the row after the first deleted one).
-	const handleConfirmDelete = useCallback(() => {
-		if (!pendingDelete) return;
-
-		const ids = pendingDelete;
-		if (ids.length === 0) {
-			setPendingDelete(null);
-			return;
-		}
-
-		const deletedSet = new Set(ids);
-		const firstDeletedIndex = threads.findIndex((t) =>
-			deletedSet.has(t.messageId),
-		);
-		// Next surviving row at or after the first deleted row, else the one
-		// before it. Computed against the pre-delete order.
-		let nextFocus: string | undefined;
-		for (let i = firstDeletedIndex + 1; i < threads.length; i++) {
-			if (!deletedSet.has(threads[i].messageId)) {
-				nextFocus = threads[i].messageId;
-				break;
+	const handleConfirmDelete = useCallback(
+		(ids: string[]) => {
+			if (ids.length === 0) {
+				setPendingDelete(null);
+				return;
 			}
-		}
-		if (nextFocus === undefined) {
-			for (let i = firstDeletedIndex - 1; i >= 0; i--) {
+
+			const deletedSet = new Set(ids);
+			const firstDeletedIndex = threads.findIndex((t) =>
+				deletedSet.has(t.messageId),
+			);
+			// Next surviving row at or after the first deleted row, else the one
+			// before it. Computed against the pre-delete order.
+			let nextFocus: string | undefined;
+			for (let i = firstDeletedIndex + 1; i < threads.length; i++) {
 				if (!deletedSet.has(threads[i].messageId)) {
 					nextFocus = threads[i].messageId;
 					break;
 				}
 			}
-		}
+			if (nextFocus === undefined) {
+				for (let i = firstDeletedIndex - 1; i >= 0; i--) {
+					if (!deletedSet.has(threads[i].messageId)) {
+						nextFocus = threads[i].messageId;
+						break;
+					}
+				}
+			}
 
-		onDeleteMessages?.(ids);
-		exitSelection();
-		focusBeforeConfirmRef.current = null;
-		setPendingDelete(null);
+			onDeleteMessages?.(ids);
+			exitSelection();
+			focusBeforeConfirmRef.current = null;
+			setPendingDelete(null);
 
-		if (nextFocus !== undefined) {
-			// Same hand-back as cancelling, aimed at the surviving neighbour
-			// instead: confirming also closes a dialog that held DOM focus.
-			pendingDomFocusRef.current = nextFocus;
-			cursorMovedByPointerRef.current = false;
-			setFocusedMessageId(nextFocus);
-			// Desktop is two-pane: opening the neighbour fills the reading pane
-			// beside the list. On a single-pane mobile layout the same navigation
-			// replaces the list with a full-screen message, so a bulk delete looks
-			// like it opened a random neighbour instead of removing the rows (#202).
-			// Mobile keeps the cursor move but stays on the list.
-			if (isDesktop) {
-				openRow(nextFocus, { replace: true });
+			if (nextFocus !== undefined) {
+				// Same hand-back as cancelling, aimed at the surviving neighbour
+				// instead: confirming also closes a dialog that held DOM focus.
+				pendingDomFocusRef.current = nextFocus;
+				cursorMovedByPointerRef.current = false;
+				setFocusedMessageId(nextFocus);
+				// Desktop is two-pane: opening the neighbour fills the reading pane
+				// beside the list. On a single-pane mobile layout the same navigation
+				// replaces the list with a full-screen message, so a bulk delete looks
+				// like it opened a random neighbour instead of removing the rows (#202).
+				// Mobile keeps the cursor move but stays on the list.
+				if (isDesktop) {
+					openRow(nextFocus, { replace: true });
+				}
 			}
-		}
 
-		// Mobile keeps the list up, so it needs its own signal the delete landed
-		// (#202). On desktop the rows leaving the list beside the reading pane is
-		// signal enough.
-		if (!isDesktop) {
-			setCompletionBanner(
-				bulkActionCompletionText("delete", ids.length, deleteOutcome),
-			);
-		}
-	}, [
-		pendingDelete,
-		threads,
-		onDeleteMessages,
-		exitSelection,
-		openRow,
-		isDesktop,
-		setFocusedMessageId,
-		deleteOutcome,
-	]);
+			// Mobile keeps the list up, so it needs its own signal the delete landed
+			// (#202). On desktop the rows leaving the list beside the reading pane is
+			// signal enough.
+			if (!isDesktop) {
+				setCompletionBanner(
+					bulkActionCompletionText("delete", ids.length, deleteOutcome),
+				);
+			}
+		},
+		[
+			threads,
+			onDeleteMessages,
+			exitSelection,
+			openRow,
+			isDesktop,
+			setFocusedMessageId,
+			deleteOutcome,
+		],
+	);
 
 	// Every way out of the confirmation that isn't the delete — Escape, Cancel,
 	// the backdrop — arrives here, so this is the one place the keyboard has to
@@ -1343,8 +1346,14 @@ export const MessageList = ({
 			/>
 			<DeleteConfirmDialog
 				isOpen={pendingDelete !== null}
-				count={pendingDelete?.length ?? 0}
+				messageIds={pendingDelete ?? []}
 				outcome={deleteOutcome}
+				accountId={accountId}
+				// Every row here is filed in the open mailbox, so on an expunge that
+				// mailbox is the Trash the copy has to name.
+				trashFolderLabel={listTitle}
+				staleFolderLabel={staleFolderLabel}
+				trashIsUnconfirmed={trashIsUnconfirmed}
 				isDeleting={isDeleting}
 				onConfirm={handleConfirmDelete}
 				onCancel={handleCancelDelete}