@remit/web-client 0.0.271 → 0.0.273

package/src/components/mail/blocked-images-notice.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { BlockedImagesNotice } from "@/components/mail/BlockedImagesNotice";
+
+/**
+ * The bar above a message body whose remote images were not loaded.
+ *
+ * Two different facts wear the same strip. Images held back for privacy are a
+ * default the reader can lift, so the bar offers both ways out and neither
+ * control ever greys out. A blocked sender is an instruction the reader already
+ * gave — `BlockedFlag`: never load images, even on explicit click — so the bar
+ * carries no controls at all and says why instead, because an image-free
+ * message that explains nothing is indistinguishable from a broken one.
+ */
+const meta: Meta<typeof BlockedImagesNotice> = {
+	title: "Flows/Mail/Blocked Images Notice",
+	component: BlockedImagesNotice,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof BlockedImagesNotice>;
+
+const noop = () => {};
+
+const base = {
+	blockedImageCount: 3,
+	canAlwaysTrust: true,
+	isTrustPending: false,
+	isSenderBlocked: false,
+	onLoadOnce: noop,
+	onAlwaysTrust: noop,
+};
+
+const Column = ({ children }: { children: React.ReactNode }) => (
+	<div className="w-full max-w-2xl">{children}</div>
+);
+
+/** The default: images held back, and two ways to let them in. */
+export const Privacy: Story = {
+	render: () => (
+		<Column>
+			<BlockedImagesNotice {...base} />
+		</Column>
+	),
+};
+
+/** The trust toggle is in flight. The button stays pressable and says so. */
+export const Trusting: Story = {
+	render: () => (
+		<Column>
+			<BlockedImagesNotice {...base} isTrustPending />
+		</Column>
+	),
+};
+
+/** No parseable From-address, so there is nobody to trust — only Load once. */
+export const NoSenderToTrust: Story = {
+	render: () => (
+		<Column>
+			<BlockedImagesNotice {...base} canAlwaysTrust={false} />
+		</Column>
+	),
+};
+
+/** A blocked sender: no way in, and the reason stated rather than left blank. */
+export const SenderBlocked: Story = {
+	render: () => (
+		<Column>
+			<BlockedImagesNotice {...base} isSenderBlocked />
+		</Column>
+	),
+};
+
+/** Blocked outranks trusted — a sender carrying both is still blocked. */
+export const SenderBlockedAndTrusted: Story = {
+	render: () => (
+		<Column>
+			<BlockedImagesNotice {...base} isSenderBlocked canAlwaysTrust />
+		</Column>
+	),
+};
+
+/** One image, and the copy counts it as one. */
+export const SingleImage: Story = {
+	render: () => (
+		<Column>
+			<BlockedImagesNotice {...base} blockedImageCount={1} />
+		</Column>
+	),
+};

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

@@ -20,11 +20,11 @@
 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 type { BulkActionTarget, EscalatedAction } from "../lib/bulk-actions";
+import { ranOutcome } from "../test-support/bulk-run";
 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";
@@ -80,7 +80,7 @@ const run = async (
 	});
 	await settle();
 	if (!started) throw new Error("the run never started");
-	return started;
+	return ranOutcome(await started);
 };
 
 /** The message-id list of every bulk request that left, in order. */

package/src/hooks/escalated-run-lifetime.render.test.ts

@@ -14,6 +14,7 @@
 import assert from "node:assert/strict";
 import { afterEach, beforeEach, describe, it } from "node:test";
 import { act, createElement } from "react";
+import { ranOutcome } from "../test-support/bulk-run";
 import { createDomHarness, type DomHarness } from "../test-support/dom";
 import {
 	type EscalationSearchQuery,
@@ -222,7 +223,7 @@ describe("an escalated run the user walks away from", () => {
 		press(() => hook().clear());
 		press(() => server?.release());
 		await settle();
-		const outcome = await run;
+		const outcome = ranOutcome(await run);
 
 		assert.equal(outcome.cancelled, false);
 		assert.equal(outcome.done, TOTAL);
@@ -238,7 +239,7 @@ describe("an escalated run the user walks away from", () => {
 		setQuery({ query: "invoices" });
 		press(() => server?.release());
 		await settle();
-		const outcome = await run;
+		const outcome = ranOutcome(await run);
 
 		assert.equal(outcome.done, TOTAL);
 		assert.deepEqual(
@@ -280,7 +281,7 @@ describe("stopping a run with a delete already on the wire", () => {
 		press(() => hook().stop());
 		press(() => server?.release());
 		await settle();
-		const outcome = await run;
+		const outcome = ranOutcome(await run);
 
 		assert.equal(server?.aborted(), 1, "the delete in flight was cancelled");
 		assert.equal(
@@ -326,7 +327,7 @@ describe("stopping the run, which is a different press", () => {
 		press(() => hook().stop());
 		press(() => server?.release());
 		await settle();
-		const outcome = await run;
+		const outcome = ranOutcome(await run);
 
 		assert.equal(outcome.cancelled, true);
 		assert.ok(outcome.done > 0, "the batches already sent still count");

package/src/hooks/escalated-run-refusal.render.test.ts

@@ -11,32 +11,60 @@
  */
 
 import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
+import { afterEach, beforeEach, describe, it } from "node:test";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { act, createElement } from "react";
+import { act, createElement, type ReactNode, useEffect, useRef } from "react";
+import { BulkRunProvider } from "@/components/mail/BulkRunProvider";
 import { RoleAppointmentPromptProvider } from "@/components/mail/RoleAppointmentPromptProvider";
 import { ErrorBannerProvider } from "@/components/ui/ErrorBannerProvider";
+import type { BulkRunOutcome, EscalatedAction } from "../lib/bulk-actions";
 import { createDomHarness, type DomHarness } from "../test-support/dom";
-import { type HttpMock, mockFetch } from "../test-support/http";
+import { type HttpCall, type HttpMock, mockFetch } from "../test-support/http";
 import {
 	type UseEscalatedActionsResult,
 	useEscalatedActions,
 } from "./useEscalatedActions";
 
 const INBOX = "mbx-inbox";
+const ELSEWHERE = "mbx-archive";
 const ACCOUNT = "acc-1";
 const TRASH = "mbx-trash";
+/** The one id whose delete is never answered, so a run holds the slot. */
+const HELD = "msg-held";
+const CONFIRM = "Set as Trash and delete";
+const PICK_TRASH = "Set Prullenbak, 3 messages, as Trash";
 
 let harness: DomHarness | undefined;
 let http: HttpMock | undefined;
 let hook: UseEscalatedActionsResult | undefined;
 
+/** Endings the run's owner stated once no screen was left to state them. */
+let endings: Array<{
+	kind: EscalatedAction["kind"];
+	matched: number;
+	outcome: BulkRunOutcome;
+}> = [];
+
+interface MountedScreen {
+	hook: UseEscalatedActionsResult;
+	/** Passed to the run this screen starts, the way the wizard's does. */
+	claimEnding: (release: () => void) => void;
+}
+
+const screens = new Map<string, MountedScreen>();
+
+beforeEach(() => {
+	endings = [];
+	screens.clear();
+});
+
 afterEach(() => {
 	harness?.close();
 	harness = undefined;
 	http?.restore();
 	http = undefined;
 	hook = undefined;
+	screens.clear();
 });
 
 const CONFIG = {
@@ -74,11 +102,12 @@ const Probe = () => {
 	return null;
 };
 
-const settle = async (): Promise<void> => {
+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;
 	}
 };
 
@@ -95,7 +124,7 @@ const mount = async (respond: (path: string) => unknown): Promise<void> => {
 				createElement(
 					RoleAppointmentPromptProvider,
 					null,
-					createElement(Probe),
+					createElement(BulkRunProvider, null, createElement(Probe)),
 				),
 			),
 		),
@@ -154,3 +183,188 @@ describe("a bulk delete refused for its folder role", () => {
 		assert.doesNotMatch(text, /Confirm this account's Trash folder/);
 	});
 });
+
+const MAILBOXES = {
+	items: [
+		{
+			mailboxId: INBOX,
+			accountId: ACCOUNT,
+			fullPath: "INBOX",
+			hierarchyDelimiter: "/",
+			messageCount: 12,
+		},
+		{
+			mailboxId: TRASH,
+			accountId: ACCOUNT,
+			fullPath: "Prullenbak",
+			hierarchyDelimiter: "/",
+			messageCount: 3,
+		},
+	],
+};
+
+/**
+ * A mailbox screen that states a run's ending in place while it is up, and
+ * releases that claim when it goes — the wizard's own arrangement.
+ */
+const screenFor = (mailboxId: string): ReactNode => {
+	const Screen = () => {
+		const release = useRef<(() => void) | undefined>(undefined);
+		useEffect(
+			() => () => {
+				release.current?.();
+				release.current = undefined;
+			},
+			[],
+		);
+		const live = useEscalatedActions({
+			mailboxId,
+			accountId: ACCOUNT,
+			enabled: true,
+			predicateKey: `${mailboxId}|npm`,
+			searchQuery: { query: "npm" },
+			reportEnding: (kind, matched, outcome) => {
+				endings.push({ kind, matched, outcome });
+			},
+		});
+		screens.set(mailboxId, {
+			hook: live,
+			claimEnding: (next) => {
+				release.current?.();
+				release.current = next;
+			},
+		});
+		return null;
+	};
+	return createElement(Screen, { key: mailboxId });
+};
+
+const screen = (mailboxId: string): MountedScreen => {
+	const mounted = screens.get(mailboxId);
+	if (!mounted) throw new Error(`no screen is mounted for ${mailboxId}`);
+	return mounted;
+};
+
+const mountApp = async (
+	respond: (call: HttpCall) => unknown,
+	element: ReactNode,
+): Promise<void> => {
+	http = mockFetch(respond);
+	harness = createDomHarness();
+	harness.renderApp(element);
+	await settle();
+};
+
+const deleteOne = (mailboxId: string, id: string, claimed: boolean): void => {
+	const mounted = screen(mailboxId);
+	void mounted.hook.runAction(
+		{ kind: "delete" },
+		[{ id, accountId: ACCOUNT }],
+		claimed ? mounted.claimEnding : undefined,
+	);
+};
+
+const promptIsUp = (): boolean =>
+	(harness?.text() ?? "").includes("Confirm this account's Trash folder");
+
+/** The confirm mounts only once the account's folders have arrived. */
+const confirmIsUp = (): boolean =>
+	(harness?.queryAll("button") ?? []).some((button) =>
+		(button.textContent ?? "").includes(CONFIRM),
+	);
+
+/** Pick the account's real Trash in the picker, then press the confirm. */
+const pressConfirm = async (): Promise<void> => {
+	await settle(() => !!harness?.query(`[aria-label="${PICK_TRASH}"]`));
+	if (!harness) throw new Error("nothing mounted");
+	harness.click(harness.byLabel(PICK_TRASH));
+	await settle(confirmIsUp);
+	harness.click(harness.byText("button", CONFIRM));
+};
+
+/**
+ * The replay is a new run and claims nothing (#112). The claim the refused run
+ * was started under belongs to the screen that started it, and that screen has
+ * usually gone by the time the folder is appointed — its release has already
+ * fired, so a replay re-claiming under it would be held back by nobody and end
+ * in silence.
+ */
+describe("the run replayed once the folder is appointed", () => {
+	it("states its ending, once, with the screen that started it gone", async () => {
+		let stillRefusing = true;
+		await mountApp((call) => {
+			if (call.path.endsWith("/config")) return CONFIG;
+			if (call.path.endsWith("/mailboxes")) return MAILBOXES;
+			if (call.path.endsWith("/messages/delete")) {
+				if (!stillRefusing) return { successCount: 1, failureCount: 0 };
+				stillRefusing = false;
+				return refusal();
+			}
+			return {};
+		}, screenFor(INBOX));
+
+		await act(async () => {
+			deleteOne(INBOX, "msg-1", true);
+		});
+		await settle(promptIsUp);
+		assert.ok(promptIsUp(), "the refusal opened the appointment prompt");
+
+		// The user closes the wizard and leaves the mailbox while the prompt is up.
+		// The prompt and the run's owner are above the route, so both stay.
+		harness?.renderApp(createElement("div", null, "somewhere else"));
+		assert.equal(endings.length, 0, "nothing has ended yet");
+
+		await pressConfirm();
+		await settle(() => endings.length > 0);
+
+		assert.equal(endings.length, 1, "the replay's ending is said exactly once");
+		assert.equal(endings[0]?.kind, "delete");
+		assert.equal(endings[0]?.outcome.done, 1);
+		assert.equal(endings[0]?.outcome.error, undefined);
+	});
+
+	it("banners a replay refused because another run holds the slot", async () => {
+		let stillRefusing = true;
+		await mountApp(
+			(call) => {
+				if (call.path.endsWith("/config")) return CONFIG;
+				if (call.path.endsWith("/mailboxes")) return MAILBOXES;
+				if (call.path.endsWith("/messages/delete")) {
+					const ids =
+						(call.body as { messageIds?: string[] } | undefined)?.messageIds ??
+						[];
+					if (ids.includes(HELD)) return new Promise<never>(() => {});
+					if (stillRefusing) {
+						stillRefusing = false;
+						return refusal();
+					}
+					return { successCount: 1, failureCount: 0 };
+				}
+				return {};
+			},
+			createElement("div", null, screenFor(INBOX), screenFor(ELSEWHERE)),
+		);
+
+		await act(async () => {
+			deleteOne(INBOX, "msg-1", false);
+		});
+		await settle(promptIsUp);
+
+		// Another mailbox takes the one run slot while the prompt is still open.
+		await act(async () => {
+			deleteOne(ELSEWHERE, HELD, false);
+		});
+		await settle(() => screen(ELSEWHERE).hook.isRunning);
+
+		await pressConfirm();
+		await settle(() => (harness?.text() ?? "").includes("still running"));
+
+		const text = harness?.text() ?? "";
+		assert.match(text, /Couldn't delete these messages/);
+		assert.match(
+			text,
+			/still running/,
+			"a replay with nowhere to run says so instead of vanishing",
+		);
+	});
+});