@rapidmx/web-client 0.4.0 → 0.6.0

package/apps/admin/escrow-scopes/new/index.tsx

@@ -8,6 +8,7 @@ import { createEscrowScope } from "@rapidmx/react-shared/admin/escrowScopesApi.j
 import AdminShell, { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
 import EscrowScopeKeyAndHoldersFields, {
     emptyEscrowScopeKeyAndHoldersValue,
+    selfAsHolderError,
 } from "../../../shared/components/admin/escrowScopes/EscrowScopeKeyAndHoldersFields.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
@@ -19,12 +20,12 @@ const INPUT_CLASS =
 export default function NewEscrowScopePage(props: Omit<AdminShellProps, "active">) {
     return (
         <AdminShell {...props} active="escrowScopes">
-            <NewEscrowScopeForm />
+            <NewEscrowScopeForm adminUid={props.userUid} />
         </AdminShell>
     );
 }
 
-function NewEscrowScopeForm() {
+function NewEscrowScopeForm({ adminUid }: { adminUid?: string }) {
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
     const [keyAndHolders, setKeyAndHolders] = useState(emptyEscrowScopeKeyAndHoldersValue());
@@ -51,6 +52,11 @@ function NewEscrowScopeForm() {
             setError("Required holders must be between 1 and the number of holders.");
             return;
         }
+        const selfError = selfAsHolderError(keyAndHolders.holderUserUids, adminUid);
+        if (selfError) {
+            setError(selfError);
+            return;
+        }
 
         setSaving(true);
         try {

package/apps/admin/index.tsx

@@ -10,6 +10,7 @@ import AdminShell, { AdminShellProps } from "../shared/components/admin/layout/A
 import MailboxTable from "../shared/components/admin/mailboxes/MailboxTable.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 
 const PAGE_SIZE = 25;
 
@@ -38,6 +39,7 @@ function MailboxesListContent() {
 
     const hasNextPage = mailboxes.length === PAGE_SIZE;
     const [reopening, setReopening] = useState(false);
+    const [confirmingSetup, setConfirmingSetup] = useState(false);
 
     async function handleRunSetup() {
         setReopening(true);
@@ -47,6 +49,7 @@ function MailboxesListContent() {
         } catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not reopen setup.");
             setReopening(false);
+            setConfirmingSetup(false);
         }
     }
 
@@ -55,7 +58,7 @@ function MailboxesListContent() {
             <div className="flex items-center justify-between mb-5">
                 <h1 className="text-xl font-bold uppercase tracking-wide">Mailboxes</h1>
                 <div className="flex gap-2">
-                    <Button type="button" variant="secondary" className="!w-auto" loading={reopening} disabled={reopening} onClick={() => void handleRunSetup()}>
+                    <Button type="button" variant="secondary" className="!w-auto" disabled={reopening} onClick={() => setConfirmingSetup(true)}>
                         Run setup again
                     </Button>
                     <a href="/admin/mailboxes/new">
@@ -68,6 +71,21 @@ function MailboxesListContent() {
 
             {error && <Alert>{error}</Alert>}
 
+            <Modal open={confirmingSetup} onClose={() => setConfirmingSetup(false)} title="Run setup again?">
+                <p className="text-sm mb-4">
+                    Setup starts again from its first step, and the admin console sends administrators to it until
+                    it&apos;s finished. Your existing settings, domains and mailboxes are kept.
+                </p>
+                <div className="flex gap-2 justify-end">
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setConfirmingSetup(false)}>
+                        Cancel
+                    </Button>
+                    <Button type="button" className="!w-auto" loading={reopening} disabled={reopening} onClick={() => void handleRunSetup()}>
+                        Run setup
+                    </Button>
+                </div>
+            </Modal>
+
             {loading ? (
                 <p className="text-sm text-text-muted">Loading&hellip;</p>
             ) : (

package/apps/admin/ingest-queue/index.tsx

@@ -7,6 +7,9 @@ import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { IngestQueueEntry, listIngestQueue } from "@rapidmx/react-shared/mail/mailApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+const PAGE_SIZE = 25;
 
 export function readMailboxUid(): string | null {
     if (typeof window === "undefined") return null;
@@ -30,6 +33,7 @@ export default function IngestQueuePage(props: Omit<AdminShellProps, "active">)
 
 function IngestQueueContent() {
     const [mailboxUid, setMailboxUid] = useState<string | null>(null);
+    const [page, setPage] = useState(0);
     const [entries, setEntries] = useState<IngestQueueEntry[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
@@ -42,13 +46,26 @@ function IngestQueueContent() {
         if (!mailboxUid) {
             return;
         }
+        // Paging quickly can leave an older page's response landing last - only the latest request's is applied.
+        let cancelled = false;
         setLoading(true);
         setError(null);
-        listIngestQueue(mailboxUid)
-            .then(setEntries)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load the ingest queue."))
-            .finally(() => setLoading(false));
-    }, [mailboxUid]);
+        listIngestQueue(mailboxUid, { page, limit: PAGE_SIZE })
+            .then((data) => {
+                if (!cancelled) setEntries(data);
+            })
+            .catch((err) => {
+                if (!cancelled) setError(err instanceof ApiRequestError ? err.message : "Could not load the ingest queue.");
+            })
+            .finally(() => {
+                if (!cancelled) setLoading(false);
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [mailboxUid, page]);
+
+    const hasNextPage = entries.length === PAGE_SIZE;
 
     if (!mailboxUid) {
         return <Alert>No mailbox specified. Open a mailbox's detail page and choose "View ingest queue".</Alert>;
@@ -111,6 +128,28 @@ function IngestQueueContent() {
                     </table>
                 </div>
             )}
+
+            <div className="flex gap-3 items-center">
+                <Button
+                    variant="secondary"
+                    type="button"
+                    className="!w-auto"
+                    disabled={page === 0 || loading}
+                    onClick={() => setPage((p) => Math.max(0, p - 1))}
+                >
+                    Previous
+                </Button>
+                <span className="text-sm text-text-muted">Page {page + 1}</span>
+                <Button
+                    variant="secondary"
+                    type="button"
+                    className="!w-auto"
+                    disabled={!hasNextPage || loading}
+                    onClick={() => setPage((p) => p + 1)}
+                >
+                    Next
+                </Button>
+            </div>
         </div>
     );
 }

package/apps/admin/mailboxes/[uid].tsx

@@ -1,184 +1,211 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { deleteMailbox, getMailbox, impersonateUser, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
-import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
-import ShareAccessCard from "../../shared/components/admin/mailboxes/ShareAccessCard.js";
-import ResourceSettingsCard from "../../shared/components/admin/mailboxes/ResourceSettingsCard.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
-
-function formatBytes(bytes: number): string {
-    if (bytes >= 1_000_000_000) return `${(bytes / 1_000_000_000).toFixed(2)} GB`;
-    if (bytes >= 1_000_000) return `${(bytes / 1_000_000).toFixed(1)} MB`;
-    if (bytes >= 1_000) return `${(bytes / 1_000).toFixed(1)} KB`;
-    return `${bytes} B`;
-}
-
-export default function MailboxDetailPage(props: Omit<AdminShellProps, "active"> & { params: { uid: string } }) {
-    return (
-        <AdminShell {...props} active="mailboxes">
-            <MailboxDetailContent uid={props.params.uid} impersonationBaseUrl={props.impersonationBaseUrl} />
-        </AdminShell>
-    );
-}
-
-function MailboxDetailContent({ uid, impersonationBaseUrl }: { uid: string } & Pick<AdminShellProps, "impersonationBaseUrl">) {
-    const [mailbox, setMailbox] = useState<Mailbox | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-    const [impersonating, setImpersonating] = useState(false);
-    const [confirmingDelete, setConfirmingDelete] = useState(false);
-    const [deleting, setDeleting] = useState(false);
-    const [deleteError, setDeleteError] = useState<string | null>(null);
-
-    async function handleAccessMailbox(ownerUserUid: string) {
-        setImpersonating(true);
-        try {
-            await impersonateUser(impersonationBaseUrl ?? "", ownerUserUid);
-            window.location.href = "/";
-        } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not access this mailbox.");
-            setImpersonating(false);
-        }
-    }
-
-    function closeDeleteModal() {
-        setConfirmingDelete(false);
-    }
-
-    // Only ever invoked from the delete-confirmation modal below, which itself only renders once
-    // `mailbox` is resolved (the `error || !mailbox` branch below returns before this content mounts).
-    async function handleDelete() {
-        setDeleting(true);
-        setDeleteError(null);
-        try {
-            await deleteMailbox(mailbox!.uid, mailbox!.version);
-            window.location.href = "/admin";
-        } catch (err) {
-            // Most commonly a 409 if this mailbox is a custodian on an open legal hold (restapi's own
-            // `assertNotOnLegalHold()`, naming the blocking Matter uid(s)) - surfaced as-is, same as
-            // every other destructive-action error in this codebase, rather than special-cased here.
-            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this mailbox.");
-            setDeleting(false);
-        }
-    }
-
-    useEffect(() => {
-        setLoading(true);
-        setError(null);
-        getMailbox(uid)
-            .then(setMailbox)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox."))
-            .finally(() => setLoading(false));
-    }, [uid]);
-
-    if (loading) {
-        return <p className="text-sm text-text-muted">Loading&hellip;</p>;
-    }
-    if (error || !mailbox) {
-        return <Alert>{error ?? "Mailbox not found."}</Alert>;
-    }
-
-    const quarantineHref = `/admin/quarantine?mailboxUid=${encodeURIComponent(mailbox.uid)}`;
-    const ingestQueueHref = `/admin/ingest-queue?mailboxUid=${encodeURIComponent(mailbox.uid)}`;
-
-    return (
-        <div className="max-w-3xl flex flex-col gap-5">
-            <div className="flex items-start justify-between gap-4">
-                <div>
-                    <a href="/admin" className="text-sm text-primary-dark hover:underline">
-                        &larr; All mailboxes
-                    </a>
-                    <h1 className="text-xl font-bold tracking-tight mt-1">{mailbox.primarySmtpAddress}</h1>
-                </div>
-                <div className="flex gap-3 shrink-0">
-                    {mailbox.ownerUserUid && (
-                        <Button
-                            type="button"
-                            variant="secondary"
-                            className="!w-auto"
-                            loading={impersonating}
-                            disabled={impersonating}
-                            onClick={() => handleAccessMailbox(mailbox.ownerUserUid as string)}
-                        >
-                            Access this mailbox
-                        </Button>
-                    )}
-                    <Button
-                        type="button"
-                        variant="secondary"
-                        className="!w-auto !border-danger !text-danger hover:!border-danger hover:!text-danger"
-                        onClick={() => setConfirmingDelete(true)}
-                    >
-                        Delete mailbox
-                    </Button>
-                </div>
-            </div>
-
-            <div className="bg-surface border border-border rounded-md p-6">
-                <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 text-sm">
-                    <dt className="text-text-muted">Display name</dt>
-                    <dd>{mailbox.displayName}</dd>
-                    <dt className="text-text-muted">Owner</dt>
-                    <dd>{mailbox.ownerUserUid ?? "None (shared mailbox)"}</dd>
-                    <dt className="text-text-muted">Timezone</dt>
-                    <dd>{mailbox.timezone}</dd>
-                    <dt className="text-text-muted">Quota</dt>
-                    <dd>
-                        {formatBytes(mailbox.usedBytes)} / {formatBytes(mailbox.quotaBytes)}
-                    </dd>
-                    <dt className="text-text-muted">Alias addresses</dt>
-                    <dd>{mailbox.aliasAddresses.length > 0 ? mailbox.aliasAddresses.join(", ") : "None"}</dd>
-                    {mailbox.isResource && (
-                        <>
-                            <dt className="text-text-muted">Resource type</dt>
-                            <dd className="capitalize">{mailbox.resourceType ?? "room"}</dd>
-                        </>
-                    )}
-                    <dt className="text-text-muted">Created</dt>
-                    <dd>{new Date(mailbox.dateCreated).toLocaleString()}</dd>
-                </dl>
-                <div className="flex gap-4 mt-5 pt-5 border-t border-border text-sm font-medium">
-                    <a href={quarantineHref} className="text-primary-dark hover:underline">
-                        View quarantine
-                    </a>
-                    <a href={ingestQueueHref} className="text-primary-dark hover:underline">
-                        View ingest queue
-                    </a>
-                </div>
-            </div>
-
-            <ShareAccessCard mailboxUid={mailbox.uid} />
-
-            {mailbox.isResource && <ResourceSettingsCard mailbox={mailbox} onUpdate={setMailbox} />}
-
-            <Modal open={confirmingDelete} onClose={closeDeleteModal} title="Delete mailbox">
-                <p className="text-sm mb-5">
-                    Are you sure you want to delete <strong>{mailbox.primarySmtpAddress}</strong>? This permanently
-                    deletes the mailbox and everything in it, and cannot be undone. It fails if this mailbox is a
-                    custodian on an active legal hold.
-                </p>
-                {deleteError && <Alert>{deleteError}</Alert>}
-                <div className="flex gap-3 justify-end mt-5">
-                    <Button type="button" variant="secondary" className="!w-auto" disabled={deleting} onClick={closeDeleteModal}>
-                        Cancel
-                    </Button>
-                    <Button
-                        type="button"
-                        className="!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger"
-                        loading={deleting}
-                        disabled={deleting}
-                        onClick={handleDelete}
-                    >
-                        Delete
-                    </Button>
-                </div>
-            </Modal>
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { deleteMailbox, getMailbox, impersonateUser, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
+import ShareAccessCard from "../../shared/components/admin/mailboxes/ShareAccessCard.js";
+import ResourceSettingsCard from "../../shared/components/admin/mailboxes/ResourceSettingsCard.js";
+import EscrowScopeCard from "../../shared/components/admin/mailboxes/EscrowScopeCard.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+
+function formatBytes(bytes: number): string {
+    if (bytes >= 1_000_000_000) return `${(bytes / 1_000_000_000).toFixed(2)} GB`;
+    if (bytes >= 1_000_000) return `${(bytes / 1_000_000).toFixed(1)} MB`;
+    if (bytes >= 1_000) return `${(bytes / 1_000).toFixed(1)} KB`;
+    return `${bytes} B`;
+}
+
+export default function MailboxDetailPage(props: Omit<AdminShellProps, "active"> & { params: { uid: string } }) {
+    return (
+        <AdminShell {...props} active="mailboxes">
+            <MailboxDetailContent uid={props.params.uid} impersonationBaseUrl={props.impersonationBaseUrl} />
+        </AdminShell>
+    );
+}
+
+function MailboxDetailContent({ uid, impersonationBaseUrl }: { uid: string } & Pick<AdminShellProps, "impersonationBaseUrl">) {
+    const [mailbox, setMailbox] = useState<Mailbox | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [confirmingAccess, setConfirmingAccess] = useState(false);
+    const [impersonating, setImpersonating] = useState(false);
+    const [accessError, setAccessError] = useState<string | null>(null);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [deleteError, setDeleteError] = useState<string | null>(null);
+
+    // Ignored while the action is under way (Escape/Close; Cancel is disabled then too), so its result or error
+    // can't land on a modal reopened afterwards.
+    function closeAccessModal() {
+        if (impersonating) return;
+        setConfirmingAccess(false);
+        setAccessError(null);
+    }
+
+    // Only ever invoked from the access-confirmation modal below, which only renders for a loaded mailbox that has
+    // an owner. A failure stays in the modal rather than replacing the whole page.
+    async function handleAccessMailbox() {
+        setImpersonating(true);
+        setAccessError(null);
+        try {
+            await impersonateUser(impersonationBaseUrl ?? "", mailbox!.ownerUserUid!);
+            window.location.href = "/";
+        } catch (err) {
+            setAccessError(err instanceof ApiRequestError ? err.message : "Could not access this mailbox.");
+            setImpersonating(false);
+        }
+    }
+
+    function closeDeleteModal() {
+        if (deleting) return;
+        setConfirmingDelete(false);
+    }
+
+    // Only ever invoked from the delete-confirmation modal below, which itself only renders once
+    // `mailbox` is resolved (the `error || !mailbox` branch below returns before this content mounts).
+    async function handleDelete() {
+        setDeleting(true);
+        setDeleteError(null);
+        try {
+            await deleteMailbox(mailbox!.uid, mailbox!.version);
+            window.location.href = "/admin";
+        } catch (err) {
+            // Most commonly a 409 if this mailbox is a custodian on an open legal hold (restapi's own
+            // `assertNotOnLegalHold()`, naming the blocking Matter uid(s)) - surfaced as-is, same as
+            // every other destructive-action error in this codebase, rather than special-cased here.
+            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this mailbox.");
+            setDeleting(false);
+        }
+    }
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        getMailbox(uid)
+            .then(setMailbox)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox."))
+            .finally(() => setLoading(false));
+    }, [uid]);
+
+    if (loading) {
+        return <p className="text-sm text-text-muted">Loading&hellip;</p>;
+    }
+    if (error || !mailbox) {
+        return <Alert>{error ?? "Mailbox not found."}</Alert>;
+    }
+
+    const quarantineHref = `/admin/quarantine?mailboxUid=${encodeURIComponent(mailbox.uid)}`;
+    const ingestQueueHref = `/admin/ingest-queue?mailboxUid=${encodeURIComponent(mailbox.uid)}`;
+
+    return (
+        <div className="max-w-3xl flex flex-col gap-5">
+            <div className="flex items-start justify-between gap-4">
+                <div>
+                    <a href="/admin" className="text-sm text-primary-dark hover:underline">
+                        &larr; All mailboxes
+                    </a>
+                    <h1 className="text-xl font-bold tracking-tight mt-1">{mailbox.primarySmtpAddress}</h1>
+                </div>
+                <div className="flex gap-3 shrink-0">
+                    {mailbox.ownerUserUid && (
+                        <Button type="button" variant="secondary" className="!w-auto" onClick={() => setConfirmingAccess(true)}>
+                            Access this mailbox
+                        </Button>
+                    )}
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        className="!w-auto !border-danger !text-danger hover:!border-danger hover:!text-danger"
+                        onClick={() => setConfirmingDelete(true)}
+                    >
+                        Delete mailbox
+                    </Button>
+                </div>
+            </div>
+
+            <div className="bg-surface border border-border rounded-md p-6">
+                <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 text-sm">
+                    <dt className="text-text-muted">Display name</dt>
+                    <dd>{mailbox.displayName}</dd>
+                    <dt className="text-text-muted">Owner</dt>
+                    <dd>{mailbox.ownerUserUid ?? "None (shared mailbox)"}</dd>
+                    <dt className="text-text-muted">Timezone</dt>
+                    <dd>{mailbox.timezone}</dd>
+                    <dt className="text-text-muted">Quota</dt>
+                    <dd>
+                        {formatBytes(mailbox.usedBytes)} / {formatBytes(mailbox.quotaBytes)}
+                    </dd>
+                    <dt className="text-text-muted">Alias addresses</dt>
+                    <dd>{mailbox.aliasAddresses.length > 0 ? mailbox.aliasAddresses.join(", ") : "None"}</dd>
+                    {mailbox.isResource && (
+                        <>
+                            <dt className="text-text-muted">Resource type</dt>
+                            <dd className="capitalize">{mailbox.resourceType ?? "room"}</dd>
+                        </>
+                    )}
+                    <dt className="text-text-muted">Created</dt>
+                    <dd>{new Date(mailbox.dateCreated).toLocaleString()}</dd>
+                </dl>
+                <div className="flex gap-4 mt-5 pt-5 border-t border-border text-sm font-medium">
+                    <a href={quarantineHref} className="text-primary-dark hover:underline">
+                        View quarantine
+                    </a>
+                    <a href={ingestQueueHref} className="text-primary-dark hover:underline">
+                        View ingest queue
+                    </a>
+                </div>
+            </div>
+
+            <ShareAccessCard mailboxUid={mailbox.uid} ownerUserUid={mailbox.ownerUserUid} />
+
+            <EscrowScopeCard mailbox={mailbox} onUpdate={setMailbox} />
+
+            {mailbox.isResource && <ResourceSettingsCard mailbox={mailbox} onUpdate={setMailbox} />}
+
+            <Modal open={confirmingAccess} onClose={closeAccessModal} title="Access this mailbox">
+                <p className="text-sm mb-3">
+                    You&rsquo;ll be signed in as <strong className="break-all">{mailbox.ownerUserUid}</strong>, the owner
+                    of <strong className="break-all">{mailbox.primarySmtpAddress}</strong>, and see everything they can -
+                    and act as them, until you stop impersonating.
+                </p>
+                {accessError && <Alert>{accessError}</Alert>}
+                <div className="flex gap-3 justify-end mt-5">
+                    <Button type="button" variant="secondary" className="!w-auto" disabled={impersonating} onClick={closeAccessModal}>
+                        Cancel
+                    </Button>
+                    <Button type="button" className="!w-auto" loading={impersonating} disabled={impersonating} onClick={handleAccessMailbox}>
+                        Access mailbox
+                    </Button>
+                </div>
+            </Modal>
+
+            <Modal open={confirmingDelete} onClose={closeDeleteModal} title="Delete mailbox">
+                <p className="text-sm mb-5">
+                    Are you sure you want to delete <strong>{mailbox.primarySmtpAddress}</strong>? This permanently
+                    deletes the mailbox and everything in it, and cannot be undone. It fails if this mailbox is a
+                    custodian on an active legal hold.
+                </p>
+                {deleteError && <Alert>{deleteError}</Alert>}
+                <div className="flex gap-3 justify-end mt-5">
+                    <Button type="button" variant="secondary" className="!w-auto" disabled={deleting} onClick={closeDeleteModal}>
+                        Cancel
+                    </Button>
+                    <Button
+                        type="button"
+                        className="!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger"
+                        loading={deleting}
+                        disabled={deleting}
+                        onClick={handleDelete}
+                    >
+                        Delete
+                    </Button>
+                </div>
+            </Modal>
+        </div>
+    );
+}