@rapidmx/web-client 0.37.0 → 0.38.1

package/apps/shared/components/admin/integrations/DnsProviderForm.tsx

@@ -0,0 +1,354 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useState } from "react";
+import { isUnreadableSecret } from "../../../../../lib/admin/integrationsApi.js";
+import type {
+    DnsProvider,
+    DnsProviderInput,
+    DnsProviderOptionSpec,
+    DnsProviderOptionValue,
+    DnsProviderType,
+    DnsProviderTypeInfo,
+} from "../../../../../lib/admin/dnsProvidersApi.js";
+import Button from "../../../../../lib/components/buttons/Button.js";
+import Alert from "../ActionAlert.js";
+import { actionErrorMessage } from "../elevation.js";
+import { Badge } from "./dnsProviderParts.js";
+import SecretField, { INPUT_CLASS } from "./SecretField.js";
+
+/** The entries of a list typed one per line (commas and spaces separate them too). */
+function listOf(text: string): string[] {
+    return text.split(/[\s,]+/).filter((entry) => entry !== "");
+}
+
+/** An option's value as the form holds it: a switch, or text (a list one entry per line). */
+function toFormValue(option: DnsProviderOptionSpec, value: DnsProviderOptionValue | undefined): string | boolean {
+    if (option.kind === "boolean") {
+        return value === true;
+    }
+    return Array.isArray(value) ? value.join("\n") : value === undefined ? "" : String(value);
+}
+
+/** An option's value as the server takes it; `undefined` for one left empty, which the server fills with its default or refuses as required. */
+function fromFormValue(option: DnsProviderOptionSpec, value: string | boolean): DnsProviderOptionValue | undefined {
+    if (typeof value === "boolean") {
+        return value;
+    }
+    if (option.kind === "string-list") {
+        const list: string[] = listOf(value);
+        return list.length > 0 ? list : undefined;
+    }
+    const text: string = value.trim();
+    if (text === "") {
+        return undefined;
+    }
+    return option.kind === "integer" ? Number(text) : text;
+}
+
+/** The form's values of `spec`'s options: `provider`'s, else each option's default. */
+function initialOptions(spec: DnsProviderTypeInfo, provider?: DnsProvider): Record<string, string | boolean> {
+    return Object.fromEntries(spec.options.map((option) => [option.key, toFormValue(option, provider?.options[option.key] ?? option.default)]));
+}
+
+export interface DnsProviderFormProps {
+    /** The provider types, from `GET /system/dns-providers/types`: what the form is built from. */
+    types: DnsProviderTypeInfo[];
+    /** The config being edited; none to create one (then the type is chosen here; it never changes afterwards). */
+    provider?: DnsProvider;
+    submitLabel: string;
+    /** Saves what the form holds; a rejection is shown (the server's validation is the authority). */
+    onSave: (input: DnsProviderInput) => Promise<void>;
+}
+
+/**
+ * A DNS provider config's form, generated from its type's description: one field per option (text, a list one entry per line, a number, a switch or a
+ * choice), and the type's credentials, write-only - a saved one shows only as set, with Replace, and Remove where the type can do without it. Only what
+ * is typed into a credential is sent; the rest of the config is sent whole.
+ */
+export default function DnsProviderForm({ types, provider, submitLabel, onSave }: DnsProviderFormProps) {
+    const [type, setType] = useState<DnsProviderType>(provider?.type ?? types[0].type);
+    const spec: DnsProviderTypeInfo = types.find((candidate) => candidate.type === type)!;
+    const [name, setName] = useState(provider?.name ?? "");
+    const [zones, setZones] = useState((provider?.zones ?? []).join("\n"));
+    const [options, setOptions] = useState(() => initialOptions(spec, provider));
+    // A new value typed (string), or `null` for a saved credential to remove; a field left alone has no entry.
+    const [credentials, setCredentials] = useState<Record<string, string | null>>({});
+    const [enabled, setEnabled] = useState(provider?.enabled ?? true);
+    const [allowTakeover, setAllowTakeover] = useState(provider?.allowTakeover ?? false);
+    // Bumped by a save, so the credentials start over as saved.
+    const [savedCount, setSavedCount] = useState(0);
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+
+    function changeType(next: DnsProviderType) {
+        setType(next);
+        setOptions(initialOptions(types.find((candidate) => candidate.type === next)!));
+        setCredentials({});
+    }
+
+    function setCredential(key: string, value: string | null | undefined) {
+        setCredentials((current) => {
+            const next = { ...current };
+            if (value === undefined) {
+                delete next[key];
+            } else {
+                next[key] = value;
+            }
+            return next;
+        });
+    }
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+        setSaved(false);
+        const trimmedName: string = name.trim();
+        if (!trimmedName) {
+            setError("A name is required.");
+            return;
+        }
+        const zoneList: string[] = listOf(zones);
+        if (zoneList.length === 0) {
+            setError("Enter at least one zone.");
+            return;
+        }
+        const values: Record<string, DnsProviderOptionValue> = {};
+        for (const option of spec.options) {
+            const value = fromFormValue(option, options[option.key]);
+            if (value !== undefined) {
+                values[option.key] = value;
+            }
+        }
+        const input: DnsProviderInput = {
+            name: trimmedName,
+            ...(provider ? {} : { type }),
+            zones: zoneList,
+            options: values,
+            ...(Object.keys(credentials).length > 0 ? { credentials } : {}),
+            enabled,
+            allowTakeover,
+        };
+        setSaving(true);
+        try {
+            await onSave(input);
+            setCredentials({});
+            setSavedCount((count) => count + 1);
+            setSaved(true);
+        } catch (err) {
+            setError(actionErrorMessage(err, "Could not save the DNS provider."));
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4 max-w-xl">
+            {error && <Alert>{error}</Alert>}
+            {saved && !error && <div className="text-sm text-success font-medium">Saved.</div>}
+
+            {!provider && (
+                <label className="flex flex-col gap-1.5 text-sm">
+                    <span className="font-semibold">
+                        Type
+                        {!spec.tested && <Badge>Not yet live-tested</Badge>}
+                    </span>
+                    <select aria-label="Type" className={INPUT_CLASS} value={type} onChange={(e) => changeType(e.target.value as DnsProviderType)}>
+                        {types.map((candidate) => (
+                            <option key={candidate.type} value={candidate.type}>
+                                {candidate.label}
+                            </option>
+                        ))}
+                    </select>
+                </label>
+            )}
+            {spec.notes.length > 0 && (
+                <ul className="list-disc pl-5 text-xs text-text-muted">
+                    {spec.notes.map((note) => (
+                        <li key={note}>{note}</li>
+                    ))}
+                </ul>
+            )}
+
+            <label className="flex flex-col gap-1.5 text-sm">
+                <span className="font-semibold">Name</span>
+                <input aria-label="Name" className={INPUT_CLASS} value={name} onChange={(e) => setName(e.target.value)} />
+            </label>
+            <label className="flex flex-col gap-1.5 text-sm">
+                <span className="font-semibold">Zones</span>
+                <textarea aria-label="Zones" rows={3} spellCheck={false} className={INPUT_CLASS} value={zones} onChange={(e) => setZones(e.target.value)} />
+                <span className="text-xs text-text-muted">
+                    The zones this provider may publish into, one per line, such as example.com. A domain can be assigned to it only when it is one of them or
+                    under one.
+                </span>
+            </label>
+
+            {spec.options.map((option) => (
+                <OptionField
+                    key={`${type}-${option.key}`}
+                    option={option}
+                    value={options[option.key]}
+                    onChange={(value) => setOptions({ ...options, [option.key]: value })}
+                />
+            ))}
+
+            <fieldset key={savedCount} className="flex flex-col gap-3">
+                <legend className="text-sm font-semibold mb-1">Credentials</legend>
+                <p className="text-xs text-text-muted -mt-2">Saved encrypted, and never shown again.</p>
+                {spec.secretFields.map((field) => {
+                    const isSaved: boolean = !!provider?.credentials[field.key];
+                    const removing: boolean = credentials[field.key] === null;
+                    return (
+                        <div key={`${type}-${field.key}`} className="flex flex-col gap-1.5 text-sm">
+                            <span className="font-semibold">
+                                {field.label}
+                                {!field.required && <span className="font-normal text-text-muted"> (optional)</span>}
+                            </span>
+                            {removing ? (
+                                <div className="flex items-center gap-3">
+                                    <span>Removed when you save.</span>
+                                    <Button
+                                        type="button"
+                                        variant="text"
+                                        className="text-xs"
+                                        aria-label={`Undo removing ${field.label}`}
+                                        onClick={() => setCredential(field.key, undefined)}
+                                    >
+                                        Undo
+                                    </Button>
+                                </div>
+                            ) : (
+                                <SecretField
+                                    id={`credential-${field.key}`}
+                                    label={field.label}
+                                    name={field.label}
+                                    saved={isSaved ? "here" : "none"}
+                                    unreadable={isUnreadableSecret(provider?.credentials[field.key])}
+                                    value={credentials[field.key] ?? undefined}
+                                    onChange={(value) => setCredential(field.key, value)}
+                                    multiLine={field.multiLine}
+                                />
+                            )}
+                            {isSaved && !field.required && !removing && (
+                                <Button
+                                    type="button"
+                                    variant="text"
+                                    className="!w-auto self-start text-xs"
+                                    aria-label={`Remove ${field.label}`}
+                                    onClick={() => setCredential(field.key, null)}
+                                >
+                                    Remove
+                                </Button>
+                            )}
+                            <span className="text-xs text-text-muted">{field.description}</span>
+                        </div>
+                    );
+                })}
+            </fieldset>
+
+            <label className="flex items-start gap-2 text-sm">
+                <input
+                    type="checkbox"
+                    className="mt-1"
+                    aria-label="Publish through this provider"
+                    checked={enabled}
+                    onChange={(e) => setEnabled(e.target.checked)}
+                />
+                <span>
+                    <span className="font-semibold block">Publish through this provider</span>
+                    <span className="text-xs text-text-muted">Off, its external-dns instance is stopped; the records it published stay as they are.</span>
+                </span>
+            </label>
+            <label className="flex items-start gap-2 text-sm">
+                <input
+                    type="checkbox"
+                    className="mt-1"
+                    aria-label="Allow taking over existing records"
+                    checked={allowTakeover}
+                    onChange={(e) => setAllowTakeover(e.target.checked)}
+                />
+                <span>
+                    <span className="font-semibold block">Allow taking over existing records</span>
+                    <span className="text-xs text-text-muted">
+                        Lets this provider replace records that something else created at the names it publishes, such as an MX record added by hand: such
+                        records are taken over automatically a few minutes after they are found, for the domains and for this server&rsquo;s own host names.
+                        A domain&rsquo;s root TXT records (SPF) are never taken over this way, only through the root TXT opt-in on the domain. Records of
+                        another type in the way are never taken over: they are listed for you to delete at your DNS host. Without it, such records
+                        show as conflicts, with a Take over action on their domain and, for the host names, on this provider&rsquo;s page.
+                    </span>
+                </span>
+            </label>
+
+            <div>
+                <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                    {submitLabel}
+                </Button>
+            </div>
+        </form>
+    );
+}
+
+/** One option of the provider type, drawn by its kind. */
+function OptionField({ option, value, onChange }: { option: DnsProviderOptionSpec; value: string | boolean; onChange: (value: string | boolean) => void }) {
+    const hint = <span className="text-xs text-text-muted">{option.description}</span>;
+    if (option.kind === "boolean") {
+        return (
+            <label className="flex items-start gap-2 text-sm">
+                <input type="checkbox" className="mt-1" aria-label={option.label} checked={value as boolean} onChange={(e) => onChange(e.target.checked)} />
+                <span>
+                    <span className="font-semibold block">{option.label}</span>
+                    {hint}
+                </span>
+            </label>
+        );
+    }
+    let control: React.ReactNode;
+    if (option.kind === "enum") {
+        control = (
+            <select aria-label={option.label} className={INPUT_CLASS} value={value as string} onChange={(e) => onChange(e.target.value)}>
+                {option.default === undefined && <option value="">Not set</option>}
+                {option.values!.map((choice) => (
+                    <option key={choice} value={choice}>
+                        {choice}
+                    </option>
+                ))}
+            </select>
+        );
+    } else if (option.kind === "string-list") {
+        control = (
+            <textarea
+                aria-label={option.label}
+                rows={3}
+                spellCheck={false}
+                className={`${INPUT_CLASS} font-mono`}
+                value={value as string}
+                onChange={(e) => onChange(e.target.value)}
+            />
+        );
+    } else {
+        control = (
+            <input
+                aria-label={option.label}
+                type={option.kind === "integer" ? "number" : "text"}
+                min={option.min}
+                max={option.max}
+                className={INPUT_CLASS}
+                value={value as string}
+                onChange={(e) => onChange(e.target.value)}
+            />
+        );
+    }
+    return (
+        <label className="flex flex-col gap-1.5 text-sm">
+            <span className="font-semibold">
+                {option.label}
+                {!option.required && <span className="font-normal text-text-muted"> (optional)</span>}
+            </span>
+            {control}
+            {hint}
+            {option.kind === "string-list" && <span className="text-xs text-text-muted">One per line.</span>}
+        </label>
+    );
+}

package/apps/shared/components/admin/integrations/DnsProviderHosts.tsx

@@ -0,0 +1,197 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useState } from "react";
+import { DnsHostManualReason, DnsHostPublication, listDnsHostPublications, takeoverDnsHosts } from "../../../../../lib/admin/dnsProvidersApi.js";
+import Button from "../../../../../lib/components/buttons/Button.js";
+import Modal from "../../../../../lib/components/overlays/Modal.js";
+import { ApiRequestError } from "../../../../../lib/util/api.js";
+import Alert from "../ActionAlert.js";
+import { actionErrorMessage } from "../elevation.js";
+import { TypeMismatchNotice } from "./dnsProviderParts.js";
+
+const MANUAL_REASONS: Record<DnsHostManualReason, string> = {
+    no_provider: "No DNS provider is assigned.",
+    kind_unsupported: "The DNS provider can't hold this kind of record.",
+    outside_zones: "This name is outside the zones of the DNS provider.",
+    apex_txt_unmanaged: "Shares the domain's root TXT records, which are managed only on the domain's opt-in.",
+    no_addresses: "The server has no public address to publish: set the public addresses, then it is published.",
+    no_target: "There is no mail host to point it at.",
+};
+
+const STATE_LABELS: Record<DnsHostPublication["state"], string> = {
+    published: "Published",
+    pending: "Pending",
+    conflict: "Conflict",
+    manual: "Manual",
+};
+
+/** A host record's name once per name: an address host has an A and an AAAA record at one name. */
+function uniqueNames(records: DnsHostPublication[]): string[] {
+    return [...new Set(records.map((record) => record.recordName))];
+}
+
+/**
+ * The deployment's own host names (mail, auth, autodiscover, openpgpkey) that this config publishes, each with how it is published, and "Take over host
+ * names" for the ones another system created (a record this deployment doesn't own). A host whose records of another type stand in the way is never taken
+ * over: it lists them for the administrator to delete at their DNS host. Shown only when the config publishes a host, and not at all on a server without
+ * the route.
+ */
+export default function DnsProviderHosts({ uid }: { uid: string }) {
+    const [hosts, setHosts] = useState<DnsHostPublication[] | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [confirming, setConfirming] = useState(false);
+    const [taking, setTaking] = useState(false);
+    const [takeError, setTakeError] = useState<string | null>(null);
+    const [queued, setQueued] = useState(false);
+
+    function load(isCurrent: () => boolean = () => true) {
+        listDnsHostPublications()
+            .then((loaded) => {
+                if (!isCurrent()) return;
+                setHosts(loaded.filter((host) => host.providerUid === uid));
+                setError(null);
+            })
+            .catch((err) => {
+                if (!isCurrent()) return;
+                if (err instanceof ApiRequestError && err.status === 404) {
+                    setHosts([]);
+                    return;
+                }
+                setError(actionErrorMessage(err, "Could not load the host names."));
+            });
+    }
+
+    useEffect(() => {
+        let current = true;
+        load(() => current);
+        return () => {
+            current = false;
+        };
+    }, [uid]);
+
+    async function handleTakeOver(names: string[]) {
+        setTaking(true);
+        setTakeError(null);
+        try {
+            await takeoverDnsHosts(uid, names);
+            setQueued(true);
+            setConfirming(false);
+        } catch (err) {
+            setTakeError(actionErrorMessage(err, "Could not queue the takeover."));
+        } finally {
+            setTaking(false);
+        }
+    }
+
+    if (error) {
+        return (
+            <section className="mt-8 max-w-3xl">
+                <Alert>{error}</Alert>
+            </section>
+        );
+    }
+    if (!hosts || hosts.length === 0) {
+        return null;
+    }
+    const mismatched = new Set(uniqueNames(hosts.filter((host) => host.state === "conflict" && host.conflictReason === "type_mismatch")));
+    const notOwned: string[] = uniqueNames(hosts.filter((host) => host.state === "conflict" && host.conflictReason !== "type_mismatch")).filter(
+        (name) => !mismatched.has(name),
+    );
+
+    return (
+        <section className="mt-8 max-w-3xl">
+            <h3 className="text-base font-bold uppercase tracking-wide mb-1">Host names</h3>
+            <p className="text-sm text-text-muted mb-3">
+                The names of this server itself that this provider publishes, such as the mail host. Records you already have at these names are shown as
+                conflicts.
+            </p>
+            <table aria-label="Host names" className="w-full text-sm border-collapse mb-3">
+                <thead>
+                    <tr>
+                        {["Name", "Record", "Published"].map((h) => (
+                            <th key={h} className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border">
+                                {h}
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {hosts.map((host) => (
+                        <tr key={`${host.recordName} ${host.recordKind}`}>
+                            <td className="py-2 px-2.5 border-b border-border">
+                                <code className="text-xs break-all">{host.recordName}</code>
+                            </td>
+                            <td className="py-2 px-2.5 border-b border-border text-text-muted">{host.recordKind}</td>
+                            <td className="py-2 px-2.5 border-b border-border">
+                                <span
+                                    className={`text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill ${
+                                        host.state === "published"
+                                            ? "bg-success text-white"
+                                            : host.state === "conflict"
+                                              ? "bg-danger-bg text-danger"
+                                              : "bg-surface-alt text-text-muted"
+                                    }`}
+                                >
+                                    {STATE_LABELS[host.state]}
+                                </span>
+                                {host.state === "manual" && host.manualReason && (
+                                    <div className="text-xs text-text-muted mt-1 max-w-xs">{MANUAL_REASONS[host.manualReason]}</div>
+                                )}
+                                {host.state === "conflict" && host.conflictReason === "type_mismatch" && <TypeMismatchNotice existing={host.existing} />}
+                                {host.state === "conflict" && host.conflictReason !== "type_mismatch" && (
+                                    <div className="text-xs mt-1 max-w-xs">A record is there that this deployment doesn&rsquo;t own.</div>
+                                )}
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+            {queued && <p className="text-sm text-text-muted mb-3">Takeover queued. The DNS controller overwrites the records shortly; refresh to see the result.</p>}
+            <div className="flex gap-3">
+                {notOwned.length > 0 && (
+                    <Button type="button" variant="secondary" className="!w-auto" disabled={queued} onClick={() => setConfirming(true)}>
+                        Take over host names
+                    </Button>
+                )}
+                <Button
+                    type="button"
+                    variant="secondary"
+                    className="!w-auto"
+                    onClick={() => {
+                        setQueued(false);
+                        load();
+                    }}
+                >
+                    Refresh
+                </Button>
+            </div>
+
+            <Modal open={confirming} onClose={() => setConfirming(false)} title="Take over host names">
+                <div className="flex flex-col gap-3 text-sm">
+                    <p>
+                        Taking over overwrites the records at these names with the values this server publishes. From then on RapidMX manages them, and what was
+                        there is lost.
+                    </p>
+                    <ul className="list-none flex flex-col gap-0.5">
+                        {notOwned.map((name) => (
+                            <li key={name}>
+                                <code className="text-xs break-all">{name}</code>
+                            </li>
+                        ))}
+                    </ul>
+                    {takeError && <Alert>{takeError}</Alert>}
+                    <div className="flex gap-3 justify-end">
+                        <Button type="button" variant="secondary" className="!w-auto" disabled={taking} onClick={() => setConfirming(false)}>
+                            Cancel
+                        </Button>
+                        <Button type="button" className="!w-auto" loading={taking} disabled={taking} onClick={() => handleTakeOver(notOwned)}>
+                            Take over
+                        </Button>
+                    </div>
+                </div>
+            </Modal>
+        </section>
+    );
+}

package/apps/shared/components/admin/integrations/DnsProviderOperations.tsx

@@ -0,0 +1,115 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useState } from "react";
+import { DnsOperation, DnsOperationState, DnsOperationType, listDnsProviderOperations, testDnsProvider } from "../../../../../lib/admin/dnsProvidersApi.js";
+import Button from "../../../../../lib/components/buttons/Button.js";
+import Alert from "../ActionAlert.js";
+import { actionErrorMessage } from "../elevation.js";
+import { formatTime } from "./dnsProviderParts.js";
+
+const TYPE_LABELS: Record<DnsOperationType, string> = {
+    test: "Connection test",
+    takeover: "Take over",
+    restore: "Restore",
+};
+
+const STATE_LABELS: Record<DnsOperationState, string> = {
+    queued: "Queued",
+    running: "Running",
+    succeeded: "Succeeded",
+    failed: "Failed",
+};
+
+/**
+ * "Test connection" and the config's latest operations (connection tests, takeovers, restores of a domain's root TXT records), which the DNS controller
+ * runs and reports on. A test is only queued here: its result arrives with the controller's next report, so the list can be refreshed.
+ */
+export default function DnsProviderOperations({ uid }: { uid: string }) {
+    const [operations, setOperations] = useState<DnsOperation[]>([]);
+    const [loaded, setLoaded] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [testing, setTesting] = useState(false);
+    const [testError, setTestError] = useState<string | null>(null);
+    const [queued, setQueued] = useState(false);
+
+    function load() {
+        listDnsProviderOperations(uid)
+            .then((loadedOperations) => {
+                setOperations(loadedOperations);
+                setLoaded(true);
+                setError(null);
+            })
+            .catch((err) => setError(actionErrorMessage(err, "Could not load the operations.")));
+    }
+
+    useEffect(load, [uid]);
+
+    async function handleTest() {
+        setTesting(true);
+        setTestError(null);
+        try {
+            const operation = await testDnsProvider(uid);
+            setOperations((current) => [operation, ...current]);
+            setQueued(true);
+        } catch (err) {
+            setTestError(actionErrorMessage(err, "Could not queue the connection test."));
+        } finally {
+            setTesting(false);
+        }
+    }
+
+    return (
+        <section className="mt-8 max-w-3xl">
+            <h3 className="text-base font-bold uppercase tracking-wide mb-1">Connection and operations</h3>
+            <p className="text-sm text-text-muted mb-3">
+                Test connection has the DNS controller run external-dns once with the saved credentials, to check that they work and reach the zones.
+            </p>
+            <div className="flex gap-3 mb-3">
+                <Button type="button" variant="secondary" className="!w-auto" loading={testing} disabled={testing} onClick={handleTest}>
+                    Test connection
+                </Button>
+                <Button type="button" variant="secondary" className="!w-auto" onClick={load}>
+                    Refresh
+                </Button>
+            </div>
+            {testError && <Alert>{testError}</Alert>}
+            {queued && (
+                <p className="text-sm text-text-muted mb-3">Test queued. The DNS controller runs the test and reports the result here; refresh to see it.</p>
+            )}
+            {error && <Alert>{error}</Alert>}
+            {operations.length > 0 ? (
+                <table aria-label="Recent operations" className="w-full text-sm border-collapse">
+                    <thead>
+                        <tr>
+                            {["Operation", "State", "Result", "When"].map((h) => (
+                                <th key={h} className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border">
+                                    {h}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {operations.map((operation) => (
+                            <tr key={operation.uid}>
+                                <td className="py-2 px-2.5 border-b border-border">
+                                    {TYPE_LABELS[operation.type] + (operation.domainUid ? ` (${operation.domainUid})` : operation.endpointSetId?.startsWith("hosts-") ? " (host names)" : "")}
+                                </td>
+                                <td className="py-2 px-2.5 border-b border-border">{STATE_LABELS[operation.state]}</td>
+                                <td className="py-2 px-2.5 border-b border-border text-text-muted">{operation.message}</td>
+                                <td className="py-2 px-2.5 border-b border-border text-text-muted whitespace-nowrap">
+                                    {formatTime(operation.finishedAt ?? operation.startedAt ?? operation.dateCreated)}
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            ) : loaded ? (
+                <p className="text-sm text-text-muted">No operations yet.</p>
+            ) : (
+                !error && <p className="text-sm text-text-muted">Loading&hellip;</p>
+            )}
+        </section>
+    );
+}