refactor(config): one Save/Discard bar instead of per-field Save
Per-field Save buttons were an unconventional, endpoint-driven choice. Replace them with a single drafted Save/Discard bar (consistent with the Settings page): edits are buffered and applied together on Save (each via the existing per-key PATCH/DELETE), Discard reverts. Reset-to-default is a per-field affordance applied on Save too — clearing a non-secret falls back to default; a secret (which can't be cleared by emptying) gets a toggle that resets it on save. Backend unchanged.
This commit is contained in:
npeter83
parent
7d71c205b2
commit
8198c7712e
4 changed files with 171 additions and 81 deletions
|
|
@ -1,15 +1,18 @@
|
|||
import { useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { RotateCcw, Save, Send } from "lucide-react";
|
||||
import { api, type ConfigItem, type SystemConfigData } from "../lib/api";
|
||||
import { Check, RotateCcw, Save, Send } from "lucide-react";
|
||||
import { api, type ConfigItem } from "../lib/api";
|
||||
import { notify } from "../lib/notifications";
|
||||
import Tooltip from "./Tooltip";
|
||||
|
||||
// Admin Configuration page: edit DB-overridable operational settings (registry-driven from
|
||||
// the backend — adding a key there makes it appear here automatically). Group order is fixed
|
||||
// where known so logically related settings (e.g. Email/SMTP) stay together.
|
||||
// Admin Configuration page: edit DB-overridable operational settings (registry-driven from the
|
||||
// backend — adding a key there makes it appear here automatically). Edits are drafted and
|
||||
// applied together via one Save/Discard bar (consistent with the Settings page); nothing hits
|
||||
// the server until Save. Group order is fixed where known so logically related settings (e.g.
|
||||
// Email/SMTP) stay together.
|
||||
const GROUP_ORDER = ["email"];
|
||||
type SaveState = "idle" | "saving" | "saved" | "error";
|
||||
|
||||
export default function ConfigPanel() {
|
||||
const { t } = useTranslation();
|
||||
|
|
@ -17,32 +20,71 @@ export default function ConfigPanel() {
|
|||
const q = useQuery({ queryKey: ["admin-config"], queryFn: api.adminConfig });
|
||||
const data = q.data;
|
||||
|
||||
const apply = (fresh: SystemConfigData) => qc.setQueryData(["admin-config"], fresh);
|
||||
const save = useMutation({
|
||||
mutationFn: ({ key, value }: { key: string; value: string | number | boolean }) =>
|
||||
api.setConfig(key, value),
|
||||
onSuccess: (fresh) => {
|
||||
apply(fresh);
|
||||
notify({ level: "success", message: t("config.saved") });
|
||||
},
|
||||
onError: () => notify({ level: "error", message: t("config.saveFailed") }),
|
||||
});
|
||||
const reset = useMutation({
|
||||
mutationFn: (key: string) => api.resetConfig(key),
|
||||
onSuccess: (fresh) => {
|
||||
apply(fresh);
|
||||
notify({ level: "success", message: t("config.resetDone") });
|
||||
},
|
||||
onError: () => notify({ level: "error", message: t("config.saveFailed") }),
|
||||
});
|
||||
const items = useMemo(() => (data ? Object.values(data.groups).flat() : []), [data]);
|
||||
const byKey = useMemo(() => Object.fromEntries(items.map((i) => [i.key, i])), [items]);
|
||||
// Baseline draft from the server: non-secrets show their effective value; secrets start empty
|
||||
// (write-only — we never load them back).
|
||||
const baseline = useMemo(() => {
|
||||
const m: Record<string, string> = {};
|
||||
for (const it of items) m[it.key] = it.secret ? "" : String(it.value ?? "");
|
||||
return m;
|
||||
}, [items]);
|
||||
|
||||
const [draft, setDraft] = useState<Record<string, string>>({});
|
||||
// Secrets the admin marked to reset-to-default on the next Save (can't be expressed by
|
||||
// clearing the field, since an empty secret field means "leave unchanged").
|
||||
const [secretReset, setSecretReset] = useState<Record<string, boolean>>({});
|
||||
const [saveState, setSaveState] = useState<SaveState>("idle");
|
||||
|
||||
// Re-seed the draft whenever the server data changes (initial load + after a save/reset).
|
||||
useEffect(() => {
|
||||
setDraft(baseline);
|
||||
setSecretReset({});
|
||||
}, [baseline]);
|
||||
|
||||
const isDirty = (it: ConfigItem): boolean => {
|
||||
if (it.secret) return (draft[it.key] ?? "").trim() !== "" || !!secretReset[it.key];
|
||||
return (draft[it.key] ?? "") !== (baseline[it.key] ?? "");
|
||||
};
|
||||
const dirtyKeys = items.filter(isDirty).map((i) => i.key);
|
||||
const dirty = dirtyKeys.length > 0;
|
||||
|
||||
async function save() {
|
||||
setSaveState("saving");
|
||||
try {
|
||||
for (const key of dirtyKeys) {
|
||||
const it = byKey[key];
|
||||
const raw = draft[key] ?? "";
|
||||
if (it.secret) {
|
||||
if (secretReset[key] && !raw.trim()) await api.resetConfig(key);
|
||||
else if (raw.trim()) await api.setConfig(key, raw);
|
||||
} else if (raw === "") {
|
||||
if (it.is_set) await api.resetConfig(key); // cleared → fall back to default
|
||||
} else {
|
||||
await api.setConfig(key, it.type === "int" ? Number(raw) : raw);
|
||||
}
|
||||
}
|
||||
await qc.invalidateQueries({ queryKey: ["admin-config"] });
|
||||
setSaveState("saved");
|
||||
setTimeout(() => setSaveState((s) => (s === "saved" ? "idle" : s)), 2500);
|
||||
} catch {
|
||||
setSaveState("error");
|
||||
notify({ level: "error", message: t("config.saveFailed") });
|
||||
}
|
||||
}
|
||||
|
||||
function discard() {
|
||||
setDraft(baseline);
|
||||
setSecretReset({});
|
||||
setSaveState("idle");
|
||||
}
|
||||
|
||||
const testEmail = useMutation({
|
||||
mutationFn: () => api.testEmail(),
|
||||
onSuccess: (r) => notify({ level: "success", message: t("config.testSent", { to: r.to }) }),
|
||||
onError: () => notify({ level: "error", message: t("config.testFailed") }),
|
||||
});
|
||||
|
||||
const busy = save.isPending || reset.isPending;
|
||||
|
||||
if (q.isLoading || !data) {
|
||||
return <div className="p-4 max-w-3xl mx-auto text-muted">{t("config.loading")}</div>;
|
||||
}
|
||||
|
|
@ -52,7 +94,7 @@ export default function ConfigPanel() {
|
|||
);
|
||||
|
||||
return (
|
||||
<div className="p-4 max-w-3xl w-full mx-auto">
|
||||
<div className="p-4 max-w-3xl w-full mx-auto pb-24">
|
||||
<p className="text-xs text-muted mb-4 leading-relaxed">{t("config.intro")}</p>
|
||||
|
||||
{groupKeys.map((g) => (
|
||||
|
|
@ -63,12 +105,16 @@ export default function ConfigPanel() {
|
|||
<div className="divide-y divide-border/60">
|
||||
{data.groups[g].map((item) => (
|
||||
<Field
|
||||
key={`${item.key}:${item.is_set}:${String(item.value ?? "")}`}
|
||||
key={item.key}
|
||||
item={item}
|
||||
value={draft[item.key] ?? ""}
|
||||
secretsManageable={data.secrets_manageable}
|
||||
busy={busy}
|
||||
onSave={(value) => save.mutate({ key: item.key, value })}
|
||||
onReset={() => reset.mutate(item.key)}
|
||||
pendingSecretReset={!!secretReset[item.key]}
|
||||
onChange={(v) => setDraft((d) => ({ ...d, [item.key]: v }))}
|
||||
onResetField={() => {
|
||||
if (item.secret) setSecretReset((s) => ({ ...s, [item.key]: !s[item.key] }));
|
||||
else setDraft((d) => ({ ...d, [item.key]: "" }));
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -78,7 +124,7 @@ export default function ConfigPanel() {
|
|||
<Tooltip hint={t("config.testEmailHint")}>
|
||||
<button
|
||||
onClick={() => testEmail.mutate()}
|
||||
disabled={testEmail.isPending}
|
||||
disabled={testEmail.isPending || dirty}
|
||||
className="glass-card glass-hover inline-flex items-center gap-2 px-3 py-2 rounded-xl text-sm disabled:opacity-50 transition"
|
||||
>
|
||||
<Send className={`w-4 h-4 ${testEmail.isPending ? "animate-pulse" : ""}`} />
|
||||
|
|
@ -89,36 +135,83 @@ export default function ConfigPanel() {
|
|||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{(dirty || saveState !== "idle") && (
|
||||
<div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-40 glass rounded-2xl shadow-lg flex items-center justify-between gap-4 px-4 py-3 w-[min(48rem,calc(100%-2rem))]">
|
||||
<span className="text-sm text-muted">
|
||||
{saveState === "saved" ? (
|
||||
<span className="text-emerald-500 inline-flex items-center gap-1.5">
|
||||
<Check className="w-4 h-4" />
|
||||
{t("config.saved")}
|
||||
</span>
|
||||
) : saveState === "error" ? (
|
||||
<span className="text-red-500">{t("config.saveFailed")}</span>
|
||||
) : (
|
||||
t("config.unsaved")
|
||||
)}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={discard}
|
||||
disabled={saveState === "saving" || !dirty}
|
||||
className="glass-card glass-hover flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm disabled:opacity-40 transition"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
{t("config.discard")}
|
||||
</button>
|
||||
<button
|
||||
onClick={save}
|
||||
disabled={saveState === "saving" || !dirty}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-accent text-accent-fg font-medium shadow-md shadow-accent/20 disabled:opacity-40 transition"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
{saveState === "saving" ? t("config.saving") : t("config.save")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
item,
|
||||
value,
|
||||
secretsManageable,
|
||||
busy,
|
||||
onSave,
|
||||
onReset,
|
||||
pendingSecretReset,
|
||||
onChange,
|
||||
onResetField,
|
||||
}: {
|
||||
item: ConfigItem;
|
||||
value: string;
|
||||
secretsManageable: boolean;
|
||||
busy: boolean;
|
||||
onSave: (value: string | number) => void;
|
||||
onReset: () => void;
|
||||
pendingSecretReset: boolean;
|
||||
onChange: (v: string) => void;
|
||||
onResetField: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const isNum = item.type === "int";
|
||||
const [draft, setDraft] = useState<string>(item.secret ? "" : String(item.value ?? ""));
|
||||
|
||||
const secretDisabled = item.secret && !secretsManageable;
|
||||
// Status line for secrets (never reveal the value): stored override / env value / unset.
|
||||
const secretStatus = item.is_set
|
||||
? t("config.secretSet")
|
||||
: item.default_is_set
|
||||
? t("config.secretEnv")
|
||||
: t("config.secretUnset");
|
||||
|
||||
const canSave = item.secret ? draft.trim().length > 0 && !secretDisabled : true;
|
||||
// Status line: never reveal a secret's value.
|
||||
let status: string;
|
||||
if (item.secret) {
|
||||
status = secretDisabled
|
||||
? t("config.secretsDisabled")
|
||||
: pendingSecretReset
|
||||
? t("config.willReset")
|
||||
: item.is_set
|
||||
? t("config.secretSet")
|
||||
: item.default_is_set
|
||||
? t("config.secretEnv")
|
||||
: t("config.secretUnset");
|
||||
} else {
|
||||
status = item.is_set ? t("config.overridden") : t("config.usingDefault");
|
||||
}
|
||||
|
||||
// Reset affordance shows when a DB override exists: clears a non-secret to its default, or
|
||||
// toggles a secret's reset-on-save (applied on Save, not immediately).
|
||||
const showReset = item.is_set;
|
||||
|
||||
return (
|
||||
<div className="flex items-start justify-between gap-3 py-3">
|
||||
|
|
@ -127,50 +220,35 @@ function Field({
|
|||
<p className="text-xs text-muted leading-relaxed mt-0.5">
|
||||
{t(`config.fields.${item.key}.hint`, "")}
|
||||
</p>
|
||||
{item.secret ? (
|
||||
<p className="text-[11px] text-muted mt-1">
|
||||
{secretDisabled ? t("config.secretsDisabled") : secretStatus}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-[11px] text-muted mt-1">
|
||||
{item.is_set ? t("config.overridden") : t("config.usingDefault")}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-[11px] text-muted mt-1">{status}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-1.5 shrink-0">
|
||||
<input
|
||||
type={item.secret ? "password" : isNum ? "number" : "text"}
|
||||
value={draft}
|
||||
disabled={secretDisabled}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
value={value}
|
||||
disabled={secretDisabled || (item.secret && pendingSecretReset)}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
min={isNum && item.min != null ? item.min : undefined}
|
||||
max={isNum && item.max != null ? item.max : undefined}
|
||||
placeholder={item.secret ? "••••••••" : String(item.default ?? "")}
|
||||
className="w-52 bg-card border border-border rounded-xl px-3 py-1.5 text-sm outline-none focus:border-accent disabled:opacity-50"
|
||||
/>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{item.is_set && (
|
||||
<Tooltip hint={t("config.resetHint")}>
|
||||
<button
|
||||
onClick={onReset}
|
||||
disabled={busy}
|
||||
className="glass-card glass-hover inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs disabled:opacity-50 transition"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" />
|
||||
{t("config.reset")}
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
<button
|
||||
onClick={() => onSave(isNum ? Number(draft) : draft)}
|
||||
disabled={busy || !canSave}
|
||||
className="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs bg-accent text-accent-fg font-medium disabled:opacity-40 transition"
|
||||
>
|
||||
<Save className="w-3.5 h-3.5" />
|
||||
{t("config.save")}
|
||||
</button>
|
||||
</div>
|
||||
{showReset && !secretDisabled && (
|
||||
<Tooltip hint={t("config.resetHint")}>
|
||||
<button
|
||||
onClick={onResetField}
|
||||
className={`inline-flex items-center gap-1 text-xs transition ${
|
||||
item.secret && pendingSecretReset
|
||||
? "text-accent"
|
||||
: "text-muted hover:text-fg"
|
||||
}`}
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" />
|
||||
{t("config.reset")}
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue