@remit/ui 0.0.71 → 0.0.73

package/package.json

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

package/src/components/folder-tree-picker.create.test.ts

@@ -158,6 +158,31 @@ const typeName = async (value: string) => {
 	});
 };
 
+const filterField = (): HTMLInputElement | null =>
+	container.querySelector('input[type="search"]');
+
+const typeFilter = async (value: string) => {
+	const input = filterField();
+	assert.ok(input, "filter field not rendered");
+	const setter = Object.getOwnPropertyDescriptor(
+		dom.window.HTMLInputElement.prototype,
+		"value",
+	)?.set;
+	await act(async () => {
+		setter?.call(input, value);
+		input.dispatchEvent(new dom.window.Event("input", { bubbles: true }));
+	});
+};
+
+const press = async (target: Element | null | undefined, key: string) => {
+	assert.ok(target, "control not rendered");
+	await act(async () => {
+		target.dispatchEvent(
+			new dom.window.KeyboardEvent("keydown", { key, bubbles: true }),
+		);
+	});
+};
+
 const open = async (...labels: string[]) => {
 	for (const label of labels) {
 		await click(byAriaLabel(`Move to ${label}`));
@@ -529,32 +554,131 @@ describe("create wait", () => {
 	});
 });
 
-describe("filter and keyboard", () => {
-	const filterField = (): HTMLInputElement | null =>
-		container.querySelector('input[type="search"]');
-
-	const typeFilter = async (value: string) => {
-		const input = filterField();
-		assert.ok(input);
-		const setter = Object.getOwnPropertyDescriptor(
-			dom.window.HTMLInputElement.prototype,
-			"value",
-		)?.set;
-		await act(async () => {
-			setter?.call(input, value);
-			input.dispatchEvent(new dom.window.Event("input", { bubbles: true }));
+describe("the form's keys stay in the form", () => {
+	it("takes a space in the name without acting on the tree", async () => {
+		const selected: string[] = [];
+		await mount({
+			onSelect: (id) => selected.push(id),
+			onCreateFolder: resolving,
 		});
+		await open("Travel");
+		await click(byAriaLabel("New folder inside Travel"));
+		await press(nameField(), " ");
+		assert.deepEqual(selected, ["travel"]);
+		assert.ok(byAriaLabel("Move to Hotels"));
+		assert.ok(createBlockOf("travel")?.querySelector("input"));
+	});
+
+	it("closes the form on Escape and leaves the picker open", async () => {
+		let cancelled = 0;
+		await mount({
+			onCancel: () => {
+				cancelled += 1;
+			},
+			onCreateFolder: resolving,
+		});
+		await open("Travel");
+		await click(byAriaLabel("New folder inside Travel"));
+		await press(nameField(), "Escape");
+		assert.equal(nameField(), null);
+		assert.equal(cancelled, 0);
+	});
+});
+
+describe("a draft outlives the rows under it", () => {
+	const startDraft = async (props: PickerProps) => {
+		await mount(props);
+		await open("Travel");
+		await click(byAriaLabel("New folder inside Travel"));
+		await typeName("Car hire");
 	};
 
-	const press = async (target: Element | null | undefined, key: string) => {
-		assert.ok(target, "control not rendered");
+	it("keeps the form and the typed name when another folder opens", async () => {
+		await startDraft({ onCreateFolder: resolving });
+		await open("Archive");
+		assert.equal(nameField()?.value, "Car hire");
+		assert.ok(createBlockOf("top")?.querySelector("input"));
+		assert.match(container.textContent ?? "", /Inside\s*Travel/);
+	});
+
+	it("keeps the form when its own folder is closed again", async () => {
+		await startDraft({ onCreateFolder: resolving });
+		await open("Travel");
+		assert.equal(byAriaLabel("Move to Hotels"), null);
+		assert.equal(nameField()?.value, "Car hire");
+	});
+
+	it("keeps the form when the filter empties the list", async () => {
+		await startDraft({ onCreateFolder: resolving });
+		await typeFilter("zzz");
+		assert.match(container.textContent ?? "", /No folders match "zzz"/);
+		assert.equal(nameField()?.value, "Car hire");
+	});
+
+	it("puts the form back among the children when its folder opens again", async () => {
+		await startDraft({ onCreateFolder: resolving });
+		await open("Archive");
+		await open("Travel");
+		assert.ok(createBlockOf("travel")?.querySelector("input"));
+		assert.equal(createBlockOf("top")?.querySelector("input"), null);
+		assert.equal(nameField()?.value, "Car hire");
+	});
+
+	it("states a failure that lands after the folder it was opened in closed", async () => {
+		let fail: ((error: Error) => void) | undefined;
+		await startDraft({
+			onCreateFolder: () =>
+				new Promise<FolderTreeNode>((_resolve, reject) => {
+					fail = reject;
+				}),
+		});
+		await click(byText("Create folder"));
+		await open("Archive");
+		assert.ok(byText("Creating folder…"), "the wait went off screen");
 		await act(async () => {
-			target.dispatchEvent(
-				new dom.window.KeyboardEvent("keydown", { key, bubbles: true }),
-			);
+			fail?.(new Error("The mail server refused that name."));
 		});
-	};
+		assert.equal(
+			container.querySelector('[role="alert"]')?.textContent,
+			"The mail server refused that name.",
+		);
+		assert.equal(nameField()?.value, "Car hire");
+	});
+
+	it("keeps the wait on screen when the filter clears the list", async () => {
+		await startDraft({
+			onCreateFolder: () => new Promise<FolderTreeNode>(() => undefined),
+		});
+		await click(byText("Create folder"));
+		await typeFilter("zzz");
+		assert.ok(byText("Creating folder…"), "the wait went off screen");
+	});
+
+	it("selects what comes back from a form the list moved under", async () => {
+		const selected: string[] = [];
+		let confirm: ((folder: FolderTreeNode) => void) | undefined;
+		await mount({
+			onSelect: (id) => selected.push(id),
+			onCreateFolder: () =>
+				new Promise<FolderTreeNode>((resolve) => {
+					confirm = resolve;
+				}),
+		});
+		await open("Travel");
+		await click(byAriaLabel("New folder inside Travel"));
+		await typeName("Car hire");
+		await click(byText("Create folder"));
+		await open("Archive");
+		assert.ok(byText("Creating folder…"), "the wait went off screen");
+		await act(async () => {
+			confirm?.(created("Car hire", "Travel"));
+		});
+		assert.deepEqual(selected, ["travel", "archive", "made"]);
+		assert.equal(nameField(), null);
+	});
+});
 
+describe("filter and keyboard", () => {
 	const focused = (): string | null =>
 		dom.window.document.activeElement?.getAttribute("aria-label") ?? null;
 
@@ -587,6 +711,12 @@ describe("filter and keyboard", () => {
 		assert.match(container.textContent ?? "", /No folders match "zzz"/);
 	});
 
+	it("says the list is empty rather than blaming the filter", async () => {
+		await mount({ folders: [] });
+		await typeFilter("zzz");
+		assert.match(container.textContent ?? "", /No folders to show/);
+	});
+
 	it("picks and opens the focused row on Enter", async () => {
 		const selected: string[] = [];
 		await mount({ onSelect: (id) => selected.push(id) });

package/src/components/folder-tree-picker.render.test.ts

@@ -93,9 +93,10 @@ describe("FolderTreePicker render", () => {
 		);
 	});
 
-	it("renders the empty state when no folder matches", () => {
+	it("says the list is empty when there is nothing to list", () => {
 		const html = render({ folders: [] });
-		assert.match(html, /No folders match/);
+		assert.match(html, /No folders to show/);
+		assert.doesNotMatch(html, /No folders match/);
 	});
 
 	it("applies caller-supplied labels", () => {

package/src/components/folder-tree-picker.stories.tsx

@@ -160,6 +160,7 @@ export const LongList: Story = {
 	render: () => <Picker options={longFolders} />,
 };
 
+/** An account with nothing to list: the message states that, not a filter. */
 export const Empty: Story = {
 	name: "No folders",
 	render: () => <Picker options={[]} />,
@@ -309,6 +310,46 @@ export const CreateFailed: Story = {
 	},
 };
 
+/**
+ * Looking somewhere else does not throw the draft away: opening another folder
+ * closes the branch the form was in, and the form is pinned above the tree with
+ * the typed name and the folder it will be made in.
+ */
+export const CreateWhileTheListMoves: Story = {
+	name: "Create — kept while the list moves",
+	render: () => <Picker />,
+	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Travel");
+		clickAriaLabel(canvasElement, "New folder inside Travel");
+		await tick();
+		typeFolderName(canvasElement, "Car hire");
+		await tick();
+		await expand(canvasElement, "Finance");
+	},
+};
+
+/** A failure is stated where the user is looking, whatever the list has done. */
+export const CreateFailedAfterTheListMoved: Story = {
+	name: "Create — failed after the list moved",
+	render: () => (
+		<Picker
+			onCreateFolder={rejects(
+				"The mail server refused the folder name. Try another one.",
+			)}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Travel");
+		clickAriaLabel(canvasElement, "New folder inside Travel");
+		await tick();
+		typeFolderName(canvasElement, "Car hire");
+		await tick();
+		clickText(canvasElement, "Create folder");
+		await tick();
+		await expand(canvasElement, "Finance");
+	},
+};
+
 const wizardSteps: StepId[] = ["match", "folder", "rule", "review"];
 
 function WizardFolderStep() {

package/src/components/folder-tree-picker.tsx

@@ -53,6 +53,8 @@ export interface FolderTreePickerLabels {
 	/** Suffix announced for an ancestor held on screen by a match below it. */
 	contextSuffix?: string;
 	emptyMessage?: (query: string) => string;
+	/** Shown when there is no folder to list at all, filter or no filter. */
+	noFolders?: string;
 	/** Accessible label for a selectable row, e.g. `Move to X`. */
 	optionLabel?: (label: string) => string;
 	newFolder?: string;
@@ -110,6 +112,7 @@ const defaultLabels: Required<FolderTreePickerLabels> = {
 	currentTag: "current",
 	contextSuffix: "(containing folder)",
 	emptyMessage: (query) => `No folders match "${query}"`,
+	noFolders: "No folders to show",
 	optionLabel: (label) => `Move to ${label}`,
 	newFolder: "New folder",
 	newSubfolder: (label) => `New folder inside ${label}`,
@@ -282,6 +285,11 @@ export const FolderTreePicker = ({
 
 	const handleTreeKeyDown = useCallback(
 		(event: ReactKeyboardEvent<HTMLElement>) => {
+			// The create form sits inside the tree, so what is typed into its name
+			// field reaches here too. Only a row's own keys move the tree.
+			const source = event.target;
+			if (!(source instanceof Element)) return;
+			if (!source.closest('[role="treeitem"]')) return;
 			const move = (next: number) => {
 				event.preventDefault();
 				roving.current = true;
@@ -337,6 +345,14 @@ export const FolderTreePicker = ({
 		[rows, focusedIndex, delimiter, activateRow, setExpanded, onCancel],
 	);
 
+	const draftAnchorOnScreen =
+		draft !== null &&
+		draft.anchorId !== null &&
+		(displayRows?.some(
+			(entry) => entry.kind === "create" && entry.parent.id === draft.anchorId,
+		) ??
+			false);
+
 	const draftForm = draft && (
 		<NewFolderForm
 			parentLabel={draft.parentLabel}
@@ -414,8 +430,10 @@ export const FolderTreePicker = ({
 			/>
 
 			{onCreateFolder && (
+				// Closing or filtering away the folder a draft was opened in leaves
+				// the form here instead of unmounting it mid-type or mid-create.
 				<div className="shrink-0 border-b border-line" data-create-anchor="top">
-					{draft?.anchorId === null ? (
+					{draft && !draftAnchorOnScreen ? (
 						draftForm
 					) : (
 						<NewFolderAction
@@ -430,7 +448,7 @@ export const FolderTreePicker = ({
 
 			{rows.length === 0 ? (
 				<p className="px-3 py-3 text-sm text-fg-muted" aria-live="polite">
-					{text.emptyMessage(query)}
+					{folders.length === 0 ? text.noFolders : text.emptyMessage(query)}
 				</p>
 			) : (
 				// A flattened tree: `aria-level` carries the nesting the indentation

package/src/components/selection-wizard.render.test.ts

@@ -582,6 +582,25 @@ describe("RunStepBody", () => {
 		assert.match(html, /Nothing has changed\./);
 	});
 
+	// A poll that could not be read is not a run that never started (#526): the
+	// screen keeps the counts it has and says what it cannot see.
+	it("keeps a run that is going when its progress could not be read", () => {
+		const html = renderToString(
+			createElement(RunStepBody, {
+				...runProps,
+				state: "statusUnknown",
+				scope: "once",
+				matched: 1284,
+				applied: 40,
+			}),
+		);
+		assert.match(html, /progress unknown/);
+		assert.match(html, /carries on either way/);
+		assert.match(html, /role="progressbar"/);
+		assert.doesNotMatch(html, /Nothing has changed/);
+		assert.doesNotMatch(html, /never started/);
+	});
+
 	it("says a filter saved with nothing to back-apply is live", () => {
 		const html = renderToString(
 			createElement(RunStepBody, {
@@ -620,6 +639,18 @@ describe("RunFooter", () => {
 		assert.match(html, /Not now/);
 	});
 
+	it("offers another look, not another run, when the progress could not be read", () => {
+		const html = renderToString(
+			createElement(RunFooter, {
+				...runProps,
+				state: "statusUnknown",
+				scope: "once",
+			}),
+		);
+		assert.match(html, /Check again/);
+		assert.match(html, /Close/);
+	});
+
 	it("offers only a way out once there is nothing outstanding", () => {
 		const html = renderToString(createElement(RunFooter, runProps));
 		assert.match(html, /Done/);

package/src/lib/wizard-steps.test.ts

@@ -477,6 +477,7 @@ describe("runCopy", () => {
 			"backApplyComplete",
 			"backApplyFailed",
 			"backApplyStartFailed",
+			"statusUnknown",
 			"filterSaved",
 			"runStopped",
 			"commitFailed",
@@ -539,6 +540,25 @@ describe("runCopy", () => {
 		assert.equal(started.showProgress, false);
 	});
 
+	it("keeps a run that is going when its progress could not be read", () => {
+		// A poll that failed says nothing about the job behind it (#526), so the
+		// screen never claims the action never started, and the way out of it is a
+		// second look rather than a second run.
+		const once = outcome("statusUnknown", "once");
+		assert.equal(once.title, "Moving — progress unknown");
+		assert.match(once.detail, /carries on either way/);
+		assert.doesNotMatch(once.detail, /Nothing has changed/);
+		assert.equal(once.tone, "warning");
+		assert.equal(once.retryLabel, "Check again");
+		assert.equal(once.screenTitle, "Move");
+
+		const standing = outcome("statusUnknown", "standing");
+		assert.match(standing.title, /Rule saved/);
+		assert.doesNotMatch(standing.detail, /never started/);
+		assert.match(standing.detail, /keeps working on new mail/);
+		assert.equal(standing.retryLabel, "Check again");
+	});
+
 	it("says a filter saved with nothing to back-apply is still live", () => {
 		const saved = outcome("filterSaved", "standing");
 		assert.equal(saved.title, "Filter saved");
@@ -559,6 +579,8 @@ describe("runCopy", () => {
 		assert.equal(outcome("backApplyRunning", "standing").showProgress, true);
 		assert.equal(outcome("backApplyComplete", "once").showProgress, true);
 		assert.equal(outcome("backApplyFailed", "once").showProgress, true);
+		// The last counts read are still the last counts read.
+		assert.equal(outcome("statusUnknown", "once").showProgress, true);
 	});
 
 	it("names the failure list in the verb's own past tense", () => {

package/src/lib/wizard-steps.ts

@@ -301,6 +301,7 @@ export type RunState =
 	| "backApplyComplete"
 	| "backApplyFailed"
 	| "backApplyStartFailed"
+	| "statusUnknown"
 	| "filterSaved"
 	| "runStopped"
 	| "commitFailed";
@@ -374,7 +375,10 @@ export const runCopy = ({
 	const { label, present, past } = verbCopy(verb);
 	const done = past.toLowerCase();
 	const standing = scope === "standing" || scope === "until";
-	const inFlight = state === "saving" || state === "backApplyRunning";
+	const inFlight =
+		state === "saving" ||
+		state === "backApplyRunning" ||
+		state === "statusUnknown";
 	const shared = {
 		// A create that failed did not finish, so the header does not say it did.
 		screenTitle: inFlight || state === "commitFailed" ? label : "Done",
@@ -382,6 +386,7 @@ export const runCopy = ({
 			state === "backApplyRunning" ||
 			state === "backApplyComplete" ||
 			state === "backApplyFailed" ||
+			state === "statusUnknown" ||
 			state === "runStopped",
 		failureListLabel: `Not ${done}`,
 	};
@@ -407,6 +412,20 @@ export const runCopy = ({
 			cancelLabel: "Stop the run",
 		};
 	}
+	if (state === "statusUnknown") {
+		return {
+			...shared,
+			title: standing
+				? "Rule saved. Its progress over your existing mail is unknown"
+				: `${present} — progress unknown`,
+			detail: standing
+				? "The connection dropped, so the bar shows the last that was read. The pass runs on the mail server, and the rule keeps working on new mail either way. This keeps checking."
+				: "The connection dropped, so the bar shows the last that was read. The run is on the mail server and carries on either way. This keeps checking.",
+			tone: "warning",
+			dismissLabel: "Close",
+			retryLabel: "Check again",
+		};
+	}
 	if (state === "backApplyComplete") {
 		return {
 			...shared,