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:
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"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user