@remit/web-client 0.0.187 → 0.0.189

package/src/components/mail/intelligence-shortcut-surface.render.test.ts

@@ -0,0 +1,343 @@
+/**
+ * The mailbox's intelligence keys act on the surface the width has (#840).
+ *
+ * `i` and `b` are registered by the pane provider, which sits above the shell
+ * and so cannot see the rail's own width gate. Both reached for the rail's
+ * toggle directly, and below 1280 that wrote `#intelligence` into the address
+ * with no rail mounted to render it — a panel the address names and nothing
+ * answers (`docs/architecture/url-state.md`, R6). The drawer is the surface at
+ * those widths, and it is what the toolbar's own control already used.
+ *
+ * Mounted in the real `AppShellSlotted` at all three tiers, with the `/mail`
+ * layout's binding between the fragment and the rail: which panes a width has
+ * is the shell's own answer here, and what the address holds is the router's.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { AppShellSlotted } from "@remit/ui";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { createElement, type ReactNode, useCallback } from "react";
+import { ComposeProvider } from "@/components/compose/ComposeProvider";
+import { MailContext, type MailContextValue } from "@/lib/mail-context";
+import { EMPTY_RESULT_FOLDER_INDEX } from "@/lib/result-folder";
+import { useOpenPanels, useOpenThreadPath, useSetOpenPanels } from "@/routing";
+import {
+	createDomHarness,
+	type DomHarness,
+	type DomOptions,
+} from "@/test-support/dom";
+import { makeThreadMessage } from "@/test-support/fixtures";
+import { type HttpMock, mockFetch } from "@/test-support/http";
+import {
+	describedMessage,
+	intelligenceDrawer,
+	MESSAGE_ID,
+	settle,
+	THREAD_ID,
+} from "@/test-support/intelligence-surface";
+import { MailboxPane } from "./MailboxPane";
+
+/** Below the rail's 1280px gate, above the reading pane's 1024px one. */
+const TWO_PANE_WIDTH = 1100;
+/** Wide enough for the rail, which is where the fragment raises it. */
+const RAIL_WIDTH = 1400;
+/** One pane, where the list route mounts its phone view instead of the slots. */
+const PHONE_WIDTH = 420;
+
+const MAILBOX_ID = "mailbox-1";
+const MESSAGE_PATH = `/mail/${MAILBOX_ID}/${THREAD_ID}/${MESSAGE_ID}`;
+
+/**
+ * No DKIM mismatch: the auto-open raises the rail on its own where the rail
+ * fits, which would put `#intelligence` in the address before any key is
+ * pressed.
+ */
+const row = makeThreadMessage({
+	messageId: MESSAGE_ID,
+	threadId: THREAD_ID,
+	subject: "Your parcel could not be delivered",
+	fromName: "Mondial Relay",
+	fromEmail: "delivery.notice@gmail.example",
+});
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+/**
+ * What `routes/mail.tsx` binds: the rail's open state is the fragment, and the
+ * toggle rewrites the fragment. The device preference is left out — nothing
+ * here is about the tier the address is silent on.
+ */
+function MailLayout({ children }: { children: ReactNode }) {
+	const openPanels = useOpenPanels();
+	const setOpenPanels = useSetOpenPanels();
+	const intelligenceOpen = openPanels.includes("intelligence");
+	const onToggleIntelligence = useCallback(() => {
+		setOpenPanels(intelligenceOpen ? [] : ["intelligence"]);
+	}, [intelligenceOpen, setOpenPanels]);
+
+	const value: MailContextValue = {
+		accounts: [],
+		mailboxNameIndex: new Map(),
+		accountNameIndex: new Map(),
+		resultFolderIndex: EMPTY_RESULT_FOLDER_INDEX,
+		searchQuery: "",
+		searchInput: "",
+		searchViewKey: "",
+		onSearchChange: () => {},
+		onSearchClear: () => {},
+		onSearchClearQuery: () => {},
+		intelligenceOpen,
+		onToggleIntelligence,
+	};
+	return createElement(MailContext.Provider, { value }, children);
+}
+
+/**
+ * The shell as `MailShell` mounts it: one pane carrying the phone view below
+ * the reading boundary, the slots above it, and the rail's visibility taken
+ * from the address the same way the layout takes it.
+ */
+function Shell({ width }: { width: number }) {
+	const intelligenceOpen = useOpenPanels().includes("intelligence");
+	if (width < 1024) {
+		return createElement(AppShellSlotted, {
+			initialWidth: width,
+			nav: null,
+			list: createElement(MailboxPane.Phone),
+		});
+	}
+	return createElement(AppShellSlotted, {
+		initialWidth: width,
+		nav: null,
+		list: null,
+		reading: createElement(MailboxPane.Reading),
+		intelligence: createElement(MailboxPane.Intelligence),
+		intelligenceOpen,
+	});
+}
+
+const testRouter = (width: number, href: string): AnyRouter => {
+	const rootRoute = createRootRoute({
+		component: () =>
+			createElement(
+				ComposeProvider,
+				null,
+				createElement(MailLayout, {
+					// biome-ignore lint/correctness/noChildrenProp: no JSX in a `.ts` test, and createElement's variadic children do not satisfy a required prop
+					children: createElement(Outlet),
+				}),
+			),
+	});
+	const mailRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail",
+		validateSearch: (search: Record<string, unknown>) => search,
+		component: Outlet,
+	});
+	const mailboxRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "/$mailboxId",
+		component: () =>
+			createElement(MailboxPane, {
+				mailboxId: MAILBOX_ID,
+				thread: useOpenThreadPath(),
+				// biome-ignore lint/correctness/noChildrenProp: no JSX in a `.ts` test, and createElement's variadic children do not satisfy a required prop
+				children: createElement(Outlet),
+			}),
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => mailboxRoute,
+		path: "$threadId",
+		component: Outlet,
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: () => createElement(Shell, { width }),
+	});
+	const routeTree = rootRoute.addChildren([
+		mailRoute.addChildren([
+			mailboxRoute.addChildren([threadRoute.addChildren([messageRoute])]),
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: [href] }),
+	}) as unknown as AnyRouter;
+};
+
+const mountAt = async (
+	width: number,
+	options: DomOptions = {},
+	href: string = MESSAGE_PATH,
+): Promise<[DomHarness, AnyRouter]> => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/config")) return { accounts: [] };
+		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
+			return { items: [row] };
+		}
+		if (call.path.includes("/messages/")) return describedMessage;
+		if (call.path.includes("/threads")) return { items: [row] };
+		return { items: [] };
+	});
+
+	const router = testRouter(width, href);
+	await router.load();
+	const mounted = createDomHarness({ viewportWidth: width, ...options });
+	harness = mounted;
+	mounted.renderApp(createElement(RouterProvider, { router }));
+	await settle(mounted);
+	return [mounted, router];
+};
+
+const press = async (mounted: DomHarness, key: string): Promise<void> => {
+	mounted.dispatch(
+		mounted.window,
+		new mounted.window.KeyboardEvent("keydown", { key, bubbles: true }),
+	);
+	await settle(mounted);
+};
+
+/**
+ * The rail: the intelligence panel mounted in the shell's own row rather than
+ * inside the drawer, which puts the same panel behind a scrim.
+ */
+const rail = (mounted: DomHarness): HTMLElement | null => {
+	const pane = mounted.query("aside");
+	if (!pane) return null;
+	return pane.closest('[role="dialog"]') ? null : pane;
+};
+
+describe("the intelligence keys reach the surface the width has (#840)", () => {
+	for (const [tier, width, options] of [
+		["between the reading pane and the rail", TWO_PANE_WIDTH, {}],
+		[
+			"on the phone",
+			PHONE_WIDTH,
+			{ pointer: "coarse", orientation: "portrait" } as DomOptions,
+		],
+	] as const) {
+		it(`${tier}, i opens the drawer and leaves the address alone`, async () => {
+			const [mounted, router] = await mountAt(width, options);
+
+			await press(mounted, "i");
+
+			assert.ok(intelligenceDrawer(mounted), "pressing i opened nothing");
+			assert.equal(
+				router.state.location.hash,
+				"",
+				"the address named a panel this width cannot render",
+			);
+		});
+
+		it(`${tier}, a second i puts the drawer away`, async () => {
+			const [mounted] = await mountAt(width, options);
+
+			await press(mounted, "i");
+			assert.ok(intelligenceDrawer(mounted), "pressing i opened nothing");
+
+			await press(mounted, "i");
+			assert.equal(
+				intelligenceDrawer(mounted),
+				null,
+				"the second press left it up",
+			);
+		});
+
+		it(`${tier}, b reaches block sender through the same drawer`, async () => {
+			const [mounted, router] = await mountAt(width, options);
+
+			await press(mounted, "b");
+
+			assert.ok(intelligenceDrawer(mounted), "pressing b opened nothing");
+			assert.equal(
+				router.state.location.hash,
+				"",
+				"the address named a panel this width cannot render",
+			);
+		});
+	}
+
+	it("still writes the fragment where the rail is the surface", async () => {
+		const [mounted, router] = await mountAt(RAIL_WIDTH);
+
+		await press(mounted, "i");
+
+		assert.equal(
+			router.state.location.hash,
+			"intelligence",
+			"the rail's own tier stopped writing the fragment",
+		);
+		assert.equal(
+			intelligenceDrawer(mounted),
+			null,
+			"the drawer came up where the rail is the surface",
+		);
+	});
+
+	it("writes the fragment for block sender where the rail is the surface", async () => {
+		const [mounted, router] = await mountAt(RAIL_WIDTH);
+
+		await press(mounted, "b");
+
+		assert.equal(router.state.location.hash, "intelligence");
+		assert.equal(
+			intelligenceDrawer(mounted),
+			null,
+			"the drawer came up where the rail is the surface",
+		);
+	});
+});
+
+/**
+ * What the fragment is worth at each width, on a cold load. The rail is the one
+ * renderer the name has, which is why the keys above must not write the name
+ * anywhere else.
+ */
+describe("#intelligence names a renderer only where the rail fits", () => {
+	it("mounts the rail where the address carries it and the width has room", async () => {
+		const [mounted] = await mountAt(
+			RAIL_WIDTH,
+			{},
+			`${MESSAGE_PATH}#intelligence`,
+		);
+
+		assert.ok(rail(mounted), "the fragment raised no rail");
+	});
+
+	it("mounts nothing for the same address below the rail's width", async () => {
+		const [mounted] = await mountAt(
+			TWO_PANE_WIDTH,
+			{},
+			`${MESSAGE_PATH}#intelligence`,
+		);
+
+		assert.equal(rail(mounted), null, "a rail rendered where none fits");
+		assert.equal(
+			intelligenceDrawer(mounted),
+			null,
+			"the fragment raised the drawer, which belongs to the thread",
+		);
+	});
+});

package/src/components/mail/intelligence-surface-reach.render.test.ts

@@ -32,15 +32,19 @@ import { type OpenThreadPath, useOpenThreadPath } from "@/routing";
 import { createDomHarness, type DomHarness } from "@/test-support/dom";
 import { makeThreadMessage } from "@/test-support/fixtures";
 import { type HttpMock, mockFetch } from "@/test-support/http";
+import {
+	describedMessage,
+	intelligenceDrawer,
+	MESSAGE_ID,
+	settle,
+	THREAD_ID,
+} from "@/test-support/intelligence-surface";
 import { BriefPane } from "./BriefPane";
 import { FlaggedPane } from "./FlaggedPane";
 
 /** Below the rail's 1280px gate, above the reading pane's 1024px one. */
 const TWO_PANE_WIDTH = 1100;
 
-const THREAD_ID = "thread-1";
-const MESSAGE_ID = "msg-1";
-
 const SHOW_INTELLIGENCE = "Show intelligence sidebar";
 const HIDE_INTELLIGENCE = "Hide intelligence sidebar";
 
@@ -60,24 +64,6 @@ const row = makeThreadMessage({
 	},
 });
 
-/** What the reading pane reads each message's own headers and body from. */
-const describedMessage = {
-	messageId: MESSAGE_ID,
-	envelope: {
-		from: [
-			{
-				addressId: "addr-1",
-				name: "Mondial Relay",
-				email: "delivery.notice@gmail.example",
-			},
-		],
-		to: [],
-		cc: [],
-		bcc: [],
-	},
-	bodyParts: [],
-};
-
 let harness: DomHarness | undefined;
 let http: HttpMock | undefined;
 
@@ -197,15 +183,6 @@ const mount = async (pane: PaneUnderTest): Promise<DomHarness> => {
 	return mounted;
 };
 
-const settle = async (mounted: DomHarness): Promise<void> => {
-	await mounted.flush();
-	await mounted.wait(20);
-	await mounted.flush();
-};
-
-const drawer = (mounted: DomHarness): HTMLElement | null =>
-	mounted.query('[role="dialog"][aria-label="Message details"]');
-
 describe("intelligence is reachable wherever the reading pane mounts (#817)", () => {
 	for (const pane of panes) {
 		it(`${pane.name} offers a live toolbar control below the rail's width`, async () => {
@@ -221,7 +198,7 @@ describe("intelligence is reachable wherever the reading pane mounts (#817)", ()
 			mounted.click(toggle);
 			await settle(mounted);
 
-			assert.ok(drawer(mounted), "pressing it opened nothing");
+			assert.ok(intelligenceDrawer(mounted), "pressing it opened nothing");
 			assert.ok(
 				mounted.query(`[aria-label="${HIDE_INTELLIGENCE}"]`),
 				"the toolbar still reports the surface as closed",
@@ -235,7 +212,7 @@ describe("intelligence is reachable wherever the reading pane mounts (#817)", ()
 			await settle(mounted);
 
 			assert.ok(
-				drawer(mounted),
+				intelligenceDrawer(mounted),
 				"the banner's Why? reached no intelligence surface",
 			);
 		});

package/src/hooks/cross-account-bulk.render.test.ts

@@ -0,0 +1,164 @@
+/**
+ * The brief and Flagged are the two cross-account lists, and both offer Delete
+ * and Mark read over whatever is ticked (#872).
+ *
+ * The bulk endpoints refuse a batch spanning accounts before applying any of
+ * it, so a selection with one row from each account deleted nothing at all and
+ * marked nothing read — the user got "Couldn't delete these messages" and no
+ * mail moved. The split has to happen where the call is made, so this mounts
+ * the real hook against the real fetch seam and reads the requests that
+ * actually left: every batch carries one account, and between them they carry
+ * every ticked row.
+ *
+ * Which account each ticked row belongs to is the surfaces' half of the same
+ * fix, and it is pinned in `../lib/wizard-selection.test.ts`. How the run
+ * sequences the batches it splits into — progress over the whole selection,
+ * cancellation at whichever boundary comes next — is `../lib/bulk-actions.test.ts`,
+ * where a batch is a value rather than a request in flight.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, beforeEach, describe, it } from "node:test";
+import { act, createElement } from "react";
+import type { BulkActionTarget } from "../lib/bulk-actions";
+import { createDomHarness, type DomHarness } from "../test-support/dom";
+import { type HttpMock, httpError, mockFetch } from "../test-support/http";
+import {
+	type EscalatedAction,
+	type UseEscalatedActionsResult,
+	useEscalatedActions,
+} from "./useEscalatedActions";
+
+const ACCOUNT_A = "acc-work";
+const ACCOUNT_B = "acc-personal";
+
+/** A brief selection: two rows from one account, one from another. */
+const MIXED: BulkActionTarget[] = [
+	{ id: "msg-work-1", accountId: ACCOUNT_A },
+	{ id: "msg-personal-1", accountId: ACCOUNT_B },
+	{ id: "msg-work-2", accountId: ACCOUNT_A },
+];
+
+let harness: DomHarness | undefined;
+let http: HttpMock;
+
+const mountRunner = (): (() => UseEscalatedActionsResult) => {
+	let value: UseEscalatedActionsResult | undefined;
+	const Probe = () => {
+		value = useEscalatedActions({
+			// The brief's selection belongs to no single mailbox, which is how the
+			// wizard mounts this hook over a cross-account list.
+			mailboxId: "",
+			enabled: false,
+			predicateKey: "selection-wizard",
+			searchQuery: {},
+		});
+		return null;
+	};
+	harness = createDomHarness();
+	harness.renderApp(createElement(Probe));
+	return () => {
+		if (!value) throw new Error("hook did not render");
+		return value;
+	};
+};
+
+/** Enough turns for a run of sequential batches to finish. */
+const settle = async (): Promise<void> => {
+	if (!harness) throw new Error("nothing mounted");
+	for (let round = 0; round < 10; round += 1) await harness.flush();
+};
+
+const run = async (
+	hook: () => UseEscalatedActionsResult,
+	action: EscalatedAction,
+	targets: readonly BulkActionTarget[],
+) => {
+	let started: ReturnType<UseEscalatedActionsResult["runAction"]> | undefined;
+	act(() => {
+		started = hook().runAction(action, targets);
+	});
+	await settle();
+	if (!started) throw new Error("the run never started");
+	return started;
+};
+
+/** The message-id list of every bulk request that left, in order. */
+const batches = (suffix: string): string[][] =>
+	http
+		.to(suffix)
+		.map((call) => (call.body as { messageIds?: string[] })?.messageIds ?? []);
+
+const accountOf = (id: string): string | undefined =>
+	MIXED.find((target) => target.id === id)?.accountId;
+
+const assertOneBatchPerAccount = (sent: string[][]): void => {
+	assert.equal(sent.length, 2, "the selection was not split by account");
+	for (const batch of sent) {
+		assert.equal(
+			new Set(batch.map(accountOf)).size,
+			1,
+			"a batch spanned accounts, which the endpoint refuses whole",
+		);
+	}
+	assert.deepEqual(
+		[...sent.flat()].sort(),
+		MIXED.map((target) => target.id).sort(),
+		"a ticked row was never sent",
+	);
+};
+
+beforeEach(() => {
+	http = mockFetch(() => ({ successCount: 1, failureCount: 0 }));
+});
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http.restore();
+});
+
+describe("a selection spanning accounts", () => {
+	it("deletes every ticked row, one batch per account", async () => {
+		const hook = mountRunner();
+
+		const outcome = await run(hook, { kind: "delete" }, MIXED);
+
+		assertOneBatchPerAccount(batches("/messages/delete"));
+		assert.equal(outcome.done, MIXED.length);
+		assert.deepEqual(outcome.failedIds, []);
+	});
+
+	it("marks every ticked row read, one batch per account", async () => {
+		const hook = mountRunner();
+
+		const outcome = await run(hook, { kind: "markRead" }, MIXED);
+
+		assertOneBatchPerAccount(batches("/messages/flags"));
+		for (const call of http.calls) {
+			assert.equal((call.body as { isRead?: boolean })?.isRead, true);
+		}
+		assert.equal(outcome.done, MIXED.length);
+	});
+
+	it("reports how far it got when one account's batch fails", async () => {
+		http.restore();
+		http = mockFetch((call) =>
+			(call.body as { messageIds?: string[] })?.messageIds?.[0] ===
+			"msg-personal-1"
+				? httpError(409, "mailbox is locked")
+				: { successCount: 1, failureCount: 0 },
+		);
+		const hook = mountRunner();
+
+		const outcome = await run(hook, { kind: "delete" }, MIXED);
+
+		assert.equal(outcome.done, 2, "the account that succeeded is not counted");
+		assert.deepEqual(
+			outcome.failedIds,
+			["msg-personal-1"],
+			"the untouched rows are not handed back to retry",
+		);
+		assert.notEqual(outcome.error, undefined);
+	});
+});

package/src/hooks/useEscalatedActions.ts

@@ -17,6 +17,7 @@ import {
 import {
 	type ApplyBatch,
 	type BulkActionProgress,
+	type BulkActionTarget,
 	type BulkRunOutcome,
 	type FetchIdsPage,
 	honestProgress,
@@ -100,18 +101,21 @@ export interface UseEscalatedActionsResult {
 	runningAction: EscalatedAction | undefined;
 	progress: BulkActionProgress | undefined;
 	/**
-	 * Runs `action` in chunks. Pass `ids` for a materialized (bounded)
-	 * selection; omit it to run against the escalated predicate (`phase` must
-	 * be "escalated"). Resolves once the run ends for any reason — cancelled,
-	 * errored, or complete — with a `done`/`failedIds` outcome the caller reads
-	 * to decide what is still outstanding.
+	 * Runs `action` in chunks. Pass `targets` for a materialized (bounded)
+	 * selection; omit them to run against the escalated predicate (`phase` must
+	 * be "escalated"). Each target names the account that owns it, so a
+	 * selection spanning accounts is sent as one batch per account rather than
+	 * as one batch the endpoint refuses whole (#872). Resolves once the run ends
+	 * for any reason — cancelled, errored, or complete — with a
+	 * `done`/`failedIds` outcome the caller reads to decide what is still
+	 * outstanding.
 	 * Infrastructure failures are reported through the app's existing
 	 * escalation seam (`pushError`, which itself escalates a 5xx/exception to
 	 * the fatal overlay) — not swallowed here.
 	 */
 	runAction: (
 		action: EscalatedAction,
-		ids?: string[],
+		targets?: readonly BulkActionTarget[],
 	) => Promise<BulkRunOutcome>;
 }
 
@@ -225,16 +229,26 @@ export const useEscalatedActions = ({
 		[],
 	);
 
+	/**
+	 * The unseen counts a run moved, per account. A cross-account selection has
+	 * no single owning account — the surface leaves the option undefined exactly
+	 * then — so the run's own targets are what name the accounts to refresh.
+	 */
 	const invalidateAfterRun = useCallback(
-		(action: EscalatedAction) => {
+		(action: EscalatedAction, targets: readonly BulkActionTarget[]) => {
 			invalidateThreadListQueries(
 				queryClient,
 				threadListCacheKeys(mailboxesTouchedBy(action, mailboxId)),
 			);
-			if (accountId) {
+			const touched = new Set<string>();
+			if (accountId) touched.add(accountId);
+			for (const target of targets) {
+				if (target.accountId) touched.add(target.accountId);
+			}
+			for (const touchedAccountId of touched) {
 				queryClient.invalidateQueries({
 					queryKey: mailboxOperationsListMailboxesQueryKey({
-						path: { accountId },
+						path: { accountId: touchedAccountId },
 					}),
 				});
 			}
@@ -279,7 +293,7 @@ export const useEscalatedActions = ({
 	const runAction = useCallback(
 		async (
 			action: EscalatedAction,
-			ids?: string[],
+			targets?: readonly BulkActionTarget[],
 		): Promise<BulkRunOutcome> => {
 			cancelRef.current = false;
 			runningRef.current = true;
@@ -301,9 +315,9 @@ export const useEscalatedActions = ({
 			let outcome: BulkRunOutcome;
 			try {
 				outcome =
-					ids !== undefined
+					targets !== undefined
 						? await runChunkedAction(
-								ids,
+								targets,
 								applyBatch,
 								onProgress,
 								() => cancelRef.current,
@@ -333,7 +347,7 @@ export const useEscalatedActions = ({
 				);
 			}
 			if (outcome.done > 0) {
-				invalidateAfterRun(action);
+				invalidateAfterRun(action, targets ?? []);
 			}
 			return outcome;
 		},