@libredb/studio 0.9.7

package/src/hooks/use-connection-form.ts

@@ -0,0 +1,349 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { DatabaseConnection, DatabaseType, ConnectionEnvironment, ENVIRONMENT_COLORS, SSLMode, SSLConfig, SSHTunnelConfig } from '@/lib/types';
+import { getDBConfig } from '@/lib/db-ui-config';
+import { parseConnectionString } from '@/lib/connection-string-parser';
+
+interface UseConnectionFormProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConnect: (conn: DatabaseConnection) => void;
+  editConnection?: DatabaseConnection | null;
+  /** Optional API adapter: when provided, bypasses the built-in /api/db/test-connection fetch. */
+  onTestConnection?: (connection: DatabaseConnection) => Promise<{ success: boolean; latency?: number; error?: string }>;
+}
+
+export function useConnectionForm({ isOpen, onConnect, editConnection, onTestConnection }: UseConnectionFormProps) {
+  const [type, setType] = useState<DatabaseType>('postgres');
+  const [name, setName] = useState('');
+  const [host, setHost] = useState('localhost');
+  const [port, setPort] = useState('5432');
+  const [user, setUser] = useState('');
+  const [password, setPassword] = useState('');
+  const [database, setDatabase] = useState('');
+  const [isTesting, setIsTesting] = useState(false);
+  const [connectionString, setConnectionString] = useState('');
+  const [mongoConnectionMode, setMongoConnectionMode] = useState<'host' | 'connectionString'>('host');
+  const [environment, setEnvironment] = useState<ConnectionEnvironment>('local');
+  const [testResult, setTestResult] = useState<{ success: boolean; message: string; latency?: number } | null>(null);
+  const [pasteInput, setPasteInput] = useState('');
+  const [showPasteInput, setShowPasteInput] = useState(false);
+
+  // SSL/TLS
+  const [showSSL, setShowSSL] = useState(false);
+  const [sslMode, setSSLMode] = useState<SSLMode>('disable');
+  const [caCert, setCaCert] = useState('');
+  const [clientCert, setClientCert] = useState('');
+  const [clientKey, setClientKey] = useState('');
+
+  // Advanced (Oracle/MSSQL)
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [serviceName, setServiceName] = useState('');
+  const [instanceName, setInstanceName] = useState('');
+
+  // SSH Tunnel
+  const [showSSH, setShowSSH] = useState(false);
+  const [sshEnabled, setSSHEnabled] = useState(false);
+  const [sshHost, setSSHHost] = useState('');
+  const [sshPort, setSSHPort] = useState('22');
+  const [sshUsername, setSSHUsername] = useState('');
+  const [sshAuthMethod, setSSHAuthMethod] = useState<'password' | 'privateKey'>('password');
+  const [sshPassword, setSSHPassword] = useState('');
+  const [sshPrivateKey, setSSHPrivateKey] = useState('');
+  const [sshPassphrase, setSSHPassphrase] = useState('');
+
+  const isEditMode = !!editConnection;
+
+  // Populate form when editing
+  useEffect(() => {
+    if (editConnection) {
+      setType(editConnection.type);
+      setName(editConnection.name);
+      setHost(editConnection.host || 'localhost');
+      setPort(editConnection.port?.toString() || getDBConfig(editConnection.type).defaultPort);
+      setUser(editConnection.user || '');
+      setPassword(editConnection.password || '');
+      setDatabase(editConnection.database || '');
+      setConnectionString(editConnection.connectionString || '');
+      setEnvironment(editConnection.environment || 'local');
+      if (editConnection.connectionString) {
+        setMongoConnectionMode('connectionString');
+      }
+      // Advanced fields
+      if (editConnection.serviceName) {
+        setServiceName(editConnection.serviceName);
+        setShowAdvanced(true);
+      }
+      if (editConnection.instanceName) {
+        setInstanceName(editConnection.instanceName);
+        setShowAdvanced(true);
+      }
+      // SSL
+      if (editConnection.ssl) {
+        setSSLMode(editConnection.ssl.mode);
+        setCaCert(editConnection.ssl.caCert || '');
+        setClientCert(editConnection.ssl.clientCert || '');
+        setClientKey(editConnection.ssl.clientKey || '');
+        if (editConnection.ssl.mode !== 'disable') setShowSSL(true);
+      }
+      // SSH
+      if (editConnection.sshTunnel?.enabled) {
+        setSSHEnabled(true);
+        setShowSSH(true);
+        setSSHHost(editConnection.sshTunnel.host);
+        setSSHPort(editConnection.sshTunnel.port.toString());
+        setSSHUsername(editConnection.sshTunnel.username);
+        setSSHAuthMethod(editConnection.sshTunnel.authMethod);
+        setSSHPassword(editConnection.sshTunnel.password || '');
+        setSSHPrivateKey(editConnection.sshTunnel.privateKey || '');
+        setSSHPassphrase(editConnection.sshTunnel.passphrase || '');
+      }
+    }
+  }, [editConnection]);
+
+  // Reset form when modal closes
+  useEffect(() => {
+    if (!isOpen) {
+      setTestResult(null);
+      setShowPasteInput(false);
+      setPasteInput('');
+      if (!editConnection) {
+        setName('');
+        setUser('');
+        setPassword('');
+        setDatabase('');
+        setConnectionString('');
+        setMongoConnectionMode('host');
+        setType('postgres');
+        setHost('localhost');
+        setPort('5432');
+      }
+    }
+  }, [isOpen, editConnection]);
+
+  const buildConnection = useCallback((): DatabaseConnection => {
+    const sslConfig: SSLConfig | undefined = sslMode !== 'disable' ? {
+      mode: sslMode,
+      ...(caCert ? { caCert } : {}),
+      ...(clientCert ? { clientCert } : {}),
+      ...(clientKey ? { clientKey } : {}),
+    } : undefined;
+
+    const sshConfig: SSHTunnelConfig | undefined = sshEnabled ? {
+      enabled: true,
+      host: sshHost,
+      port: parseInt(sshPort) || 22,
+      username: sshUsername,
+      authMethod: sshAuthMethod,
+      ...(sshAuthMethod === 'password' ? { password: sshPassword } : {}),
+      ...(sshAuthMethod === 'privateKey' ? { privateKey: sshPrivateKey } : {}),
+      ...(sshPassphrase ? { passphrase: sshPassphrase } : {}),
+    } : undefined;
+
+    return {
+      id: editConnection?.id || Math.random().toString(36).substr(2, 9),
+      name: name || `${type}-connection`,
+      type,
+      host,
+      port: parseInt(port),
+      user,
+      password,
+      database,
+      createdAt: editConnection?.createdAt || new Date(),
+      environment,
+      color: ENVIRONMENT_COLORS[environment],
+      ...(sslConfig ? { ssl: sslConfig } : {}),
+      ...(sshConfig ? { sshTunnel: sshConfig } : {}),
+      ...(getDBConfig(type).showConnectionStringToggle && mongoConnectionMode === 'connectionString' ? {
+        connectionString,
+        host: undefined,
+        port: undefined,
+        user: undefined,
+        password: undefined,
+      } : {}),
+      ...(type === 'oracle' && serviceName ? { serviceName } : {}),
+      ...(type === 'mssql' && instanceName ? { instanceName } : {}),
+    };
+  }, [
+    sslMode, caCert, clientCert, clientKey,
+    sshEnabled, sshHost, sshPort, sshUsername, sshAuthMethod, sshPassword, sshPrivateKey, sshPassphrase,
+    editConnection, name, type, host, port, user, password, database, environment,
+    mongoConnectionMode, connectionString, serviceName, instanceName,
+  ]);
+
+  const handleTestConnection = useCallback(async () => {
+    setIsTesting(true);
+    setTestResult(null);
+
+    try {
+      const conn = buildConnection();
+
+      if (onTestConnection) {
+        // Platform adapter: use callback instead of fetch
+        const result = await onTestConnection(conn);
+        setTestResult({
+          success: result.success,
+          message: result.success
+            ? `Connected successfully${result.latency ? ` (${result.latency}ms)` : ''}`
+            : result.error || 'Connection failed',
+          latency: result.latency,
+        });
+      } else {
+        // Default: existing fetch behavior
+        const response = await fetch('/api/db/test-connection', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(conn),
+        });
+
+        const result = await response.json();
+        setTestResult({
+          success: result.success,
+          message: result.success
+            ? `Connected successfully${result.latency ? ` (${result.latency}ms)` : ''}`
+            : result.error || 'Connection failed',
+          latency: result.latency,
+        });
+      }
+    } catch {
+      setTestResult({ success: false, message: 'Network error - could not reach server' });
+    } finally {
+      setIsTesting(false);
+    }
+  }, [buildConnection, onTestConnection]);
+
+  const handleConnect = useCallback(async () => {
+    setIsTesting(true);
+    setTestResult(null);
+
+    try {
+      const conn = buildConnection();
+
+      let result: { success: boolean; error?: string };
+      if (onTestConnection) {
+        // Platform adapter: use callback instead of fetch
+        result = await onTestConnection(conn);
+      } else {
+        // Default: existing fetch behavior
+        const response = await fetch('/api/db/test-connection', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(conn),
+        });
+        result = await response.json();
+      }
+
+      if (result.success) {
+        onConnect(conn);
+        // Reset form
+        setName('');
+        setUser('');
+        setPassword('');
+        setDatabase('');
+        setConnectionString('');
+        setMongoConnectionMode('host');
+        setTestResult(null);
+      } else {
+        setTestResult({ success: false, message: result.error || 'Connection failed' });
+      }
+    } catch {
+      setTestResult({ success: false, message: 'Network error - could not reach server' });
+    } finally {
+      setIsTesting(false);
+    }
+  }, [buildConnection, type, onConnect, onTestConnection]);
+
+  const handlePasteConnectionString = useCallback(() => {
+    const trimmed = pasteInput.trim();
+    if (!trimmed) return;
+
+    const parsed = parseConnectionString(trimmed);
+    if (!parsed) {
+      setTestResult({ success: false, message: 'Could not parse connection string. Supported formats: postgres://, mysql://, mongodb://, redis://, oracle://, mssql://' });
+      return;
+    }
+
+    // Auto-switch DB type
+    setType(parsed.type);
+    if (parsed.host) setHost(parsed.host);
+    if (parsed.port) setPort(parsed.port);
+    if (parsed.user) setUser(parsed.user);
+    if (parsed.password) setPassword(parsed.password);
+    if (parsed.database) setDatabase(parsed.database);
+
+    // For MongoDB, also set connection string mode
+    if (parsed.type === 'mongodb' && parsed.connectionString) {
+      setConnectionString(parsed.connectionString);
+      setMongoConnectionMode('connectionString');
+    }
+
+    // Auto-fill name if empty
+    if (!name) {
+      const dbName = parsed.database || parsed.host || parsed.type;
+      setName(`${dbName}`);
+    }
+
+    setShowPasteInput(false);
+    setPasteInput('');
+    setTestResult({ success: true, message: 'Connection string parsed successfully. Review the fields and connect.' });
+  }, [pasteInput, name]);
+
+  const selectableTypes: DatabaseType[] = ['postgres', 'mysql', 'oracle', 'mssql', 'mongodb', 'redis'];
+  const dbTypes = selectableTypes.map(t => {
+    const cfg = getDBConfig(t);
+    return { value: t, label: cfg.label, icon: cfg.icon, color: cfg.color };
+  });
+
+  return {
+    // Connection fields
+    type, setType,
+    name, setName,
+    host, setHost,
+    port, setPort,
+    user, setUser,
+    password, setPassword,
+    database, setDatabase,
+    connectionString, setConnectionString,
+    mongoConnectionMode, setMongoConnectionMode,
+    environment, setEnvironment,
+
+    // UI state
+    isTesting,
+    testResult, setTestResult,
+    pasteInput, setPasteInput,
+    showPasteInput, setShowPasteInput,
+    isEditMode,
+
+    // SSL/TLS
+    showSSL, setShowSSL,
+    sslMode, setSSLMode,
+    caCert, setCaCert,
+    clientCert, setClientCert,
+    clientKey, setClientKey,
+
+    // Advanced (Oracle/MSSQL)
+    showAdvanced, setShowAdvanced,
+    serviceName, setServiceName,
+    instanceName, setInstanceName,
+
+    // SSH Tunnel
+    showSSH, setShowSSH,
+    sshEnabled, setSSHEnabled,
+    sshHost, setSSHHost,
+    sshPort, setSSHPort,
+    sshUsername, setSSHUsername,
+    sshAuthMethod, setSSHAuthMethod,
+    sshPassword, setSSHPassword,
+    sshPrivateKey, setSSHPrivateKey,
+    sshPassphrase, setSSHPassphrase,
+
+    // Handlers
+    handleTestConnection,
+    handleConnect,
+    handlePasteConnectionString,
+
+    // Derived data
+    dbTypes,
+  };
+}

package/src/hooks/use-connection-manager.ts

@@ -0,0 +1,169 @@
+'use client';
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import type { DatabaseConnection, TableSchema } from '@/lib/types';
+import { useToast } from '@/hooks/use-toast';
+import { storage } from '@/lib/storage';
+import { logger } from '@/lib/logger';
+import { buildConnectionPayload } from './use-connection-payload';
+
+export function useConnectionManager(storageReady = false) {
+  const [connections, setConnections] = useState<DatabaseConnection[]>([]);
+  const [activeConnection, setActiveConnection] = useState<DatabaseConnection | null>(null);
+  const [schema, setSchema] = useState<TableSchema[]>([]);
+  const [isLoadingSchema, setIsLoadingSchema] = useState(false);
+  const [connectionPulse, setConnectionPulse] = useState<'healthy' | 'degraded' | 'error' | null>(null);
+
+  const { toast } = useToast();
+
+  // Fetch schema for a connection
+  const fetchSchema = useCallback(async (conn: DatabaseConnection) => {
+    setIsLoadingSchema(true);
+
+    try {
+      const payload = conn.managed && conn.seedId
+        ? { connectionId: `seed:${conn.seedId}` }
+        : conn;  // bare conn for backward compat with schema route
+      const response = await fetch('/api/db/schema', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        const errorMessage = errorData.error || 'Failed to fetch schema';
+        throw new Error(errorMessage);
+      }
+
+      const data = await response.json();
+      setSchema(data);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      toast({ title: "Schema Error", description: errorMessage, variant: "destructive" });
+    } finally {
+      setIsLoadingSchema(false);
+    }
+  }, [toast]);
+
+  // Memoized derived values
+  const tableNames = useMemo(() => schema.map(s => s.name), [schema]);
+  const schemaContext = useMemo(() => JSON.stringify(schema), [schema]);
+
+  // Initialize connections once storage sync is ready
+  useEffect(() => {
+    if (!storageReady) return;
+
+    const initializeConnections = async () => {
+      const loadedConnections = storage.getConnections();
+
+      // Fetch managed (seed) connections
+      let managedMerged = false;
+      try {
+        const managedRes = await fetch('/api/connections/managed');
+        if (managedRes.ok) {
+          const { connections: managedConns } = await managedRes.json();
+          if (managedConns?.length > 0) {
+            const userConns = storage.getConnections();
+            const merged: DatabaseConnection[] = [];
+
+            // Add managed:true connections (always from server)
+            for (const mc of managedConns) {
+              if (mc.managed) {
+                merged.push({ ...mc, createdAt: new Date(mc.createdAt) });
+              } else {
+                // managed:false — check if already copied (by seedId)
+                const existingCopy = userConns.find((uc: DatabaseConnection) => uc.seedId === mc.seedId);
+                if (existingCopy) {
+                  merged.push(existingCopy);
+                } else {
+                  const userCopy: DatabaseConnection = { ...mc, createdAt: new Date(mc.createdAt), managed: false };
+                  storage.saveConnection(userCopy);
+                  merged.push(userCopy);
+                }
+              }
+            }
+
+            // Add remaining user connections (not from seeds)
+            const seedIds = new Set(managedConns.map((mc: { seedId: string }) => mc.seedId));
+            const mergedIds = new Set(merged.map((c) => c.id));
+            for (const uc of userConns) {
+              // Skip if this user connection came from a seed (by seedId or id match)
+              if (uc.seedId && seedIds.has(uc.seedId)) continue;
+              if (mergedIds.has(uc.id)) continue;
+              merged.push(uc);
+            }
+
+            setConnections(merged);
+            managedMerged = true;
+
+            if (merged.length > 0) {
+              const savedId = storage.getActiveConnectionId();
+              const saved = savedId ? merged.find((c: DatabaseConnection) => c.id === savedId) : null;
+              setActiveConnection(saved ?? merged[0]);
+            }
+          }
+        }
+      } catch {
+        // Managed connections are optional — don't break app
+      }
+
+      if (!managedMerged) {
+        setConnections(loadedConnections);
+        if (loadedConnections.length > 0) {
+          const savedId = storage.getActiveConnectionId();
+          const saved = savedId ? loadedConnections.find((c: DatabaseConnection) => c.id === savedId) : null;
+          setActiveConnection(saved ?? loadedConnections[0]);
+        }
+      }
+    };
+
+    initializeConnections().catch((err) => {
+      logger.warn('Connection initialization failed', { route: 'use-connection-manager', error: err instanceof Error ? err.message : String(err) });
+    });
+  }, [storageReady]);  
+
+  // Persist active connection ID
+  useEffect(() => {
+    if (activeConnection) {
+      storage.setActiveConnectionId(activeConnection.id);
+    }
+  }, [activeConnection]);
+
+  // Connection pulse — quick health check every 60s
+  useEffect(() => {
+    if (!activeConnection) {
+      setConnectionPulse(null);
+      return;
+    }
+    const checkHealth = async () => {
+      try {
+        const res = await fetch('/api/db/health', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(buildConnectionPayload(activeConnection)),
+        });
+        setConnectionPulse(res.ok ? 'healthy' : 'degraded');
+      } catch {
+        setConnectionPulse('error');
+      }
+    };
+    checkHealth().catch(() => {});
+    const interval = setInterval(checkHealth, 60000);
+    return () => clearInterval(interval);
+  }, [activeConnection]);
+
+  return {
+    connections,
+    setConnections,
+    activeConnection,
+    setActiveConnection,
+    schema,
+    setSchema,
+    isLoadingSchema,
+    connectionPulse,
+    fetchSchema,
+    tableNames,
+    schemaContext,
+  };
+}

package/src/hooks/use-connection-payload.ts

@@ -0,0 +1,15 @@
+import type { DatabaseConnection } from '@/lib/types';
+
+/**
+ * Builds the connection portion of an API request body.
+ * For managed connections: sends { connectionId: "seed:X" } (no credentials).
+ * For user connections: sends { connection: conn } (full object).
+ */
+export function buildConnectionPayload(
+  conn: DatabaseConnection,
+): { connectionId: string } | { connection: DatabaseConnection } {
+  if (conn.managed && conn.seedId) {
+    return { connectionId: `seed:${conn.seedId}` };
+  }
+  return { connection: conn };
+}

package/src/hooks/use-inline-editing.ts

@@ -0,0 +1,109 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import type { DatabaseConnection, QueryTab } from '@/lib/types';
+import type { CellChange } from '@/components/ResultsGrid';
+import { useToast } from '@/hooks/use-toast';
+
+interface UseInlineEditingParams {
+  activeConnection: DatabaseConnection | null;
+  currentTab: QueryTab;
+  executeQuery: (sql: string) => void;
+}
+
+export function useInlineEditing({
+  activeConnection,
+  currentTab,
+  executeQuery,
+}: UseInlineEditingParams) {
+  const [editingEnabled, setEditingEnabled] = useState(false);
+  const [pendingChanges, setPendingChanges] = useState<CellChange[]>([]);
+  const { toast } = useToast();
+
+  const handleCellChange = useCallback((change: CellChange) => {
+    setPendingChanges(prev => {
+      // Replace existing change for same cell, or add new
+      const existing = prev.findIndex(c => c.rowIndex === change.rowIndex && c.columnId === change.columnId);
+      if (existing >= 0) {
+        // If reverting to original value, remove the change
+        if (String(change.originalValue ?? '') === change.newValue) {
+          return prev.filter((_, i) => i !== existing);
+        }
+        const updated = [...prev];
+        updated[existing] = change;
+        return updated;
+      }
+      // Don't add if no actual change
+      if (String(change.originalValue ?? '') === change.newValue) return prev;
+      return [...prev, change];
+    });
+  }, []);
+
+  const handleApplyChanges = useCallback(async () => {
+    if (!activeConnection || !currentTab.result || pendingChanges.length === 0) return;
+
+    // Detect primary key column
+    const pkColumn = currentTab.result.fields.find(f =>
+      f.toLowerCase() === 'id' || f.toLowerCase().endsWith('_id')
+    );
+
+    if (!pkColumn) {
+      toast({
+        title: "Cannot Apply Changes",
+        description: "No primary key column detected (id or *_id). Edit the SQL manually.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // Group changes by row
+    const changesByRow = new Map<number, CellChange[]>();
+    for (const change of pendingChanges) {
+      const existing = changesByRow.get(change.rowIndex) || [];
+      existing.push(change);
+      changesByRow.set(change.rowIndex, existing);
+    }
+
+    // Detect table name from current tab or query
+    const tableName = currentTab.name.replace(/^Query[:  ]*/, '') ||
+      currentTab.query.match(/FROM\s+(\S+)/i)?.[1] || 'table_name';
+
+    // Generate UPDATE statements
+    const statements: string[] = [];
+    for (const [rowIndex, changes] of changesByRow) {
+      const row = currentTab.result.rows[rowIndex];
+      const pkValue = row[pkColumn];
+      const setClauses = changes.map(c => {
+        const val = c.newValue === '' || c.newValue.toUpperCase() === 'NULL'
+          ? 'NULL'
+          : `'${c.newValue.replace(/'/g, "''")}'`;
+        return `${c.columnId} = ${val}`;
+      });
+      const pkVal = typeof pkValue === 'number' ? pkValue : `'${pkValue}'`;
+      statements.push(`UPDATE ${tableName} SET ${setClauses.join(', ')} WHERE ${pkColumn} = ${pkVal};`);
+    }
+
+    const sql = statements.join('\n');
+    // Execute the UPDATE(s)
+    executeQuery(sql);
+    setPendingChanges([]);
+    setEditingEnabled(false);
+    toast({
+      title: "Changes Applied",
+      description: `${statements.length} UPDATE statement(s) executed.`,
+    });
+  }, [activeConnection, currentTab, pendingChanges, executeQuery, toast]);
+
+  const handleDiscardChanges = useCallback(() => {
+    setPendingChanges([]);
+  }, []);
+
+  return {
+    editingEnabled,
+    setEditingEnabled,
+    pendingChanges,
+    handleCellChange,
+    handleApplyChanges,
+    handleDiscardChanges,
+  };
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,20 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean>(false)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(mql.matches)
+    }
+    // Set initial value immediately
+    setIsMobile(mql.matches)
+    mql.addEventListener("change", onChange)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return isMobile
+}