@remit/ui 0.0.21 → 0.0.23

package/src/components/self-update-section.tsx

@@ -0,0 +1,377 @@
+import {
+	CheckCircle2,
+	CloudOff,
+	Download,
+	ExternalLink,
+	Loader2,
+	RotateCcw,
+	TriangleAlert,
+} from "lucide-react";
+import { type ReactNode, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Badge } from "./badge.js";
+import { Banner } from "./banner.js";
+import { Button, ButtonLink } from "./button.js";
+import {
+	formatRelativeCheck,
+	formatReleaseDate,
+	type SelfUpdateState,
+} from "./self-update.js";
+
+export interface SelfUpdateSectionProps {
+	state: SelfUpdateState;
+	onCheck: () => void;
+	/** Opens consent before anything is replaced. */
+	onInstall: () => void;
+	/**
+	 * Clears a finished result from the pane. Required: it is the only exit
+	 * from `succeeded` and `rolledBack`, and without it the pane sticks on a
+	 * red failure row for good.
+	 */
+	onDismissResult: () => void;
+	/** Fixed "now" so stories and tests read the same relative times. */
+	now?: number;
+}
+
+function SectionRow({
+	children,
+	tone,
+}: {
+	children: ReactNode;
+	tone?: "danger";
+}) {
+	return (
+		<div
+			className={cn(
+				"rounded-sm border bg-surface px-row-inset py-3",
+				tone === "danger" ? "border-danger/50" : "border-line",
+			)}
+		>
+			{children}
+		</div>
+	);
+}
+
+/**
+ * Updates, in Settings › Advanced.
+ *
+ * A mail client is read first and administered second, so an available update
+ * is stated here and nowhere else — no modal, no interruption, no repeat
+ * asking. Applying one is consequential (the server goes away and comes back),
+ * so it is never one click from this pane.
+ */
+export function SelfUpdateSection({
+	state,
+	onCheck,
+	onInstall,
+	onDismissResult,
+	now = Date.now(),
+}: SelfUpdateSectionProps) {
+	const [notice, setNotice] = useState<string | null>(null);
+
+	const checking = state.status === "checking";
+	const installable = state.status === "available";
+
+	const handleCheck = () => {
+		if (checking) {
+			setNotice("Already checking. The result appears here in a moment.");
+			return;
+		}
+		setNotice(null);
+		onCheck();
+	};
+
+	const handleInstall = () => {
+		if (!installable && state.status !== "rolledBack") {
+			setNotice(
+				"There is no update to install. Check for updates first — if one is found it appears here.",
+			);
+			return;
+		}
+		setNotice(null);
+		onInstall();
+	};
+
+	const body = ((): ReactNode => {
+		switch (state.status) {
+			case "upToDate":
+				return (
+					<SectionRow>
+						<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+							<div className="flex min-w-0 items-center gap-2">
+								<CheckCircle2
+									className="size-4 shrink-0 text-positive"
+									aria-hidden
+								/>
+								<p className="text-sm text-fg">
+									Remit {state.version} is the latest version.
+									<span className="text-fg-subtle">
+										{" "}
+										Checked {formatRelativeCheck(state.checkedAt, now)}.
+									</span>
+								</p>
+							</div>
+							<Button
+								variant="secondary"
+								size="sm"
+								className="shrink-0"
+								onClick={handleCheck}
+							>
+								Check again
+							</Button>
+						</div>
+					</SectionRow>
+				);
+
+			case "checking":
+				return (
+					<SectionRow>
+						<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+							<div className="flex min-w-0 items-center gap-2">
+								<Loader2
+									className="size-4 shrink-0 animate-spin text-fg-subtle"
+									aria-hidden
+								/>
+								<p className="text-sm text-fg-muted">
+									Looking for a newer version. You are on {state.version}.
+								</p>
+							</div>
+							<Button
+								variant="secondary"
+								size="sm"
+								className="shrink-0"
+								onClick={handleCheck}
+							>
+								Check again
+							</Button>
+						</div>
+					</SectionRow>
+				);
+
+			case "checkFailed":
+				return (
+					<SectionRow>
+						<div className="space-y-2">
+							<div className="flex items-start gap-2">
+								<CloudOff
+									className="mt-0.5 size-4 shrink-0 text-fg-subtle"
+									aria-hidden
+								/>
+								<div className="min-w-0 space-y-1">
+									<p className="text-sm text-fg">
+										Could not reach the update source.
+									</p>
+									<p className="text-xs text-fg-muted">{state.reason}</p>
+									<p className="text-xs text-fg-subtle">
+										You are still on {state.version} and it keeps working.
+										{state.lastCheckedAt !== undefined && (
+											<>
+												{" "}
+												Last successful check{" "}
+												{formatRelativeCheck(state.lastCheckedAt, now)}.
+											</>
+										)}
+									</p>
+								</div>
+							</div>
+							<div className="flex justify-end">
+								<Button variant="secondary" size="sm" onClick={handleCheck}>
+									Try again
+								</Button>
+							</div>
+						</div>
+					</SectionRow>
+				);
+
+			case "available":
+				return (
+					<SectionRow>
+						<div className="space-y-3">
+							<div className="flex flex-wrap items-center gap-2">
+								<span className="text-sm font-semibold text-fg">
+									Remit {state.release.version}
+								</span>
+								<Badge tone="accent">update available</Badge>
+								<span className="text-2xs text-fg-subtle">
+									released {formatReleaseDate(state.release.releasedAt)} · you
+									are on {state.version}
+								</span>
+							</div>
+							<p className="text-sm text-fg-muted">{state.release.summary}</p>
+							<p className="text-xs text-fg-subtle">
+								Installing restarts Remit, so mail stops loading for about a
+								minute. If the new version does not come back up, the one you
+								are running now is restored on its own.
+							</p>
+							<div className="flex flex-wrap items-center gap-2">
+								<Button
+									size="sm"
+									icon={<Download className="size-3.5" />}
+									onClick={handleInstall}
+								>
+									Install {state.release.version}
+								</Button>
+								<ButtonLink
+									variant="secondary"
+									size="sm"
+									external
+									href={state.release.releaseNotesUrl}
+									icon={<ExternalLink className="size-3.5" />}
+								>
+									Release notes
+								</ButtonLink>
+							</div>
+						</div>
+					</SectionRow>
+				);
+
+			case "applying":
+				return (
+					<SectionRow>
+						<div className="flex min-w-0 items-center gap-2">
+							<Loader2
+								className="size-4 shrink-0 animate-spin text-accent-2"
+								aria-hidden
+							/>
+							<p className="text-sm text-fg-muted">
+								Installing Remit {state.target}. The restart screen has the
+								details.
+							</p>
+						</div>
+					</SectionRow>
+				);
+
+			case "succeeded":
+				return (
+					<Banner tone="success" onDismiss={onDismissResult}>
+						<div className="space-y-1">
+							<p className="font-semibold">Updated to Remit {state.version}.</p>
+							<p>
+								You were on {state.previousVersion}.{" "}
+								<a
+									href={state.releaseNotesUrl}
+									target="_blank"
+									rel="noopener noreferrer"
+									className="underline"
+								>
+									See what changed
+								</a>
+								.
+							</p>
+						</div>
+					</Banner>
+				);
+
+			case "rolledBack":
+				return (
+					<SectionRow tone="danger">
+						<div className="space-y-3">
+							<div className="flex items-start gap-2">
+								<TriangleAlert
+									className="mt-0.5 size-4 shrink-0 text-danger"
+									aria-hidden
+								/>
+								<div className="min-w-0 space-y-1">
+									<p className="text-sm font-semibold text-fg">
+										Remit {state.attemptedVersion} did not start. Remit reports
+										that it put {state.version} back.
+									</p>
+									<p className="text-sm text-fg-muted">
+										You are running {state.version} again. A failed update can
+										still have changed things on the way — the log below is the
+										only account of what it got as far as doing.
+									</p>
+								</div>
+							</div>
+							<div className="space-y-1">
+								<p className="text-xs text-fg-subtle">
+									What Remit reported as the failure
+								</p>
+								<code className="block rounded-xs bg-danger-soft px-2 py-1 text-2xs text-danger">
+									{state.reason}
+								</code>
+							</div>
+							<div className="space-y-1">
+								<p className="text-xs text-fg-subtle">
+									Read the full log before trying again:
+								</p>
+								<code className="block rounded-xs bg-surface-sunken px-2 py-1 text-2xs text-fg-muted">
+									{state.logsCommand}
+								</code>
+							</div>
+							<div className="flex flex-wrap items-center gap-2">
+								<Button
+									variant="secondary"
+									size="sm"
+									icon={<RotateCcw className="size-3.5" />}
+									onClick={handleInstall}
+								>
+									Try {state.attemptedVersion} again
+								</Button>
+								<Button variant="ghost" size="sm" onClick={onDismissResult}>
+									Stay on {state.version}
+								</Button>
+							</div>
+						</div>
+					</SectionRow>
+				);
+
+			case "unreachable":
+				return (
+					<SectionRow tone="danger">
+						<div className="space-y-2">
+							<div className="flex items-start gap-2">
+								<TriangleAlert
+									className="mt-0.5 size-4 shrink-0 text-danger"
+									aria-hidden
+								/>
+								<div className="min-w-0 space-y-1">
+									<p className="text-sm font-semibold text-fg">
+										Installing {state.attemptedVersion} left the server
+										unreachable.
+									</p>
+									<p className="text-sm text-fg-muted">
+										Remit has answered again since, but nothing here can say
+										what happened during the silence.
+									</p>
+								</div>
+							</div>
+							<code className="block rounded-xs bg-surface-sunken px-2 py-1 text-2xs text-fg-muted">
+								{state.logsCommand}
+							</code>
+							<div className="flex justify-end">
+								<Button variant="ghost" size="sm" onClick={onDismissResult}>
+									Dismiss
+								</Button>
+							</div>
+						</div>
+					</SectionRow>
+				);
+
+			default: {
+				const exhaustive: never = state;
+				return exhaustive;
+			}
+		}
+	})();
+
+	return (
+		<section className="space-y-3">
+			<header className="space-y-1">
+				<h2 className="text-sm font-semibold text-fg">Updates</h2>
+				<p className="text-xs text-fg-muted">
+					This Remit runs on your own server, so it updates when you say so.
+					Your mail lives at your provider and is never touched by an update.
+				</p>
+			</header>
+
+			{body}
+
+			{notice && (
+				<p role="status" className="text-xs text-fg-muted">
+					{notice}
+				</p>
+			)}
+		</section>
+	);
+}

package/src/components/self-update.render.test.ts

@@ -0,0 +1,294 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import {
+	demoLogsCommand,
+	demoRelease,
+	demoRunId,
+	type SelfUpdateState,
+	updateWaitNote,
+} from "./self-update.js";
+import { SelfUpdateConfirmDialog } from "./self-update-confirm-dialog.js";
+import { UpdateAvailableDot } from "./self-update-dot.js";
+import {
+	SelfUpdateProgressOverlay,
+	SelfUpdateUnreachableScreen,
+} from "./self-update-progress-overlay.js";
+import { SelfUpdateSection } from "./self-update-section.js";
+
+const noop = () => {};
+const NOW = Date.parse("2026-07-20T12:00:00.000Z");
+const CURRENT = "0.9.3";
+
+/** SSR splits interpolations with comment markers; sentences read across them. */
+const render = (element: Parameters<typeof renderToString>[0]) =>
+	renderToString(element).replaceAll("<!-- -->", "");
+
+const section = (state: SelfUpdateState) =>
+	render(
+		createElement(SelfUpdateSection, {
+			state,
+			now: NOW,
+			onCheck: noop,
+			onInstall: noop,
+			onDismissResult: noop,
+		}),
+	);
+
+describe("SelfUpdateSection", () => {
+	it("states being up to date without raising an alert", () => {
+		const html = section({
+			status: "upToDate",
+			version: CURRENT,
+			checkedAt: NOW - 60_000,
+		});
+		assert.match(html, /0\.9\.3 is the latest version/);
+		assert.doesNotMatch(html, /role="alert"/);
+	});
+
+	it("offers an available update without shouting about it", () => {
+		const html = section({
+			status: "available",
+			version: CURRENT,
+			release: demoRelease,
+		});
+		assert.match(html, /Install 0\.9\.4/);
+		assert.match(html, /Release notes/);
+		assert.doesNotMatch(html, /role="alert"/);
+	});
+
+	it("names the automatic rollback before the user commits", () => {
+		const html = section({
+			status: "available",
+			version: CURRENT,
+			release: demoRelease,
+		});
+		assert.match(html, /restored on its own/);
+	});
+
+	it("keeps a failed check separate from a failed update", () => {
+		const html = section({
+			status: "checkFailed",
+			version: CURRENT,
+			reason: "No route to github.com",
+			lastCheckedAt: NOW - 3_600_000,
+		});
+		assert.match(html, /Could not reach the update source/);
+		assert.match(html, /still on 0\.9\.3 and it keeps working/);
+		assert.match(html, /Try again/);
+	});
+
+	it("says which version is running after a rollback, and where the log is", () => {
+		const html = section({
+			status: "rolledBack",
+			runId: demoRunId,
+			version: CURRENT,
+			attemptedVersion: "0.9.4",
+			reason: "migration 0042 failed",
+			logsCommand: demoLogsCommand,
+		});
+		assert.match(html, /running 0\.9\.3 again/);
+		assert.match(html, /migration 0042 failed/);
+		assert.match(html, /remit logs --since 10m/);
+	});
+
+	it("attributes the rollback to the server rather than asserting it", () => {
+		const html = section({
+			status: "rolledBack",
+			runId: demoRunId,
+			version: CURRENT,
+			attemptedVersion: "0.9.4",
+			reason: "migration 0042 failed",
+			logsCommand: demoLogsCommand,
+		});
+		assert.match(html, /Remit reports that it put 0\.9\.3 back/);
+	});
+
+	it("never claims data survived a failed update", () => {
+		const html = section({
+			status: "rolledBack",
+			runId: demoRunId,
+			version: CURRENT,
+			attemptedVersion: "0.9.4",
+			reason: "migration 0042_add_thread_index failed",
+			logsCommand: demoLogsCommand,
+		});
+		// The server reported a rollback and a reason. It reported nothing about
+		// data, and a half-applied migration is exactly where that matters.
+		assert.doesNotMatch(html, /Nothing was lost/);
+		assert.doesNotMatch(html, /everything works/);
+		assert.match(html, /can still have changed things/);
+	});
+
+	it("renders every status rather than going blank", () => {
+		assert.match(
+			section({
+				status: "applying",
+				runId: demoRunId,
+				version: CURRENT,
+				target: "0.9.4",
+				phase: "restarting",
+				elapsedSeconds: 20,
+			}),
+			/Installing Remit 0\.9\.4/,
+		);
+		assert.match(
+			section({
+				status: "unreachable",
+				runId: demoRunId,
+				previousVersion: CURRENT,
+				attemptedVersion: "0.9.4",
+				elapsedSeconds: 420,
+				logsCommand: demoLogsCommand,
+			}),
+			/left the server unreachable/,
+		);
+	});
+
+	it("offers a way forward from every failure", () => {
+		const rolledBack = section({
+			status: "rolledBack",
+			runId: demoRunId,
+			version: CURRENT,
+			attemptedVersion: "0.9.4",
+			reason: "boom",
+			logsCommand: demoLogsCommand,
+		});
+		assert.match(rolledBack, /Try 0\.9\.4 again/);
+		assert.match(rolledBack, /Stay on 0\.9\.3/);
+	});
+
+	it("keeps the check control pressable while a check is running", () => {
+		const html = section({ status: "checking", version: CURRENT });
+		assert.match(html, /Check again/);
+		assert.doesNotMatch(html, /disabled=/);
+	});
+});
+
+describe("SelfUpdateConfirmDialog", () => {
+	const html = render(
+		createElement(SelfUpdateConfirmDialog, {
+			open: true,
+			currentVersion: CURRENT,
+			release: demoRelease,
+			onClose: noop,
+			onConfirm: noop,
+		}),
+	);
+
+	it("reflects the consequence in the order the user will feel it", () => {
+		assert.match(html, /lose its connection/);
+		assert.match(html, /stays at your provider/);
+		assert.match(html, /restored automatically/);
+	});
+
+	it("always offers the way back", () => {
+		assert.match(html, /Not now/);
+	});
+
+	it("renders nothing when closed", () => {
+		assert.equal(
+			renderToString(
+				createElement(SelfUpdateConfirmDialog, {
+					open: false,
+					currentVersion: CURRENT,
+					release: demoRelease,
+					onClose: noop,
+					onConfirm: noop,
+				}),
+			),
+			"",
+		);
+	});
+});
+
+describe("SelfUpdateProgressOverlay", () => {
+	it("tells the user the disconnection is expected", () => {
+		const html = render(
+			createElement(SelfUpdateProgressOverlay, {
+				target: "0.9.4",
+				phase: "restarting",
+				elapsedSeconds: 20,
+			}),
+		);
+		assert.match(html, /no server to talk to/);
+		assert.match(html, /Waiting for Remit to answer again/);
+	});
+
+	it("stops promising a minute once a minute has passed", () => {
+		assert.match(updateWaitNote(30), /about a minute/);
+		assert.doesNotMatch(updateWaitNote(200), /about a minute/);
+	});
+
+	it("never describes the server from a lost connection", () => {
+		// The unreachable screen refuses to claim the rollback ran; the timeout
+		// copy sits on the same dead connection and may not claim it either.
+		for (const seconds of [30, 120, 240, 600]) {
+			assert.doesNotMatch(updateWaitNote(seconds), /old version|way back|kept/);
+		}
+	});
+
+	it("blocks the window rather than its nearest positioned ancestor", () => {
+		const html = render(
+			createElement(SelfUpdateProgressOverlay, {
+				target: "0.9.4",
+				phase: "restarting",
+				elapsedSeconds: 20,
+			}),
+		);
+		assert.match(html, /fixed inset-0/);
+		assert.doesNotMatch(html, /absolute inset-0/);
+		assert.match(html, /aria-modal="true"/);
+	});
+
+	it("scopes the live region to the line that changes", () => {
+		const html = render(
+			createElement(SelfUpdateProgressOverlay, {
+				target: "0.9.4",
+				phase: "restarting",
+				elapsedSeconds: 20,
+			}),
+		);
+		assert.equal(html.match(/aria-live/g)?.length, 1);
+	});
+});
+
+describe("SelfUpdateUnreachableScreen", () => {
+	const html = render(
+		createElement(SelfUpdateUnreachableScreen, {
+			attemptedVersion: "0.9.4",
+			previousVersion: CURRENT,
+			elapsedSeconds: 420,
+			logsCommand: demoLogsCommand,
+			onRetryConnection: noop,
+		}),
+	);
+
+	it("raises an alert and never claims the rollback succeeded", () => {
+		assert.match(html, /role="alertdialog"/);
+		assert.match(html, /aria-modal="true"/);
+		assert.match(html, /cannot confirm that from here/);
+	});
+
+	it("points at the machine that can answer", () => {
+		assert.match(html, /remit logs --since 10m/);
+		assert.match(html, /Try connecting again/);
+	});
+});
+
+describe("UpdateAvailableDot", () => {
+	it("carries a label for assistive tech when shown", () => {
+		const html = renderToString(
+			createElement(UpdateAvailableDot, { show: true }, null),
+		);
+		assert.match(html, /Update available/);
+	});
+
+	it("adds nothing when there is no update", () => {
+		const html = renderToString(
+			createElement(UpdateAvailableDot, { show: false }, null),
+		);
+		assert.doesNotMatch(html, /Update available/);
+	});
+});