feat(components): add shared ConfigImportDialog for config import
This commit is contained in:
m4
@@ -0,0 +1,331 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
buildImageImportBody,
|
||||
buildRegistryImportBody,
|
||||
IMAGE_EXPORT_KIND,
|
||||
imageMissingSecrets,
|
||||
MAX_IMPORT_BYTES,
|
||||
parseImageExport,
|
||||
parseRegistryExport,
|
||||
REGISTRY_EXPORT_KIND,
|
||||
registryMissingSecrets,
|
||||
type ImageExportEnvelope,
|
||||
type ParseErrorCode,
|
||||
type RegistryExportEnvelope,
|
||||
} from "@/lib/configTransfer";
|
||||
import type { GetModelRegistryResponse } from "@/lib/modelRegistry";
|
||||
import {
|
||||
getImageGeneration,
|
||||
putImageGeneration,
|
||||
type ImageGenerationSettings,
|
||||
} from "@/lib/imageGeneration";
|
||||
|
||||
const inputClass =
|
||||
"w-full rounded-md border border-border bg-background px-2 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60";
|
||||
|
||||
type Kind = "model-registry" | "image-generation";
|
||||
type Mode = "replace" | "merge";
|
||||
|
||||
interface ConfigImportDialogProps {
|
||||
kind: Kind;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onImported: () => Promise<void> | void;
|
||||
}
|
||||
|
||||
interface ParsedState {
|
||||
registry: RegistryExportEnvelope | null;
|
||||
image: ImageExportEnvelope | null;
|
||||
missing: string[];
|
||||
}
|
||||
|
||||
const EMPTY_IMAGE_SETTINGS: ImageGenerationSettings = {
|
||||
default_model: "",
|
||||
timeout_seconds: 0,
|
||||
models: [],
|
||||
};
|
||||
|
||||
export function ConfigImportDialog({
|
||||
kind,
|
||||
open,
|
||||
onOpenChange,
|
||||
onImported,
|
||||
}: ConfigImportDialogProps) {
|
||||
const t = useTranslations("configTransfer");
|
||||
const [text, setText] = useState("");
|
||||
const [parseError, setParseError] = useState<ParseErrorCode | null>(null);
|
||||
const [parsed, setParsed] = useState<ParsedState | null>(null);
|
||||
const [mode, setMode] = useState<Mode>("replace");
|
||||
const [submitError, setSubmitError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setText("");
|
||||
setParseError(null);
|
||||
setParsed(null);
|
||||
setMode("replace");
|
||||
setSubmitError(null);
|
||||
setSubmitting(false);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const analyze = useCallback(
|
||||
async (raw: string) => {
|
||||
setText(raw);
|
||||
setSubmitError(null);
|
||||
if (!raw.trim()) {
|
||||
setParseError(null);
|
||||
setParsed(null);
|
||||
return;
|
||||
}
|
||||
if (kind === "model-registry") {
|
||||
const result = parseRegistryExport(raw);
|
||||
if (!result.ok) {
|
||||
setParseError(result.code);
|
||||
setParsed(null);
|
||||
return;
|
||||
}
|
||||
setParseError(null);
|
||||
setParsed({
|
||||
registry: result.value,
|
||||
image: null,
|
||||
missing: registryMissingSecrets(result.value),
|
||||
});
|
||||
} else {
|
||||
const result = parseImageExport(raw);
|
||||
if (!result.ok) {
|
||||
setParseError(result.code);
|
||||
setParsed(null);
|
||||
return;
|
||||
}
|
||||
// Current stored keys decide which empty file keys are real gaps.
|
||||
let current = EMPTY_IMAGE_SETTINGS;
|
||||
try {
|
||||
current = await getImageGeneration();
|
||||
} catch {
|
||||
// Conservative: every empty key is flagged.
|
||||
}
|
||||
setParseError(null);
|
||||
setParsed({
|
||||
registry: null,
|
||||
image: result.value,
|
||||
missing: imageMissingSecrets(result.value, current),
|
||||
});
|
||||
}
|
||||
},
|
||||
[kind]
|
||||
);
|
||||
|
||||
const onFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
event.target.value = "";
|
||||
if (!file) return;
|
||||
if (file.size > MAX_IMPORT_BYTES) {
|
||||
setText("");
|
||||
setParsed(null);
|
||||
setParseError("too_large");
|
||||
return;
|
||||
}
|
||||
await analyze(await file.text());
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
if (!parsed) return;
|
||||
setSubmitting(true);
|
||||
setSubmitError(null);
|
||||
try {
|
||||
if (kind === "model-registry" && parsed.registry) {
|
||||
const currentResponse = await fetch("/api/model-registry", {
|
||||
cache: "no-store",
|
||||
});
|
||||
if (!currentResponse.ok) {
|
||||
throw new Error(
|
||||
t("dialog.loadCurrentFailed", {
|
||||
status: String(currentResponse.status),
|
||||
})
|
||||
);
|
||||
}
|
||||
const current = (await currentResponse.json()) as GetModelRegistryResponse;
|
||||
const body = buildRegistryImportBody(parsed.registry, current, mode);
|
||||
const putResponse = await fetch("/api/model-registry", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!putResponse.ok) {
|
||||
const errorBody = await putResponse.json().catch(() => null);
|
||||
const message =
|
||||
typeof errorBody?.message === "string"
|
||||
? errorBody.message
|
||||
: `(${putResponse.status})`;
|
||||
throw new Error(t("dialog.failed", { message }));
|
||||
}
|
||||
} else if (kind === "image-generation" && parsed.image) {
|
||||
const current = await getImageGeneration();
|
||||
await putImageGeneration(buildImageImportBody(parsed.image, current, mode));
|
||||
}
|
||||
toast.success(t("dialog.success"));
|
||||
onOpenChange(false);
|
||||
await onImported();
|
||||
} catch (reason) {
|
||||
setSubmitError(reason instanceof Error ? reason.message : String(reason));
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const parseErrorMessages: Record<ParseErrorCode, string> = {
|
||||
too_large: t("dialog.errors.too_large"),
|
||||
invalid_json: t("dialog.errors.invalid_json"),
|
||||
wrong_kind: t("dialog.errors.wrong_kind", {
|
||||
expected: kind === "model-registry" ? REGISTRY_EXPORT_KIND : IMAGE_EXPORT_KIND,
|
||||
}),
|
||||
unsupported_version: t("dialog.errors.unsupported_version"),
|
||||
invalid_shape: t("dialog.errors.invalid_shape"),
|
||||
};
|
||||
|
||||
const preview =
|
||||
parsed?.registry != null
|
||||
? t("dialog.previewRegistry", {
|
||||
providers: String(parsed.registry.payload.registry.providers.length),
|
||||
models: String(
|
||||
parsed.registry.payload.registry.providers.reduce(
|
||||
(count, provider) => count + provider.models.length,
|
||||
0
|
||||
)
|
||||
),
|
||||
})
|
||||
: parsed?.image != null
|
||||
? t("dialog.previewImage", {
|
||||
models: String(parsed.image.payload.models.length),
|
||||
})
|
||||
: null;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{kind === "model-registry"
|
||||
? t("dialog.titleRegistry")
|
||||
: t("dialog.titleImage")}
|
||||
</DialogTitle>
|
||||
<DialogDescription>{t("dialog.description")}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-3">
|
||||
<label className="block space-y-0.5">
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
{t("dialog.fileLabel")}
|
||||
</span>
|
||||
<input
|
||||
type="file"
|
||||
accept=".json,application/json"
|
||||
className="text-sm"
|
||||
onChange={(event) => void onFileChange(event)}
|
||||
/>
|
||||
</label>
|
||||
<label className="block space-y-0.5">
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
{t("dialog.pasteLabel")}
|
||||
</span>
|
||||
<textarea
|
||||
className={`${inputClass} font-mono text-xs`}
|
||||
rows={6}
|
||||
value={text}
|
||||
placeholder={t("dialog.pastePlaceholder")}
|
||||
spellCheck={false}
|
||||
onChange={(event) => void analyze(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
{parseError && (
|
||||
<p role="alert" className="text-xs text-destructive">
|
||||
{parseErrorMessages[parseError]}
|
||||
</p>
|
||||
)}
|
||||
{parsed && (
|
||||
<div className="space-y-2 rounded-md border border-border p-3 text-xs">
|
||||
<p className="font-medium">{preview}</p>
|
||||
{parsed.missing.length > 0 && (
|
||||
<div className="space-y-0.5 text-[var(--color-warning)]">
|
||||
<p>{t("dialog.missingSecretsTitle")}</p>
|
||||
<ul className="list-inside list-disc">
|
||||
{parsed.missing.map((id) => (
|
||||
<li key={id} className="font-mono">
|
||||
{id}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-muted-foreground">{t("dialog.secretsNotice")}</p>
|
||||
<fieldset className="space-y-1">
|
||||
<legend className="text-xs font-medium text-muted-foreground">
|
||||
{t("dialog.modeLabel")}
|
||||
</legend>
|
||||
{(["replace", "merge"] as const).map((value) => (
|
||||
<label key={value} className="flex items-start gap-2 text-sm">
|
||||
<input
|
||||
type="radio"
|
||||
name="import-mode"
|
||||
className="mt-1"
|
||||
checked={mode === value}
|
||||
onChange={() => setMode(value)}
|
||||
/>
|
||||
<span>
|
||||
<span className="font-medium">
|
||||
{value === "replace"
|
||||
? t("dialog.modeReplace")
|
||||
: t("dialog.modeMerge")}
|
||||
</span>{" "}
|
||||
<span className="text-muted-foreground">
|
||||
{value === "replace"
|
||||
? t("dialog.modeReplaceHint")
|
||||
: t("dialog.modeMergeHint")}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</fieldset>
|
||||
</div>
|
||||
)}
|
||||
{submitError && (
|
||||
<p role="alert" className="text-xs text-destructive">
|
||||
{submitError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={submitting}
|
||||
onClick={() => onOpenChange(false)}
|
||||
>
|
||||
{t("dialog.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={!parsed || submitting}
|
||||
onClick={() => void submit()}
|
||||
>
|
||||
{submitting ? t("dialog.submitting") : t("dialog.submit")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user