@remit/web-client 0.0.66 → 0.0.68

package/src/components/mail/organize/SearchFilterEditor.render.test.ts

@@ -0,0 +1,226 @@
+/**
+ * The filter-from-search chip editor (RFC 038 D5) over the live preview/apply
+ * endpoints. The contract these tests pin: the converted clauses open pre-filled,
+ * the conversion states honestly what the search carried that the filter cannot,
+ * and the count on screen is the literal set a commit acts on — the commit is
+ * blocked until the count settles and carries exactly the previewed predicate.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { mailboxOperationsListMailboxesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { createElement } from "react";
+import { convertSearchToRule } from "@/lib/organize/search-to-rule";
+import {
+	parseSearchTokens,
+	type SearchTokenContext,
+} from "@/lib/search-tokens";
+import { createDomHarness, type DomHarness } from "../../../test-support/dom";
+import { makeMailbox } from "../../../test-support/fixtures";
+import {
+	type HttpCall,
+	type HttpMock,
+	mockFetch,
+} from "../../../test-support/http";
+import { SearchFilterEditor } from "./SearchFilterEditor";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+const ACCOUNT_ID = "acc-1";
+
+const MAILBOXES = [
+	makeMailbox({ mailboxId: "mbx-inbox", fullPath: "INBOX" }),
+	makeMailbox({ mailboxId: "mbx-archive", fullPath: "Archive" }),
+];
+
+const CONTEXT: SearchTokenContext = {
+	mailboxesByName: new Map([["archive", "mbx-archive"]]),
+	accountsByName: new Map(),
+};
+
+const conversion = (query: string, searchHadSemanticReach = false) =>
+	convertSearchToRule(parseSearchTokens(query, CONTEXT), {
+		searchHadSemanticReach,
+	});
+
+type Responder = (call: HttpCall) => unknown;
+
+const previewCounts = (counts: number[]): Responder => {
+	let index = 0;
+	return (call) => {
+		if (call.path.endsWith("/organize/preview")) {
+			const count = counts[Math.min(index, counts.length - 1)];
+			index += 1;
+			return { matchedCount: count, messageIds: [] };
+		}
+		if (call.path.endsWith("/filters")) {
+			return { filterId: "filter-1", name: "R", scope: "Standing" };
+		}
+		if (call.path.endsWith("/organize") && call.method === "POST") {
+			return { organizeJobId: "job-1", state: "Running" };
+		}
+		if (call.path.endsWith("/organize/job-1")) {
+			return {
+				organizeJobId: "job-1",
+				state: "Complete",
+				matchedCount: 3,
+				appliedCount: 3,
+				failedCount: 0,
+			};
+		}
+		return {};
+	};
+};
+
+const mount = (
+	query: string,
+	responder: Responder = previewCounts([12]),
+	searchHadSemanticReach = false,
+): DomHarness => {
+	http = mockFetch(responder);
+	harness = createDomHarness();
+	harness.queryClient.setQueryData(
+		mailboxOperationsListMailboxesQueryKey({ path: { accountId: ACCOUNT_ID } }),
+		{ items: MAILBOXES },
+	);
+	harness.renderApp(
+		createElement(SearchFilterEditor, {
+			accountId: ACCOUNT_ID,
+			conversion: conversion(query, searchHadSemanticReach),
+			seedCount: 12,
+			onClose: () => undefined,
+		}),
+	);
+	return harness;
+};
+
+async function settlePreview(dom: DomHarness): Promise<void> {
+	await dom.flush();
+	await dom.wait(400);
+	await dom.flush();
+	await dom.flush();
+}
+
+const primaryButton = (dom: DomHarness, label: string): HTMLButtonElement =>
+	dom.byText("button", label) as HTMLButtonElement;
+
+describe("SearchFilterEditor — pre-filled conversion", () => {
+	it("opens on the converted clauses", () => {
+		const dom = mount("from:alerts@github.com pull request");
+		assert.match(dom.text(), /alerts@github\.com/);
+		assert.match(dom.text(), /pull request/);
+	});
+
+	it("seeds the live count from the converted predicate", () => {
+		const dom = mount("receipts");
+		assert.match(dom.text(), /12 messages match/);
+	});
+
+	it("does not offer the semantic widen on a search-derived rule", () => {
+		const dom = mount("receipts");
+		assert.doesNotMatch(dom.text(), /and similar/i);
+	});
+});
+
+describe("SearchFilterEditor — conversion honesty (RFC 038 D5)", () => {
+	it("states a folder-scoped search is kept out of the filter", () => {
+		const dom = mount("in:archive receipts");
+		assert.match(dom.text(), /limited to archive/i);
+		assert.match(dom.text(), /any folder/i);
+	});
+
+	it("names the dropped attribute facets", () => {
+		const dom = mount("invoice has:attachment is:unread");
+		assert.match(dom.text(), /Has attachment/);
+		assert.match(dom.text(), /Unread/);
+		assert.match(dom.text(), /left out/);
+	});
+
+	it("states the dropped semantic reach when the search surfaced similar mail", () => {
+		const dom = mount("things like this", previewCounts([12]), true);
+		assert.match(dom.text(), /matches these words literally/i);
+		assert.match(dom.text(), /similar mail/i);
+		// The widen chip is never offered on a search-derived rule.
+		assert.doesNotMatch(dom.text(), /and anything similar/i);
+	});
+
+	it("says nothing about semantics when the search had no similar mail", () => {
+		const dom = mount("things like this", previewCounts([12]), false);
+		assert.doesNotMatch(dom.text(), /similar mail/i);
+	});
+});
+
+describe("SearchFilterEditor — commit gate", () => {
+	it("blocks the save until a folder and name are set, then commits the previewed predicate", async () => {
+		const dom = mount("from:alerts@github.com receipts");
+
+		// Standing is the default scope: it needs a folder and a name.
+		assert.equal(primaryButton(dom, "Save rule").disabled, true);
+		dom.select(dom.byLabel("Destination folder"), "mbx-archive");
+		await dom.flush();
+		dom.type(dom.byLabel("Rule name"), "GitHub receipts");
+		await dom.flush();
+		assert.equal(primaryButton(dom, "Save rule").disabled, false);
+
+		dom.click(primaryButton(dom, "Save rule"));
+		await dom.flush();
+
+		const filters = http?.to("/filters") ?? [];
+		assert.equal(filters.length, 1);
+		assert.equal(filters[0].body?.scope, "Standing");
+		assert.deepEqual(filters[0].body?.literalClauses, [
+			{ field: "From", value: "alerts@github.com" },
+			{ field: "HasWords", value: "receipts" },
+		]);
+		assert.match(dom.text(), /Filter saved/);
+	});
+
+	it("stales the count on an edit and holds the save until it settles", async () => {
+		// The seed count (12) is passed directly; the first network preview is the
+		// re-count after the edit, so it returns 40.
+		const dom = mount("receipts", previewCounts([40]));
+		dom.select(dom.byLabel("Destination folder"), "mbx-archive");
+		await dom.flush();
+		dom.type(dom.byLabel("Rule name"), "Receipts");
+		await dom.flush();
+
+		dom.click(primaryButton(dom, "Add clause"));
+		dom.select(dom.byLabel("Clause field"), "Subject");
+		dom.type(dom.byLabel("Clause value"), "paid");
+		dom.click(primaryButton(dom, "Add"));
+		await dom.flush();
+
+		// The count is stale and the save is blocked until the re-preview lands.
+		assert.match(dom.text(), /recounting/i);
+		assert.equal(primaryButton(dom, "Save rule").disabled, true);
+
+		await settlePreview(dom);
+		assert.match(dom.text(), /40 messages match/);
+		assert.equal(primaryButton(dom, "Save rule").disabled, false);
+	});
+
+	it("runs a one-time apply as a back-apply job when the scope is 'just once'", async () => {
+		const dom = mount("receipts");
+		dom.select(dom.byLabel("Destination folder"), "mbx-archive");
+		await dom.flush();
+		const radio = dom.query('input[name="rule-scope"][value="once"]');
+		if (!radio) throw new Error("no once scope option");
+		dom.click(radio);
+		await dom.flush();
+
+		dom.click(primaryButton(dom, "Apply now"));
+		await dom.flush();
+		const jobs = (http?.to("/organize") ?? []).filter(
+			(call) => call.method === "POST",
+		);
+		assert.equal(jobs.length, 1);
+	});
+});

package/src/components/mail/organize/SearchFilterEditor.tsx

@@ -0,0 +1,132 @@
+import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import {
+	type FilterRule,
+	FilterRuleEditor,
+	type FolderOption,
+	SearchConversionNoticeView,
+} from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { useCreateFilter } from "@/hooks/useFilters";
+import { useOrganizeJob } from "@/hooks/useOrganizeJob";
+import { useRuleEditorState } from "@/hooks/useRuleEditorState";
+import { useRulePreview } from "@/hooks/useRulePreview";
+import { getMailboxDisplayName } from "@/lib/folder-roles";
+import { buildMoveTargets } from "@/lib/move-targets";
+import {
+	rulePredicate,
+	ruleToDraft,
+	SUPPORTED_CLAUSE_FIELDS,
+} from "@/lib/organize/rule-model";
+import {
+	buildSearchRule,
+	type SearchConversion,
+} from "@/lib/organize/search-to-rule";
+import {
+	CommitError,
+	FilterSaved,
+	JobProgress,
+	SavingState,
+} from "./rule-editor-states";
+
+interface SearchFilterEditorProps {
+	/** The account the filter is created for (an `account:` facet, else the active account). */
+	accountId: string;
+	/** The converted search — its clauses seed the rule, its drops seed the notice. */
+	conversion: SearchConversion;
+	/** The converted literal predicate's live count, seeding the editor without a re-fetch. */
+	seedCount: number;
+	onClose: () => void;
+}
+
+/**
+ * The filter-from-search surface as the chip editor (RFC 038 D5). The current
+ * search's literal terms and facets arrive already converted to clauses; this
+ * opens the shared rule editor pre-filled on them, over the same preview/apply
+ * endpoints as Organize. The conversion notice states what the search carried
+ * that the filter cannot — a folder scope, non-clause facets, semantic reach.
+ *
+ * A search-derived rule has no message anchor, so the semantic widen chip is not
+ * offered here (its loss, where the deployment could have served it, is the
+ * notice's job). The commit gate is the same: the count on screen is the literal
+ * set a commit acts on.
+ */
+export function SearchFilterEditor({
+	accountId,
+	conversion,
+	seedCount,
+	onClose,
+}: SearchFilterEditorProps) {
+	const [initialRule] = useState<FilterRule>(() => buildSearchRule(conversion));
+	const { rule, handlers } = useRuleEditorState({ initialRule });
+
+	const { data: mailboxesData } = useQuery({
+		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
+		staleTime: Number.POSITIVE_INFINITY,
+	});
+
+	const folders: FolderOption[] = useMemo(
+		() =>
+			buildMoveTargets(mailboxesData?.items ?? []).map((mailbox) => ({
+				id: mailbox.mailboxId,
+				label: getMailboxDisplayName(mailbox.fullPath),
+			})),
+		[mailboxesData?.items],
+	);
+
+	const preview = useRulePreview(accountId, rulePredicate(rule), seedCount);
+
+	const organizeJob = useOrganizeJob(accountId);
+	const createFilter = useCreateFilter(accountId);
+
+	const commit = () => {
+		const draft = ruleToDraft(rule);
+		if (rule.scope === "once") {
+			organizeJob.start(draft);
+			return;
+		}
+		createFilter.createFilter(
+			draft,
+			rule.scope === "standing" ? "standing" : "temporary",
+			(rule.name ?? "").trim(),
+		);
+	};
+
+	if (organizeJob.isStarting || organizeJob.isRunning || organizeJob.isDone) {
+		return (
+			<JobProgress
+				progress={organizeJob.progress}
+				isDone={organizeJob.isDone}
+				runningLabel="Organizing your mail…"
+				onClose={onClose}
+			/>
+		);
+	}
+
+	if (createFilter.isPending) return <SavingState />;
+	if (createFilter.isSuccess) return <FilterSaved onClose={onClose} />;
+	if (createFilter.isError)
+		return <CommitError onRetry={createFilter.reset} onClose={onClose} />;
+
+	return (
+		<FilterRuleEditor
+			rule={rule}
+			folders={folders}
+			preview={preview}
+			notice={
+				<SearchConversionNoticeView
+					notice={{
+						scopedOutFolder: conversion.scopedOut?.label,
+						droppedFacets: conversion.droppedFacets.map((facet) => facet.label),
+						droppedSemantic: conversion.droppedSemantic,
+					}}
+				/>
+			}
+			semanticAvailable={false}
+			clauseFields={SUPPORTED_CLAUSE_FIELDS}
+			{...handlers}
+			onCommit={commit}
+			onCancel={onClose}
+		/>
+	);
+}

package/src/components/mail/organize/rule-editor-states.tsx

@@ -0,0 +1,112 @@
+import { Button } from "@remit/ui";
+import { CheckCircle2, Loader2 } from "lucide-react";
+import type { useOrganizeJob } from "@/hooks/useOrganizeJob";
+
+/**
+ * The non-editing states a filter-rule editor lands in after commit, shared by
+ * the Organize and filter-from-search surfaces so a back-apply job, a saved
+ * standing rule, and a commit failure read identically wherever the rule was
+ * authored (RFC 038 D1).
+ */
+
+export function JobProgress({
+	progress,
+	isDone,
+	runningLabel,
+	onClose,
+}: {
+	progress: ReturnType<typeof useOrganizeJob>["progress"];
+	isDone: boolean;
+	/** In-flight copy — the caller names what it is organizing. */
+	runningLabel: string;
+	onClose: () => void;
+}) {
+	const failed = progress.state === "Failed";
+	return (
+		<div className="flex flex-col items-center gap-3 px-5 py-8 text-center">
+			{!isDone ? (
+				<Loader2 className="size-8 animate-spin text-accent-2" />
+			) : failed ? (
+				<span className="text-sm font-semibold text-danger">
+					Organize failed
+				</span>
+			) : (
+				<CheckCircle2 className="size-8 text-positive" />
+			)}
+
+			{!isDone && <p className="text-sm font-medium text-fg">{runningLabel}</p>}
+
+			{isDone && !failed && (
+				<div className="text-sm text-fg">
+					<p className="font-medium">Done</p>
+					<p className="mt-1 text-xs text-fg-muted">
+						{progress.appliedCount} of {progress.matchedCount} moved
+						{progress.failedCount > 0
+							? ` · ${progress.failedCount} failed`
+							: ""}
+						.
+					</p>
+				</div>
+			)}
+
+			{isDone && failed && (
+				<p className="max-w-xs text-xs text-fg-muted">
+					{progress.errorMessage || "Something went wrong. Please try again."}
+				</p>
+			)}
+
+			{isDone && (
+				<Button variant="primary" onClick={onClose} className="mt-2">
+					Done
+				</Button>
+			)}
+		</div>
+	);
+}
+
+export function SavingState() {
+	return (
+		<div className="flex flex-col items-center gap-3 px-5 py-10 text-center">
+			<Loader2 className="size-8 animate-spin text-accent-2" />
+			<p className="text-sm font-medium text-fg">Saving rule…</p>
+		</div>
+	);
+}
+
+export function FilterSaved({ onClose }: { onClose: () => void }) {
+	return (
+		<div className="flex flex-col items-center gap-3 px-5 py-8 text-center">
+			<CheckCircle2 className="size-8 text-positive" />
+			<p className="text-sm font-medium text-fg">Filter saved</p>
+			<p className="max-w-xs text-xs text-fg-muted">
+				You can see it, and when it expires, under Settings › Filters.
+			</p>
+			<Button variant="primary" onClick={onClose} className="mt-2">
+				Done
+			</Button>
+		</div>
+	);
+}
+
+export function CommitError({
+	onRetry,
+	onClose,
+}: {
+	onRetry: () => void;
+	onClose: () => void;
+}) {
+	return (
+		<div className="flex flex-col items-center gap-3 px-5 py-8 text-center">
+			<p className="text-sm font-medium text-danger">Couldn't save the rule</p>
+			<p className="max-w-xs text-xs text-fg-muted">Please try again.</p>
+			<div className="mt-2 flex gap-2">
+				<Button variant="primary" onClick={onRetry}>
+					Try again
+				</Button>
+				<Button variant="ghost" onClick={onClose}>
+					Not now
+				</Button>
+			</div>
+		</div>
+	);
+}