@rapidmx/web-client 0.4.0 → 0.6.0

package/apps/admin/quarantine/index.tsx

@@ -8,6 +8,7 @@ import { listQuarantine, QuarantineEntry, releaseQuarantineEntry } from "@rapidm
 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";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 
 const PAGE_SIZE = 25;
 
@@ -30,7 +31,9 @@ function QuarantineContent({ userUid }: { userUid?: string }) {
     const [entries, setEntries] = useState<QuarantineEntry[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
-    const [releasing, setReleasing] = useState<string | null>(null);
+    const [releaseTarget, setReleaseTarget] = useState<QuarantineEntry | null>(null);
+    const [releasing, setReleasing] = useState(false);
+    const [releaseError, setReleaseError] = useState<string | null>(null);
 
     useEffect(() => {
         setMailboxUid(readMailboxUid());
@@ -53,19 +56,26 @@ function QuarantineContent({ userUid }: { userUid?: string }) {
 
     const hasNextPage = entries.length === PAGE_SIZE;
 
-    // Only ever invoked from the "Release" button below, which itself only renders once `mailboxUid` is
-    // known and `AdminShell` has already confirmed `userUid` (children only render once authorized) — both
-    // non-null assertions reflect that real invariant, not an unchecked assumption.
-    async function handleRelease(entry: QuarantineEntry) {
-        setReleasing(entry.uid);
-        setError(null);
+    function closeReleaseModal() {
+        setReleaseTarget(null);
+        setReleaseError(null);
+    }
+
+    // Only ever invoked from the confirmation modal below, which only renders once `releaseTarget` is set, once
+    // `mailboxUid` is known, and once `AdminShell` has confirmed `userUid` (children only render once authorized).
+    // `releaseQuarantineEntry()` still sends its own `releasedAt`/`releasedByUserUid`; the server now stamps both
+    // itself and ignores the client's values, so what's displayed afterwards comes from the reloaded list.
+    async function handleRelease() {
+        setReleasing(true);
+        setReleaseError(null);
         try {
-            await releaseQuarantineEntry(entry.uid, entry.version, userUid!);
+            await releaseQuarantineEntry(releaseTarget!.uid, releaseTarget!.version, userUid!);
+            closeReleaseModal();
             reload(mailboxUid!);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not release this message.");
+            setReleaseError(err instanceof ApiRequestError ? err.message : "Could not mark this message released.");
         } finally {
-            setReleasing(null);
+            setReleasing(false);
         }
     }
 
@@ -130,11 +140,9 @@ function QuarantineContent({ userUid }: { userUid?: string }) {
                                                 type="button"
                                                 variant="secondary"
                                                 className="!w-auto"
-                                                loading={releasing === entry.uid}
-                                                disabled={releasing === entry.uid}
-                                                onClick={() => handleRelease(entry)}
+                                                onClick={() => setReleaseTarget(entry)}
                                             >
-                                                Release
+                                                Mark released
                                             </Button>
                                         )}
                                     </td>
@@ -166,6 +174,30 @@ function QuarantineContent({ userUid }: { userUid?: string }) {
                     Next
                 </Button>
             </div>
+
+            <Modal open={releaseTarget !== null} onClose={closeReleaseModal} title="Mark message released">
+                <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm mb-4">
+                    <dt className="text-text-muted">Reason</dt>
+                    <dd>{releaseTarget?.reason}</dd>
+                    <dt className="text-text-muted">Quarantined</dt>
+                    <dd>{releaseTarget && new Date(releaseTarget.dateCreated).toLocaleString()}</dd>
+                    <dt className="text-text-muted">Message</dt>
+                    <dd className="break-all">{releaseTarget?.originalMessageUid ?? "Not delivered to the mailbox"}</dd>
+                </dl>
+                <p className="text-sm mb-4">
+                    This only records the entry as released (with you as the releaser). It does not deliver the
+                    message - if it&rsquo;s infected or unwanted, leave it held.
+                </p>
+                {releaseError && <Alert>{releaseError}</Alert>}
+                <div className="flex gap-3 justify-end">
+                    <Button type="button" variant="secondary" className="!w-auto" disabled={releasing} onClick={closeReleaseModal}>
+                        Cancel
+                    </Button>
+                    <Button type="button" className="!w-auto" loading={releasing} disabled={releasing} onClick={handleRelease}>
+                        Mark released
+                    </Button>
+                </div>
+            </Modal>
         </div>
     );
 }

package/apps/admin/transport-rules/[uid].tsx

@@ -13,7 +13,13 @@ import {
 } from "@rapidmx/react-shared/admin/transportRulesApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
 import RuleBuilder, { RuleBuilderValue } from "../../shared/components/rules/RuleBuilder.js";
-import { TRANSPORT_RULE_ACTION_TYPES, TRANSPORT_RULE_CONDITION_FIELDS } from "./_transportRuleConfig.js";
+import {
+    checkRuleConditions,
+    NO_CONDITIONS_BLOCKED_MESSAGE,
+    NoConditionsConfirmModal,
+    TRANSPORT_RULE_ACTION_TYPES,
+    TRANSPORT_RULE_CONDITION_FIELDS,
+} from "./_transportRuleConfig.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
@@ -37,6 +43,8 @@ function TransportRuleDetailContent({ uid }: { uid: string }) {
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
+    const [showValidation, setShowValidation] = useState(false);
+    const [confirmingNoConditions, setConfirmingNoConditions] = useState(false);
 
     useEffect(() => {
         setLoading(true);
@@ -71,7 +79,21 @@ function TransportRuleDetailContent({ uid }: { uid: string }) {
             setError("A name is required.");
             return;
         }
+        const check = checkRuleConditions(rule!);
+        if (check === "blocked") {
+            setShowValidation(true);
+            setError(NO_CONDITIONS_BLOCKED_MESSAGE);
+            return;
+        }
+        if (check === "confirm") {
+            setConfirmingNoConditions(true);
+            return;
+        }
+        await save();
+    }
 
+    async function save() {
+        setConfirmingNoConditions(false);
         setSaving(true);
         setSaved(false);
         try {
@@ -130,6 +152,7 @@ function TransportRuleDetailContent({ uid }: { uid: string }) {
                     onChange={setRule}
                     conditionFields={TRANSPORT_RULE_CONDITION_FIELDS}
                     actionTypes={TRANSPORT_RULE_ACTION_TYPES}
+                    showValidation={showValidation}
                 />
 
                 <div>
@@ -138,6 +161,12 @@ function TransportRuleDetailContent({ uid }: { uid: string }) {
                     </Button>
                 </div>
             </form>
+
+            <NoConditionsConfirmModal
+                open={confirmingNoConditions}
+                onCancel={() => setConfirmingNoConditions(false)}
+                onConfirm={() => void save()}
+            />
         </div>
     );
 }

package/apps/admin/transport-rules/_transportRuleConfig.tsx

@@ -3,8 +3,44 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
-import { TransportRuleAction } from "@rapidmx/react-shared/admin/transportRulesApi.js";
-import { ActionTypeDef, ConditionFieldDef } from "../../shared/components/rules/RuleBuilder.js";
+import { TransportRuleAction, TransportRuleConditions } from "@rapidmx/react-shared/admin/transportRulesApi.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import { ActionTypeDef, ConditionFieldDef, hasConditions } from "../../shared/components/rules/RuleBuilder.js";
+
+/** Refused outright when a rule has no conditions: it would reject or quarantine every message the server receives. */
+export const NO_CONDITIONS_BLOCKED_MESSAGE =
+    "Add at least one condition. A rule without conditions that rejects or quarantines mail would do so for every message.";
+
+/**
+ * How a save should proceed given a rule's conditions: `"ok"` with at least one condition, `"blocked"` with none and a
+ * reject/quarantine action, or `"confirm"` with none and only other actions (which then apply to every message).
+ */
+export function checkRuleConditions(rule: { conditions: TransportRuleConditions; actions: TransportRuleAction[] }): "ok" | "blocked" | "confirm" {
+    if (hasConditions(rule.conditions)) {
+        return "ok";
+    }
+    return rule.actions.some((action) => action.type === "reject" || action.type === "quarantine") ? "blocked" : "confirm";
+}
+
+/** Asks before saving a rule with no conditions whose actions will run on every message. */
+export function NoConditionsConfirmModal({ open, onCancel, onConfirm }: { open: boolean; onCancel: () => void; onConfirm: () => void }) {
+    return (
+        <Modal open={open} onClose={onCancel} title="Apply to every message?">
+            <p className="text-sm mb-5">
+                This rule has no conditions, so its actions will run on every message this server receives or sends.
+            </p>
+            <div className="flex gap-3 justify-end">
+                <Button type="button" variant="secondary" className="!w-auto" onClick={onCancel}>
+                    Cancel
+                </Button>
+                <Button type="button" className="!w-auto" onClick={onConfirm}>
+                    Save anyway
+                </Button>
+            </div>
+        </Modal>
+    );
+}
 
 const FIELD_INPUT_CLASS =
     "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";

package/apps/admin/transport-rules/index.tsx

@@ -11,6 +11,26 @@ import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 
 const PAGE_SIZE = 25;
 
+/** The server's largest page (`limit` is capped at 1000). */
+const FETCH_PAGE_SIZE = 1000;
+
+/**
+ * Every transport rule, in evaluation order. `listTransportRules()` can't ask the server to sort, and sorting one
+ * server page at a time would order rules only within that page - so every page is fetched and sorted here (an
+ * organisation has few transport rules). Ties keep a stable order by name.
+ */
+async function listAllTransportRules(): Promise<TransportRule[]> {
+    const all: TransportRule[] = [];
+    for (let page = 0; ; page++) {
+        const batch = await listTransportRules({ page, limit: FETCH_PAGE_SIZE });
+        all.push(...batch);
+        if (batch.length < FETCH_PAGE_SIZE) {
+            break;
+        }
+    }
+    return all.sort((a, b) => a.sequence - b.sequence || a.name.localeCompare(b.name));
+}
+
 export default function TransportRulesPage(props: Omit<AdminShellProps, "active">) {
     return (
         <AdminShell {...props} active="transportRules">
@@ -26,16 +46,14 @@ function TransportRulesContent() {
     const [error, setError] = useState<string | null>(null);
 
     useEffect(() => {
-        setLoading(true);
-        setError(null);
-        listTransportRules({ page, limit: PAGE_SIZE })
+        listAllTransportRules()
             .then(setRules)
             .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load transport rules."))
             .finally(() => setLoading(false));
-    }, [page]);
+    }, []);
 
-    const hasNextPage = rules.length === PAGE_SIZE;
-    const sorted = [...rules].sort((a, b) => a.sequence - b.sequence);
+    const hasNextPage = (page + 1) * PAGE_SIZE < rules.length;
+    const sorted = rules.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
 
     return (
         <>

package/apps/admin/transport-rules/new/index.tsx

@@ -11,7 +11,13 @@ import {
 } from "@rapidmx/react-shared/admin/transportRulesApi.js";
 import AdminShell, { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
 import RuleBuilder, { RuleBuilderValue } from "../../../shared/components/rules/RuleBuilder.js";
-import { TRANSPORT_RULE_ACTION_TYPES, TRANSPORT_RULE_CONDITION_FIELDS } from "../_transportRuleConfig.js";
+import {
+    checkRuleConditions,
+    NO_CONDITIONS_BLOCKED_MESSAGE,
+    NoConditionsConfirmModal,
+    TRANSPORT_RULE_ACTION_TYPES,
+    TRANSPORT_RULE_CONDITION_FIELDS,
+} from "../_transportRuleConfig.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
@@ -38,6 +44,8 @@ function NewTransportRuleForm() {
     });
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
+    const [showValidation, setShowValidation] = useState(false);
+    const [confirmingNoConditions, setConfirmingNoConditions] = useState(false);
 
     async function handleSubmit(e: FormEvent) {
         e.preventDefault();
@@ -47,7 +55,21 @@ function NewTransportRuleForm() {
             setError("A name is required.");
             return;
         }
+        const check = checkRuleConditions(rule);
+        if (check === "blocked") {
+            setShowValidation(true);
+            setError(NO_CONDITIONS_BLOCKED_MESSAGE);
+            return;
+        }
+        if (check === "confirm") {
+            setConfirmingNoConditions(true);
+            return;
+        }
+        await create();
+    }
 
+    async function create() {
+        setConfirmingNoConditions(false);
         setSaving(true);
         try {
             const created = await createTransportRule({ name: name.trim(), ...rule });
@@ -87,6 +109,7 @@ function NewTransportRuleForm() {
                     onChange={setRule}
                     conditionFields={TRANSPORT_RULE_CONDITION_FIELDS}
                     actionTypes={TRANSPORT_RULE_ACTION_TYPES}
+                    showValidation={showValidation}
                 />
 
                 <div className="flex gap-3">
@@ -100,6 +123,12 @@ function NewTransportRuleForm() {
                     </a>
                 </div>
             </form>
+
+            <NoConditionsConfirmModal
+                open={confirmingNoConditions}
+                onCancel={() => setConfirmingNoConditions(false)}
+                onConfirm={() => void create()}
+            />
         </div>
     );
 }

package/apps/escrow/_layout.tsx

@@ -4,7 +4,6 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { PropsWithChildren } from "react";
 import { Branding } from "@rapidmx/react-shared/branding/brandingApi.js";
-import { CUSTOM_STYLESHEET_LINK_ID } from "@rapidmx/react-shared/branding/useBranding.js";
 
 export interface LayoutProps {
     /** See `apps/www/_layout.tsx`'s `LayoutProps` doc comment — identical mechanism, supplied by
@@ -12,12 +11,13 @@ export interface LayoutProps {
     branding?: Branding;
 }
 
+/** Unlike the other apps, never links the admin-configured custom stylesheet: the escrow console handles escrow
+ * key material, so no admin-supplied CSS is loaded on it. */
 export default function Layout({ children, branding }: PropsWithChildren<LayoutProps>) {
     const title = branding?.title || branding?.companyName
         ? `${branding?.title || branding?.companyName}: Escrow Console`
         : "RapidMX: Escrow Console";
     const iconHref = branding?.iconUrl || branding?.logoUrl || "/images/logo.svg";
-    const stylesheetHref = branding?.stylesheetUrl;
 
     return (
         <html lang="en">
@@ -33,7 +33,6 @@ export default function Layout({ children, branding }: PropsWithChildren<LayoutP
                     rel="stylesheet"
                     href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
                 />
-                {stylesheetHref && <link rel="stylesheet" href={stylesheetHref} id={CUSTOM_STYLESHEET_LINK_ID} />}
             </head>
             <body>{children}</body>
         </html>