@remit/web-client 0.0.24 → 0.0.26

package/src/hooks/useEscalatedDelete.ts

@@ -0,0 +1,244 @@
+import {
+	mailboxOperationsListMailboxesQueryKey,
+	threadOperationsListThreadsQueryKey,
+	threadOperationsSearchThreadsQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import {
+	messageBulkOperationsDeleteMessages,
+	threadOperationsSearchThreads,
+} from "@remit/api-http-client/sdk.gen.ts";
+import type { ThreadOperationsSearchThreadsData } from "@remit/api-http-client/types.gen.ts";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
+import { buildMutationErrorBanner } from "@/components/ui/error-banners";
+import {
+	type BulkDeleteProgress,
+	countMatches,
+	type DeleteRunOutcome,
+	type FetchIdsPage,
+	runChunkedDelete,
+	runPredicateDelete,
+} from "@/lib/bulk-delete";
+
+/** The predicate a search-scoped delete re-issues on every page — the same
+ *  filters the visible list is searching with, minus pagination/count knobs. */
+export type EscalationSearchQuery = Pick<
+	NonNullable<ThreadOperationsSearchThreadsData["query"]>,
+	"order" | "query" | "subject" | "from" | "unread" | "starred" | "attachments"
+>;
+
+/** Page size for both the counting and the execution loop. Set to the write
+ *  side's own 100-id cap so an execution page IS a delete chunk — no
+ *  in-memory accumulation step between reading ids and sending them. Counting
+ *  doesn't have that constraint but reuses the same page size rather than
+ *  adding a second one to reason about. */
+const PAGE_SIZE = 100;
+
+export type EscalationPhase =
+	| { kind: "idle" }
+	| { kind: "counting"; countSoFar: number }
+	| { kind: "escalated"; total: number };
+
+interface UseEscalatedDeleteOptions {
+	mailboxId: string;
+	/** Owning account, forwarded to the unseen-count invalidation on completion. */
+	accountId?: string;
+	/** Disables escalation entirely (e.g. not searching, or desktop — this is a
+	 *  mobile-only affordance). Resets any in-flight phase back to idle. */
+	enabled: boolean;
+	/** Identifies the active predicate; escalation resets to idle whenever this
+	 *  changes (a different search is a different question). */
+	predicateKey: string;
+	searchQuery: EscalationSearchQuery;
+}
+
+export interface UseEscalatedDeleteResult {
+	phase: EscalationPhase;
+	/** Begin paging the predicate's full match set to find its total. */
+	escalate: () => void;
+	/** Stop whatever's running — counting or a delete — at the next page
+	 *  boundary. A no-op when nothing is running. */
+	stop: () => void;
+	/** Drop an escalated selection back to bounded without confirming anything. */
+	clear: () => void;
+	/** True while a chunked delete (bounded->100 ids, or the escalated
+	 *  predicate) is running. */
+	isDeleting: boolean;
+	deleteProgress: BulkDeleteProgress | undefined;
+	/**
+	 * Runs a chunked delete. Pass `ids` for a materialized (bounded) selection;
+	 * omit it to delete 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 feeds to
+	 * `resolveSelectionAfterDelete` to decide what selection looks like next.
+	 * 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.
+	 */
+	runDelete: (ids?: string[]) => Promise<DeleteRunOutcome>;
+}
+
+export const useEscalatedDelete = ({
+	mailboxId,
+	accountId,
+	enabled,
+	predicateKey,
+	searchQuery,
+}: UseEscalatedDeleteOptions): UseEscalatedDeleteResult => {
+	const [phase, setPhase] = useState<EscalationPhase>({ kind: "idle" });
+	const [isDeleting, setIsDeleting] = useState(false);
+	const [deleteProgress, setDeleteProgress] = useState<
+		BulkDeleteProgress | undefined
+	>(undefined);
+	const cancelRef = useRef(false);
+	const queryClient = useQueryClient();
+	const { pushError } = useErrorBanners();
+
+	// A different search (or leaving search/desktop) makes any in-flight
+	// escalation meaningless — it would otherwise keep counting or offering to
+	// delete a predicate the visible list no longer reflects.
+	// biome-ignore lint/correctness/useExhaustiveDependencies: enabled/predicateKey are trigger-only — the reset itself is unconditional, not a value read from either.
+	useEffect(() => {
+		cancelRef.current = true;
+		setPhase({ kind: "idle" });
+	}, [enabled, predicateKey]);
+
+	const searchQueryRef = useRef(searchQuery);
+	searchQueryRef.current = searchQuery;
+
+	const fetchIdsPage = useCallback<FetchIdsPage>(
+		async (continuationToken) => {
+			const { data } = await threadOperationsSearchThreads({
+				path: { mailboxId },
+				query: {
+					...searchQueryRef.current,
+					continuationToken,
+					limit: PAGE_SIZE,
+				},
+				throwOnError: true,
+			});
+			return {
+				ids: (data.items ?? []).map((item) => item.messageId),
+				continuationToken: data.continuationToken,
+			};
+		},
+		[mailboxId],
+	);
+
+	const deleteBatch = useCallback(async (ids: string[]) => {
+		const { data } = await messageBulkOperationsDeleteMessages({
+			body: { messageIds: ids },
+			throwOnError: true,
+		});
+		return data;
+	}, []);
+
+	const invalidateAfterDelete = useCallback(() => {
+		queryClient.invalidateQueries({
+			queryKey: threadOperationsListThreadsQueryKey({ path: { mailboxId } }),
+		});
+		queryClient.invalidateQueries({
+			queryKey: threadOperationsSearchThreadsQueryKey({ path: { mailboxId } }),
+		});
+		if (accountId) {
+			queryClient.invalidateQueries({
+				queryKey: mailboxOperationsListMailboxesQueryKey({
+					path: { accountId },
+				}),
+			});
+		}
+	}, [queryClient, mailboxId, accountId]);
+
+	const escalate = useCallback(() => {
+		cancelRef.current = false;
+		setPhase({ kind: "counting", countSoFar: 0 });
+		countMatches(
+			fetchIdsPage,
+			(countSoFar) => setPhase({ kind: "counting", countSoFar }),
+			() => cancelRef.current,
+		).then((result) => {
+			if (result.error) {
+				pushError(
+					buildMutationErrorBanner(
+						"Couldn't count matching messages",
+						"The count didn't finish.",
+						result.error,
+					),
+				);
+				setPhase({ kind: "idle" });
+				return;
+			}
+			if (result.cancelled) {
+				setPhase({ kind: "idle" });
+				return;
+			}
+			setPhase({ kind: "escalated", total: result.total });
+		});
+	}, [fetchIdsPage, pushError]);
+
+	const stop = useCallback(() => {
+		cancelRef.current = true;
+	}, []);
+
+	const clear = useCallback(() => {
+		cancelRef.current = true;
+		setPhase({ kind: "idle" });
+	}, []);
+
+	const runDelete = useCallback(
+		async (ids?: string[]): Promise<DeleteRunOutcome> => {
+			cancelRef.current = false;
+			setIsDeleting(true);
+			const onProgress = (progress: BulkDeleteProgress) =>
+				setDeleteProgress(progress);
+
+			const outcome =
+				ids !== undefined
+					? await runChunkedDelete(
+							ids,
+							deleteBatch,
+							onProgress,
+							() => cancelRef.current,
+						)
+					: await runPredicateDelete(
+							fetchIdsPage,
+							phase.kind === "escalated" ? phase.total : 0,
+							deleteBatch,
+							onProgress,
+							() => cancelRef.current,
+						);
+
+			setIsDeleting(false);
+			setDeleteProgress(undefined);
+			setPhase({ kind: "idle" });
+
+			if (outcome.error) {
+				pushError(
+					buildMutationErrorBanner(
+						outcome.done > 0
+							? `Stopped after ${outcome.done} — some messages weren't deleted`
+							: "Couldn't delete these messages",
+						"The delete didn't finish.",
+						outcome.error,
+					),
+				);
+			}
+			if (outcome.done > 0) {
+				invalidateAfterDelete();
+			}
+			return outcome;
+		},
+		[deleteBatch, fetchIdsPage, phase, pushError, invalidateAfterDelete],
+	);
+
+	return {
+		phase,
+		escalate,
+		stop,
+		clear,
+		isDeleting,
+		deleteProgress,
+		runDelete,
+	};
+};

package/src/lib/bug-report.test.ts

@@ -1,5 +1,12 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
+import {
+	QUARANTINE_REPORT_DISCLAIMER,
+	type QuarantineEntry,
+	quarantineDemoEntries,
+	quarantineIssueTitle,
+	quarantineReportSections,
+} from "@remit/ui";
 import type { BugReportContext } from "./bug-report";
 import { buildBugReportDetails, buildGitHubIssueUrl } from "./bug-report";
 
@@ -211,3 +218,88 @@ describe("buildGitHubIssueUrl — truncation to fit the URL budget", () => {
 		);
 	});
 });
+
+describe("quarantine reports", () => {
+	// A flat multipart/mixed of 200 parts — the shape that first broke the
+	// fence. A message with a pathological part count is precisely the message
+	// that fails to parse, so a long report is the common case, not the tail.
+	const entry: QuarantineEntry = {
+		...quarantineDemoEntries[0],
+		structure: {
+			contentType: "multipart/mixed",
+			parts: Array.from({ length: 200 }, () => ({
+				contentType: "application/octet-stream",
+			})),
+		},
+	};
+
+	const ctx = (over?: Partial<BugReportContext>): BugReportContext => ({
+		...baseCtx,
+		title: quarantineIssueTitle(entry),
+		quarantine: quarantineReportSections(entry),
+		...over,
+	});
+
+	const fenceCount = (body: string): number =>
+		(body.match(/^```/gm) ?? []).length;
+
+	it("carries the diagnostics section and the supplied title", () => {
+		const decoded = decode(
+			buildGitHubIssueUrl(
+				ctx({ quarantine: quarantineReportSections(quarantineDemoEntries[0]) }),
+			),
+		);
+		assert.ok(decoded.includes("UnterminatedMultipartBoundary"));
+		assert.ok(decoded.includes("Message quarantined:"));
+	});
+
+	it("truncates a long report without cutting inside the code fence", () => {
+		const url = buildGitHubIssueUrl(ctx());
+		const body = decode(url);
+		assert.ok(
+			url.length <= 8000,
+			`Expected a URL under 8000 chars, got ${url.length}`,
+		);
+		assert.ok(body.includes("truncated"), "Expected a truncation marker");
+		assert.equal(
+			fenceCount(body) % 2,
+			0,
+			`Unbalanced code fence in truncated body:\n${body.slice(-400)}`,
+		);
+	});
+
+	it("keeps the redaction disclaimer on a truncated report", () => {
+		const body = decode(buildGitHubIssueUrl(ctx()));
+		assert.ok(
+			body.includes(QUARANTINE_REPORT_DISCLAIMER),
+			"A truncated report must still state what was withheld",
+		);
+	});
+
+	it("keeps the reproduction template outside the code block", () => {
+		const body = decode(buildGitHubIssueUrl(ctx()));
+		const afterLastFence = body.slice(body.lastIndexOf("```") + 3);
+		assert.ok(afterLastFence.includes("## Steps to reproduce"));
+	});
+
+	it("truncates the longer section when a stack is present too", () => {
+		const url = buildGitHubIssueUrl(
+			ctx({ stack: "at foo\n".repeat(2000), errorMessage: "boom" }),
+		);
+		assert.ok(
+			url.length <= 8000,
+			`Expected a URL under 8000 chars, got ${url.length}`,
+		);
+	});
+
+	it("Copy full details keeps every part the URL had to drop", () => {
+		const parts = (text: string): number =>
+			(text.match(/- application\/octet-stream/g) ?? []).length;
+		const details = buildBugReportDetails(ctx());
+		assert.equal(parts(details), 200);
+		assert.ok(
+			parts(decode(buildGitHubIssueUrl(ctx()))) < 200,
+			"Expected the URL body to have dropped parts",
+		);
+	});
+});

package/src/lib/bug-report.ts

@@ -1,3 +1,4 @@
+import type { QuarantineReportSections } from "@remit/ui";
 import {
 	APP_BUILD_TIME,
 	APP_SHA,
@@ -15,7 +16,7 @@ import { getRecentErrors } from "./console-errors";
 const MAX_ISSUE_URL_LENGTH = 7500;
 
 const TRUNCATION_MARKER =
-	"\n… (truncated — use “Copy full details” for the full stacktrace)";
+	"\n… (truncated — the copy action on this screen has the full report)";
 
 export interface BugReportContext {
 	appSha: string;
@@ -33,6 +34,14 @@ export interface BugReportContext {
 	stack?: string;
 	/** React component stack from the error boundary, when available. */
 	componentStack?: string;
+	/**
+	 * A quarantined message's diagnostics, when the report is filed from the
+	 * quarantine surface. Split into sections by `quarantineReportSections` in
+	 * @remit/ui so the MIME tree is fenced after truncation, never before.
+	 */
+	quarantine?: QuarantineReportSections;
+	/** Overrides the derived title, e.g. for a quarantine report. */
+	title?: string;
 }
 
 /** Fields callers can seed from a caught error. */
@@ -40,6 +49,9 @@ export interface BugReportSeed {
 	errorMessage?: string;
 	stack?: string;
 	componentStack?: string;
+	quarantine?: QuarantineReportSections;
+	/** Overrides the derived title, e.g. for a quarantine report. */
+	title?: string;
 }
 
 export function buildBugReportContext(seed?: BugReportSeed): BugReportContext {
@@ -56,6 +68,8 @@ export function buildBugReportContext(seed?: BugReportSeed): BugReportContext {
 		errorMessage: seed?.errorMessage,
 		stack: seed?.stack,
 		componentStack: seed?.componentStack,
+		quarantine: seed?.quarantine,
+		title: seed?.title,
 	};
 }
 
@@ -63,7 +77,16 @@ function fencedBlock(content: string): string {
 	return ["```", content, "```"].join("\n");
 }
 
-function buildIssueBody(ctx: BugReportContext, stack?: string): string {
+interface BodyOverrides {
+	stack?: string;
+	/** Replaces the MIME-tree section only; it is fenced after this is applied. */
+	quarantineStructure?: string;
+}
+
+function buildIssueBody(
+	ctx: BugReportContext,
+	overrides?: BodyOverrides,
+): string {
 	const errorSection =
 		ctx.recentErrors.length > 0
 			? ctx.recentErrors.map((e) => `  - ${e}`).join("\n")
@@ -85,7 +108,20 @@ function buildIssueBody(ctx: BugReportContext, stack?: string): string {
 		lines.push("## Error", ctx.errorMessage, "");
 	}
 
-	const resolvedStack = stack ?? ctx.stack;
+	if (ctx.quarantine) {
+		const structure =
+			overrides?.quarantineStructure ?? ctx.quarantine.structure;
+		lines.push(
+			ctx.quarantine.head,
+			"",
+			fencedBlock(structure),
+			"",
+			ctx.quarantine.disclaimer,
+			"",
+		);
+	}
+
+	const resolvedStack = overrides?.stack ?? ctx.stack;
 	if (resolvedStack) {
 		lines.push("## Stacktrace", fencedBlock(resolvedStack), "");
 	}
@@ -111,6 +147,7 @@ function buildIssueBody(ctx: BugReportContext, stack?: string): string {
 }
 
 function buildIssueTitle(ctx: BugReportContext): string {
+	if (ctx.title) return ctx.title;
 	if (!ctx.errorMessage) return "Bug: ";
 	const firstLine = ctx.errorMessage.split("\n")[0].trim();
 	const clipped =
@@ -118,10 +155,10 @@ function buildIssueTitle(ctx: BugReportContext): string {
 	return `Bug: ${clipped}`;
 }
 
-function issueUrl(ctx: BugReportContext, stack?: string): string {
+function issueUrl(ctx: BugReportContext, overrides?: BodyOverrides): string {
 	const params = new URLSearchParams({
 		title: buildIssueTitle(ctx),
-		body: buildIssueBody(ctx, stack),
+		body: buildIssueBody(ctx, overrides),
 	});
 	return `${GITHUB_NEW_ISSUE_URL}?${params.toString()}`;
 }
@@ -137,40 +174,63 @@ export function buildBugReportDetails(ctx: BugReportContext): string {
 
 /**
  * Build a prefilled GitHub new-issue URL. When the full body would exceed the
- * URL budget, the stacktrace is truncated (binary-searched to the longest
- * prefix that fits) and marked; everything else is preserved. The component
- * stack is dropped from the URL when truncation kicks in — it survives in the
- * "Copy full details" report.
+ * URL budget, the longest truncatable section — a stacktrace, or a quarantine
+ * report's MIME tree — is binary-searched to the longest prefix that fits and
+ * marked; everything else is preserved. The component stack is dropped from
+ * the URL when truncation kicks in — it survives in the copy-details report.
+ *
+ * The quarantine MIME tree is handed over unfenced and fenced by
+ * `buildIssueBody` afterwards, so a cut can never land inside a code fence.
+ * The disclaimer is appended by the builder rather than carried in the
+ * truncated text, so a truncated report still states what was withheld.
  */
 export function buildGitHubIssueUrl(ctx: BugReportContext): string {
 	const full = issueUrl(ctx);
 	if (full.length <= MAX_ISSUE_URL_LENGTH) return full;
 
-	const stack = ctx.stack ?? "";
 	const withoutComponentStack: BugReportContext = {
 		...ctx,
 		componentStack: undefined,
 	};
 
-	let lo = 0;
-	let hi = stack.length;
-	let best = 0;
-	while (lo <= hi) {
-		const mid = (lo + hi) >> 1;
-		const candidate = issueUrl(
-			withoutComponentStack,
-			stack.slice(0, mid) + TRUNCATION_MARKER,
-		);
-		if (candidate.length <= MAX_ISSUE_URL_LENGTH) {
-			best = mid;
-			lo = mid + 1;
-		} else {
-			hi = mid - 1;
+	// Both sections can be present — a seed is not discriminated — and cutting
+	// one to nothing does not necessarily fit the other. Truncate the longest
+	// first and keep going while the budget is still exceeded.
+	const sections: Array<[keyof BodyOverrides, string]> = [];
+	if (ctx.stack) sections.push(["stack", ctx.stack]);
+	if (ctx.quarantine?.structure) {
+		sections.push(["quarantineStructure", ctx.quarantine.structure]);
+	}
+	sections.sort((a, b) => b[1].length - a[1].length);
+
+	let overrides: BodyOverrides = {};
+	for (const [field, text] of sections) {
+		if (
+			issueUrl(withoutComponentStack, overrides).length <= MAX_ISSUE_URL_LENGTH
+		) {
+			break;
 		}
+		let lo = 0;
+		let hi = text.length;
+		let best = 0;
+		while (lo <= hi) {
+			const mid = (lo + hi) >> 1;
+			const candidate = issueUrl(withoutComponentStack, {
+				...overrides,
+				[field]: text.slice(0, mid) + TRUNCATION_MARKER,
+			});
+			if (candidate.length <= MAX_ISSUE_URL_LENGTH) {
+				best = mid;
+				lo = mid + 1;
+			} else {
+				hi = mid - 1;
+			}
+		}
+		overrides = {
+			...overrides,
+			[field]: text.slice(0, best) + TRUNCATION_MARKER,
+		};
 	}
 
-	return issueUrl(
-		withoutComponentStack,
-		stack.slice(0, best) + TRUNCATION_MARKER,
-	);
+	return issueUrl(withoutComponentStack, overrides);
 }