111 lines
4.5 KiB
TypeScript
111 lines
4.5 KiB
TypeScript
"use client"
|
||
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogMedia,
|
||
AlertDialogTitle,
|
||
} from "@/components/ui/alert-dialog"
|
||
import { Alert, AlertDescription, AlertTitle } from "@/components/reui/alert"
|
||
import type { Backup } from "@/lib/data"
|
||
import { backupFileMissing } from "@/lib/backup-file-state"
|
||
import { AlertCircleIcon, LoaderCircleIcon, TriangleAlertIcon } from "lucide-react"
|
||
|
||
export function BackupDeleteDialog({
|
||
backup,
|
||
busy,
|
||
error,
|
||
onConfirm,
|
||
onCancel,
|
||
returnFocus,
|
||
}: {
|
||
backup: Backup | null
|
||
busy: boolean
|
||
error?: string | null
|
||
onConfirm: () => void
|
||
onCancel: () => void
|
||
returnFocus?: () => HTMLElement | null
|
||
}) {
|
||
return (
|
||
<AlertDialog open={Boolean(backup)} onOpenChange={(v) => { if (!v && !busy) onCancel() }}>
|
||
<AlertDialogContent finalFocus={returnFocus}>
|
||
<AlertDialogHeader>
|
||
<AlertDialogMedia className="bg-destructive/10 text-destructive">
|
||
<AlertCircleIcon />
|
||
</AlertDialogMedia>
|
||
<AlertDialogTitle>{backup && backupFileMissing(backup) ? "Удалить запись о бэкапе?" : "Удалить бэкап?"}</AlertDialogTitle>
|
||
<AlertDialogDescription className="[overflow-wrap:anywhere]">
|
||
{backup && backupFileMissing(backup) ? <>Локальный файл <span className="font-mono text-foreground">{backup.filename}</span> отсутствует. Будет удалена только запись из истории.</> : <>Файл <span className="font-mono text-foreground">{backup?.filename}</span> будет удалён
|
||
{backup?.storage === "s3" || backup?.storage === "both" ? " локально; объект S3 — через текущее подключение к хранилищу" : " с диска"}.</>}
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
{error && <p role="alert" className="text-sm text-destructive break-words">{error}</p>}
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel disabled={busy} onClick={onCancel}>Отмена</AlertDialogCancel>
|
||
<AlertDialogAction variant="destructive" disabled={busy} onClick={onConfirm}>
|
||
{busy ? <LoaderCircleIcon className="size-4 animate-spin" /> : null}
|
||
Удалить
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
)
|
||
}
|
||
|
||
export function BackupRestoreDialog({
|
||
backup,
|
||
busy,
|
||
blocked = false,
|
||
error,
|
||
onConfirm,
|
||
onCancel,
|
||
returnFocus,
|
||
}: {
|
||
backup: Backup | null
|
||
busy: boolean
|
||
blocked?: boolean
|
||
error?: string | null
|
||
onConfirm: () => void
|
||
onCancel: () => void
|
||
returnFocus?: () => HTMLElement | null
|
||
}) {
|
||
return (
|
||
<AlertDialog open={Boolean(backup)} onOpenChange={(v) => { if (!v && !busy) onCancel() }}>
|
||
<AlertDialogContent finalFocus={returnFocus}>
|
||
<AlertDialogHeader>
|
||
<AlertDialogMedia className="bg-warning/10 text-warning">
|
||
<TriangleAlertIcon />
|
||
</AlertDialogMedia>
|
||
<AlertDialogTitle>Восстановить конфигурацию?</AlertDialogTitle>
|
||
<AlertDialogDescription className="[overflow-wrap:anywhere]">
|
||
<span>
|
||
Файл <span className="font-mono text-foreground">{backup?.filename}</span> будет загружен
|
||
на <span className="text-foreground">{backup?.server}</span> и импортирован.
|
||
</span>
|
||
</AlertDialogDescription>
|
||
<Alert variant="warning">
|
||
<TriangleAlertIcon />
|
||
<AlertTitle className="line-clamp-none">Это изменит рабочую конфигурацию роутера</AlertTitle>
|
||
<AlertDescription>
|
||
Сессия может оборваться. Убедитесь, что выбран именно этот сервер и этот снимок.
|
||
</AlertDescription>
|
||
</Alert>
|
||
</AlertDialogHeader>
|
||
{error && <p role="alert" className="text-sm text-destructive break-words">{error}</p>}
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel disabled={busy} onClick={onCancel}>{blocked && !busy ? "Закрыть" : "Отмена"}</AlertDialogCancel>
|
||
<AlertDialogAction disabled={busy || blocked} onClick={onConfirm}>
|
||
{busy ? <LoaderCircleIcon className="size-4 animate-spin" /> : null}
|
||
Восстановить
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
)
|
||
}
|