Repository: Mintplex-Labs/anything-llm
File: frontend/src/pages/Admin/Agents/SQLConnectorSelection/index.jsx (JavaScript)

Code before:
import DBConnection from "./DBConnection";
import { Plus, Database } from "@phosphor-icons/react";
import NewSQLConnection from "./SQLConnectionModal";
import { useModal } from "@/hooks/useModal";
import SQLAgentImage from "@/media/agents/sql-agent.png";
import Admin from "@/models/admin";

export default function AgentSQLConnectorSelection({
  skill,
  settings, // unused.
  toggleSkill,
  enabled = false,
  setHasChanges,
  hasChanges = false,
}) {
  const { isOpen, openModal, closeModal } = useModal();
  const [connections, setConnections] = useState([]);
  const prevHasChanges = useRef(hasChanges);

  // Load connections on mount
  useEffect(() => {
    Admin.systemPreferencesByFields(["agent_sql_connections"])
      .then((res) => setConnections(res?.settings?.agent_sql_connections ?? []))
      .catch(() => setConnections([]));
  }, []);

  // Refresh connections from backend when save completes (hasChanges: true -> false)
  // This ensures we get clean data without stale action properties
  useEffect(() => {
    if (prevHasChanges.current === true && hasChanges === false) {
      Admin.systemPreferencesByFields(["agent_sql_connections"])
        .then((res) =>
          setConnections(res?.settings?.agent_sql_connections ?? [])
        )
        .catch(() => {});
    }
    prevHasChanges.current = hasChanges;
  }, [hasChanges]);

  function handleRemoveConnection(databaseId) {
    setHasChanges(true);
    setConnections((prev) =>
      prev.map((conn) => {
        if (conn.database_id === databaseId)
          return { ...conn, action: "remove" };
        return conn;
      })
    );
  }

  function handleUpdateConnection(updatedConnection) {

Review comment (suggestion):
Modify backend endpoint here to return the connection string so that we do this in a single call and pass as prop to `DBConnection` and parse the connection string there.

Code after:
import DBConnection from "./DBConnection";
import { Plus, Database, CircleNotch } from "@phosphor-icons/react";
import NewSQLConnection from "./SQLConnectionModal";
import { useModal } from "@/hooks/useModal";
import SQLAgentImage from "@/media/agents/sql-agent.png";
import Admin from "@/models/admin";
import Toggle from "@/components/lib/Toggle";
import { Tooltip } from "react-tooltip";

export default function AgentSQLConnectorSelection({
  skill,
  settings, // unused.
  toggleSkill,
  enabled = false,
  setHasChanges,
  hasChanges = false,
}) {
  const { isOpen, openModal, closeModal } = useModal();
  const [connections, setConnections] = useState([]);
  const [loading, setLoading] = useState(true);
  const prevHasChanges = useRef(hasChanges);

  // Load connections on mount
  useEffect(() => {
    setLoading(true);
    Admin.systemPreferencesByFields(["agent_sql_connections"])
      .then((res) => setConnections(res?.settings?.agent_sql_connections ?? []))
      .catch(() => setConnections([]))
      .finally(() => setLoading(false));
  }, []);

  // Refresh connections from backend when save completes (hasChanges: true -> false)
  // This ensures we get clean data without stale action properties
  useEffect(() => {
    if (prevHasChanges.current === true && hasChanges === false) {
      Admin.systemPreferencesByFields(["agent_sql_connections"])
        .then((res) =>
          setConnections(res?.settings?.agent_sql_connections ?? [])
        )
        .catch(() => {});
    }
    prevHasChanges.current = hasChanges;
  }, [hasChanges]);

  /**
   * Marks a connection for removal by adding action: "remove".
   * The connection stays in the array (for undo capability) until saved.
   * @param {string} databaseId - The database_id of the connection to remove
   */
  function handleRemoveConnection(databaseId) {
    setHasChanges(true);