@libredb/studio 0.9.7 → 0.9.12

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

@@ -1,349 +0,0 @@
-'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

@@ -1,169 +0,0 @@
-'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

@@ -1,15 +0,0 @@
-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

@@ -1,109 +0,0 @@
-'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

@@ -1,20 +0,0 @@
-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
-}