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

Code before:
      );
      // Add the updated connection
      return [...filtered, updatedConnection];
    });
  }

  function handleAddConnection(newConnection) {
    setHasChanges(true);
    setConnections((prev) => [...prev, newConnection]);
  }

  return (
    <>
      <div className="p-2">
        <div className="flex flex-col gap-y-[18px] max-w-[500px]">
          <div className="flex items-center gap-x-2">
            <Database
              size={24}
              color="var(--theme-text-primary)"
              weight="bold"
            />
            <label
              htmlFor="name"
              className="text-theme-text-primary text-md font-bold"
            >
              SQL Agent
            </label>
            <label className="border-none relative inline-flex items-center ml-auto cursor-pointer">
              <input
                type="checkbox"
                className="peer sr-only"
                checked={enabled}
                onChange={() => toggleSkill(skill)}
              />
              <div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
              <span className="ml-3 text-sm font-medium"></span>
            </label>
          </div>
          <img
            src={SQLAgentImage}
            alt="SQL Agent"
            className="w-full rounded-md"
          />
          <p className="text-theme-text-secondary text-opacity-60 text-xs font-medium py-1.5">
            Enable your agent to be able to leverage SQL to answer you questions
            by connecting to various SQL database providers.
          </p>
          {enabled && (
            <>
              <input
                name="system::agent_sql_connections"

Review comment (suggestion):
This logic should be simplified.

```
function handleUpdateConnection(updatedConnection) {
  setHasChanges(true);
  setConnections((prev) =>
    prev.map((conn) =>
      conn.database_id === updatedConnection.originalDatabaseId
        ? updatedConnection
        : conn
    )
  );
}
```

This is clearer and doesn't require the extra filtering step.

Code after:
      })
    );
  }

  /**
   * Updates an existing connection by replacing it in the local state.
   * This removes the old connection (by originalDatabaseId) and adds the updated version.
   *
   * Note: The old connection is removed from local state immediately, but the backend
   * handles the actual update logic when saved. See mergeConnections in server/models/systemSettings.js
   *
   * @param {Object} updatedConnection - The updated connection data
   * @param {string} updatedConnection.originalDatabaseId - The original database_id before the update
   * @param {string} updatedConnection.database_id - The new database_id
   * @param {string} updatedConnection.action - Should be "update"
   */
  function handleUpdateConnection(updatedConnection) {
    setHasChanges(true);
    setConnections((prev) =>
      prev.map((conn) =>
        conn.database_id === updatedConnection.originalDatabaseId
          ? updatedConnection
          : conn
      )
    );
  }
  /**
   * Adds a new connection to the local state with action: "add".
   * The backend will validate and deduplicate when saved.
   * @param {Object} newConnection - The new connection data with action: "add"
   */
  function handleAddConnection(newConnection) {
    setHasChanges(true);
    setConnections((prev) => [...prev, newConnection]);
  }

  return (
    <>
      <div className="p-2">
        <div className="flex flex-col gap-y-[18px] max-w-[500px]">
          <div className="flex w-full justify-between items-center">
            <div className="flex items-center gap-x-2">
              <Database
                size={24}
                color="var(--theme-text-primary)"
                weight="bold"
              />
              <label
                htmlFor="name"
                className="text-theme-text-primary text-md font-bold"
              >