@remit/web-client 0.0.325 → 0.0.327

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

@@ -1,182 +0,0 @@
-/**
- * The reading-pane notice names the mutation that gave up and offers the way
- * out for that one (#1229).
- *
- * A delete retries through the ordinary delete endpoint. A move cannot — the
- * destination the give-up discarded is on no row — so its retry is the folder
- * picker, which needs an account to scope its list to. The caller's `accountId`
- * is absent on rows from per-mailbox endpoints and for as long as the
- * conversation's own lookup is in flight, and a notice that names a failure and
- * then offers nothing is the same dead end as one that offers the wrong thing.
- */
-import assert from "node:assert/strict";
-import { afterEach, beforeEach, describe, it } from "node:test";
-import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-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 { ErrorBannerProvider } from "../ui/ErrorBannerProvider";
-import { MessageSettlementAlert } from "./MessageSettlementAlert";
-import { RoleAppointmentPromptProvider } from "./RoleAppointmentPromptProvider";
-
-const ACCOUNT = "acc-1";
-const MAILBOX = "mbx-inbox";
-
-let harness: DomHarness | undefined;
-let http: HttpMock;
-
-const CONFIG = {
-	accounts: [{ accountId: ACCOUNT, email: "a@example.com" }],
-};
-
-const MAILBOXES = {
-	items: [
-		{
-			mailboxId: MAILBOX,
-			accountId: ACCOUNT,
-			fullPath: "INBOX",
-			hierarchyDelimiter: "/",
-			messageCount: 1,
-		},
-	],
-};
-
-const respond = (path: string): unknown => {
-	if (path.endsWith("/config")) return CONFIG;
-	if (path.endsWith("/mailboxes")) return MAILBOXES;
-	return {};
-};
-
-const thread = (
-	over: Partial<RemitImapThreadMessageResponse>,
-): RemitImapThreadMessageResponse =>
-	({
-		threadMessageId: "tm-1",
-		threadId: "th-1",
-		messageId: "msg-1",
-		accountConfigId: "cfg-1",
-		mailboxId: MAILBOX,
-		sentDate: 0,
-		isRead: true,
-		hasAttachment: false,
-		hasStars: false,
-		star: "None",
-		isDeleted: false,
-		senderTrust: "unknown",
-		category: "uncategorized",
-		status: "active",
-		syncStatus: "abandoned",
-		abandonedMutation: "none",
-		createdAt: 0,
-		updatedAt: 0,
-		...over,
-	}) as RemitImapThreadMessageResponse;
-
-const mount = (
-	threadMessage: RemitImapThreadMessageResponse,
-	accountId: string | undefined,
-): void => {
-	harness = createDomHarness();
-	harness.render(
-		createElement(
-			QueryClientProvider,
-			{ client: harness.queryClient },
-			createElement(
-				ErrorBannerProvider,
-				null,
-				createElement(
-					RoleAppointmentPromptProvider,
-					null,
-					createElement(MessageSettlementAlert, { threadMessage, accountId }),
-				),
-			),
-		),
-	);
-};
-
-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 labels = (): string[] =>
-	(harness?.queryAll("button") ?? []).map(
-		(button) => button.getAttribute("aria-label") ?? button.textContent ?? "",
-	);
-
-const notice = (): string => harness?.text() ?? "";
-
-beforeEach(() => {
-	http = mockFetch((call) => respond(call.path));
-});
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-	http.restore();
-});
-
-describe("MessageSettlementAlert", () => {
-	it("says nothing about a row no mutation gave up on", async () => {
-		mount(
-			thread({ syncStatus: "synced", abandonedMutation: "delete" }),
-			ACCOUNT,
-		);
-		await settle();
-
-		assert.equal(notice(), "");
-	});
-
-	it("offers Delete again for a delete that gave up", async () => {
-		mount(thread({ abandonedMutation: "delete" }), ACCOUNT);
-		await settle();
-
-		assert.match(notice(), /was not deleted/i);
-		assert.ok(labels().some((label) => /delete again/i.test(label)));
-	});
-
-	/**
-	 * The account lookup fans out to `/config` and then to every account's
-	 * mailbox list. Asking for it from each expanded message put that behind
-	 * every open row in the product — and it did, until it was scoped to the one
-	 * case that needs it. Pinned on the wire, because the cost is a request and
-	 * only the request proves it is not being made.
-	 */
-	it("asks for no configuration at all unless a move gave up", async () => {
-		mount(thread({ abandonedMutation: "delete" }), ACCOUNT);
-		await settle();
-
-		assert.deepEqual(http.to("/config"), []);
-	});
-
-	it("asks for none on a healthy row either", async () => {
-		mount(thread({ syncStatus: "synced" }), undefined);
-		await settle();
-
-		assert.deepEqual(http.to("/config"), []);
-	});
-
-	it("offers a folder picker for a move that gave up, never Delete again", async () => {
-		mount(thread({ abandonedMutation: "move" }), ACCOUNT);
-		await settle(() => labels().some((label) => /move again/i.test(label)));
-
-		assert.match(notice(), /was not moved/i);
-		assert.ok(labels().some((label) => /move again/i.test(label)));
-		assert.ok(!labels().some((label) => /delete again/i.test(label)));
-	});
-
-	it("resolves the account from the row's mailbox when the caller has none", async () => {
-		mount(thread({ abandonedMutation: "move" }), undefined);
-		await settle(() => labels().some((label) => /move again/i.test(label)));
-
-		assert.ok(
-			labels().some((label) => /move again/i.test(label)),
-			"a notice that names a failure always carries its way out",
-		);
-	});
-});

package/src/components/mail/MessageSettlementAlert.tsx

@@ -1,126 +0,0 @@
-import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { abandonedMutationOf } from "@remit/data-ports/message-settlement";
-import { MessageMutation } from "@remit/domain-enums";
-import { MessageSettlementNotice, messageSettlementCopy } from "@remit/ui";
-import { useCallback, useMemo } from "react";
-import { useDeleteMessages } from "@/hooks/useDeleteMessages";
-import { useMailboxAccount } from "@/hooks/useMailboxAccount";
-import { useMoveMessages } from "@/hooks/useMoveMessages";
-import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
-import { MoveToTrigger } from "./MoveToTrigger";
-
-/**
- * States, on the open message, that Remit gave up on a mutation (issue #1002) —
- * the failure the list can only chip — and offers the way out for THAT
- * mutation, never a different one (issue #1229).
- *
- * A delete retries through the ordinary delete endpoint: giving up put `status`
- * back to `active`, so `settledPlacement` passes the row through and
- * `POST /messages/delete` re-drives it against the folder the server actually
- * holds it in. A move cannot retry that way — the destination the give-up
- * discarded is on no row — so its retry is the same folder picker every other
- * move goes through, which asks for one. Every other give-up gets no treatment;
- * `abandonedMutationOf` says which and why.
- *
- * The picker needs an account to scope its folder list to, and the caller's
- * `accountId` is absent on every row that came from a per-mailbox endpoint and
- * for as long as the conversation's own lookup is in flight. It is resolved
- * from the row's mailbox here rather than left out, because a notice that names
- * a failure and offers no way to undo it is the same defect as one that offers
- * the wrong way (#1229) — the resolver is the one `MessageActionMenu` already
- * uses for exactly this.
- */
-export function MessageSettlementAlert({
-	threadMessage,
-	accountId,
-	className,
-}: {
-	threadMessage: RemitImapThreadMessageResponse;
-	accountId: string | undefined;
-	className?: string;
-}) {
-	const abandoned = abandonedMutationOf(threadMessage);
-	const settlement =
-		abandoned === MessageMutation.delete
-			? ("delete_failed" as const)
-			: abandoned === MessageMutation.move
-				? ("move_failed" as const)
-				: undefined;
-
-	// Only a move that gave up, and only where the caller has no account of its
-	// own, has anything to resolve — so every other row subscribes to nothing.
-	// Asking unconditionally would pull `/config` and every account's mailbox
-	// list into each expanded message, for a case almost none of them are.
-	const { accountId: mailboxAccountId } = useMailboxAccount(
-		settlement === "move_failed" && !accountId
-			? threadMessage.mailboxId
-			: undefined,
-	);
-	const scopedAccountId = accountId ?? mailboxAccountId;
-
-	const { deleteMessages, isPending: isDeleting } = useDeleteMessages({
-		mailboxId: threadMessage.mailboxId,
-		threadId: threadMessage.threadId,
-		accountId: scopedAccountId,
-		messages: [threadMessage],
-	});
-	const { moveMessages, isPending: isMoving } = useMoveMessages({
-		mailboxId: threadMessage.mailboxId,
-		threadId: threadMessage.threadId,
-		accountId: scopedAccountId,
-	});
-
-	const onDeleteAgain = useCallback(() => {
-		deleteMessages([threadMessage.messageId]);
-	}, [deleteMessages, threadMessage.messageId]);
-
-	const onMoveAgain = useCallback(
-		(destinationMailboxId: string) => {
-			moveMessages([threadMessage.messageId], destinationMailboxId);
-		},
-		[moveMessages, threadMessage.messageId],
-	);
-
-	const reportHref = useMemo(
-		() =>
-			settlement
-				? buildGitHubIssueUrl(
-						buildBugReportContext({
-							title: messageSettlementCopy[settlement].title,
-							errorMessage: `Message ${threadMessage.messageId}: status=${threadMessage.status} syncStatus=${threadMessage.syncStatus} abandonedMutation=${threadMessage.abandonedMutation}`,
-						}),
-					)
-				: undefined,
-		[
-			settlement,
-			threadMessage.messageId,
-			threadMessage.status,
-			threadMessage.syncStatus,
-			threadMessage.abandonedMutation,
-		],
-	);
-
-	if (!settlement) return null;
-
-	return (
-		<MessageSettlementNotice
-			settlement={settlement}
-			onRetry={settlement === "delete_failed" ? onDeleteAgain : undefined}
-			action={
-				settlement === "move_failed" && scopedAccountId ? (
-					<MoveToTrigger
-						accountId={scopedAccountId}
-						currentMailboxId={threadMessage.mailboxId}
-						onMove={onMoveAgain}
-						disabled={isMoving}
-						variant="compact"
-						label={messageSettlementCopy.move_failed.retryLabel}
-					/>
-				) : undefined
-			}
-			retryPending={settlement === "delete_failed" ? isDeleting : isMoving}
-			reportHref={reportHref}
-			className={className}
-		/>
-	);
-}

package/src/components/mail/MessageToolbar.interaction.test.ts

@@ -1,250 +0,0 @@
-/**
- * The inline notice under the toolbar belongs to the press that produced it and
- * to nothing after it (#818). It came out of #803 as a stored sentence with no
- * reset, and #807 took away the render gate that had been hiding it, so one
- * refused press labelled every later message on the pane.
- *
- * Two invariants hold underneath: no press ends in silence, and no sentence
- * outlives the reason it was written for.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import { mailboxOperationsListMailboxesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { createElement } from "react";
-import { createDomHarness, type DomHarness } from "../../test-support/dom";
-import { makeMailbox } from "../../test-support/fixtures";
-import { MessageToolbar, type MessageToolbarProps } from "./MessageToolbar";
-
-let harness: DomHarness | undefined;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-});
-
-const VERBS = [
-	"Reply",
-	"Reply all",
-	"Forward",
-	"Move to Trash",
-	"Move to mailbox",
-	"Star",
-];
-
-const show = (
-	mounted: DomHarness,
-	props: Partial<MessageToolbarProps>,
-): void => {
-	mounted.renderApp(
-		createElement(MessageToolbar, {
-			hasThread: true,
-			intelligenceOpen: false,
-			canToggleIntelligence: false,
-			onToggleIntelligence: () => undefined,
-			...props,
-		}),
-	);
-};
-
-/** A fresh pane. */
-const mount = (props: Partial<MessageToolbarProps>): DomHarness => {
-	harness?.close();
-	harness = createDomHarness();
-	show(harness, props);
-	return harness;
-};
-
-/** The same pane, re-rendered — state survives, as it does under a navigation
- *  the router answers without remounting. */
-const update = (props: Partial<MessageToolbarProps>): void => {
-	if (!harness) throw new Error("nothing mounted");
-	show(harness, props);
-};
-
-const notice = (mounted: DomHarness): string | null =>
-	mounted.query('[role="status"]')?.textContent ?? null;
-
-const press = async (mounted: DomHarness, label: string): Promise<void> => {
-	mounted.click(mounted.byLabel(label));
-	await mounted.flush();
-};
-
-describe("no toolbar press ends in silence (#818)", () => {
-	for (const label of VERBS) {
-		it(`${label} explains itself with nothing open, handler or no handler`, async () => {
-			let acted = 0;
-			const act = () => {
-				acted += 1;
-			};
-			const mounted = mount({
-				hasThread: false,
-				messageId: undefined,
-				onReply: act,
-				onReplyAll: act,
-				onForward: act,
-				onDelete: act,
-				onToggleStar: act,
-			});
-
-			await press(mounted, label);
-
-			assert.ok(
-				notice(mounted),
-				`${label} did nothing and said nothing — the worst outcome`,
-			);
-			assert.equal(acted, 0, `${label} acted with no message open`);
-		});
-	}
-});
-
-describe("the toolbar notice clears when its reason goes (#818)", () => {
-	it("takes the notice down when another message opens", async () => {
-		const mounted = mount({ messageId: "message-1" });
-
-		await press(mounted, "Reply");
-		assert.match(
-			notice(mounted) ?? "",
-			/hasn't loaded yet/,
-			"a press with no handler behind it must explain itself",
-		);
-
-		update({ messageId: "message-2" });
-		await mounted.flush();
-
-		assert.equal(
-			notice(mounted),
-			null,
-			"the sentence belongs to the message it was pressed on, not the next one",
-		);
-	});
-
-	it("invites the press again once the verb it named can act", async () => {
-		const mounted = mount({ messageId: "message-1" });
-
-		await press(mounted, "Reply");
-		assert.match(notice(mounted) ?? "", /hasn't loaded yet/);
-
-		update({ messageId: "message-1", onReply: () => undefined });
-		await mounted.flush();
-
-		assert.match(
-			notice(mounted) ?? "",
-			/Reply is ready — press it again/,
-			"the press was never acted on; dropping the notice drops it silently",
-		);
-	});
-
-	it("lets a verb that acts take down an earlier verb's complaint", async () => {
-		let starred = 0;
-		const mounted = mount({
-			messageId: "message-1",
-			onToggleStar: () => {
-				starred += 1;
-			},
-		});
-
-		await press(mounted, "Reply");
-		assert.match(notice(mounted) ?? "", /hasn't loaded yet/);
-
-		await press(mounted, "Star");
-
-		assert.equal(starred, 1);
-		assert.equal(
-			notice(mounted),
-			null,
-			"a star that worked must not sit under a sentence saying nothing loaded",
-		);
-	});
-});
-
-describe("a loading action is not an unavailable one (#818)", () => {
-	const openMessage: Partial<MessageToolbarProps> = {
-		messageId: "message-1",
-		onReply: () => undefined,
-		onDelete: () => undefined,
-		onToggleStar: () => undefined,
-	};
-
-	it("does not tell the reader to open a message that is already open", async () => {
-		const mounted = mount({
-			...openMessage,
-			moveContext: undefined,
-			moveContextLoading: true,
-		});
-
-		await press(mounted, "Move to mailbox");
-
-		const said = notice(mounted);
-		assert.ok(said, "a Move press must never be swallowed in silence");
-		assert.doesNotMatch(
-			said,
-			/Open a message first/,
-			"the message is on screen — the mailbox list is what has not arrived",
-		);
-		assert.match(said, /mailbox list hasn't loaded yet/);
-	});
-
-	it("does not promise a lookup that already settled with nothing", async () => {
-		const mounted = mount({
-			...openMessage,
-			moveContext: undefined,
-			moveContextLoading: false,
-		});
-
-		await press(mounted, "Move to mailbox");
-
-		const said = notice(mounted);
-		assert.ok(said);
-		assert.doesNotMatch(
-			said,
-			/hasn't loaded yet/,
-			"nothing is in flight — waiting will never make this one arrive",
-		);
-		assert.match(said, /reload to try again/, "a dead end needs a next step");
-	});
-
-	it("still says why with nothing open at all", async () => {
-		const mounted = mount({ hasThread: false });
-
-		await press(mounted, "Move to mailbox");
-
-		assert.match(notice(mounted) ?? "", /Open a message first/);
-	});
-
-	it("carries a Move pressed during the lookup through to the picker", async () => {
-		const mounted = mount({
-			...openMessage,
-			moveContext: undefined,
-			moveContextLoading: true,
-		});
-		mounted.queryClient.setQueryData(
-			mailboxOperationsListMailboxesQueryKey({ path: { accountId: "acc-1" } }),
-			{ items: [makeMailbox({ mailboxId: "mbx-work", fullPath: "Work" })] },
-		);
-
-		await press(mounted, "Move to mailbox");
-
-		update({
-			...openMessage,
-			moveContextLoading: false,
-			moveContext: {
-				accountId: "acc-1",
-				currentMailboxId: "mbx-inbox",
-				onMove: () => undefined,
-			},
-		});
-		await mounted.flush();
-
-		assert.equal(
-			mounted.byLabel("Move to mailbox").getAttribute("aria-expanded"),
-			"true",
-			"the press asked for the picker; the context arriving must not lose it",
-		);
-		assert.equal(
-			notice(mounted),
-			null,
-			"the press was honoured, so there is nothing left to repeat",
-		);
-	});
-});

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

@@ -1,124 +0,0 @@
-/**
- * Render invariants for the reading-pane toolbar (#799): the never-disable
- * tenet (`doc/rules/ux.md`). The toolbar's action buttons must stay pressable
- * even with no thread open — they no-op and explain rather than greying out.
- *
- * Asserted against the shared `MailActionToolbar` (remit-ui), which the live
- * `MessageToolbar` composes. Uses `react-dom/server` so no jsdom is needed.
- */
-
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { MailActionToolbar } from "@remit/ui";
-import React, { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import { MessageToolbar } from "./MessageToolbar";
-
-// The node test loader transpiles remit-ui's `.tsx` (resolved through
-// node_modules) with the classic JSX runtime, which references a global
-// `React`. Vite/Storybook use the automatic runtime, so this shim only exists
-// for the SSR test harness.
-(globalThis as { React?: typeof React }).React = React;
-
-const render = (props: Parameters<typeof MailActionToolbar>[0]): string =>
-	renderToString(createElement(MailActionToolbar, props) as never);
-
-describe("MailActionToolbar never disables its action buttons (#799)", () => {
-	it("renders no disabled button with no thread open", () => {
-		const html = render({ hasThread: false });
-		assert.equal(
-			/\sdisabled(=""|\s|>)/.test(html),
-			false,
-			"no toolbar button may carry a `disabled` attribute",
-		);
-	});
-
-	it("renders no disabled button with a thread open", () => {
-		const html = render({ hasThread: true });
-		assert.equal(/\sdisabled(=""|\s|>)/.test(html), false);
-	});
-
-	it("renders the inline explanation when supplied with no thread", () => {
-		const html = render({
-			hasThread: false,
-			unavailableHint: "Open a message first",
-		});
-		assert.match(html, /Open a message first/);
-		// Inline status, not a toast.
-		assert.match(html, /role="status"/);
-	});
-
-	it("keeps the action buttons present (reply/flag) so they stay pressable", () => {
-		const html = render({ hasThread: false });
-		assert.match(html, /aria-label="Reply"/);
-		assert.match(html, /aria-label="Star"/);
-		// No archive verb — Remit is IMAP-backed (move-to-folder is the equivalent).
-		assert.doesNotMatch(html, /aria-label="Archive"/);
-	});
-});
-
-/**
- * The reading-pane toolbar carries message context only (#49). Search, compose,
- * bug report and the account menu moved up into the app top bar, which spans
- * every pane. Two search fields on one screen fight over "/" and over focus, so
- * the absence of one here is the thing worth pinning.
- */
-describe("MessageToolbar carries message context only (#49)", () => {
-	const render = (hasThread: boolean): string =>
-		renderToString(
-			createElement(MessageToolbar, {
-				hasThread,
-				intelligenceOpen: false,
-				canToggleIntelligence: true,
-				onToggleIntelligence: () => undefined,
-			}) as never,
-		);
-
-	it("mounts no search field", () => {
-		for (const hasThread of [false, true]) {
-			assert.doesNotMatch(render(hasThread), /aria-label="Search mail"/);
-		}
-	});
-
-	it("carries no global actions — compose, bug report, account", () => {
-		const html = render(true);
-		assert.doesNotMatch(html, /aria-label="Compose"/);
-		assert.doesNotMatch(html, /aria-label="Report a bug"/);
-		assert.doesNotMatch(html, /aria-label="Account menu"/);
-	});
-
-	it("keeps the message verbs and the intelligence toggle", () => {
-		const html = render(true);
-		assert.match(html, /aria-label="Reply"/);
-		assert.match(html, /aria-label="Star"/);
-		assert.match(html, /intelligence sidebar/);
-	});
-});
-
-/**
- * The toggle holds its slot whatever the view and the selection are (#52); it
- * reports "cannot act" by being disabled, not by leaving the bar.
- */
-describe("MessageToolbar keeps the intelligence toggle in place (#52)", () => {
-	const render = (canToggleIntelligence: boolean): string =>
-		renderToString(
-			createElement(MessageToolbar, {
-				hasThread: false,
-				intelligenceOpen: false,
-				canToggleIntelligence,
-				onToggleIntelligence: () => undefined,
-			}) as never,
-		);
-
-	it("renders the toggle when it cannot open a rail", () => {
-		assert.match(render(false), /aria-label="Show intelligence sidebar"/);
-	});
-
-	it("disables it rather than dropping it from the bar", () => {
-		assert.match(render(false), /\sdisabled(=""|\s|>)/);
-	});
-
-	it("leaves it pressable once a rail can open", () => {
-		assert.equal(/\sdisabled(=""|\s|>)/.test(render(true)), false);
-	});
-});