ModifyStepConfirmDialog.tsx•2.17 kB
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@/src/components/ui/alert-dialog';
import { Button } from '@/src/components/ui/button';
import { OctagonAlert, X } from 'lucide-react';
interface ModifyStepConfirmDialogProps {
open: boolean;
stepId: string;
stepName?: string;
onConfirm: () => void;
onCancel: () => void;
}
export function ModifyStepConfirmDialog({
open,
stepId,
stepName,
onConfirm,
onCancel,
}: ModifyStepConfirmDialogProps) {
return (
<AlertDialog open={open} onOpenChange={(isOpen) => !isOpen && onCancel()}>
<AlertDialogContent onKeyDown={(e) => {
if (e.key === 'Enter' && (e.target as HTMLElement).tagName !== 'BUTTON') {
e.preventDefault();
onConfirm();
}
}}>
<Button
variant="ghost"
size="icon"
className="absolute right-4 top-4 h-6 w-6"
onClick={onCancel}
>
<X className="h-4 w-4" />
</Button>
<AlertDialogHeader>
<div className="flex items-center gap-2">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/20">
<OctagonAlert className="h-5 w-5 text-amber-600 dark:text-amber-400" />
</div>
<AlertDialogTitle>Confirm Step Execution</AlertDialogTitle>
</div>
<AlertDialogDescription className="pt-2">
The next step <span className="font-medium text-foreground">{stepName || stepId}</span> has the potential to modify data on the system it connects to.
<br /><br />
Do you want to continue executing this step?
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel onClick={onCancel}>Inspect Step</AlertDialogCancel>
<AlertDialogAction onClick={onConfirm}>
Continue Execution
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}