backup-restore: Toast bei Erfolg, ausführliche Fehlermeldung im Dialog

Vorher: nach Klick auf "Ja, wiederherstellen" passierte UI-seitig
einfach … nichts Sichtbares außer dass der Dialog (irgendwann) zuging.
Bei einem 500er-Fehler blieb der Dialog offen ohne erkennbare
Begründung – der User dachte, die Aktion sei nicht durchgelaufen,
und klickte teils nochmal.

Jetzt:
- Erfolg → Dialog zu, grüne Toast-Meldung mit der Backend-Response
  ("X Datensätze und Y Dateien wiederhergestellt"), 6s sichtbar.
- Fehler → Dialog bleibt offen mit roter Detail-Box drinnen,
  Backend-Felder error + details zusammengefügt, plus
  Toast-Notification 8s. Button-Label wird zu "Erneut versuchen",
  Sekundär-Button zu "Schließen".
- Beim Schließen wird mutation.reset() aufgerufen, damit beim
  nächsten Öffnen keine alten Fehler dranhängen.

extractError-Helper ist allgemein – kann später für andere
Backup-Aktionen wiederverwendet werden.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-19 08:20:16 +02:00
parent 2cb6f172c9
commit 06c427ee39
+35 -3
View File
@@ -1,10 +1,21 @@
import { useState, useRef } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import toast from 'react-hot-toast';
import { Database, Download, Upload, Trash2, RefreshCw, HardDrive, Clock, FileText, FolderOpen, Archive, AlertTriangle, Bomb } from 'lucide-react';
import { backupApi, BackupInfo, getAccessToken } from '../../services/api';
import { useAuth } from '../../context/AuthContext';
import Button from '../../components/ui/Button';
function extractError(err: any): string {
const data = err?.response?.data;
if (data) {
if (data.error && data.details) return `${data.error}: ${data.details}`;
if (data.error) return data.error;
if (typeof data === 'string') return data;
}
return err?.message || 'Unbekannter Fehler';
}
export default function DatabaseBackup() {
const [showRestoreConfirm, setShowRestoreConfirm] = useState<string | null>(null);
const [showDeleteConfirm, setShowDeleteConfirm] = useState<string | null>(null);
@@ -34,9 +45,17 @@ export default function DatabaseBackup() {
// Backup wiederherstellen
const restoreMutation = useMutation({
mutationFn: (name: string) => backupApi.restore(name),
onSuccess: () => {
onSuccess: (response: any) => {
queryClient.invalidateQueries({ queryKey: ['backups'] });
setShowRestoreConfirm(null);
// Backend liefert message: "X Datensätze und Y Dateien wiederhergestellt"
const msg = response?.message || 'Backup erfolgreich wiederhergestellt.';
toast.success(msg, { duration: 6000 });
},
// Bei Fehler bleibt das Dialog absichtlich offen, damit der User
// die Detail-Message sehen + ggf. erneut versuchen kann.
onError: (err: any) => {
toast.error(extractError(err), { duration: 8000 });
},
});
@@ -329,13 +348,24 @@ export default function DatabaseBackup() {
<strong>Achtung:</strong> Bestehende Daten und Dokumente werden mit dem Backup-Stand überschrieben.
Dies kann nicht rückgängig gemacht werden.
</p>
{restoreMutation.isError && (
<div className="mb-4 bg-red-50 border border-red-200 text-red-800 text-sm p-3 rounded-lg">
<div className="font-semibold mb-1">Wiederherstellung fehlgeschlagen</div>
<div className="whitespace-pre-wrap break-words">
{extractError(restoreMutation.error)}
</div>
</div>
)}
<div className="flex justify-end gap-3">
<Button
variant="secondary"
onClick={() => setShowRestoreConfirm(null)}
onClick={() => {
setShowRestoreConfirm(null);
restoreMutation.reset();
}}
disabled={restoreMutation.isPending}
>
Abbrechen
{restoreMutation.isError ? 'Schließen' : 'Abbrechen'}
</Button>
<Button
variant="primary"
@@ -347,6 +377,8 @@ export default function DatabaseBackup() {
<RefreshCw className="w-4 h-4 mr-2 animate-spin" />
Wird wiederhergestellt...
</>
) : restoreMutation.isError ? (
'Erneut versuchen'
) : (
'Ja, wiederherstellen'
)}