@rapidmx/web-client 0.30.0 → 0.32.0

package/apps/shared/components/admin/settings/PluginsManager.tsx

@@ -3,12 +3,13 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useCallback, useEffect, useId, useRef, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import {
     addPlugin,
     expectedPlanOf,
     getPluginStatus,
     getPluginUpdates,
+    isSecretSetting,
+    isSecretSettingKey,
     listPluginNamespaces,
     listPlugins,
     lookupPluginPackage,
@@ -21,6 +22,7 @@ import {
     PluginPurgeInfo,
     PluginPurgeState,
     PluginRegistryLookup,
+    PluginSavedSetting,
     PluginSearchResult,
     PluginSettingDefinition,
     PluginSettingValue,
@@ -31,12 +33,14 @@ import {
     retryPluginPurge,
     searchPlugins,
     updatePlugin,
+    uploadPlugin,
 } from "../../../../../lib/admin/pluginsApi.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import { ApiRequestError } from "../../../../../lib/util/api.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import Modal from "../../../../../lib/components/overlays/Modal.js";
 import { notify } from "../../../notifications/store.js";
-import { isElevationRequired } from "../elevation.js";
+import { actionErrorMessage, isElevationMessage, isElevationRequired } from "../elevation.js";
 import { getAllowPrerelease, setAllowPrerelease } from "./pluginPreferences.js";
 
 const INPUT_CLASS =
@@ -52,7 +56,7 @@ const AFTER_CHANGE_POLL_MS = 2 * 60 * 1000;
 const MAX_STATUS_RETRY_MS = 60 * 1000;
 
 function errorMessage(err: unknown, fallback: string): string {
-    return err instanceof ApiRequestError ? err.message : fallback;
+    return actionErrorMessage(err, fallback);
 }
 
 /** Runs `action`, resolving why it failed, or `null`. */
@@ -82,6 +86,21 @@ function purgeFailure(purge: PluginPurgeInfo): string {
 /** A day, in the administrator's own format. */
 const formatDate = (iso: string): string => new Date(iso).toLocaleDateString(undefined, { dateStyle: "medium" });
 
+/** The file names an uploaded plugin may have: what `npm pack` produces (`<name>-<version>.tgz`), or the same gzipped. */
+const PLUGIN_PACK_NAME = /\.(tgz|tar\.gz|gz)$/i;
+
+/** What the server answers (409) an upload of a plugin that is already installed, which the administrator may replace. */
+const ALREADY_INSTALLED = /already installed/i;
+
+/** An upload the administrator is being asked to let replace the plugin of the same name. */
+interface PendingReplace {
+    file: File;
+    /** What the replacement would do, as a question. */
+    question: string;
+    /** Why the server refused, in its words. */
+    reason: string;
+}
+
 /** A change waiting for the administrator to confirm the other plugins it also installs or enables. */
 interface PendingChange {
     displayName: string;
@@ -212,6 +231,8 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
     const allowPrereleaseRef = useRef(allowPrerelease);
     /** Identifies the latest update check, so a slower earlier one can't replace what it found. */
     const updatesRequest = useRef(0);
+    // Set while a bulk action runs, which looks for updates once at its end rather than after each plugin it changes.
+    const bulkRunning = useRef(false);
     /** The plugins ticked for a bulk action. */
     const [selected, setSelected] = useState<ReadonlySet<string>>(new Set());
     /** Set while a bulk action runs. */
@@ -221,6 +242,11 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
     const [confirmingBulkUninstall, setConfirmingBulkUninstall] = useState<Plugin[] | null>(null);
     /** How many changes (or the lookups that come before them) are waiting on the server. */
     const [working, setWorking] = useState(0);
+    /** Set while an uploaded plugin is being sent to the server. */
+    const [uploading, setUploading] = useState(false);
+    /** An upload that would replace an installed plugin, waiting for the administrator to confirm it. */
+    const [replacing, setReplacing] = useState<PendingReplace | null>(null);
+    const fileInput = useRef<HTMLInputElement>(null);
     const statusRequest = useRef<Promise<void> | null>(null);
     /** The state each data deletion was last seen in, so a notification is raised when one that was under way ends. */
     const seenPurges = useRef<Map<string, PluginPurgeState>>(new Map());
@@ -378,7 +404,9 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
             return [...next].sort((a, b) => a.name.localeCompare(b.name));
         });
         watchRollout();
-        void refreshUpdates();
+        if (!bulkRunning.current) {
+            void refreshUpdates();
+        }
     }
 
     /** Runs an action on a plugin's row (an installed plugin's, or an uninstalled one's), which is busy meanwhile, and
@@ -511,6 +539,54 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
         return onRow(plugin, () => changeVersion(plugin, packageVersion));
     }
 
+    /** Sends `file` to the server as a plugin to install - replacing the installed plugin of that name only when `replace` is set. A plugin that is
+     * already installed isn't an error but a question, asked of the administrator before it is replaced. */
+    async function runUpload(file: File, replace: boolean) {
+        setUploading(true);
+        setError(null);
+        setRetryEnableUid(null);
+        try {
+            const uploaded: Plugin = await track(uploadPlugin(file, { replace }));
+            applied(uploaded);
+            notify({
+                kind: "success",
+                title: `${uploaded.name}@${uploaded.packageVersion} uploaded`,
+                message: "The servers restart one at a time to load it.",
+            });
+        } catch (err) {
+            if (!replace && err instanceof ApiRequestError && err.status === 409 && ALREADY_INSTALLED.test(err.message)) {
+                const installed: Plugin | undefined = plugins.find((plugin) => err.message.includes(plugin.name));
+                setReplacing({
+                    file,
+                    question: installed
+                        ? `Replace ${installed.name} ${installed.packageVersion} with the uploaded pack?`
+                        : "Replace the installed plugin with the uploaded pack?",
+                    reason: err.message,
+                });
+            } else if (err instanceof ApiRequestError && err.status === 413) {
+                setError("That file is too large for the server to accept.");
+            } else {
+                setError(errorMessage(err, "Could not upload the plugin."));
+            }
+        }
+        setUploading(false);
+    }
+
+    /** Takes the file the administrator chose, unless it can't be what `npm pack` produces. */
+    function onFileChosen(e: React.ChangeEvent<HTMLInputElement>) {
+        const file: File | undefined = e.target.files?.[0];
+        // So choosing the same file again (after fixing what was wrong) still counts as a change.
+        e.target.value = "";
+        if (!file) {
+            return;
+        }
+        if (!PLUGIN_PACK_NAME.test(file.name)) {
+            setError(`${file.name} isn't a plugin pack. Choose the .tgz file that npm pack produces.`);
+            return;
+        }
+        void runUpload(file, false);
+    }
+
     /** Installs an uninstalled plugin again, at its latest version - as adding it by name would. */
     function reinstall(purge: PluginPurgeInfo) {
         const displayName: string = purgeName(purge);
@@ -579,6 +655,7 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
         setError(null);
         setRetryEnableUid(null);
         setBulkFailure(null);
+        bulkRunning.current = true;
         await track(
             (async () => {
                 for (const [index, plugin] of ordered.entries()) {
@@ -594,7 +671,7 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                     }
                     failed.add(plugin.uid);
                     reasons.push(`${plugin.manifest.displayName}: ${problem}`);
-                    if (problem === ELEVATION_MESSAGE) {
+                    if (isElevationMessage(problem)) {
                         for (const untried of ordered.slice(index + 1)) {
                             failed.add(untried.uid);
                             reasons.push(`${untried.manifest.displayName}: Not attempted.`);
@@ -604,12 +681,16 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                 }
             })(),
         );
+        bulkRunning.current = false;
         setBulk(null);
         setSelected(failed);
         const succeeded: number = ordered.length - failed.size;
         if (kind === "uninstall" && succeeded > 0) {
             watchRollout();
         }
+        if (kind !== "uninstall" && succeeded > 0) {
+            void refreshUpdates();
+        }
         if (succeeded > 0) {
             notify({
                 kind: "success",
@@ -671,12 +752,34 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
     const displayNameOf = (name: string): string => plugins.find((plugin) => plugin.name === name)?.manifest.displayName ?? name;
 
     const SectionHeading = embedded ? "h3" : "h2";
+    const bulkBusy: boolean = bulk !== null;
     const addButton = (
-        <Button type="button" variant="secondary" className="!w-auto shrink-0" onClick={() => setAdding(true)}>
-            Add by name
-        </Button>
+        <div className="flex flex-wrap gap-2 shrink-0">
+            <input
+                ref={fileInput}
+                type="file"
+                className="hidden"
+                accept=".tgz,.tar.gz,application/gzip,application/x-gzip"
+                aria-label="Plugin pack file"
+                tabIndex={-1}
+                onChange={onFileChosen}
+            />
+            <Button
+                type="button"
+                variant="secondary"
+                className="!w-auto"
+                title="Install a plugin from the .tgz file that npm pack produces"
+                loading={uploading}
+                disabled={uploading || bulkBusy}
+                onClick={() => fileInput.current?.click()}
+            >
+                {uploading ? "Uploading\u2026" : "Upload"}
+            </Button>
+            <Button type="button" variant="secondary" className="!w-auto" onClick={() => setAdding(true)}>
+                Add by name
+            </Button>
+        </div>
     );
-    const bulkBusy: boolean = bulk !== null;
 
     return (
         <>
@@ -730,24 +833,18 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                     </div>
                 </Alert>
             )}
-            {error && (
-                <Alert>
-                    {error}
-                    {retryEnable && (
-                        <>
-                            {" "}
-                            <Button
-                                type="button"
-                                variant="text"
-                                className="!w-auto !p-0"
-                                onClick={() => void toggle(retryEnable)}
-                            >
-                                Try again
-                            </Button>
-                        </>
-                    )}
-                </Alert>
-            )}
+            {/* A message on its own is a plain string child, which is what lets the alert offer to confirm the identity again. */}
+            {error &&
+                (retryEnable ? (
+                    <Alert>
+                        {error}{" "}
+                        <Button type="button" variant="text" className="!w-auto !p-0" onClick={() => void toggle(retryEnable)}>
+                            Try again
+                        </Button>
+                    </Alert>
+                ) : (
+                    <Alert>{error}</Alert>
+                ))}
             <RolloutBanner status={status} />
             {statusStale && status && (
                 <p className="mb-4 text-xs text-text-muted">Couldn&apos;t refresh server status. Showing the last status reported.</p>
@@ -860,7 +957,9 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                         <tbody role="rowgroup" className="block lg:table-row-group">
                             {plugins.map((plugin) => {
                                 const update: PluginUpdateInfo | undefined = updates.get(plugin.uid);
-                                const latest: string | undefined = update?.updateAvailable ? update.latestVersion : undefined;
+                                const uploaded: boolean = plugin.source === "upload";
+                                // An uploaded pack has no registry version to be newer than.
+                                const latest: string | undefined = !uploaded && update?.updateAvailable ? update.latestVersion : undefined;
                                 const busy: boolean = busyUids.has(plugin.uid) || confirming?.uid === plugin.uid || bulkBusy;
                                 const requires: string[] = Object.keys(plugin.manifest.requires ?? {}).map(displayNameOf);
                                 const requiredBy: string[] = plugins
@@ -884,6 +983,13 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                                                     {plugin.manifest.description && (
                                                         <div className="text-xs text-text-muted mt-1 max-w-md">{plugin.manifest.description}</div>
                                                     )}
+                                                    {uploaded && (
+                                                        <div className="text-xs text-text-muted mt-1 break-words">
+                                                            <span className={`${BADGE_CLASS} bg-surface-alt text-text-muted`}>Uploaded</span>{" "}
+                                                            {plugin.uploadFilename}
+                                                            {plugin.uploadedAt ? `, ${formatDate(plugin.uploadedAt)}` : ""}
+                                                        </div>
+                                                    )}
                                                     {requires.length > 0 && <div className="text-xs text-text-muted mt-1">Requires: {requires.join(", ")}</div>}
                                                     {requiredBy.length > 0 && (
                                                         <div className="text-xs text-text-muted mt-1">Required by: {requiredBy.join(", ")}</div>
@@ -931,7 +1037,7 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                                                 </div>
                                                 <div className="flex flex-wrap gap-x-4 lg:justify-end">
                                                     <Button variant="text" type="button" onClick={() => setUpgrading(plugin)}>
-                                                        Change version
+                                                        {uploaded ? "Install the registry version" : "Change version"}
                                                     </Button>
                                                     <Button variant="text" type="button" onClick={() => setRemoving(plugin)}>
                                                         Uninstall
@@ -991,6 +1097,28 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                     }}
                 />
             )}
+            {replacing && (
+                <Modal open onClose={() => setReplacing(null)} title="Replace plugin?">
+                    <p className="text-sm mb-2">{replacing.question}</p>
+                    <p className="text-sm text-text-muted mb-4 break-words">{replacing.reason}</p>
+                    <div className="flex gap-2 justify-end">
+                        <Button type="button" variant="secondary" className="!w-auto" onClick={() => setReplacing(null)}>
+                            Cancel
+                        </Button>
+                        <Button
+                            type="button"
+                            className="!w-auto"
+                            onClick={() => {
+                                const { file } = replacing;
+                                setReplacing(null);
+                                void runUpload(file, true);
+                            }}
+                        >
+                            Replace
+                        </Button>
+                    </div>
+                </Modal>
+            )}
             {confirming && (
                 <ConfirmDependenciesModal
                     change={confirming}
@@ -1559,15 +1687,20 @@ function ChangeVersionModal({
     const [selected, setSelected] = useState(plugin.packageVersion);
     const [error, setError] = useState<string | null>(null);
     const [busy, setBusy] = useState(false);
+    // An uploaded pack isn't a registry version, so any registry version is a change from it - the newest is offered first.
+    const uploaded: boolean = plugin.source === "upload";
 
     useEffect(() => {
         lookupPluginPackage(plugin.name, undefined, { prerelease })
             .then((found) => {
                 setVersions(found.package.versions);
                 setLatest(found.package.latest);
+                if (uploaded && found.package.latest) {
+                    setSelected(found.package.latest);
+                }
             })
             .catch((err) => setError(errorMessage(err, "Could not load the available versions.")));
-    }, [plugin.name, prerelease]);
+    }, [plugin.name, prerelease, uploaded]);
 
     async function save() {
         setBusy(true);
@@ -1580,12 +1713,17 @@ function ChangeVersionModal({
     }
 
     return (
-        <Modal open onClose={onClose} title={`${plugin.manifest.displayName} version`}>
+        <Modal open onClose={onClose} title={uploaded ? `Install the registry version of ${plugin.manifest.displayName}` : `${plugin.manifest.displayName} version`}>
             {error && <Alert>{error}</Alert>}
             {versions === null ? (
                 !error && <p className="text-sm text-text-muted">Loading&hellip;</p>
             ) : (
                 <div className="flex flex-col gap-3">
+                    {uploaded && (
+                        <p className="text-sm text-text-muted">
+                            {plugin.manifest.displayName} {plugin.packageVersion} was uploaded as {plugin.uploadFilename}. This replaces it with the version from the registry.
+                        </p>
+                    )}
                     <label className="flex flex-col gap-1.5 text-sm">
                         <span className="font-semibold">Version</span>
                         <select aria-label="Version" className={INPUT_CLASS} value={selected} onChange={(e) => setSelected(e.target.value)}>
@@ -1593,7 +1731,7 @@ function ChangeVersionModal({
                                 <option key={version} value={version}>
                                     {version}
                                     {version === latest ? " (latest)" : ""}
-                                    {version === plugin.packageVersion ? " (installed)" : ""}
+                                    {!uploaded && version === plugin.packageVersion ? " (installed)" : ""}
                                 </option>
                             ))}
                         </select>
@@ -1606,10 +1744,10 @@ function ChangeVersionModal({
                             type="button"
                             className="!w-auto"
                             loading={busy}
-                            disabled={busy || selected === plugin.packageVersion}
+                            disabled={busy || (!uploaded && selected === plugin.packageVersion)}
                             onClick={() => void save()}
                         >
-                            Save
+                            {uploaded ? "Install" : "Save"}
                         </Button>
                     </div>
                 </div>
@@ -1675,7 +1813,7 @@ function ConfirmDependenciesModal({
 }
 
 /** Whether a required select has no value to fall back on, so the form has to pick (and save) one. */
-function needsSelection(definition: PluginSettingDefinition, saved: PluginSettingValue | undefined): boolean {
+function needsSelection(definition: PluginSettingDefinition, saved: PluginSavedSetting | undefined): boolean {
     return (
         definition.type === "select" &&
         !!definition.required &&
@@ -1693,7 +1831,7 @@ const HOST_PLACEHOLDER = "<host>";
  * saved yet - nothing, an empty value, or the placeholder itself, which an older server stores when it installs the
  * plugin. It's the default with this console's host filled in, and is only stored once the form is saved.
  */
-function suggestedHost(definition: PluginSettingDefinition, saved: PluginSettingValue | undefined): string | undefined {
+function suggestedHost(definition: PluginSettingDefinition, saved: PluginSavedSetting | undefined): string | undefined {
     if (typeof definition.default !== "string" || !definition.default.includes(HOST_PLACEHOLDER) || typeof window === "undefined") {
         return undefined;
     }
@@ -1710,12 +1848,12 @@ function configuredValue(definition: PluginSettingDefinition, configured: Plugin
 }
 
 /** Whether a saved value is absent - nothing, or the empty value a plugin's own "" default is saved as. */
-function isUnsaved(saved: PluginSettingValue | undefined): boolean {
+function isUnsaved(saved: PluginSavedSetting | undefined): boolean {
     return saved === undefined || saved === "";
 }
 
 /** The suggestion for the host, unless the deployment configures the setting, which is offered instead. */
-function hostSuggestion(definition: PluginSettingDefinition, saved: PluginSettingValue | undefined, configured: PluginConfiguredSetting | undefined): string | undefined {
+function hostSuggestion(definition: PluginSettingDefinition, saved: PluginSavedSetting | undefined, configured: PluginConfiguredSetting | undefined): string | undefined {
     return configured ? undefined : suggestedHost(definition, saved);
 }
 
@@ -1724,9 +1862,13 @@ function hostSuggestion(definition: PluginSettingDefinition, saved: PluginSettin
  * option. Kept as a string for text inputs. */
 function initialValue(
     definition: PluginSettingDefinition,
-    saved: PluginSettingValue | undefined,
+    saved: PluginSavedSetting | undefined,
     configured?: PluginConfiguredSetting,
 ): PluginSettingValue | "" {
+    if (isSecretSetting(saved)) {
+        // Write-only: the saved secret never reaches the browser, so the field starts empty. Left empty, the placeholder is sent back and the secret stays.
+        return "";
+    }
     if (configured && isUnsaved(saved)) {
         return configuredValue(definition, configured);
     }
@@ -1768,12 +1910,12 @@ function SettingsModal({ plugin, onClose, onSaved }: { plugin: Plugin; onClose:
         // A required select with nothing to fall back on, and a setting offering this console's host, are sent as the
         // form shows them. What the deployment configures is never saved as a copy, which would outrank it when it changes
         // - a field that shows it is sent as nothing.
-        const settings: Record<string, PluginSettingValue | null> = {};
+        const settings: Record<string, PluginSavedSetting | null> = {};
         let changed = false;
         for (const definition of definitions) {
             const key: string = definition.key;
             const configured: PluginConfiguredSetting | undefined = plugin.configured?.[key];
-            const saved: PluginSettingValue | undefined = plugin.settings[key];
+            const saved: PluginSavedSetting | undefined = plugin.settings[key];
             const value = values[key];
             if (resetting && value === initialValue(definition, undefined, configured)) {
                 // What a fresh install saves: only a default naming this console's host has to be, for the plugin to work.
@@ -1820,6 +1962,7 @@ function SettingsModal({ plugin, onClose, onSaved }: { plugin: Plugin; onClose:
                         definition={definition}
                         value={values[definition.key]}
                         configured={plugin.configured?.[definition.key]}
+                        secretSaved={!resetting && isSecretSetting(plugin.settings[definition.key])}
                         onChange={(value) => setValues((prev) => ({ ...prev, [definition.key]: value }))}
                     />
                 ))}
@@ -1852,11 +1995,14 @@ function SettingField({
     definition,
     value,
     configured,
+    secretSaved,
     onChange,
 }: {
     definition: PluginSettingDefinition;
     value: PluginSettingValue | "";
     configured?: PluginConfiguredSetting;
+    /** A secret is saved: the server never sends it, so the field is write-only - typing replaces it, leaving it empty keeps it. */
+    secretSaved: boolean;
     onChange: (value: PluginSettingValue | "") => void;
 }) {
     // What applies without a saved value; one saved here replaces it, and Reset goes back to it.
@@ -1865,8 +2011,10 @@ function SettingField({
             This deployment&apos;s configuration provides {configured.secret ? "a value" : "the value shown"} unless one is saved here.
         </span>
     );
-    // A secret's value never reaches the browser, so the field only says that it is set.
-    const placeholder: string | undefined = configured?.secret ? "Set by this deployment" : undefined;
+    // A secret's value never reaches the browser, so the field only says that it is set - and never shows what is typed, or offers it to the
+    // browser's form fill.
+    const secretField: boolean = definition.type === "string" && (isSecretSettingKey(definition.key) || secretSaved || !!configured?.secret);
+    const placeholder: string | undefined = secretSaved ? "Saved - type a new value to replace it" : configured?.secret ? "Set by this deployment" : undefined;
     const help = (
         <>
             {definition.help && <span className="text-xs text-text-muted">{definition.help}</span>}
@@ -1901,10 +2049,11 @@ function SettingField({
                 <input
                     aria-label={definition.label}
                     className={INPUT_CLASS}
-                    type={definition.type === "number" ? "number" : "text"}
+                    type={definition.type === "number" ? "number" : secretField ? "password" : "text"}
+                    autoComplete={secretField ? "new-password" : undefined}
                     min={definition.min}
                     max={definition.max}
-                    required={definition.required && !configured}
+                    required={definition.required && !configured && !secretSaved}
                     placeholder={placeholder}
                     value={String(value)}
                     onChange={(e) => onChange(e.target.value)}

package/apps/shared/components/admin/settings/RetentionPolicyForm.tsx

@@ -3,9 +3,15 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
-import { MIN_AUDIT_LOG_RETENTION_DAYS, RetentionPolicy, RetentionPolicyUpdate, updateRetentionPolicy } from "../../../../../lib/admin/retentionPolicyApi.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import { actionErrorMessage } from "../elevation.js";
+import {
+    MIN_AUDIT_LOG_RETENTION_DAYS,
+    MIN_MESSAGE_RETENTION_DAYS,
+    RetentionPolicy,
+    RetentionPolicyUpdate,
+    updateRetentionPolicy,
+} from "../../../../../lib/admin/retentionPolicyApi.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import Modal from "../../../../../lib/components/overlays/Modal.js";
 
@@ -49,14 +55,21 @@ export default function RetentionPolicyForm({
     const [savedMessageDays, setSavedMessageDays] = useState(policy.messageRetentionDays);
     const [savedAuditDays, setSavedAuditDays] = useState(policy.auditLogRetentionDays);
     const [pendingPatch, setPendingPatch] = useState<RetentionPolicyUpdate | null>(null);
+    // A period that is still what is stored is neither sent nor held to the floor: it may have been stored before the floor was set.
+    const messageChanged = messageRetentionDays !== (savedMessageDays?.toString() ?? "");
+    const auditChanged = auditLogRetentionDays !== (savedAuditDays?.toString() ?? "");
 
     function handleSubmit(e: FormEvent) {
         e.preventDefault();
-        // A blank field is sent as `null`, which clears a configured age back to no automatic purge.
-        const patch: RetentionPolicyUpdate = {
-            messageRetentionDays: messageRetentionDays.trim() === "" ? null : Number(messageRetentionDays),
-            auditLogRetentionDays: auditLogRetentionDays.trim() === "" ? null : Number(auditLogRetentionDays),
-        };
+        // A blank field is sent as `null`, which clears a configured age back to no automatic purge. Only a field that was changed is sent: one left as
+        // it is would be refused by a floor that came in after it was stored, and so keep the other from being saved.
+        const patch: RetentionPolicyUpdate = {};
+        if (messageChanged) {
+            patch.messageRetentionDays = messageRetentionDays.trim() === "" ? null : Number(messageRetentionDays);
+        }
+        if (auditChanged) {
+            patch.auditLogRetentionDays = auditLogRetentionDays.trim() === "" ? null : Number(auditLogRetentionDays);
+        }
         if (
             shortensRetention(patch.messageRetentionDays, savedMessageDays) ||
             shortensRetention(patch.auditLogRetentionDays, savedAuditDays)
@@ -80,7 +93,7 @@ export default function RetentionPolicyForm({
             setSavedSnapshot(snapshot);
             setSaved(true);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save the retention policy.");
+            setError(actionErrorMessage(err, "Could not save the retention policy."));
         } finally {
             setSaving(false);
         }
@@ -109,14 +122,14 @@ export default function RetentionPolicyForm({
                     <input
                         aria-label="Message retention (days)"
                         type="number"
-                        min={1}
+                        min={messageChanged ? MIN_MESSAGE_RETENTION_DAYS : undefined}
                         className={INPUT_CLASS}
                         value={messageRetentionDays}
                         onChange={(e) => setMessageRetentionDays(e.target.value)}
                         placeholder="No automatic purge"
                     />
                     <span className="text-xs text-text-muted">
-                        Applies to any message, in any folder, regardless of age.
+                        Applies to any message, in any folder, regardless of age. Cannot be set below {MIN_MESSAGE_RETENTION_DAYS} days.
                     </span>
                 </label>
                 <label className="flex flex-col gap-1.5 text-sm">
@@ -124,7 +137,7 @@ export default function RetentionPolicyForm({
                     <input
                         aria-label="Audit log retention (days)"
                         type="number"
-                        min={MIN_AUDIT_LOG_RETENTION_DAYS}
+                        min={auditChanged ? MIN_AUDIT_LOG_RETENTION_DAYS : undefined}
                         className={INPUT_CLASS}
                         value={auditLogRetentionDays}
                         onChange={(e) => setAuditLogRetentionDays(e.target.value)}