Skip to content

Commit 7255580

Browse files
mvalancymvalancy
committed
Simplify node deletion verification to single step
- Remove second verification step requiring text input - Keep first step with two checkboxes for risk acknowledgment - Delete button now works directly after checking both boxes - Eliminate 'Final Verification Required' step completely - Maintain connection blocking and warning UI - Clean up unused state variables and step navigation
1 parent 79e0858 commit 7255580

1 file changed

Lines changed: 15 additions & 158 deletions

File tree

‎packages/web/src/components/DeleteNodeModal.tsx‎

Lines changed: 15 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,12 @@ interface DeleteNodeModalProps {
5050
export function DeleteNodeModal({ isOpen, onClose, nodeId, nodeTitle, nodeType, onOpenDisconnectModal }: DeleteNodeModalProps) {
5151
const { currentTeam } = useAuth();
5252
const { showSuccess, showError } = useNotifications();
53-
const [step, setStep] = useState<'warning' | 'confirm'>('warning');
5453
const [understandRisks, setUnderstandRisks] = useState(false);
5554
const [confirmDeletion, setConfirmDeletion] = useState(false);
56-
const [confirmText, setConfirmText] = useState('');
5755

5856
// Reset state when modal opens/closes
5957
useEffect(() => {
6058
if (isOpen) {
61-
setStep('warning');
62-
setConfirmText('');
6359
setUnderstandRisks(false);
6460
setConfirmDeletion(false);
6561
}
@@ -154,7 +150,6 @@ export function DeleteNodeModal({ isOpen, onClose, nodeId, nodeTitle, nodeType,
154150
}
155151
};
156152

157-
const isConfirmValid = confirmText === nodeTitle;
158153

159154
if (!isOpen) return null;
160155

@@ -315,8 +310,8 @@ export function DeleteNodeModal({ isOpen, onClose, nodeId, nodeTitle, nodeType,
315310
</div>
316311
)}
317312

318-
{/* Step 1: Enhanced Warning and Risk Acknowledgment */}
319-
{!loadingEdges && !hasConnections && step === 'warning' && (
313+
{/* Enhanced Warning and Risk Acknowledgment */}
314+
{!loadingEdges && !hasConnections && (
320315
<div className="p-8">
321316
<div className="mb-8">
322317
{/* Modern danger icon with glow effect */}
@@ -457,165 +452,27 @@ export function DeleteNodeModal({ isOpen, onClose, nodeId, nodeTitle, nodeType,
457452
Cancel
458453
</button>
459454
<button
460-
onClick={() => setStep('confirm')}
461-
disabled={!understandRisks || !confirmDeletion}
455+
onClick={handleDelete}
456+
disabled={!understandRisks || !confirmDeletion || deletingNode}
462457
className="group relative px-6 py-3 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 disabled:from-gray-600 disabled:to-gray-700 text-white font-semibold rounded-xl transition-all duration-200 transform hover:scale-[1.02] disabled:scale-100 hover:shadow-lg hover:shadow-red-500/25 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"
463458
>
464459
<div className="absolute inset-0 bg-gradient-to-r from-red-400/20 to-red-600/20 rounded-xl blur opacity-0 group-hover:opacity-100 group-disabled:opacity-0 transition-opacity duration-200"></div>
465-
<AlertTriangle className="w-5 h-5 relative z-10" />
466-
<span className="relative z-10">Continue to Verification</span>
460+
{deletingNode ? (
461+
<>
462+
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin relative z-10"></div>
463+
<span className="relative z-10">Deleting...</span>
464+
</>
465+
) : (
466+
<>
467+
<Trash2 className="w-5 h-5 relative z-10" />
468+
<span className="relative z-10">Delete Forever</span>
469+
</>
470+
)}
467471
</button>
468472
</div>
469473
</div>
470474
)}
471475

472-
{/* Step 2: Enhanced Final Verification */}
473-
{!loadingEdges && !hasConnections && step === 'confirm' && (
474-
<div className="p-8">
475-
<div className="mb-8">
476-
{/* Enhanced danger icon with multiple animation layers */}
477-
<div className="relative flex items-center justify-center w-28 h-28 mx-auto mb-6">
478-
<div className="absolute inset-0 bg-gradient-to-r from-red-500/40 to-orange-500/40 rounded-full blur-3xl animate-pulse"></div>
479-
<div className="absolute inset-4 bg-gradient-to-r from-red-400/30 to-red-600/30 rounded-full blur-xl animate-ping"></div>
480-
<div className="relative flex items-center justify-center w-20 h-20 bg-gradient-to-br from-red-500/30 to-red-700/30 border-2 border-red-400/50 rounded-full backdrop-blur-sm">
481-
<Trash2 className="h-10 w-10 text-red-400 drop-shadow-2xl" />
482-
</div>
483-
</div>
484-
485-
{/* Professional typography */}
486-
<div className="text-center space-y-3 mb-6">
487-
<h4 className="text-lg font-semibold text-red-200">
488-
Final Verification Required
489-
</h4>
490-
<div className="space-y-2">
491-
<p className="text-sm text-gray-300">
492-
This is your last chance to cancel
493-
</p>
494-
<div className="inline-flex items-center px-3 py-2 bg-red-500/20 border border-red-400/40 rounded-lg backdrop-blur-sm">
495-
<AlertTriangle className="h-4 w-4 text-red-400 mr-2" />
496-
<span className="text-red-200 font-medium text-xs">Final Warning</span>
497-
</div>
498-
</div>
499-
</div>
500-
</div>
501-
502-
{/* Enhanced Final Warning */}
503-
<div className="relative bg-gradient-to-r from-red-900/40 via-red-800/30 to-orange-900/30 border-2 border-red-500/40 rounded-2xl p-6 mb-8 backdrop-blur-sm">
504-
<div className="absolute -top-1 -right-1 w-6 h-6 bg-red-500 rounded-full animate-ping"></div>
505-
<div className="absolute -top-1 -right-1 w-6 h-6 bg-red-500 rounded-full"></div>
506-
507-
<div className="text-center space-y-4">
508-
<div className="inline-flex items-center justify-center w-16 h-16 bg-red-500/20 border-2 border-red-400/40 rounded-full mx-auto mb-4">
509-
<AlertTriangle className="h-8 w-8 text-red-400" />
510-
</div>
511-
512-
<div className="space-y-2">
513-
<h5 className="text-base font-semibold text-red-200">
514-
Irreversible Action
515-
</h5>
516-
<p className="text-red-300 text-xs leading-relaxed max-w-md mx-auto">
517-
Once you proceed, the node <span className="font-semibold text-red-200">"{nodeTitle}"</span> and all its data will be permanently destroyed.
518-
</p>
519-
</div>
520-
</div>
521-
</div>
522-
523-
{/* GitHub-Style Verification Input */}
524-
<div className="mb-8">
525-
<div className="bg-gray-800/60 border border-gray-600/50 rounded-xl p-6 backdrop-blur-sm">
526-
<div className="text-center mb-4">
527-
<h5 className="text-base font-semibold text-gray-200 mb-2">
528-
Security Verification
529-
</h5>
530-
<p className="text-gray-400 text-sm">
531-
To confirm deletion, type the exact node name below
532-
</p>
533-
</div>
534-
535-
<div className="space-y-4">
536-
<div className="text-center">
537-
<p className="text-sm text-gray-400 mb-2">Expected input:</p>
538-
<div className="inline-flex items-center px-4 py-2 bg-gradient-to-r from-gray-700/80 to-gray-600/80 border border-gray-500/50 rounded-lg">
539-
<span className="text-white font-mono text-base font-semibold tracking-wide">
540-
{nodeTitle}
541-
</span>
542-
</div>
543-
</div>
544-
545-
<div className="relative">
546-
<input
547-
type="text"
548-
value={confirmText}
549-
onChange={(e) => setConfirmText(e.target.value)}
550-
className="w-full px-4 py-3 bg-gray-700/80 border-2 border-gray-600/70 focus:border-red-400/70 rounded-xl text-white font-mono text-base placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-400/20 transition-all duration-200 text-center backdrop-blur-sm"
551-
placeholder="Type the node name to confirm deletion"
552-
autoFocus
553-
/>
554-
555-
{/* Dynamic feedback */}
556-
<div className="mt-3">
557-
{confirmText && confirmText !== nodeTitle && (
558-
<div className="flex items-center justify-center text-red-400 text-sm">
559-
<X className="w-4 h-4 mr-1" />
560-
Node name doesn't match
561-
</div>
562-
)}
563-
{isConfirmValid && (
564-
<div className="flex items-center justify-center text-green-400 text-sm font-medium">
565-
<CheckCircle className="w-4 h-4 mr-2" />
566-
Verification successful - deletion enabled
567-
</div>
568-
)}
569-
{!confirmText && (
570-
<div className="flex items-center justify-center text-gray-500 text-sm">
571-
<AlertTriangle className="w-4 h-4 mr-1" />
572-
Type the node name above to enable deletion
573-
</div>
574-
)}
575-
</div>
576-
</div>
577-
</div>
578-
</div>
579-
</div>
580-
581-
{/* Enhanced Final Actions */}
582-
<div className="flex flex-col sm:flex-row justify-between gap-4">
583-
<button
584-
onClick={() => setStep('warning')}
585-
className="px-6 py-3 text-gray-400 bg-gray-700/60 hover:bg-gray-600/60 border border-gray-600/50 hover:border-gray-500/50 font-medium rounded-xl transition-all duration-200 backdrop-blur-sm flex items-center justify-center"
586-
>
587-
← Back to Confirmations
588-
</button>
589-
590-
<div className="flex flex-col sm:flex-row gap-3">
591-
<button
592-
onClick={onClose}
593-
className="px-6 py-3 text-gray-300 bg-gray-700/80 hover:bg-gray-600/80 border border-gray-600/50 hover:border-gray-500/50 font-medium rounded-xl transition-all duration-200 backdrop-blur-sm"
594-
>
595-
Cancel
596-
</button>
597-
<button
598-
onClick={handleDelete}
599-
disabled={!isConfirmValid || deletingNode}
600-
className="group relative px-8 py-3 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 disabled:from-gray-600 disabled:to-gray-700 text-white font-bold rounded-xl transition-all duration-300 transform hover:scale-[1.02] disabled:scale-100 hover:shadow-xl hover:shadow-red-500/30 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 min-w-[180px]"
601-
>
602-
<div className="absolute inset-0 bg-gradient-to-r from-red-400/30 to-red-600/30 rounded-xl blur opacity-0 group-hover:opacity-100 group-disabled:opacity-0 transition-opacity duration-300"></div>
603-
{deletingNode ? (
604-
<>
605-
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin relative z-10"></div>
606-
<span className="relative z-10">Deleting Forever...</span>
607-
</>
608-
) : (
609-
<>
610-
<Trash2 className="w-5 h-5 relative z-10" />
611-
<span className="relative z-10">Delete Forever</span>
612-
</>
613-
)}
614-
</button>
615-
</div>
616-
</div>
617-
</div>
618-
)}
619476
</div>
620477
</div>
621478
</div>

0 commit comments

Comments
 (0)