mirror of
https://github.com/Mintplex-Labs/anything-llm
synced 2026-04-26 01:25:15 +02:00
3dae8db7ae
* Add the ability to edit existing SQL connections * Enhance SQL connection management by adding connections prop to DBConnection and SQLConnectionModal components for improved duplicate detection and handling. * format * fix: prevent input defocus in SQL connection edit modal Fixed an issue where typing in input fields would cause the field to lose focus during editing. The useEffect dependency array was using the entire existingConnection object, which could change reference on parent re-renders, triggering unnecessary re-fetches and unmounting form inputs. Changed the dependency to use the primitive database_id value instead of the object reference, ensuring the effect only runs when the actual connection being edited changes. * fix: prevent duplicate SQL connections from being created Fixed an issue where saving SQL connections multiple times would create duplicate entries with auto-generated hash suffixes (e.g., my-db-abc7). This occurred because the frontend maintained stale action properties on connections after saves, causing the backend to treat already-saved connections as new additions. Backend changes (server/models/systemSettings.js): - Modified mergeConnections to skip action:add items that already exist - Reject duplicate updates instead of auto-renaming with UUID suffixes - Check if original connection exists before applying updates Frontend changes: - Added hasChanges prop to SQL connector component - Automatically refresh connections from backend after successful save - Ensures local state has clean data without stale action properties This prevents the creation of confusing duplicate entries and ensures only the connections the user explicitly created are stored. * Refactor to use existing system settings endpoint for getting agent SQL connections | Add better documentation * Simplify handleUpdateConnection handler * refactor mergeConnections to use map * remove console log * fix bug where edit SQL connection modal values werent recomputed after re-opening * Add loading state for fetching agent SQL connections * tooltip * remove unused import * Put skip conditions in switch statement * throw error if default switch case is triggered --------- Co-authored-by: shatfield4 <seanhatfield5@gmail.com> Co-authored-by: Timothy Carambat <rambat1010@gmail.com>
76 lines
2.2 KiB
JavaScript
76 lines
2.2 KiB
JavaScript
import PostgreSQLLogo from "./icons/postgresql.png";
|
|
import MySQLLogo from "./icons/mysql.png";
|
|
import MSSQLLogo from "./icons/mssql.png";
|
|
import { PencilSimple, X } from "@phosphor-icons/react";
|
|
import { useModal } from "@/hooks/useModal";
|
|
import EditSQLConnection from "./SQLConnectionModal";
|
|
|
|
export const DB_LOGOS = {
|
|
postgresql: PostgreSQLLogo,
|
|
mysql: MySQLLogo,
|
|
"sql-server": MSSQLLogo,
|
|
};
|
|
|
|
export default function DBConnection({
|
|
connection,
|
|
onRemove,
|
|
onUpdate,
|
|
setHasChanges,
|
|
connections = [],
|
|
}) {
|
|
const { database_id, engine } = connection;
|
|
const { isOpen, openModal, closeModal } = useModal();
|
|
|
|
function removeConfirmation() {
|
|
if (
|
|
!window.confirm(
|
|
`Delete ${database_id} from the list of available SQL connections? This cannot be undone.`
|
|
)
|
|
)
|
|
return false;
|
|
onRemove(database_id);
|
|
}
|
|
|
|
return (
|
|
<div className="flex gap-x-4 items-center">
|
|
<img
|
|
src={DB_LOGOS?.[engine] ?? null}
|
|
alt={`${engine} logo`}
|
|
className="w-10 h-10 rounded-md"
|
|
/>
|
|
<div className="flex w-full items-center justify-between">
|
|
<div className="flex flex-col">
|
|
<div className="text-sm font-semibold text-white">{database_id}</div>
|
|
<div className="mt-1 text-xs text-description">{engine}</div>
|
|
</div>
|
|
<div className="flex gap-x-2">
|
|
<button
|
|
type="button"
|
|
data-tooltip-id="edit-sql-connection-tooltip"
|
|
className="border-none text-theme-text-secondary hover:text-theme-text-primary transition-colors duration-200 p-1 rounded"
|
|
onClick={openModal}
|
|
>
|
|
<PencilSimple size={18} />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-tooltip-id="delete-sql-connection-tooltip"
|
|
onClick={removeConfirmation}
|
|
className="border-none text-theme-text-secondary hover:text-red-500"
|
|
>
|
|
<X size={18} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<EditSQLConnection
|
|
isOpen={isOpen}
|
|
closeModal={closeModal}
|
|
existingConnection={connection}
|
|
onSubmit={onUpdate}
|
|
setHasChanges={setHasChanges}
|
|
connections={connections}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|