@remit/web-client 0.0.300 → 0.0.301

package/src/components/settings/accounts.stories.tsx

@@ -0,0 +1,363 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HttpResponse, http } from "msw";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld, NOW } from "@/mocks/story-frame/mail-world";
+import { signedInAs } from "@/mocks/story-frame/session";
+import { makeAccount } from "@/test-support/fixtures";
+
+const accounts = [
+	makeAccount({
+		accountId: "acc-personal",
+		email: "alice.tan@gmail.example",
+		displayName: "Personal",
+		lastSyncAt: NOW,
+	}),
+	makeAccount({
+		accountId: "acc-work",
+		email: "alice@northwind.example",
+		displayName: "Work",
+		lastSyncAt: NOW,
+		lastError:
+			"AUTHENTICATIONFAILED: [ALERT] Application-specific password required",
+	}),
+	makeAccount({
+		accountId: "acc-forum",
+		email: "alice@synthcollective.example",
+		displayName: "Synthwave Forum",
+		lastSyncAt: NOW,
+		muted: { value: true, setAt: NOW },
+	}),
+];
+
+const world = mailWorld({ accounts });
+
+const meta = {
+	title: "Playground/Shipped/Settings/Accounts",
+	component: AppStory,
+	args: { url: "/settings/accounts" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(world) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const desktop = { viewport: { value: "desktop", isRotated: false } };
+const tablet = { viewport: { value: "tablet", isRotated: false } };
+const phone = { viewport: { value: "mobile", isRotated: false } };
+
+const page = within(document.body);
+
+const openEditPanel = async (canvasElement: HTMLElement, index: number) => {
+	const canvas = within(canvasElement);
+	await canvas.findAllByRole("button", { name: "Manage" });
+	const manage = canvas.getAllByRole("button", { name: "Manage" })[index];
+	if (manage) await userEvent.click(manage);
+	return page.findByRole("dialog", { name: "Edit Account" });
+};
+
+export const Accounts: Story = {
+	globals: desktop,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Personal")).toBeVisible();
+		await expect(canvas.getByText("3 accounts")).toBeVisible();
+		await expect(
+			canvas.getByText(/Application-specific password required/),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Reconnect" }),
+		).toBeVisible();
+		await expect(
+			canvas.getAllByRole("button", { name: "Manage" }),
+		).toHaveLength(2);
+	},
+};
+
+export const AccountsScrolling: Story = {
+	name: "Accounts — desktop, beyond the fold",
+	globals: desktop,
+	parameters: {
+		msw: {
+			handlers: mailHandlers(
+				mailWorld({
+					accounts: Array.from({ length: 9 }, (_, index) =>
+						makeAccount({
+							accountId: `acc-${index + 1}`,
+							email: `alice+${index + 1}@northwind.example`,
+							displayName: `Account ${index + 1}`,
+							lastSyncAt: NOW,
+						}),
+					),
+				}),
+			),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Account 9");
+		const leave = canvas.getByRole("button", {
+			name: "Delete your Remit account",
+		});
+		leave.scrollIntoView();
+		await expect(leave).toBeVisible();
+		await expect(
+			canvas.getByRole("heading", { name: "Accounts" }),
+		).toBeVisible();
+	},
+};
+
+export const AccountsMissingSyncDate: Story = {
+	parameters: {
+		msw: {
+			handlers: mailHandlers(
+				mailWorld({
+					accounts: [
+						makeAccount({
+							accountId: "acc-personal",
+							email: "alice.tan@gmail.example",
+							displayName: "Personal",
+						}),
+					],
+				}),
+			),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText(/never synced/)).toBeVisible();
+	},
+};
+
+export const ShellPhone: Story = {
+	name: "Shell — phone",
+	globals: phone,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Personal");
+		await expect(
+			canvas.getByRole("button", { name: "Open settings menu" }),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Back to mail" }),
+		).toBeVisible();
+	},
+};
+
+export const ShellTablet: Story = {
+	name: "Shell — tablet",
+	globals: tablet,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Personal");
+		await expect(
+			canvas.getByRole("button", { name: "Open settings menu" }),
+		).toBeVisible();
+	},
+};
+
+export const AccountsEmpty: Story = {
+	name: "Accounts — empty",
+	parameters: {
+		msw: { handlers: mailHandlers(mailWorld({ accounts: [] })) },
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("No accounts configured."),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Add your first account" }),
+		).toBeVisible();
+	},
+};
+
+export const AccountsLoading: Story = {
+	name: "Accounts — loading",
+	parameters: {
+		msw: {
+			handlers: [
+				http.get("/api/config", () => new Promise<never>(() => undefined)),
+				...mailHandlers(world),
+			],
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByRole("status", { name: "Loading accounts" }),
+		).toBeVisible();
+	},
+};
+
+export const AccountsOauthSuccess: Story = {
+	name: "Accounts — OAuth success",
+	args: { url: "/settings/accounts?connected=acc-personal" },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("Account connected successfully."),
+		).toBeVisible();
+	},
+};
+
+export const AccountsOauthError: Story = {
+	name: "Accounts — OAuth error",
+	args: { url: "/settings/accounts?oauthError=consent_required" },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/admin needs to approve Remit/),
+		).toBeVisible();
+	},
+};
+
+export const AccountsDeleteConfirm: Story = {
+	name: "Accounts — delete confirm",
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Work");
+		const remove = canvas.getAllByRole("button", { name: "Delete account" })[1];
+		if (remove) await userEvent.click(remove);
+		const dialog = within(
+			await page.findByRole("dialog", { name: "Delete account" }),
+		);
+		await expect(dialog.getByText("Are you sure?")).toBeVisible();
+		await expect(dialog.getByText("alice@northwind.example")).toBeVisible();
+		await expect(
+			dialog.getByRole("button", { name: "Delete account" }),
+		).toBeEnabled();
+	},
+};
+
+export const AccountEdit: Story = {
+	name: "Accounts — edit",
+	globals: desktop,
+	play: async ({ canvasElement }) => {
+		const panel = within(await openEditPanel(canvasElement, 0));
+		await expect(panel.getByLabelText("Display name (optional)")).toHaveValue(
+			"Personal",
+		);
+		await expect(panel.getByLabelText("Email Address")).toHaveValue(
+			"alice.tan@gmail.example",
+		);
+	},
+};
+
+export const AccountEditClosed: Story = {
+	name: "Accounts — edit panel closed",
+	globals: desktop,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Personal")).toBeVisible();
+		await expect(
+			page.queryByRole("dialog", { name: "Edit Account" }),
+		).toBeNull();
+		await expect(
+			canvas.getByRole("button", { name: "Add account" }),
+		).toBeVisible();
+	},
+};
+
+export const AccountEditPhone: Story = {
+	name: "Accounts — edit, phone",
+	globals: phone,
+	play: async ({ canvasElement }) => {
+		const panel = await openEditPanel(canvasElement, 0);
+		await expect(panel).toBeVisible();
+		await expect(
+			within(panel).getByLabelText("Display name (optional)"),
+		).toBeVisible();
+	},
+};
+
+export const AccountEditNoDisplayName: Story = {
+	name: "Accounts — edit, no display name",
+	parameters: {
+		msw: {
+			handlers: mailHandlers(
+				mailWorld({
+					accounts: [
+						makeAccount({
+							accountId: "acc-personal",
+							email: "alice.tan@gmail.example",
+							lastSyncAt: NOW,
+						}),
+					],
+				}),
+			),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Alice Tan")).toBeVisible();
+		const panel = within(await openEditPanel(canvasElement, 0));
+		const field = panel.getByLabelText("Display name (optional)");
+		await expect(field).toHaveValue("");
+		await expect(field).toHaveAttribute("placeholder", "Alice");
+	},
+};
+
+export const DangerZone: Story = {
+	name: "Danger zone",
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Personal");
+		await expect(
+			canvas.getByText(/erases Remit's copy of your mail/),
+		).toBeInTheDocument();
+		await expect(
+			canvas.getByRole("button", { name: "Delete your Remit account" }),
+		).toBeInTheDocument();
+	},
+};
+
+export const DangerZoneConfirm: Story = {
+	name: "Danger zone — confirm dialog",
+	args: { authProvider: signedInAs("alice.tan@gmail.example") },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Personal");
+		await userEvent.click(
+			canvas.getByRole("button", { name: "Delete your Remit account" }),
+		);
+		const dialog = within(
+			await page.findByRole("dialog", { name: "Delete your Remit account" }),
+		);
+		await expect(dialog.getByText("alice.tan@gmail.example")).toBeVisible();
+		await userEvent.type(
+			dialog.getByLabelText(/to confirm/),
+			"someone@else.example",
+		);
+		await userEvent.click(
+			dialog.getByRole("button", { name: "Delete everything" }),
+		);
+		await waitFor(() =>
+			expect(dialog.getByRole("alert")).toHaveTextContent(
+				"That doesn't match your account email",
+			),
+		);
+	},
+};
+
+export const AccountsUnreadable: Story = {
+	name: "Accounts — unreadable",
+	parameters: {
+		msw: {
+			handlers: [
+				http.get("/api/config", () => HttpResponse.error()),
+				...mailHandlers(world),
+			],
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("Couldn't load accounts"),
+		).toBeVisible();
+	},
+};

package/src/components/settings/advanced.stories.tsx

@@ -0,0 +1,162 @@
+import type { RemitImapQuarantineResponse } from "@remit/api-http-client/types.gen.ts";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HttpResponse, http } from "msw";
+import { expect, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import {
+	mailboxIdFor,
+	mailWorld,
+	NOW,
+	PERSONAL,
+} from "@/mocks/story-frame/mail-world";
+import { withRuntimeConfig } from "@/mocks/story-frame/session";
+
+const setAside = (
+	id: string,
+	role: "Inbox" | "Archive",
+	failureCode: RemitImapQuarantineResponse["failureCode"],
+	failureMessage: string,
+): RemitImapQuarantineResponse => ({
+	quarantineId: `q-${id}`,
+	accountConfigId: "cfg-1",
+	accountId: PERSONAL,
+	mailboxId: mailboxIdFor(PERSONAL, role),
+	uidValidity: 1_712_000_000,
+	uid: 40_217,
+	mailboxRole: role,
+	mailboxPath: role === "Inbox" ? "INBOX" : "Archive",
+	quarantinedAt: NOW,
+	attempts: 3,
+	failureStage: "BodyParse",
+	failureCode,
+	failureMessage,
+	workerVersion: "worker 1.0.0",
+	contentType: "multipart/mixed",
+	sizeBytes: 184_233,
+	structure: [{ depth: 0, contentType: "multipart/mixed" }],
+	createdAt: NOW,
+	updatedAt: NOW,
+});
+
+const unreadableBody = setAside(
+	"1",
+	"Inbox",
+	"UnreadableBody",
+	"multipart boundary was never closed",
+);
+const unknownCharset = setAside(
+	"2",
+	"Archive",
+	"UnknownCharset",
+	"declared charset is not a known encoding",
+);
+
+const meta = {
+	title: "Playground/Shipped/Settings/Advanced/Overview",
+	component: AppStory,
+	args: { url: "/settings/advanced" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(mailWorld()) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Advanced: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/Every message has been read successfully/),
+		).toBeVisible();
+		await expect(canvas.getByText("About")).toBeVisible();
+		await expect(
+			canvas.queryByRole("link", { name: "Download root certificate" }),
+		).toBeNull();
+	},
+};
+
+export const AdvancedOneQuarantined: Story = {
+	parameters: {
+		msw: {
+			handlers: mailHandlers(mailWorld({ quarantine: [unreadableBody] })),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/multipart boundary was never closed/),
+		).toBeVisible();
+		await expect(canvas.queryByText(/messages could not be read/)).toBeNull();
+	},
+};
+
+export const AdvancedQuarantineAlert: Story = {
+	parameters: {
+		msw: {
+			handlers: mailHandlers(
+				mailWorld({ quarantine: [unreadableBody, unknownCharset] }),
+			),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("2 messages could not be read."),
+		).toBeVisible();
+	},
+};
+
+export const AdvancedQuarantineLoading: Story = {
+	parameters: {
+		msw: {
+			handlers: [
+				http.get(
+					"/api/me/quarantine",
+					() => new Promise<never>(() => undefined),
+				),
+				...mailHandlers(mailWorld()),
+			],
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("Checking for messages set aside…"),
+		).toBeVisible();
+	},
+};
+
+export const AdvancedQuarantineUnreadable: Story = {
+	parameters: {
+		msw: {
+			handlers: [
+				http.get("/api/me/quarantine", () => HttpResponse.error()),
+				...mailHandlers(mailWorld()),
+			],
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(
+				"The list of set-aside messages could not be read.",
+			),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Report this" }),
+		).toBeVisible();
+	},
+};
+
+export const AdvancedTlsInternal: Story = {
+	beforeEach: withRuntimeConfig({ tlsMode: "internal" }),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByRole("link", { name: "Download root certificate" }),
+		).toHaveAttribute("href", "/tls-root-ca.crt");
+	},
+};

package/src/components/settings/appearance.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld } from "@/mocks/story-frame/mail-world";
+
+const meta = {
+	title: "Playground/Shipped/Settings/Appearance",
+	component: AppStory,
+	args: { url: "/settings/appearance" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(mailWorld()) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Appearance: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const density = await canvas.findByRole("radiogroup", { name: "Density" });
+		await expect(
+			within(density).getByRole("radio", { name: "Comfortable" }),
+		).toBeChecked();
+		const theme = canvas.getByRole("radiogroup", { name: "Theme" });
+		await expect(within(theme).getAllByRole("radio")).toHaveLength(3);
+		await expect(
+			canvas.getByText(/System default follows your OS preference/),
+		).toBeVisible();
+	},
+};

package/src/components/settings/folders.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import {
+	accountWithFolders,
+	foldersOf,
+	mailWorld,
+} from "@/mocks/story-frame/mail-world";
+import { makeMailbox } from "@/test-support/fixtures";
+
+const ACCOUNT_ID = "acc-work";
+const EMAIL = "alice@northwind.example";
+
+const folder = (path: string, messageCount: number) =>
+	makeMailbox({
+		accountId: ACCOUNT_ID,
+		mailboxId: `mbx-${path.toLowerCase().replaceAll("/", "-")}`,
+		fullPath: path,
+		messageCount,
+	});
+
+const world = mailWorld({
+	accounts: [accountWithFolders(ACCOUNT_ID, EMAIL, "Work")],
+	mailboxes: [
+		...foldersOf(ACCOUNT_ID),
+		folder("Travel", 0),
+		folder("Travel/Flights", 41),
+		folder("Travel/Hotels", 96),
+		folder("Finance", 0),
+		folder("Finance/Invoices", 12),
+		folder("Family", 230),
+	],
+});
+
+const meta = {
+	title: "Playground/Shipped/Settings/Folder roles",
+	component: AppStory,
+	args: { url: "/settings/folders" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(world) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const page = within(document.body);
+
+export const Desktop: Story = {
+	globals: { viewport: { value: "desktop", isRotated: false } },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByRole("heading", { name: `Your folders — ${EMAIL}` }),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("tree", { name: `All folders for ${EMAIL}` }),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Rename Travel" }),
+		).toBeInTheDocument();
+	},
+};
+
+export const Phone: Story = {
+	globals: { viewport: { value: "mobile", isRotated: false } },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByRole("tree", { name: `All folders for ${EMAIL}` }),
+		).toBeVisible();
+	},
+};
+
+export const Renaming: Story = {
+	globals: { viewport: { value: "desktop", isRotated: false } },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(
+			await canvas.findByRole("button", { name: "Rename Travel" }),
+		);
+		const dialog = within(
+			await page.findByRole("dialog", { name: "Rename Travel" }),
+		);
+		await expect(dialog.getByRole("textbox")).toBeVisible();
+	},
+};