@remit/ui 0.0.49 → 0.0.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "type": "module",
   "files": [
     "src"

package/src/components/filter-rule-editor.stories.tsx

@@ -55,7 +55,10 @@ function LiveEditor({
 }: {
 	initialRule: FilterRule;
 	semanticAvailable?: boolean;
-	onCreateFolder?: (name: string) => Promise<FolderOption>;
+	onCreateFolder?: (
+		name: string,
+		signal?: AbortSignal,
+	) => Promise<FolderOption>;
 }) {
 	const [rule, setRule] = useState<FilterRule>(initialRule);
 	const [clauseEdit, setClauseEdit] = useState<ClauseEditState | undefined>();
@@ -170,6 +173,182 @@ export const WithNewFolderOption: Story = {
 	),
 };
 
+/**
+ * Drive the destination field into its create sub-form: pick "＋ New folder…",
+ * type a name, and press "Create folder". Used by the pending and error stories
+ * below so each lands in the state it documents without a manual click-through.
+ */
+async function openCreateAndSubmit(
+	canvasElement: HTMLElement,
+	folderName: string,
+) {
+	const setSelectValue = Object.getOwnPropertyDescriptor(
+		HTMLSelectElement.prototype,
+		"value",
+	)?.set;
+	const setInputValue = Object.getOwnPropertyDescriptor(
+		HTMLInputElement.prototype,
+		"value",
+	)?.set;
+	const select = canvasElement.querySelector<HTMLSelectElement>(
+		'select[aria-label="Destination folder"]',
+	);
+	if (!select) return;
+	setSelectValue?.call(select, CREATE_FOLDER_STORY_VALUE);
+	select.dispatchEvent(new Event("change", { bubbles: true }));
+	const input = canvasElement.querySelector<HTMLInputElement>(
+		'input[aria-label="New folder name"]',
+	);
+	if (!input) return;
+	setInputValue?.call(input, folderName);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+	const createButton = Array.from(
+		canvasElement.querySelectorAll<HTMLButtonElement>("button"),
+	).find((button) => button.textContent?.trim() === "Create folder");
+	createButton?.click();
+}
+
+/** Matches the internal CREATE_FOLDER_VALUE option in the destination select. */
+const CREATE_FOLDER_STORY_VALUE = "__filter_create_folder__";
+
+/** Mirrors the web-client wait's honest timeout copy. */
+const TIMEOUT_MESSAGE =
+	"The folder was created but the mail server hasn't confirmed it yet, so nothing was attached to it. It's in your folder list — try again in a moment.";
+
+const tick = () => new Promise((resolve) => setTimeout(resolve, 60));
+
+const neverResolvesCreateFolder = (): Promise<FolderOption> =>
+	new Promise<FolderOption>(() => undefined);
+
+const rejectingCreateFolder = (message: string) => (): Promise<FolderOption> =>
+	Promise.reject(new Error(message));
+
+/** Rejects the first attempt, resolves the retry — the resume the hook performs. */
+const failThenSucceedCreateFolder = () => {
+	let attempts = 0;
+	return (name: string): Promise<FolderOption> => {
+		attempts += 1;
+		return attempts === 1
+			? Promise.reject(new Error(TIMEOUT_MESSAGE))
+			: Promise.resolve({ id: "mbx-created", label: name });
+	};
+};
+
+/** Never resolves on its own; rejects with an AbortError when the signal aborts. */
+const abortAwareCreateFolder = (
+	_name: string,
+	signal?: AbortSignal,
+): Promise<FolderOption> =>
+	new Promise<FolderOption>((_resolve, reject) => {
+		signal?.addEventListener("abort", () =>
+			reject(new DOMException("Aborted", "AbortError")),
+		);
+	});
+
+/**
+ * The folder is a dependent write for the filter, so creating it waits for the
+ * mail server to confirm the folder before it can be picked as the destination.
+ * The wait shows as "Creating folder…" — held for the whole confirmation, not
+ * just a fast optimistic round-trip.
+ */
+export const NewFolderCreating: Story = {
+	name: "New folder — creating (waiting for the server)",
+	render: () => (
+		<LiveEditor
+			initialRule={demoRule}
+			onCreateFolder={neverResolvesCreateFolder}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await openCreateAndSubmit(canvasElement, "Receipts");
+	},
+};
+
+/**
+ * The folder create failed on the mail server. The rule is not committed against
+ * a folder that does not exist: the error is surfaced inline with the create form
+ * still open, so the create can be retried or cancelled.
+ */
+export const NewFolderCreateFailed: Story = {
+	name: "New folder — create failed (retry / cancel)",
+	render: () => (
+		<LiveEditor
+			initialRule={demoRule}
+			onCreateFolder={rejectingCreateFolder(
+				"The folder couldn't be created on the mail server. Please try again.",
+			)}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await openCreateAndSubmit(canvasElement, "Receipts");
+	},
+};
+
+/**
+ * The folder create was never confirmed within the wait bound. Distinct from a
+ * hard failure — the message names the timeout — and, like a failure, leaves no
+ * folder selected, so no filter is written against it.
+ */
+export const NewFolderCreateTimedOut: Story = {
+	name: "New folder — create timed out (retry / cancel)",
+	render: () => (
+		<LiveEditor
+			initialRule={demoRule}
+			onCreateFolder={rejectingCreateFolder(TIMEOUT_MESSAGE)}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await openCreateAndSubmit(canvasElement, "Receipts");
+	},
+};
+
+/**
+ * Retry is a resume: the first attempt times out (the folder was made but not yet
+ * confirmed), and pressing "Create folder" again with the same name resolves —
+ * the hook re-waits on the folder it already made rather than re-creating it, so
+ * the retry the failure message points at actually works.
+ */
+export const NewFolderCreateRetrySucceeds: Story = {
+	name: "New folder — retry resumes and succeeds",
+	render: () => (
+		<LiveEditor
+			initialRule={demoRule}
+			onCreateFolder={failThenSucceedCreateFolder()}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await openCreateAndSubmit(canvasElement, "Receipts");
+		await tick();
+		const retry = Array.from(
+			canvasElement.querySelectorAll<HTMLButtonElement>("button"),
+		).find((button) => button.textContent?.trim() === "Create folder");
+		retry?.click();
+	},
+};
+
+/**
+ * Cancelling while "Creating folder…" is in flight aborts the wait: the create
+ * promise rejects with an AbortError the field swallows, so no destination binds
+ * after the user backed out — the sub-form just closes.
+ */
+export const NewFolderCreateCancelledMidWait: Story = {
+	name: "New folder — cancel aborts the wait",
+	render: () => (
+		<LiveEditor
+			initialRule={demoRule}
+			onCreateFolder={abortAwareCreateFolder}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await openCreateAndSubmit(canvasElement, "Receipts");
+		await tick();
+		const cancel = Array.from(
+			canvasElement.querySelectorAll<HTMLButtonElement>("button"),
+		).find((button) => button.textContent?.trim() === "Cancel");
+		cancel?.click();
+	},
+};
+
 /** Literal clauses joined with "or", including the ticket-B ListId and FromDomain fields. */
 export const AnyOfTheseClauses: Story = {
 	render: () => <LiveEditor initialRule={demoVocabularyRule} />,

package/src/components/filter-rule-editor.tsx

@@ -1,4 +1,12 @@
-import { Fragment, type ReactNode, useMemo, useState } from "react";
+import {
+	Fragment,
+	type ReactNode,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { isAbortError } from "../lib/abort.js";
 import { BottomSheet } from "./bottom-sheet.js";
 import { Button } from "./button.js";
 import { Dialog } from "./dialog.js";
@@ -84,12 +92,16 @@ export interface FilterRuleEditorProps {
 	onChangeMatchOperator?: (operator: MatchOperator) => void;
 	onChangeMove?: (mailboxId: string) => void;
 	/**
-	 * Create a new destination folder from within the editor. Given a folder
-	 * name, resolves to the created folder once the backend has queued it. When
-	 * absent, the "New folder…" option is not offered — the editor stays
-	 * data-agnostic, so stories and consumers without wiring render unchanged.
+	 * Create a new destination folder from within the editor. Given a folder name
+	 * and an abort signal, resolves to the created folder once the mail server
+	 * confirms it. The editor aborts the signal on unmount or cancel. When absent,
+	 * the "New folder…" option is not offered — the editor stays data-agnostic, so
+	 * stories and consumers without wiring render unchanged.
 	 */
-	onCreateFolder?: (name: string) => Promise<FolderOption>;
+	onCreateFolder?: (
+		name: string,
+		signal?: AbortSignal,
+	) => Promise<FolderOption>;
 	onChangeScope?: (scope: RuleScope) => void;
 	onChangeName?: (name: string) => void;
 	onChangeUntil?: (date: string) => void;
@@ -116,6 +128,13 @@ const CREATE_FOLDER_VALUE = "__filter_create_folder__";
  * name field; on resolve the new folder is added to the local option set (so it
  * is selectable even before the caller's folder list refetches) and picked as
  * the destination. Without `onCreateFolder` this is the bare select.
+ *
+ * The destination is a dependent write: the filter this editor commits binds to
+ * the folder, so `onCreateFolder` resolves only once the folder is confirmed on
+ * the mail server, not when the create is merely queued. The pending state holds
+ * "Creating folder…" for that whole wait, and a create that fails or never
+ * confirms rejects with its own message here — the folder is never selected, so
+ * the caller cannot commit a filter against a folder that does not exist.
  */
 function MoveDestinationField({
 	folders,
@@ -126,13 +145,21 @@ function MoveDestinationField({
 	folders: FolderOption[];
 	value: string;
 	onChangeMove?: (mailboxId: string) => void;
-	onCreateFolder?: (name: string) => Promise<FolderOption>;
+	onCreateFolder?: (
+		name: string,
+		signal?: AbortSignal,
+	) => Promise<FolderOption>;
 }) {
 	const [creating, setCreating] = useState(false);
 	const [name, setName] = useState("");
 	const [pending, setPending] = useState(false);
 	const [error, setError] = useState<string>();
 	const [createdFolders, setCreatedFolders] = useState<FolderOption[]>([]);
+	// The create waits for the mail server to confirm the folder; abort it on
+	// unmount or cancel so a late confirmation never binds the destination after
+	// the editor is gone or the sub-form dismissed.
+	const createAbort = useRef<AbortController | null>(null);
+	useEffect(() => () => createAbort.current?.abort(), []);
 
 	const options = useMemo(() => {
 		const known = new Set(folders.map((folder) => folder.id));
@@ -157,7 +184,10 @@ function MoveDestinationField({
 		if (trimmed === "") return;
 		setPending(true);
 		setError(undefined);
-		onCreateFolder(trimmed)
+		createAbort.current?.abort();
+		const controller = new AbortController();
+		createAbort.current = controller;
+		onCreateFolder(trimmed, controller.signal)
 			.then((folder) => {
 				setCreatedFolders((prev) =>
 					prev.some((entry) => entry.id === folder.id)
@@ -170,6 +200,7 @@ function MoveDestinationField({
 				setPending(false);
 			})
 			.catch((error: unknown) => {
+				if (isAbortError(error)) return;
 				setError(
 					error instanceof Error
 						? error.message
@@ -180,9 +211,11 @@ function MoveDestinationField({
 	};
 
 	const cancel = () => {
+		createAbort.current?.abort();
 		setCreating(false);
 		setName("");
 		setError(undefined);
+		setPending(false);
 	};
 
 	return (
@@ -234,7 +267,7 @@ function MoveDestinationField({
 							onClick={submit}
 							disabled={pending || name.trim() === ""}
 						>
-							{pending ? "Creating…" : "Create folder"}
+							{pending ? "Creating folder…" : "Create folder"}
 						</Button>
 						<Button
 							variant="ghost"

package/src/components/move-mailbox-picker.stories.tsx

@@ -112,3 +112,202 @@ export const CreateAndMove: Story = {
 	name: "Create folder from search",
 	render: () => <CreatePicker />,
 };
+
+/**
+ * Type a folder name into the search box and press the create-and-move row —
+ * used by the pending and error stories so each lands in its state without a
+ * manual click-through.
+ */
+async function typeAndCreate(canvasElement: HTMLElement, folderName: string) {
+	const setInputValue = Object.getOwnPropertyDescriptor(
+		HTMLInputElement.prototype,
+		"value",
+	)?.set;
+	const input = canvasElement.querySelector<HTMLInputElement>(
+		'input[type="search"]',
+	);
+	if (!input) return;
+	setInputValue?.call(input, folderName);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+	const createButton = Array.from(
+		canvasElement.querySelectorAll<HTMLButtonElement>("button"),
+	).find((button) => button.textContent?.includes(`Create "${folderName}"`));
+	createButton?.click();
+}
+
+/** Mirrors the web-client wait's honest timeout copy. */
+const TIMEOUT_MESSAGE =
+	"The folder was created but the mail server hasn't confirmed it yet, so nothing was attached to it. It's in your folder list — try again in a moment.";
+
+const tick = () => new Promise((resolve) => setTimeout(resolve, 60));
+
+const neverResolvesCreateFolder = (): Promise<MoveMailboxOption> =>
+	new Promise<MoveMailboxOption>(() => undefined);
+
+const rejectingCreateFolder =
+	(message: string) => (): Promise<MoveMailboxOption> =>
+		Promise.reject(new Error(message));
+
+/** Rejects the first attempt, resolves the retry — the resume the hook performs. */
+const failThenSucceedCreateFolder = () => {
+	let attempts = 0;
+	return (name: string): Promise<MoveMailboxOption> => {
+		attempts += 1;
+		return attempts === 1
+			? Promise.reject(new Error(TIMEOUT_MESSAGE))
+			: Promise.resolve({ id: "mbx-created", label: name });
+	};
+};
+
+/** Never resolves on its own; rejects with an AbortError when the signal aborts. */
+const abortAwareCreateFolder = (
+	_name: string,
+	signal?: AbortSignal,
+): Promise<MoveMailboxOption> =>
+	new Promise<MoveMailboxOption>((_resolve, reject) => {
+		signal?.addEventListener("abort", () =>
+			reject(new DOMException("Aborted", "AbortError")),
+		);
+	});
+
+/**
+ * The move is a dependent write on the folder: the create-and-move row does not
+ * resolve until the mail server confirms the folder, so the move never races the
+ * folder into existence. The wait shows as "Creating folder…".
+ */
+export const CreateFolderInFlight: Story = {
+	name: "Create folder — waiting for the server",
+	render: () => (
+		<MoveMailboxPicker
+			mailboxes={mailboxes}
+			onSelect={() => undefined}
+			onCreateFolder={neverResolvesCreateFolder}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await typeAndCreate(canvasElement, "Taxes");
+	},
+};
+
+/**
+ * The folder create failed on the mail server. No move runs; the error is shown
+ * inline and the create row can be pressed again to retry.
+ */
+export const CreateFolderFailed: Story = {
+	name: "Create folder — failed (retry)",
+	render: () => (
+		<MoveMailboxPicker
+			mailboxes={mailboxes}
+			onSelect={() => undefined}
+			onCreateFolder={rejectingCreateFolder(
+				"The folder couldn't be created on the mail server. Please try again.",
+			)}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await typeAndCreate(canvasElement, "Taxes");
+	},
+};
+
+/**
+ * The folder create was never confirmed within the wait bound — the timeout is
+ * named distinctly, and no move runs.
+ */
+export const CreateFolderTimedOut: Story = {
+	name: "Create folder — timed out (retry)",
+	render: () => (
+		<MoveMailboxPicker
+			mailboxes={mailboxes}
+			onSelect={() => undefined}
+			onCreateFolder={rejectingCreateFolder(TIMEOUT_MESSAGE)}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await typeAndCreate(canvasElement, "Taxes");
+	},
+};
+
+/**
+ * Retry is a resume: the first create times out, and pressing the create row
+ * again with the same name resolves and moves — the hook re-waits on the folder
+ * it already made rather than re-creating it.
+ */
+export const CreateFolderRetrySucceeds: Story = {
+	name: "Create folder — retry resumes and moves",
+	render: () => {
+		const RetryStage = () => {
+			const [moved, setMoved] = useState<string | null>(null);
+			return (
+				<div className="flex flex-col">
+					<MoveMailboxPicker
+						mailboxes={mailboxes}
+						onSelect={setMoved}
+						onCreateFolder={failThenSucceedCreateFolder()}
+					/>
+					{moved && (
+						<p className="border-t border-line px-3 py-2 text-xs text-fg-muted">
+							Moved to {moved}
+						</p>
+					)}
+				</div>
+			);
+		};
+		return <RetryStage />;
+	},
+	play: async ({ canvasElement }) => {
+		await typeAndCreate(canvasElement, "Taxes");
+		await tick();
+		const retry = Array.from(
+			canvasElement.querySelectorAll<HTMLButtonElement>("button"),
+		).find((button) => button.textContent?.includes('Create "Taxes"'));
+		retry?.click();
+	},
+};
+
+/**
+ * Closing the picker while "Creating folder…" is in flight aborts the wait: the
+ * create promise rejects with an AbortError, so a folder that would confirm later
+ * never fires the move after the picker is gone. Here "Close picker" unmounts it
+ * mid-wait; no "Moved to" line appears.
+ */
+export const CreateFolderClosedMidWait: Story = {
+	name: "Create folder — closing aborts the move",
+	render: () => {
+		const AbortStage = () => {
+			const [open, setOpen] = useState(true);
+			const [moved, setMoved] = useState<string | null>(null);
+			return (
+				<div className="flex flex-col">
+					<button
+						type="button"
+						onClick={() => setOpen(false)}
+						className="border-b border-line px-3 py-2 text-left text-xs text-fg-muted"
+					>
+						Close picker
+					</button>
+					{open && (
+						<MoveMailboxPicker
+							mailboxes={mailboxes}
+							onSelect={setMoved}
+							onCreateFolder={abortAwareCreateFolder}
+						/>
+					)}
+					{moved && (
+						<p className="border-t border-line px-3 py-2 text-xs text-fg-muted">
+							Moved to {moved}
+						</p>
+					)}
+				</div>
+			);
+		};
+		return <AbortStage />;
+	},
+	play: async ({ canvasElement }) => {
+		await typeAndCreate(canvasElement, "Taxes");
+		await tick();
+		const close = Array.from(
+			canvasElement.querySelectorAll<HTMLButtonElement>("button"),
+		).find((button) => button.textContent?.trim() === "Close picker");
+		close?.click();
+	},
+};

package/src/components/move-mailbox-picker.tsx

@@ -7,6 +7,7 @@ import {
 	useRef,
 	useState,
 } from "react";
+import { isAbortError } from "../lib/abort.js";
 import { cn } from "../lib/cn.js";
 import { Input } from "./input.js";
 
@@ -60,10 +61,15 @@ export interface MoveMailboxPickerProps {
 	/**
 	 * Create a folder named by the current search query. When provided and the
 	 * query names no existing folder, a create-and-move row is offered at the
-	 * bottom of the list; resolving it yields the new folder, which is selected
-	 * (moved into) immediately. Absent means no create affordance renders.
+	 * bottom of the list; resolving it — once the mail server confirms the folder
+	 * — yields the new folder, which is selected (moved into). The picker aborts
+	 * the passed signal on unmount, so a folder that confirms after the picker is
+	 * closed never fires the move. Absent means no create affordance renders.
 	 */
-	onCreateFolder?: (name: string) => Promise<MoveMailboxOption>;
+	onCreateFolder?: (
+		name: string,
+		signal?: AbortSignal,
+	) => Promise<MoveMailboxOption>;
 	/**
 	 * Called when the user dismisses the picker via Escape. Trigger consumers
 	 * use this to close their popover/drawer; the picker never owns
@@ -153,6 +159,11 @@ export const MoveMailboxPicker = ({
 	);
 	const inputRef = useRef<HTMLInputElement>(null);
 	const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);
+	// The create waits for the mail server to confirm the folder; abort it when
+	// the picker unmounts (its popover/drawer closes) so a late confirmation never
+	// fires the move after the picker is gone.
+	const createAbort = useRef<AbortController | null>(null);
+	useEffect(() => () => createAbort.current?.abort(), []);
 
 	useEffect(() => {
 		if (autoFocus) inputRef.current?.focus();
@@ -206,12 +217,16 @@ export const MoveMailboxPicker = ({
 		if (name === "") return;
 		setCreating(true);
 		setCreateError(undefined);
-		onCreateFolder(name)
+		createAbort.current?.abort();
+		const controller = new AbortController();
+		createAbort.current = controller;
+		onCreateFolder(name, controller.signal)
 			.then((folder) => {
 				onSelect(folder.id);
 				setCreating(false);
 			})
 			.catch((error: unknown) => {
+				if (isAbortError(error)) return;
 				setCreateError(
 					error instanceof Error ? error.message : text.createError,
 				);

package/src/lib/abort.ts

@@ -0,0 +1,11 @@
+/**
+ * True for the rejection an aborted `AbortSignal` produces (a `DOMException`
+ * named `AbortError`, or any error carrying that name). A create affordance that
+ * is unmounted or cancelled aborts its in-flight folder create; the rejection is
+ * expected, not a failure to show — the surface is already gone.
+ */
+export const isAbortError = (error: unknown): boolean =>
+	typeof error === "object" &&
+	error !== null &&
+	"name" in error &&
+	(error as { name?: unknown }).name === "AbortError";