fix(ui): replace browser confirm dialogs with ConfirmModal component (#1060)

Replace 10 instances of native browser confirm() dialogs with the
existing ConfirmModal component for consistent UX across the dashboard.

Changes:
- Add ConfirmModal to 5 files (combos, endpoints, proxy pools, providers, connections)
- Maintain same confirmation flow with improved styling
- Use 'danger' variant for destructive actions
- Preserve all existing functionality

Affected areas:
- Combo deletion (combos page)
- API key deletion/pausing (EndpointPageClient)
- Proxy pool management (single/bulk delete, disable dead proxies)
- Provider operations (disable all models, delete connection, delete compatible node)
- Connection management (ConnectionsCard)

All changes manually tested and verified.
This commit is contained in:
Zanuar Tri Romadon authored and GitHub committed 2026-05-13 15:32:17 +07:00
1 parent 5cab23d92e
commit 3c2503c4b4
5 files changed
+225 -114

No files matched your search

@@ -2,7 +2,7 @@
import { useState, useEffect, useCallback, useRef } from "react";
import PropTypes from "prop-types";
import { Card, Badge, Button, Modal, Select, Toggle, EditConnectionModal } from "@/shared/components";
import { Card, Badge, Button, Modal, Select, Toggle, EditConnectionModal, ConfirmModal } from "@/shared/components";
// ── CooldownTimer ──────────────────────────────────────────────
function CooldownTimer({ until }) {
@@ -308,6 +308,7 @@ export default function ConnectionsCard({ providerId, isOAuth }) {
const [selectedConnection, setSelectedConnection] = useState(null);
const [providerStrategy, setProviderStrategy] = useState(null);
const [providerStickyLimit, setProviderStickyLimit] = useState("1");
const [confirmState, setConfirmState] = useState(null);
const fetch_ = useCallback(async () => {
try {
@@ -358,11 +359,17 @@ export default function ConnectionsCard({ providerId, isOAuth }) {
};
const handleDelete = async (id) => {
if (!confirm("Delete this connection?")) return;
try {
const res = await fetch(`/api/providers/${id}`, { method: "DELETE" });
if (res.ok) setConnections((prev) => prev.filter((c) => c.id !== id));
} catch (e) { console.log("delete error:", e); }
setConfirmState({
title: "Delete Connection",
message: "Delete this connection?",
onConfirm: async () => {
setConfirmState(null);
try {
const res = await fetch(`/api/providers/${id}`, { method: "DELETE" });
if (res.ok) setConnections((prev) => prev.filter((c) => c.id !== id));
} catch (e) { console.log("delete error:", e); }
}
});
};
const handleToggleActive = async (id, isActive) => {
@@ -470,6 +477,16 @@ export default function ConnectionsCard({ providerId, isOAuth }) {
onSave={handleUpdateConnection}
onClose={() => setShowEditModal(false)}
/>
{/* Confirm Modal */}
<ConfirmModal
isOpen={!!confirmState}
onClose={() => setConfirmState(null)}
onConfirm={confirmState?.onConfirm}
title={confirmState?.title || "Confirm"}
message={confirmState?.message}
variant="danger"
/>
</>
);
}