@rapidmx/web-client 0.30.0 → 0.31.0

package/apps/admin/audit-log/index.tsx

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useRef, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { AuditLogEntry, AuditLogFilters, listAuditLog } from "../../../lib/admin/auditLogApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 
 const PAGE_SIZE = 25;
 /** How long typing in a filter box has to pause before the log is re-fetched. */
@@ -71,7 +71,7 @@ function AuditLogContent() {
                 if (!cancelled) setEntries(data);
             })
             .catch((err) => {
-                if (!cancelled) setError(err instanceof ApiRequestError ? err.message : "Could not load the audit log.");
+                if (!cancelled) setError(actionErrorMessage(err, "Could not load the audit log."));
             })
             .finally(() => {
                 if (!cancelled) setLoading(false);

package/apps/admin/branding/index.tsx

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { Branding, getBranding } from "../../../lib/branding/brandingApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
 import BrandingForm from "../../shared/components/admin/settings/BrandingForm.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 
 export default function BrandingPage(props: Omit<AdminShellProps, "active">) {
     return (
@@ -25,7 +25,7 @@ function BrandingContent() {
     useEffect(() => {
         getBranding()
             .then(setBranding)
-            .catch((err) => setLoadError(err instanceof ApiRequestError ? err.message : "Could not load branding."))
+            .catch((err) => setLoadError(actionErrorMessage(err, "Could not load branding.")))
             .finally(() => setLoading(false));
     }, []);
 

package/apps/admin/data-requests/index.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { ChangeEvent, FormEvent, useEffect, useRef, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 import {
     DataExportFormat,
     createExportRequest,
@@ -24,7 +24,7 @@ import {
 import { Folder, listFolders } from "../../../lib/mail/mailApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
 import { LoadMoreButton, usePagedList } from "../../shared/components/admin/usePagedList.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
 import Modal from "../../../lib/components/overlays/Modal.js";
 
@@ -90,7 +90,7 @@ function ExportRequestsSection() {
             setMailboxUid("");
             await list.reload();
         } catch (err) {
-            setCreateError(err instanceof ApiRequestError ? err.message : "Could not start this export.");
+            setCreateError(actionErrorMessage(err, "Could not start this export."));
         } finally {
             setCreating(false);
         }
@@ -185,7 +185,11 @@ function ImportRequestsSection() {
         void list.reload();
     }, []);
 
+    // Only the latest lookup's answer is applied: a slower answer for a mailbox typed earlier would otherwise list its folders beside the mailbox now named.
+    const folderLookup = useRef(0);
+
     function handleLoadFolders() {
+        const lookup = ++folderLookup.current;
         const uid = mailboxUid.trim();
         setTargetFolderUid("");
         setFolders([]);
@@ -195,11 +199,18 @@ function ImportRequestsSection() {
         }
         listFolders(uid)
             .then((all) => {
+                if (lookup !== folderLookup.current) {
+                    return;
+                }
                 const mailFolders = all.filter((f) => !NON_MAIL_FOLDER_TYPES.has(f.type));
                 setFolders(mailFolders);
                 setTargetFolderUid(mailFolders[0]?.uid ?? "");
             })
-            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox's folders."));
+            .catch((err) => {
+                if (lookup === folderLookup.current) {
+                    setFolderError(actionErrorMessage(err, "Could not load this mailbox's folders."));
+                }
+            });
     }
 
     function handleFileChange(e: ChangeEvent<HTMLInputElement>) {
@@ -212,7 +223,7 @@ function ImportRequestsSection() {
         setUploading(true);
         uploadMailboxImport(file, { format: importFormatFromFilename(file.name), targetFolderUid, mailboxUid: mailboxUid.trim() })
             .then(() => list.reload())
-            .catch((err) => setUploadError(err instanceof ApiRequestError ? err.message : "Could not upload this file."))
+            .catch((err) => setUploadError(actionErrorMessage(err, "Could not upload this file.")))
             .finally(() => setUploading(false));
     }
 
@@ -345,7 +356,7 @@ function ErasureRequestsSection() {
             closeApproveModal();
             await list.reload();
         } catch (err) {
-            setApproveError(err instanceof ApiRequestError ? err.message : "Could not approve this request.");
+            setApproveError(actionErrorMessage(err, "Could not approve this request."));
         } finally {
             setApproving(false);
         }
@@ -370,7 +381,7 @@ function ErasureRequestsSection() {
             closeDenyModal();
             await list.reload();
         } catch (err) {
-            setDenyError(err instanceof ApiRequestError ? err.message : "Could not deny this request.");
+            setDenyError(actionErrorMessage(err, "Could not deny this request."));
         } finally {
             setDenying(false);
         }

package/apps/admin/distribution-lists/[uid].tsx

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { DistributionList, getDistributionList } from "../../../lib/admin/distributionListsApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
 import MemberListCard from "../../shared/components/admin/distributionLists/MemberListCard.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 
 export default function DistributionListDetailPage(props: Omit<AdminShellProps, "active"> & { params: { uid: string } }) {
     return (
@@ -27,7 +27,7 @@ function DistributionListDetailContent({ uid }: { uid: string }) {
         setError(null);
         getDistributionList(uid)
             .then(setList)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this distribution list."))
+            .catch((err) => setError(actionErrorMessage(err, "Could not load this distribution list.")))
             .finally(() => setLoading(false));
     }, [uid]);
 

package/apps/admin/distribution-lists/index.tsx

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { DistributionList, listDistributionLists } from "../../../lib/admin/distributionListsApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 
 const PAGE_SIZE = 25;
 
@@ -30,7 +30,7 @@ function DistributionListsContent() {
         setError(null);
         listDistributionLists({ page, limit: PAGE_SIZE })
             .then(setLists)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load distribution lists."))
+            .catch((err) => setError(actionErrorMessage(err, "Could not load distribution lists.")))
             .finally(() => setLoading(false));
     }, [page]);
 

package/apps/admin/distribution-lists/new/index.tsx

@@ -4,12 +4,12 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useState } from "react";
 import { useRouter } from "@rapidrest/react/client";
-import { ApiRequestError } from "../../../../lib/util/api.js";
 import { createDistributionList } from "../../../../lib/admin/distributionListsApi.js";
 import AdminShell, { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
-import Alert from "../../../../lib/components/feedback/Alert.js";
+import Alert from "../../../shared/components/admin/ActionAlert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import FormField from "../../../../lib/components/forms/FormField.js";
+import { actionErrorMessage } from "../../../shared/components/admin/elevation.js";
 
 const INPUT_CLASS =
     "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -52,7 +52,7 @@ function NewDistributionListForm() {
             });
             void navigate(`/admin/distribution-lists/${encodeURIComponent(list.uid)}`);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create the distribution list.");
+            setError(actionErrorMessage(err, "Could not create the distribution list."));
         } finally {
             setSaving(false);
         }

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

@@ -4,14 +4,14 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
 import { useRouter } from "@rapidrest/react/client";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { deleteDomain, Domain, updateDomain } from "../../../lib/admin/domainsApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
 import DomainDnsSetup from "../../shared/components/admin/settings/DomainDnsSetup.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
 import FormField from "../../../lib/components/forms/FormField.js";
 import Modal from "../../../lib/components/overlays/Modal.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 
 const INPUT_CLASS =
     "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -52,7 +52,7 @@ function DomainDetailContent({ uid }: { uid: string }) {
             await deleteDomain(domain!.uid, domain!.version);
             void navigate("/admin/domains");
         } catch (err) {
-            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this domain.");
+            setDeleteError(actionErrorMessage(err, "Could not delete this domain."));
             setDeleting(false);
         }
     }
@@ -62,18 +62,19 @@ function DomainDetailContent({ uid }: { uid: string }) {
         setAliasInput((current) => (current === null ? d?.aliasOf ?? "" : current));
     }
 
+    // A blank input is sent as "" (the server's way to clear an alias): an absent key (what `undefined` becomes in JSON) leaves the stored alias alone.
     async function handleSaveAlias() {
         setSavingAlias(true);
         setAliasError(null);
         setAliasSaved(false);
         try {
-            const updated = await updateDomain({ uid: domain!.uid, version: domain!.version, aliasOf: aliasInput!.trim() || undefined });
+            const updated = await updateDomain({ uid: domain!.uid, version: domain!.version, aliasOf: aliasInput!.trim() });
             setDomain(updated);
             setAliasInput(updated.aliasOf ?? "");
             setAliasSaved(true);
             setRefreshCount((c) => c + 1);
         } catch (err) {
-            setAliasError(err instanceof ApiRequestError ? err.message : "Could not update this domain.");
+            setAliasError(actionErrorMessage(err, "Could not update this domain."));
         } finally {
             setSavingAlias(false);
         }

package/apps/admin/domains/index.tsx

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { Domain, listDomains } from "../../../lib/admin/domainsApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 
 const PAGE_SIZE = 25;
 
@@ -30,7 +30,7 @@ function DomainsListContent() {
         setError(null);
         listDomains({ page, limit: PAGE_SIZE })
             .then(setDomains)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load domains."))
+            .catch((err) => setError(actionErrorMessage(err, "Could not load domains.")))
             .finally(() => setLoading(false));
     }, [page]);
 

package/apps/admin/domains/new/index.tsx

@@ -4,12 +4,12 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useEffect, useState } from "react";
 import { useRouter } from "@rapidrest/react/client";
-import { ApiRequestError } from "../../../../lib/util/api.js";
 import { createDomain, Domain, listDomains } from "../../../../lib/admin/domainsApi.js";
 import AdminShell, { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
-import Alert from "../../../../lib/components/feedback/Alert.js";
+import Alert from "../../../shared/components/admin/ActionAlert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import FormField from "../../../../lib/components/forms/FormField.js";
+import { actionErrorMessage } from "../../../shared/components/admin/elevation.js";
 
 const INPUT_CLASS =
     "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -52,7 +52,7 @@ function NewDomainForm() {
             const domain = await createDomain({ name: name.trim(), aliasOf: aliasOf || undefined });
             void navigate(`/admin/domains/${encodeURIComponent(domain.uid)}`);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create the domain.");
+            setError(actionErrorMessage(err, "Could not create the domain."));
         } finally {
             setSaving(false);
         }

package/apps/admin/escrow-scopes/[uid].tsx

@@ -4,7 +4,6 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useEffect, useState } from "react";
 import { useRouter } from "@rapidrest/react/client";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { toDatetimeLocal } from "../../../lib/util/dateInput.js";
 import {
     deleteEscrowScope,
@@ -16,12 +15,14 @@ import {
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
 import EscrowScopeKeyAndHoldersFields, {
     EscrowScopeKeyAndHoldersValue,
+    keyValidityError,
     selfAsHolderError,
 } from "../../shared/components/admin/escrowScopes/EscrowScopeKeyAndHoldersFields.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
 import FormField from "../../../lib/components/forms/FormField.js";
 import Modal from "../../../lib/components/overlays/Modal.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 
 const INPUT_CLASS =
     "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -145,7 +146,7 @@ function EscrowScopeDetailContent({ uid, adminUid }: { uid: string; adminUid?: s
                     setFields(toFieldsValue(loaded));
                 }
             })
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this escrow scope."))
+            .catch((err) => setError(actionErrorMessage(err, "Could not load this escrow scope.")))
             .finally(() => setLoading(false));
     }, [uid]);
 
@@ -165,6 +166,11 @@ function EscrowScopeDetailContent({ uid, adminUid }: { uid: string; adminUid?: s
             setError("The public key, its type, and its fingerprint are all required.");
             return;
         }
+        const validityError = keyValidityError(fields!);
+        if (validityError) {
+            setError(validityError);
+            return;
+        }
         if (fields!.holderUserUids.length === 0) {
             setError("At least one holder is required.");
             return;
@@ -208,7 +214,7 @@ function EscrowScopeDetailContent({ uid, adminUid }: { uid: string; adminUid?: s
             setFields(toFieldsValue(updated));
             setSaved(true);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save this escrow scope.");
+            setError(actionErrorMessage(err, "Could not save this escrow scope."));
         } finally {
             setSaving(false);
         }
@@ -231,7 +237,7 @@ function EscrowScopeDetailContent({ uid, adminUid }: { uid: string; adminUid?: s
         } catch (err) {
             // Most commonly a 409 ("referenced by an existing Matter") — see `deleteEscrowScope()`'s own
             // doc comment - surfaced as-is rather than special-cased.
-            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this escrow scope.");
+            setDeleteError(actionErrorMessage(err, "Could not delete this escrow scope."));
             setDeleting(false);
         }
     }

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

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { EscrowScope, listEscrowScopes } from "../../../lib/admin/escrowScopesApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 
 const PAGE_SIZE = 25;
 
@@ -30,7 +30,7 @@ function EscrowScopesContent() {
         setError(null);
         listEscrowScopes({ page, limit: PAGE_SIZE })
             .then(setScopes)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load escrow scopes."))
+            .catch((err) => setError(actionErrorMessage(err, "Could not load escrow scopes.")))
             .finally(() => setLoading(false));
     }, [page]);
 

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

@@ -4,16 +4,17 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useState } from "react";
 import { useRouter } from "@rapidrest/react/client";
-import { ApiRequestError } from "../../../../lib/util/api.js";
 import { createEscrowScope } from "../../../../lib/admin/escrowScopesApi.js";
 import AdminShell, { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
 import EscrowScopeKeyAndHoldersFields, {
     emptyEscrowScopeKeyAndHoldersValue,
+    keyValidityError,
     selfAsHolderError,
 } from "../../../shared/components/admin/escrowScopes/EscrowScopeKeyAndHoldersFields.js";
-import Alert from "../../../../lib/components/feedback/Alert.js";
+import Alert from "../../../shared/components/admin/ActionAlert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import FormField from "../../../../lib/components/forms/FormField.js";
+import { actionErrorMessage } from "../../../shared/components/admin/elevation.js";
 
 const INPUT_CLASS =
     "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -46,6 +47,11 @@ function NewEscrowScopeForm({ adminUid }: { adminUid?: string }) {
             setError("The public key, its type, and its fingerprint are all required.");
             return;
         }
+        const validityError = keyValidityError(keyAndHolders);
+        if (validityError) {
+            setError(validityError);
+            return;
+        }
         if (keyAndHolders.holderUserUids.length === 0) {
             setError("At least one holder is required.");
             return;
@@ -78,7 +84,7 @@ function NewEscrowScopeForm({ adminUid }: { adminUid?: string }) {
             });
             void navigate(`/admin/escrow-scopes/${encodeURIComponent(created.uid)}`);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create the escrow scope.");
+            setError(actionErrorMessage(err, "Could not create the escrow scope."));
         } finally {
             setSaving(false);
         }

package/apps/admin/index.tsx

@@ -4,15 +4,15 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
 import { useRouter } from "@rapidrest/react/client";
-import { ApiRequestError } from "../../lib/util/api.js";
 import { listMailboxes, Mailbox } from "../../lib/mail/mailApi.js";
 import { reopenSetup } from "../../lib/admin/setupApi.js";
 import AdminShell, { AdminShellProps } from "../shared/components/admin/layout/AdminShell.js";
 import LeftoverMailboxesSection from "../shared/components/admin/mailboxes/LeftoverMailboxesSection.js";
 import MailboxTable from "../shared/components/admin/mailboxes/MailboxTable.js";
-import Alert from "../../lib/components/feedback/Alert.js";
+import Alert from "../shared/components/admin/ActionAlert.js";
 import Button from "../../lib/components/buttons/Button.js";
 import Modal from "../../lib/components/overlays/Modal.js";
+import { actionErrorMessage } from "../shared/components/admin/elevation.js";
 
 const PAGE_SIZE = 25;
 
@@ -37,7 +37,7 @@ function MailboxesListContent() {
         // The administration scope: every mailbox as administrative metadata - the console never shows anybody's mail.
         listMailboxes({ page, limit: PAGE_SIZE, scope: "admin" })
             .then(setMailboxes)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load mailboxes."))
+            .catch((err) => setError(actionErrorMessage(err, "Could not load mailboxes.")))
             .finally(() => setLoading(false));
     }, [page]);
 
@@ -51,7 +51,7 @@ function MailboxesListContent() {
             await reopenSetup();
             void navigate("/admin/setup");
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not reopen setup.");
+            setError(actionErrorMessage(err, "Could not reopen setup."));
             setReopening(false);
             setConfirmingSetup(false);
         }

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

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { IngestQueueEntry, listIngestQueue } from "../../../lib/mail/mailApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 
 const PAGE_SIZE = 25;
 
@@ -56,7 +56,7 @@ function IngestQueueContent() {
                 if (!cancelled) setEntries(data);
             })
             .catch((err) => {
-                if (!cancelled) setError(err instanceof ApiRequestError ? err.message : "Could not load the ingest queue.");
+                if (!cancelled) setError(actionErrorMessage(err, "Could not load the ingest queue."));
             })
             .finally(() => {
                 if (!cancelled) setLoading(false);

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

@@ -4,13 +4,14 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
 import { useRouter } from "@rapidrest/react/client";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { deleteMailbox, getMailbox, impersonateUser, Mailbox } from "../../../lib/mail/mailApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
+import { resetNotifications } from "../../shared/notifications/store.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 "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
 import { describeTimeZone } from "../../../lib/util/timeZone.js";
 import Modal from "../../../lib/components/overlays/Modal.js";
@@ -64,9 +65,11 @@ function MailboxDetailContent({
         setAccessError(null);
         try {
             await impersonateUser(impersonationBaseUrl ?? "", mailbox!.ownerUserUid!);
+            // The administrator's own notification history is not the impersonated user's to read.
+            resetNotifications();
             window.location.href = "/";
         } catch (err) {
-            setAccessError(err instanceof ApiRequestError ? err.message : "Could not impersonate this user.");
+            setAccessError(actionErrorMessage(err, "Could not impersonate this user."));
             setImpersonating(false);
         }
     }
@@ -92,19 +95,24 @@ function MailboxDetailContent({
             // 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.");
+            setDeleteError(actionErrorMessage(err, "Could not delete this mailbox."));
             setDeleting(false);
         }
     }
 
     useEffect(() => {
+        // An answer for a mailbox since replaced (another uid) must not be shown as the current one: the delete and impersonate actions act on what is shown.
+        let cancelled = false;
         setLoading(true);
         setError(null);
         // The administration scope: administrative metadata only - the console never shows a mailbox's mail or settings.
         getMailbox(uid, { scope: "admin" })
-            .then(setMailbox)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox."))
-            .finally(() => setLoading(false));
+            .then((loaded) => !cancelled && setMailbox(loaded))
+            .catch((err) => !cancelled && setError(actionErrorMessage(err, "Could not load this mailbox.")))
+            .finally(() => !cancelled && setLoading(false));
+        return () => {
+            cancelled = true;
+        };
     }, [uid]);
 
     if (loading) {

package/apps/admin/quarantine/index.tsx

@@ -3,12 +3,12 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { listQuarantine, QuarantineEntry, releaseQuarantineEntry } from "../../../lib/mail/mailApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
 import Modal from "../../../lib/components/overlays/Modal.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 
 const PAGE_SIZE = 25;
 
@@ -45,7 +45,7 @@ function QuarantineContent({ userUid }: { userUid?: string }) {
         // The administration scope: any mailbox's held mail, recorded in the audit log.
         listQuarantine(uid, { page, limit: PAGE_SIZE, scope: "admin" })
             .then(setEntries)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load quarantine."))
+            .catch((err) => setError(actionErrorMessage(err, "Could not load quarantine.")))
             .finally(() => setLoading(false));
     }
 
@@ -74,7 +74,7 @@ function QuarantineContent({ userUid }: { userUid?: string }) {
             closeReleaseModal();
             reload(mailboxUid!);
         } catch (err) {
-            setReleaseError(err instanceof ApiRequestError ? err.message : "Could not mark this message released.");
+            setReleaseError(actionErrorMessage(err, "Could not mark this message released."));
         } finally {
             setReleasing(false);
         }

package/apps/admin/retention-policy/index.tsx

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { RetentionPolicy, getRetentionPolicy } from "../../../lib/admin/retentionPolicyApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
 import RetentionPolicyForm from "../../shared/components/admin/settings/RetentionPolicyForm.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 
 export default function RetentionPolicyPage(props: Omit<AdminShellProps, "active">) {
     return (
@@ -25,7 +25,7 @@ function RetentionPolicyContent() {
     useEffect(() => {
         getRetentionPolicy()
             .then(setPolicy)
-            .catch((err) => setLoadError(err instanceof ApiRequestError ? err.message : "Could not load the retention policy."))
+            .catch((err) => setLoadError(actionErrorMessage(err, "Could not load the retention policy.")))
             .finally(() => setLoading(false));
     }, []);