feat: implement SQL source management and connection handling

- Added `Channel` class for WebSocket communication.
- Introduced `connections-store` for managing active connections.
- Created `SourcesSidebar` and `SidebarSQLSource` components for displaying and interacting with SQL sources.
- Integrated `SQLColumnEditor` for editing SQL column properties.
- Updated `HomeView` to include a dialog for editing columns.
- Enhanced `App.vue` with a new `SourcesSidebar` component.
- Added support for dynamic table retrieval from SQL sources.
- Included loading indicators and connection status in UI components.

Author: JulianFun123

README.md

@@ -21,4 +21,13 @@
   - [ ] Rest API
   - [ ] GraphQL
   - [ ] gRPC
-  - [ ] OpenAPI
+  - [ ] OpenAPI
+
+
+## TODOs
+- [ ] Add authentication
+- [ ] Add projects
+- [ ] Electron save passwords via npm package `keytar`
+
+## Backlog
+- [ ] Add OpenID Connect support

packages/backend/package.json

@@ -16,6 +16,7 @@
     "@types/express": "^5.0.2",
     "@types/express-ws": "^3.0.5",
     "body-parser": "^2.2.0",
+    "cors": "^2.8.5",
     "express": "^5.0.2",
     "express-ws": "^5.0.2",
     "mysql2": "^3.14.1",

packages/backend/src/adapters/database/sql/index.ts

@@ -0,0 +1,6 @@
+import {MySQLAdapter} from "./mysql-adapter/MySQLAdapter";
+
+
+export const SQL_ADAPTERS = {
+    'mysql': MySQLAdapter
+}

packages/backend/src/adapters/database/sql/mysql-adapter/MySQLAdapter.ts

@@ -28,6 +28,8 @@ export class MySQLAdapter extends DefaultSQLAdapter {
     async getTables() {
         const [rows, fields] = await this.connection!.query(`SELECT *  FROM information_schema.tables where table_schema='${this.options.database}' `);
 
+        console.log(rows)
+
         return (rows as any[]).map((r) => ({
             name: r.TABLE_NAME
         }))

packages/backend/src/api/sources/database/sql/websocket.ts

@@ -1,51 +1,45 @@
 import expressWs from "express-ws";
-import {sources} from "../../index";
-import WebSocket from "ws";
+import {Channel, sources} from "../../index";
 import {DefaultSQLAdapter} from "../../adapters/database/sql/default-sql-adapter/DefaultSQLAdapter";
 import query from "../../adapters/database/sql/default-sql-adapter/routes/query";
+import {SQL_ADAPTERS} from "../../adapters/database/sql";
+import {Request, Response} from "express";
+import {MySQLAdapter} from "../../adapters/database/sql/mysql-adapter/MySQLAdapter";
 
-export class Channel {
-    id: string
-    ws: WebSocket.WebSocket
-    source: string
-    adapter: DefaultSQLAdapter
-
-    constructor(id: string, ws: WebSocket.WebSocket, source: string, adapter: DefaultSQLAdapter) {
-        this.id = id
-        this.ws = ws
-        this.source = source
-        this.adapter = adapter
-    }
+const routes = {
+    query
+}
 
-    send(data: any) {
-        this.ws.send(JSON.stringify({
-            id: this.id,
-            ...data
-        }))
-    }
+export function setupSourcesApi(server: expressWs.Application) {
 
-    error() {
-        this.send({
-            type: 'error',
-            error: true
+    server.get("/api/projects/:project/sources", (req, res) => {
+        console.log('Getting sources')
+        const sourcesList = Object.keys(sources).map((key) => {
+            return {
+                name: key,
+                type: sources[key].type
+            }
         })
-    }
+        res.json(sourcesList)
+    })
 
-    close() {
-        this.send(JSON.stringify({
-            type: 'close',
-        }))
-    }
-}
 
-const routes = {
-    query
-}
+    server.get('/api/projects/:project/sources/:source/tables', async (req: Request, res: Response) => {
+        const source = sources[req.params.source]
+        if (!source) {
+            res.status(404).send('Source not found')
+            return;
+        }
 
+        const adapter = new MySQLAdapter(source.options)
+        await adapter.connect()
+        const tables = await adapter.getTables()
+        await adapter.close()
 
-export function setupSourcesApi(server: expressWs.Application) {
-    console.log('Setting up /api/organizations/:orga/projects/:project/source/:source/sql')
-    server.ws('/api/organizations/:orga/projects/:project/source/:source/sql', (ws, req) => {
+        res.json(tables)
+    })
+
+    server.ws('/api/projects/:project/sources/:source/sql', (ws, req) => {
         console.log('Creating websocket')
         const source = sources[req.params.source]
         if (!source) {
@@ -67,7 +61,7 @@ export function setupSourcesApi(server: expressWs.Application) {
 
             if (data.type === 'connect') {
                 console.log('Connecting', source.options)
-                adapter = new source.adapter(source.options)
+                adapter = new SQL_ADAPTERS[source.type](source.options)
                 try {
                     await adapter.connect()
                     channel.close()

…kages/backend/src/wsapi/sources/index.ts packages/backend/src/api/sources/index.tspackages/backend/src/wsapi/sources/index.ts renamed to packages/backend/src/api/sources/index.ts packages/backend/src/wsapi/sources/index.ts renamed to packages/backend/src/api/sources/index.ts

@@ -1,14 +1,15 @@
 import bodyParser from 'body-parser'
 import express, { Request, Response } from 'express'
 import expressWs from 'express-ws'
-import {setupSourcesApi} from "./wsapi/sources";
+import cors from 'cors'
+import {setupSourcesApi} from "./api/sources";
 import {MySQLAdapter} from "./adapters/database/sql/mysql-adapter/MySQLAdapter";
 
 export const sources = {
     pastefy: {
-        type: 'sql',
-        adapter: MySQLAdapter,
+        type: 'mysql',
         options: {
+            adapter: MySQLAdapter,
             host: 'localhost',
             user: 'pastefy',
             password: 'pastefy',
@@ -19,21 +20,7 @@ export const sources = {
 
 const server = expressWs(express()).app
 server.use(bodyParser.json())
-
-server.get('/sources/:source/tables', async (req: Request, res: Response) => {
-    const source = sources[req.params.source]
-    if (!source) {
-        res.status(404).send('Source not found')
-        return;
-    }
-
-    const adapter = new MySQLAdapter(source.options)
-    await adapter.connect()
-    const tables = await adapter.getTables()
-    await adapter.close()
-
-    res.json(tables)
-})
+server.use(cors())
 
 setupSourcesApi(server)
 
@@ -42,4 +29,5 @@ async function main() {
 }
 
 
-main().catch(console.error);
+main().catch(console.error);
+export {Channel} from "./ws/Channel";

packages/backend/src/index.ts

@@ -0,0 +1,36 @@
+import {DefaultSQLAdapter} from "../adapters/database/sql/default-sql-adapter/DefaultSQLAdapter";
+import * as WebSocket from "ws";
+
+export class Channel {
+    id: string
+    ws: WebSocket.WebSocket
+    source: string
+    adapter: DefaultSQLAdapter
+
+    constructor(id: string, ws: WebSocket.WebSocket, source: string, adapter: DefaultSQLAdapter) {
+        this.id = id
+        this.ws = ws
+        this.source = source
+        this.adapter = adapter
+    }
+
+    send(data: any) {
+        this.ws.send(JSON.stringify({
+            id: this.id,
+            ...data
+        }))
+    }
+
+    error() {
+        this.send({
+            type: 'error',
+            error: true
+        })
+    }
+
+    close() {
+        this.send(JSON.stringify({
+            type: 'close',
+        }))
+    }
+}

packages/backend/src/ws/Channel.ts

@@ -3,6 +3,9 @@ import Tree from 'primevue/tree'
 import Button from 'primevue/button'
 import { onMounted, ref } from 'vue'
 import ResizeKnob from '@/components/ResizeKnob.vue'
+import { client } from '@/main.ts'
+import { useAsyncState } from '@vueuse/core'
+import SourcesSidebar from '@/components/SourcesSidebar.vue'
 
 const nodes = ref([
   {
@@ -75,12 +78,6 @@ const sideBarWidth = ref(300)
           </router-link>
 
           <div class="flex flex-col gap-2 p-1.5 pt-0">
-            <!--<router-link
-              to="/"
-              class="w-full aspect-square flex justify-center items-center bg-primary-500/20 rounded-lg"
-            >
-              <i class="text-primary-500 text-xl ti ti-device-laptop" />
-            </router-link> -->
             <router-link
               to="/"
               class="w-full aspect-square flex justify-center items-center bg-primary-500/20 rounded-lg"
@@ -100,39 +97,12 @@ const sideBarWidth = ref(300)
             to="/"
             class="w-full aspect-square flex justify-center items-center border border-primary-500/20 rounded-full"
           >
-            <span class="text-primary-500 text-lg font-bold select-none">U</span>
+            <i class="text-primary-500 text-xl ti ti-device-laptop" />
           </router-link>
         </div>
       </div>
     </div>
-    <div class="border-r border-neutral-200 dark:border-neutral-800 px-0.5 relative">
-      <div class="flex w-full justify-between items-center p-2 pb-0 pt-0.5 pr-0 region-drag">
-        <span class="opacity-60">sources</span>
-        <Button
-          icon="ti ti-plus text-lg p-0.5"
-          size="small"
-          rounded
-          severity="contrast"
-          text
-          class="region-no-drag"
-        />
-      </div>
-      <Tree
-        v-model:selectionKeys="selectedKey"
-        v-model:expandedKeys="expandedKeys"
-        size="small"
-        :value="nodes"
-        selectionMode="single"
-        class="w-full bg-transparent p-0 text-sm"
-      />
-
-      <ResizeKnob
-        :min-width="230"
-        :max-width="460"
-        v-model:width="sideBarWidth"
-        class="absolute right-[-0.3rem] top-0"
-      />
-    </div>
+    <SourcesSidebar v-model:sidebar-width="sideBarWidth" />
     <main class="h-full w-full overflow-hidden">
       <RouterView />
     </main>