@rapidmx/web-client 0.4.0 → 0.6.0

package/dist/apps/shared/components/admin/settings/PluginsManager.js

@@ -5,94 +5,337 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 ///////////////////////////////////////////////////////////////////////////////
 import { useCallback, useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { addPlugin, getPluginStatus, listPlugins, lookupPluginPackage, removePlugin, updatePlugin, } from "@rapidmx/react-shared/admin/pluginsApi.js";
+import { addPlugin, expectedPlanOf, getPluginStatus, getPluginUpdates, listPluginNamespaces, listPlugins, lookupPluginPackage, planPluginChange, removePlugin, searchPlugins, updatePlugin, } from "@rapidmx/react-shared/admin/pluginsApi.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 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";
 /** How often status is refreshed while server copies are still applying a change. */
 const PENDING_POLL_MS = 5000;
+/** How long status keeps being polled after a saved change, since servers may not have noticed it yet. */
+const AFTER_CHANGE_POLL_MS = 2 * 60 * 1000;
+/** The longest wait between retries while no status has ever been read. */
+const MAX_STATUS_RETRY_MS = 60 * 1000;
 function errorMessage(err, fallback) {
     return err instanceof ApiRequestError ? err.message : fallback;
 }
+/** Runs `action`, resolving why it failed, or `null`. */
+async function attempt(action, failure) {
+    try {
+        await action();
+        return null;
+    }
+    catch (err) {
+        return errorMessage(err, failure);
+    }
+}
 /** Installed plugins with their rollout status, and every plugin action - shared by the Plugins page and the
  * setup wizard. */
 export default function PluginsManager() {
     const [plugins, setPlugins] = useState([]);
     const [status, setStatus] = useState(null);
+    /** Set when the last status refresh failed, so what's shown may be out of date. */
+    const [statusStale, setStatusStale] = useState(false);
+    /** When polling started by a saved change stops (epoch ms), or 0 when there's none. */
+    const [pollUntil, setPollUntil] = useState(0);
+    const [updates, setUpdates] = useState(new Map());
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    /** The installed plugin whose enable just failed, offered a retry next to `error`. */
+    const [retryEnableUid, setRetryEnableUid] = useState(null);
     const [adding, setAdding] = useState(false);
     const [upgrading, setUpgrading] = useState(null);
     const [configuring, setConfiguring] = useState(null);
     const [removing, setRemoving] = useState(null);
-    const [busyUid, setBusyUid] = useState(null);
+    const [confirming, setConfirming] = useState(null);
+    /** Installed plugins with an action under way. */
+    const [busyUids, setBusyUids] = useState(new Set());
+    /** Set when re-reading the list after a change failed, so rows may not show what that change also did. */
+    const [listStale, setListStale] = useState(false);
+    /** How many times status has been retried while none has ever been read. */
+    const [statusRetries, setStatusRetries] = useState(0);
+    const statusRequest = useRef(null);
+    const setBusy = (uid, busy) => setBusyUids((prev) => {
+        const next = new Set(prev);
+        if (busy) {
+            next.add(uid);
+        }
+        else {
+            next.delete(uid);
+        }
+        return next;
+    });
     const refreshStatus = useCallback(() => {
-        // Status is advisory - a failure to read it shouldn't hide the plugin list.
-        return getPluginStatus()
-            .then(setStatus)
-            .catch(() => setStatus(null));
+        // One read at a time: a poll that comes due while a slow read is still running shares it.
+        statusRequest.current ?? (statusRequest.current = getPluginStatus()
+            .then((next) => {
+            setStatus(next);
+            setStatusStale(false);
+        })
+            // Status is advisory - a failure to read it shouldn't hide the plugin list, or lose the last status read.
+            .catch(() => setStatusStale(true))
+            .finally(() => {
+            statusRequest.current = null;
+        }));
+        return statusRequest.current;
+    }, []);
+    const refreshUpdates = useCallback(() => {
+        // Also advisory: a registry that can't be reached just means no update badges.
+        return getPluginUpdates()
+            .then((list) => setUpdates(new Map(list.map((info) => [info.uid, info]))))
+            .catch(() => setUpdates(new Map()));
+    }, []);
+    /** Re-reads the list, for changes that also installed or enabled other plugins. */
+    const reload = useCallback(() => {
+        return listPlugins()
+            .then((list) => {
+            setPlugins(list);
+            setListStale(false);
+        })
+            .catch(() => setListStale(true));
     }, []);
     useEffect(() => {
         Promise.all([listPlugins(), refreshStatus()])
-            .then(([list]) => setPlugins(list))
+            .then(([list]) => {
+            setPlugins(list);
+            void refreshUpdates();
+        })
             .catch((err) => setError(errorMessage(err, "Could not load plugins.")))
             .finally(() => setLoading(false));
-    }, [refreshStatus]);
+    }, [refreshStatus, refreshUpdates]);
     const pending = !!status && status.instances.some((instance) => instance.hash !== status.hash);
     useEffect(() => {
-        if (!pending) {
+        if (!pending && pollUntil === 0) {
             return;
         }
         const timer = setInterval(() => void refreshStatus(), PENDING_POLL_MS);
-        return () => clearInterval(timer);
-    }, [pending, refreshStatus]);
-    /** Applies a saved change locally and re-reads status, since saving starts a rollout. */
-    function applied(updated) {
+        // Polling for a saved change ends after a while; a rollout that's under way keeps it going.
+        const stop = pollUntil > 0 ? setTimeout(() => setPollUntil(0), Math.max(0, pollUntil - Date.now())) : undefined;
+        return () => {
+            clearInterval(timer);
+            clearTimeout(stop);
+        };
+    }, [pending, pollUntil, refreshStatus]);
+    // With no status read at all there's nothing pending to poll for, so keep retrying - less often each time.
+    const neverRead = !status && statusStale;
+    useEffect(() => {
+        if (!neverRead) {
+            return;
+        }
+        const timer = setTimeout(() => void refreshStatus().then(() => setStatusRetries((n) => n + 1)), Math.min(PENDING_POLL_MS * 2 ** statusRetries, MAX_STATUS_RETRY_MS));
+        return () => clearTimeout(timer);
+    }, [neverRead, statusRetries, refreshStatus]);
+    /** Re-reads status, and keeps doing so for a while, since saving starts a rollout servers pick up shortly. */
+    function watchRollout() {
+        setPollUntil(Date.now() + AFTER_CHANGE_POLL_MS);
+        void refreshStatus();
+    }
+    /** Applies saved changes locally and re-reads status and updates, since saving starts a rollout. */
+    function applied(...changed) {
         setPlugins((prev) => {
-            const exists = prev.some((plugin) => plugin.uid === updated.uid);
-            const next = exists ? prev.map((plugin) => (plugin.uid === updated.uid ? updated : plugin)) : [...prev, updated];
-            return next.sort((a, b) => a.name.localeCompare(b.name));
+            let next = prev;
+            for (const updated of changed) {
+                const exists = next.some((plugin) => plugin.uid === updated.uid);
+                next = exists ? next.map((plugin) => (plugin.uid === updated.uid ? updated : plugin)) : [...next, updated];
+            }
+            return [...next].sort((a, b) => a.name.localeCompare(b.name));
         });
-        void refreshStatus();
+        watchRollout();
+        void refreshUpdates();
     }
-    async function toggle(plugin) {
-        setBusyUid(plugin.uid);
+    /** Runs an action on an installed plugin's row, which is busy meanwhile, and shows why it failed. */
+    async function onRow(plugin, action) {
+        setBusy(plugin.uid, true);
         setError(null);
+        setRetryEnableUid(null);
+        const problem = await action();
+        if (problem) {
+            setError(problem);
+        }
+        // A change waiting for confirmation keeps the row busy by itself, until the confirmation closes.
+        setBusy(plugin.uid, false);
+    }
+    function toggle(plugin) {
+        const displayName = plugin.manifest.displayName;
+        if (plugin.enabled) {
+            return onRow(plugin, () => attempt(async () => applied(await updatePlugin(plugin.uid, { version: plugin.version, enabled: false })), `Could not disable ${displayName}.`));
+        }
+        // Enabling a plugin also installs or enables the plugins it requires, so it's previewed like any other change.
+        // The installed version is planned from its stored manifest, so this doesn't need the registry. A preview that
+        // fails is never skipped - enabling without one could install or enable other plugins the administrator never
+        // saw - so the failure is shown with a retry instead.
+        return onRow(plugin, async () => {
+            const problem = await planned(plugin.name, plugin.packageVersion, displayName, async (plan) => {
+                applied(await updatePlugin(plugin.uid, { version: plugin.version, enabled: true, expectedPlan: expectedPlanOf(plan) }));
+                if (plan.install.length > 0 || plan.enable.length > 0) {
+                    void reload();
+                }
+            }, `Could not enable ${displayName}.`, { uid: plugin.uid });
+            if (problem) {
+                setRetryEnableUid(plugin.uid);
+            }
+            return problem;
+        });
+    }
+    /**
+     * Checks what installing or changing a plugin also takes before doing it. Resolves why it can't be done, or `null`
+     * once it's done - or, when it also installs or enables other plugins, once they're shown for confirmation.
+     */
+    async function planned(name, packageVersion, displayName, apply, failure, options = {}) {
+        let plan;
         try {
-            applied(await updatePlugin(plugin.uid, { version: plugin.version, enabled: !plugin.enabled }));
+            plan = await planPluginChange(name, packageVersion);
         }
         catch (err) {
-            setError(errorMessage(err, `Could not ${plugin.enabled ? "disable" : "enable"} ${plugin.manifest.displayName}.`));
+            return errorMessage(err, failure);
         }
-        finally {
-            setBusyUid(null);
+        if (plan.conflicts.length > 0) {
+            return `${displayName} ${plan.plugin.version} can't be installed. ${plan.conflicts.join(" ")}`;
         }
+        if (plan.install.length > 0 || plan.enable.length > 0) {
+            setConfirming({ displayName, plan, apply, failure, uid: options.uid });
+            return null;
+        }
+        return attempt(() => apply(plan), failure);
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Plugins" }), _jsx(Button, { type: "button", className: "!w-auto", onClick: () => setAdding(true), children: "+ Add plugin" })] }), _jsx("p", { className: "text-sm text-text-muted mb-5 max-w-3xl", children: "Plugins add protocols and features to every server. Changes are applied by restarting the servers one at a time, so mail keeps flowing. Plugins run with full access to the server, so only add ones you trust." }), error && _jsx(Alert, { children: error }), _jsx(RolloutBanner, { status: status }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : plugins.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No plugins installed." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Plugin", "Version", "Status", "Enabled", ""].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: plugins.map((plugin) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: [_jsx("div", { className: "font-semibold", children: plugin.manifest.displayName }), _jsx("div", { className: "text-xs text-text-muted", children: plugin.name }), plugin.manifest.description && (_jsx("div", { className: "text-xs text-text-muted mt-1 max-w-md", children: plugin.manifest.description }))] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: plugin.packageVersion }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: _jsx(PluginStatusCell, { plugin: plugin, status: status }) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: _jsx("label", { className: "inline-flex items-center gap-2", children: _jsx("input", { type: "checkbox", "aria-label": `Enable ${plugin.manifest.displayName}`, checked: plugin.enabled, disabled: busyUid === plugin.uid, onChange: () => void toggle(plugin) }) }) }), _jsxs("td", { className: "py-2.5 px-2.5 border-b border-border align-top text-right whitespace-nowrap", children: [(plugin.manifest.settings ?? []).length > 0 && (_jsx(Button, { variant: "text", type: "button", className: "!w-auto", onClick: () => setConfiguring(plugin), children: "Settings" })), _jsx(Button, { variant: "text", type: "button", className: "!w-auto", onClick: () => setUpgrading(plugin), children: "Change version" }), _jsx(Button, { variant: "text", type: "button", className: "!w-auto", onClick: () => setRemoving(plugin), children: "Remove" })] })] }, plugin.uid))) })] }) })), _jsx(AddPluginModal, { open: adding, onClose: () => setAdding(false), onAdded: (plugin) => {
-                    setAdding(false);
-                    applied(plugin);
-                } }), upgrading && (_jsx(ChangeVersionModal, { plugin: upgrading, onClose: () => setUpgrading(null), onSaved: (plugin) => {
-                    setUpgrading(null);
-                    applied(plugin);
-                } })), configuring && (_jsx(SettingsModal, { plugin: configuring, onClose: () => setConfiguring(null), onSaved: (plugin) => {
+    function install(name, packageVersion, displayName) {
+        return planned(name, packageVersion, displayName, async (plan) => {
+            const result = await addPlugin(name, packageVersion, expectedPlanOf(plan));
+            applied(...result.dependencies, result.plugin);
+        }, `Could not install ${displayName}.`);
+    }
+    function changeVersion(plugin, packageVersion) {
+        const failure = `Could not upgrade ${plugin.manifest.displayName}.`;
+        if (!plugin.enabled) {
+            // A disabled plugin stays disabled, so nothing it requires is installed or enabled - there's nothing to preview.
+            return attempt(async () => applied(await updatePlugin(plugin.uid, { version: plugin.version, packageVersion })), failure);
+        }
+        return planned(plugin.name, packageVersion, plugin.manifest.displayName, async (plan) => {
+            applied(await updatePlugin(plugin.uid, { version: plugin.version, packageVersion, expectedPlan: expectedPlanOf(plan) }));
+            if (plan.install.length > 0 || plan.enable.length > 0) {
+                void reload();
+            }
+        }, failure, { uid: plugin.uid });
+    }
+    function upgrade(plugin, packageVersion) {
+        return onRow(plugin, () => changeVersion(plugin, packageVersion));
+    }
+    // Retried against the plugin as it's listed now (a newer version, or already enabled elsewhere, hides the retry).
+    const retryEnable = plugins.find((plugin) => plugin.uid === retryEnableUid && !plugin.enabled);
+    const displayNameOf = (name) => plugins.find((plugin) => plugin.name === name)?.manifest.displayName ?? name;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Plugins" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setAdding(true), children: "Add by name" })] }), _jsx("p", { className: "text-sm text-text-muted mb-5 max-w-3xl", children: "Plugins add protocols and features to every server. Changes are applied by restarting the servers one at a time, so mail keeps flowing. Plugins run with full access to the server, so only add ones you trust." }), error && (_jsxs(Alert, { children: [error, retryEnable && (_jsxs(_Fragment, { children: [" ", _jsx(Button, { type: "button", variant: "text", className: "!w-auto !p-0", onClick: () => void toggle(retryEnable), children: "Try again" })] }))] })), _jsx(RolloutBanner, { status: status }), statusStale && status && (_jsx("p", { className: "mb-4 text-xs text-text-muted", children: "Couldn't refresh server status. Showing the last status reported." })), listStale && (_jsxs("p", { className: "mb-4 text-xs text-text-muted", children: ["Couldn't re-read the plugin list, so it may be out of date.", " ", _jsx(Button, { type: "button", variant: "text", className: "!w-auto !p-0 !text-xs", onClick: () => void reload(), children: "Retry" })] })), _jsx("h2", { className: "text-sm font-bold uppercase tracking-wide mb-2", children: "Installed plugins" }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : plugins.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No plugins installed." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Plugin", "Version", "State", "Servers", ""].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: plugins.map((plugin) => {
+                                const update = updates.get(plugin.uid);
+                                const latest = update?.updateAvailable ? update.latestVersion : undefined;
+                                const busy = busyUids.has(plugin.uid) || confirming?.uid === plugin.uid;
+                                const requires = Object.keys(plugin.manifest.requires ?? {}).map(displayNameOf);
+                                const requiredBy = plugins
+                                    .filter((other) => other.uid !== plugin.uid && other.manifest.requires?.[plugin.name] !== undefined)
+                                    .map((other) => other.manifest.displayName);
+                                return (_jsxs("tr", { children: [_jsxs("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: [_jsx("div", { className: "font-semibold", children: plugin.manifest.displayName }), _jsx("div", { className: "text-xs text-text-muted", children: plugin.name }), plugin.manifest.description && (_jsx("div", { className: "text-xs text-text-muted mt-1 max-w-md", children: plugin.manifest.description })), requires.length > 0 && _jsxs("div", { className: "text-xs text-text-muted mt-1", children: ["Requires: ", requires.join(", ")] }), requiredBy.length > 0 && (_jsxs("div", { className: "text-xs text-text-muted mt-1", children: ["Required by: ", requiredBy.join(", ")] }))] }), _jsxs("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: [_jsx("div", { children: plugin.packageVersion }), latest && (_jsxs("div", { className: "mt-1 flex flex-col items-start gap-1", children: [_jsxs("span", { className: "text-xs font-semibold text-primary-dark", children: ["Update available: ", latest] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1 !px-2 !text-xs", "aria-label": `Upgrade ${plugin.manifest.displayName} to ${latest}`, disabled: busy, onClick: () => void upgrade(plugin, latest), children: "Upgrade" })] }))] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: plugin.enabled ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Enabled" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Disabled" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: _jsx(PluginStatusCell, { plugin: plugin, status: status }) }), _jsxs("td", { className: "py-2.5 px-2.5 border-b border-border align-top text-right whitespace-nowrap", children: [_jsx(Button, { variant: "text", type: "button", className: "!w-auto", "aria-label": `${plugin.enabled ? "Disable" : "Enable"} ${plugin.manifest.displayName}`, disabled: busy, onClick: () => void toggle(plugin), children: plugin.enabled ? "Disable" : "Enable" }), (plugin.manifest.settings ?? []).length > 0 && (_jsx(Button, { variant: "text", type: "button", className: "!w-auto", onClick: () => setConfiguring(plugin), children: "Settings" })), _jsx(Button, { variant: "text", type: "button", className: "!w-auto", onClick: () => setUpgrading(plugin), children: "Change version" }), _jsx(Button, { variant: "text", type: "button", className: "!w-auto", onClick: () => setRemoving(plugin), children: "Uninstall" })] })] }, plugin.uid));
+                            }) })] }) })), _jsx(PluginBrowser, { plugins: plugins, onInstall: (result) => install(result.name, result.version, result.name), 
+                // The browser only offers an upgrade for a result it matched to one of these same `plugins`.
+                onUpgrade: (uid, packageVersion) => upgrade(plugins.find((p) => p.uid === uid), packageVersion) }), _jsx(AddPluginModal, { open: adding, onClose: () => setAdding(false), onAdd: async (name, packageVersion, displayName) => {
+                    const problem = await install(name, packageVersion, displayName);
+                    if (!problem) {
+                        setAdding(false);
+                    }
+                    return problem;
+                } }), upgrading && (_jsx(ChangeVersionModal, { plugin: upgrading, onClose: () => setUpgrading(null), onSave: async (packageVersion) => {
+                    const problem = await changeVersion(upgrading, packageVersion);
+                    if (!problem) {
+                        setUpgrading(null);
+                    }
+                    return problem;
+                } })), confirming && (_jsx(ConfirmDependenciesModal, { change: confirming, displayNameOf: displayNameOf, onClose: () => setConfirming(null), onDone: () => setConfirming(null) })), configuring && (_jsx(SettingsModal, { plugin: configuring, onClose: () => setConfiguring(null), onSaved: (plugin) => {
                     setConfiguring(null);
                     applied(plugin);
                 } })), removing && (_jsx(RemoveModal, { plugin: removing, onClose: () => setRemoving(null), onRemoved: () => {
                     const uid = removing.uid;
                     setRemoving(null);
                     setPlugins((prev) => prev.filter((plugin) => plugin.uid !== uid));
-                    void refreshStatus();
+                    watchRollout();
                 } }))] }));
 }
-/** Shown while any server copy hasn't applied the saved plugin set yet, or when one is in safe mode. */
+const ALL_NAMESPACES = "";
+/** Searches the configured namespaces' registries for plugin packages, with install and upgrade actions. */
+function PluginBrowser({ plugins, onInstall, onUpgrade, }) {
+    const [namespaces, setNamespaces] = useState([]);
+    const [namespace, setNamespace] = useState(ALL_NAMESPACES);
+    const [results, setResults] = useState(null);
+    const [searching, setSearching] = useState(false);
+    const [busyName, setBusyName] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        listPluginNamespaces()
+            .then(setNamespaces)
+            .catch(() => setNamespaces([]));
+    }, []);
+    async function search(e) {
+        e.preventDefault();
+        setSearching(true);
+        setError(null);
+        try {
+            setResults(await searchPlugins(namespace || undefined));
+        }
+        catch (err) {
+            setResults(null);
+            setError(errorMessage(err, "Could not search for plugins."));
+        }
+        finally {
+            setSearching(false);
+        }
+    }
+    // Keep results in step with installs and upgrades made anywhere on the page.
+    const rows = (results ?? []).map((result) => {
+        const installed = plugins.find((plugin) => plugin.name === result.name);
+        return {
+            ...result,
+            installedUid: installed?.uid,
+            installedVersion: installed?.packageVersion,
+            updateAvailable: !!installed && installed.packageVersion !== result.version && result.updateAvailable,
+        };
+    });
+    async function install(result) {
+        setBusyName(result.name);
+        setError(null);
+        setError(await onInstall(result));
+        setBusyName(null);
+    }
+    async function upgrade(result) {
+        setBusyName(result.name);
+        try {
+            await onUpgrade(result.installedUid, result.version);
+        }
+        finally {
+            setBusyName(null);
+        }
+    }
+    return (_jsxs("section", { "aria-labelledby": "plugin-browser-title", className: "mt-8", children: [_jsx("h2", { id: "plugin-browser-title", className: "text-sm font-bold uppercase tracking-wide mb-2", children: "Find plugins" }), _jsxs("form", { onSubmit: (e) => void search(e), className: "flex flex-wrap gap-2 items-end mb-3", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Namespace" }), _jsxs("select", { "aria-label": "Namespace", className: INPUT_CLASS, value: namespace, onChange: (e) => setNamespace(e.target.value), children: [_jsx("option", { value: ALL_NAMESPACES, children: "All namespaces" }), namespaces.map((ns) => (_jsx("option", { value: ns.name, children: ns.name }, ns.name)))] })] }), _jsx(Button, { type: "submit", className: "!w-auto", loading: searching, disabled: searching, children: "Search" })] }), error && _jsx(Alert, { children: error }), results !== null &&
+                (rows.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No plugins found." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Package", "Latest version", "Status", ""].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: rows.map((result) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: [_jsx("div", { className: "font-semibold", children: result.name }), result.description && _jsx("div", { className: "text-xs text-text-muted max-w-md", children: result.description })] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: result.version }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top text-text-muted", children: result.updateAvailable
+                                                ? `Installed ${result.installedVersion} - update available`
+                                                : result.installedUid
+                                                    ? `Installed ${result.installedVersion}`
+                                                    : result.allowed
+                                                        ? "Not installed"
+                                                        : "Not allowed on this server" }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top text-right", children: result.updateAvailable ? (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", "aria-label": `Upgrade ${result.name} to ${result.version}`, disabled: busyName === result.name, onClick: () => void upgrade(result), children: "Upgrade" })) : (!result.installedUid &&
+                                                result.allowed && (_jsx(Button, { type: "button", className: "!w-auto", "aria-label": `Install ${result.name}`, loading: busyName === result.name, disabled: busyName === result.name, onClick: () => void install(result), children: "Install" }))) })] }, result.name))) })] }) })))] }));
+}
+/** Name a server reports an error under when it isn't about any single plugin (e.g. the plugin set as a whole failed). */
+const SERVER_WIDE_ERROR_NAME = "*";
+/**
+ * Shown while any server copy hasn't applied the saved plugin set yet, when one is in safe mode, or when one reports a
+ * server-wide plugin error - those match no plugin row, so without this they'd never be shown.
+ */
 function RolloutBanner({ status }) {
     if (!status || status.instances.length === 0) {
         return null;
     }
     const behind = status.instances.filter((instance) => instance.hash !== status.hash).length;
     const safeMode = status.instances.filter((instance) => instance.safeMode);
-    return (_jsxs(_Fragment, { children: [behind > 0 && (_jsxs("p", { role: "status", className: "mb-4 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["Applying changes: ", status.instances.length - behind, " of ", status.instances.length, " ", status.instances.length === 1 ? "server" : "servers", " updated. Servers restart one at a time."] })), safeMode.length > 0 && (_jsxs(Alert, { children: [safeMode.map((instance) => instance.instance).join(", "), " started without any plugins because recent starts failed. Fix or disable the failing plugin, and the server will pick up the change."] }))] }));
+    const serverWideErrors = status.instances.flatMap((instance) => instance.errors
+        .filter((entry) => entry.name === SERVER_WIDE_ERROR_NAME)
+        .map((entry) => `${instance.instance}: ${entry.message}`));
+    return (_jsxs(_Fragment, { children: [serverWideErrors.length > 0 && (_jsxs(Alert, { children: ["Plugins couldn\u2019t be loaded:", _jsx("ul", { className: "list-disc pl-5 mt-1", children: serverWideErrors.map((message) => (_jsx("li", { className: "break-words", children: message }, message))) })] })), behind > 0 && (_jsxs("p", { role: "status", className: "mb-4 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["Applying changes: ", status.instances.length - behind, " of ", status.instances.length, " ", status.instances.length === 1 ? "server" : "servers", " updated. Servers restart one at a time."] })), safeMode.length > 0 && (_jsxs(Alert, { children: [safeMode.map((instance) => instance.instance).join(", "), " started without any plugins because recent starts failed. Fix or disable the failing plugin, and the server will pick up the change."] }))] }));
 }
 function PluginStatusCell({ plugin, status }) {
     if (!plugin.enabled) {
@@ -106,61 +349,97 @@ function PluginStatusCell({ plugin, status }) {
     const errors = current.flatMap((instance) => instance.errors.filter((entry) => entry.name === plugin.name).map((entry) => `${instance.instance}: ${entry.message}`));
     return (_jsxs("div", { children: [_jsxs("span", { className: loaded === status.instances.length ? "text-success font-medium" : "text-text-muted", children: ["Loaded on ", loaded, " of ", status.instances.length, " ", status.instances.length === 1 ? "server" : "servers"] }), errors.map((message) => (_jsx("div", { className: "text-xs text-danger mt-1", children: message }, message)))] }));
 }
-function AddPluginModal({ open, onClose, onAdded }) {
+function AddPluginModal({ open, onClose, onAdd, }) {
     const [name, setName] = useState("");
     const [lookup, setLookup] = useState(null);
     const [selectedVersion, setSelectedVersion] = useState("");
     const [error, setError] = useState(null);
     const [busy, setBusy] = useState(false);
+    const [looking, setLooking] = useState(false);
+    /** Identifies the latest lookup, so a slower earlier response can't replace what it found. */
+    const lookupToken = useRef(0);
+    /** Identifies each time the dialog is opened, so an add that finishes after it was closed can't show its result. */
+    const openToken = useRef(0);
+    /** Forgets any lookup still in flight. */
+    function invalidateLookup() {
+        lookupToken.current++;
+        setLooking(false);
+    }
     useEffect(() => {
         if (!open) {
+            openToken.current++;
+            invalidateLookup();
             setName("");
             setLookup(null);
             setSelectedVersion("");
             setError(null);
+            setBusy(false);
         }
     }, [open]);
-    async function find(e) {
-        e.preventDefault();
-        if (!name.trim()) {
-            setError("Enter a package name.");
-            return;
-        }
-        setBusy(true);
+    /** Looks up `packageName` at `packageVersion` (default: latest). `previous` is what a version change started
+     * from - kept, with the failure in place of its manifest, when that version can't be read. */
+    async function runLookup(packageName, packageVersion, previous) {
+        const token = ++lookupToken.current;
+        setLooking(true);
         setError(null);
         try {
-            const found = await lookupPluginPackage(name.trim());
-            setLookup(found);
-            setSelectedVersion(found.selected.version);
+            const found = await lookupPluginPackage(packageName, packageVersion);
+            if (token === lookupToken.current) {
+                setLookup(found);
+                setSelectedVersion(found.selected.version);
+            }
         }
         catch (err) {
-            setLookup(null);
-            setError(errorMessage(err, "Could not look that package up."));
+            if (token !== lookupToken.current) {
+                return;
+            }
+            const message = errorMessage(err, "Could not look that package up.");
+            if (previous && packageVersion) {
+                setLookup({ ...previous, selected: { ...previous.selected, version: packageVersion, manifest: message } });
+            }
+            else {
+                setLookup(null);
+                setError(message);
+            }
         }
         finally {
-            setBusy(false);
+            if (token === lookupToken.current) {
+                setLooking(false);
+            }
         }
     }
+    function find(e) {
+        e.preventDefault();
+        if (!name.trim()) {
+            setError("Enter a package name.");
+            return;
+        }
+        void runLookup(name.trim());
+    }
+    function chooseVersion(version) {
+        setSelectedVersion(version);
+        // The manifest shown, and whether it's a loadable plugin, depend on the version.
+        void runLookup(lookup.package.name, version, lookup);
+    }
+    const manifest = lookup?.selected.manifest;
     async function add() {
+        const token = openToken.current;
         setBusy(true);
         setError(null);
-        try {
-            onAdded(await addPlugin(lookup.package.name, selectedVersion));
-        }
-        catch (err) {
-            setError(errorMessage(err, "Could not add the plugin."));
-        }
-        finally {
+        const name = lookup.package.name;
+        const problem = await onAdd(name, selectedVersion, typeof manifest === "object" ? manifest.displayName : name);
+        if (token === openToken.current) {
+            setError(problem);
             setBusy(false);
         }
     }
-    const manifest = lookup?.selected.manifest;
-    return (_jsxs(Modal, { open: open, onClose: onClose, title: "Add plugin", children: [error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: find, className: "flex gap-2 items-end mb-4", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm flex-1", children: [_jsx("span", { className: "font-semibold", children: "Package name" }), _jsx("input", { "aria-label": "Package name", className: INPUT_CLASS, value: name, placeholder: "@rapidmx/activesync", onChange: (e) => {
+    return (_jsxs(Modal, { open: open, onClose: onClose, title: "Add plugin", children: [error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: find, className: "flex gap-2 items-end mb-4", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm flex-1", children: [_jsx("span", { className: "font-semibold", children: "Package name" }), _jsx("input", { "aria-label": "Package name", className: INPUT_CLASS, value: name, placeholder: "@rapidmx/activesync-plugin", onChange: (e) => {
                                     setName(e.target.value);
+                                    invalidateLookup();
                                     setLookup(null);
-                                } })] }), _jsx(Button, { type: "submit", variant: "secondary", className: "!w-auto", loading: busy && !lookup, disabled: busy, children: "Find" })] }), lookup && (_jsxs("div", { className: "flex flex-col gap-3", children: [typeof manifest === "string" ? (_jsx(Alert, { children: manifest })) : (_jsxs("div", { className: "text-sm", children: [_jsx("div", { className: "font-semibold", children: manifest?.displayName }), manifest?.description && _jsx("div", { className: "text-text-muted", children: manifest.description })] })), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Version" }), _jsx("select", { "aria-label": "Version", className: INPUT_CLASS, value: selectedVersion, onChange: (e) => setSelectedVersion(e.target.value), children: lookup.package.versions.map((version) => (_jsxs("option", { value: version, children: [version, version === lookup.package.latest ? " (latest)" : ""] }, version))) })] }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy || typeof manifest === "string", onClick: () => void add(), children: "Add plugin" })] })] }))] }));
+                                } })] }), _jsx(Button, { type: "submit", variant: "secondary", className: "!w-auto", loading: looking && !lookup, disabled: busy || looking, children: "Find" })] }), lookup && (_jsxs("div", { className: "flex flex-col gap-3", children: [typeof manifest === "string" ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-sm font-semibold", children: lookup.package.name }), _jsx(Alert, { children: manifest })] })) : (_jsxs("div", { className: "text-sm", children: [_jsx("div", { className: "font-semibold", children: manifest?.displayName }), _jsx("div", { className: "text-xs text-text-muted", children: lookup.package.name }), manifest?.description && _jsx("div", { className: "text-text-muted", children: manifest.description })] })), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Version" }), _jsx("select", { "aria-label": "Version", className: INPUT_CLASS, value: selectedVersion, onChange: (e) => chooseVersion(e.target.value), children: lookup.package.versions.map((version) => (_jsxs("option", { value: version, children: [version, version === lookup.package.latest ? " (latest)" : ""] }, version))) })] }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy || looking, disabled: busy || looking || typeof manifest === "string", onClick: () => void add(), children: "Add plugin" })] })] }))] }));
 }
-function ChangeVersionModal({ plugin, onClose, onSaved }) {
+function ChangeVersionModal({ plugin, onClose, onSave, }) {
     const [versions, setVersions] = useState(null);
     const [latest, setLatest] = useState();
     const [selected, setSelected] = useState(plugin.packageVersion);
@@ -175,22 +454,49 @@ function ChangeVersionModal({ plugin, onClose, onSaved }) {
             .catch((err) => setError(errorMessage(err, "Could not load the available versions.")));
     }, [plugin.name]);
     async function save() {
+        setBusy(true);
+        setError(null);
+        const problem = await onSave(selected);
+        if (problem) {
+            setError(problem);
+            setBusy(false);
+        }
+    }
+    return (_jsxs(Modal, { open: true, onClose: onClose, title: `${plugin.manifest.displayName} version`, children: [error && _jsx(Alert, { children: error }), versions === null ? (!error && _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Version" }), _jsx("select", { "aria-label": "Version", className: INPUT_CLASS, value: selected, onChange: (e) => setSelected(e.target.value), children: versions.map((version) => (_jsxs("option", { value: version, children: [version, version === latest ? " (latest)" : "", version === plugin.packageVersion ? " (installed)" : ""] }, version))) })] }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy || selected === plugin.packageVersion, onClick: () => void save(), children: "Save" })] })] }))] }));
+}
+/** Lists the plugins a change also installs or enables, and makes the change once confirmed. */
+function ConfirmDependenciesModal({ change, displayNameOf, onClose, onDone, }) {
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const { plan } = change;
+    async function proceed() {
         setBusy(true);
         setError(null);
         try {
-            onSaved(await updatePlugin(plugin.uid, { version: plugin.version, packageVersion: selected }));
+            await change.apply(plan);
+            onDone();
         }
         catch (err) {
-            setError(errorMessage(err, "Could not change the version."));
-        }
-        finally {
+            setError(errorMessage(err, change.failure));
             setBusy(false);
         }
     }
-    return (_jsxs(Modal, { open: true, onClose: onClose, title: `${plugin.manifest.displayName} version`, children: [error && _jsx(Alert, { children: error }), versions === null ? (!error && _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Version" }), _jsx("select", { "aria-label": "Version", className: INPUT_CLASS, value: selected, onChange: (e) => setSelected(e.target.value), children: versions.map((version) => (_jsxs("option", { value: version, children: [version, version === latest ? " (latest)" : "", version === plugin.packageVersion ? " (installed)" : ""] }, version))) })] }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy || selected === plugin.packageVersion, onClick: () => void save(), children: "Save" })] })] }))] }));
+    return (_jsxs(Modal, { open: true, onClose: onClose, title: `${change.displayName} requires other plugins`, children: [error && _jsx(Alert, { children: error }), _jsxs("p", { className: "text-sm mb-2", children: [change.displayName, " ", plan.plugin.version, " needs these plugins, so they'll be changed too:"] }), _jsxs("ul", { className: "text-sm list-disc pl-5 mb-4", children: [plan.install.map((dependency) => (_jsxs("li", { children: ["Install ", dependency.manifest.displayName, " ", dependency.version] }, dependency.name))), plan.enable.map((name) => (_jsxs("li", { children: ["Enable ", displayNameOf(name)] }, name)))] }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy, onClick: () => void proceed(), children: "Continue" })] })] }));
+}
+/** Whether a required select has no value to fall back on, so the form has to pick (and save) one. */
+function needsSelection(definition, saved) {
+    return (definition.type === "select" &&
+        !!definition.required &&
+        saved === undefined &&
+        definition.default === undefined &&
+        (definition.options ?? []).length > 0);
 }
-/** A setting's current form value: its saved value, else its default. Kept as a string for text inputs. */
+/** A setting's current form value: its saved value, else its default - or, for a required select with neither, its
+ * first option. Kept as a string for text inputs. */
 function initialValue(definition, saved) {
+    if (needsSelection(definition, saved)) {
+        return definition.options[0].value;
+    }
     const value = saved ?? definition.default;
     if (definition.type === "boolean") {
         return value === true;
@@ -198,27 +504,33 @@ function initialValue(definition, saved) {
     return value === undefined ? "" : String(value);
 }
 function SettingsModal({ plugin, onClose, onSaved }) {
-    const definitions = plugin.manifest.settings ?? [];
+    // Only opened from the Settings button, which is only shown for a plugin that declares settings.
+    const definitions = plugin.manifest.settings;
     const initial = useRef(Object.fromEntries(definitions.map((d) => [d.key, initialValue(d, plugin.settings[d.key])])));
     const [values, setValues] = useState(initial.current);
     const [error, setError] = useState(null);
     const [busy, setBusy] = useState(false);
     async function save(e) {
         e.preventDefault();
+        // The server replaces the whole settings object, so every setting is sent. One left alone is sent as it's saved
+        // - `null` when nothing is, so it keeps following the plugin's default rather than pinning the default shown.
+        // A required select with nothing to fall back on is sent as the form picked it.
         const settings = {};
+        let changed = false;
         for (const definition of definitions) {
-            const value = values[definition.key];
-            if (definition.type === "number") {
-                if (value === "") {
-                    settings[definition.key] = null;
-                    continue;
-                }
-                // A number input only ever reports a valid number or an empty string.
-                settings[definition.key] = Number(value);
-            }
-            else {
-                settings[definition.key] = value === "" ? null : value;
+            const key = definition.key;
+            const value = values[key];
+            if (value === initial.current[key] && !needsSelection(definition, plugin.settings[key])) {
+                settings[key] = plugin.settings[key] ?? null;
+                continue;
             }
+            changed = true;
+            // A number input only ever reports a valid number or an empty string.
+            settings[key] = value === "" ? null : definition.type === "number" ? Number(value) : value;
+        }
+        if (!changed) {
+            onClose();
+            return;
         }
         setBusy(true);
         setError(null);
@@ -252,9 +564,9 @@ function RemoveModal({ plugin, onClose, onRemoved }) {
             onRemoved();
         }
         catch (err) {
-            setError(errorMessage(err, "Could not remove the plugin."));
+            setError(errorMessage(err, "Could not uninstall the plugin."));
             setBusy(false);
         }
     }
-    return (_jsxs(Modal, { open: true, onClose: onClose, title: `Remove ${plugin.manifest.displayName}?`, children: [error && _jsx(Alert, { children: error }), _jsx("p", { className: "text-sm mb-4", children: "The servers stop running this plugin after they restart. Data it stored stays in the database, and adding the plugin again brings it back." }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy, onClick: () => void remove(), children: "Remove" })] })] }));
+    return (_jsxs(Modal, { open: true, onClose: onClose, title: `Uninstall ${plugin.manifest.displayName}?`, children: [error && _jsx(Alert, { children: error }), _jsx("p", { className: "text-sm mb-4", children: "The servers stop running this plugin after they restart. Data it stored stays in the database, and adding the plugin again brings it back." }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy, onClick: () => void remove(), children: "Uninstall" })] })] }));
 }