@remit/web-client 0.0.244 → 0.0.246

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.244",
+  "version": "0.0.246",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/config-import/ConfigImportWizard.tsx

@@ -565,6 +565,7 @@ export function ConfigImportWizard({ onDone }: ConfigImportWizardProps) {
 					results={sectionResults(report)}
 					message={failed?.message ?? "The import stopped before it finished."}
 					raw={`${failed?.code ?? WRITE_FAILURE_CODE}: ${failed?.message ?? "no message"}`}
+					nothingLanded={!report.applied}
 					onBack={goToFile}
 					onNext={() => runImport("apply", "merge")}
 				/>

package/src/components/config-import/config-import.fixtures.ts

@@ -181,6 +181,32 @@ export const partialImportReport: RemitImapConfigImportReport = report({
 	warnings: folderWarnings,
 });
 
+/**
+ * The same stop with no section written: a store that holds the import in one
+ * transaction undoes the earlier writes, so the report carries no landed item
+ * and `applied` is false. Warnings go with them.
+ */
+export const nothingLandedImportReport: RemitImapConfigImportReport = report({
+	applied: false,
+	items: [
+		item(
+			"filters",
+			"Bonnetjes",
+			"rejected",
+			"the filter store refused the write",
+		),
+	],
+	errors: [
+		{
+			code: "import_write_failed",
+			message:
+				"the filter store refused the write Nothing was written; the import stopped here.",
+			details: { section: "filters", key: "Bonnetjes" },
+		},
+	],
+	warnings: [],
+});
+
 export const importedAccounts: ImportedAccount[] = [
 	{
 		accountId: "acct-ischen",

package/src/components/config-import/config-import.stories.tsx

@@ -19,6 +19,7 @@ import {
 	cleanRunReport,
 	dryRunReport,
 	importedAccounts,
+	nothingLandedImportReport,
 	partialImportReport,
 	rejectedReports,
 } from "./config-import.fixtures";
@@ -416,6 +417,7 @@ export const PartiallyLandedImportUnnamed: Story = {
 				results={sectionResults(report)}
 				message={writeFailure(report)?.message ?? ""}
 				raw="import_write_failed: the store refused the write"
+				nothingLanded={!report.applied}
 			/>
 		);
 	},
@@ -428,6 +430,23 @@ export const PartiallyLandedImport: Story = {
 			results={sectionResults(partialImportReport)}
 			message={writeFailure(partialImportReport)?.message ?? ""}
 			raw={`import_write_failed: ${writeFailure(partialImportReport)?.message ?? ""}`}
+			nothingLanded={!partialImportReport.applied}
+		/>
+	),
+};
+
+/**
+ * The same stop with no section written — a transaction undid the earlier
+ * writes, or the first write was the one that failed. No section may carry a
+ * tick, and the screen counts nothing as landed.
+ */
+export const NothingLandedImport: Story = {
+	render: () => (
+		<StepPartialImport
+			results={sectionResults(nothingLandedImportReport)}
+			message={writeFailure(nothingLandedImportReport)?.message ?? ""}
+			raw={`import_write_failed: ${writeFailure(nothingLandedImportReport)?.message ?? ""}`}
+			nothingLanded={!nothingLandedImportReport.applied}
 		/>
 	),
 };

package/src/components/config-import/steps.tsx

@@ -704,9 +704,11 @@ export function StepFileRejected({
 }
 
 /**
- * A section nobody can vouch for reads as failed, never as pending. Pending
- * says "still coming"; this section is finished and its outcome is unknown,
- * which is the row the reader has to go and check for themselves.
+ * A section nobody can vouch for reads as failed, never as pending: it is
+ * finished, and an outcome the reader has to go and check for themselves is
+ * not a quiet empty row. Pending is the empty row — nothing from the file went
+ * into this section, whether the import never reached it or reached it and
+ * wrote none of it — and it is the state that carries no tick.
  */
 function resultState(state: SectionResult["state"]) {
 	if (state === "landed") return "ok" as const;
@@ -718,6 +720,7 @@ export function StepPartialImport({
 	results,
 	message,
 	raw,
+	nothingLanded,
 	onBack,
 	onNext,
 }: {
@@ -725,6 +728,8 @@ export function StepPartialImport({
 	/** The server's own account of what survived, which only it knows. */
 	message: string;
 	raw: string;
+	/** No section of the file was written — not that the instance is unchanged. */
+	nothingLanded: boolean;
 } & StepNav) {
 	const landed = results.filter((result) => result.state === "landed").length;
 	const unknown = results.some((result) => result.state === "unknown");
@@ -732,11 +737,17 @@ export function StepPartialImport({
 		<WizardShell
 			steps={IMPORT_STEPS}
 			activeStep={1}
-			title="The import stopped part-way"
+			title={
+				nothingLanded
+					? "The import stopped, and nothing landed"
+					: "The import stopped part-way"
+			}
 			subtitle={
-				unknown
-					? "It did not say how far it got, so check Settings before importing again."
-					: `${landed} of ${results.length} sections landed.`
+				nothingLanded
+					? "No section of the file was written."
+					: unknown
+						? "It did not say how far it got, so check Settings before importing again."
+						: `${landed} of ${results.length} sections landed.`
 			}
 			footer={
 				<>
@@ -744,7 +755,7 @@ export function StepPartialImport({
 						Choose another file
 					</Button>
 					<Button variant="primary" onClick={onNext}>
-						Retry the rest
+						{nothingLanded ? "Try the import again" : "Retry the rest"}
 					</Button>
 				</>
 			}

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

@@ -58,23 +58,6 @@ const UndoHarness = () => {
 let harness: DomHarness | undefined;
 let http: HttpMock;
 
-const waitFor = async (
-	predicate: () => boolean,
-	timeoutMs = 2000,
-): Promise<void> => {
-	if (!harness) throw new Error("nothing mounted");
-	const deadline = Date.now() + timeoutMs;
-	while (!predicate()) {
-		if (Date.now() > deadline) {
-			throw new Error(
-				`waitFor: condition never became true within ${timeoutMs}ms`,
-			);
-		}
-		await harness.flush();
-		await harness.wait(5);
-	}
-};
-
 afterEach(() => {
 	harness?.close();
 	harness = undefined;
@@ -95,14 +78,14 @@ describe("the spam quick action disables itself for the duration of its own requ
 
 		const button = harness.byText("button", "Report spam") as HTMLButtonElement;
 		harness.click(button);
-		await waitFor(() => button.textContent === "Reporting…");
+		await harness.waitFor(() => button.textContent === "Reporting…");
 
 		assert.equal(button.disabled, true, "a control mid-request must disable");
 		harness.click(button);
 
 		assert.ok(resolveRequest, "the request never reached the mock");
 		resolveRequest?.();
-		await waitFor(() => button.textContent === "Report spam");
+		await harness.waitFor(() => button.textContent === "Report spam");
 
 		assert.equal(http.to("/messages/report-spam").length, 1);
 	});
@@ -120,14 +103,14 @@ describe("the spam quick action disables itself for the duration of its own requ
 
 		const button = harness.byText("button", "Not spam") as HTMLButtonElement;
 		harness.click(button);
-		await waitFor(() => button.textContent === "Undoing…");
+		await harness.waitFor(() => button.textContent === "Undoing…");
 
 		assert.equal(button.disabled, true, "a control mid-request must disable");
 		harness.click(button);
 
 		assert.ok(resolveRequest, "the request never reached the mock");
 		resolveRequest?.();
-		await waitFor(() => button.textContent === "Not spam");
+		await harness.waitFor(() => button.textContent === "Not spam");
 
 		assert.equal(http.to("/messages/not-spam").length, 1);
 	});

package/src/components/mail/intelligence-semantic-off.render.test.ts

@@ -62,23 +62,6 @@ const respond =
 let harness: DomHarness | undefined;
 let http: HttpMock;
 
-const waitFor = async (
-	predicate: () => boolean,
-	timeoutMs = 2000,
-): Promise<void> => {
-	if (!harness) throw new Error("nothing mounted");
-	const deadline = Date.now() + timeoutMs;
-	while (!predicate()) {
-		if (Date.now() > deadline) {
-			throw new Error(
-				`waitFor: condition never became true within ${timeoutMs}ms`,
-			);
-		}
-		await harness.flush();
-		await harness.wait(5);
-	}
-};
-
 afterEach(() => {
 	harness?.close();
 	harness = undefined;
@@ -91,7 +74,7 @@ describe("the Similar messages section on an instance with semantic search off",
 		harness = createDomHarness();
 		harness.renderApp(createElement(SimilarHarness));
 
-		await waitFor(
+		await harness.waitFor(
 			() => harness?.text().includes("Semantic search is off") === true,
 		);
 
@@ -107,7 +90,7 @@ describe("the Similar messages section on an instance with semantic search off",
 		harness = createDomHarness();
 		harness.renderApp(createElement(SimilarHarness));
 
-		await waitFor(
+		await harness.waitFor(
 			() => harness?.text().includes("Semantic search is off") === true,
 		);
 		await harness.wait(30);
@@ -121,7 +104,7 @@ describe("the Similar messages section on an instance with semantic search off",
 		harness = createDomHarness();
 		harness.renderApp(createElement(SimilarHarness));
 
-		await waitFor(() => http.to("/search/semantic").length > 0);
+		await harness.waitFor(() => http.to("/search/semantic").length > 0);
 
 		assert.doesNotMatch(harness.text(), /Semantic search is off/);
 	});

package/src/components/settings/QuarantinePanel.delimiter.test.ts

@@ -9,6 +9,7 @@
 
 import assert from "node:assert/strict";
 import { afterEach, describe, it } from "node:test";
+import { meOperationsListQuarantineOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import { createElement } from "react";
 import { createDomHarness, type DomHarness } from "../../test-support/dom";
 import { type HttpMock, httpError, mockFetch } from "../../test-support/http";
@@ -62,26 +63,47 @@ afterEach(() => {
 	http = undefined;
 });
 
-const mount = async (mailboxes: () => unknown): Promise<DomHarness> => {
+/**
+ * The quarantine list is the read that gives the pane something to paint: until
+ * it has landed, an assertion that no path is showing passes because there are
+ * no rows at all, which is not what any of these cases claims to test.
+ */
+const quarantineLanded = (view: DomHarness): boolean =>
+	view.queryClient.getQueryState(meOperationsListQuarantineOptions().queryKey)
+		?.status === "success";
+
+const mount = async (
+	mailboxes: () => unknown,
+	settled: (view: DomHarness) => boolean,
+	description: string,
+): Promise<DomHarness> => {
 	http = mockFetch((call) => {
 		if (call.path.endsWith("/config")) return CONFIG;
 		if (call.path.endsWith("/mailboxes")) return mailboxes();
 		if (call.path.endsWith("/quarantine")) return QUARANTINE;
 		return {};
 	});
-	harness = createDomHarness();
-	harness.renderApp(createElement(QuarantinePanel));
+	const view = createDomHarness();
+	harness = view;
+	view.renderApp(createElement(QuarantinePanel));
 	// Two waves: the mailbox-list fan-out is keyed on the accounts `/config`
-	// returns, so it cannot even start until that first read has settled.
-	await harness.flush();
-	await harness.wait(0);
-	await harness.flush();
-	return harness;
+	// returns, so it cannot even start until that first read has settled. How
+	// many turns those waves take is the runner's business, so each case names
+	// the state it needs instead of counting them.
+	await view.waitFor(() => settled(view), description);
+	return view;
 };
 
 describe("QuarantinePanel folder names", () => {
 	it("waits for the account's delimiter rather than cutting on a guess", async () => {
-		const view = await mount(() => new Promise(() => {}));
+		// The mailbox read never resolves here, so settled means every read that
+		// can land has: the entries are in hand and only the delimiter is missing.
+		const view = await mount(
+			() => new Promise(() => {}),
+			(pane) =>
+				quarantineLanded(pane) && (http?.to("/mailboxes").length ?? 0) > 0,
+			"the quarantine list to land while the mailbox read hangs",
+		);
 
 		assert.match(view.text(), /Checking for messages set aside/);
 		assert.doesNotMatch(
@@ -91,7 +113,11 @@ describe("QuarantinePanel folder names", () => {
 	});
 
 	it("names the folder by its leaf once the delimiter has arrived", async () => {
-		const view = await mount(() => MAILBOXES);
+		const view = await mount(
+			() => MAILBOXES,
+			(pane) => /Q3/.test(pane.text()),
+			"the folder leaf to be named",
+		);
 
 		assert.match(view.text(), /Q3/);
 		assert.doesNotMatch(
@@ -101,7 +127,11 @@ describe("QuarantinePanel folder names", () => {
 	});
 
 	it("reports a failed mailbox read instead of naming folders on a guess", async () => {
-		const view = await mount(() => httpError(500));
+		const view = await mount(
+			() => httpError(500),
+			(pane) => /role="alert"/.test(pane.html()),
+			"the failed mailbox read to be reported",
+		);
 
 		assert.match(view.html(), /role="alert"/);
 		assert.doesNotMatch(

package/src/lib/config-import.test.ts

@@ -151,6 +151,75 @@ test("a stopped import splits the write order into landed, failed and never reac
 	assert.equal(byId.get("settings")?.state, "not-attempted");
 });
 
+test("an import the server says wrote nothing marks no section landed, whatever ran before the stop", () => {
+	const results = sectionResults(
+		reportOf({
+			applied: false,
+			items: [
+				item("filters", "Receipts", "rejected", "the store refused the write"),
+			],
+			errors: [
+				{
+					code: "import_write_failed",
+					message:
+						"the store refused the write Nothing was written; the import stopped here.",
+					details: { section: "filters", key: "Receipts" },
+				},
+			],
+		}),
+	);
+
+	const byId = new Map(results.map((result) => [result.section, result]));
+	assert.equal(byId.get("accounts")?.state, "not-landed");
+	assert.match(
+		byId.get("accounts")?.detail ?? "",
+		/Nothing from this section was written/,
+	);
+	assert.equal(byId.get("labels")?.state, "not-landed");
+	assert.equal(byId.get("filters")?.state, "failed");
+	assert.equal(byId.get("addressFlags")?.state, "not-attempted");
+	assert.equal(byId.get("settings")?.state, "not-attempted");
+	assert.equal(results.filter((result) => result.state === "landed").length, 0);
+});
+
+test("a first write that fails on a store with no transaction lands nothing either", () => {
+	const results = sectionResults(
+		reportOf({
+			applied: false,
+			items: [
+				item("accounts", "a@example.test", "rejected", "the store refused"),
+			],
+			errors: [
+				{
+					code: "import_write_failed",
+					message:
+						"the store refused The items above it were written and remain; the import stopped here.",
+					details: { section: "accounts", key: "a@example.test" },
+				},
+			],
+		}),
+	);
+
+	const byId = new Map(results.map((result) => [result.section, result]));
+	assert.equal(byId.get("accounts")?.state, "failed");
+	assert.equal(byId.get("labels")?.state, "not-attempted");
+	assert.equal(results.filter((result) => result.state === "landed").length, 0);
+});
+
+test("nothing written and no section named is a known outcome, not an unknown one", () => {
+	const results = sectionResults(
+		reportOf({
+			applied: false,
+			errors: [{ code: "import_write_failed", message: "the store refused" }],
+		}),
+	);
+
+	assert.deepEqual(
+		[...new Set(results.map((result) => result.state))],
+		["not-landed"],
+	);
+});
+
 test("a pending folder names the setting waiting on it, and repeats are folded", () => {
 	const folders = pendingFolders(
 		reportOf({

package/src/lib/config-import.ts

@@ -285,7 +285,12 @@ export const writeFailure = (
 ): ApiError | undefined =>
 	report.errors.find((it) => it.code === WRITE_FAILURE_CODE);
 
-export type SectionOutcome = "landed" | "failed" | "not-attempted" | "unknown";
+export type SectionOutcome =
+	| "landed"
+	| "not-landed"
+	| "failed"
+	| "not-attempted"
+	| "unknown";
 
 export interface SectionResult {
 	section: ImportSection;
@@ -294,14 +299,21 @@ export interface SectionResult {
 	detail: string;
 }
 
+const NOT_LANDED_DETAIL = "Nothing from this section was written.";
+
 /**
- * What a stopped import left behind, section by section. The write order is
- * fixed, so the section the failure names splits the document in three: what is
- * before it ran, it did not, and what is after it was never reached. The
- * server's own sentence says whether the earlier writes survived, because only
- * the backend knows whether it had a transaction.
+ * What a stopped import wrote, section by section. The write order is fixed, so
+ * the section the failure names splits the document in three: what is before it
+ * ran, it did not, and what is after it was never reached.
+ *
+ * `applied` is the server's answer on whether any of it was written, because
+ * only the backend knows whether it had a transaction: false means no section
+ * of the file was written, however far the write order got. It does not say
+ * why — a transaction undid the earlier writes, or the first one failed — and
+ * the report carries no flag that does, so this says what the file put in and
+ * never what the instance now holds.
  *
- * A failure that names no section leaves that split undecidable, and every
+ * A failure that names no section leaves the split undecidable, and every
  * section reads `unknown` rather than `landed`. Telling someone their accounts
  * are in when nothing said so is the one answer this screen must never give:
  * they would stop looking.
@@ -312,6 +324,7 @@ export const sectionResults = (
 	const failure = writeFailure(report);
 	const named = failure?.details?.section;
 	const failedSection = named ? asSection(named) : undefined;
+	const nothingLanded = !report.applied;
 	const counts = new Map<ImportSection, number>();
 	for (const item of report.items) {
 		if (asVerdict(item.verdict) === "rejected") continue;
@@ -320,16 +333,20 @@ export const sectionResults = (
 		counts.set(section, (counts.get(section) ?? 0) + 1);
 	}
 
-	if (!failedSection) {
-		const detail = named
-			? `The import stopped in "${named}", which this instance does not recognise, so it cannot say whether this section was written.`
-			: "The import stopped without naming where, so it cannot say whether this section was written. Open Settings to see what is here.";
-		return IMPORT_SECTION_ORDER.map((section) => ({
+	const everySection = (state: SectionOutcome, detail: string) =>
+		IMPORT_SECTION_ORDER.map((section) => ({
 			section,
 			title: SECTION_TITLES[section],
-			state: "unknown" as const,
+			state,
 			detail,
 		}));
+
+	if (!failedSection) {
+		if (nothingLanded) return everySection("not-landed", NOT_LANDED_DETAIL);
+		const detail = named
+			? `The import stopped in "${named}", which this instance does not recognise, so it cannot say whether this section was written.`
+			: "The import stopped without naming where, so it cannot say whether this section was written. Open Settings to see what is here.";
+		return everySection("unknown", detail);
 	}
 
 	const failedAt = IMPORT_SECTION_ORDER.indexOf(failedSection);
@@ -352,6 +369,14 @@ export const sectionResults = (
 				detail: "Not attempted — the import stopped before this section.",
 			};
 		}
+		if (nothingLanded) {
+			return {
+				section,
+				title,
+				state: "not-landed" as const,
+				detail: NOT_LANDED_DETAIL,
+			};
+		}
 		const written = counts.get(section) ?? 0;
 		return {
 			section,

package/src/test-support/dom.ts

@@ -39,6 +39,16 @@ export interface DomHarness {
 	flush: () => Promise<void>;
 	/** Let real timers fire — some flows stage their steps on a delay. */
 	wait: (ms: number) => Promise<void>;
+	/**
+	 * Pump the render until `predicate` holds, then return with the DOM current.
+	 * A drain counted in ticks is a guess about how many awaits a read chain
+	 * takes, and a loaded runner always finds one more; a condition is not.
+	 */
+	waitFor: (
+		predicate: () => boolean,
+		description?: string,
+		timeoutMs?: number,
+	) => Promise<void>;
 }
 
 export interface DomOptions {
@@ -186,6 +196,24 @@ export const createDomHarness = (options: DomOptions = {}): DomHarness => {
 				await new Promise((resolve) => setTimeout(resolve, ms));
 			});
 		},
+		waitFor: async (
+			predicate,
+			description = "the render to settle",
+			timeoutMs = 2_000,
+		) => {
+			const deadline = Date.now() + timeoutMs;
+			for (;;) {
+				await harness.flush();
+				if (predicate()) return;
+				if (Date.now() > deadline) {
+					const shown = harness.text().trim() || "(nothing rendered)";
+					throw new Error(
+						`waited ${timeoutMs}ms for ${description}; the render shows: ${shown.slice(0, 400)}`,
+					);
+				}
+				await harness.wait(1);
+			}
+		},
 		flush: async () => {
 			// Enough turns for a chain of awaits — form validation, then the
 			// mutation, then its `onSuccess` — to settle.