feat(db): add mysql adapter

Author: TeaCoder52

apps/desktop/main/ipc/handlers/metadata.handler.ts

@@ -18,6 +18,12 @@ export function registerMetadataHandlers() {
 		}
 	})
 
+	ipcMain.handle(IPC_CHANNELS.DB_GET_ADAPTER_TYPE, async () => {
+		if (!manager.isConnected()) throw new Error('DB not connected')
+
+		return manager.getAdapterType()
+	})
+
 	ipcMain.handle(IPC_CHANNELS.DB_LOAD_DATABASES, async () => {
 		if (!manager.isConnected()) throw new Error('DB not connected')
 

apps/desktop/main/services/db/adapter.registry.ts

@@ -0,0 +1,17 @@
+import type { DbAdapterPort } from '@datary/core'
+import { type DBConnectionConfig, MysqlAdapter, PostgresAdapter } from '@datary/db'
+
+type AdapterConstructor = new (config: DBConnectionConfig) => DbAdapterPort
+
+const adapters: Record<string, AdapterConstructor> = {
+	postgresql: PostgresAdapter,
+	mysql: MysqlAdapter
+}
+
+export function getAdapter(config: DBConnectionConfig): DbAdapterPort {
+	const AdapterClass = adapters[config.connectionType]
+	if (!AdapterClass) {
+		throw new Error(`Unsupported database type: ${config.connectionType}`)
+	}
+	return new AdapterClass(config)
+}

apps/desktop/main/services/db/connection.manager.ts

@@ -1,21 +1,49 @@
-import { PostgresAdapter, PostgresMetadataRepository } from '@datary/db'
-import type { DBConnectionConfig } from '@datary/db'
+import type { DbAdapterPort } from '@datary/core'
+import {
+	type DBConnectionConfig,
+	MysqlAdapter,
+	MysqlMetadataRepository,
+	PostgresAdapter,
+	PostgresMetadataRepository
+} from '@datary/db'
 
 import { logger } from '../../utils/logger'
 
 export class ConnectionManager {
-	private adapter: PostgresAdapter | null = null
+	private adapter: DbAdapterPort | null = null
+	private adapterType: string | null = null
 
-	private metadataRepo: PostgresMetadataRepository | null = null
+	private metadataRepo: any = null
 
 	public async connect(config: DBConnectionConfig) {
-		this.adapter = new PostgresAdapter(config)
-
-		await this.adapter.connect()
+		switch (config.connectionType) {
+			case 'postgresql':
+				this.adapter = new PostgresAdapter(config)
+				await this.adapter.connect()
+				// @ts-ignore
+				this.metadataRepo = new PostgresMetadataRepository(this.adapter['client']!)
+				this.adapterType = 'postgres'
+				break
+
+			case 'mysql':
+				this.adapter = new MysqlAdapter(config)
+				await this.adapter.connect()
+				// @ts-ignore
+				this.metadataRepo = new MysqlMetadataRepository(this.adapter['client']!)
+				this.adapterType = 'mysql'
+				break
+
+			default:
+				throw new Error(`Unsupported DB type: ${config.connectionType}`)
+		}
+
+		logger.info(`DB connected (${config.connectionType})`)
+	}
 
-		this.metadataRepo = new PostgresMetadataRepository(this.adapter['client']!)
+	public getAdapterType() {
+		if (!this.adapterType) throw new Error('DB not connected')
 
-		logger.info('DB connected')
+		return this.adapterType
 	}
 
 	public isConnected() {
@@ -27,6 +55,7 @@ export class ConnectionManager {
 
 		this.adapter = null
 		this.metadataRepo = null
+		this.adapterType = null
 
 		logger.info('DB disconnected')
 	}

apps/desktop/package.json

@@ -23,6 +23,7 @@
 		"dist": "electron-builder"
 	},
 	"dependencies": {
+		"@datary/core": "workspace:*",
 		"@datary/db": "workspace:*",
 		"@datary/ipc": "workspace:*",
 		"electron-store": "^11.0.2"

apps/desktop/preload/expose/db.api.ts

@@ -5,6 +5,8 @@ import { ipcRenderer } from 'electron'
 export const dbApi = {
 	connect: (config: DBConnectionConfig) => ipcRenderer.invoke(IPC_CHANNELS.DB_CONNECT, config),
 
+	getAdapterType: () => ipcRenderer.invoke(IPC_CHANNELS.DB_GET_ADAPTER_TYPE),
+
 	loadDatabases: () => ipcRenderer.invoke(IPC_CHANNELS.DB_LOAD_DATABASES),
 
 	loadSchemas: (database: string) => ipcRenderer.invoke(IPC_CHANNELS.DB_LOAD_SCHEMAS, database),

apps/desktop/renderer/src/app/providers/datary-provider.tsx

@@ -1,6 +1,8 @@
 import { Loader2 } from 'lucide-react'
 import { type ReactNode, useEffect, useState } from 'react'
 
+import { Button } from '@/shared/ui/button'
+
 interface DataryProviderProps {
 	children: ReactNode
 }
@@ -43,12 +45,7 @@ export function DataryProvider({ children }: DataryProviderProps) {
 				<p className="text-muted-foreground max-w-xs text-center">
 					The application failed to initialize correctly. Please try reloading the app.
 				</p>
-				<button
-					className="bg-primary hover:bg-primary/90 rounded px-4 py-2 text-white"
-					onClick={handleReload}
-				>
-					Reload
-				</button>
+				<Button onClick={handleReload}>Reload</Button>
 			</div>
 		)
 	}

apps/desktop/renderer/src/main.tsx

@@ -18,10 +18,14 @@ declare global {
 			version: string
 			db: {
 				connect: Function
+				getAdapterType: Function
 				loadDatabases(): Promise<DatabaseMetadataContract[]>
 				loadSchemas(database: string): Promise<any[]>
-				loadTables(database: string, schema: string): Promise<TableMetadataContract[]>
-				loadViews(database: string, schema: string): Promise<TableMetadataContract[]>
+				loadTables(
+					database: string,
+					schema: string | null
+				): Promise<TableMetadataContract[]>
+				loadViews(database: string, schema: string | null): Promise<TableMetadataContract[]>
 				loadColumns(
 					database: string,
 					schema: string,

apps/desktop/renderer/src/widgets/schema-tree/components/schema-tree.tsx

@@ -16,7 +16,7 @@ export function SchemaTree({ database, selectedTable, onSelectTable }: SchemaTre
 	if (error) return <div className="text-destructive px-4 py-2 text-sm">{error}</div>
 
 	if (!tree.length)
-		return <div className="text-muted-foreground px-4 py-2 text-sm">No schemas found</div>
+		return <div className="text-muted-foreground px-4 py-2 text-sm">No data found</div>
 
 	return (
 		<div className="custom-scrollbar max-h-full space-y-0.5 overflow-auto py-2">

apps/desktop/renderer/src/widgets/schema-tree/hooks/useSchemaTree.ts

@@ -12,12 +12,51 @@ export function useSchemaTree(database?: string) {
 		if (!database) return
 
 		let cancelled = false
+
 		setLoading(true)
 		setError(null)
 
 		const loadTree = async () => {
 			try {
+				const adapter = await window.datary.db.getAdapterType()
+
+				if (adapter === 'mysql') {
+					const [tables, views] = await Promise.all([
+						window.datary.db.loadTables(database, null).catch(() => []),
+						window.datary.db.loadViews(database, null).catch(() => [])
+					])
+
+					const folders: TreeNode[] = []
+
+					if (tables.length) {
+						folders.push({
+							type: 'folder',
+							name: 'Tables',
+							children: tables.map(t => ({
+								type: 'table',
+								name: t.name
+							}))
+						})
+					}
+
+					if (views.length) {
+						folders.push({
+							type: 'folder',
+							name: 'Views',
+							children: views.map(v => ({
+								type: 'view',
+								name: v.name
+							}))
+						})
+					}
+
+					if (!cancelled) setTree(folders)
+
+					return
+				}
+
 				const schemas = await window.datary.db.loadSchemas(database)
+
 				if (!schemas.length) {
 					toast.error(`No schemas found for database ${database}`)
 					return
@@ -26,47 +65,52 @@ export function useSchemaTree(database?: string) {
 				const treeData: TreeNode[] = []
 
 				for (const schema of schemas) {
-					const schemaName = typeof schema === 'string' ? schema : schema.name
+					const schemaName = schema.name
 
-					const tables = await window.datary.db
-						.loadTables(database, schemaName)
-						.catch(() => [])
-					const views = await window.datary.db
-						.loadViews(database, schemaName)
-						.catch(() => [])
+					const [tables, views] = await Promise.all([
+						window.datary.db.loadTables(database, schemaName).catch(() => []),
+						window.datary.db.loadViews(database, schemaName).catch(() => [])
+					])
 
-					const folders: TreeNode[] = []
+					const children: TreeNode[] = []
 
 					if (tables.length) {
-						folders.push({
-							name: 'Tables',
+						children.push({
 							type: 'folder',
-							children: tables.map(t => ({ name: t.name, type: 'table' }))
+							name: 'Tables',
+							children: tables.map(t => ({
+								type: 'table',
+								name: t.name
+							}))
 						})
 					}
 
 					if (views.length) {
-						folders.push({
-							name: 'Views',
+						children.push({
 							type: 'folder',
-							children: views.map(v => ({ name: v.name, type: 'view' }))
+							name: 'Views',
+							children: views.map(v => ({
+								type: 'view',
+								name: v.name
+							}))
 						})
 					}
 
-					if (folders.length) {
+					if (children.length) {
 						treeData.push({
-							name: schemaName,
 							type: 'schema',
-							children: folders
+							name: schemaName,
+							children
 						})
 					}
 				}
 
 				if (!cancelled) setTree(treeData)
 			} catch (err: any) {
 				if (!cancelled) {
-					setError(err?.message || 'Failed to load database tree')
-					toast.error(err?.message || 'Failed to load database tree')
+					const message = err?.message || 'Failed to load database tree'
+					setError(message)
+					toast.error(message)
 				}
 			} finally {
 				if (!cancelled) setLoading(false)

apps/desktop/renderer/src/widgets/sidebar/components/ConnectionItem.tsx

@@ -4,7 +4,6 @@ import { useState } from 'react'
 import { getConnectionIcon } from '../lib/get-connection-icon'
 
 import type { DatabaseConnection } from '@/entities/connection/model/connection.types'
-import { cn } from '@/shared/lib/utils'
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -26,21 +25,13 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/shared/ui/tooltip'
 
 interface Props {
 	connection: DatabaseConnection
-	active?: boolean
 	collapsed?: boolean
 	onSelect: () => void
 	onConnect?: () => void
 	onDelete?: () => void
 }
 
-export function ConnectionItem({
-	connection,
-	active,
-	collapsed,
-	onSelect,
-	onConnect,
-	onDelete
-}: Props) {
+export function ConnectionItem({ connection, collapsed, onSelect, onConnect, onDelete }: Props) {
 	const [contextMenuOpen, setContextMenuOpen] = useState(false)
 	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
 
@@ -62,10 +53,7 @@ export function ConnectionItem({
 				<TooltipTrigger asChild>
 					<button
 						onClick={onSelect}
-						className={cn(
-							'flex w-full items-center justify-center rounded-md p-2',
-							active ? 'bg-sidebar-accent' : 'hover:bg-sidebar-accent/50'
-						)}
+						className="hover:bg-sidebar-accent/50 flex w-full items-center justify-center rounded-md p-2"
 					>
 						{getConnectionIcon(connection.connectionType)}
 					</button>
@@ -82,10 +70,7 @@ export function ConnectionItem({
 					<button
 						onClick={onSelect}
 						onContextMenu={handleContextMenu}
-						className={cn(
-							'group relative flex w-full gap-3 rounded-md px-3 py-2.5 text-left',
-							active ? 'bg-sidebar-accent' : 'hover:bg-sidebar-accent/50'
-						)}
+						className="group hover:bg-sidebar-accent/50 relative flex w-full gap-3 rounded-md px-3 py-2.5 text-left"
 					>
 						<div className="mt-0.5 shrink-0">
 							{getConnectionIcon(connection.connectionType)}