@remit/web-client 0.0.89 → 0.0.91

package/src/components/mail/SelectionToolbar.render.test.ts

@@ -1,324 +0,0 @@
-/**
- * The bulk-action bar. Two rules govern it: actions are never disabled (they
- * no-op and explain — `doc/rules/ux.md`), and Move/Organize only appear when
- * the selection is inside a single account, because neither works across
- * accounts.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import { labelOperationsListLabelsQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { createElement } from "react";
-import { createDomHarness, type DomHarness } from "../../test-support/dom";
-import { SelectionToolbar } from "./SelectionToolbar";
-
-let harness: DomHarness | undefined;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-});
-
-type ToolbarProps = Parameters<typeof SelectionToolbar>[0];
-
-const mount = (
-	props: Partial<ToolbarProps> = {},
-	options: { labels?: { labelId: string; name: string; color: string }[] } = {},
-): DomHarness => {
-	harness = createDomHarness();
-	if (props.accountId) {
-		harness.queryClient.setQueryData(
-			labelOperationsListLabelsQueryKey({
-				path: { accountId: props.accountId },
-			}),
-			{ items: options.labels ?? [] },
-		);
-	}
-	harness.renderApp(
-		createElement(SelectionToolbar, {
-			selectedCount: 2,
-			onDelete: () => undefined,
-			onClearSelection: () => undefined,
-			...props,
-		}),
-	);
-	return harness;
-};
-
-describe("SelectionToolbar", () => {
-	it("renders nothing while nothing is selected", () => {
-		const dom = mount({ selectedCount: 0 });
-		assert.equal(dom.html(), "");
-	});
-
-	it("counts the selection in words the user reads", () => {
-		assert.match(mount({ selectedCount: 1 }).text(), /1 message selected/);
-		harness?.close();
-		harness = undefined;
-		assert.match(mount({ selectedCount: 4 }).text(), /4 messages selected/);
-	});
-
-	it("hides Move until both an account and a source mailbox are known", () => {
-		const dom = mount({ onMove: () => undefined, accountId: "acc-1" });
-		assert.equal(dom.query('[aria-label="Move selected messages"]'), null);
-	});
-
-	it("offers Move and Organize once the selection sits in one account", () => {
-		const dom = mount({
-			onMove: () => undefined,
-			onOrganize: () => undefined,
-			accountId: "acc-1",
-			currentMailboxId: "mbx-inbox",
-		});
-		assert.ok(dom.query('[aria-label="Move selected messages"]'));
-		assert.ok(dom.query('[aria-label="Organize similar messages"]'));
-	});
-
-	it("hides the label trigger without a materialized selection (issue #26)", () => {
-		const dom = mount({
-			accountId: "acc-1",
-			currentMailboxId: "mbx-inbox",
-		});
-		assert.equal(
-			dom.query('[aria-label="Apply label to selected messages"]'),
-			null,
-		);
-	});
-
-	it("hides the label trigger when the account has no labels yet", () => {
-		const dom = mount(
-			{
-				accountId: "acc-1",
-				currentMailboxId: "mbx-inbox",
-				selectedMessageIds: ["m1", "m2"],
-			},
-			{ labels: [] },
-		);
-		assert.equal(
-			dom.query('[aria-label="Apply label to selected messages"]'),
-			null,
-		);
-	});
-
-	it("offers the label trigger once a selection, account, and mailbox are all known", () => {
-		const dom = mount(
-			{
-				accountId: "acc-1",
-				currentMailboxId: "mbx-inbox",
-				selectedMessageIds: ["m1", "m2"],
-			},
-			{ labels: [{ labelId: "l1", name: "Receipts", color: "Blue" }] },
-		);
-		assert.ok(dom.query('[aria-label="Apply label to selected messages"]'));
-	});
-
-	it("withdraws Organize and explains why when the selection spans accounts", () => {
-		const dom = mount({
-			onMove: () => undefined,
-			onOrganize: () => undefined,
-			accountId: "acc-1",
-			currentMailboxId: "mbx-inbox",
-			moveDisabledHint: "Select messages from one account to move them",
-		});
-		assert.equal(dom.query('[aria-label="Organize similar messages"]'), null);
-		assert.match(dom.text(), /Select messages from one account to move them/);
-		assert.match(
-			dom.query('[role="status"]')?.textContent ?? "",
-			/one account/,
-		);
-	});
-
-	it("keeps every action pressable while a mutation is in flight (ux.md)", () => {
-		const dom = mount({ isDeleting: true, onMarkAsRead: () => undefined });
-		for (const button of dom.queryAll<HTMLButtonElement>("button")) {
-			assert.equal(button.disabled, false);
-		}
-		assert.equal(
-			dom.byLabel("Delete selected messages").getAttribute("aria-busy"),
-			"true",
-		);
-		assert.match(dom.text(), /Deleting\.\.\./);
-	});
-
-	it("no-ops rather than firing a second time while busy", () => {
-		let deletes = 0;
-		let marks = 0;
-		const dom = mount({
-			isMoving: true,
-			onDelete: () => {
-				deletes += 1;
-			},
-			onMarkAsRead: () => {
-				marks += 1;
-			},
-		});
-		dom.click(dom.byLabel("Delete selected messages"));
-		dom.click(dom.byLabel("Mark as read"));
-		assert.equal(deletes, 0);
-		assert.equal(marks, 0);
-	});
-
-	it("fires delete, mark-read and clear when idle", () => {
-		let cleared = 0;
-		let deletes = 0;
-		let marks = 0;
-		const dom = mount({
-			onDelete: () => {
-				deletes += 1;
-			},
-			onClearSelection: () => {
-				cleared += 1;
-			},
-			onMarkAsRead: () => {
-				marks += 1;
-			},
-		});
-		dom.click(dom.byLabel("Delete selected messages"));
-		dom.click(dom.byLabel("Mark as read"));
-		dom.click(dom.byLabel("Clear selection"));
-		assert.deepEqual([deletes, marks, cleared], [1, 1, 1]);
-	});
-
-	it("opens the organize flow for the current selection", () => {
-		let organized = 0;
-		const dom = mount({
-			onMove: () => undefined,
-			accountId: "acc-1",
-			currentMailboxId: "mbx-inbox",
-			onOrganize: () => {
-				organized += 1;
-			},
-		});
-		dom.click(dom.byLabel("Organize similar messages"));
-		assert.equal(organized, 1);
-	});
-});
-
-/**
- * The search-escalation states desktop gains in #212: the same offer →
- * counting → escalated → chunked-run flow the mobile sheet carries, driven by
- * the shared derivations in `MessageList`. These assert the toolbar routes each
- * state, never that it re-implements the engine.
- */
-describe("SelectionToolbar — search escalation", () => {
-	it("renders the select-all-loaded checkbox only when the control is wired", () => {
-		assert.equal(mount().query('[aria-label="Select all"]'), null);
-		harness?.close();
-		harness = undefined;
-		const dom = mount({
-			selectAll: {
-				checked: false,
-				indeterminate: true,
-				onChange: () => undefined,
-			},
-		});
-		assert.ok(dom.query('[aria-label="Select all"]'));
-	});
-
-	it("names the escalated scope through statusLabel instead of a bare count", () => {
-		const dom = mount({
-			selectedCount: 3412,
-			statusLabel: 'All 3,412 matching "npm" selected',
-		});
-		assert.match(dom.text(), /All 3,412 matching "npm" selected/);
-		assert.doesNotMatch(dom.text(), /messages selected/);
-	});
-
-	it("hides Delete while the total is still counting, and offers Stop", () => {
-		let stopped = 0;
-		const dom = mount({
-			isCounting: true,
-			statusLabel: "Counting… 1,900 so far",
-			notice: {
-				tone: "info",
-				text: "",
-				action: {
-					label: "Stop",
-					onClick: () => {
-						stopped += 1;
-					},
-				},
-			},
-		});
-		assert.equal(dom.query('[aria-label="Delete selected messages"]'), null);
-		dom.click(dom.byText("button", "Stop"));
-		assert.equal(stopped, 1);
-	});
-
-	it("offers the escalation control naming the scope, and escalating fires it", () => {
-		let escalated = 0;
-		const dom = mount({
-			selectAll: { checked: true, onChange: () => undefined },
-			notice: {
-				tone: "info",
-				text: "",
-				action: {
-					label: 'Select all matching "npm"',
-					onClick: () => {
-						escalated += 1;
-					},
-				},
-			},
-		});
-		dom.click(dom.byText("button", 'Select all matching "npm"'));
-		assert.equal(escalated, 1);
-	});
-
-	it("keeps every verb over an escalated selection — not delete-only (#114)", () => {
-		const dom = mount({
-			selectedCount: 3412,
-			statusLabel: 'All 3,412 matching "npm" selected',
-			onMarkAsRead: () => undefined,
-			onMove: () => undefined,
-			onOrganize: () => undefined,
-			accountId: "acc-1",
-			currentMailboxId: "mbx-inbox",
-			notice: {
-				tone: "info",
-				text: "",
-				action: { label: "Clear selection", onClick: () => undefined },
-			},
-		});
-		assert.ok(dom.query('[aria-label="Mark as read"]'));
-		assert.ok(dom.query('[aria-label="Move selected messages"]'));
-		assert.ok(dom.query('[aria-label="Delete selected messages"]'));
-		// Organize has no escalated-predicate path, so it withdraws once the
-		// selection names a scope through statusLabel.
-		assert.equal(dom.query('[aria-label="Organize similar messages"]'), null);
-	});
-
-	it("shows a progress bar mid-run and takes the verbs off screen", () => {
-		const dom = mount({
-			selectedCount: 3412,
-			statusLabel: "Moving 1,200 of 3,412…",
-			onMarkAsRead: () => undefined,
-			progress: { value: 1200, max: 3412, tone: "info" },
-		});
-		assert.ok(dom.query('[role="progressbar"]'));
-		assert.equal(dom.query('[aria-label="Delete selected messages"]'), null);
-		assert.equal(dom.query('[aria-label="Mark as read"]'), null);
-	});
-
-	it("names the succeeded count and retries exactly what is left over", () => {
-		let retried = 0;
-		const dom = mount({
-			selectedCount: 340,
-			notice: {
-				tone: "danger",
-				text: "3,072 moved to Trash. 340 couldn't be deleted.",
-				action: {
-					label: "Retry 340",
-					onClick: () => {
-						retried += 1;
-					},
-				},
-			},
-		});
-		assert.match(
-			dom.text(),
-			/3,072 moved to Trash\. 340 couldn't be deleted\./,
-		);
-		dom.click(dom.byText("button", "Retry 340"));
-		assert.equal(retried, 1);
-	});
-});

package/src/components/mail/SelectionToolbar.stories.tsx

@@ -1,199 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { SelectionToolbar } from "./SelectionToolbar";
-
-/**
- * The desktop bulk-action bar. It keeps its bounded verbs (mark-read, move,
- * delete, organize) and, from issue #212, gains the search-escalation states
- * the mobile `SelectionSheet` already carries: the "Select all N matching…"
- * offer, a running count, the escalated predicate, a chunked run's progress,
- * and a partial-failure Retry. Both surfaces read the same derivations in
- * `MessageList`, so these stories and the kit `SelectionTopBar` stories track
- * the one state matrix.
- *
- * The Move verb needs the account-scoped `MoveToTrigger` (its own query and
- * folder data), so it is left out here to keep these stories provider-free —
- * its visual is covered by the kit `SelectionTopBar` stories' move slot. The
- * escalated stories below still assert verb parity through the mark-read and
- * delete verbs remaining available over the predicate.
- *
- * The apply-label verb (issue #26) needs the same account-scoped query
- * (`LabelApplyTrigger` lists the account's labels), so it is withheld here for
- * the identical reason and omitted from `args` — none of these stories pass
- * `selectedMessageIds`, which keeps the trigger from rendering.
- */
-const meta: Meta<typeof SelectionToolbar> = {
-	title: "Screens/WebClient/SelectionToolbar",
-	component: SelectionToolbar,
-	parameters: { layout: "padded" },
-	args: {
-		selectedCount: 3,
-		onDelete: () => undefined,
-		onClearSelection: () => undefined,
-		onMarkAsRead: () => undefined,
-	},
-	render: (args) => (
-		<div className="w-full rounded-md border border-line">
-			<SelectionToolbar {...args} />
-		</div>
-	),
-};
-export default meta;
-
-type Story = StoryObj<typeof SelectionToolbar>;
-
-/** A plain bounded selection: the count in words, mark-read and delete. */
-export const Bounded: Story = {};
-
-export const OneSelected: Story = { args: { selectedCount: 1 } };
-
-/**
- * Some but not all loaded rows checked while searching: the select-all control
- * renders the tri-state dash.
- */
-export const SelectAllIndeterminate: Story = {
-	args: {
-		selectAll: {
-			checked: false,
-			indeterminate: true,
-			onChange: () => undefined,
-		},
-	},
-};
-
-/**
- * Every loaded row checked. The label names the loaded scope — "All 47 loaded
- * selected" — rather than a bare count next to a fully ticked box.
- */
-export const AllLoadedSelected: Story = {
-	args: {
-		selectedCount: 47,
-		selectAll: { checked: true, onChange: () => undefined },
-	},
-};
-
-/**
- * Search has more matches than are loaded: an escalation offer naming the
- * scope (a real button, not prose). Tapping it pays for the real count.
- */
-export const EscalationAvailable: Story = {
-	args: {
-		selectedCount: 47,
-		selectAll: { checked: true, onChange: () => undefined },
-		notice: {
-			tone: "info",
-			text: "",
-			action: {
-				label: 'Select all matching "npm"',
-				onClick: () => undefined,
-			},
-		},
-	},
-};
-
-/**
- * The result set is still paging to its total: a running count, Delete hidden
- * (the count it would act on isn't known yet), and an explicit Stop.
- */
-export const Counting: Story = {
-	args: {
-		selectedCount: 47,
-		isCounting: true,
-		statusLabel: "Counting… 1,900 so far",
-		selectAll: { checked: true, onChange: () => undefined },
-		notice: {
-			tone: "info",
-			text: "",
-			action: { label: "Stop", onClick: () => undefined },
-		},
-	},
-};
-
-/** Past ~10s the counting state says so rather than looking stuck. */
-export const CountingLargeResultSet: Story = {
-	args: {
-		selectedCount: 0,
-		isCounting: true,
-		statusLabel: "Counting… 12,400 so far. This is a big result set.",
-		notice: {
-			tone: "info",
-			text: "",
-			action: { label: "Stop", onClick: () => undefined },
-		},
-	},
-};
-
-/**
- * The selection is now the search predicate: the count names the query's total,
- * every verb stays available over it (#114 — not delete-only), and the notice
- * offers a way back to the bounded selection.
- */
-export const Escalated: Story = {
-	args: {
-		selectedCount: 3412,
-		statusLabel: 'All 3,412 matching "npm" selected',
-		notice: {
-			tone: "info",
-			text: "",
-			action: { label: "Clear selection", onClick: () => undefined },
-		},
-	},
-};
-
-/**
- * A chunked delete over the predicate: a running total and a determinate
- * progress bar, the verbs off screen (the bar is the only thing that can act
- * mid-run), toned as destructive.
- */
-export const DeletingWithProgress: Story = {
-	args: {
-		selectedCount: 3412,
-		statusLabel: "Deleting 1,200 of 3,412…",
-		progress: { value: 1200, max: 3412, tone: "danger" },
-	},
-};
-
-/** A move over the escalated selection: the same run, toned as ordinary
- *  progress and worded for the action that is running. */
-export const MovingWithProgress: Story = {
-	args: {
-		selectedCount: 3412,
-		statusLabel: "Moving 1,200 of 3,412…",
-		progress: { value: 1200, max: 3412, tone: "info" },
-	},
-};
-
-/** Mark-read over the escalated selection. */
-export const MarkingReadWithProgress: Story = {
-	args: {
-		selectedCount: 3412,
-		statusLabel: "Marking 1,200 of 3,412 as read…",
-		progress: { value: 1200, max: 3412, tone: "info" },
-	},
-};
-
-/**
- * A run left some messages unreached: the notice names how many landed, the
- * count reflects only what is still selected (the failures), and Retry targets
- * exactly that.
- */
-export const PartialFailure: Story = {
-	args: {
-		selectedCount: 340,
-		notice: {
-			tone: "danger",
-			text: "3,072 moved to Trash. 340 couldn't be deleted.",
-			action: { label: "Retry 340", onClick: () => undefined },
-		},
-	},
-};
-
-/**
- * A selection spanning accounts: Move is withdrawn (it only works within one
- * account) and the reason is stated inline.
- */
-export const CrossAccountHint: Story = {
-	args: {
-		moveDisabledHint:
-			"Move only works within one account — clear selection or pick messages from a single account",
-	},
-};