@remit/web-client 0.0.65 → 0.0.67

package/src/components/mail/organize/OrganizePanel.progress.test.ts

@@ -1,113 +0,0 @@
-/**
- * The back-apply progress copy. On a deployment without the vector pipeline the
- * "all like these" job moves the sender-matched set, so the in-progress line must
- * state the sender semantics — never "similar mail" (#250's honesty
- * requirement). The semantic path keeps the "similar mail" wording.
- */
-
-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 type { OrganizeMatchPredicate } from "../../../lib/organize/sender-fallback";
-import { createDomHarness, type DomHarness } from "../../../test-support/dom";
-import { makeMailbox } from "../../../test-support/fixtures";
-import { type HttpMock, mockFetch } from "../../../test-support/http";
-import { OrganizePanel } from "./OrganizePanel";
-
-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 SEMANTIC_PREDICATE: OrganizeMatchPredicate = {
-	anchorMessageId: "msg-1",
-	matchOperator: "And",
-	literalClauses: [],
-};
-
-const SENDER_PREDICATE: OrganizeMatchPredicate = {
-	matchOperator: "Or",
-	literalClauses: [{ field: "From", value: "npm@github.com" }],
-};
-
-const mount = (
-	props: Partial<Parameters<typeof OrganizePanel>[0]>,
-): DomHarness => {
-	http = mockFetch((call) => {
-		if (call.path.endsWith("/organize") && call.method === "POST") {
-			return { organizeJobId: "job-1", state: "Processing" };
-		}
-		if (call.path.endsWith("/organize/job-1") && call.method === "GET") {
-			return {
-				organizeJobId: "job-1",
-				state: "Processing",
-				matchedCount: 128,
-				appliedCount: 0,
-				failedCount: 0,
-			};
-		}
-		return {};
-	});
-	harness = createDomHarness();
-	harness.queryClient.setQueryData(
-		mailboxOperationsListMailboxesQueryKey({ path: { accountId: ACCOUNT_ID } }),
-		{ items: MAILBOXES },
-	);
-	harness.renderApp(
-		createElement(OrganizePanel, {
-			accountId: ACCOUNT_ID,
-			mailboxId: "mbx-inbox",
-			selectedMessageIds: ["msg-1", "msg-2"],
-			matchPredicate: SEMANTIC_PREDICATE,
-			matchedCount: 128,
-			seedMailboxId: "mbx-archive",
-			onClose: () => undefined,
-			...props,
-		}),
-	);
-	return harness;
-};
-
-async function startJob(dom: DomHarness): Promise<void> {
-	dom.click(dom.byText("button", "Organize"));
-	for (let attempt = 0; attempt < 20; attempt += 1) {
-		await dom.flush();
-		if (/Organizing/.test(dom.text())) return;
-		await dom.wait(1);
-	}
-}
-
-describe("OrganizePanel back-apply progress copy", () => {
-	it("states the sender semantics while organizing in the sender fallback", async () => {
-		const dom = mount({
-			matchPredicate: SENDER_PREDICATE,
-			semanticUnavailable: true,
-			senders: ["npm@github.com"],
-		});
-		await startJob(dom);
-
-		assert.match(dom.text(), /Organizing mail from these senders/);
-		assert.doesNotMatch(dom.text(), /Organizing similar mail/);
-	});
-
-	it("keeps the similar-mail wording on the semantic path", async () => {
-		const dom = mount({});
-		await startJob(dom);
-
-		assert.match(dom.text(), /Organizing similar mail/);
-		assert.doesNotMatch(dom.text(), /from these senders/);
-	});
-});

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

@@ -1,170 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { organizeOperationsCreateOrganizeJobMutation } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { MutationObserver } from "@tanstack/query-core";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import React, { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import { ErrorBannerProvider } from "@/components/ui/ErrorBannerProvider";
-import { buildOrganizeInput } from "@/lib/organize/organize-model";
-import { OrganizePanel } from "./OrganizePanel";
-
-// The node test loader transpiles remit-ui's `.tsx` with the classic JSX
-// runtime, which references a global `React`. Vite uses the automatic runtime,
-// so this shim only exists for the SSR test harness.
-(globalThis as { React?: typeof React }).React = React;
-
-const render = (overrides: Partial<Parameters<typeof OrganizePanel>[0]> = {}) =>
-	renderToString(
-		createElement(
-			QueryClientProvider,
-			{ client: new QueryClient() },
-			createElement(
-				ErrorBannerProvider,
-				null,
-				createElement(OrganizePanel, {
-					accountId: "acc-1",
-					mailboxId: "mbx-inbox",
-					selectedMessageIds: ["msg-1", "msg-2"],
-					matchPredicate: {
-						anchorMessageId: "msg-1",
-						matchOperator: "And",
-						literalClauses: [],
-					},
-					matchedCount: 47,
-					onClose: () => undefined,
-					...overrides,
-				}),
-			),
-		) as never,
-	);
-
-describe("OrganizePanel", () => {
-	it("renders the organize sentence with the widened count", () => {
-		const html = render();
-		assert.match(html, /similar message/);
-		assert.match(html, /from 2 selected/);
-	});
-
-	it("surfaces the disabled reason until a folder is chosen (ux.md — say why)", () => {
-		const html = render();
-		assert.match(html, /Pick a folder to move these into/);
-		assert.match(html, /available yet/i);
-	});
-
-	it("offers all four commit scopes", () => {
-		const html = render();
-		assert.match(html, /Just these/);
-		assert.match(html, /All like these/);
-		assert.match(html, /These and new mail like this/);
-		assert.match(html, /Until a date/);
-	});
-
-	it("says it is organizing just the selection when the widen matched nothing (#211 — no dead end)", () => {
-		const html = render({ matchedCount: 0, fallback: true });
-		assert.match(html, /No similar messages found/);
-		assert.match(html, /organizing just your 2 selected/);
-	});
-
-	it("names the missing vector pipeline and organizes just the selection when the widen is unavailable and no senders are known (#226/#201)", () => {
-		const html = render({ matchedCount: 0, semanticUnavailable: true });
-		assert.match(html, /available on this server/);
-		assert.match(html, /organizing just your 2 selected/);
-	});
-
-	it("names the senders and states it is matching all mail from them when the widen fell back (no vector pipeline)", () => {
-		const html = render({
-			matchedCount: 128,
-			semanticUnavailable: true,
-			senders: ["npm@github.com", "digest@substack.com"],
-			matchPredicate: {
-				matchOperator: "Or",
-				literalClauses: [
-					{ field: "From", value: "npm@github.com" },
-					{ field: "From", value: "digest@substack.com" },
-				],
-			},
-		});
-		assert.match(html, /matching all mail from/);
-		assert.match(html, /npm@github\.com/);
-		assert.match(html, /digest@substack\.com/);
-		assert.match(html, /128 matches/);
-		// Never claims the matched set is semantically similar (only denies that
-		// similar-mail matching is available).
-		assert.doesNotMatch(html, /similar message/i);
-		assert.doesNotMatch(html, /similar ones found/i);
-		// The sender fallback is a real widen: the scopes reach it, so the
-		// default scope is "all like these", not "just these".
-		assert.match(html, /All like these/);
-	});
-
-	it("names the shared domain when every fallback sender shares one (RFC 038 D2 collapse)", () => {
-		const html = render({
-			matchedCount: 342,
-			semanticUnavailable: true,
-			senders: [
-				"npm@github.com",
-				"notifications@github.com",
-				"ci@sub.github.com",
-			],
-			matchPredicate: {
-				matchOperator: "Or",
-				literalClauses: [{ field: "FromDomain", value: "github.com" }],
-			},
-		});
-		assert.match(html, /matching all mail from anyone at github\.com/);
-		assert.match(html, /342 matches/);
-		assert.doesNotMatch(html, /similar message/i);
-	});
-
-	it("pre-selects the seeded scope (a 'Something else' shortcut seeds the sentence)", () => {
-		const html = render({ initialScope: "standing" });
-		// The standing scope's "Always keep" phrasing only renders when it is active.
-		assert.match(html, /Always keep/);
-	});
-});
-
-// The commit button's `disabled` prop is
-// `!!disabledReason || createFilter.isPending || organizeJob.isStarting`
-// (#1279) — a slow POST to /organize must block a second click just like an
-// in-flight createFilter does, or the back-apply runs twice. `renderToString`
-// never dispatches the click that would exercise that wiring end-to-end (SSR
-// doesn't run event handlers), so this drives the exact mutation config
-// `useOrganizeJob().start()` calls — `organizeOperationsCreateOrganizeJobMutation()`
-// — through a real `MutationObserver` and confirms it reports `isPending`
-// (what `organizeJob.isStarting` is) for the whole time the POST is in
-// flight, which is the invariant the disabled expression relies on.
-describe("organizeJob.isStarting — the create-organize-job POST stays pending until it resolves (#1279)", () => {
-	it("reports isPending immediately after start() and keeps it pending while the POST hasn't come back", () => {
-		const queryClient = new QueryClient();
-		const observer = new MutationObserver(
-			queryClient,
-			organizeOperationsCreateOrganizeJobMutation(),
-		);
-
-		assert.equal(
-			observer.getCurrentResult().isPending,
-			false,
-			"idle before the first submit — same as a fresh commit button",
-		);
-
-		observer.mutate({
-			path: { accountId: "acc-1" },
-			body: buildOrganizeInput({
-				anchorMessageId: "msg-1",
-				matchOperator: "And",
-				literalClauses: [],
-				moveMailboxId: "mbx-work",
-			}),
-			// Stands in for a slow POST that hasn't come back yet — the exact
-			// window a double click must be blocked in.
-			fetch: () => new Promise<Response>(() => {}),
-		});
-
-		assert.equal(
-			observer.getCurrentResult().isPending,
-			true,
-			"a second click during this window must be blocked — this is what organizeJob.isStarting disables the button on",
-		);
-	});
-});

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

@@ -1,420 +0,0 @@
-import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { Badge, Button, Input, Select } from "@remit/ui";
-import { useQuery } from "@tanstack/react-query";
-import { CheckCircle2, Loader2 } from "lucide-react";
-import { useMemo, useState } from "react";
-import { useCreateFilter } from "@/hooks/useFilters";
-import { useMoveMessages } from "@/hooks/useMoveMessages";
-import { useOrganizeJob } from "@/hooks/useOrganizeJob";
-import { getMailboxDisplayName } from "@/lib/folder-roles";
-import { buildMoveTargets } from "@/lib/move-targets";
-import { pickedDateToExpiresAt } from "@/lib/organize/filter-status";
-import {
-	commitButtonLabel,
-	commitDisabledReason,
-	scopeActionCount,
-	senderFallbackSummary,
-} from "@/lib/organize/organize-copy";
-import type {
-	OrganizeDraft,
-	OrganizeScope,
-} from "@/lib/organize/organize-model";
-import type { OrganizeMatchPredicate } from "@/lib/organize/sender-fallback";
-
-interface OrganizePanelProps {
-	accountId: string;
-	mailboxId: string;
-	selectedMessageIds: string[];
-	/**
-	 * The predicate the widen previewed — the semantic anchor, or the
-	 * sender-derived literal clauses when the vector pipeline is absent. Every
-	 * commit scope carries exactly this, so the previewed set equals the set the
-	 * scope acts on.
-	 */
-	matchPredicate: OrganizeMatchPredicate;
-	/** Similar messages the widen preview matched. */
-	matchedCount: number;
-	/**
-	 * Which scope is selected on open. Defaults to `all-like-these`; the
-	 * zero-match fallback and a "Something else" seed override it.
-	 */
-	initialScope?: OrganizeScope;
-	/**
-	 * Destination folder to pre-select — a "Something else" shortcut or a
-	 * plain-language input seeds this (issue #211).
-	 */
-	seedMailboxId?: string;
-	/**
-	 * The widen matched nothing, so the sentence organizes just the selection
-	 * rather than dead-ending. Changes the heading and defaults the scope to
-	 * `just-these`.
-	 */
-	fallback?: boolean;
-	/**
-	 * The server ran no semantic widen because this deployment ships no vector
-	 * pipeline. With senders to match on ({@link senders}) the widen fell back to
-	 * matching all mail from those senders; with none it organizes just the
-	 * selection. Either way the heading names the real reason, never "similar".
-	 */
-	semanticUnavailable?: boolean;
-	/**
-	 * Distinct sender addresses driving the sender fallback. Non-empty only when
-	 * {@link semanticUnavailable} and the fallback produced a literal match set;
-	 * named in the heading and folder line so the copy states the real semantics.
-	 */
-	senders?: string[];
-	onClose: () => void;
-}
-
-const SCOPE_OPTIONS: { id: OrganizeScope; label: string; caption: string }[] = [
-	{
-		id: "just-these",
-		label: "Just these",
-		caption: "the ones you selected",
-	},
-	{
-		id: "all-like-these",
-		label: "All like these",
-		caption: "including the similar ones found now",
-	},
-	{
-		id: "standing",
-		label: "These and new mail like this",
-		caption: "keeps working on future mail",
-	},
-	{
-		id: "temporary",
-		label: "Until a date",
-		caption: "stops on its own",
-	},
-];
-
-export function OrganizePanel({
-	accountId,
-	mailboxId,
-	selectedMessageIds,
-	matchPredicate,
-	matchedCount,
-	initialScope,
-	seedMailboxId,
-	fallback = false,
-	semanticUnavailable = false,
-	senders = [],
-	onClose,
-}: OrganizePanelProps) {
-	// The vector pipeline is absent but the selection has senders to match on:
-	// the widen fell back to sender matching, which produces a real widened set
-	// the commit scopes reach — unlike a missing or empty widen.
-	const senderFallback = semanticUnavailable && senders.length > 0;
-	// A missing widen and an empty widen both organize just the selection; only
-	// the heading distinguishes them. The sender fallback is a real widen.
-	const noWiden = (fallback || semanticUnavailable) && !senderFallback;
-	const [scope, setScope] = useState<OrganizeScope>(
-		initialScope ?? (noWiden ? "just-these" : "all-like-these"),
-	);
-	const [moveMailboxId, setMoveMailboxId] = useState<string>(
-		seedMailboxId ?? "",
-	);
-	const [name, setName] = useState("");
-	const [pickedDate, setPickedDate] = useState("");
-
-	const { data: mailboxesData } = useQuery({
-		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
-		staleTime: Infinity,
-	});
-
-	const folderOptions = useMemo(() => {
-		const targets = buildMoveTargets(mailboxesData?.items ?? []);
-		return targets.map((mailbox) => ({
-			id: mailbox.mailboxId,
-			label: getMailboxDisplayName(mailbox.fullPath),
-		}));
-	}, [mailboxesData?.items]);
-
-	const draft: OrganizeDraft = useMemo(
-		() => ({
-			...matchPredicate,
-			moveMailboxId: moveMailboxId || undefined,
-			expiresAt:
-				scope === "temporary" ? pickedDateToExpiresAt(pickedDate) : undefined,
-		}),
-		[matchPredicate, moveMailboxId, scope, pickedDate],
-	);
-
-	const { moveMessages } = useMoveMessages({ mailboxId, accountId });
-	const organizeJob = useOrganizeJob(accountId);
-	const createFilter = useCreateFilter(accountId);
-
-	const selectionCount = selectedMessageIds.length;
-	const actionCount = scopeActionCount(scope, selectionCount, matchedCount);
-
-	const disabledReason = commitDisabledReason({
-		draft,
-		scope,
-		name,
-		pickedDate,
-	});
-
-	const handleCommit = () => {
-		if (disabledReason) return;
-		switch (scope) {
-			case "just-these":
-				if (moveMailboxId) moveMessages(selectedMessageIds, moveMailboxId);
-				onClose();
-				return;
-			case "all-like-these":
-				organizeJob.start(draft);
-				return;
-			case "standing":
-				createFilter.createFilter(draft, "standing", name.trim());
-				return;
-			case "temporary":
-				createFilter.createFilter(draft, "temporary", name.trim());
-				return;
-		}
-	};
-
-	if (organizeJob.isRunning || organizeJob.isDone) {
-		return (
-			<JobProgress
-				progress={organizeJob.progress}
-				isDone={organizeJob.isDone}
-				senderFallback={senderFallback}
-				onClose={onClose}
-			/>
-		);
-	}
-
-	if (createFilter.isSuccess) {
-		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>
-		);
-	}
-
-	const needsName = scope === "standing" || scope === "temporary";
-
-	return (
-		<div className="flex min-h-0 flex-col">
-			<div className="border-b border-line px-5 py-3">
-				<h2 className="text-sm font-semibold text-fg">Organize</h2>
-				<p className="mt-0.5 text-xs text-fg-muted">
-					{senderFallback
-						? `${senderFallbackSummary(senders)} ${matchedCount} match${
-								matchedCount === 1 ? "" : "es"
-							}.`
-						: semanticUnavailable
-							? `Finding similar mail isn't available on this server — organizing just your ${selectionCount} selected.`
-							: fallback
-								? `No similar messages found — organizing just your ${selectionCount} selected.`
-								: `${matchedCount} similar message${matchedCount === 1 ? "" : "s"} found${
-										selectionCount > 0 ? ` from ${selectionCount} selected` : ""
-									}.`}
-				</p>
-			</div>
-
-			<div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-5 py-4">
-				<section className="space-y-2 rounded-lg border border-line bg-surface-sunken p-3">
-					<p className="text-sm leading-relaxed text-fg-muted">
-						{scope === "standing" && (
-							<span className="font-semibold text-fg">Always keep </span>
-						)}
-						{scope === "standing" ? "" : "Keep "}
-						{scope === "just-these"
-							? "these"
-							: senderFallback
-								? "mail from these senders"
-								: "emails like these"}{" "}
-						in
-					</p>
-					<Select
-						aria-label="Destination folder"
-						value={moveMailboxId}
-						onChange={(e) => setMoveMailboxId(e.target.value)}
-					>
-						<option value="">Choose a folder…</option>
-						{folderOptions.map((option) => (
-							<option key={option.id} value={option.id}>
-								{option.label}
-							</option>
-						))}
-					</Select>
-
-					<div className="flex items-center gap-2 pt-1">
-						<Badge tone="neutral">label them…</Badge>
-						<span className="text-2xs text-fg-subtle">
-							Labeling isn't available yet — arrives with mail-labeling (RFC
-							031).
-						</span>
-					</div>
-				</section>
-
-				<section className="space-y-1.5">
-					{SCOPE_OPTIONS.map((option) => {
-						const active = scope === option.id;
-						const caption =
-							senderFallback && option.id === "all-like-these"
-								? "including others from these senders"
-								: option.caption;
-						return (
-							<button
-								key={option.id}
-								type="button"
-								onClick={() => setScope(option.id)}
-								className={`flex w-full items-start gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors ${
-									active
-										? "border-accent-2 bg-accent-2-soft"
-										: "border-line bg-surface hover:bg-surface-sunken"
-								}`}
-							>
-								<span
-									className={`mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border ${
-										active
-											? "border-accent-2 bg-accent-2"
-											: "border-line bg-surface"
-									}`}
-								>
-									{active && (
-										<span className="size-1.5 rounded-full bg-white" />
-									)}
-								</span>
-								<span className="min-w-0">
-									<span
-										className={`block text-sm font-medium ${
-											active ? "text-accent-2" : "text-fg"
-										}`}
-									>
-										{option.label}
-									</span>
-									<span className="block text-xs text-fg-subtle">
-										{caption}
-									</span>
-								</span>
-							</button>
-						);
-					})}
-				</section>
-
-				{needsName && (
-					<section className="space-y-2">
-						<Input
-							value={name}
-							onChange={(e) => setName(e.target.value)}
-							placeholder="Name this filter (e.g. Travel)"
-							aria-label="Filter name"
-						/>
-						{scope === "temporary" && (
-							<label className="flex items-center gap-2 text-xs text-fg-muted">
-								Until
-								<input
-									type="date"
-									value={pickedDate}
-									onChange={(e) => setPickedDate(e.target.value)}
-									aria-label="Expiry date"
-									className="rounded-md border border-line bg-surface-sunken px-2 py-1 text-sm text-fg"
-								/>
-							</label>
-						)}
-					</section>
-				)}
-			</div>
-
-			<div className="space-y-2 border-t border-line px-5 py-3">
-				{disabledReason && (
-					// biome-ignore lint/a11y/useSemanticElements: <p> with role="status" keeps block layout; <output> is inline
-					<p className="text-xs text-fg-subtle" role="status">
-						{disabledReason}
-					</p>
-				)}
-				{createFilter.isError && (
-					<p className="text-xs text-danger" role="alert">
-						Couldn't save the filter. Please try again.
-					</p>
-				)}
-				<Button
-					variant="primary"
-					onClick={handleCommit}
-					disabled={
-						!!disabledReason || createFilter.isPending || organizeJob.isStarting
-					}
-					className="w-full"
-				>
-					{createFilter.isPending
-						? "Saving…"
-						: commitButtonLabel(scope, actionCount)}
-				</Button>
-				<Button variant="ghost" onClick={onClose} className="w-full">
-					Not now
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-function JobProgress({
-	progress,
-	isDone,
-	senderFallback,
-	onClose,
-}: {
-	progress: ReturnType<typeof useOrganizeJob>["progress"];
-	isDone: boolean;
-	senderFallback: boolean;
-	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">
-					{senderFallback
-						? "Organizing mail from these senders…"
-						: "Organizing similar mail…"}
-				</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>
-	);
-}