migrate to react, show encrypt option for mssql (#13)

Now the webview is rendered with react, which will make it easier
to support driver-specific configuration in the connection configuration form.

Closes #7

Author: cmoog

.eslintrc.json

@@ -7,7 +7,7 @@
   },
   "plugins": ["@typescript-eslint"],
   "rules": {
-    "@typescript-eslint/naming-convention": "warn",
+    "@typescript-eslint/naming-convention": "off",
     "@typescript-eslint/semi": "warn",
     "curly": "warn",
     "eqeqeq": "warn",

.gitattributes

@@ -1,5 +1,5 @@
 on:
-  create:
+  push:
     tags: "v*"
 name: Publish Extension
 
@@ -16,7 +16,7 @@ permissions:
   statuses: none
 
 jobs:
-  deploy:
+  publish:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -33,7 +33,11 @@ jobs:
         with:
           name: sqlnotebook-${{ env.RELEASE_VERSION }}.vsix
           path: sqlnotebook-${{ env.RELEASE_VERSION }}.vsix
-      - name: Publish Extension
+      - name: Publish Extension to Microsoft Marketplace
         run: vsce publish --packagePath ./sqlnotebook-${{ env.RELEASE_VERSION }}.vsix
         env:
           VSCE_PAT: ${{ secrets.VSCE_CREDENTIALS }}
+      - name: Install OpenVSX CLI
+        run: npm install -g ovsx
+      - name: Publish to OpenVSX
+        run: npx ovsx publish ./sqlnotebook-${{ env.RELEASE_VERSION }}.vsix -p ${{ secrets.OPEN_VSX_CREDENTIALS }}

.github/workflows/publish.yml

@@ -1,4 +1,3 @@
 out
 node_modules
-.vscode-test/
 *.vsix

.gitignore

@@ -60,13 +60,7 @@
           "when": "view == sqlnotebook-connections &&  viewItem == database"
         }
       ],
-      "view/title": [
-        {
-          "command": "sqlnotebook.addNewConnectionConfiguration",
-          "when": "view == sqlnotebook-connections",
-          "group": "navigation"
-        }
-      ]
+      "view/title": []
     },
     "commands": [
       {
@@ -79,11 +73,12 @@
       },
       {
         "command": "sqlnotebook.deleteConnectionConfiguration",
-        "title": "Delete Connection Configuration"
+        "title": "Delete SQL Connection Configuration"
       },
       {
         "command": "sqlnotebook.refreshConnectionPanel",
-        "title": "Refresh Connection Panel"
+        "title": "Refresh SQL Connection Panel",
+        "shortTitle": "Refresh"
       }
     ],
     "viewsContainers": {
@@ -123,9 +118,9 @@
   },
   "scripts": {
     "vscode:prepublish": "npm run compile",
-    "compile": "tsc -b",
+    "compile": "tsc -b ./src & webpack --config ./webview/webpack.config.js",
     "lint": "eslint src --ext ts",
-    "watch": "tsc -b --watch",
+    "watch": "tsc -b ./src --watch & webpack --watch --config ./webview/webpack.config.js",
     "fmt": "npx prettier --write ./*.{jsx,ts,tsx,json,yaml,yml,md}"
   },
   "devDependencies": {
@@ -135,6 +130,8 @@
     "@types/mssql": "^7.1.3",
     "@types/node": "14.x",
     "@types/pg": "^8.6.1",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
     "@types/vscode": "^1.59.0",
     "@types/vscode-notebook-renderer": "^1.57.8",
     "@types/webpack-env": "^1.16.0",
@@ -147,18 +144,20 @@
     "glob": "^7.1.7",
     "mocha": "^8.4.0",
     "style-loader": "^1.2.1",
-    "ts-loader": "^9.2.2",
+    "ts-loader": "^9.2.6",
     "typescript": "^4.3.2",
     "vscode-notebook-error-overlay": "^1.0.1",
     "vscode-test": "^1.5.2",
-    "webpack": "^5.38.1",
-    "webpack-cli": "^4.7.0"
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1"
   },
   "dependencies": {
     "@vscode/webview-ui-toolkit": "^0.8.4",
     "mssql": "^7.2.1",
     "mysql2": "^2.3.0",
-    "pg": "^8.7.1"
+    "pg": "^8.7.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "prettier": {
     "semi": true,

media/webview/form.js

@@ -4,7 +4,7 @@ import {
   ConnectionListItem,
   SQLNotebookConnections,
 } from './connections';
-import { getDriver } from './driver';
+import { getPool, PoolConfig } from './driver';
 import { storageKey, globalConnPool } from './extension';
 
 export const deleteConnectionConfiguration =
@@ -48,6 +48,7 @@ export const connectToDatabase =
     } else {
       selectedName = item.config.name;
     }
+
     const match = context.globalState
       .get<ConnData[]>(storageKey, [])
       .find(({ name }) => name === selectedName);
@@ -64,14 +65,7 @@ export const connectToDatabase =
       );
       return;
     }
-    const driver = getDriver(match.driver);
-    globalConnPool.pool = await driver.createPool({
-      host: match.host,
-      port: match.port,
-      user: match.user,
-      password,
-      database: match.database,
-    });
+    globalConnPool.pool = await getPool({ ...match, password } as PoolConfig);
     try {
       const conn = await globalConnPool.pool.getConnection();
       await conn.query('SELECT 1'); // essentially a ping to see if the connection works
@@ -87,4 +81,4 @@ export const connectToDatabase =
       globalConnPool.pool = null;
       connectionsSidepanel.setActive(null);
     }
-  };
+  };;

package.json

@@ -73,15 +73,17 @@ export class SQLNotebookConnections
   }
 }
 
-export interface ConnData {
+export type ConnData = {
+  driver: DriverKey;
   name: string;
   host: string;
   port: number;
   user: string;
   passwordKey: string;
   database: string;
-  driver: DriverKey;
-}
+} & {
+  [key: string]: any;
+};
 
 export class ConnectionListItem extends vscode.TreeItem {
   constructor(

src/commands.ts

@@ -2,7 +2,7 @@ import * as mysql from 'mysql2/promise';
 import * as pg from 'pg';
 import * as mssql from 'mssql';
 
-export const supportedDrivers = ['mysql', 'postgres', 'mssql'] as const;
+const supportedDrivers = ['mysql', 'postgres', 'mssql'] as const;
 
 export type DriverKey = typeof supportedDrivers[number];
 
@@ -17,51 +17,48 @@ export type Row = { [key: string]: string | number | null };
 
 export type ResultTable = Row[];
 
-export interface Conn {
+interface Conn {
   release: () => void;
   query: (q: string) => Promise<QueryResult>;
   destroy: () => void;
 }
 
-interface PoolConfig {
+export type PoolConfig = MySQLConfig | MSSQLConfig | PostgresConfig;
+
+interface BaseConfig {
+  driver: DriverKey;
   host: string;
   port: number;
   user: string;
   password?: string;
   database?: string;
 }
 
-export interface Driver {
-  createPool: (config: PoolConfig) => Promise<Pool>;
+interface MySQLConfig extends BaseConfig {
+  driver: 'mysql';
 }
 
-export const getDriver = (driverKey: DriverKey): Driver => {
-  switch (driverKey) {
+export async function getPool(c: PoolConfig): Promise<Pool> {
+  switch (c.driver) {
     case 'mysql':
-      return mysqlDriver();
-    case 'postgres':
-      return postgresDriver();
+      return createMySQLPool(c);
     case 'mssql':
-      return mssqlDriver();
+      return createMSSQLPool(c);
+    case 'postgres':
+      return createPostgresPool(c);
     default:
-      throw new Error(`invalid driver key: ${driverKey}`);
+      throw Error('invalid driver key');
   }
-};
+}
 
-function mysqlDriver(): Driver {
-  return {
-    async createPool({
-      host,
-      port,
-      user,
-      password,
-      database,
-    }: PoolConfig): Promise<Pool> {
-      return mysqlPool(
-        mysql.createPool({ host, port, user, password, database,  })
-      );
-    },
-  };
+async function createMySQLPool({
+  host,
+  port,
+  user,
+  password,
+  database,
+}: MySQLConfig): Promise<Pool> {
+  return mysqlPool(mysql.createPool({ host, port, user, password, database }));
 }
 
 function mysqlPool(pool: mysql.Pool): Pool {
@@ -93,25 +90,25 @@ function mysqlConn(conn: mysql.PoolConnection): Conn {
   };
 }
 
-function postgresDriver(): Driver {
-  return {
-    async createPool({
-      host,
-      port,
-      user,
-      password,
-      database,
-    }: PoolConfig): Promise<Pool> {
-      const pool = new pg.Pool({
-        host,
-        port,
-        password,
-        database,
-        user,
-      });
-      return postgresPool(pool);
-    },
-  };
+interface PostgresConfig extends BaseConfig {
+  driver: 'postgres';
+}
+
+async function createPostgresPool({
+  host,
+  port,
+  user,
+  password,
+  database,
+}: PostgresConfig): Promise<Pool> {
+  const pool = new pg.Pool({
+    host,
+    port,
+    password,
+    database,
+    user,
+  });
+  return postgresPool(pool);
 }
 
 function postgresPool(pool: pg.Pool): Pool {
@@ -142,23 +139,23 @@ function postgresConn(conn: pg.PoolClient): Conn {
   };
 }
 
-function mssqlDriver(): Driver {
-  return {
-    async createPool(config: PoolConfig): Promise<Pool> {
-      const conn = await mssql.connect({
-        server: config.host,
-        port: config.port,
-        user: config.user,
-        password: config.password,
-        database: config.database,
-        options: {
-          encrypt: false,
-          trustServerCertificate: true,
-        },
-      });
-      return mssqlPool(conn);
-    },
-  };
+interface MSSQLConfig extends BaseConfig {
+  driver: 'mssql';
+  encrypt: boolean;
+}
+
+async function createMSSQLPool(config: MSSQLConfig): Promise<Pool> {
+  const conn = await mssql.connect({
+    server: config.host,
+    port: config.port,
+    user: config.user,
+    password: config.password,
+    database: config.database,
+    options: {
+      encrypt: config.encrypt,
+    },
+  });
+  return mssqlPool(conn);
 }
 
 function mssqlPool(pool: mssql.ConnectionPool): Pool {