Merge pull request #67 from DataPupOrg/feature/sql-intellisense

Feature/sql intellisense

Author: Krishnachaitanyakc

CLAUDE.md

@@ -32,7 +32,7 @@ src/
     │   ├── DatabaseConnection/      # Connection dialog/form
     │   ├── DatabaseExplorer/        # Database tree view
     │   ├── Layout/                  # Layout components
-    │   ├── QueryEditor/             # SQL editor component
+    │   ├── QueryWorkspace/          # Query workspace with SQL editor
     │   ├── QueryResults/            # Results grid
     │   └── ThemeSwitcher/           # Theme selection dropdown
     └── lib/
@@ -57,7 +57,7 @@ Currently supports:
 1. **No Connection**: Shows MainPanel with connection options and saved connections
 2. **Active Connection**: Shows ActiveConnectionLayout with:
    - DatabaseExplorer (left panel, resizable)
-   - QueryWorkspace (right panel) containing QueryEditor and QueryResults
+   - QueryWorkspace (right panel) containing SqlEditor and QueryResults
 
 ## Development Guidelines
 
@@ -114,7 +114,7 @@ npm run typecheck  # if available
 - Implement actual database connection logic
 - Add database-specific drivers (pg, mysql2, etc.)
 - Implement tree view in DatabaseExplorer
-- Add query execution in QueryEditor
+- Query execution is implemented in QueryWorkspace with SQL intellisense
 - Implement results display in QueryResults
 
 ## Important Notes

README.md

@@ -86,7 +86,6 @@ data-pup/
 │       │   ├── ActiveConnectionLayout/ # Main connected view
 │       │   ├── ConnectionCard/     # Connection display cards
 │       │   ├── DatabaseExplorer/   # Database tree view
-│       │   ├── QueryEditor/        # SQL editor component
 │       │   ├── QueryHistory/       # Query history panel
 │       │   ├── QueryTabs/          # Tab management
 │       │   ├── QueryWorkspace/     # Query workspace container

src/main/database/base.ts

@@ -289,14 +289,17 @@ export abstract class BaseDatabaseManager implements DatabaseManagerInterface {
     database?: string
   ): Promise<{ success: boolean; schema?: TableSchema; message: string }>
 
-  getConnectionInfo(connectionId: string): { host: string; port: number; database: string } | null {
+  getConnectionInfo(
+    connectionId: string
+  ): { host: string; port: number; database: string; type: string } | null {
     const connection = this.connections.get(connectionId)
     if (!connection) return null
 
     return {
       host: connection.config.host,
       port: connection.config.port,
-      database: connection.config.database
+      database: connection.config.database,
+      type: connection.config.type
     }
   }
 

src/main/database/clickhouse.ts

@@ -456,13 +456,16 @@ class ClickHouseManager extends BaseDatabaseManager {
     return connection?.isConnected || false
   }
 
-  getConnectionInfo(connectionId: string): { host: string; port: number; database: string } | null {
+  getConnectionInfo(
+    connectionId: string
+  ): { host: string; port: number; database: string; type: string } | null {
     const connection = this.connections.get(connectionId)
     if (connection) {
       return {
         host: connection.config.host,
         port: connection.config.port,
-        database: connection.config.database
+        database: connection.config.database,
+        type: connection.config.type
       }
     }
     return null

src/main/database/interface.ts

@@ -184,7 +184,9 @@ export interface DatabaseManagerInterface {
   ): Promise<{ success: boolean; schema?: TableSchema; message: string }>
 
   // Connection info
-  getConnectionInfo(connectionId: string): { host: string; port: number; database: string } | null
+  getConnectionInfo(
+    connectionId: string
+  ): { host: string; port: number; database: string; type: string } | null
   getAllConnections(): string[]
   getCapabilities(): DatabaseCapabilities
 

src/main/index.ts

@@ -381,6 +381,16 @@ ipcMain.handle('db:getAllConnections', async () => {
   }
 })
 
+ipcMain.handle('db:getConnectionInfo', async (_, connectionId: string) => {
+  try {
+    const info = databaseManager.getConnectionInfo(connectionId)
+    return { success: true, info }
+  } catch (error) {
+    console.error('Error getting connection info:', error)
+    return { success: false, info: null }
+  }
+})
+
 // IPC handler for AI processing
 ipcMain.handle('ai:process', async (_, request) => {
   try {

src/preload/index.ts

@@ -48,7 +48,9 @@ const api = {
     executeBulkOperations: (connectionId: string, operations: any[]) =>
       ipcRenderer.invoke('db:executeBulkOperations', connectionId, operations),
     getPrimaryKeys: (connectionId: string, table: string, database?: string) =>
-      ipcRenderer.invoke('db:getPrimaryKeys', connectionId, table, database)
+      ipcRenderer.invoke('db:getPrimaryKeys', connectionId, table, database),
+    getConnectionInfo: (connectionId: string) =>
+      ipcRenderer.invoke('db:getConnectionInfo', connectionId)
   },
   connections: {
     getAll: () => ipcRenderer.invoke('connections:getAll'),

src/renderer/components/DatabaseExplorer/DatabaseExplorer.tsx

@@ -2,12 +2,7 @@ import { useState, useEffect } from 'react'
 import { Box, Flex, ScrollArea, Text, Button } from '@radix-ui/themes'
 import { Badge, Skeleton } from '../ui'
 import './DatabaseExplorer.css'
-import { 
-  ReloadIcon, 
-  ChevronRightIcon, 
-  ChevronDownIcon,
-  TableIcon
-} from '@radix-ui/react-icons'
+import { ReloadIcon, ChevronRightIcon, ChevronDownIcon, TableIcon } from '@radix-ui/react-icons'
 
 interface DatabaseExplorerProps {
   connectionId: string
@@ -272,7 +267,7 @@ export function DatabaseExplorer({
                   className={`database-item ${db.expanded ? 'expanded' : ''}`}
                   p="2"
                 >
-                  <Box 
+                  <Box
                     className="expand-icon"
                     onClick={() => toggleDatabase(db.name)}
                     style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
@@ -347,7 +342,7 @@ export function DatabaseExplorer({
                           style={{ cursor: obj.type === 'table' ? 'pointer' : 'default' }}
                         >
                           {obj.type === 'table' && (
-                            <Box 
+                            <Box
                               className="expand-icon"
                               onClick={() => toggleTable(db.name, obj.name)}
                               style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}

src/renderer/components/Layout/MainPanel.tsx

@@ -1,7 +1,6 @@
-import { Box, Flex, Text, Button, ScrollArea, Heading } from '@radix-ui/themes'
-import { Card, Logo } from '../ui'
+import { Box, Flex, Text, Button, Heading } from '@radix-ui/themes'
+import { Logo } from '../ui'
 import { DatabaseConnection } from '../DatabaseConnection/DatabaseConnection'
-import { QueryEditor } from '../QueryEditor/QueryEditor'
 import { ThemeSwitcher } from '../ThemeSwitcher'
 import { ActiveConnectionLayout } from '../ActiveConnectionLayout'
 import { ConnectionCard, ConnectionCardSkeleton } from '../ConnectionCard'