@remit/ui 0.0.143 → 0.0.144

package/package.json

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

package/src/components/filter-rule-editor.create.test.ts

@@ -29,6 +29,13 @@ const folders: FolderTreeNode[] = [
 	},
 ];
 
+// A server that reports no hierarchy delimiter has a flat namespace, where a
+// path carries no separator to read a trail out of.
+const flatFolders: FolderTreeNode[] = [
+	{ id: "mbx-inbox", label: "Inbox", path: "INBOX" },
+	{ id: "mbx-work", label: "Work", path: "Work" },
+];
+
 const rule: FilterRule = {
 	clauses: [{ id: "c1", field: "From", value: "a@example.com" }],
 	matchOperator: "all",
@@ -61,6 +68,8 @@ interface MountOptions {
 		signal?: AbortSignal,
 	) => Promise<FolderTreeNode>;
 	onChangeMove?: (id: string) => void;
+	options?: readonly FolderTreeNode[];
+	delimiter?: string;
 }
 
 /** Holds the destination the way the app does, so a pick shows on screen. */
@@ -68,6 +77,8 @@ const mount = async ({
 	initialDestination,
 	onCreateFolder,
 	onChangeMove,
+	options = folders,
+	delimiter,
 }: MountOptions = {}) => {
 	const Controlled = () => {
 		const [moveMailboxId, setMoveMailboxId] = useState<string | undefined>(
@@ -75,7 +86,8 @@ const mount = async ({
 		);
 		return createElement(FilterRuleEditor, {
 			rule: { ...rule, moveMailboxId },
-			folders,
+			folders: options,
+			delimiter,
 			preview,
 			onChangeMove: (id: string) => {
 				setMoveMailboxId(id || undefined);
@@ -235,6 +247,17 @@ describe("FilterRuleEditor move destination", () => {
 		assert.deepEqual(picked, [""]);
 	});
 
+	it("reads a flat-namespace destination as its whole path, not per character", async () => {
+		await mount({ options: flatFolders, delimiter: "" });
+		await openTree();
+		await click(byAriaLabel("Move to Work"));
+		assert.ok(
+			byText("Move matches to Work"),
+			"the whole path is one segment when nothing nests",
+		);
+		assert.equal(byText("Move matches to W / o / r / k"), undefined);
+	});
+
 	it("offers no create affordance without onCreateFolder", async () => {
 		await mount();
 		await openTree();

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

@@ -60,10 +60,15 @@ function LiveEditor({
 	propertyRule,
 	labels = demoLabels,
 	initialClauseEdit,
+	folders = demoFolders,
+	delimiter,
 	onCreateFolder,
 	onCreateLabel,
 }: {
 	initialRule: FilterRule;
+	folders?: FolderTreeNode[];
+	/** The provider's hierarchy separator; `""` is a flat namespace. */
+	delimiter?: string;
 	semanticAvailable?: boolean;
 	/** Offers the match-mode control; omit to render the editor without one. */
 	initialMatchMode?: RuleMatchMode;
@@ -179,7 +184,8 @@ function LiveEditor({
 	return (
 		<FilterRuleEditor
 			rule={rule}
-			folders={demoFolders}
+			folders={folders}
+			delimiter={delimiter}
 			labels={labels}
 			preview={preview}
 			semanticAvailable={semanticAvailable}
@@ -459,6 +465,30 @@ export const DestinationNestedFolders: Story = {
 	},
 };
 
+// A server that reports no hierarchy delimiter has a flat namespace: every
+// folder sits at the top level and a path is a name, not a trail.
+const flatFolders: FolderTreeNode[] = [
+	{ id: "mbx-inbox", label: "Inbox", path: "INBOX" },
+	{ id: "mbx-archive", label: "Archive", path: "Archive" },
+	{ id: "mbx-work", label: "Work", path: "Work" },
+	{ id: "mbx-workshop", label: "Workshop", path: "Workshop" },
+];
+
+/**
+ * A flat namespace, where the chosen destination reads as its whole path —
+ * `Work`, not one segment per character.
+ */
+export const DestinationFlatNamespace: Story = {
+	name: "Destination — a flat namespace (server reports no delimiter)",
+	render: () => (
+		<LiveEditor
+			initialRule={{ ...demoRule, moveMailboxId: "mbx-work" }}
+			folders={flatFolders}
+			delimiter=""
+		/>
+	),
+};
+
 /**
  * A new folder is made inside the folder the tree is looking at, so a filter can
  * point at `Travel/Car hire` without leaving the editor.

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

@@ -1,5 +1,5 @@
 import { Fragment, type ReactNode, useMemo, useState } from "react";
-import type { FolderTreeNode } from "../lib/folder-tree.js";
+import { type FolderTreeNode, folderPathSegments } from "../lib/folder-tree.js";
 import { Button } from "./button.js";
 import {
 	AddChipButton,
@@ -216,7 +216,7 @@ function MoveDestinationField({
 
 	/** Two folders can share a leaf name, so a destination reads as its trail. */
 	const trail = (folder: FolderTreeNode): string => {
-		const segments = folder.path.split(delimiter);
+		const segments = folderPathSegments(folder.path, delimiter);
 		return segments
 			.map((segment, index) => {
 				const path = segments.slice(0, index + 1).join(delimiter);

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

@@ -47,6 +47,17 @@ const folders: FolderTreeNode[] = [
 	{ id: "mbx-work-recruiting", label: "Recruiting", path: "Work/Recruiting" },
 ];
 
+// A server that reports no hierarchy delimiter has a flat namespace: nothing
+// nests, and `Work` is not a parent of `Workshop`.
+const flatFolders: FolderTreeNode[] = [
+	{ id: "mbx-inbox", label: "Inbox", path: "INBOX", isCurrent: true },
+	{ id: "mbx-archive", label: "Archive", path: "Archive" },
+	{ id: "mbx-work", label: "Work", path: "Work" },
+	{ id: "mbx-workshop", label: "Workshop", path: "Workshop" },
+	{ id: "mbx-sent", label: "Sent", path: "Sent Items" },
+	{ id: "mbx-trash", label: "Trash", path: "Deleted Messages" },
+];
+
 const longFolders: FolderTreeNode[] = [
 	...folders,
 	...Array.from({ length: 36 }, (_, i) => ({
@@ -100,6 +111,7 @@ const rejects = (message: string) => (): Promise<FolderTreeNode> =>
 function Picker({
 	options = folders,
 	onCreateFolder = createFolder,
+	delimiter,
 }: {
 	options?: FolderTreeNode[];
 	onCreateFolder?: (
@@ -107,6 +119,7 @@ function Picker({
 		parentPath: string,
 		signal?: AbortSignal,
 	) => Promise<FolderTreeNode>;
+	delimiter?: string;
 }) {
 	const [selected, setSelected] = useState<string>();
 	const [known, setKnown] = useState(options);
@@ -115,6 +128,7 @@ function Picker({
 			<FolderTreePicker
 				folders={known}
 				selectedId={selected}
+				delimiter={delimiter}
 				onSelect={setSelected}
 				onCreateFolder={(name, parentPath, signal) =>
 					onCreateFolder(name, parentPath, signal).then((created) => {
@@ -160,6 +174,15 @@ export const LongList: Story = {
 	render: () => <Picker options={longFolders} />,
 };
 
+/**
+ * A flat namespace: every folder sits at the top level and none of them opens,
+ * so a new folder can only be made at the top.
+ */
+export const FlatNamespace: Story = {
+	name: "Flat namespace (server reports no delimiter)",
+	render: () => <Picker options={flatFolders} delimiter="" />,
+};
+
 /** An account with nothing to list: the message states that, not a filter. */
 export const Empty: Story = {
 	name: "No folders",

package/src/lib/folder-tree.test.ts

@@ -8,6 +8,7 @@ import {
 	folderDepth,
 	folderLeaf,
 	folderParent,
+	folderPathSegments,
 	matchesQuery,
 	orderFolderNodes,
 	queryExpandedPaths,
@@ -298,3 +299,50 @@ describe("folderLeaf", () => {
 		assert.equal(folderLeaf("INBOX", "."), "INBOX");
 	});
 });
+
+describe("a flat namespace", () => {
+	const flat: FolderTreeNode[] = [
+		node("work", "Work", "Work"),
+		node("workshop", "Workshop", "Workshop"),
+		node("inbox", "Inbox", "INBOX"),
+	];
+
+	it("keeps a path whole rather than splitting it into characters", () => {
+		assert.deepEqual(folderPathSegments("Projects/Q3", ""), ["Projects/Q3"]);
+		assert.deepEqual(folderPathSegments("Projects/Q3", "/"), [
+			"Projects",
+			"Q3",
+		]);
+	});
+
+	it("makes every folder a root with no parent, depth or ancestors", () => {
+		assert.equal(folderParent("Projects/Q3", ""), "");
+		assert.equal(folderDepth("Projects/Q3", ""), 0);
+		assert.deepEqual(folderAncestors("Projects/Q3", ""), []);
+	});
+
+	it("puts the whole list on screen at the top level", () => {
+		const rows = collapseFolderTree(orderFolderNodes(flat, ""), new Set(), "");
+		assert.deepEqual(paths(rows), ["Work", "Workshop", "INBOX"]);
+		assert.deepEqual(
+			rows.map((row) => row.depth),
+			[0, 0, 0],
+		);
+	});
+
+	it("offers no create action inside a folder, not even a prefix match", () => {
+		const rows = collapseFolderTree(
+			orderFolderNodes(flat, ""),
+			new Set(["Work"]),
+			"",
+		);
+		assert.deepEqual(
+			withCreateRows(rows, "").map((entry) =>
+				entry.kind === "create"
+					? `new inside ${entry.parent.path}`
+					: entry.row.folder.path,
+			),
+			["Work", "Workshop", "INBOX"],
+		);
+	});
+});

package/src/lib/folder-tree.ts

@@ -38,28 +38,39 @@ export type FolderTreeDisplayRow =
 	| { kind: "folder"; row: FolderTreeRow; index: number }
 	| { kind: "create"; parent: FolderTreeNode; depth: number };
 
-// A server that reports no delimiter has a flat namespace, so the path is its
-// own leaf; splitting on "" would return single characters.
+// A server that reports no delimiter has a flat namespace: the path is its own
+// leaf and every folder is a root. Splitting on "" would return single
+// characters, and `"Inbox".lastIndexOf("")` is 5 rather than -1, so each of
+// these answers the flat case before it touches the path.
+export const folderPathSegments = (
+	path: string,
+	delimiter: string,
+): string[] => (delimiter.length === 0 ? [path] : path.split(delimiter));
+
 export const folderLeaf = (path: string, delimiter: string): string => {
-	if (delimiter.length === 0) return path;
-	const parts = path.split(delimiter);
+	const parts = folderPathSegments(path, delimiter);
 	return parts[parts.length - 1] || path;
 };
 
 export const folderParent = (path: string, delimiter: string): string => {
+	if (delimiter.length === 0) return "";
 	const cut = path.lastIndexOf(delimiter);
 	return cut === -1 ? "" : path.slice(0, cut);
 };
 
 export const folderDepth = (path: string, delimiter: string): number =>
-	path.split(delimiter).length - 1;
+	folderPathSegments(path, delimiter).length - 1;
 
+// Every step up is strictly shorter than the path below it, so the walk is
+// bounded by the length of the path whatever a parent comes back as.
 export const folderAncestors = (path: string, delimiter: string): string[] => {
 	const out: string[] = [];
-	let parent = folderParent(path, delimiter);
-	while (parent) {
+	let child = path;
+	let parent = folderParent(child, delimiter);
+	while (parent && parent.length < child.length) {
 		out.push(parent);
-		parent = folderParent(parent, delimiter);
+		child = parent;
+		parent = folderParent(child, delimiter);
 	}
 	return out;
 };
@@ -182,12 +193,16 @@ export const collapseFolderTree = (
 
 /**
  * Drops a create action at the end of every open folder's children, so "New
- * folder" reads as the last folder inside the one you opened.
+ * folder" reads as the last folder inside the one you opened. A flat namespace
+ * has no inside, so it gets the rows on their own and creates at the top level.
  */
 export const withCreateRows = (
 	rows: readonly FolderTreeRow[],
 	delimiter: string,
 ): FolderTreeDisplayRow[] => {
+	if (delimiter.length === 0)
+		return rows.map((row, index) => ({ kind: "folder", row, index }));
+
 	const out: FolderTreeDisplayRow[] = [];
 	const open: FolderTreeRow[] = [];