feat: replace native confirm() dialogs with custom modal component
- Add ModalProvider context and useConfirm hook (confirm-modal.tsx) - Support danger/warning/info variants with icons and colors - Animated backdrop and dialog with CSS keyframes - Accessible: aria-modal, role=dialog, ESC to close, auto-focus - Replace all 6 native confirm() calls across dashboard pages - Integrate ModalProvider in app providers
This commit is contained in:
@@ -6,9 +6,11 @@ import api from '@/lib/api';
|
||||
import { toast } from 'react-toastify';
|
||||
import type { Cluster, ClusterPool } from '@/types';
|
||||
import { Scale, BarChart3, RotateCw, CheckCircle, XCircle, Pencil, Clock, X } from 'lucide-react';
|
||||
import { useConfirm } from '@/components/confirm-modal';
|
||||
|
||||
export default function AdminPoolsPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const confirm = useConfirm();
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editingPool, setEditingPool] = useState<ClusterPool | null>(null);
|
||||
const [form, setForm] = useState({
|
||||
@@ -318,10 +320,14 @@ export default function AdminPoolsPage() {
|
||||
<Pencil className="w-3 h-3 inline" /> Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm(`Delete pool "${pool.name}"? Apps already assigned to this pool will keep their current cluster.`)) {
|
||||
deleteMutation.mutate(pool.id);
|
||||
}
|
||||
onClick={async () => {
|
||||
const ok = await confirm({
|
||||
title: `Delete Pool "${pool.name}"`,
|
||||
message: 'Apps already assigned to this pool will keep their current cluster.',
|
||||
confirmText: 'Delete',
|
||||
variant: 'danger',
|
||||
});
|
||||
if (ok) deleteMutation.mutate(pool.id);
|
||||
}}
|
||||
className="text-sm text-red-600 hover:text-red-800"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user