🐛 Replace all window.confirm() with styled ConfirmDialog

web/eslint.config.js

@@ -26,6 +26,11 @@ export default tseslint.config(
       '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
       // Warn on patterns that often indicate unbatched state updates (#3049)
       // Encourages useReducer or single-object setState for related state
+      'no-restricted-globals': ['error',
+        { name: 'alert', message: 'Use ConfirmDialog or Toast instead of browser alert().' },
+        { name: 'confirm', message: 'Use ConfirmDialog instead of browser confirm().' },
+        { name: 'prompt', message: 'Use a styled input modal instead of browser prompt().' },
+      ],
       'no-restricted-syntax': ['warn',
         {
           selector: 'CallExpression[callee.name=/^set[A-Z]/] + CallExpression[callee.name=/^set[A-Z]/]',

web/src/components/alerts/AlertRuleEditor.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Trash2, Server, Bell, BellOff, Bot, Slack, Webhook, Siren, ShieldAlert } from 'lucide-react'
 import { useClusters } from '../../hooks/useMCP'
-import { BaseModal } from '../../lib/modals'
+import { BaseModal, ConfirmDialog } from '../../lib/modals'
 import type {
   AlertRule,
   AlertCondition,
@@ -80,10 +80,17 @@ export function AlertRuleEditor({ isOpen = true, rule, onSave, onCancel }: Alert
 
   // Validation
   const [errors, setErrors] = useState<Record<string, string>>({})
+  const [showDiscardConfirm, setShowDiscardConfirm] = useState(false)
+
+  const forceClose = () => {
+    setShowDiscardConfirm(false)
+    onCancel()
+  }
 
   const handleClose = () => {
     const hasChanges = name.trim() !== '' || description.trim() !== ''
-    if (hasChanges && !window.confirm(t('common:common.discardUnsavedChanges', 'Discard unsaved changes?'))) {
+    if (hasChanges) {
+      setShowDiscardConfirm(true)
       return
     }
     onCancel()
@@ -176,6 +183,16 @@ export function AlertRuleEditor({ isOpen = true, rule, onSave, onCancel }: Alert
 
   return (
     <BaseModal isOpen={isOpen} onClose={handleClose} size="lg" closeOnBackdrop={false} closeOnEscape={true}>
+      <ConfirmDialog
+        isOpen={showDiscardConfirm}
+        onClose={() => setShowDiscardConfirm(false)}
+        onConfirm={forceClose}
+        title={t('common:common.discardUnsavedChanges', 'Discard unsaved changes?')}
+        message={t('common:common.discardUnsavedChangesMessage', 'You have unsaved changes that will be lost.')}
+        confirmLabel={t('common:common.discard', 'Discard')}
+        cancelLabel={t('common:common.keepEditing', 'Keep editing')}
+        variant="warning"
+      />
       <BaseModal.Header
         title={rule ? t('alerts.editRule') : t('alerts.createRule')}
         icon={Bell}

web/src/components/feedback/FeatureRequestModal.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef, useCallback } from 'react'
 import { X, Bug, Sparkles, Loader2, ExternalLink, Bell, Check, Clock, GitPullRequest, GitMerge, Eye, Pencil, RefreshCw, MessageSquare, Settings, Github, Coins, Lightbulb, AlertCircle, AlertTriangle, Linkedin, Trophy, Monitor, BookOpen, ImagePlus, Trash2, Copy, Maximize2 } from 'lucide-react'
 import { Button } from '../ui/Button'
 import { StatusBadge } from '../ui/StatusBadge'
-import { BaseModal } from '../../lib/modals'
+import { BaseModal, ConfirmDialog } from '../../lib/modals'
 import {
   useFeatureRequests,
   useNotifications,
@@ -116,6 +116,7 @@ export function FeatureRequestModal({ isOpen, onClose, initialTab, initialReques
   const [error, setError] = useState<string | null>(null)
   const [success, setSuccess] = useState<{ issueUrl?: string } | null>(null)
   const [confirmClose, setConfirmClose] = useState<string | null>(null) // request ID to confirm close
+  const [showDiscardConfirm, setShowDiscardConfirm] = useState(false)
   const [actionLoading, setActionLoading] = useState<string | null>(null) // request ID being acted on
   const [actionError, setActionError] = useState<string | null>(null)
   const [showLoginPrompt, setShowLoginPrompt] = useState(false)
@@ -370,25 +371,41 @@ export function FeatureRequestModal({ isOpen, onClose, initialTab, initialReques
     }
   }
 
+  const forceClose = () => {
+    setShowDiscardConfirm(false)
+    setDescription('')
+    setDescriptionTab('write')
+    setRequestType(initialRequestType || 'bug')
+    setTargetRepo('console')
+    setError(null)
+    setSuccess(null)
+    setScreenshots([])
+    setActiveTab(initialTab || 'submit')
+    onClose()
+  }
+
   const handleClose = () => {
     if (!isSubmitting) {
-      if (description.trim() !== '' && !window.confirm(t('common:common.discardUnsavedChanges', 'Discard unsaved changes?'))) {
+      if (description.trim() !== '') {
+        setShowDiscardConfirm(true)
         return
       }
-      setDescription('')
-      setDescriptionTab('write')
-      setRequestType(initialRequestType || 'bug')
-      setTargetRepo('console')
-      setError(null)
-      setSuccess(null)
-      setScreenshots([])
-      setActiveTab(initialTab || 'submit')
-      onClose()
+      forceClose()
     }
   }
 
   return (
     <BaseModal isOpen={isOpen} onClose={handleClose} size="lg" closeOnBackdrop={false} closeOnEscape={true} className="!h-[80vh]">
+      <ConfirmDialog
+        isOpen={showDiscardConfirm}
+        onClose={() => setShowDiscardConfirm(false)}
+        onConfirm={forceClose}
+        title={t('common:common.discardUnsavedChanges', 'Discard unsaved changes?')}
+        message={t('common:common.discardUnsavedChangesMessage', 'You have unsaved changes that will be lost.')}
+        confirmLabel={t('common:common.discard', 'Discard')}
+        cancelLabel={t('common:common.keepEditing', 'Keep editing')}
+        variant="warning"
+      />
       {/* Login Prompt Dialog */}
       {showLoginPrompt && (
         <>

web/src/components/feedback/FeedbackModal.tsx

@@ -13,6 +13,7 @@ import { useState, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { createPortal } from 'react-dom'
 import { X, Bug, Lightbulb, Send, CheckCircle2, ExternalLink, Linkedin, ImagePlus, Trash2, Copy, Check, AlertTriangle, Loader2 } from 'lucide-react'
+import { ConfirmDialog } from '../../lib/modals'
 import { StatusBadge } from '../ui/StatusBadge'
 import { useRewards, REWARD_ACTIONS } from '../../hooks/useRewards'
 import { useToast } from '../ui/Toast'
@@ -54,6 +55,7 @@ export function FeedbackModal({ isOpen, onClose, initialType = 'feature' }: Feed
   const [screenshots, setScreenshots] = useState<{ file: File; preview: string }[]>([])
   const [isDragOver, setIsDragOver] = useState(false)
   const [copiedIndex, setCopiedIndex] = useState<number | null>(null)
+  const [showDiscardConfirm, setShowDiscardConfirm] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   const handleScreenshotFiles = (files: FileList | null) => {
@@ -183,10 +185,8 @@ export function FeedbackModal({ isOpen, onClose, initialType = 'feature' }: Feed
     }
   }
 
-  const handleClose = () => {
-    if (!success && (title.trim() !== '' || description.trim() !== '') && !window.confirm(t('common:common.discardUnsavedChanges', 'Discard unsaved changes?'))) {
-      return
-    }
+  const forceClose = () => {
+    setShowDiscardConfirm(false)
     localStorage.removeItem(DRAFT_KEY)
     setSuccess(null)
     setSubmitError(null)
@@ -196,6 +196,14 @@ export function FeedbackModal({ isOpen, onClose, initialType = 'feature' }: Feed
     onClose()
   }
 
+  const handleClose = () => {
+    if (!success && (title.trim() !== '' || description.trim() !== '')) {
+      setShowDiscardConfirm(true)
+      return
+    }
+    forceClose()
+  }
+
   // Keyboard navigation - ESC to close, Space to close when not typing
   useEffect(() => {
     if (!isOpen) return
@@ -232,6 +240,16 @@ export function FeedbackModal({ isOpen, onClose, initialType = 'feature' }: Feed
 
   return createPortal(
     <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-2xl">
+      <ConfirmDialog
+        isOpen={showDiscardConfirm}
+        onClose={() => setShowDiscardConfirm(false)}
+        onConfirm={forceClose}
+        title={t('common:common.discardUnsavedChanges', 'Discard unsaved changes?')}
+        message={t('common:common.discardUnsavedChangesMessage', 'You have unsaved changes that will be lost.')}
+        confirmLabel={t('common:common.discard', 'Discard')}
+        cancelLabel={t('common:common.keepEditing', 'Keep editing')}
+        variant="warning"
+      />
       <div className="bg-card border border-border rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden">
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b border-border bg-secondary/30">

web/src/components/gpu/ReservationFormModal.tsx

@@ -7,7 +7,7 @@ import {
   Trash2,
   Loader2,
 } from 'lucide-react'
-import { BaseModal } from '../../lib/modals'
+import { BaseModal, ConfirmDialog } from '../../lib/modals'
 import {
   useNamespaces,
   createOrUpdateResourceQuota,
@@ -72,10 +72,17 @@ export function ReservationFormModal({
   const [extraResources, setExtraResources] = useState<Array<{ key: string; value: string }>>([])
   const [isSaving, setIsSaving] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [showDiscardConfirm, setShowDiscardConfirm] = useState(false)
+
+  const forceClose = () => {
+    setShowDiscardConfirm(false)
+    onClose()
+  }
 
   const handleClose = () => {
     const hasChanges = title.trim() !== '' || description.trim() !== ''
-    if (hasChanges && !window.confirm(t('common:common.discardUnsavedChanges', 'Discard unsaved changes?'))) {
+    if (hasChanges) {
+      setShowDiscardConfirm(true)
       return
     }
     onClose()
@@ -218,6 +225,16 @@ export function ReservationFormModal({
 
   return (
     <BaseModal isOpen={isOpen} onClose={handleClose} size="lg" closeOnBackdrop={false} closeOnEscape={true}>
+      <ConfirmDialog
+        isOpen={showDiscardConfirm}
+        onClose={() => setShowDiscardConfirm(false)}
+        onConfirm={forceClose}
+        title={t('common:common.discardUnsavedChanges', 'Discard unsaved changes?')}
+        message={t('common:common.discardUnsavedChangesMessage', 'You have unsaved changes that will be lost.')}
+        confirmLabel={t('common:common.discard', 'Discard')}
+        cancelLabel={t('common:common.keepEditing', 'Keep editing')}
+        variant="warning"
+      />
       <BaseModal.Header
         title={editingReservation ? t('gpuReservations.form.editTitle') : t('gpuReservations.form.createTitle')}
         icon={Calendar}

web/src/components/namespaces/CreateNamespaceModal.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Folder, UserPlus, Shield, X } from 'lucide-react'
 import { Button } from '../ui/Button'
-import { BaseModal } from '../../lib/modals'
+import { BaseModal, ConfirmDialog } from '../../lib/modals'
 import { api } from '../../lib/api'
 import { useTranslation } from 'react-i18next'
 
@@ -101,15 +101,33 @@ export function CreateNamespaceModal({ clusters, onClose, onCreated }: CreateNam
     g => !initialAccess.some(a => a.type === 'Group' && a.name === g)
   )
 
+  const [showDiscardConfirm, setShowDiscardConfirm] = useState(false)
+
+  const forceClose = () => {
+    setShowDiscardConfirm(false)
+    onClose()
+  }
+
   const handleClose = () => {
-    if ((name.trim() !== '' || teamLabel.trim() !== '') && !window.confirm(t('common:common.discardUnsavedChanges', 'Discard unsaved changes?'))) {
+    if (name.trim() !== '' || teamLabel.trim() !== '') {
+      setShowDiscardConfirm(true)
       return
     }
     onClose()
   }
 
   return (
     <BaseModal isOpen={true} onClose={handleClose} size="lg" closeOnBackdrop={false} closeOnEscape={true}>
+      <ConfirmDialog
+        isOpen={showDiscardConfirm}
+        onClose={() => setShowDiscardConfirm(false)}
+        onConfirm={forceClose}
+        title={t('common:common.discardUnsavedChanges', 'Discard unsaved changes?')}
+        message={t('common:common.discardUnsavedChangesMessage', 'You have unsaved changes that will be lost.')}
+        confirmLabel={t('common:common.discard', 'Discard')}
+        cancelLabel={t('common:common.keepEditing', 'Keep editing')}
+        variant="warning"
+      />
       <BaseModal.Header
         title="Create Namespace"
         icon={Folder}

web/src/components/namespaces/GrantAccessModal.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Shield } from 'lucide-react'
 import { Button } from '../ui/Button'
-import { BaseModal } from '../../lib/modals'
+import { BaseModal, ConfirmDialog } from '../../lib/modals'
 import { api } from '../../lib/api'
 import { useTranslation } from 'react-i18next'
 import type { NamespaceDetails, NamespaceAccessEntry } from './types'
@@ -88,15 +88,33 @@ export function GrantAccessModal({ namespace, existingAccess, onClose, onGranted
     setShowDropdown(false)
   }
 
+  const [showDiscardConfirm, setShowDiscardConfirm] = useState(false)
+
+  const forceClose = () => {
+    setShowDiscardConfirm(false)
+    onClose()
+  }
+
   const handleClose = () => {
-    if (subjectName.trim() !== '' && !window.confirm(t('common:common.discardUnsavedChanges', 'Discard unsaved changes?'))) {
+    if (subjectName.trim() !== '') {
+      setShowDiscardConfirm(true)
       return
     }
     onClose()
   }
 
   return (
     <BaseModal isOpen={true} onClose={handleClose} size="md" closeOnBackdrop={false} closeOnEscape={true}>
+      <ConfirmDialog
+        isOpen={showDiscardConfirm}
+        onClose={() => setShowDiscardConfirm(false)}
+        onConfirm={forceClose}
+        title={t('common:common.discardUnsavedChanges', 'Discard unsaved changes?')}
+        message={t('common:common.discardUnsavedChangesMessage', 'You have unsaved changes that will be lost.')}
+        confirmLabel={t('common:common.discard', 'Discard')}
+        cancelLabel={t('common:common.keepEditing', 'Keep editing')}
+        variant="warning"
+      />
       <BaseModal.Header
         title="Grant Access"
         description={`Namespace: ${namespace.name}`}