@remit/web-client 0.0.258 → 0.0.260

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.258",
+  "version": "0.0.260",
   "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/compose/FromSelector.render.test.ts

@@ -0,0 +1,99 @@
+/**
+ * Issue #1014: when compose cannot resolve the sending account, the `<select>`
+ * had no option carrying `value=""`, so the browser fell back to showing the
+ * first account's address even though nothing was actually selected. The
+ * unresolved state now gets its own disabled placeholder option, so no real
+ * identity is shown while nothing is chosen.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { configOperationsGetConfigQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { makeAccount, makeConfig } from "../../test-support/fixtures";
+import { FromSelector } from "./FromSelector";
+
+let harness: DomHarness | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+const ACCOUNTS = [
+	makeAccount({ accountId: "acc-1", email: "alice@example.com" }),
+	makeAccount({ accountId: "acc-2", email: "bob@example.com" }),
+];
+
+const mount = (selectedAccountId: string | undefined): DomHarness => {
+	harness = createDomHarness();
+	harness.queryClient.setQueryData(
+		configOperationsGetConfigQueryKey(),
+		makeConfig(ACCOUNTS),
+	);
+	harness.renderApp(
+		createElement(FromSelector, {
+			selectedAccountId,
+			onSelect: () => undefined,
+		}),
+	);
+	return harness;
+};
+
+const select = (dom: DomHarness): HTMLSelectElement => {
+	const found = dom.query<HTMLSelectElement>("#from-account-selector");
+	if (!found) throw new Error("the from-account select is not mounted");
+	return found;
+};
+
+describe("FromSelector with an unresolved account (#1014)", () => {
+	it("shows a disabled placeholder instead of the first account's address", () => {
+		const dom = mount(undefined);
+		const node = select(dom);
+
+		assert.equal(node.value, "", "the select should sit on the placeholder");
+
+		const placeholder =
+			node.querySelector<HTMLOptionElement>('option[value=""]');
+		assert.ok(placeholder, "no placeholder option was rendered");
+		assert.equal(
+			placeholder.disabled,
+			true,
+			"the placeholder option should not be a pickable account",
+		);
+		assert.notEqual(
+			placeholder.textContent,
+			ACCOUNTS[0]?.email,
+			"the placeholder must not read as the first account's address",
+		);
+	});
+
+	it("selects the resolved account and shows its address", () => {
+		const dom = mount("acc-2");
+		const node = select(dom);
+
+		assert.equal(node.value, "acc-2");
+		assert.equal(
+			node.selectedOptions[0]?.textContent,
+			"bob@example.com",
+			"the selected option should show the resolved account's address",
+		);
+	});
+
+	it("shows the placeholder when selectedAccountId names an account no longer in config", () => {
+		const dom = mount("acc-missing");
+		const node = select(dom);
+
+		assert.equal(node.value, "", "the select should sit on the placeholder");
+
+		const placeholder =
+			node.querySelector<HTMLOptionElement>('option[value=""]');
+		assert.ok(placeholder, "no placeholder option was rendered");
+		assert.notEqual(
+			node.selectedOptions[0]?.textContent,
+			ACCOUNTS[0]?.email,
+			"an unresolved selection must not read as the first account's address",
+		);
+	});
+});

package/src/components/compose/FromSelector.stories.tsx

@@ -0,0 +1,61 @@
+import { configOperationsGetConfigQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { makeAccount, makeConfig } from "../../test-support/fixtures";
+import { FromSelector } from "./FromSelector";
+
+/**
+ * The compose From line (#1014). With more than one configured account it is
+ * a real picker; the unresolved state — no account chosen because the source
+ * mailbox could not be matched to one — gets a disabled placeholder option
+ * rather than silently falling back to the first account's address.
+ */
+
+const ACCOUNTS = [
+	makeAccount({ accountId: "acc-1", email: "alice@example.com" }),
+	makeAccount({ accountId: "acc-2", email: "bob@example.com" }),
+];
+
+function seededClient(): QueryClient {
+	const client = new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+	client.setQueryData(
+		configOperationsGetConfigQueryKey(),
+		makeConfig(ACCOUNTS),
+	);
+	return client;
+}
+
+const meta: Meta<typeof FromSelector> = {
+	title: "Components/FromSelector",
+	component: FromSelector,
+	parameters: { layout: "padded" },
+	decorators: [
+		(Story) => (
+			<QueryClientProvider client={seededClient()}>
+				<Story />
+			</QueryClientProvider>
+		),
+	],
+	args: {
+		onSelect: () => undefined,
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof FromSelector>;
+
+/** A resolved account, picked from the configured accounts. */
+export const Resolved: Story = {
+	args: { selectedAccountId: "acc-2" },
+};
+
+/**
+ * No account resolved — the source mailbox could not be matched to a
+ * configured account. The select shows a disabled placeholder instead of
+ * falling back to the first account's address.
+ */
+export const Unresolved: Story = {
+	args: { selectedAccountId: undefined },
+};

package/src/components/compose/FromSelector.tsx

@@ -39,6 +39,8 @@ export const FromSelector = ({
 		);
 	}
 
+	const resolved = accounts.some((a) => a.accountId === selectedAccountId);
+
 	return (
 		<div className="flex items-start gap-2">
 			<label
@@ -49,13 +51,18 @@ export const FromSelector = ({
 			</label>
 			<select
 				id="from-account-selector"
-				value={selectedAccountId ?? ""}
+				value={resolved ? selectedAccountId : ""}
 				onChange={(e) => {
 					const account = accounts.find((a) => a.accountId === e.target.value);
 					if (account) onSelect(account);
 				}}
 				className="flex-1 px-2 py-1.5 border rounded-md bg-canvas text-sm"
 			>
+				{!resolved && (
+					<option value="" disabled>
+						Choose an account
+					</option>
+				)}
 				{accounts.map((account) => (
 					<option key={account.accountId} value={account.accountId}>
 						{account.email}

package/src/components/config-import/ConfigImportWizard.flow.test.ts

@@ -19,9 +19,7 @@ import assert from "node:assert/strict";
 import { afterEach, describe, it } from "node:test";
 import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
 import { createElement } from "react";
-import { ApiError } from "../../lib/api";
 import "../../lib/client";
-import { shouldEscalate, softErrorStatuses } from "../../lib/error-classifier";
 import { __resetFatalError, getCurrentFatalError } from "../../lib/fatal-error";
 import {
 	handleMutationCacheError,
@@ -196,28 +194,18 @@ describe("ConfigImportWizard — an instance that is not empty", () => {
 
 	/**
 	 * The other half of reaching that screen: the refusal must not also take the
-	 * app to the fatal page over it. That decision is `shouldEscalate` reading
-	 * the mutation's meta, and it is pinned here rather than through the wizard
-	 * because under this loader `lib/client.ts` and the generated SDK resolve
-	 * `client.gen` through two specifiers (`…/client.gen.ts` and `./client.gen.js`)
-	 * and so hold two client instances — the error interceptor registers on one
-	 * and the request goes through the other, which never happens under Vite,
-	 * where both specifiers resolve to the same module.
+	 * app to the fatal page over it. Driven through the wizard, so it holds the
+	 * whole chain — the error interceptor stamping the status on the thrown
+	 * `ApiError`, and the mutation's meta telling `shouldEscalate` to leave 409
+	 * to the caller.
 	 */
-	it("keeps the 409 off the fatal page, and still escalates a 401", () => {
-		const meta = softErrorStatuses(409);
-		assert.equal(
-			shouldEscalate(new ApiError("not empty", 409, {}), meta, "user"),
-			false,
-		);
-		assert.equal(
-			shouldEscalate(new ApiError("signed out", 401, {}), meta, "user"),
-			true,
-		);
-		assert.equal(
-			shouldEscalate(new ApiError("broken", 500, {}), meta, "user"),
-			true,
-		);
+	it("keeps the 409 off the fatal page", async () => {
+		const dom = start({ onImport: conflicted });
+		await pickFile(dom, "config.json", CONFIG);
+		dom.click(checkButton(dom));
+		await dom.flush();
+
+		assert.equal(getCurrentFatalError(), null);
 	});
 
 	it("does not record an import when the reader aborts the 409", async () => {

package/src/lib/client.test.ts

@@ -1,6 +1,9 @@
 import assert from "node:assert/strict";
 import { afterEach, describe, it } from "node:test";
+import { trashOperationsEmptyTrashMutation } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import { trashOperationsEmptyTrash } from "@remit/api-http-client/sdk.gen.ts";
+import { QueryClient } from "@tanstack/react-query";
+import { getRuntimeConfig } from "../runtime-config";
 import { type HttpMock, mockFetch } from "../test-support/http";
 import { ApiError } from "./api";
 import "./client";
@@ -66,3 +69,46 @@ describe("the error interceptor", () => {
 		assert.equal(error.message, "Request failed with status 503");
 	});
 });
+
+/**
+ * `client.ts` reaches the generated client as `@remit/api-http-client/client.gen.ts`
+ * while the generated code reaches it as `./client.gen.js`. Both must land on
+ * one module: two would leave every generated call on the generated default
+ * base URL and outside the error interceptor, so a 409 would arrive with no
+ * status and the fatal-error classifier would escalate it. Vite dedupes; this
+ * pins the node test loader, where the flow tests run.
+ */
+describe("the client the generated code calls through", () => {
+	const emptyViaQueryLayer = (): Promise<unknown> => {
+		const { mutationFn } = trashOperationsEmptyTrashMutation();
+		assert.ok(mutationFn);
+		return mutationFn(
+			{ path: { accountId: "acc-1" } },
+			{ client: new QueryClient(), meta: undefined },
+		);
+	};
+
+	it("is the instance client.ts configured, for the SDK and the query layer", async () => {
+		answer(200, {});
+
+		await empty();
+		await emptyViaQueryLayer();
+
+		const sent = http?.calls.map((call) => call.url) ?? [];
+		assert.equal(sent.length, 2);
+		const base = `${getRuntimeConfig().apiUrl}/accounts/acc-1/trash/empty`;
+		assert.deepEqual(sent, [base, base]);
+	});
+
+	it("carries the status on a query-layer failure too", async () => {
+		answer(409, { code: "config_not_empty", message: "already configured" });
+
+		const error = await emptyViaQueryLayer().then(
+			() => undefined,
+			(reason: unknown) => reason,
+		);
+
+		assert.ok(error instanceof ApiError);
+		assert.equal(error.status, 409);
+	});
+});