@remit/web-client 0.0.66 → 0.0.68

package/src/lib/organize/filter-edit-model.test.ts

@@ -0,0 +1,175 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
+import type { FilterRule } from "@remit/ui";
+import {
+	buildUpdateFilterInput,
+	expiresAtToPickedDate,
+	filterToRule,
+	ruleChangesPredicateOrAction,
+} from "./filter-edit-model";
+
+const filter = (
+	overrides: Partial<RemitImapFilterResponse> = {},
+): RemitImapFilterResponse => ({
+	filterId: "f-1",
+	accountConfigId: "acc-1",
+	name: "Receipts",
+	scope: "Standing",
+	state: "Active",
+	hasAnchor: false,
+	ruleChangedAt: 0,
+	matchOperator: "And",
+	literalClauses: [{ field: "From", value: "receipts@stripe.com" }],
+	actionLabelId: "None",
+	actionMailboxId: "mbx-receipts",
+	createdAt: 0,
+	updatedAt: 0,
+	...overrides,
+});
+
+describe("filterToRule", () => {
+	it("loads the persisted predicate, action and name unchanged", () => {
+		const rule = filterToRule(
+			filter({
+				matchOperator: "Or",
+				literalClauses: [
+					{ field: "From", value: "a@x.com" },
+					{ field: "Subject", value: "invoice" },
+				],
+			}),
+		);
+		assert.equal(rule.matchOperator, "any");
+		assert.equal(rule.name, "Receipts");
+		assert.equal(rule.moveMailboxId, "mbx-receipts");
+		assert.equal(rule.scope, "standing");
+		assert.deepEqual(
+			rule.clauses.map((clause) => [clause.field, clause.value]),
+			[
+				["From", "a@x.com"],
+				["Subject", "invoice"],
+			],
+		);
+	});
+
+	it("maps the None move sentinel to no action", () => {
+		const rule = filterToRule(filter({ actionMailboxId: "None" }));
+		assert.equal(rule.moveMailboxId, undefined);
+	});
+
+	it("loads a Temporary filter as an until-a-date rule", () => {
+		const rule = filterToRule(
+			filter({ scope: "Temporary", expiresAt: "2027-03-04T23:59:59+00:00" }),
+		);
+		assert.equal(rule.scope, "until");
+		assert.match(rule.until ?? "", /^\d{4}-\d{2}-\d{2}$/);
+	});
+
+	it("shows a semantic anchor as an active widen chip when the deployment can serve it", () => {
+		const rule = filterToRule(filter({ hasAnchor: true }));
+		assert.ok(rule.widen);
+		assert.equal(rule.widen?.inactive, undefined);
+	});
+
+	it("marks the widen inactive on a deployment that cannot evaluate it (D4)", () => {
+		const rule = filterToRule(filter({ hasAnchor: true }), true);
+		assert.equal(rule.widen?.inactive, true);
+	});
+
+	it("carries no widen when the filter has no anchor", () => {
+		assert.equal(filterToRule(filter({ hasAnchor: false })).widen, undefined);
+	});
+});
+
+describe("expiresAtToPickedDate", () => {
+	it("returns empty for absent or unparseable input", () => {
+		assert.equal(expiresAtToPickedDate(undefined), "");
+		assert.equal(expiresAtToPickedDate("not-a-date"), "");
+	});
+
+	it("reads the local calendar day", () => {
+		assert.match(
+			expiresAtToPickedDate("2027-03-04T12:00:00Z"),
+			/^2027-03-0[45]$/,
+		);
+	});
+});
+
+describe("ruleChangesPredicateOrAction", () => {
+	const base = filterToRule(filter({ hasAnchor: true }));
+
+	it("is false for an identical rule and for a rename only", () => {
+		assert.equal(ruleChangesPredicateOrAction(base, base), false);
+		assert.equal(
+			ruleChangesPredicateOrAction({ ...base, name: "New name" }, base),
+			false,
+		);
+	});
+
+	it("is true when a clause, operator, move target or widen changes", () => {
+		assert.equal(
+			ruleChangesPredicateOrAction({ ...base, matchOperator: "any" }, base),
+			true,
+		);
+		assert.equal(
+			ruleChangesPredicateOrAction(
+				{ ...base, moveMailboxId: "mbx-other" },
+				base,
+			),
+			true,
+		);
+		assert.equal(
+			ruleChangesPredicateOrAction({ ...base, widen: undefined }, base),
+			true,
+		);
+		assert.equal(
+			ruleChangesPredicateOrAction(
+				{ ...base, clauses: [{ id: "c", field: "Subject", value: "x" }] },
+				base,
+			),
+			true,
+		);
+	});
+});
+
+describe("buildUpdateFilterInput", () => {
+	const original = filterToRule(filter());
+
+	it("sends only the name for a cosmetic rename — no predicate fields", () => {
+		const body = buildUpdateFilterInput(
+			{ ...original, name: "Invoices" },
+			original,
+		);
+		assert.deepEqual(body, { name: "Invoices" });
+	});
+
+	it("sends the predicate and action on a rule change, so the server bumps ruleChangedAt", () => {
+		const changed: FilterRule = {
+			...original,
+			matchOperator: "any",
+			clauses: [{ id: "c", field: "ListId", value: "list.example.com" }],
+			moveMailboxId: "mbx-archive",
+		};
+		const body = buildUpdateFilterInput(changed, original);
+		assert.equal(body.matchOperator, "Or");
+		assert.equal(body.actionMailboxId, "mbx-archive");
+		assert.deepEqual(body.literalClauses, [
+			{ field: "ListId", value: "list.example.com" },
+		]);
+		assert.equal("name" in body, false);
+	});
+
+	it("drops a cleared move target to the None sentinel", () => {
+		const changed = {
+			...original,
+			moveMailboxId: undefined,
+			matchOperator: "any" as const,
+		};
+		const body = buildUpdateFilterInput(changed, original);
+		assert.equal(body.actionMailboxId, "None");
+	});
+
+	it("is empty when nothing changed", () => {
+		assert.deepEqual(buildUpdateFilterInput(original, original), {});
+	});
+});

package/src/lib/organize/filter-edit-model.ts

@@ -0,0 +1,106 @@
+import type {
+	RemitImapFilterResponse,
+	RemitImapUpdateFilterInput,
+} from "@remit/api-http-client/types.gen.ts";
+import type { FilterRule, RuleClause } from "@remit/ui";
+import { NO_ACTION } from "./organize-model";
+
+/**
+ * The persisted filter as the chip editor's rule (RFC 038 D6). Loads the whole
+ * rule the user edits: literal clauses, the match operator, the move action, the
+ * scope (and, for a Temporary filter, the date it stops on), and the semantic
+ * anchor as a widen chip. The anchor renders inactive when this deployment
+ * cannot evaluate it (D4) — the rule then matches by its literal clauses only.
+ *
+ * The scope maps `Standing` → "standing" and `Temporary` → "until"; a persisted
+ * filter is never the one-time "once" scope. `moveMailboxId` drops the `"None"`
+ * sentinel to `undefined` so an empty folder select reads as "no move action".
+ */
+export const filterToRule = (
+	filter: RemitImapFilterResponse,
+	semanticUnavailable = false,
+): FilterRule => {
+	const clauses: RuleClause[] = filter.literalClauses.map((clause, index) => ({
+		id: `clause-${index}`,
+		field: clause.field,
+		value: clause.value,
+	}));
+	return {
+		clauses,
+		matchOperator: filter.matchOperator === "And" ? "all" : "any",
+		widen: filter.hasAnchor
+			? { anchorCount: 1, ...(semanticUnavailable ? { inactive: true } : {}) }
+			: undefined,
+		moveMailboxId:
+			filter.actionMailboxId !== NO_ACTION ? filter.actionMailboxId : undefined,
+		scope: filter.scope === "Temporary" ? "until" : "standing",
+		until:
+			filter.scope === "Temporary"
+				? expiresAtToPickedDate(filter.expiresAt)
+				: undefined,
+		name: filter.name,
+	};
+};
+
+/**
+ * The `YYYY-MM-DD` the date input shows for a stored `expiresAt`. The inverse of
+ * {@link pickedDateToExpiresAt}: it reads the local calendar day the timestamp
+ * falls on, so a date picked, saved, and reopened comes back unchanged. Empty
+ * or unparseable input yields an empty string — the picker's "no date" state.
+ */
+export const expiresAtToPickedDate = (
+	expiresAt: string | undefined,
+): string => {
+	if (!expiresAt) return "";
+	const ms = Date.parse(expiresAt);
+	if (Number.isNaN(ms)) return "";
+	const date = new Date(ms);
+	const pad = (value: number) => String(value).padStart(2, "0");
+	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+};
+
+const predicateActionKey = (rule: FilterRule): string =>
+	JSON.stringify({
+		clauses: rule.clauses.map((clause) => [clause.field, clause.value]),
+		operator: rule.matchOperator,
+		move: rule.moveMailboxId ?? null,
+		widen: rule.widen ? (rule.widen.inactive ? "inactive" : "active") : "none",
+	});
+
+/**
+ * Whether the edited rule changes the predicate or the action versus the one it
+ * was loaded from — the clauses, the match operator, the move target, or the
+ * widen's presence. A change here is what bumps `ruleChangedAt` and offers the
+ * re-back-apply (RFC 034 Decision 3.2); the name is deliberately excluded, so a
+ * cosmetic rename is not a rule change.
+ */
+export const ruleChangesPredicateOrAction = (
+	rule: FilterRule,
+	original: FilterRule,
+): boolean => predicateActionKey(rule) !== predicateActionKey(original);
+
+/**
+ * The PATCH body for an edited filter. A cosmetic rename sends `{ name }` only,
+ * so the server's `changesPredicateOrAction` guard leaves `ruleChangedAt`
+ * untouched (RFC 034 Decision 3.2). A predicate or action change sends the
+ * operator, clauses, and move target, which bumps `ruleChangedAt`. Fields the
+ * editor never touches — the label action, the immutable scope/expiry — are
+ * absent from the patch, so the partial update preserves them.
+ */
+export const buildUpdateFilterInput = (
+	rule: FilterRule,
+	original: FilterRule,
+): RemitImapUpdateFilterInput => {
+	const body: RemitImapUpdateFilterInput = {};
+	const name = (rule.name ?? "").trim();
+	if (name !== (original.name ?? "").trim()) body.name = name;
+	if (ruleChangesPredicateOrAction(rule, original)) {
+		body.matchOperator = rule.matchOperator === "all" ? "And" : "Or";
+		body.literalClauses = rule.clauses.map((clause) => ({
+			field: clause.field,
+			value: clause.value,
+		}));
+		body.actionMailboxId = rule.moveMailboxId ?? NO_ACTION;
+	}
+	return body;
+};

package/src/lib/organize/search-to-rule.test.ts

@@ -0,0 +1,146 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { parseSearchTokens, type SearchTokenContext } from "../search-tokens";
+import {
+	buildSearchRule,
+	convertSearchToRule,
+	isConvertible,
+} from "./search-to-rule";
+
+const CONTEXT: SearchTokenContext = {
+	mailboxesByName: new Map([["archive", "mbx-archive"]]),
+	accountsByName: new Map([["work", "acc-work"]]),
+};
+
+const convert = (
+	query: string,
+	options: { searchHadSemanticReach?: boolean } = {},
+) =>
+	convertSearchToRule(parseSearchTokens(query, CONTEXT), {
+		searchHadSemanticReach: options.searchHadSemanticReach ?? false,
+	});
+
+describe("convertSearchToRule — facet → clause mapping", () => {
+	it("maps literal terms to a HasWords clause", () => {
+		const conversion = convert("quarterly report");
+		assert.deepEqual(conversion.clauses, [
+			{ field: "HasWords", value: "quarterly report" },
+		]);
+		assert.equal(conversion.keptTerms, true);
+	});
+
+	it("maps a from: facet to a From clause", () => {
+		const conversion = convert("from:alerts@github.com");
+		assert.deepEqual(conversion.clauses, [
+			{ field: "From", value: "alerts@github.com" },
+		]);
+		assert.equal(conversion.keptTerms, false);
+	});
+
+	it("combines terms and a sender under an all-match operator", () => {
+		const conversion = convert("from:alerts@github.com pull request");
+		assert.equal(conversion.matchOperator, "all");
+		assert.deepEqual(conversion.clauses, [
+			{ field: "From", value: "alerts@github.com" },
+			{ field: "HasWords", value: "pull request" },
+		]);
+	});
+});
+
+describe("convertSearchToRule — facets with no clause equivalent", () => {
+	it("keeps a folder-scoped search OUT of the rule, never silently unscoping it", () => {
+		const conversion = convert("in:archive receipts");
+		assert.deepEqual(conversion.scopedOut, {
+			mailboxId: "mbx-archive",
+			label: "archive",
+		});
+		// The folder never becomes a clause.
+		assert.deepEqual(conversion.clauses, [
+			{ field: "HasWords", value: "receipts" },
+		]);
+	});
+
+	it("drops attachment, unread and date facets, naming each", () => {
+		const conversion = convert(
+			"invoice has:attachment is:unread before:2026-01-01 after:2025-01-01",
+		);
+		const labels = conversion.droppedFacets.map((facet) => facet.label);
+		assert.deepEqual(labels, [
+			"Has attachment",
+			"Unread",
+			"Before 2026-01-01",
+			"After 2025-01-01",
+		]);
+		assert.deepEqual(conversion.clauses, [
+			{ field: "HasWords", value: "invoice" },
+		]);
+	});
+
+	it("targets the account an account: facet names, without a clause for it", () => {
+		const conversion = convert("account:work standup");
+		assert.equal(conversion.targetAccountId, "acc-work");
+		assert.deepEqual(conversion.clauses, [
+			{ field: "HasWords", value: "standup" },
+		]);
+	});
+});
+
+describe("convertSearchToRule — semantic honesty (RFC 038 D5)", () => {
+	it("states the dropped reach when the search surfaced similar mail", () => {
+		// The literal filter cannot reproduce the reach the search just showed.
+		const conversion = convert("things like this", {
+			searchHadSemanticReach: true,
+		});
+		assert.equal(conversion.droppedSemantic, true);
+		// The literal words are still kept.
+		assert.deepEqual(conversion.clauses, [
+			{ field: "HasWords", value: "things like this" },
+		]);
+	});
+
+	it("says nothing when the search had no semantic reach to drop", () => {
+		const conversion = convert("things like this", {
+			searchHadSemanticReach: false,
+		});
+		assert.equal(conversion.droppedSemantic, false);
+	});
+
+	it("never reports dropped semantics for a facet-only search", () => {
+		const conversion = convert("from:a@b.com", {
+			searchHadSemanticReach: true,
+		});
+		assert.equal(conversion.keptTerms, false);
+		assert.equal(conversion.droppedSemantic, false);
+	});
+});
+
+describe("isConvertible / buildSearchRule", () => {
+	it("is not convertible when the search yields no clause", () => {
+		assert.equal(isConvertible(convert("has:attachment")), false);
+		assert.equal(isConvertible(convert("in:archive")), false);
+	});
+
+	it("is convertible once a term or sender is present", () => {
+		assert.equal(isConvertible(convert("in:archive receipts")), true);
+	});
+
+	it("builds a standing rule with stable clause ids, no widen, empty name", () => {
+		const rule = buildSearchRule(convert("from:a@b.com nightly"));
+		assert.equal(rule.scope, "standing");
+		assert.equal(rule.widen, undefined);
+		assert.equal(rule.name, "");
+		assert.deepEqual(
+			rule.clauses.map((clause) => clause.id),
+			["search-0", "search-1"],
+		);
+	});
+
+	it("honors an explicit scope and move target", () => {
+		const rule = buildSearchRule(convert("nightly"), {
+			scope: "once",
+			moveMailboxId: "mbx-archive",
+		});
+		assert.equal(rule.scope, "once");
+		assert.equal(rule.moveMailboxId, "mbx-archive");
+	});
+});

package/src/lib/organize/search-to-rule.ts

@@ -0,0 +1,161 @@
+import type {
+	ClauseField,
+	FilterRule,
+	MatchOperator,
+	RuleScope,
+} from "@remit/ui";
+import {
+	type ParsedSearchQuery,
+	type SearchToken,
+	searchTokenLabel,
+} from "../search-tokens";
+
+/**
+ * Filter-from-search (RFC 038 D5). A search is literal terms and facets; a filter
+ * is clause chips. This is the conversion between them — the current search
+ * becomes a pre-filled rule the shared chip editor opens on.
+ *
+ * The mapping is honest about what a filter cannot carry. A facet with no clause
+ * equivalent is never silently folded into the rule: a folder scope is reported
+ * as dropped-and-kept-out (the filter matches everywhere, not just there), the
+ * attribute facets (attachment / unread / date) are reported as left out, and a
+ * free-text query kept as a literal `HasWords` clause is reported as having lost
+ * its semantic "similar mail" reach on a deployment that cannot embed the query
+ * (D5). Pure functions only — the capability is injected, not probed here.
+ */
+
+export interface DroppedFacet {
+	/** The facet that had no clause equivalent. */
+	type: SearchToken["type"];
+	/** What was dropped, named for the user (e.g. "Has attachment", "Before 2026-01-01"). */
+	label: string;
+}
+
+export interface ScopedOutFolder {
+	mailboxId: string;
+	/** The folder the search was limited to. */
+	label: string;
+}
+
+export interface SearchConversion {
+	/** Clauses derived from the search — `From` (a `from:` facet) and `HasWords` (the free text). */
+	clauses: { field: ClauseField; value: string }[];
+	matchOperator: MatchOperator;
+	/** A folder an `in:` facet scoped the search to — kept OUT of the rule (never silently unscoped). */
+	scopedOut?: ScopedOutFolder;
+	/** Facets with no clause equivalent, each named. */
+	droppedFacets: DroppedFacet[];
+	/** The account an `account:` facet targets — the filter is created for it. */
+	targetAccountId?: string;
+	/** The search carried free-text terms, kept as a `HasWords` clause. */
+	keptTerms: boolean;
+	/**
+	 * The filter this conversion builds is always literal-only — free text has no
+	 * anchor message for a semantic widen — so the search's semantic "similar mail"
+	 * reach is dropped whenever the search had one (RFC 038 D5). True exactly when
+	 * free text was kept AND the search surfaced semantically-similar mail; on a
+	 * deployment with no semantic reach there was nothing to drop, so no note.
+	 */
+	droppedSemantic: boolean;
+}
+
+interface ConvertOptions {
+	/**
+	 * Whether the current search surfaced semantically-similar mail (a non-empty
+	 * "Related" section). This is the reach the literal filter cannot reproduce —
+	 * the direct existing signal, read from the search's own semantic results, not
+	 * a probe of deployment capability.
+	 */
+	searchHadSemanticReach: boolean;
+}
+
+const FACET_HAS_NO_CLAUSE: ReadonlySet<SearchToken["type"]> = new Set([
+	"hasAttachment",
+	"isUnread",
+	"before",
+	"after",
+]);
+
+/**
+ * Convert the current search into a rule's clauses and a record of what could not
+ * be carried. Terms become a `HasWords` clause; a `from:` facet a `From` clause;
+ * an `in:` facet a kept-out folder scope; `account:` the target account; the
+ * attribute facets are dropped. The search's terms are ANDed with its facets, so
+ * the rule matches all of them (`all`).
+ */
+export const convertSearchToRule = (
+	parsed: ParsedSearchQuery,
+	{ searchHadSemanticReach }: ConvertOptions,
+): SearchConversion => {
+	const clauses: SearchConversion["clauses"] = [];
+	const droppedFacets: DroppedFacet[] = [];
+	let scopedOut: ScopedOutFolder | undefined;
+	let targetAccountId: string | undefined;
+
+	for (const token of parsed.tokens) {
+		if (token.type === "from") {
+			clauses.push({ field: "From", value: token.value });
+			continue;
+		}
+		if (token.type === "in") {
+			scopedOut = { mailboxId: token.mailboxId, label: token.value };
+			continue;
+		}
+		if (token.type === "account") {
+			targetAccountId = token.accountId;
+			continue;
+		}
+		if (FACET_HAS_NO_CLAUSE.has(token.type)) {
+			droppedFacets.push({ type: token.type, label: searchTokenLabel(token) });
+		}
+	}
+
+	const freeText = parsed.freeText.trim();
+	const keptTerms = freeText.length > 0;
+	if (keptTerms) clauses.push({ field: "HasWords", value: freeText });
+
+	return {
+		clauses,
+		matchOperator: "all",
+		scopedOut,
+		droppedFacets,
+		targetAccountId,
+		keptTerms,
+		droppedSemantic: keptTerms && searchHadSemanticReach,
+	};
+};
+
+/**
+ * Whether the conversion yields a rule with something to match. A search of only
+ * dropped facets or a bare folder scope converts to no clauses, so there is no
+ * filter to open — the entry point offers nothing rather than an empty editor.
+ */
+export const isConvertible = (conversion: SearchConversion): boolean =>
+	conversion.clauses.length > 0;
+
+interface BuildRuleOptions {
+	scope?: RuleScope;
+	moveMailboxId?: string;
+}
+
+/**
+ * The rule the editor opens on, from a conversion. A search-derived rule defaults
+ * to a standing filter — "make this a filter" is a request to keep applying it —
+ * and the editor lets the user drop it back to a one-time apply. It carries no
+ * widen: a free-text query has no message anchor, so the semantic chip is not
+ * offered on this surface (its loss is stated in the conversion notice instead).
+ */
+export const buildSearchRule = (
+	conversion: SearchConversion,
+	{ scope = "standing", moveMailboxId }: BuildRuleOptions = {},
+): FilterRule => ({
+	clauses: conversion.clauses.map((clause, index) => ({
+		id: `search-${index}`,
+		field: clause.field,
+		value: clause.value,
+	})),
+	matchOperator: conversion.matchOperator,
+	moveMailboxId,
+	scope,
+	name: "",
+});

package/src/routes/settings/filters.tsx

@@ -6,11 +6,13 @@ import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.
 import { SettingsShell } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
+import { FilterEditorSurface } from "@/components/settings/FilterEditorSurface";
 import { FiltersList } from "@/components/settings/FiltersList";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { useDeleteFilter, useFilterList } from "@/hooks/useFilters";
 import { getMailboxDisplayName } from "@/lib/folder-roles";
+import { buildMoveTargets } from "@/lib/move-targets";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
 
 export const Route = createFileRoute("/settings/filters")({
@@ -36,6 +38,7 @@ function AccountFilters({ account }: { account: RemitImapAccountResponse }) {
 	const { filters, isPending, isError, error, refetch } =
 		useFilterList(accountId);
 	const { deleteFilter, deletingFilterId } = useDeleteFilter(accountId);
+	const [editingFilterId, setEditingFilterId] = useState<string | undefined>();
 
 	const { data: mailboxesData } = useQuery({
 		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
@@ -52,9 +55,30 @@ function AccountFilters({ account }: { account: RemitImapAccountResponse }) {
 		[mailboxesData?.items],
 	);
 
+	const folders = useMemo(
+		() =>
+			buildMoveTargets(mailboxesData?.items ?? []).map((mailbox) => ({
+				id: mailbox.mailboxId,
+				label: getMailboxDisplayName(mailbox.fullPath),
+			})),
+		[mailboxesData?.items],
+	);
+
+	const editingFilter = filters.find(
+		(filter) => filter.filterId === editingFilterId,
+	);
+
 	return (
 		<section className="space-y-2">
 			<h2 className="text-sm font-semibold text-fg">{account.email}</h2>
+			{editingFilter && (
+				<FilterEditorSurface
+					accountId={accountId}
+					filter={editingFilter}
+					folders={folders}
+					onClose={() => setEditingFilterId(undefined)}
+				/>
+			)}
 			{isPending ? (
 				// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on loading skeleton provides useful context for assistive tech
 				<div
@@ -75,6 +99,7 @@ function AccountFilters({ account }: { account: RemitImapAccountResponse }) {
 				<FiltersList
 					filters={filters}
 					mailboxName={mailboxName}
+					onEdit={setEditingFilterId}
 					onDelete={deleteFilter}
 					deletingFilterId={deletingFilterId}
 				/>