@remit/web-client 0.0.190 → 0.0.191

package/src/components/mail/RoleAppointmentPromptProvider.render.test.ts

@@ -0,0 +1,292 @@
+/**
+ * The ceremony behind one press (#887): appoint the folder, wait for the 200,
+ * invalidate and await `/config`, then re-issue the action that was refused.
+ * Driven against the real fetch seam, so the order the requests actually leave
+ * in is what is pinned — D16 item 1 exists because `useTrashByAccount` reads at
+ * `staleTime: Infinity` and would otherwise word the retry from the answer the
+ * appointment just replaced.
+ */
+import assert from "node:assert/strict";
+import { afterEach, beforeEach, describe, it } from "node:test";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, mockFetch } from "../../test-support/http";
+import {
+	type AppointmentRequest,
+	RoleAppointmentPromptProvider,
+	useRoleAppointmentPrompt,
+} from "./RoleAppointmentPromptProvider";
+
+const ACCOUNT = "acc-1";
+const OTHER_ACCOUNT = "acc-2";
+const PICK_TRASH = "Set Prullenbak, 3 messages, as Trash";
+const CONFIRM = "Set as Trash and delete 2 messages";
+
+let harness: DomHarness | undefined;
+let http: HttpMock;
+
+const CONFIG = {
+	accounts: [ACCOUNT, OTHER_ACCOUNT].map((accountId) => ({
+		accountId,
+		email: `${accountId}@example.com`,
+		folderAppointments: [{ role: "Trash", source: "None" }],
+	})),
+};
+
+const MAILBOXES = {
+	items: [
+		{
+			mailboxId: "mbx-inbox",
+			accountId: ACCOUNT,
+			fullPath: "INBOX",
+			hierarchyDelimiter: "/",
+			messageCount: 12,
+		},
+		{
+			mailboxId: "mbx-trash",
+			accountId: ACCOUNT,
+			fullPath: "Prullenbak",
+			hierarchyDelimiter: "/",
+			messageCount: 3,
+		},
+	],
+};
+
+/** Everything answers; a test that needs a failure re-mocks the seam. */
+const respond = (path: string): unknown => {
+	if (path.endsWith("/config")) return CONFIG;
+	if (path.endsWith("/mailboxes")) return MAILBOXES;
+	return {};
+};
+
+const mountProvider = (): ((next: AppointmentRequest) => void) => {
+	let request: ((next: AppointmentRequest) => void) | undefined;
+	const Probe = () => {
+		request = useRoleAppointmentPrompt().requestAppointment;
+		return null;
+	};
+	harness = createDomHarness();
+	harness.render(
+		createElement(
+			QueryClientProvider,
+			{ client: harness.queryClient },
+			createElement(RoleAppointmentPromptProvider, null, createElement(Probe)),
+		),
+	);
+	if (!request) throw new Error("the provider did not render");
+	return request;
+};
+
+/**
+ * Two writes, a query invalidation and the refetch it waits on all sit behind
+ * one press, and each hop is a real fetch. Rounds are bounded and the loop
+ * stops as soon as `done` holds, so a slow machine costs turns, never a pass.
+ */
+const settle = async (done: () => boolean = () => false): Promise<void> => {
+	if (!harness) throw new Error("nothing mounted");
+	for (let round = 0; round < 40; round += 1) {
+		await harness.flush();
+		await harness.wait(0);
+		if (done()) return;
+	}
+};
+
+const press = async (label: string, done?: () => boolean): Promise<void> => {
+	if (!harness) throw new Error("nothing mounted");
+	harness.click(harness.byText("button", label));
+	await settle(done);
+};
+
+const refusedDelete = (
+	over: Partial<AppointmentRequest> = {},
+): AppointmentRequest => ({
+	accountId: ACCOUNT,
+	role: "Trash",
+	reason: "none",
+	action: { kind: "delete", count: 2 },
+	onAppointed: async () => {},
+	...over,
+});
+
+const onScreen = (label: string): boolean =>
+	(harness?.queryAll("button") ?? []).some(
+		(button) => button.textContent === label,
+	);
+
+/** Pick the Trash folder in the picker, then press the confirm. */
+const confirmWith = async (done?: () => boolean): Promise<void> => {
+	if (!harness) throw new Error("nothing mounted");
+	harness.click(harness.byLabel(PICK_TRASH));
+	await settle(() => onScreen(CONFIRM));
+	await press(CONFIRM, done);
+};
+
+beforeEach(() => {
+	http = mockFetch((call) => respond(call.path));
+});
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http.restore();
+});
+
+describe("the appointment ceremony", () => {
+	it("asks nothing of the server until an action is refused", async () => {
+		mountProvider();
+		await settle();
+		assert.deepEqual(http.calls, []);
+	});
+
+	it("puts the account's folders, with their counts, in the picker", async () => {
+		const request = mountProvider();
+		request(refusedDelete());
+		await settle();
+
+		assert.match(harness?.text() ?? "", /No folder is set as Trash/);
+		assert.ok(
+			harness?.query(`[aria-label="${PICK_TRASH}"]`),
+			"the count is part of the row's own accessible name",
+		);
+	});
+
+	it("names the account only where the instance holds more than one", async () => {
+		const request = mountProvider();
+		request(refusedDelete());
+		await settle();
+		assert.match(harness?.text() ?? "", /acc-1@example\.com/);
+	});
+
+	it("appoints, re-reads /config, and only then re-issues the action", async () => {
+		const order: string[] = [];
+		http.restore();
+		http = mockFetch((call) => {
+			order.push(`${call.method} ${call.path}`);
+			return respond(call.path);
+		});
+
+		const request = mountProvider();
+		request(
+			refusedDelete({
+				onAppointed: async () => {
+					order.push("replay");
+				},
+			}),
+		);
+		await settle();
+		await confirmWith(() => order.includes("replay"));
+
+		const appointAt = order.findIndex((entry) =>
+			entry.startsWith(`PUT /accounts/${ACCOUNT}/folder-roles/Trash`),
+		);
+		const replayAt = order.indexOf("replay");
+		const refetchAt = order.findIndex(
+			(entry, index) => index > appointAt && entry.endsWith("/config"),
+		);
+
+		assert.ok(appointAt >= 0, "the appointment is written");
+		assert.ok(refetchAt > appointAt, "/config is re-read after the 200");
+		assert.ok(
+			replayAt > refetchAt,
+			"the action is re-issued only once the fresh answer is in",
+		);
+	});
+
+	it("takes the ceremony down once the replay has run", async () => {
+		const request = mountProvider();
+		request(refusedDelete());
+		await settle();
+		await confirmWith(
+			() => !(harness?.text() ?? "").includes("No folder is set as Trash"),
+		);
+
+		assert.doesNotMatch(harness?.text() ?? "", /No folder is set as Trash/);
+	});
+
+	it("keeps the ceremony up, with the selection, when the appointment fails", async () => {
+		http.restore();
+		http = mockFetch((call) => {
+			if (!call.path.includes("/folder-roles/")) return respond(call.path);
+			return new Response(
+				JSON.stringify({
+					code: "mailbox_not_settled",
+					message: "not settled",
+					details: { mailboxId: "mbx-trash", syncStatus: "pending" },
+				}),
+				{ status: 409, headers: { "content-type": "application/json" } },
+			);
+		});
+
+		let replayed = 0;
+		const request = mountProvider();
+		request(
+			refusedDelete({
+				onAppointed: async () => {
+					replayed += 1;
+				},
+			}),
+		);
+		await settle();
+		await confirmWith();
+
+		assert.equal(replayed, 0, "nothing is re-issued over a failed appointment");
+		assert.match(
+			harness?.text() ?? "",
+			/still being created on the mail server/,
+			"a wait is worded as a wait, not as a retry",
+		);
+		assert.ok(
+			onScreen(CONFIRM),
+			"the confirm is still pressable — retry in place",
+		);
+	});
+
+	/**
+	 * The blocking case. A selection spanning two accounts that both lack a
+	 * Trash is refused a second time the moment the replay runs, and that
+	 * refusal raises its own prompt. Tearing the finished ceremony down
+	 * unconditionally would destroy it in the same tick, leaving the rows rolled
+	 * back and no account of why.
+	 */
+	it("leaves a prompt the replay raised alone", async () => {
+		const request = mountProvider();
+		request(
+			refusedDelete({
+				onAppointed: async () => {
+					request(
+						refusedDelete({
+							accountId: OTHER_ACCOUNT,
+							reason: "stale",
+							staleFolderLabel: "INBOX/Weg",
+						}),
+					);
+				},
+			}),
+		);
+		await settle();
+		await confirmWith(() =>
+			(harness?.text() ?? "").includes("The Trash folder you chose is gone"),
+		);
+
+		assert.match(
+			harness?.text() ?? "",
+			/The Trash folder you chose is gone/,
+			"the second refusal is on screen, not swallowed",
+		);
+		assert.match(harness?.text() ?? "", /INBOX\/Weg/);
+	});
+
+	it("closes on cancel, and writes nothing", async () => {
+		const request = mountProvider();
+		request(refusedDelete());
+		await settle();
+		await press("Cancel");
+
+		assert.doesNotMatch(harness?.text() ?? "", /No folder is set as Trash/);
+		assert.deepEqual(
+			http.calls.filter((call) => call.path.includes("/folder-roles/")),
+			[],
+		);
+	});
+});

package/src/components/mail/RoleAppointmentPromptProvider.tsx

@@ -0,0 +1,246 @@
+import {
+	configOperationsGetConfigOptions,
+	configOperationsGetConfigQueryKey,
+	folderRoleOperationsAppointFolderRoleMutation,
+	mailboxOperationsListMailboxesOptions,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapCanonicalMailboxRole } from "@remit/api-http-client/types.gen.ts";
+import {
+	type PromptAction,
+	type PromptPhase,
+	type PromptReason,
+	RoleAppointmentPrompt,
+} from "@remit/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { isMailboxNotSettledRefusal } from "@/components/ui/folder-role-refusal";
+import { useCreateMailbox } from "@/hooks/useCreateMailbox";
+import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";
+import { buildMailboxRoleMap, labelForMailbox } from "@/lib/folder-roles";
+import { buildMoveOptions, folderDelimiter } from "@/lib/move-options";
+
+export interface AppointmentRequest {
+	accountId: string;
+	role: RemitImapCanonicalMailboxRole;
+	/** From the refusal that opened this, never re-derived from live state. */
+	reason: PromptReason;
+	action: PromptAction;
+	/** `unconfirmed`: the folder reader guessed. Filled from `/config` if absent. */
+	trashFolderLabel?: string;
+	/** `stale`: the folder that vanished. Filled from `/config` if absent. */
+	staleFolderLabel?: string;
+	guessedMailboxId?: string;
+	/**
+	 * Re-issues the caller's own action once the folder is appointed. The caller
+	 * owns it so its optimistic and cache machinery is not duplicated here — and
+	 * so a chunked run replays the whole original selection, not the chunk the
+	 * server happened to refuse.
+	 */
+	onAppointed: () => Promise<void>;
+}
+
+interface RoleAppointmentPromptContextValue {
+	requestAppointment: (request: AppointmentRequest) => void;
+}
+
+const RoleAppointmentPromptContext = createContext<
+	RoleAppointmentPromptContextValue | undefined
+>(undefined);
+
+/** The appointment write failed, so nothing after it may run. */
+const APPOINT_FAILED = Symbol("appoint-failed");
+
+/**
+ * The appointment ceremony, mounted once and reached from either entry path.
+ * It owns both writes' order (D16 item 1): appoint, wait for the 200,
+ * invalidate and await `/config`, then re-issue the action that was refused.
+ */
+export const RoleAppointmentPromptProvider = ({
+	children,
+}: {
+	children: ReactNode;
+}) => {
+	const queryClient = useQueryClient();
+	const translator = useFolderLabelTranslator();
+	const [request, setRequest] = useState<AppointmentRequest | null>(null);
+	const [selectedId, setSelectedId] = useState<string>();
+	const [phase, setPhase] = useState<PromptPhase>({ kind: "choosing" });
+
+	const accountId = request?.accountId;
+	// Nothing is asked of the server until an action is actually refused: this
+	// provider is mounted at the root, so an ungated read would put a request
+	// behind every screen that never opens a prompt.
+	const { data: config } = useQuery({
+		...configOperationsGetConfigOptions(),
+		staleTime: Infinity,
+		enabled: !!accountId,
+	});
+	const { data: mailboxData } = useQuery({
+		...mailboxOperationsListMailboxesOptions({
+			path: { accountId: accountId ?? "" },
+		}),
+		enabled: !!accountId,
+	});
+	const { createFolderIn } = useCreateMailbox(accountId);
+	const appointMutation = useMutation(
+		folderRoleOperationsAppointFolderRoleMutation(),
+	);
+
+	const account = config?.accounts.find((one) => one.accountId === accountId);
+	const mailboxes = useMemo(() => mailboxData?.items ?? [], [mailboxData]);
+	const appointments = useMemo(
+		() => account?.folderAppointments ?? [],
+		[account],
+	);
+
+	const folders = useMemo(
+		() =>
+			buildMoveOptions({
+				mailboxes,
+				folderAppointments: appointments,
+				translator,
+			}),
+		[mailboxes, appointments, translator],
+	);
+
+	const trash = appointments.find(
+		(appointment) => appointment.role === request?.role,
+	);
+	const guessedMailboxId = request?.guessedMailboxId ?? trash?.mailboxId;
+	const guessed = mailboxes.find(
+		(mailbox) => mailbox.mailboxId === guessedMailboxId,
+	);
+	const trashFolderLabel =
+		request?.trashFolderLabel ??
+		(guessed
+			? labelForMailbox(
+					guessed,
+					buildMailboxRoleMap(appointments).get(guessed.mailboxId),
+					translator,
+				)
+			: undefined);
+
+	// Written synchronously so a refusal raised during the replay is already the
+	// live request by the time the finished ceremony tries to tear itself down.
+	const liveRequest = useRef<AppointmentRequest | null>(null);
+
+	const close = useCallback(() => {
+		liveRequest.current = null;
+		setRequest(null);
+		setSelectedId(undefined);
+		setPhase({ kind: "choosing" });
+	}, []);
+
+	const requestAppointment = useCallback((next: AppointmentRequest) => {
+		liveRequest.current = next;
+		setRequest(next);
+		setPhase({ kind: "choosing" });
+		// Only a confirmation of an existing guess starts with something chosen:
+		// the common case is one tap, and the tree is there to correct it.
+		setSelectedId(
+			next.reason === "unconfirmed" ? next.guessedMailboxId : undefined,
+		);
+	}, []);
+
+	/**
+	 * Tear the ceremony down only if it is still the one on screen. The replay
+	 * can be refused a second time — a selection spanning two accounts that both
+	 * lack a Trash — and that refusal opens its own prompt before this one
+	 * finishes. Closing unconditionally would destroy it in the same tick, with
+	 * the rows rolled back and no account of why.
+	 */
+	const closeFinished = useCallback(
+		(finished: AppointmentRequest) => {
+			if (liveRequest.current !== finished) return;
+			close();
+		},
+		[close],
+	);
+
+	const handleConfirm = useCallback(
+		(mailboxId: string) => {
+			if (!request) return;
+			setPhase({ kind: "appointing" });
+			void appointMutation
+				.mutateAsync({
+					path: { accountId: request.accountId, role: request.role },
+					body: { mailboxId },
+				})
+				.catch((error: unknown) => {
+					setPhase({
+						kind: "appoint-failed",
+						cause: isMailboxNotSettledRefusal(error)
+							? "mailbox-pending"
+							: "generic",
+					});
+					return APPOINT_FAILED;
+				})
+				.then(async (result) => {
+					if (result === APPOINT_FAILED) return;
+					await queryClient.invalidateQueries({
+						queryKey: configOperationsGetConfigQueryKey(),
+					});
+					setPhase({ kind: "acting" });
+					await request.onAppointed();
+					closeFinished(request);
+				})
+				// The replay is the caller's mutation and banners its own failure;
+				// leaving the ceremony up over it would ask for the folder twice.
+				.catch(() => closeFinished(request));
+		},
+		[request, appointMutation, queryClient, closeFinished],
+	);
+
+	const value = useMemo(() => ({ requestAppointment }), [requestAppointment]);
+
+	return (
+		<RoleAppointmentPromptContext.Provider value={value}>
+			{children}
+			{request && (
+				<RoleAppointmentPrompt
+					open
+					reason={request.reason}
+					action={request.action}
+					folders={folders}
+					delimiter={folderDelimiter(mailboxes)}
+					trashFolderLabel={trashFolderLabel}
+					staleFolderLabel={
+						request.staleFolderLabel ?? trash?.staleAppointmentPath
+					}
+					accountEmail={
+						(config?.accounts.length ?? 0) > 1 ? account?.email : undefined
+					}
+					phase={phase}
+					selectedId={selectedId}
+					onSelect={setSelectedId}
+					onCreateFolder={createFolderIn}
+					onConfirm={handleConfirm}
+					onCancel={close}
+				/>
+			)}
+		</RoleAppointmentPromptContext.Provider>
+	);
+};
+
+/**
+ * Opens the appointment ceremony for a refused action. The caller keeps the
+ * replay, so the action that was stopped is the action that runs.
+ */
+export const useRoleAppointmentPrompt =
+	(): RoleAppointmentPromptContextValue => {
+		const context = useContext(RoleAppointmentPromptContext);
+		if (!context) {
+			throw new Error(
+				"useRoleAppointmentPrompt must be used within a RoleAppointmentPromptProvider",
+			);
+		}
+		return context;
+	};

package/src/components/mail/ThreadListInteraction.test.ts

@@ -23,6 +23,7 @@ import { AuthProviderProvider, noneAuthProvider } from "@/auth/provider";
 import { ErrorBannerProvider } from "@/components/ui/ErrorBannerProvider";
 import { makeAccount, makeConfig } from "@/test-support/fixtures";
 import type { MessageListCommands } from "./MessageList";
+import { RoleAppointmentPromptProvider } from "./RoleAppointmentPromptProvider";
 import {
 	ThreadListInteraction,
 	useThreadListSelection,
@@ -137,16 +138,20 @@ function mountList(options: {
 					ErrorBannerProvider,
 					null,
 					createElement(
-						ThreadListInteraction,
-						{
-							selectedMessageId: undefined,
-							rows,
-							onOpen: () => undefined,
-							onDeleteMessages,
-							onSelectionVerb,
-							commandsRef,
-						},
-						...rowElements(ids),
+						RoleAppointmentPromptProvider,
+						null,
+						createElement(
+							ThreadListInteraction,
+							{
+								selectedMessageId: undefined,
+								rows,
+								onOpen: () => undefined,
+								onDeleteMessages,
+								onSelectionVerb,
+								commandsRef,
+							},
+							...rowElements(ids),
+						),
 					),
 				),
 			),
@@ -469,17 +474,21 @@ function mountSelectableList(initialIds: string[]) {
 					ErrorBannerProvider,
 					null,
 					createElement(
-						ThreadListInteraction,
-						{
-							selectedMessageId: undefined,
-							rows: initialIds.map((id) => row(id)),
-							onOpen: () => undefined,
-							onDeleteMessages: () => undefined,
-							onSelectionVerb: () => undefined,
-							commandsRef,
-						},
-						...rowElements(ids),
-						createElement(Probe, { key: "probe" }),
+						RoleAppointmentPromptProvider,
+						null,
+						createElement(
+							ThreadListInteraction,
+							{
+								selectedMessageId: undefined,
+								rows: initialIds.map((id) => row(id)),
+								onOpen: () => undefined,
+								onDeleteMessages: () => undefined,
+								onSelectionVerb: () => undefined,
+								commandsRef,
+							},
+							...rowElements(ids),
+							createElement(Probe, { key: "probe" }),
+						),
 					),
 				),
 			),

package/src/components/mail/ThreadListInteraction.tsx

@@ -285,7 +285,11 @@ export function ThreadListInteraction({
 	const [pendingDelete, setPendingDelete] = useState<PendingDelete | null>(
 		null,
 	);
-	const deleteOutcome = useDeleteOutcome(pendingDelete?.targets ?? NO_TARGETS);
+	const {
+		outcome: deleteOutcome,
+		trashIsUnconfirmed,
+		staleFolderLabel,
+	} = useDeleteOutcome(pendingDelete?.targets ?? NO_TARGETS);
 
 	// A verb, routed the same way the bar routes its own (#477 1.4, #508). Over a
 	// selection every verb opens the wizard, so the keyboard cannot reach a bulk
@@ -335,12 +339,15 @@ export function ThreadListInteraction({
 		],
 	);
 
-	const confirmDelete = useCallback(() => {
-		if (pendingDelete === null) return;
-		onDeleteMessages(pendingDelete.ids);
-		setPendingDelete(null);
-		exitSelection();
-	}, [pendingDelete, onDeleteMessages, exitSelection]);
+	const confirmDelete = useCallback(
+		(ids: string[]) => {
+			if (ids.length === 0) return;
+			onDeleteMessages(ids);
+			setPendingDelete(null);
+			exitSelection();
+		},
+		[onDeleteMessages, exitSelection],
+	);
 
 	const cancelDelete = useCallback(() => setPendingDelete(null), []);
 
@@ -471,8 +478,11 @@ export function ThreadListInteraction({
 			</div>
 			<DeleteConfirmDialog
 				isOpen={confirmOpen}
-				count={pendingDelete?.ids.length ?? 0}
+				messageIds={pendingDelete?.ids ?? []}
 				outcome={deleteOutcome}
+				accountId={pendingDelete?.targets[0]?.accountId}
+				staleFolderLabel={staleFolderLabel}
+				trashIsUnconfirmed={trashIsUnconfirmed}
 				isDeleting={isDeleting}
 				onConfirm={confirmDelete}
 				onCancel={cancelDelete}