feat: add a confirm dialog before stopping the backup
Some checks failed
Release Workflow / determine-release-type (push) Has been cancelled
Release Workflow / checks (push) Has been cancelled
Release Workflow / e2e-tests (push) Has been cancelled
Release Workflow / build-images (push) Has been cancelled
Release Workflow / publish-release (push) Has been cancelled

This commit is contained in:
Nicolas Meienberger 2026-01-25 10:02:24 +01:00
parent 1166fcb3e7
commit 4c0e2f520f

View file

@ -35,6 +35,7 @@ export const ScheduleSummary = (props: Props) => {
props;
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const [showForgetConfirm, setShowForgetConfirm] = useState(false);
const [showStopConfirm, setShowStopConfirm] = useState(false);
const runForget = useMutation({
...runForgetMutation(),
@ -78,6 +79,12 @@ export const ScheduleSummary = (props: Props) => {
runForget.mutate({ path: { scheduleId: schedule.id.toString() } });
};
const handleConfirmStop = () => {
setShowStopConfirm(false);
if (schedule.lastBackupStatus !== "in_progress") return;
handleStopBackup();
};
return (
<div className="space-y-4">
<Card>
@ -108,7 +115,12 @@ export const ScheduleSummary = (props: Props) => {
</div>
<div className="flex flex-col @lg:flex-row gap-2">
{schedule.lastBackupStatus === "in_progress" ? (
<Button variant="destructive" size="sm" onClick={handleStopBackup} className="w-full @md:w-auto">
<Button
variant="destructive"
size="sm"
onClick={() => setShowStopConfirm(true)}
className="w-full @md:w-auto"
>
<Square className="h-4 w-4 mr-2" />
<span>Stop backup</span>
</Button>
@ -239,6 +251,26 @@ export const ScheduleSummary = (props: Props) => {
</div>
</AlertDialogContent>
</AlertDialog>
<AlertDialog open={showStopConfirm} onOpenChange={setShowStopConfirm}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Stop running backup?</AlertDialogTitle>
<AlertDialogDescription>
Are you sure you want to stop the current backup for <strong>{schedule.name}</strong>?
</AlertDialogDescription>
</AlertDialogHeader>
<div className="flex gap-3 justify-end">
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={handleConfirmStop}
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
>
Stop backup
</AlertDialogAction>
</div>
</AlertDialogContent>
</AlertDialog>
</div>
);
};