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

Code before:
  name: "",
  username: null,
  password: null,
  host: null,
  port: null,
  database: null,
  schema: null,
  encrypt: false,
};

/**
 * Modal component for creating or editing SQL database connections.
 * Supports PostgreSQL, MySQL, and SQL Server with connection validation.
 * Handles duplicate connection name detection and connection string assembly.
 *
 * @param {Object} props - Component props
 * @param {boolean} props.isOpen - Whether the modal is currently open
 * @param {Function} props.closeModal - Callback to close the modal
 * @param {Function} props.onSubmit - Callback when connection is successfully validated and saved
 * @param {Function} props.setHasChanges - Callback to mark that changes have been made
 * @param {Object|null} [props.existingConnection=null] - Existing connection data for edit mode (contains database_id, engine, username, password, host, port, database, scheme, encrypt)
 * @param {Array} [props.connections=[]] - List of all existing connections for duplicate detection
 * @returns {React.ReactPortal|null} - Portal containing the modal UI, or null if not open
 */
export default function SQLConnectionModal({
  isOpen,
  closeModal,
  onSubmit,
  setHasChanges,
  existingConnection = null, // { database_id, engine } for edit mode
  connections = [], // List of all existing connections for duplicate detection
}) {
  const isEditMode = !!existingConnection;
  const [engine, setEngine] = useState(
    isEditMode ? existingConnection.engine : DEFAULT_ENGINE
  );
  const [config, setConfig] = useState(
    isEditMode
      ? {
          name: existingConnection.database_id,
          username: existingConnection.username,
          password: existingConnection.password,
          host: existingConnection.host,
          port: existingConnection.port,
          database: existingConnection.database,
          scheme: existingConnection.scheme,
          encrypt: existingConnection?.encrypt,
        }
      : DEFAULT_CONFIG
  );
  const [isValidating, setIsValidating] = useState(false);

Review comment (bug):
I ran into this UI bug when editing connections:

- If you have 2 connections and press edit icon and close modal, then edit again the modal is no longer filled in with previous info
- I notice that the save changes bar pops up when editing multiple times when the modal is cleared so it may have to do with state management of hasChanges

Code after:
const DEFAULT_CONFIG = {
  name: "",
  username: null,
  password: null,
  host: null,
  port: null,
  database: null,
  schema: null,
  encrypt: false,
};

/**
 * Modal component for creating or editing SQL database connections.
 * Supports PostgreSQL, MySQL, and SQL Server with connection validation.
 * Handles duplicate connection name detection and connection string assembly.
 *
 * @param {Object} props - Component props
 * @param {boolean} props.isOpen - Whether the modal is currently open
 * @param {Function} props.closeModal - Callback to close the modal
 * @param {Function} props.onSubmit - Callback when connection is successfully validated and saved
 * @param {Function} props.setHasChanges - Callback to mark that changes have been made
 * @param {Object|null} [props.existingConnection=null] - Existing connection data for edit mode (contains database_id, engine, username, password, host, port, database, scheme, encrypt)
 * @param {Array} [props.connections=[]] - List of all existing connections for duplicate detection
 * @returns {React.ReactPortal|null} - Portal containing the modal UI, or null if not open
 */
export default function SQLConnectionModal({
  isOpen,
  closeModal,
  onSubmit,
  setHasChanges,
  existingConnection = null, // { database_id, engine } for edit mode
  connections = [], // List of all existing connections for duplicate detection
}) {
  const isEditMode = !!existingConnection;
  const [engine, setEngine] = useState(DEFAULT_ENGINE);
  const [config, setConfig] = useState(DEFAULT_CONFIG);
  const [isValidating, setIsValidating] = useState(false);

  // Sync state when modal opens - useState initial values only run once on mount,
  // so we need this effect to update state when the modal is reopened
  useEffect(() => {
    if (!isOpen) return;

    if (existingConnection) {
      setEngine(existingConnection.engine);
      setConfig({
        name: existingConnection.database_id,
        username: existingConnection.username,
        password: existingConnection.password,
        host: existingConnection.host,
        port: existingConnection.port,