v4.1.1

Svelte proof of concept

.github/workflows/build-npm.yaml

@@ -89,3 +89,33 @@ jobs:
         working-directory: packages/dbgate
         run: |
           npm publish
+
+      - name: Publish dbgate-plugin-csv
+        working-directory: plugins/dbgate-plugin-csv
+        run: |
+          npm publish
+
+      - name: Publish dbgate-plugin-excel
+        working-directory: plugins/dbgate-plugin-excel
+        run: |
+          npm publish
+
+      - name: Publish dbgate-plugin-mssql
+        working-directory: plugins/dbgate-plugin-mssql
+        run: |
+          npm publish
+
+      - name: Publish dbgate-plugin-mysql
+        working-directory: plugins/dbgate-plugin-mysql
+        run: |
+          npm publish
+
+      - name: Publish dbgate-plugin-mongo
+        working-directory: plugins/dbgate-plugin-mongo
+        run: |
+          npm publish
+
+      - name: Publish dbgate-plugin-postgres
+        working-directory: plugins/dbgate-plugin-postgres
+        run: |
+          npm publish

.gitignore

@@ -12,6 +12,12 @@ node_modules
 build
 dist
 
+app/packages/web/public
+app/packages/plugins
+docker/public
+docker/bundle.js
+docker/plugins
+
 # misc
 .DS_Store
 .env.local
@@ -24,3 +30,4 @@ yarn-debug.log*
 yarn-error.log*
 app/src/nativeModulesContent.js
 packages/api/src/nativeModulesContent.js
+.VSCodeCounter

CHANGELOG.md

@@ -1,5 +1,28 @@
 # ChangeLog
 
+### 4.1.1
+- CHANGED: Default plugins are now part of installation
+### 4.1.0
+- ADDED: MongoDB support
+- ADDED: Configurable keyboard shortcuts
+- ADDED: JSON row cell data view
+- FIX: Fixed some problems from migration to Svelte
+
+### 4.0.3
+- FIX: fixes for FireFox (mainly incorrent handle of bind:clientHeight, replaces with resizeobserver)
+### 4.0.2
+- FIX: fixed docker and NPM build
+### 4.0.0
+- CHANGED: Excahnged React with Svelte. Changed theme colors. Huge speed and memory optimalization
+- ADDED: SQL Generator (CREATE, INSERT, DROP)
+- ADDED: Command palette (F1). Introduced commands, extended some context menus
+- ADDED: New keyboard shortcuts
+- ADDED: Switch to recent database feature
+- ADDED: Macros from free table editor are available also in table data editor
+- CHANGED: Cell data preview is now in left widgets panel
+- CHANGED: Toolbar refactor
+- FIX: Solved reconnecting expired connection
+
 ### 3.9.6
 - ADDED: Connect using SSH Tunnel
 - ADDED: Connect using SSL

README.md

@@ -6,22 +6,30 @@
 
 # DbGate - database administration tool
 
-DbGate is fast and easy to use database manager. Works with MySQL, PostgreSQL and SQL Server.
+DbGate modern, fast and easy to use database manager
 
 * Try it online - [demo.dbgate.org](https://demo.dbgate.org) - online demo application
 * Download application for Windows, Linux or Mac from [dbgate.org](https://dbgate.org/download/)
 * Run web version as [NPM package](https://www.npmjs.com/package/dbgate) or as [docker image](https://hub.docker.com/r/dbgate/dbgate)
 
+Supported databases:
+* MySQL
+* PostgreSQL
+* SQL Server
+* MongoDB
+
 ![Screenshot](https://raw.githubusercontent.com/dbgate/dbgate/master/screenshot.png)
 
 ## Features
-* Connect to Microsoft SQL Server, Postgre SQL, MySQL
+* Connect to Microsoft SQL Server, Postgre SQL, MySQL, MongoDB
 * Table data editing, with SQL change script preview
 * Master/detail views
 * Query designer
 * Form view for comfortable work with tables with many columns
-* Explore tables, views, procedures, functions
+* JSON view on MognoDB collections
+* Explore tables, views, procedures, functions, MongoDB collections
 * SQL editor, execute SQL script, SQL code formatter, SQL code completion, SQL join wizard
+* Mongo JavaScript editor, execute Mongo script (with NodeJs syntax)
 * Runs as application for Windows, Linux and Mac. Or in Docker container on server and in web Browser on client.
 * Import, export from/to CSV, Excel, JSON
 * Free table editor - quick table data editing (cleanup data after import/before export, prototype tables etc.)
@@ -40,7 +48,7 @@ There are many database managers now, so why DbGate?
 ## Design goals
 * Application simplicity - DbGate takes the best and only the best from old [DbGate](http://www.jenasoft.com/dbgate), [DatAdmin](http://www.jenasoft.com/datadmin) and [DbMouse](http://www.jenasoft.com/dbmouse) .
 * Minimal dependencies
-    * Frontend - React, styled-components, socket.io
+    * Frontend - Svelte, socket.io
     * Backend - NodeJs, ExpressJs, socket.io, database connection drivers
     * JavaScript + TypeScript
     * App - electron
@@ -56,6 +64,8 @@ Currently following extensions can be implemented using plugins:
 - File format parsers/writers
 - Database engine connectors
 
+Basic set of plugins is part of DbGate git repository and is installed with app. Additional plugins pust be downloaded from NPM (this task is handled by DbGate)
+
 ## How to run development environment
 
 ```sh
@@ -63,7 +73,7 @@ yarn
 yarn start
 ```
 
-If you want to make modifications in TypeScript packages, run TypeScript compiler in watch mode in seconds terminal:
+If you want to make modifications in libraries or plugins, run library compiler in watch mode in the second terminal:
 ```sh
 yarn lib
 ```
@@ -78,7 +88,7 @@ yarn start
 ```
 
 ## How to run built electron app locally
-This mode is very similar to production run of electron app. Electron app forks process with API on dynamically allocated port, works with compiled javascript files (doesn't use localhost:5000)
+This mode is very similar to production run of electron app. Electron app forks process with API on dynamically allocated port, works with compiled javascript files and uses compiled version of plugins (doesn't use localhost:5000)
 
 ```sh
 cd app
@@ -100,6 +110,6 @@ Some dbgate packages can be used also without DbGate. You can find them on [NPM
 * [filterparser](https://github.com/dbgate/dbgate/tree/master/packages/filterparser) - TypeScript library for parsing data filter expressions using parsimmon [![NPM version](https://img.shields.io/npm/v/dbgate-filterparser.svg)](https://www.npmjs.com/package/dbgate-filterparser)
 * [sqltree](https://github.com/dbgate/dbgate/tree/master/packages/sqltree) - JSON representation of SQL query, functions converting to SQL (TypeScript) [![NPM version](https://img.shields.io/npm/v/dbgate-sqltree.svg)](https://www.npmjs.com/package/dbgate-sqltree)
 * [types](https://github.com/dbgate/dbgate/tree/master/packages/types) - common TypeScript definitions [![NPM version](https://img.shields.io/npm/v/dbgate-types.svg)](https://www.npmjs.com/package/dbgate-types)
-* [web](https://github.com/dbgate/dbgate/tree/master/packages/web) - frontend in React (JavaScript) [![NPM version](https://img.shields.io/npm/v/dbgate-web.svg)](https://www.npmjs.com/package/dbgate-web)
+* [web](https://github.com/dbgate/dbgate/tree/master/packages/web) - frontend in Svelte (JavaScript) [![NPM version](https://img.shields.io/npm/v/dbgate-web.svg)](https://www.npmjs.com/package/dbgate-web)
 * [tools](https://github.com/dbgate/dbgate/tree/master/packages/tools) - various tools [![NPM version](https://img.shields.io/npm/v/dbgate-tools.svg)](https://www.npmjs.com/package/dbgate-tools)
 

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbgate",
-  "version": "3.9.5",
+  "version": "4.0.0",
   "private": true,
   "author": "Jan Prochazka <jenasoft.database@gmail.com>",
   "description": "Opensource database administration tool",
@@ -68,10 +68,10 @@
     "start": "cross-env ELECTRON_START_URL=http://localhost:5000 electron .",
     "start:local": "cross-env electron .",
     "dist": "electron-builder",
-    "build": "cd ../packages/api && yarn build && cd ../web && yarn build:app && cd ../../app && yarn dist",
-    "build:local": "cd ../packages/api && yarn build && cd ../web && yarn build:app && cd ../../app && yarn predist",
+    "build": "cd ../packages/api && yarn build && cd ../web && yarn build && cd ../../app && yarn dist",
+    "build:local": "cd ../packages/api && yarn build && cd ../web && yarn build && cd ../../app && yarn predist",
     "postinstall": "electron-builder install-app-deps",
-    "predist": "copyfiles ../packages/api/dist/* packages && copyfiles \"../packages/web/build/*\" packages && copyfiles \"../packages/web/build/**/*\" packages"
+    "predist": "copyfiles ../packages/api/dist/* packages && copyfiles \"../packages/web/public/*\" packages && copyfiles \"../packages/web/public/**/*\" packages && copyfiles --up 3 \"../plugins/dist/**/*\" packages/plugins"
   },
   "main": "src/electron.js",
   "devDependencies": {

app/src/electron.js

@@ -27,6 +27,8 @@ autoUpdater.logger = log;
 // TODO - create settings for this
 // appUpdater.channel = 'beta';
 
+let commands = {};
+
 function hideSplash() {
   if (splashWindow) {
     splashWindow.destroy();
@@ -35,61 +37,35 @@ function hideSplash() {
   mainWindow.show();
 }
 
+function commandItem(id) {
+  const command = commands[id];
+  return {
+    id,
+    label: command ? command.menuName || command.toolbarName || command.name : id,
+    accelerator: command ? command.keyText : undefined,
+    enabled: command ? command.enabled : false,
+    click() {
+      mainWindow.webContents.executeJavaScript(`dbgate_runCommand('${id}')`);
+    },
+  };
+}
+
 function buildMenu() {
   const template = [
     {
       label: 'File',
       submenu: [
-        {
-          label: 'Connect to database',
-          click() {
-            mainWindow.webContents.executeJavaScript(`dbgate_createNewConnection()`);
-          },
-        },
-        {
-          label: 'Open file',
-          click() {
-            mainWindow.webContents.executeJavaScript(`dbgate_openFile()`);
-          },
-        },
-        {
-          label: 'Save',
-          click() {
-            mainWindow.webContents.executeJavaScript(`dbgate_tabCommand('save')`);
-          },
-          accelerator: 'Ctrl+S',
-          id: 'save',
-        },
-        {
-          label: 'Save As',
-          click() {
-            mainWindow.webContents.executeJavaScript(`dbgate_tabCommand('saveAs')`);
-          },
-          accelerator: 'Ctrl+Shift+S',
-          id: 'saveAs',
-        },
+        commandItem('new.connection'),
+        commandItem('file.open'),
+        commandItem('group.save'),
+        commandItem('group.saveAs'),
         { type: 'separator' },
         { role: 'close' },
       ],
     },
     {
       label: 'Window',
-      submenu: [
-        {
-          label: 'New query',
-          click() {
-            mainWindow.webContents.executeJavaScript(`dbgate_newQuery()`);
-          },
-        },
-        { type: 'separator' },
-        {
-          label: 'Close all tabs',
-          click() {
-            mainWindow.webContents.executeJavaScript('dbgate_closeAll()');
-          },
-        },
-        { role: 'minimize' },
-      ],
+      submenu: [commandItem('new.query'), { type: 'separator' }, commandItem('tabs.closeAll'), { role: 'minimize' }],
     },
 
     // {
@@ -115,6 +91,7 @@ function buildMenu() {
         { role: 'zoomout' },
         { type: 'separator' },
         { role: 'togglefullscreen' },
+        commandItem('theme.changeTheme'),
       ],
     },
     {
@@ -144,12 +121,7 @@ function buildMenu() {
             require('electron').shell.openExternal('https://github.com/dbgate/dbgate/issues/new');
           },
         },
-        {
-          label: 'About',
-          click() {
-            mainWindow.webContents.executeJavaScript(`dbgate_showAbout()`);
-          },
-        },
+        commandItem('about.show'),
       ],
     },
   ];
@@ -157,10 +129,22 @@ function buildMenu() {
   return Menu.buildFromTemplate(template);
 }
 
-ipcMain.on('update-menu', async (event, arg) => {
-  const commands = await mainWindow.webContents.executeJavaScript(`dbgate_getCurrentTabCommands()`);
-  mainMenu.getMenuItemById('save').enabled = !!commands.save;
-  mainMenu.getMenuItemById('saveAs').enabled = !!commands.saveAs;
+ipcMain.on('update-commands', async (event, arg) => {
+  commands = JSON.parse(arg);
+  for (const key of Object.keys(commands)) {
+    const menu = mainMenu.getMenuItemById(key);
+    if (!menu) continue;
+    const command = commands[key];
+
+    // rebuild menu
+    if (menu.label != command.text || menu.accelerator != command.keyText) {
+      mainMenu = buildMenu();
+      mainWindow.setMenu(mainMenu);
+      return;
+    }
+
+    menu.enabled = command.enabled;
+  }
 });
 
 function createWindow() {
@@ -186,7 +170,7 @@ function createWindow() {
     const startUrl =
       process.env.ELECTRON_START_URL ||
       url.format({
-        pathname: path.join(__dirname, '../packages/web/build/index.html'),
+        pathname: path.join(__dirname, '../packages/web/public/index.html'),
         protocol: 'file:',
         slashes: true,
       });

package.json

@@ -1,15 +1,16 @@
 {
   "private": true,
-  "version": "3.9.6",
+  "version": "4.1.1",
   "name": "dbgate-all",
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "plugins/*"
   ],
   "scripts": {
     "start:api": "yarn workspace dbgate-api start",
     "start:api:portal": "yarn workspace dbgate-api start:portal",
     "start:api:covid": "yarn workspace dbgate-api start:covid",
-    "start:web": "yarn workspace dbgate-web start",
+    "start:web": "yarn workspace dbgate-web dev",
     "start:sqltree": "yarn workspace dbgate-sqltree start",
     "start:tools": "yarn workspace dbgate-tools start",
     "start:datalib": "yarn workspace dbgate-datalib start",
@@ -19,25 +20,28 @@
     "build:filterparser": "yarn workspace dbgate-filterparser build",
     "build:tools": "yarn workspace dbgate-tools build",
     "build:lib": "yarn build:tools && yarn build:sqltree && yarn build:filterparser && yarn build:datalib",
-    "build:app": "cd app && yarn install && yarn build",
+    "build:app": "yarn plugins:copydist && cd app && yarn install && yarn build",
     "build:api": "yarn workspace dbgate-api build",
-    "build:web:docker": "yarn workspace dbgate-web build:docker",
-    "build:app:local": "cd app && yarn build:local",
+    "build:web:docker": "yarn workspace dbgate-web build",
+    "build:plugins:frontend": "workspaces-run --only=\"dbgate-plugin-*\" -- yarn build:frontend",
+    "build:plugins:frontend:watch": "workspaces-run --parallel --only=\"dbgate-plugin-*\" -- yarn build:frontend:watch",
+    "plugins:copydist": "workspaces-run --only=\"dbgate-plugin-*\" -- yarn copydist",
+    "build:app:local": "yarn plugins:copydist && cd app && yarn build:local",
     "start:app:local": "cd app && yarn start:local",
     "setCurrentVersion": "node setCurrentVersion",
     "generatePadFile": "node generatePadFile",
     "fillNativeModules": "node fillNativeModules",
     "fillNativeModulesElectron": "node fillNativeModules --eletron",
     "prettier": "prettier --write packages/api/src && prettier --write packages/datalib/src && prettier --write packages/filterparser/src && prettier --write packages/sqltree/src && prettier --write packages/tools/src && prettier --write packages/types && prettier --write packages/web/src && prettier --write app/src",
-    "copy:docker:build": "copyfiles packages/api/dist/* docker -f && copyfiles packages/web/build/* docker -u 2 && copyfiles \"packages/web/build/**/*\" docker -u 2",
-    "prepare:docker": "yarn build:web:docker && yarn build:api && yarn copy:docker:build",
+    "copy:docker:build": "copyfiles packages/api/dist/* docker -f && copyfiles packages/web/public/* docker -u 2 && copyfiles \"packages/web/public/**/*\" docker -u 2 && copyfiles \"plugins/dist/**/*\" docker/plugins -u 2",
+    "prepare:docker": "yarn plugins:copydist && yarn build:web:docker && yarn build:api && yarn copy:docker:build",
     "prepare": "yarn build:lib",
     "start": "concurrently --kill-others-on-fail \"yarn start:api\" \"yarn start:web\"",
-    "lib": "concurrently --kill-others-on-fail \"yarn start:sqltree\" \"yarn start:filterparser\" \"yarn start:datalib\" \"yarn start:tools\"",
+    "lib": "concurrently --kill-others-on-fail \"yarn start:sqltree\" \"yarn start:filterparser\" \"yarn start:datalib\" \"yarn start:tools\" \"yarn build:plugins:frontend:watch\"",
     "ts:api": "yarn workspace dbgate-api ts",
     "ts:web": "yarn workspace dbgate-web ts",
     "ts": "yarn ts:api && yarn ts:web",
-    "postinstall": "patch-package && yarn fillNativeModules"
+    "postinstall": "patch-package && yarn fillNativeModules && yarn build:plugins:frontend"
   },
   "dependencies": {
     "concurrently": "^5.1.0",
@@ -46,6 +50,7 @@
   },
   "devDependencies": {
     "copyfiles": "^2.2.0",
-    "prettier": "^2.2.1"
+    "prettier": "^2.2.1",
+    "workspaces-run": "^1.0.1"
   }
 }

packages/api/.env

@@ -5,19 +5,11 @@ SERVER_mysql=localhost
 USER_mysql=root
 PASSWORD_mysql=test
 PORT_mysql=3307
-ENGINE_mysql=mysql
+ENGINE_mysql=mysql@dbgate-plugin-mysql
 
 LABEL_postgres=Postgres localhost
 SERVER_postgres=localhost
 USER_postgres=postgres
 PASSWORD_postgres=test
 PORT_postgres=5433
-ENGINE_postgres=postgres
-
-TOOLBAR=home
-ICON_home=mdi mdi-home
-TITLE_home=Home
-PAGE_home=home.html
-STARTUP_PAGES=home
-
-PAGES_DIRECTORY=/home/jena/jenasoft/dbgate-web/pages
+ENGINE_postgres=postgres@dbgate-plugin-postgres

packages/api/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dbgate-api",
   "main": "src/index.js",
-  "version": "3.9.5",
+  "version": "4.0.0",
   "homepage": "https://dbgate.org/",
   "repository": {
     "type": "git",
@@ -26,14 +26,14 @@
     "compare-versions": "^3.6.0",
     "cors": "^2.8.5",
     "cross-env": "^6.0.3",
-    "dbgate-sqltree": "^3.9.5",
-    "dbgate-tools": "^3.9.5",
+    "dbgate-sqltree": "^4.0.0",
+    "dbgate-tools": "^4.0.0",
     "eslint": "^6.8.0",
     "express": "^4.17.1",
     "express-basic-auth": "^1.2.0",
     "express-fileupload": "^1.2.0",
     "find-free-port": "^2.0.0",
-    "fs-extra": "^8.1.0",
+    "fs-extra": "^9.1.0",
     "http": "^0.0.0",
     "json-stable-stringify": "^1.0.1",
     "line-reader": "^0.4.0",
@@ -49,15 +49,16 @@
     "uuid": "^3.4.0"
   },
   "scripts": {
-    "start": "nodemon src/index.js",
+    "start": "node src/index.js",
     "start:portal": "env-cmd nodemon src/index.js",
     "start:covid": "env-cmd -f .covid-env nodemon src/index.js",
     "ts": "tsc",
     "build": "webpack"
   },
   "devDependencies": {
+    "@types/fs-extra": "^9.0.11",
     "@types/lodash": "^4.14.149",
-    "dbgate-types": "^3.9.5",
+    "dbgate-types": "^4.0.0",
     "env-cmd": "^10.1.0",
     "node-loader": "^1.0.2",
     "nodemon": "^2.0.2",

packages/api/src/controllers/databaseConnections.js

@@ -92,6 +92,20 @@ module.exports = {
     return res;
   },
 
+  collectionData_meta: 'post',
+  async collectionData({ conid, database, options }) {
+    const opened = await this.ensureOpened(conid, database);
+    const res = await this.sendRequest(opened, { msgtype: 'collectionData', options });
+    return res.result;
+  },
+
+  updateCollection_meta: 'post',
+  async updateCollection({ conid, database, changeSet }) {
+    const opened = await this.ensureOpened(conid, database);
+    const res = await this.sendRequest(opened, { msgtype: 'updateCollection', changeSet });
+    return res.result;
+  },
+
   status_meta: 'get',
   async status({ conid, database }) {
     const existing = this.opened.find(x => x.conid == conid && x.database == database);
@@ -106,10 +120,14 @@ module.exports = {
 
   ping_meta: 'post',
   async ping({ conid, database }) {
-    const existing = this.opened.find(x => x.conid == conid && x.database == database);
+    let existing = this.opened.find(x => x.conid == conid && x.database == database);
+
     if (existing) {
       existing.subprocess.send({ msgtype: 'ping' });
+    } else {
+      existing = await this.ensureOpened(conid, database);
     }
+    
     return {
       status: 'ok',
       connectionStatus: existing ? existing.status : null,
@@ -153,6 +171,16 @@ module.exports = {
     // };
   },
 
+  sqlPreview_meta: 'post',
+  async sqlPreview({ conid, database, objects, options }) {
+    // wait for structure
+    await this.structure({ conid, database });
+
+    const opened = await this.ensureOpened(conid, database);
+    const res = await this.sendRequest(opened, { msgtype: 'sqlPreview', objects, options });
+    return res;
+  },
+
   // runCommand_meta: 'post',
   // async runCommand({ conid, database, sql }) {
   //   console.log(`Running SQL command , conid=${conid}, database=${database}, sql=${sql}`);

packages/api/src/controllers/jsldata.js

@@ -121,7 +121,13 @@ module.exports = {
   getStats_meta: 'get',
   getStats({ jslid }) {
     const file = `${getJslFileName(jslid)}.stats`;
-    if (fs.existsSync(file)) return JSON.parse(fs.readFileSync(file, 'utf-8'));
+    if (fs.existsSync(file)) {
+      try {
+        return JSON.parse(fs.readFileSync(file, 'utf-8'));
+      } catch (e) {
+        return {};
+      }
+    }
     return {};
   },
 

packages/api/src/controllers/metadata.js

@@ -17,7 +17,7 @@ module.exports = {
   listObjects_meta: 'get',
   async listObjects({ conid, database }) {
     const opened = await databaseConnections.ensureOpened(conid, database);
-    const types = ['tables', 'views', 'procedures', 'functions', 'triggers'];
+    const types = ['tables', 'collections', 'views', 'procedures', 'functions', 'triggers'];
     return types.reduce(
       (res, type) => ({
         ...res,

packages/api/src/controllers/plugins.js

@@ -2,43 +2,21 @@ const fs = require('fs-extra');
 const axios = require('axios');
 const path = require('path');
 const { extractPackageName } = require('dbgate-tools');
-const { pluginsdir, datadir } = require('../utility/directories');
+const { pluginsdir, packagedPluginsDir } = require('../utility/directories');
 const socket = require('../utility/socket');
 const compareVersions = require('compare-versions');
 const requirePlugin = require('../shell/requirePlugin');
 const downloadPackage = require('../utility/downloadPackage');
 const hasPermission = require('../utility/hasPermission');
-
-// async function loadPackageInfo(dir) {
-//   const readmeFile = path.join(dir, 'README.md');
-//   const packageFile = path.join(dir, 'package.json');
-
-//   if (!(await fs.exists(packageFile))) {
-//     return null;
-//   }
-
-//   let readme = null;
-//   let manifest = null;
-//   if (await fs.exists(readmeFile)) readme = await fs.readFile(readmeFile, { encoding: 'utf-8' });
-//   if (await fs.exists(packageFile)) manifest = JSON.parse(await fs.readFile(packageFile, { encoding: 'utf-8' }));
-//   return {
-//     readme,
-//     manifest,
-//   };
-// }
-
-const preinstallPluginMinimalVersions = {
-  'dbgate-plugin-mssql': '1.1.0',
-  'dbgate-plugin-mysql': '1.1.0',
-  'dbgate-plugin-postgres': '1.1.0',
-  'dbgate-plugin-csv': '1.0.8',
-  'dbgate-plugin-excel': '1.0.6',
-};
+const _ = require('lodash');
 
 module.exports = {
   script_meta: 'get',
   async script({ packageName }) {
-    const file = path.join(pluginsdir(), packageName, 'dist', 'frontend.js');
+    const file1 = path.join(packagedPluginsDir(), packageName, 'dist', 'frontend.js');
+    const file2 = path.join(pluginsdir(), packageName, 'dist', 'frontend.js');
+    // @ts-ignore
+    const file = (await fs.exists(file1)) ? file1 : file2;
     const data = await fs.readFile(file, {
       encoding: 'utf-8',
     });
@@ -62,10 +40,13 @@ module.exports = {
       const { latest } = infoResp.data['dist-tags'];
       const manifest = infoResp.data.versions[latest];
       const { readme } = infoResp.data;
+      // @ts-ignore
+      const isPackaged = await fs.exists(path.join(packagedPluginsDir(), packageName));
 
       return {
         readme,
         manifest,
+        isPackaged,
       };
     } catch (err) {
       return {
@@ -73,52 +54,48 @@ module.exports = {
         error: err.message,
       };
     }
-
-    // const dir = path.join(pluginstmpdir(), packageName);
-    // if (!(await fs.exists(dir))) {
-    //   await downloadPackage(packageName, dir);
-    // }
-    // return await loadPackageInfo(dir);
-    // return await {
-    //   ...loadPackageInfo(dir),
-    //   installed: loadPackageInfo(path.join(pluginsdir(), packageName)),
-    // };
   },
 
   installed_meta: 'get',
   async installed() {
-    const files = await fs.readdir(pluginsdir());
+    const files1 = await fs.readdir(packagedPluginsDir());
+    const files2 = await fs.readdir(pluginsdir());
+
     const res = [];
-    for (const packageName of files) {
-      const manifest = await fs.readFile(path.join(pluginsdir(), packageName, 'package.json')).then(x => JSON.parse(x));
-      const readmeFile = path.join(pluginsdir(), packageName, 'README.md');
+    for (const packageName of _.union(files1, files2)) {
+      if (!/^dbgate-plugin-.*$/.test(packageName)) continue;
+      const isPackaged = files1.includes(packageName);
+      const manifest = await fs
+        .readFile(path.join(isPackaged ? packagedPluginsDir() : pluginsdir(), packageName, 'package.json'), {
+          encoding: 'utf-8',
+        })
+        .then(x => JSON.parse(x));
+      const readmeFile = path.join(isPackaged ? packagedPluginsDir() : pluginsdir(), packageName, 'README.md');
+      // @ts-ignore
       if (await fs.exists(readmeFile)) {
         manifest.readme = await fs.readFile(readmeFile, { encoding: 'utf-8' });
       }
+      manifest.isPackaged = isPackaged;
       res.push(manifest);
     }
     return res;
-    // const res = await Promise.all(
-    //   files.map((packageName) =>
-    //     fs.readFile(path.join(pluginsdir(), packageName, 'package.json')).then((x) => JSON.parse(x))
-    //   )
-    // );
   },
 
-  async saveRemovePlugins() {
-    await fs.writeFile(path.join(datadir(), 'removed-plugins'), this.removedPlugins.join('\n'));
-  },
+  // async saveRemovePlugins() {
+  //   await fs.writeFile(path.join(datadir(), 'removed-plugins'), this.removedPlugins.join('\n'));
+  // },
 
   install_meta: 'post',
   async install({ packageName }) {
     if (!hasPermission(`plugins/install`)) return;
     const dir = path.join(pluginsdir(), packageName);
+    // @ts-ignore
     if (!(await fs.exists(dir))) {
       await downloadPackage(packageName, dir);
     }
     socket.emitChanged(`installed-plugins-changed`);
-    this.removedPlugins = this.removedPlugins.filter(x => x != packageName);
-    await this.saveRemovePlugins();
+    // this.removedPlugins = this.removedPlugins.filter(x => x != packageName);
+    // await this.saveRemovePlugins();
   },
 
   uninstall_meta: 'post',
@@ -127,7 +104,7 @@ module.exports = {
     const dir = path.join(pluginsdir(), packageName);
     await fs.rmdir(dir, { recursive: true });
     socket.emitChanged(`installed-plugins-changed`);
-    this.removedPlugins.push(packageName);
+    // this.removedPlugins.push(packageName);
     await this.saveRemovePlugins();
   },
 
@@ -135,6 +112,7 @@ module.exports = {
   async upgrade({ packageName }) {
     if (!hasPermission(`plugins/install`)) return;
     const dir = path.join(pluginsdir(), packageName);
+    // @ts-ignore
     if (await fs.exists(dir)) {
       await fs.rmdir(dir, { recursive: true });
       await downloadPackage(packageName, dir);
@@ -149,7 +127,7 @@ module.exports = {
     return content.commands[command](args);
   },
 
-  authTypes_meta: 'post',
+  authTypes_meta: 'get',
   async authTypes({ engine }) {
     const packageName = extractPackageName(engine);
     const content = requirePlugin(packageName);
@@ -157,46 +135,46 @@ module.exports = {
     return content.driver.getAuthTypes() || null;
   },
 
-  async _init() {
-    const installed = await this.installed();
-    try {
-      this.removedPlugins = (await fs.readFile(path.join(datadir(), 'removed-plugins'), { encoding: 'utf-8' })).split(
-        '\n'
-      );
-    } catch (err) {
-      this.removedPlugins = [];
-    }
+  // async _init() {
+  //   const installed = await this.installed();
+  //   try {
+  //     this.removedPlugins = (await fs.readFile(path.join(datadir(), 'removed-plugins'), { encoding: 'utf-8' })).split(
+  //       '\n'
+  //     );
+  //   } catch (err) {
+  //     this.removedPlugins = [];
+  //   }
 
-    for (const packageName of Object.keys(preinstallPluginMinimalVersions)) {
-      const installedVersion = installed.find(x => x.name == packageName);
-      if (installedVersion) {
-        // plugin installed, test, whether upgrade
-        const requiredVersion = preinstallPluginMinimalVersions[packageName];
-        if (compareVersions(installedVersion.version, requiredVersion) < 0) {
-          console.log(
-            `Upgrading preinstalled plugin ${packageName}, found ${installedVersion.version}, required version ${requiredVersion}`
-          );
-          await this.upgrade({ packageName });
-        } else {
-          console.log(
-            `Plugin ${packageName} not upgraded, found ${installedVersion.version}, required version ${requiredVersion}`
-          );
-        }
+  //   for (const packageName of Object.keys(preinstallPluginMinimalVersions)) {
+  //     const installedVersion = installed.find(x => x.name == packageName);
+  //     if (installedVersion) {
+  //       // plugin installed, test, whether upgrade
+  //       const requiredVersion = preinstallPluginMinimalVersions[packageName];
+  //       if (compareVersions(installedVersion.version, requiredVersion) < 0) {
+  //         console.log(
+  //           `Upgrading preinstalled plugin ${packageName}, found ${installedVersion.version}, required version ${requiredVersion}`
+  //         );
+  //         await this.upgrade({ packageName });
+  //       } else {
+  //         console.log(
+  //           `Plugin ${packageName} not upgraded, found ${installedVersion.version}, required version ${requiredVersion}`
+  //         );
+  //       }
 
-        continue;
-      }
+  //       continue;
+  //     }
 
-      if (this.removedPlugins.includes(packageName)) {
-        // plugin was remvoed, don't install again
-        continue;
-      }
+  //     if (this.removedPlugins.includes(packageName)) {
+  //       // plugin was remvoed, don't install again
+  //       continue;
+  //     }
 
-      try {
-        console.log('Preinstalling plugin', packageName);
-        await this.install({ packageName });
-      } catch (err) {
-        console.error('Error preinstalling plugin', packageName, err);
-      }
-    }
-  },
+  //     try {
+  //       console.log('Preinstalling plugin', packageName);
+  //       await this.install({ packageName });
+  //     } catch (err) {
+  //       console.error('Error preinstalling plugin', packageName, err);
+  //     }
+  //   }
+  // },
 };

packages/api/src/currentVersion.js

@@ -1,5 +1,5 @@
 
 module.exports = { 
-  version: '3.9.5',
-  buildTime: '2021-02-08T18:21:44.182Z'
+  version: '4.0.0',
+  buildTime: '2021-04-01T10:48:22.253Z'
 };

packages/api/src/main.js

@@ -79,9 +79,9 @@ function start(argument = null) {
 
   app.use('/runners/data', express.static(rundir()));
 
-  if (fs.existsSync('/home/dbgate-docker/build')) {
+  if (fs.existsSync('/home/dbgate-docker/public')) {
     // server static files inside docker container
-    app.use(express.static('/home/dbgate-docker/build'));
+    app.use(express.static('/home/dbgate-docker/public'));
   } else {
     if (argument != 'startNodeWeb') {
       app.get('/', (req, res) => {
@@ -100,7 +100,7 @@ function start(argument = null) {
       });
     });
   } else if (argument == 'startNodeWeb') {
-    app.use(express.static(path.join(__dirname, '../../dbgate-web/build')));
+    app.use(express.static(path.join(__dirname, '../../dbgate-web/public')));
     findFreePort(5000, function (err, port) {
       server.listen(port, () => {
         console.log(`DbGate API listening on port ${port}`);

packages/api/src/proc/databaseConnectionProcess.js

@@ -3,6 +3,7 @@ const childProcessChecker = require('../utility/childProcessChecker');
 const requireEngineDriver = require('../utility/requireEngineDriver');
 const connectUtility = require('../utility/connectUtility');
 const { handleProcessCommunication } = require('../utility/processComm');
+const { SqlGenerator } = require('dbgate-tools');
 
 let systemConnection;
 let storedConnection;
@@ -93,6 +94,49 @@ async function handleQueryData({ msgid, sql }) {
   }
 }
 
+async function handleCollectionData({ msgid, options }) {
+  await waitConnected();
+  const driver = requireEngineDriver(storedConnection);
+  try {
+    const result = await driver.readCollection(systemConnection, options);
+    process.send({ msgtype: 'response', msgid, result });
+  } catch (err) {
+    process.send({ msgtype: 'response', msgid, errorMessage: err.message });
+  }
+}
+
+async function handleUpdateCollection({ msgid, changeSet }) {
+  await waitConnected();
+  const driver = requireEngineDriver(storedConnection);
+  try {
+    const result = await driver.updateCollection(systemConnection, changeSet);
+    process.send({ msgtype: 'response', msgid, result });
+  } catch (err) {
+    process.send({ msgtype: 'response', msgid, errorMessage: err.message });
+  }
+}
+
+async function handleSqlPreview({ msgid, objects, options }) {
+  await waitConnected();
+  const driver = requireEngineDriver(storedConnection);
+
+  try {
+    const dmp = driver.createDumper();
+    const generator = new SqlGenerator(analysedStructure, options, objects, dmp, driver, systemConnection);
+
+    await generator.dump();
+    process.send({ msgtype: 'response', msgid, sql: dmp.s, isTruncated: generator.isTruncated });
+    if (generator.isUnhandledException) {
+      setTimeout(() => {
+        console.log('Exiting because of unhandled exception');
+        process.exit(0);
+      }, 500);
+    }
+  } catch (err) {
+    process.send({ msgtype: 'response', msgid, isError: true, errorMessage: err.message });
+  }
+}
+
 // async function handleRunCommand({ msgid, sql }) {
 //   await waitConnected();
 //   const driver = engines(storedConnection);
@@ -107,6 +151,9 @@ function handlePing() {
 const messageHandlers = {
   connect: handleConnect,
   queryData: handleQueryData,
+  updateCollection: handleUpdateCollection,
+  collectionData: handleCollectionData,
+  sqlPreview: handleSqlPreview,
   ping: handlePing,
   // runCommand: handleRunCommand,
 };

packages/api/src/proc/serverConnectionProcess.js

@@ -71,7 +71,11 @@ async function handleCreateDatabase({ name }) {
   const driver = requireEngineDriver(storedConnection);
   systemConnection = await connectUtility(driver, storedConnection);
   console.log(`RUNNING SCRIPT: CREATE DATABASE ${driver.dialect.quoteIdentifier(name)}`);
-  await driver.query(systemConnection, `CREATE DATABASE ${driver.dialect.quoteIdentifier(name)}`);
+  if (driver.createDatabase) {
+    await driver.createDatabase(systemConnection, name);
+  } else {
+    await driver.query(systemConnection, `CREATE DATABASE ${driver.dialect.quoteIdentifier(name)}`);
+  }
   await handleRefresh();
 }
 

packages/api/src/proc/sessionProcess.js

@@ -17,12 +17,18 @@ let afterConnectCallbacks = [];
 // let currentHandlers = [];
 
 class TableWriter {
-  constructor(columns, resultIndex) {
+  constructor(structure, resultIndex) {
     this.jslid = uuidv1();
     this.currentFile = path.join(jsldir(), `${this.jslid}.jsonl`);
     this.currentRowCount = 0;
     this.currentChangeIndex = 1;
-    fs.writeFileSync(this.currentFile, JSON.stringify({ columns }) + '\n');
+    fs.writeFileSync(
+      this.currentFile,
+      JSON.stringify({
+        ...structure,
+        __isStreamHeader: true,
+      }) + '\n'
+    );
     this.currentStream = fs.createWriteStream(this.currentFile, { flags: 'a' });
     this.writeCurrentStats(false, false);
     this.resultIndex = resultIndex;
@@ -92,7 +98,7 @@ class StreamHandler {
 
   recordset(columns) {
     this.closeCurrentWriter();
-    this.currentWriter = new TableWriter(columns, this.resultIndexHolder.value);
+    this.currentWriter = new TableWriter(Array.isArray(columns) ? { columns } : columns, this.resultIndexHolder.value);
     this.resultIndexHolder.value += 1;
 
     // this.writeCurrentStats();

packages/api/src/shell/copyStream.js

@@ -1,9 +1,13 @@
+const EnsureStreamHeaderStream = require('../utility/EnsureStreamHeaderStream');
+
 function copyStream(input, output) {
   return new Promise((resolve, reject) => {
+    const ensureHeader = new EnsureStreamHeaderStream();
     const finisher = output['finisher'] || output;
     finisher.on('finish', resolve);
     finisher.on('error', reject);
-    input.pipe(output);
+    input.pipe(ensureHeader);
+    ensureHeader.pipe(output);
   });
 }
 

packages/api/src/shell/jsonLinesReader.js

@@ -3,9 +3,8 @@ const stream = require('stream');
 const byline = require('byline');
 
 class ParseStream extends stream.Transform {
-  constructor({ header, limitRows }) {
+  constructor({ limitRows }) {
     super({ objectMode: true });
-    this.header = header;
     this.wasHeader = false;
     this.limitRows = limitRows;
     this.rowsWritten = 0;
@@ -13,7 +12,14 @@ class ParseStream extends stream.Transform {
   _transform(chunk, encoding, done) {
     const obj = JSON.parse(chunk);
     if (!this.wasHeader) {
-      if (!this.header) this.push({ columns: Object.keys(obj).map(columnName => ({ columnName })) });
+      if (
+        !obj.__isStreamHeader &&
+        // TODO remove isArray test
+        !Array.isArray(obj.columns)
+      ) {
+        this.push({ columns: Object.keys(obj).map(columnName => ({ columnName })) });
+      }
+      
       this.wasHeader = true;
     }
     if (!this.limitRows || this.rowsWritten < this.limitRows) {
@@ -24,12 +30,12 @@ class ParseStream extends stream.Transform {
   }
 }
 
-async function jsonLinesReader({ fileName, encoding = 'utf-8', header = true, limitRows = undefined }) {
+async function jsonLinesReader({ fileName, encoding = 'utf-8', limitRows = undefined }) {
   console.log(`Reading file ${fileName}`);
 
   const fileStream = fs.createReadStream(fileName, encoding);
   const liner = byline(fileStream);
-  const parser = new ParseStream({ header, limitRows });
+  const parser = new ParseStream({ limitRows });
   liner.pipe(parser);
   return parser;
 }

packages/api/src/shell/jsonLinesWriter.js

@@ -8,10 +8,16 @@ class StringifyStream extends stream.Transform {
     this.wasHeader = false;
   }
   _transform(chunk, encoding, done) {
+    let skip = false;
     if (!this.wasHeader) {
-      if (this.header) this.push(JSON.stringify(chunk) + '\n');
+      skip =
+        (chunk.__isStreamHeader ||
+          // TODO remove isArray test
+          Array.isArray(chunk.columns)) &&
+        !this.header;
       this.wasHeader = true;
-    } else {
+    }
+    if (!skip) {
       this.push(JSON.stringify(chunk) + '\n');
     }
     done();

packages/api/src/shell/requirePlugin.js

@@ -1,6 +1,8 @@
 const path = require('path');
-const { pluginsdir } = require('../utility/directories');
+const fs = require('fs');
+const { pluginsdir, packagedPluginsDir } = require('../utility/directories');
 const nativeModules = require('../nativeModules');
+const _isRunOnSource = require('../utility/_isRunOnSource');
 
 const loadedPlugins = {};
 
@@ -9,19 +11,31 @@ const dbgateEnv = {
   nativeModules,
 };
 
+function getModulePath(packageName) {
+  const packagedModulePath = _isRunOnSource()
+    ? path.join(packagedPluginsDir(), packageName, 'src', 'backend', 'index.js')
+    : path.join(packagedPluginsDir(), packageName, 'dist', 'backend.js');
+
+  if (fs.existsSync(packagedModulePath)) {
+    return packagedModulePath;
+  }
+
+  return path.join(pluginsdir(), packageName, 'dist', 'backend.js');
+}
+
 function requirePlugin(packageName, requiredPlugin = null) {
   if (!packageName) throw new Error('Missing packageName in plugin');
   if (loadedPlugins[packageName]) return loadedPlugins[packageName];
 
   if (requiredPlugin == null) {
     let module;
-    const modulePath = path.join(pluginsdir(), packageName, 'dist', 'backend.js');
+    const modulePath = getModulePath(packageName);
     console.log(`Loading module ${packageName} from ${modulePath}`);
     try {
       // @ts-ignore
       module = __non_webpack_require__(modulePath);
     } catch (err) {
-      console.error('Failed load webpacked module', err);
+      console.log('Failed load webpacked module', err.message);
       module = require(modulePath);
     }
     requiredPlugin = module.__esModule ? module.default : module;

packages/api/src/shell/tableReader.js

@@ -1,6 +1,5 @@
 const { quoteFullName, fullNameToString } = require('dbgate-tools');
 const requireEngineDriver = require('../utility/requireEngineDriver');
-const { decryptConnection } = require('../utility/crypting');
 const connectUtility = require('../utility/connectUtility');
 
 async function tableReader({ connection, pureName, schemaName }) {
@@ -10,6 +9,13 @@ async function tableReader({ connection, pureName, schemaName }) {
 
   const fullName = { pureName, schemaName };
 
+  if (driver.dialect.nosql) {
+    // @ts-ignore
+    console.log(`Reading collection ${fullNameToString(fullName)}`);
+    // @ts-ignore
+    return await driver.readQuery(pool, JSON.stringify(fullName));
+  }
+
   const table = await driver.analyseSingleObject(pool, fullName, 'tables');
   const query = `select * from ${quoteFullName(driver.dialect, fullName)}`;
   if (table) {

packages/api/src/utility/EnsureStreamHeaderStream.js

@@ -0,0 +1,35 @@
+const stream = require('stream');
+
+class EnsureStreamHeaderStream extends stream.Transform {
+  constructor() {
+    super({ objectMode: true });
+    this.wasHeader = false;
+  }
+  _transform(chunk, encoding, done) {
+    if (!this.wasHeader) {
+      if (chunk.__isDynamicStructure) {
+        // ignore dynamic structure header
+        done();
+        return;
+      }
+
+      if (
+        !chunk.__isStreamHeader &&
+        // TODO remove isArray test
+        !Array.isArray(chunk.columns)
+      ) {
+        this.push({
+          __isStreamHeader: true,
+          __isComputedStructure: true,
+          columns: Object.keys(chunk).map(columnName => ({ columnName })),
+        });
+      }
+
+      this.wasHeader = true;
+    }
+    this.push(chunk);
+    done();
+  }
+}
+
+module.exports = EnsureStreamHeaderStream;

packages/api/src/utility/_isRunOnSource.js

@@ -0,0 +1,5 @@
+function _isRunOnSource() {
+  return __filename.endsWith('_isRunOnSource.js');
+}
+
+module.exports = _isRunOnSource;

packages/api/src/utility/connectUtility.js

@@ -38,6 +38,10 @@ async function connectUtility(driver, storedConnection) {
       connection.ssl.key = await fs.readFile(connection.sslKeyFile);
     }
 
+    if (connection.sslCertFilePassword) {
+      connection.ssl.password = connection.sslCertFilePassword;
+    }
+
     if (!connection.ssl.key && !connection.ssl.ca && !connection.ssl.cert) {
       // TODO: provide this as an option in settings
       // or per-connection as 'reject self-signed certs'

packages/api/src/utility/directories.js

@@ -2,6 +2,8 @@ const os = require('os');
 const path = require('path');
 const fs = require('fs');
 const cleanDirectory = require('./cleanDirectory');
+const _isRunOnSource = require('./_isRunOnSource');
+const platformInfo = require('./platformInfo');
 
 const createDirectories = {};
 const ensureDirectory = (dir, clean) => {
@@ -39,6 +41,20 @@ const pluginsdir = dirFunc('plugins');
 const archivedir = dirFunc('archive');
 const filesdir = dirFunc('files');
 
+function packagedPluginsDir() {
+  if (_isRunOnSource()) {
+    return path.resolve(__dirname, '../../../../plugins');
+  }
+  if (platformInfo.isDocker) {
+    return path.resolve(__dirname, 'plugins');
+  }
+  if (process.argv[2] == 'startNodeWeb') {
+    // node_modules
+    return path.resolve(__dirname, '../../..');
+  }
+  return path.resolve(__dirname, '../../plugins');
+}
+
 module.exports = {
   datadir,
   jsldir,
@@ -48,4 +64,5 @@ module.exports = {
   ensureDirectory,
   pluginsdir,
   filesdir,
+  packagedPluginsDir,
 };

packages/datalib/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.9.5",
+  "version": "4.0.0",
   "name": "dbgate-datalib",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -12,11 +12,11 @@
     "lib"
   ],
   "dependencies": {
-    "dbgate-sqltree": "^3.9.5",
-    "dbgate-filterparser": "^3.9.5"
+    "dbgate-sqltree": "^4.0.0",
+    "dbgate-filterparser": "^4.0.0"
   },
   "devDependencies": {
-    "dbgate-types": "^3.9.5",
+    "dbgate-types": "^4.0.0",
     "@types/node": "^13.7.0",
     "typescript": "^3.7.5"
   }

packages/datalib/src/ChangeSet.ts

@@ -6,6 +6,7 @@ export interface ChangeSetItem {
   pureName: string;
   schemaName?: string;
   insertedRowIndex?: number;
+  document?: any;
   condition?: { [column: string]: string };
   fields?: { [column: string]: string };
 }
@@ -117,6 +118,43 @@ export function setChangeSetValue(
   };
 }
 
+export function setChangeSetRowData(changeSet: ChangeSet, definition: ChangeSetRowDefinition, document: any): ChangeSet {
+  if (!changeSet || !definition) return changeSet;
+  let [fieldName, existingItem] = findExistingChangeSetItem(changeSet, definition);
+  if (fieldName == 'deletes') {
+    changeSet = revertChangeSetRowChanges(changeSet, definition);
+    [fieldName, existingItem] = findExistingChangeSetItem(changeSet, definition);
+  }
+  if (existingItem) {
+    return {
+      ...changeSet,
+      [fieldName]: changeSet[fieldName].map(item =>
+        item == existingItem
+          ? {
+              ...item,
+              fields: {},
+              document,
+            }
+          : item
+      ),
+    };
+  }
+
+  return {
+    ...changeSet,
+    [fieldName]: [
+      ...changeSet[fieldName],
+      {
+        pureName: definition.pureName,
+        schemaName: definition.schemaName,
+        condition: definition.condition,
+        insertedRowIndex: definition.insertedRowIndex,
+        document,
+      },
+    ],
+  };
+}
+
 // export function batchUpdateChangeSet(
 //   changeSet: ChangeSet,
 //   rowDefinitions: ChangeSetRowDefinition[],
@@ -332,6 +370,7 @@ export function getChangeSetInsertedRows(changeSet: ChangeSet, name?: NamedObjec
 }
 
 export function changeSetInsertNewRow(changeSet: ChangeSet, name?: NamedObjectInfo): ChangeSet {
+  console.log('INSERT', name);
   const insertedRows = getChangeSetInsertedRows(changeSet, name);
   return {
     ...changeSet,
@@ -347,5 +386,6 @@ export function changeSetInsertNewRow(changeSet: ChangeSet, name?: NamedObjectIn
 }
 
 export function changeSetContainsChanges(changeSet: ChangeSet) {
+  if (!changeSet) return false;
   return changeSet.deletes.length > 0 || changeSet.updates.length > 0 || changeSet.inserts.length > 0;
 }

packages/datalib/src/CollectionGridDisplay.ts

@@ -0,0 +1,104 @@
+import _ from 'lodash';
+import { GridDisplay, ChangeCacheFunc, ChangeConfigFunc, DisplayColumn } from './GridDisplay';
+import { EngineDriver, ViewInfo, ColumnInfo, CollectionInfo } from 'dbgate-types';
+import { GridConfig, GridCache } from './GridConfig';
+
+function getObjectKeys(obj) {
+  if (_.isArray(obj)) {
+    return Object.keys(obj)
+      .slice(0, 10)
+      .map(x => parseInt(x));
+  }
+  if (_.isPlainObject(obj)) {
+    return Object.keys(obj);
+  }
+  return [];
+}
+
+function createHeaderText(path) {
+  let res = `${path[0]}`;
+  for (let i = 1; i < path.length; i++) {
+    const name = path[i];
+    if (_.isNumber(name)) res += `[${name}]`;
+    else res += `.${name}`;
+  }
+  return res;
+}
+
+function getColumnsForObject(basePath, obj, res: any[], display) {
+  for (const name of getObjectKeys(obj)) {
+    const uniqueName = [...basePath, name].join('.');
+    let column = res.find(x => x.uniqueName == uniqueName);
+    if (!column) {
+      column = getDisplayColumn(basePath, name, display);
+      if (basePath.length > 0) {
+        const lastIndex1 = _.findLastIndex(res, x => x.parentHeaderText.startsWith(column.parentHeaderText));
+        const lastIndex2 = _.findLastIndex(res, x => x.headerText == column.parentHeaderText);
+        // console.log(uniqueName, lastIndex1, lastIndex2);
+        if (lastIndex1 >= 0) res.splice(lastIndex1 + 1, 0, column);
+        else if (lastIndex2 >= 0) res.splice(lastIndex2 + 1, 0, column);
+        else res.push(column);
+      } else {
+        res.push(column);
+      }
+    }
+    if (_.isPlainObject(obj[name]) || _.isArray(obj[name])) {
+      column.isExpandable = true;
+    }
+
+    if (display.isExpandedColumn(column.uniqueName)) {
+      getColumnsForObject([...basePath, name], obj[name], res, display);
+    }
+  }
+}
+
+function getDisplayColumn(basePath, columnName, display) {
+  const uniquePath = [...basePath, columnName];
+  const uniqueName = uniquePath.join('.');
+  return {
+    columnName,
+    headerText: createHeaderText(uniquePath),
+    uniqueName,
+    uniquePath,
+    isStructured: true,
+    parentHeaderText: createHeaderText(basePath),
+    filterType: 'mongo',
+    pureName: display.collection?.pureName,
+    schemaName: display.collection?.schemaName,
+  };
+}
+
+export function analyseCollectionDisplayColumns(rows, display) {
+  const res = [];
+  for (const row of rows || []) {
+    getColumnsForObject([], row, res, display);
+  }
+  return (
+    res.map(col => ({
+      ...col,
+      isChecked: display.isColumnChecked(col),
+    })) || []
+  );
+}
+
+export class CollectionGridDisplay extends GridDisplay {
+  constructor(
+    public collection: CollectionInfo,
+    driver: EngineDriver,
+    config: GridConfig,
+    setConfig: ChangeConfigFunc,
+    cache: GridCache,
+    setCache: ChangeCacheFunc,
+    loadedRows
+  ) {
+    super(config, setConfig, cache, setCache, driver);
+    this.columns = analyseCollectionDisplayColumns(loadedRows, this);
+    this.filterable = true;
+    this.sortable = true;
+    this.editable = true;
+    this.supportsReload = true;
+    this.isDynamicStructure = true;
+    this.changeSetKeyFields = ['_id'];
+    this.baseCollection = collection;
+  }
+}

packages/datalib/src/GridDisplay.ts

@@ -1,6 +1,14 @@
 import _ from 'lodash';
 import { GridConfig, GridCache, GridConfigColumns, createGridCache, GroupFunc } from './GridConfig';
-import { ForeignKeyInfo, TableInfo, ColumnInfo, EngineDriver, NamedObjectInfo, DatabaseInfo } from 'dbgate-types';
+import {
+  ForeignKeyInfo,
+  TableInfo,
+  ColumnInfo,
+  EngineDriver,
+  NamedObjectInfo,
+  DatabaseInfo,
+  CollectionInfo,
+} from 'dbgate-types';
 import { parseFilter, getFilterType } from 'dbgate-filterparser';
 import { filterName } from './filterName';
 import { ChangeSetFieldDefinition, ChangeSetRowDefinition } from './ChangeSet';
@@ -18,9 +26,12 @@ export interface DisplayColumn {
   autoIncrement?: boolean;
   isPrimaryKey?: boolean;
   foreignKey?: ForeignKeyInfo;
+  isExpandable?: boolean;
   isChecked?: boolean;
   hintColumnName?: string;
   dataType?: string;
+  filterType?: boolean;
+  isStructured?: boolean;
 }
 
 export interface DisplayedColumnEx extends DisplayColumn {
@@ -53,12 +64,17 @@ export abstract class GridDisplay {
   ) {}
   columns: DisplayColumn[];
   baseTable?: TableInfo;
+  baseCollection?: CollectionInfo;
+  get baseTableOrCollection(): NamedObjectInfo {
+    return this.baseTable || this.baseCollection;
+  }
   changeSetKeyFields: string[] = null;
   sortable = false;
   filterable = false;
   editable = false;
   isLoadedCorrectly = true;
   supportsReload = false;
+  isDynamicStructure = false;
 
   setColumnVisibility(uniquePath: string[], isVisible: boolean) {
     const uniqueName = uniquePath.join('.');
@@ -66,7 +82,7 @@ export abstract class GridDisplay {
       this.includeInColumnSet('hiddenColumns', uniqueName, !isVisible);
     } else {
       this.includeInColumnSet('addedColumns', uniqueName, isVisible);
-      this.reload();
+      if (!this.isDynamicStructure) this.reload();
     }
   }
 
@@ -94,11 +110,7 @@ export abstract class GridDisplay {
   }
 
   reload() {
-    this.setCache(cache => ({
-      // ...cache,
-      ...createGridCache(),
-      refreshTime: new Date().getTime(),
-    }));
+    this.setCache(reloadDataCacheFunc);
   }
 
   includeInColumnSet(field: keyof GridConfigColumns, uniqueName: string, isIncluded: boolean) {
@@ -290,6 +302,28 @@ export abstract class GridDisplay {
     this.reload();
   }
 
+  showFilter(uniqueName) {
+    this.setConfig(cfg => {
+      if (!cfg.filters.uniqueName)
+        return {
+          ...cfg,
+          filters: {
+            ..._.omitBy(cfg.filters, v => !v),
+            [uniqueName]: '',
+          },
+        };
+      return cfg;
+    });
+  }
+
+  removeFilter(uniqueName) {
+    this.setConfig(cfg => ({
+      ...cfg,
+      filters: _.omit(cfg.filters, [uniqueName]),
+    }));
+    this.reload();
+  }
+
   setFilters(dct) {
     this.setConfig(cfg => ({
       ...cfg,
@@ -365,8 +399,12 @@ export abstract class GridDisplay {
   getChangeSetField(row, uniqueName, insertedRowIndex): ChangeSetFieldDefinition {
     const col = this.columns.find(x => x.uniqueName == uniqueName);
     if (!col) return null;
-    if (!this.baseTable) return null;
-    if (this.baseTable.pureName != col.pureName || this.baseTable.schemaName != col.schemaName) return null;
+    const baseTableOrCollection = this.baseTableOrCollection;
+    if (!baseTableOrCollection) return null;
+    if (baseTableOrCollection.pureName != col.pureName || baseTableOrCollection.schemaName != col.schemaName) {
+      return null;
+    }
+
     return {
       ...this.getChangeSetRow(row, insertedRowIndex),
       uniqueName: uniqueName,
@@ -375,10 +413,11 @@ export abstract class GridDisplay {
   }
 
   getChangeSetRow(row, insertedRowIndex): ChangeSetRowDefinition {
-    if (!this.baseTable) return null;
+    const baseTableOrCollection = this.baseTableOrCollection;
+    if (!baseTableOrCollection) return null;
     return {
-      pureName: this.baseTable.pureName,
-      schemaName: this.baseTable.schemaName,
+      pureName: baseTableOrCollection.pureName,
+      schemaName: baseTableOrCollection.schemaName,
       insertedRowIndex,
       condition: insertedRowIndex == null ? this.getChangeSetCondition(row) : null,
     };
@@ -535,4 +574,19 @@ export abstract class GridDisplay {
       formViewKeyRequested: null,
     }));
   }
+
+  switchToJsonView() {
+    this.setConfig(cfg => ({
+      ...cfg,
+      isJsonView: true,
+    }));
+  }
+}
+
+export function reloadDataCacheFunc(cache: GridCache): GridCache {
+  return {
+    // ...cache,
+    ...createGridCache(),
+    refreshTime: new Date().getTime(),
+  };
 }

packages/datalib/src/JslGridDisplay.ts

@@ -1,34 +1,44 @@
 import { GridDisplay, ChangeCacheFunc, ChangeConfigFunc } from './GridDisplay';
 import { QueryResultColumn } from 'dbgate-types';
 import { GridConfig, GridCache } from './GridConfig';
+import { analyseCollectionDisplayColumns } from './CollectionGridDisplay';
 
 export class JslGridDisplay extends GridDisplay {
   constructor(
     jslid,
-    columns: QueryResultColumn[],
+    structure,
     config: GridConfig,
     setConfig: ChangeConfigFunc,
     cache: GridCache,
-    setCache: ChangeCacheFunc
+    setCache: ChangeCacheFunc,
+    rows: any
   ) {
     super(config, setConfig, cache, setCache, null);
 
     this.filterable = true;
 
-    this.columns = columns
-      .map(col => ({
-        columnName: col.columnName,
-        headerText: col.columnName,
-        uniqueName: col.columnName,
-        uniquePath: [col.columnName],
-        notNull: col.notNull,
-        autoIncrement: col.autoIncrement,
-        pureName: null,
-        schemaName: null,
-      }))
-      ?.map(col => ({
-        ...col,
-        isChecked: this.isColumnChecked(col),
-      }));
+    if (structure.columns) {
+      this.columns = structure.columns
+        .map(col => ({
+          columnName: col.columnName,
+          headerText: col.columnName,
+          uniqueName: col.columnName,
+          uniquePath: [col.columnName],
+          notNull: col.notNull,
+          autoIncrement: col.autoIncrement,
+          pureName: null,
+          schemaName: null,
+        }))
+        ?.map(col => ({
+          ...col,
+          isChecked: this.isColumnChecked(col),
+        }));
+    }
+
+    if (structure.__isDynamicStructure) {
+      this.columns = analyseCollectionDisplayColumns(rows, this);
+    }
+
+    if (!this.columns) this.columns = [];
   }
 }

packages/datalib/src/MacroDefinition.ts

@@ -19,4 +19,6 @@ export interface MacroDefinition {
 export interface MacroSelectedCell {
   column: string;
   row: number;
+  rowData: any;
+  value: any;
 }

packages/datalib/src/TableFormViewDisplay.ts

@@ -18,7 +18,7 @@ import stableStringify from 'json-stable-stringify';
 import { ChangeSetFieldDefinition, ChangeSetRowDefinition } from './ChangeSet';
 
 export class TableFormViewDisplay extends FormViewDisplay {
-  // use utility functions from GridDisplay and publish result in FromViewDisplat interface
+  // use utility functions from GridDisplay and publish result in FromViewDisplay interface
   private gridDisplay: TableGridDisplay;
 
   constructor(

packages/datalib/src/TableGridDisplay.ts

@@ -59,6 +59,7 @@ export class TableGridDisplay extends GridDisplay {
           ...col,
           isChecked: this.isColumnChecked(col),
           hintColumnName: col.foreignKey ? `hint_${col.uniqueName}` : null,
+          isExpandable: !!col.foreignKey,
         })) || []
     );
   }

packages/datalib/src/index.ts

@@ -11,3 +11,4 @@ export * from './MacroDefinition';
 export * from './runMacro';
 export * from './FormViewDisplay';
 export * from './TableFormViewDisplay';
+export * from './CollectionGridDisplay';

packages/datalib/src/runMacro.ts

@@ -4,6 +4,8 @@ import uuidv1 from 'uuid/v1';
 import uuidv4 from 'uuid/v4';
 import moment from 'moment';
 import { MacroDefinition, MacroSelectedCell } from './MacroDefinition';
+import { ChangeSet, setChangeSetValue } from './ChangeSet';
+import { GridDisplay } from './GridDisplay';
 
 const getMacroFunction = {
   transformValue: code => `
@@ -183,3 +185,55 @@ export function runMacro(
   }
   return data;
 }
+
+export function compileMacroFunction(macro: MacroDefinition, errors = []) {
+  if (!macro) return null;
+  let func;
+  try {
+    func = eval(getMacroFunction[macro.type](macro.code));
+    return func;
+  } catch (err) {
+    errors.push(`Error compiling macro ${macro.name}: ${err.message}`);
+    return null;
+  }
+}
+
+export function runMacroOnValue(compiledFunc, macroArgs, value, rowIndex, row, column, errors = []) {
+  if (!compiledFunc) return value;
+  try {
+    const res = compiledFunc(value, macroArgs, modules, rowIndex, row, column);
+    return res;
+  } catch (err) {
+    errors.push(`Error processing column ${column} on row ${rowIndex}: ${err.message}`);
+    return value;
+  }
+}
+
+export function runMacroOnChangeSet(
+  macro: MacroDefinition,
+  macroArgs: {},
+  selectedCells: MacroSelectedCell[],
+  changeSet: ChangeSet,
+  display: GridDisplay
+): ChangeSet {
+  const errors = [];
+  const compiledMacroFunc = compileMacroFunction(macro, errors);
+  if (!compiledMacroFunc) return null;
+
+  let res = changeSet;
+  for (const cell of selectedCells) {
+    const definition = display.getChangeSetField(cell.rowData, cell.column, undefined);
+    const macroResult = runMacroOnValue(
+      compiledMacroFunc,
+      macroArgs,
+      cell.value,
+      cell.row,
+      cell.rowData,
+      cell.column,
+      errors
+    );
+    res = setChangeSetValue(res, definition, macroResult);
+  }
+
+  return res;
+}

packages/dbgate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbgate",
-  "version": "3.9.5",
+  "version": "4.0.0",
   "homepage": "https://dbgate.org/",
   "repository": {
     "type": "git",
@@ -19,7 +19,7 @@
     "web"
   ],
   "dependencies": {
-    "dbgate-api": "^3.9.5",
-    "dbgate-web": "^3.9.5"
+    "dbgate-api": "^4.0.0",
+    "dbgate-web": "^4.0.0"
   }
 }

packages/filterparser/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.9.5",
+  "version": "4.0.0",
   "name": "dbgate-filterparser",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -13,7 +13,7 @@
     "lib"
   ],
   "devDependencies": {
-    "dbgate-types": "^3.9.5",
+    "dbgate-types": "^4.0.0",
     "@types/jest": "^25.1.4",
     "@types/node": "^13.7.0",
     "jest": "^24.9.0",
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@types/parsimmon": "^1.10.1",
-    "dbgate-tools": "^3.9.5",
+    "dbgate-tools": "^4.0.0",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "parsimmon": "^1.13.0"

packages/filterparser/src/common.ts

@@ -0,0 +1,32 @@
+import P from 'parsimmon';
+
+export const whitespace = P.regexp(/\s*/m);
+
+export function token(parser) {
+  return parser.skip(whitespace);
+}
+
+export function word(str) {
+  return P.string(str).thru(token);
+}
+
+export function interpretEscapes(str) {
+  let escapes = {
+    b: '\b',
+    f: '\f',
+    n: '\n',
+    r: '\r',
+    t: '\t',
+  };
+  return str.replace(/\\(u[0-9a-fA-F]{4}|[^u])/, (_, escape) => {
+    let type = escape.charAt(0);
+    let hex = escape.slice(1);
+    if (type === 'u') {
+      return String.fromCharCode(parseInt(hex, 16));
+    }
+    if (escapes.hasOwnProperty(type)) {
+      return escapes[type];
+    }
+    return type;
+  });
+}

packages/filterparser/src/mongoParser.ts

@@ -0,0 +1,121 @@
+import P from 'parsimmon';
+import { interpretEscapes, token, word, whitespace } from './common';
+
+const operatorCondition = operator => value => ({
+  __placeholder__: {
+    [operator]: value,
+  },
+});
+
+const regexCondition = regexString => value => ({
+  __placeholder__: {
+    $regex: regexString.replace('#VALUE#', value),
+    $options: 'i',
+  },
+});
+
+const numberTestCondition = () => value => ({
+  $or: [
+    {
+      __placeholder__: {
+        $regex: `.*${value}.*`,
+        $options: 'i',
+      },
+    },
+    {
+      __placeholder__: value,
+    },
+  ],
+});
+
+const testCondition = (operator, value) => () => ({
+  __placeholder__: {
+    [operator]: value,
+  },
+});
+
+const compoudCondition = conditionType => conditions => {
+  if (conditions.length == 1) return conditions[0];
+  return {
+    [conditionType]: conditions,
+  };
+};
+
+const negateCondition = condition => ({
+  __placeholder__: {
+    $not: condition.__placeholder__,
+  },
+});
+
+const createParser = () => {
+  const langDef = {
+    string1: () =>
+      token(P.regexp(/"((?:\\.|.)*?)"/, 1))
+        .map(interpretEscapes)
+        .desc('string quoted'),
+
+    string2: () =>
+      token(P.regexp(/'((?:\\.|.)*?)'/, 1))
+        .map(interpretEscapes)
+        .desc('string quoted'),
+
+    number: () =>
+      token(P.regexp(/-?(0|[1-9][0-9]*)([.][0-9]+)?([eE][+-]?[0-9]+)?/))
+        .map(Number)
+        .desc('number'),
+
+    noQuotedString: () => P.regexp(/[^\s^,^'^"]+/).desc('string unquoted'),
+
+    value: r => P.alt(r.string1, r.string2, r.number, r.noQuotedString),
+    valueTestNum: r => r.number.map(numberTestCondition()),
+    valueTest: r => r.value.map(regexCondition('.*#VALUE#.*')),
+
+    comma: () => word(','),
+    not: () => word('NOT'),
+    notExists: r => r.not.then(r.exists).map(testCondition('$exists', false)),
+    exists: () => word('EXISTS').map(testCondition('$exists', true)),
+    true: () => word('TRUE').map(testCondition('$eq', true)),
+    false: () => word('FALSE').map(testCondition('$eq', false)),
+
+    eq: r => word('=').then(r.value).map(operatorCondition('$eq')),
+    ne: r => word('!=').then(r.value).map(operatorCondition('$ne')),
+    lt: r => word('<').then(r.value).map(operatorCondition('$lt')),
+    gt: r => word('>').then(r.value).map(operatorCondition('$gt')),
+    le: r => word('<=').then(r.value).map(operatorCondition('$lte')),
+    ge: r => word('>=').then(r.value).map(operatorCondition('$gte')),
+    startsWith: r => word('^').then(r.value).map(regexCondition('#VALUE#.*')),
+    endsWith: r => word('$').then(r.value).map(regexCondition('.*#VALUE#')),
+    contains: r => word('+').then(r.value).map(regexCondition('.*#VALUE#.*')),
+    startsWithNot: r => word('!^').then(r.value).map(regexCondition('#VALUE#.*')).map(negateCondition),
+    endsWithNot: r => word('!$').then(r.value).map(regexCondition('.*#VALUE#')).map(negateCondition),
+    containsNot: r => word('~').then(r.value).map(regexCondition('.*#VALUE#.*')).map(negateCondition),
+
+    element: r =>
+      P.alt(
+        r.exists,
+        r.notExists,
+        r.true,
+        r.false,
+        r.eq,
+        r.ne,
+        r.lt,
+        r.gt,
+        r.le,
+        r.ge,
+        r.startsWith,
+        r.endsWith,
+        r.contains,
+        r.startsWithNot,
+        r.endsWithNot,
+        r.containsNot,
+        r.valueTestNum,
+        r.valueTest
+      ).trim(whitespace),
+    factor: r => r.element.sepBy(whitespace).map(compoudCondition('$and')),
+    list: r => r.factor.sepBy(r.comma).map(compoudCondition('$or')),
+  };
+
+  return P.createLanguage(langDef);
+};
+
+export const mongoParser = createParser();

packages/filterparser/src/parseFilter.ts

@@ -3,37 +3,8 @@ import moment from 'moment';
 import { FilterType } from './types';
 import { Condition } from 'dbgate-sqltree';
 import { TransformType } from 'dbgate-types';
-
-const whitespace = P.regexp(/\s*/m);
-
-function token(parser) {
-  return parser.skip(whitespace);
-}
-
-function word(str) {
-  return P.string(str).thru(token);
-}
-
-function interpretEscapes(str) {
-  let escapes = {
-    b: '\b',
-    f: '\f',
-    n: '\n',
-    r: '\r',
-    t: '\t',
-  };
-  return str.replace(/\\(u[0-9a-fA-F]{4}|[^u])/, (_, escape) => {
-    let type = escape.charAt(0);
-    let hex = escape.slice(1);
-    if (type === 'u') {
-      return String.fromCharCode(parseInt(hex, 16));
-    }
-    if (escapes.hasOwnProperty(type)) {
-      return escapes[type];
-    }
-    return type;
-  });
-}
+import { interpretEscapes, token, word, whitespace } from './common';
+import { mongoParser } from './mongoParser';
 
 const binaryCondition = operator => value => ({
   conditionType: 'binary',
@@ -239,7 +210,8 @@ const createParser = (filterType: FilterType) => {
     yearMonthNum: () => P.regexp(/\d\d\d\d-\d\d?/).map(yearMonthCondition()),
     yearMonthDayNum: () => P.regexp(/\d\d\d\d-\d\d?-\d\d?/).map(yearMonthDayCondition()),
     yearMonthDayMinute: () => P.regexp(/\d\d\d\d-\d\d?-\d\d?\s+\d\d?:\d\d?/).map(yearMonthDayMinuteCondition()),
-    yearMonthDaySecond: () => P.regexp(/\d\d\d\d-\d\d?-\d\d?(\s+|T)\d\d?:\d\d?:\d\d?/).map(yearMonthDaySecondCondition()),
+    yearMonthDaySecond: () =>
+      P.regexp(/\d\d\d\d-\d\d?-\d\d?(\s+|T)\d\d?:\d\d?:\d\d?/).map(yearMonthDaySecondCondition()),
 
     value: r => P.alt(...allowedValues.map(x => r[x])),
     valueTestEq: r => r.value.map(binaryCondition('=')),
@@ -348,9 +320,11 @@ const parsers = {
   string: createParser('string'),
   datetime: createParser('datetime'),
   logical: createParser('logical'),
+  mongo: mongoParser,
 };
 
 export function parseFilter(value: string, filterType: FilterType): Condition {
+  // console.log('PARSING', value, 'WITH', filterType);
   const ast = parsers[filterType].list.tryParse(value);
   // console.log('AST', ast);
   return ast;

packages/filterparser/src/types.ts

@@ -1,3 +1,3 @@
 // import types from 'dbgate-types';
 
-export type FilterType = 'number' | 'string' | 'datetime' | 'logical';
+export type FilterType = 'number' | 'string' | 'datetime' | 'logical' | 'mongo';

packages/sqltree/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.9.5",
+  "version": "4.0.0",
   "name": "dbgate-sqltree",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -29,7 +29,7 @@
   ],
   "devDependencies": {
     "@types/node": "^13.7.0",
-    "dbgate-types": "^3.9.5",
+    "dbgate-types": "^4.0.0",
     "typescript": "^3.7.5"
   },
   "dependencies": {

packages/tools/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.9.5",
+  "version": "4.0.0",
   "name": "dbgate-tools",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -27,7 +27,7 @@
   ],
   "devDependencies": {
     "@types/node": "^13.7.0",
-    "dbgate-types": "^3.9.5",
+    "dbgate-types": "^4.0.0",
     "jest": "^24.9.0",
     "ts-jest": "^25.2.1",
     "typescript": "^3.7.5"
@@ -35,4 +35,4 @@
   "dependencies": {
     "lodash": "^4.17.15"
   }
-}
+}

packages/tools/src/DatabaseAnalyser.ts

@@ -40,7 +40,7 @@ export class DatabaseAnalyser {
     return this._runAnalysis();
   }
 
-  mergeAnalyseResult(newlyAnalysed, extractObjectId) {
+  mergeAnalyseResult(newlyAnalysed) {
     if (this.structure == null) {
       return {
         ...DatabaseAnalyser.createEmptyStructure(),
@@ -49,15 +49,15 @@ export class DatabaseAnalyser {
     }
 
     const res = {};
-    for (const field of ['tables', 'views', 'functions', 'procedures', 'triggers']) {
+    for (const field of ['tables', 'collections', 'views', 'functions', 'procedures', 'triggers']) {
       const removedIds = this.modifications
         .filter(x => x.action == 'remove' && x.objectTypeField == field)
-        .map(x => extractObjectId(x));
+        .map(x => x.objectId);
       const newArray = newlyAnalysed[field] || [];
-      const addedChangedIds = newArray.map(x => extractObjectId(x));
+      const addedChangedIds = newArray.map(x => x.objectId);
       const removeAllIds = [...removedIds, ...addedChangedIds];
       res[field] = _sortBy(
-        [...this.structure[field].filter(x => !removeAllIds.includes(extractObjectId(x))), ...newArray],
+        [...this.structure[field].filter(x => !removeAllIds.includes(x.objectId)), ...newArray],
         x => x.pureName
       );
     }
@@ -78,6 +78,7 @@ export class DatabaseAnalyser {
   static createEmptyStructure(): DatabaseInfo {
     return {
       tables: [],
+      collections: [],
       views: [],
       functions: [],
       procedures: [],

packages/tools/src/SqlDumper.ts

@@ -1,11 +1,20 @@
 import {
   ColumnInfo,
+  ConstraintInfo,
   EngineDriver,
   ForeignKeyInfo,
+  FunctionInfo,
   NamedObjectInfo,
+  PrimaryKeyInfo,
+  ProcedureInfo,
   SqlDialect,
   TableInfo,
   TransformType,
+  TriggerInfo,
+  ViewInfo,
+  IndexInfo,
+  UniqueInfo,
+  CheckInfo,
 } from 'dbgate-types';
 import _isString from 'lodash/isString';
 import _isNumber from 'lodash/isNumber';
@@ -46,11 +55,12 @@ export class SqlDumper {
   }
   putValue(value) {
     if (value === null) this.putRaw('NULL');
-    if (value === true) this.putRaw('1');
-    if (value === false) this.putRaw('0');
+    else if (value === true) this.putRaw('1');
+    else if (value === false) this.putRaw('0');
     else if (_isString(value)) this.putStringValue(value);
     else if (_isNumber(value)) this.putRaw(value.toString());
     else if (_isDate(value)) this.putStringValue(new Date(value).toISOString());
+    else this.putRaw('NULL');
   }
   putCmd(format, ...args) {
     this.put(format, ...args);
@@ -260,4 +270,189 @@ export class SqlDumper {
   }
 
   allowIdentityInsert(table: NamedObjectInfo, allow: boolean) {}
+  enableConstraints(table: NamedObjectInfo, enabled: boolean) {}
+
+  comment(value: string) {
+    if (!value) return;
+    for (const line of value.split('\n')) {
+      this.put(' -- %s', line.trimRight());
+    }
+  }
+
+  createView(obj: ViewInfo) {
+    this.putRaw(obj.createSql);
+    this.endCommand();
+  }
+  dropView(obj: ViewInfo, { testIfExists = false }) {
+    this.putCmd('^drop ^view  %f', obj);
+  }
+  alterView(obj: ViewInfo) {
+    this.putRaw(obj.createSql.replace(/create\s+view/i, 'ALTER VIEW'));
+    this.endCommand();
+  }
+  changeViewSchema(obj: ViewInfo, newSchema: string) {}
+  renameView(obj: ViewInfo, newSchema: string) {}
+
+  createProcedure(obj: ProcedureInfo) {
+    this.putRaw(obj.createSql);
+    this.endCommand();
+  }
+  dropProcedure(obj: ProcedureInfo, { testIfExists = false }) {
+    this.putCmd('^drop ^procedure  %f', obj);
+  }
+  alterProcedure(obj: ProcedureInfo) {
+    this.putRaw(obj.createSql.replace(/create\s+procedure/i, 'ALTER PROCEDURE'));
+    this.endCommand();
+  }
+  changeProcedureSchema(obj: ProcedureInfo, newSchema: string) {}
+  renameProcedure(obj: ProcedureInfo, newSchema: string) {}
+
+  createFunction(obj: FunctionInfo) {
+    this.putRaw(obj.createSql);
+    this.endCommand();
+  }
+  dropFunction(obj: FunctionInfo, { testIfExists = false }) {
+    this.putCmd('^drop ^function  %f', obj);
+  }
+  alterFunction(obj: FunctionInfo) {
+    this.putRaw(obj.createSql.replace(/create\s+function/i, 'ALTER FUNCTION'));
+    this.endCommand();
+  }
+  changeFunctionSchema(obj: FunctionInfo, newSchema: string) {}
+  renameFunction(obj: FunctionInfo, newSchema: string) {}
+
+  createTrigger(obj: TriggerInfo) {
+    this.putRaw(obj.createSql);
+    this.endCommand();
+  }
+  dropTrigger(obj: TriggerInfo, { testIfExists = false }) {
+    this.putCmd('^drop ^trigger  %f', obj);
+  }
+  alterTrigger(obj: TriggerInfo) {
+    this.putRaw(obj.createSql.replace(/create\s+trigger/i, 'ALTER TRIGGER'));
+    this.endCommand();
+  }
+  changeTriggerSchema(obj: TriggerInfo, newSchema: string) {}
+  renameTrigger(obj: TriggerInfo, newSchema: string) {}
+
+  dropConstraint(cnt: ConstraintInfo) {
+    this.putCmd('^alter ^table %f ^drop ^constraint %i', cnt, cnt.constraintName);
+  }
+  dropForeignKey(fk: ForeignKeyInfo) {
+    if (this.dialect.explicitDropConstraint) {
+      this.putCmd('^alter ^table %f ^drop ^foreign ^key %i', fk, fk.constraintName);
+    } else {
+      this.dropConstraint(fk);
+    }
+  }
+  createForeignKey(fk: ForeignKeyInfo) {
+    this.put('^alter ^table %f ^add ', fk);
+    this.createForeignKeyFore(fk);
+    this.endCommand();
+  }
+  dropPrimaryKey(pk: PrimaryKeyInfo) {
+    if (this.dialect.explicitDropConstraint) {
+      this.putCmd('^alter ^table %f ^drop ^primary ^key', pk);
+    } else {
+      this.dropConstraint(pk);
+    }
+  }
+  createPrimaryKey(pk: PrimaryKeyInfo) {
+    this.putCmd(
+      '^alter ^table %f ^add ^constraint %i ^primary ^key (%,i)',
+      pk,
+      pk.constraintName,
+      pk.columns.map(x => x.columnName)
+    );
+  }
+
+  dropIndex(ix: IndexInfo) {}
+  createIndex(ix: IndexInfo) {}
+
+  dropUnique(uq: UniqueInfo) {
+    this.dropConstraint(uq);
+  }
+  createUniqueCore(uq: UniqueInfo) {
+    this.put(
+      '^constraint %i ^unique (%,i)',
+      uq.constraintName,
+      uq.columns.map(x => x.columnName)
+    );
+  }
+
+  createUnique(uq: UniqueInfo) {
+    this.put('^alter ^table %f ^add ', uq);
+    this.createUniqueCore(uq);
+    this.endCommand();
+  }
+
+  dropCheck(ch: CheckInfo) {
+    this.dropConstraint(ch);
+  }
+
+  createCheckCore(ch: CheckInfo) {
+    this.put('^constraint %i ^check (%s)', ch.constraintName, ch.definition);
+  }
+
+  createCheck(ch: CheckInfo) {
+    this.put('^alter ^table %f ^add ', ch);
+    this.createCheckCore(ch);
+    this.endCommand();
+  }
+
+  renameConstraint(constraint: ConstraintInfo, newName: string) {}
+
+  createColumn(table: TableInfo, column: ColumnInfo, constraints: ConstraintInfo[]) {
+    this.put('^alter ^table %f ^add %i ', table, column.columnName);
+    this.columnDefinition(column);
+    this.inlineConstraints(constraints);
+    this.endCommand();
+  }
+
+  inlineConstraints(constrains: ConstraintInfo[]) {
+    if (constrains == null) return;
+    for (const cnt of constrains) {
+      if (cnt.constraintType == 'primaryKey') {
+        if (cnt.constraintName != null && !this.dialect.anonymousPrimaryKey) {
+          this.put(' ^constraint %i', cnt.constraintName);
+        }
+        this.put(' ^primary ^key ');
+      }
+    }
+  }
+
+  dropColumn(column: ColumnInfo) {
+    this.putCmd('^alter ^table %f ^drop ^column %i', column, column.columnName);
+  }
+
+  renameColumn(column: ColumnInfo, newName: string) {}
+
+  changeColumn(oldcol: ColumnInfo, newcol: ColumnInfo, constraints: ConstraintInfo[]) {}
+
+  dropTable(obj: TableInfo, { testIfExists = false }) {
+    this.putCmd('^drop ^table %f', obj);
+  }
+
+  changeTableSchema(obj: TableInfo, schema: string) {}
+
+  renameTable(obj: TableInfo, newname: string) {}
+
+  beginTransaction() {
+    this.putCmd('^begin ^transaction');
+  }
+
+  commitTransaction() {
+    this.putCmd('^commit');
+  }
+
+  alterProlog() {}
+  alterEpilog() {}
+
+  selectTableIntoNewTable(sourceName: NamedObjectInfo, targetName: NamedObjectInfo) {
+    this.putCmd('^select * ^into %f ^from %f', targetName, sourceName);
+  }
+
+  truncateTable(name: NamedObjectInfo) {
+    this.putCmd('^delete ^from %f', name);
+  }
 }

packages/tools/src/SqlGenerator.ts

@@ -0,0 +1,292 @@
+import {
+  DatabaseInfo,
+  EngineDriver,
+  FunctionInfo,
+  ProcedureInfo,
+  TableInfo,
+  TriggerInfo,
+  ViewInfo,
+} from 'dbgate-types';
+import _ from 'lodash';
+import { SqlDumper } from './SqlDumper';
+import { extendDatabaseInfo } from './structureTools';
+
+interface SqlGeneratorOptions {
+  dropTables: boolean;
+  checkIfTableExists: boolean;
+  dropReferences: boolean;
+  createTables: boolean;
+  createReferences: boolean;
+  createForeignKeys: boolean;
+  createIndexes: boolean;
+  insert: boolean;
+  skipAutoincrementColumn: boolean;
+  disableConstraints: boolean;
+  omitNulls: boolean;
+  truncate: boolean;
+
+  dropViews: boolean;
+  checkIfViewExists: boolean;
+  createViews: boolean;
+
+  dropProcedures: boolean;
+  checkIfProcedureExists: boolean;
+  createProcedures: boolean;
+
+  dropFunctions: boolean;
+  checkIfFunctionExists: boolean;
+  createFunctions: boolean;
+
+  dropTriggers: boolean;
+  checkIfTriggerExists: boolean;
+  createTriggers: boolean;
+}
+
+interface SqlGeneratorObject {
+  schemaName: string;
+  pureName: string;
+  objectTypeField: 'tables' | 'views' | 'procedures' | 'functions';
+}
+
+export class SqlGenerator {
+  private tables: TableInfo[];
+  private views: ViewInfo[];
+  private procedures: ProcedureInfo[];
+  private functions: FunctionInfo[];
+  private triggers: TriggerInfo[];
+  public dbinfo: DatabaseInfo;
+  public isTruncated = false;
+  public isUnhandledException = false;
+
+  constructor(
+    dbinfo: DatabaseInfo,
+    public options: SqlGeneratorOptions,
+    public objects: SqlGeneratorObject[],
+    public dmp: SqlDumper,
+    public driver: EngineDriver,
+    public pool
+  ) {
+    this.dbinfo = extendDatabaseInfo(dbinfo);
+    this.tables = this.extract('tables');
+    this.views = this.extract('views');
+    this.procedures = this.extract('procedures');
+    this.functions = this.extract('functions');
+    this.triggers = this.extract('triggers');
+  }
+
+  private handleException = error => {
+    console.log('Unhandled error', error);
+    this.isUnhandledException = true;
+  };
+
+  async dump() {
+    try {
+      process.on('uncaughtException', this.handleException);
+
+      this.dropObjects(this.procedures, 'Procedure');
+      if (this.checkDumper()) return;
+      this.dropObjects(this.functions, 'Function');
+      if (this.checkDumper()) return;
+      this.dropObjects(this.views, 'View');
+      if (this.checkDumper()) return;
+      this.dropObjects(this.triggers, 'Trigger');
+      if (this.checkDumper()) return;
+
+      this.dropTables();
+      if (this.checkDumper()) return;
+
+      this.createTables();
+      if (this.checkDumper()) return;
+
+      this.truncateTables();
+      if (this.checkDumper()) return;
+
+      await this.insertData();
+      if (this.checkDumper()) return;
+
+      this.createForeignKeys();
+      if (this.checkDumper()) return;
+
+      this.createObjects(this.procedures, 'Procedure');
+      if (this.checkDumper()) return;
+      this.createObjects(this.functions, 'Function');
+      if (this.checkDumper()) return;
+      this.createObjects(this.views, 'View');
+      if (this.checkDumper()) return;
+      this.createObjects(this.triggers, 'Trigger');
+      if (this.checkDumper()) return;
+    } finally {
+      process.off('uncaughtException', this.handleException);
+    }
+  }
+
+  createForeignKeys() {
+    const fks = [];
+    if (this.options.createForeignKeys) fks.push(..._.flatten(this.tables.map(x => x.foreignKeys || [])));
+    if (this.options.createReferences) fks.push(..._.flatten(this.tables.map(x => x.dependencies || [])));
+    for (const fk of _.uniqBy(fks, 'constraintName')) {
+      this.dmp.createForeignKey(fk);
+      if (this.checkDumper()) return;
+    }
+  }
+
+  truncateTables() {
+    if (this.options.truncate) {
+      for (const table of this.tables) {
+        this.dmp.truncateTable(table);
+        if (this.checkDumper()) return;
+      }
+    }
+  }
+
+  createTables() {
+    if (this.options.createTables) {
+      for (const table of this.tables) {
+        this.dmp.createTable({
+          ...table,
+          foreignKeys: [],
+          dependencies: [],
+          indexes: [],
+        });
+        if (this.checkDumper()) return;
+      }
+    }
+    if (this.options.createIndexes) {
+      for (const index of _.flatten(this.tables.map(x => x.indexes || []))) {
+        this.dmp.createIndex(index);
+      }
+    }
+  }
+
+  async insertData() {
+    if (!this.options.insert) return;
+
+    this.enableConstraints(false);
+
+    for (const table of this.tables) {
+      await this.insertTableData(table);
+      if (this.checkDumper()) return;
+    }
+
+    this.enableConstraints(true);
+  }
+
+  checkDumper() {
+    if (this.dmp.s.length > 4000000) {
+      if (!this.isTruncated) {
+        this.dmp.putRaw('\n');
+        this.dmp.comment(' *************** SQL is truncated ******************');
+        this.dmp.putRaw('\n');
+      }
+      this.isTruncated = true;
+      return true;
+    }
+    return false;
+  }
+
+  dropObjects(list, name) {
+    if (this.options[`drop${name}s`]) {
+      for (const item of list) {
+        this.dmp[`drop${name}`](item, { testIfExists: this.options[`checkIf${name}Exists`] });
+        if (this.checkDumper()) return;
+      }
+    }
+  }
+
+  createObjects(list, name) {
+    if (this.options[`create${name}s`]) {
+      for (const item of list) {
+        this.dmp[`create${name}`](item);
+        if (this.checkDumper()) return;
+      }
+    }
+  }
+
+  dropTables() {
+    if (this.options.dropReferences) {
+      for (const fk of _.flatten(this.tables.map(x => x.dependencies || []))) {
+        this.dmp.dropForeignKey(fk);
+      }
+    }
+
+    if (this.options.dropTables) {
+      for (const table of this.tables) {
+        this.dmp.dropTable(table, { testIfExists: this.options.checkIfTableExists });
+      }
+    }
+  }
+
+  async insertTableData(table: TableInfo) {
+    const dmpLocal = this.driver.createDumper();
+    dmpLocal.put('^select * ^from %f', table);
+
+    const autoinc = table.columns.find(x => x.autoIncrement);
+    if (autoinc && !this.options.skipAutoincrementColumn) {
+      this.dmp.allowIdentityInsert(table, true);
+    }
+
+    const readable = await this.driver.readQuery(this.pool, dmpLocal.s, table);
+    await this.processReadable(table, readable);
+
+    if (autoinc && !this.options.skipAutoincrementColumn) {
+      this.dmp.allowIdentityInsert(table, false);
+    }
+  }
+
+  processReadable(table: TableInfo, readable) {
+    const columnsFiltered = this.options.skipAutoincrementColumn
+      ? table.columns.filter(x => !x.autoIncrement)
+      : table.columns;
+    const columnNames = columnsFiltered.map(x => x.columnName);
+    let isClosed = false;
+    let isHeaderRead = false;
+
+    return new Promise(resolve => {
+      readable.on('data', chunk => {
+        if (isClosed) return;
+        if (!isHeaderRead) {
+          isHeaderRead = true;
+          return;
+        }
+
+        if (this.checkDumper()) {
+          isClosed = true;
+          resolve(undefined);
+          readable.destroy();
+          return;
+        }
+
+        const columnNamesCopy = this.options.omitNulls ? columnNames.filter(col => chunk[col] != null) : columnNames;
+        this.dmp.put(
+          '^insert ^into %f (%,i) ^values (%,v);&n',
+          table,
+          columnNamesCopy,
+          columnNamesCopy.map(col => chunk[col])
+        );
+      });
+      readable.on('end', () => {
+        resolve(undefined);
+      });
+    });
+  }
+
+  extract(objectTypeField) {
+    return this.dbinfo[objectTypeField].filter(x =>
+      this.objects.find(
+        y => x.pureName == y.pureName && x.schemaName == y.schemaName && y.objectTypeField == objectTypeField
+      )
+    );
+  }
+
+  enableConstraints(enabled) {
+    if (this.options.disableConstraints) {
+      if (this.driver.dialect.enableConstraintsPerTable) {
+        for (const table of this.tables) {
+          this.dmp.enableConstraints(table, enabled);
+        }
+      } else {
+        this.dmp.enableConstraints(null, enabled);
+      }
+    }
+  }
+}

packages/tools/src/createBulkInsertStreamBase.ts

@@ -69,6 +69,7 @@ export function createBulkInsertStreamBase(driver, stream, pool, name, options):
     }
     dmp.putRaw(';');
     // require('fs').writeFileSync('/home/jena/test.sql', dmp.s);
+    // console.log(dmp.s);
     await driver.query(pool, dmp.s);
   };
 

packages/tools/src/index.ts

@@ -8,3 +8,5 @@ export * from './driverBase';
 export * from './SqlDumper';
 export * from './testPermission';
 export * from './splitPostgresQuery';
+export * from './SqlGenerator';
+export * from './structureTools';

packages/tools/src/nameTools.ts

@@ -38,12 +38,12 @@ export function findObjectLike(
   if (!dbinfo) return null;
   if (schemaName) {
     // @ts-ignore
-    return dbinfo[objectTypeField].find(
+    return dbinfo[objectTypeField]?.find(
       x => equalStringLike(x.pureName, pureName) && equalStringLike(x.schemaName, schemaName)
     );
   }
   // @ts-ignore
-  return dbinfo[objectTypeField].find(x => equalStringLike(x.pureName, pureName));
+  return dbinfo[objectTypeField]?.find(x => equalStringLike(x.pureName, pureName));
 }
 
 export function findForeignKeyForColumn(table: TableInfo, column: ColumnInfo) {

packages/tools/src/structureTools.ts

@@ -0,0 +1,84 @@
+import { DatabaseInfo } from 'dbgate-types';
+import _ from 'lodash';
+
+export function addTableDependencies(db: DatabaseInfo): DatabaseInfo {
+  const allForeignKeys = _.flatten(db.tables.map(x => x.foreignKeys || []));
+  return {
+    ...db,
+    tables: db.tables.map(table => ({
+      ...table,
+      dependencies: allForeignKeys.filter(x => x.refSchemaName == table.schemaName && x.refTableName == table.pureName),
+    })),
+  };
+}
+
+function fillTableExtendedInfo(db: DatabaseInfo): DatabaseInfo {
+  return {
+    ...db,
+    tables: (db.tables || []).map(obj => ({
+      ...obj,
+      objectTypeField: 'tables',
+      columns: (obj.columns || []).map(column => ({
+        pureName: obj.pureName,
+        schemaName: obj.schemaName,
+        ...column,
+      })),
+      primaryKey: obj.primaryKey
+        ? {
+            ...obj.primaryKey,
+            pureName: obj.pureName,
+            schemaName: obj.schemaName,
+            constraintType: 'primaryKey',
+          }
+        : undefined,
+      foreignKeys: (obj.foreignKeys || []).map(cnt => ({
+        ...cnt,
+        pureName: obj.pureName,
+        schemaName: obj.schemaName,
+        constraintType: 'foreignKey',
+      })),
+      indexes: (obj.indexes || []).map(cnt => ({
+        ...cnt,
+        pureName: obj.pureName,
+        schemaName: obj.schemaName,
+        constraintType: 'index',
+      })),
+      checks: (obj.checks || []).map(cnt => ({
+        ...cnt,
+        pureName: obj.pureName,
+        schemaName: obj.schemaName,
+        constraintType: 'check',
+      })),
+      uniques: (obj.uniques || []).map(cnt => ({
+        ...cnt,
+        pureName: obj.pureName,
+        schemaName: obj.schemaName,
+        constraintType: 'unique',
+      })),
+    })),
+    collections: (db.collections || []).map(obj => ({
+      ...obj,
+      objectTypeField: 'collections',
+    })),
+    views: (db.views || []).map(obj => ({
+      ...obj,
+      objectTypeField: 'views',
+    })),
+    procedures: (db.procedures || []).map(obj => ({
+      ...obj,
+      objectTypeField: 'procedures',
+    })),
+    functions: (db.functions || []).map(obj => ({
+      ...obj,
+      objectTypeField: 'functions',
+    })),
+    triggers: (db.triggers || []).map(obj => ({
+      ...obj,
+      objectTypeField: 'triggers',
+    })),
+  };
+}
+
+export function extendDatabaseInfo(db: DatabaseInfo): DatabaseInfo {
+  return fillTableExtendedInfo(addTableDependencies(db));
+}

packages/types/dbinfo.d.ts

@@ -10,7 +10,7 @@ export interface ColumnReference {
 
 export interface ConstraintInfo extends NamedObjectInfo {
   constraintName: string;
-  constraintType: string;
+  constraintType: 'primaryKey' | 'foreignKey' | 'index' | 'check' | 'unique';
 }
 
 export interface ColumnsConstraintInfo extends ConstraintInfo {
@@ -26,7 +26,18 @@ export interface ForeignKeyInfo extends ColumnsConstraintInfo {
   deleteAction: string;
 }
 
-export interface ColumnInfo {
+export interface IndexInfo extends ColumnsConstraintInfo {
+  isUnique: boolean;
+  indexType: 'normal' | 'clustered' | 'xml' | 'spatial' | 'fulltext';
+}
+
+export interface UniqueInfo extends ColumnsConstraintInfo {}
+
+export interface CheckInfo extends ConstraintInfo {
+  definition: string;
+}
+
+export interface ColumnInfo extends NamedObjectInfo {
   columnName: string;
   notNull: boolean;
   autoIncrement: boolean;
@@ -58,8 +69,13 @@ export interface TableInfo extends DatabaseObjectInfo {
   primaryKey?: PrimaryKeyInfo;
   foreignKeys: ForeignKeyInfo[];
   dependencies?: ForeignKeyInfo[];
+  indexes?: IndexInfo[];
+  uniques?: UniqueInfo[];
+  checks?: CheckInfo[];
 }
 
+export interface CollectionInfo extends DatabaseObjectInfo {}
+
 export interface ViewInfo extends SqlObjectInfo {
   columns: ColumnInfo[];
 }
@@ -77,6 +93,7 @@ export interface SchemaInfo {
 
 export interface DatabaseInfoObjects {
   tables: TableInfo[];
+  collections: CollectionInfo[];
   views: ViewInfo[];
   procedures: ProcedureInfo[];
   functions: FunctionInfo[];

packages/types/dialect.d.ts

@@ -5,4 +5,8 @@ export interface SqlDialect {
   offsetFetchRangeSyntax?: boolean;
   quoteIdentifier(s: string): string;
   fallbackDataType?: string;
+  explicitDropConstraint?: boolean;
+  anonymousPrimaryKey?: boolean;
+  enableConstraintsPerTable?: boolean;
+  nosql?: boolean; // mongo
 }

packages/types/engines.d.ts

@@ -24,9 +24,21 @@ export interface EngineAuthType {
   disabledFields: string[];
 }
 
+export interface ReadCollectionOptions {
+  pureName: string;
+  schemaName?: string;
+
+  countDocuments?: boolean;
+  skip?: number;
+  limit?: number;
+}
+
 export interface EngineDriver {
   engine: string;
   title: string;
+  defaultPort?: number;
+  supportsDatabaseUrl?: boolean;
+  databaseUrlPlaceholder?: string;
   connect({ server, port, user, password, database }): any;
   query(pool: any, sql: string): Promise<QueryResult>;
   stream(pool: any, sql: string, options: StreamOptions);
@@ -51,6 +63,10 @@ export interface EngineDriver {
   dialect: SqlDialect;
   createDumper(): SqlDumper;
   getAuthTypes(): EngineAuthType[];
+  readCollection(pool: any, options: ReadCollectionOptions): Promise<any>;
+  updateCollection(pool: any, changeSet: any): Promise<any>;
+  getCollectionUpdateScript(changeSet: any): string;
+  createDatabase(pool: any, name: string): Promise;
 
   analyserClass?: any;
   dumperClass?: any;

packages/types/extensions.d.ts

@@ -21,6 +21,12 @@ export interface FileFormatDefinition {
   getOutputParams?: (sourceName, values) => any;
 }
 
+export interface ThemeDefinition {
+  className: string;
+  themeName: string;
+  themeType: 'light' | 'dark';
+}
+
 export interface PluginDefinition {
   packageName: string;
   manifest: any;
@@ -31,4 +37,5 @@ export interface ExtensionsDirectory {
   plugins: PluginDefinition[];
   fileFormats: FileFormatDefinition[];
   drivers: EngineDriver[];
+  themes: ThemeDefinition[];
 }

packages/types/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.9.5",
+  "version": "4.0.0",
   "name": "dbgate-types",
   "homepage": "https://dbgate.org/",
   "repository": {

packages/web/.eslintrc.js

@@ -1,28 +0,0 @@
-module.exports = {
-    "env": {
-        "browser": true,
-        "es6": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended"
-    ],
-    "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-    },
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 2018,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-        "react/prop-types": "off",
-        "no-unused-vars": "warn"
-    }
-};

packages/web/README.md

@@ -0,0 +1,105 @@
+*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+
+---
+
+# svelte app
+
+This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
+
+To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npx degit sveltejs/template svelte-app
+cd svelte-app
+```
+
+*Note that you will need to have [Node.js](https://nodejs.org) installed.*
+
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte-app
+npm install
+```
+
+...then start [Rollup](https://rollupjs.org):
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+
+By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+
+If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
+
+## Building and running in production mode
+
+To create an optimised version of the app:
+
+```bash
+npm run build
+```
+
+You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+
+
+## Single-page app mode
+
+By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
+
+If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
+
+```js
+"start": "sirv public --single"
+```
+
+## Using TypeScript
+
+This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
+
+```bash
+node scripts/setupTypeScript.js
+```
+
+Or remove the script via:
+
+```bash
+rm scripts/setupTypeScript.js
+```
+
+## Deploying to the web
+
+### With [Vercel](https://vercel.com)
+
+Install `vercel` if you haven't already:
+
+```bash
+npm install -g vercel
+```
+
+Then, from within your project folder:
+
+```bash
+cd public
+vercel deploy --name my-project
+```
+
+### With [surge](https://surge.sh/)
+
+Install `surge` if you haven't already:
+
+```bash
+npm install -g surge
+```
+
+Then, from within your project folder:
+
+```bash
+npm run build
+surge public my-project.surge.sh
+```

packages/web/package.json

@@ -1,69 +1,53 @@
 {
   "name": "dbgate-web",
-  "version": "3.9.5",
-  "files": [
-    "build"
-  ],
+  "version": "4.0.0",
   "scripts": {
-    "start": "cross-env BROWSER=none PORT=5000 react-scripts start",
-    "build:docker": "cross-env CI=false REACT_APP_API_URL=ORIGIN react-scripts build",
-    "build:app": "cross-env PUBLIC_URL=. CI=false react-scripts build",
-    "build": "cross-env CI=false REACT_APP_API_URL=ORIGIN react-scripts build",
-    "prepublishOnly": "yarn build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "ts": "tsc"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "build": "rollup -c",
+    "dev": "cross-env API_URL=http://localhost:3000 rollup -c -w",
+    "start": "sirv public",
+    "validate": "svelte-check",
+    "prepublishOnly": "yarn build"
   },
+  "files": [
+    "public"
+  ],
   "devDependencies": {
-    "@types/react": "^16.9.17",
-    "@types/styled-components": "^4.4.2",
-    "dbgate-types": "^3.9.5",
-    "typescript": "^3.7.4",
     "@ant-design/colors": "^5.0.0",
-    "@mdi/font": "^5.8.55",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@mdi/font": "^5.9.55",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-replace": "^2.4.1",
+    "@rollup/plugin-typescript": "^6.0.0",
+    "@tsconfig/svelte": "^1.0.0",
     "ace-builds": "^1.4.8",
-    "axios": "^0.19.0",
     "chart.js": "^2.9.4",
-    "compare-versions": "^3.6.0",
-    "cross-env": "^6.0.3",
-    "dbgate-datalib": "^3.9.5",
-    "dbgate-sqltree": "^3.9.5",
-    "dbgate-tools": "^3.9.5",
-    "eslint": "^6.8.0",
-    "eslint-plugin-react": "^7.17.0",
+    "cross-env": "^7.0.3",
+    "dbgate-datalib": "^4.0.0",
+    "dbgate-sqltree": "^4.0.0",
+    "dbgate-tools": "^4.0.0",
+    "dbgate-types": "^4.0.0",
+    "file-selector": "^0.2.4",
     "json-stable-stringify": "^1.0.1",
     "localforage": "^1.9.0",
-    "markdown-to-jsx": "^7.1.0",
+    "lodash": "^4.17.15",
     "randomcolor": "^0.6.2",
-    "react": "^16.12.0",
-    "react-ace": "^8.0.0",
-    "react-chartjs-2": "^2.11.1",
-    "react-dom": "^16.12.0",
-    "react-dropzone": "^11.2.3",
-    "react-helmet": "^6.1.0",
-    "react-json-view": "^1.19.1",
-    "react-modal": "^3.11.1",
-    "react-scripts": "3.3.0",
-    "react-select": "^3.1.0",
     "resize-observer-polyfill": "^1.5.1",
+    "rollup": "^2.3.4",
+    "rollup-plugin-copy": "^3.3.0",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "sirv-cli": "^1.0.0",
     "socket.io-client": "^2.3.0",
     "sql-formatter": "^2.3.3",
-    "styled-components": "^4.4.1",
+    "svelte": "^3.35.0",
+    "svelte-check": "^1.0.0",
+    "svelte-markdown": "^0.1.4",
+    "svelte-preprocess": "^4.0.0",
+    "svelte-select": "^3.17.0",
+    "tslib": "^2.0.0",
+    "typescript": "^3.9.3",
     "uuid": "^3.4.0"
   }
-}
+}

packages/web/public/bulma.css

@@ -0,0 +1,419 @@
+.m-0 {
+  margin: 0 !important;
+}
+
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mr-0 {
+  margin-right: 0 !important;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.ml-0 {
+  margin-left: 0 !important;
+}
+
+.mx-0 {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.m-1 {
+  margin: 0.25rem !important;
+}
+
+.mt-1 {
+  margin-top: 0.25rem !important;
+}
+
+.mr-1 {
+  margin-right: 0.25rem !important;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem !important;
+}
+
+.ml-1 {
+  margin-left: 0.25rem !important;
+}
+
+.mx-1 {
+  margin-left: 0.25rem !important;
+  margin-right: 0.25rem !important;
+}
+
+.my-1 {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
+
+.m-2 {
+  margin: 0.5rem !important;
+}
+
+.mt-2 {
+  margin-top: 0.5rem !important;
+}
+
+.mr-2 {
+  margin-right: 0.5rem !important;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem !important;
+}
+
+.ml-2 {
+  margin-left: 0.5rem !important;
+}
+
+.mx-2 {
+  margin-left: 0.5rem !important;
+  margin-right: 0.5rem !important;
+}
+
+.my-2 {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+}
+
+.m-3 {
+  margin: 0.75rem !important;
+}
+
+.mt-3 {
+  margin-top: 0.75rem !important;
+}
+
+.mr-3 {
+  margin-right: 0.75rem !important;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem !important;
+}
+
+.ml-3 {
+  margin-left: 0.75rem !important;
+}
+
+.mx-3 {
+  margin-left: 0.75rem !important;
+  margin-right: 0.75rem !important;
+}
+
+.my-3 {
+  margin-top: 0.75rem !important;
+  margin-bottom: 0.75rem !important;
+}
+
+.m-4 {
+  margin: 1rem !important;
+}
+
+.mt-4 {
+  margin-top: 1rem !important;
+}
+
+.mr-4 {
+  margin-right: 1rem !important;
+}
+
+.mb-4 {
+  margin-bottom: 1rem !important;
+}
+
+.ml-4 {
+  margin-left: 1rem !important;
+}
+
+.mx-4 {
+  margin-left: 1rem !important;
+  margin-right: 1rem !important;
+}
+
+.my-4 {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.m-5 {
+  margin: 1.5rem !important;
+}
+
+.mt-5 {
+  margin-top: 1.5rem !important;
+}
+
+.mr-5 {
+  margin-right: 1.5rem !important;
+}
+
+.mb-5 {
+  margin-bottom: 1.5rem !important;
+}
+
+.ml-5 {
+  margin-left: 1.5rem !important;
+}
+
+.mx-5 {
+  margin-left: 1.5rem !important;
+  margin-right: 1.5rem !important;
+}
+
+.my-5 {
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
+}
+
+.m-6 {
+  margin: 3rem !important;
+}
+
+.mt-6 {
+  margin-top: 3rem !important;
+}
+
+.mr-6 {
+  margin-right: 3rem !important;
+}
+
+.mb-6 {
+  margin-bottom: 3rem !important;
+}
+
+.ml-6 {
+  margin-left: 3rem !important;
+}
+
+.mx-6 {
+  margin-left: 3rem !important;
+  margin-right: 3rem !important;
+}
+
+.my-6 {
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important;
+}
+
+.p-0 {
+  padding: 0 !important;
+}
+
+.pt-0 {
+  padding-top: 0 !important;
+}
+
+.pr-0 {
+  padding-right: 0 !important;
+}
+
+.pb-0 {
+  padding-bottom: 0 !important;
+}
+
+.pl-0 {
+  padding-left: 0 !important;
+}
+
+.px-0 {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.p-1 {
+  padding: 0.25rem !important;
+}
+
+.pt-1 {
+  padding-top: 0.25rem !important;
+}
+
+.pr-1 {
+  padding-right: 0.25rem !important;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem !important;
+}
+
+.pl-1 {
+  padding-left: 0.25rem !important;
+}
+
+.px-1 {
+  padding-left: 0.25rem !important;
+  padding-right: 0.25rem !important;
+}
+
+.py-1 {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
+.p-2 {
+  padding: 0.5rem !important;
+}
+
+.pt-2 {
+  padding-top: 0.5rem !important;
+}
+
+.pr-2 {
+  padding-right: 0.5rem !important;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem !important;
+}
+
+.pl-2 {
+  padding-left: 0.5rem !important;
+}
+
+.px-2 {
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+}
+
+.py-2 {
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
+}
+
+.p-3 {
+  padding: 0.75rem !important;
+}
+
+.pt-3 {
+  padding-top: 0.75rem !important;
+}
+
+.pr-3 {
+  padding-right: 0.75rem !important;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem !important;
+}
+
+.pl-3 {
+  padding-left: 0.75rem !important;
+}
+
+.px-3 {
+  padding-left: 0.75rem !important;
+  padding-right: 0.75rem !important;
+}
+
+.py-3 {
+  padding-top: 0.75rem !important;
+  padding-bottom: 0.75rem !important;
+}
+
+.p-4 {
+  padding: 1rem !important;
+}
+
+.pt-4 {
+  padding-top: 1rem !important;
+}
+
+.pr-4 {
+  padding-right: 1rem !important;
+}
+
+.pb-4 {
+  padding-bottom: 1rem !important;
+}
+
+.pl-4 {
+  padding-left: 1rem !important;
+}
+
+.px-4 {
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
+
+.py-4 {
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+.p-5 {
+  padding: 1.5rem !important;
+}
+
+.pt-5 {
+  padding-top: 1.5rem !important;
+}
+
+.pr-5 {
+  padding-right: 1.5rem !important;
+}
+
+.pb-5 {
+  padding-bottom: 1.5rem !important;
+}
+
+.pl-5 {
+  padding-left: 1.5rem !important;
+}
+
+.px-5 {
+  padding-left: 1.5rem !important;
+  padding-right: 1.5rem !important;
+}
+
+.py-5 {
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important;
+}
+
+.p-6 {
+  padding: 3rem !important;
+}
+
+.pt-6 {
+  padding-top: 3rem !important;
+}
+
+.pr-6 {
+  padding-right: 3rem !important;
+}
+
+.pb-6 {
+  padding-bottom: 3rem !important;
+}
+
+.pl-6 {
+  padding-left: 3rem !important;
+}
+
+.px-6 {
+  padding-left: 3rem !important;
+  padding-right: 3rem !important;
+}
+
+.py-6 {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
+}

packages/web/public/dimensions.css

@@ -0,0 +1,22 @@
+:root {
+  --dim-widget-icon-size: 60px;
+  --dim-statusbar-height: 20px;
+  --dim-left-panel-width: 300px;
+  --dim-tabs-panel-height: 53px;
+  --dim-tabs-height: 33px;
+  --dim-splitter-thickness: 3px;
+
+  --dim-visible-left-panel: 1; /* set from JS */
+  --dim-content-left: calc(
+    var(--dim-widget-icon-size) + var(--dim-visible-left-panel) *
+      (var(--dim-left-panel-width) + var(--dim-splitter-thickness))
+  );
+
+  --dim-visible-toolbar: 1; /* set from JS */
+
+  --dim-toolbar-height: 30px;
+  --dim-header-top: calc(var(--dim-toolbar-height) * var(--dim-visible-toolbar));
+  --dim-content-top: calc(var(--dim-header-top) + var(--dim-tabs-panel-height));
+
+  --dim-large-form-margin: 20px;
+}

packages/web/public/global.css

@@ -0,0 +1,149 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans,
+    sans-serif;
+  font-size: 14px;
+  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+	  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+	  sans-serif; 
+	  */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.horizontal-split-handle {
+  background-color: var(--theme-border);
+  width: var(--dim-splitter-thickness);
+  cursor: col-resize;
+}
+.horizontal-split-handle:hover {
+  background-color: var(--theme-bg-2);
+}
+
+.vertical-split-handle {
+  background-color: var(--theme-border);
+  height: var(--dim-splitter-thickness);
+  cursor: row-resize;
+}
+.vertical-split-handle:hover {
+  background-color: var(--theme-bg-2);
+}
+
+.icon-invisible {
+  visibility: hidden;
+}
+.space-between {
+  display: flex;
+  justify-content: space-between;
+}
+.flex {
+  display: flex;
+}
+.flexcol {
+  display: flex;
+  flex-direction: column;
+}
+.nowrap {
+  white-space: nowrap;
+}
+.bold {
+  font-weight: bold;
+}
+.flex1 {
+  flex: 1;
+}
+.relative {
+  position: relative;
+}
+
+.col-9 {
+  flex-basis: 75%;
+  max-width: 75%;
+}
+.col-8 {
+  flex-basis: 66.6667%;
+  max-width: 66.6667%;
+}
+.col-6 {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+.col-4 {
+  flex-basis: 33.3333%;
+  max-width: 33.3333%;
+}
+.col-3 {
+  flex-basis: 25%;
+  max-width: 25%;
+}
+
+.largeFormMarker input[type='text'] {
+  width: 100%;
+  padding: 10px 10px;
+  font-size: 14px;
+  box-sizing: border-box;
+  border-radius: 4px;
+}
+
+.largeFormMarker input[type='password'] {
+  width: 100%;
+  padding: 10px 10px;
+  font-size: 14px;
+  box-sizing: border-box;
+  border-radius: 4px;
+}
+
+.largeFormMarker select {
+  width: 100%;
+  padding: 10px 10px;
+  font-size: 14px;
+  box-sizing: border-box;
+  border-radius: 4px;
+}
+
+body *::-webkit-scrollbar {
+  height: 0.8em;
+  width: 0.8em;
+}
+body *::-webkit-scrollbar-track {
+  border-radius: 1px;
+  background-color: var(--theme-bg-1);
+}
+body *::-webkit-scrollbar-corner {
+  border-radius: 1px;
+  background-color: var(--theme-bg-2);
+}
+
+body *::-webkit-scrollbar-thumb {
+  border-radius: 1px;
+  background-color: var(--theme-bg-3);
+}
+
+body *::-webkit-scrollbar-thumb:hover {
+  background-color: var(--theme-bg-4);
+}
+
+input {
+  background-color: var(--theme-bg-0);
+  color: var(--theme-font-1);
+  border: 1px solid var(--theme-border);
+}
+
+input[disabled] {
+  background-color: var(--theme-bg-1);
+}
+
+select {
+  background-color: var(--theme-bg-0);
+  color: var(--theme-font-1);
+  border: 1px solid var(--theme-border);
+}
+
+select[disabled] {
+  background-color: var(--theme-bg-1);
+}
+
+textarea {
+  background-color: var(--theme-bg-0);
+  color: var(--theme-font-1);
+  border: 1px solid var(--theme-border);
+}

packages/web/public/icon-colors.css

@@ -0,0 +1,32 @@
+.color-icon-blue {
+  color: var(--theme-icon-blue);
+}
+
+.color-icon-green {
+  color: var(--theme-icon-green);
+}
+
+.color-icon-red {
+  color: var(--theme-icon-red);
+}
+
+.color-icon-gold {
+  color: var(--theme-icon-gold);
+}
+
+.color-icon-yellow {
+  color: var(--theme-icon-yellow);
+}
+
+.color-icon-magenta {
+  color: var(--theme-icon-magenta);
+}
+
+
+.color-icon-inv-green {
+  color: var(--theme-icon-inv-green);
+}
+
+.color-icon-inv-red {
+  color: var(--theme-icon-inv-red);
+}

packages/web/public/index.html

@@ -2,43 +2,28 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description"
-    content="DbGate - web based opensource database administration tool for MS SQL, MySQL, Postgre SQL" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-  <title>DbGate</title>
+	<title>DbGate</title>
+	<meta name="theme-color" content="#000000" />
+	<meta name="description"
+		content="DbGate - web based opensource database administration tool for MS SQL, MySQL, Postgre SQL" />
+
+	<link rel='icon' type='image/png' href='favicon.ico'>
+	<link rel="manifest" href="manifest.json" />
+
+	<link rel='stylesheet' href='global.css'>
+	<link rel='stylesheet' href='dimensions.css'>
+	<link rel='stylesheet' href='bulma.css'>
+	<link rel='stylesheet' href='icon-colors.css'>
+	<link rel='stylesheet' href='build/bundle.css'>
+	<link rel='stylesheet' href='build/fonts/materialdesignicons.css'>
+
+	<script defer src='build/bundle.js'></script>
 </head>
 
 <body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root">Loading DbGate...</div>
-  <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
 </body>
 
 </html>

packages/web/public/robots.txt

@@ -1,2 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *

packages/web/public/splash.css

@@ -1,16 +0,0 @@
-body {
-  background: #666;
-}
-
-div {
-  color: white;
-  font-size: 25pt;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  text-align: center;
-  font-family: Arial, Helvetica, sans-serif;
-  margin-top: 40px;
-}

packages/web/public/splash.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <link rel="stylesheet" href="splash.css">
-</head>
-
-<body>
-    <div>Starting DbGate...</div>
-</body>
-
-</html>

packages/web/rollup.config.js

@@ -0,0 +1,102 @@
+import svelte from 'rollup-plugin-svelte';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import livereload from 'rollup-plugin-livereload';
+import copy from 'rollup-plugin-copy';
+import { terser } from 'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';
+import replace from '@rollup/plugin-replace';
+import css from 'rollup-plugin-css-only';
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+  let server;
+
+  function toExit() {
+    if (server) server.kill(0);
+  }
+
+  return {
+    writeBundle() {
+      if (server) return;
+      server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+        stdio: ['ignore', 'inherit', 'inherit'],
+        shell: true,
+      });
+
+      process.on('SIGTERM', toExit);
+      process.on('exit', toExit);
+    },
+  };
+}
+
+export default {
+  input: 'src/main.ts',
+  output: {
+    sourcemap: true,
+    format: 'iife',
+    name: 'app',
+    file: 'public/build/bundle.js',
+  },
+  plugins: [
+    copy({
+      targets: [
+        {
+          src: '../../node_modules/@mdi/font/css/materialdesignicons.css',
+          dest: 'public/build/fonts/',
+        },
+        {
+          src: '../../node_modules/@mdi/font/fonts/*',
+          dest: 'public/build/fonts/',
+        },
+      ],
+    }),
+
+    replace({
+      'process.env.API_URL': JSON.stringify(process.env.API_URL),
+    }),
+
+    svelte({
+      preprocess: sveltePreprocess({ sourceMap: !production }),
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production,
+      },
+    }),
+    // we'll extract any component CSS out into
+    // a separate file - better for performance
+    css({ output: 'bundle.css' }),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+      dedupe: ['svelte'],
+    }),
+    commonjs(),
+    typescript({
+      sourceMap: !production,
+      inlineSources: !production,
+    }),
+
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload('public'),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser(),
+  ],
+  watch: {
+    clearScreen: false,
+  },
+};

packages/web/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

packages/web/src/App.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import './index.css';
-import Screen from './Screen';
-import {
-  CurrentWidgetProvider,
-  CurrentDatabaseProvider,
-  OpenedTabsProvider,
-  OpenedConnectionsProvider,
-  LeftPanelWidthProvider,
-  CurrentArchiveProvider,
-  CurrentThemeProvider,
-} from './utility/globalState';
-import { SocketProvider } from './utility/SocketProvider';
-import ConnectionsPinger from './utility/ConnectionsPinger';
-import { ModalLayerProvider } from './modals/showModal';
-import UploadsProvider from './utility/UploadsProvider';
-import ThemeHelmet from './themes/ThemeHelmet';
-import PluginsProvider from './plugins/PluginsProvider';
-import { ExtensionsProvider } from './utility/useExtensions';
-import { MenuLayerProvider } from './modals/showMenu';
-
-function App() {
-  return (
-    <CurrentWidgetProvider>
-      <CurrentDatabaseProvider>
-        <SocketProvider>
-          <OpenedTabsProvider>
-            <OpenedConnectionsProvider>
-              <LeftPanelWidthProvider>
-                <ConnectionsPinger>
-                  <PluginsProvider>
-                    <ExtensionsProvider>
-                      <CurrentArchiveProvider>
-                        <CurrentThemeProvider>
-                          <UploadsProvider>
-                            <ModalLayerProvider>
-                              <MenuLayerProvider>
-                                <ThemeHelmet />
-                                <Screen />
-                              </MenuLayerProvider>
-                            </ModalLayerProvider>
-                          </UploadsProvider>
-                        </CurrentThemeProvider>
-                      </CurrentArchiveProvider>
-                    </ExtensionsProvider>
-                  </PluginsProvider>
-                </ConnectionsPinger>
-              </LeftPanelWidthProvider>
-            </OpenedConnectionsProvider>
-          </OpenedTabsProvider>
-        </SocketProvider>
-      </CurrentDatabaseProvider>
-    </CurrentWidgetProvider>
-  );
-}
-
-export default App;

packages/web/src/App.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import CommandListener from './commands/CommandListener.svelte';
+  import DataGridRowHeightMeter from './datagrid/DataGridRowHeightMeter.svelte';
+
+  import PluginsProvider from './plugins/PluginsProvider.svelte';
+  import Screen from './Screen.svelte';
+  import ErrorHandler from './utility/ErrorHandler.svelte';
+  import OpenTabsOnStartup from './utility/OpenTabsOnStartup.svelte';
+</script>
+
+<DataGridRowHeightMeter />
+<ErrorHandler />
+<PluginsProvider />
+<CommandListener />
+<OpenTabsOnStartup />
+<Screen />

packages/web/src/App.test.js

@@ -1,11 +0,0 @@
-// @ts-nocheck
-
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

packages/web/src/DragAndDropFileTarget.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { FontIcon } from './icons';
-import useTheme from './theme/useTheme';
-import getElectron from './utility/getElectron';
-import useExtensions from './utility/useExtensions';
-
-const TargetStyled = styled.div`
-  position: fixed;
-  display: flex;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: ${props => props.theme.main_background_blue[3]};
-  align-items: center;
-  justify-content: space-around;
-  z-index: 1000;
-`;
-
-const InfoBox = styled.div``;
-
-const IconWrapper = styled.div`
-  display: flex;
-  justify-content: space-around;
-  font-size: 50px;
-  margin-bottom: 20px;
-`;
-
-const InfoWrapper = styled.div`
-  display: flex;
-  justify-content: space-around;
-  margin-top: 10px;
-`;
-
-const TitleWrapper = styled.div`
-  font-size: 30px;
-  display: flex;
-  justify-content: space-around;
-`;
-
-export default function DragAndDropFileTarget({ isDragActive, inputProps }) {
-  const theme = useTheme();
-  const { fileFormats } = useExtensions();
-  const electron = getElectron();
-  const fileTypeNames = fileFormats.filter(x => x.readerFunc).map(x => x.name);
-  if (electron) fileTypeNames.push('SQL');
-  return (
-    !!isDragActive && (
-      <TargetStyled theme={theme}>
-        <InfoBox>
-          <IconWrapper>
-            <FontIcon icon="icon cloud-upload" />
-          </IconWrapper>
-          <TitleWrapper>Drop the files to upload to DbGate</TitleWrapper>
-          <InfoWrapper>Supported file types: {fileTypeNames.join(', ')}</InfoWrapper>
-        </InfoBox>
-        <input {...inputProps} />
-      </TargetStyled>
-    )
-  );
-}

packages/web/src/DragAndDropFileTarget.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import FontIcon from './icons/FontIcon.svelte';
+
+  import { extensions } from './stores';
+
+  import getElectron from './utility/getElectron';
+
+  const electron = getElectron();
+  $: fileTypeNames = _.compact([
+    ...$extensions.fileFormats.filter(x => x.readerFunc).map(x => x.name),
+    electron ? 'SQL' : null,
+  ]);
+</script>
+
+<div class="target">
+  <div>
+    <div class="icon">
+      <FontIcon icon="icon cloud-upload" />
+    </div>
+    <div class="title">Drop the files to upload to DbGate</div>
+    <div class="info">Supported file types: {fileTypeNames.join(', ')}</div>
+  </div>
+</div>
+
+<style>
+  .target {
+    position: fixed;
+    display: flex;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--theme-bg-selected);
+    align-items: center;
+    justify-content: space-around;
+    z-index: 1000;
+  }
+  .icon {
+    display: flex;
+    justify-content: space-around;
+    font-size: 50px;
+    margin-bottom: 20px;
+  }
+  .info {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 10px;
+  }
+  .title {
+    font-size: 30px;
+    display: flex;
+    justify-content: space-around;
+  }
+</style>

packages/web/src/Screen.js

@@ -1,147 +0,0 @@
-// @ts-nocheck
-
-import React from 'react';
-import dimensions from './theme/dimensions';
-import styled from 'styled-components';
-import TabsPanel from './TabsPanel';
-import TabContent from './TabContent';
-import WidgetIconPanel from './widgets/WidgetIconPanel';
-import { useCurrentWidget, useLeftPanelWidth, useSetLeftPanelWidth } from './utility/globalState';
-import WidgetContainer from './widgets/WidgetContainer';
-import ToolBar from './widgets/Toolbar';
-import StatusBar from './widgets/StatusBar';
-import { useSplitterDrag, HorizontalSplitHandle } from './widgets/Splitter';
-import { ModalLayer } from './modals/showModal';
-import DragAndDropFileTarget from './DragAndDropFileTarget';
-import { useUploadsZone } from './utility/UploadsProvider';
-import useTheme from './theme/useTheme';
-import { MenuLayer } from './modals/showMenu';
-import ErrorBoundary, { ErrorBoundaryTest } from './utility/ErrorBoundary';
-
-const BodyDiv = styled.div`
-  position: fixed;
-  top: ${dimensions.tabsPanel.height + dimensions.toolBar.height}px;
-  left: ${props => props.contentLeft}px;
-  bottom: ${dimensions.statusBar.height}px;
-  right: 0;
-  background-color: ${props => props.theme.content_background};
-`;
-
-const ToolBarDiv = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background-color: ${props => props.theme.toolbar_background};
-  height: ${dimensions.toolBar.height}px;
-`;
-
-const IconBar = styled.div`
-  position: fixed;
-  top: ${dimensions.toolBar.height}px;
-  left: 0;
-  bottom: ${dimensions.statusBar.height}px;
-  width: ${dimensions.widgetMenu.iconSize}px;
-  background-color: ${props => props.theme.widget_background};
-`;
-
-const LeftPanel = styled.div`
-  position: fixed;
-  top: ${dimensions.toolBar.height}px;
-  left: ${dimensions.widgetMenu.iconSize}px;
-  bottom: ${dimensions.statusBar.height}px;
-  background-color: ${props => props.theme.left_background};
-  display: flex;
-`;
-
-const TabsPanelContainer = styled.div`
-  display: flex;
-  position: fixed;
-  top: ${dimensions.toolBar.height}px;
-  left: ${props => props.contentLeft}px;
-  height: ${dimensions.tabsPanel.height}px;
-  right: 0;
-  background-color: ${props => props.theme.tabs_background2};
-  border-top: 1px solid ${props => props.theme.border};
-
-  overflow-x: auto;
-
-  ::-webkit-scrollbar {
-    height: 7px;
-  }
-}
-`;
-
-const StausBarContainer = styled.div`
-  position: fixed;
-  height: ${dimensions.statusBar.height}px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: ${props => props.theme.statusbar_background};
-`;
-
-const ScreenHorizontalSplitHandle = styled(HorizontalSplitHandle)`
-  position: absolute;
-  top: ${dimensions.toolBar.height}px;
-  bottom: ${dimensions.statusBar.height}px;
-`;
-
-// const StyledRoot = styled.div`
-//   // color: ${(props) => props.theme.fontColor};
-// `;
-
-export default function Screen() {
-  const theme = useTheme();
-  const currentWidget = useCurrentWidget();
-  const leftPanelWidth = useLeftPanelWidth();
-  const setLeftPanelWidth = useSetLeftPanelWidth();
-  const contentLeft = currentWidget
-    ? dimensions.widgetMenu.iconSize + leftPanelWidth + dimensions.splitter.thickness
-    : dimensions.widgetMenu.iconSize;
-  const toolbarPortalRef = React.useRef();
-  const statusbarPortalRef = React.useRef();
-  const onSplitDown = useSplitterDrag('clientX', diff => setLeftPanelWidth(v => v + diff));
-
-  const { getRootProps, getInputProps, isDragActive } = useUploadsZone();
-
-  return (
-    <div {...getRootProps()}>
-      <ErrorBoundary>
-        <ToolBarDiv theme={theme}>
-          <ToolBar toolbarPortalRef={toolbarPortalRef} />
-        </ToolBarDiv>
-        <IconBar theme={theme}>
-          <WidgetIconPanel />
-        </IconBar>
-        {!!currentWidget && (
-          <LeftPanel theme={theme}>
-            <ErrorBoundary>
-              <WidgetContainer />
-            </ErrorBoundary>
-          </LeftPanel>
-        )}
-        {!!currentWidget && (
-          <ScreenHorizontalSplitHandle
-            onMouseDown={onSplitDown}
-            theme={theme}
-            style={{ left: leftPanelWidth + dimensions.widgetMenu.iconSize }}
-          />
-        )}
-        <TabsPanelContainer contentLeft={contentLeft} theme={theme}>
-          <TabsPanel></TabsPanel>
-        </TabsPanelContainer>
-        <BodyDiv contentLeft={contentLeft} theme={theme}>
-          <TabContent toolbarPortalRef={toolbarPortalRef} statusbarPortalRef={statusbarPortalRef} />
-        </BodyDiv>
-        <StausBarContainer theme={theme}>
-          <StatusBar statusbarPortalRef={statusbarPortalRef} />
-        </StausBarContainer>
-        <ModalLayer />
-        <MenuLayer />
-
-        <DragAndDropFileTarget inputProps={getInputProps()} isDragActive={isDragActive} />
-      </ErrorBoundary>
-    </div>
-  );
-}

packages/web/src/Screen.svelte

@@ -0,0 +1,142 @@
+<script>
+  import WidgetContainer from './widgets/WidgetContainer.svelte';
+  import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
+  import {
+    currentTheme,
+    currentThemeDefinition,
+    isFileDragActive,
+    leftPanelWidth,
+    selectedWidget,
+    visibleCommandPalette,
+    visibleToolbar,
+  } from './stores';
+  import TabsPanel from './widgets/TabsPanel.svelte';
+  import TabRegister from './TabRegister.svelte';
+  import CommandPalette from './commands/CommandPalette.svelte';
+  import Toolbar from './widgets/Toolbar.svelte';
+  import splitterDrag from './utility/splitterDrag';
+  import CurrentDropDownMenu from './modals/CurrentDropDownMenu.svelte';
+  import StatusBar from './widgets/StatusBar.svelte';
+  import ModalLayer from './modals/ModalLayer.svelte';
+  import DragAndDropFileTarget from './DragAndDropFileTarget.svelte';
+  import dragDropFileTarget from './utility/dragDropFileTarget';
+
+  $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
+</script>
+
+<div class={`${$currentTheme} ${currentThemeType} root`} use:dragDropFileTarget>
+  <div class="iconbar">
+    <WidgetIconPanel />
+  </div>
+  <div class="statusbar">
+    <StatusBar />
+  </div>
+  {#if $selectedWidget}
+    <div class="leftpanel">
+      <WidgetContainer />
+    </div>
+  {/if}
+  <div class="tabs">
+    <TabsPanel />
+  </div>
+  <div class="content">
+    <TabRegister />
+  </div>
+  {#if $selectedWidget}
+    <div
+      class="horizontal-split-handle splitter"
+      use:splitterDrag={'clientX'}
+      on:resizeSplitter={e => leftPanelWidth.update(x => x + e.detail)}
+    />
+  {/if}
+  {#if $visibleCommandPalette}
+    <div class="commads">
+      <CommandPalette />
+    </div>
+  {/if}
+  {#if $visibleToolbar}
+    <div class="toolbar">
+      <Toolbar />
+    </div>
+  {/if}
+  <CurrentDropDownMenu />
+  <ModalLayer />
+  {#if $isFileDragActive}
+    <DragAndDropFileTarget />
+  {/if}
+</div>
+
+<style>
+  .root {
+    color: var(--theme-font-1);
+  }
+  .iconbar {
+    position: fixed;
+    display: flex;
+    left: 0;
+    top: var(--dim-header-top);
+    bottom: var(--dim-statusbar-height);
+    width: var(--dim-widget-icon-size);
+    background: var(--theme-bg-inv-1);
+  }
+  .statusbar {
+    position: fixed;
+    background: var(--theme-bg-statusbar-inv);
+    height: var(--dim-statusbar-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .leftpanel {
+    position: fixed;
+    top: var(--dim-header-top);
+    left: var(--dim-widget-icon-size);
+    bottom: var(--dim-statusbar-height);
+    width: var(--dim-left-panel-width);
+    background-color: var(--theme-bg-1);
+    display: flex;
+  }
+  .tabs {
+    display: flex;
+    position: fixed;
+    top: var(--dim-header-top);
+    left: var(--dim-content-left);
+    height: var(--dim-tabs-panel-height);
+    right: 0;
+    background-color: var(--theme-bg-2);
+    border-top: 1px solid var(--theme-border);
+
+    overflow-x: auto;
+  }
+  .tabs::-webkit-scrollbar {
+    height: 7px;
+  }
+  .content {
+    position: fixed;
+    top: var(--dim-content-top);
+    left: var(--dim-content-left);
+    bottom: var(--dim-statusbar-height);
+    right: 0;
+    background-color: var(--theme-bg-1);
+  }
+  .commads {
+    position: fixed;
+    top: var(--dim-header-top);
+    left: var(--dim-widget-icon-size);
+  }
+  .toolbar {
+    position: fixed;
+    top: 0;
+    height: var(--dim-toolbar-height);
+    left: 0;
+    right: 0;
+    background: var(--theme-bg-1);
+  }
+
+  .splitter {
+    position: absolute;
+    top: var(--dim-header-top);
+    bottom: var(--dim-statusbar-height);
+    left: calc(var(--dim-widget-icon-size) + var(--dim-left-panel-width));
+  }
+</style>

packages/web/src/TabContent.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import styled from 'styled-components';
-import tabs from './tabs';
-import { useOpenedTabs } from './utility/globalState';
-import ErrorBoundary from './utility/ErrorBoundary';
-
-const TabContainerStyled = styled.div`
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  visibility: ${props =>
-    // @ts-ignore
-    props.tabVisible ? 'visible' : 'hidden'};
-`;
-
-function TabContainer({ TabComponent, ...props }) {
-  const { tabVisible, tabid, toolbarPortalRef, statusbarPortalRef } = props;
-  return (
-    // @ts-ignore
-    <TabContainerStyled tabVisible={tabVisible}>
-      <ErrorBoundary>
-        <TabComponent
-          {...props}
-          tabid={tabid}
-          tabVisible={tabVisible}
-          toolbarPortalRef={toolbarPortalRef}
-          statusbarPortalRef={statusbarPortalRef}
-        />
-      </ErrorBoundary>
-    </TabContainerStyled>
-  );
-}
-
-const TabContainerMemo = React.memo(TabContainer);
-
-function createTabComponent(selectedTab) {
-  const TabComponent = tabs[selectedTab.tabComponent];
-  if (TabComponent) {
-    return {
-      TabComponent,
-      props: selectedTab.props,
-    };
-  }
-  return null;
-}
-
-export default function TabContent({ toolbarPortalRef, statusbarPortalRef }) {
-  const files = useOpenedTabs();
-
-  const [mountedTabs, setMountedTabs] = React.useState({});
-
-  const selectedTab = files.find(x => x.selected && x.closedTime == null);
-
-  React.useEffect(() => {
-    // cleanup closed tabs
-
-    if (
-      _.difference(
-        _.keys(mountedTabs),
-        _.map(
-          files.filter(x => x.closedTime == null),
-          'tabid'
-        )
-      ).length > 0
-    ) {
-      setMountedTabs(_.pickBy(mountedTabs, (v, k) => files.find(x => x.tabid == k && x.closedTime == null)));
-    }
-
-    if (selectedTab) {
-      const { tabid } = selectedTab;
-      if (tabid && !mountedTabs[tabid])
-        setMountedTabs({
-          ...mountedTabs,
-          [tabid]: createTabComponent(selectedTab),
-        });
-    }
-  }, [mountedTabs, files]);
-
-  return _.keys(mountedTabs).map(tabid => {
-    const { TabComponent, props } = mountedTabs[tabid];
-    const tabVisible = tabid == (selectedTab && selectedTab.tabid);
-    return (
-      <TabContainerMemo
-        key={tabid}
-        {...props}
-        tabid={tabid}
-        tabVisible={tabVisible}
-        toolbarPortalRef={toolbarPortalRef}
-        statusbarPortalRef={statusbarPortalRef}
-        TabComponent={TabComponent}
-      />
-    );
-  });
-}

packages/web/src/TabContent.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+
+  export let tabid;
+  export let tabVisible;
+  export let tabComponent;
+
+  const tabVisibleStore = writable(tabVisible);
+  setContext('tabid', tabid);
+  setContext('tabVisible', tabVisibleStore);
+
+  $: tabVisibleStore.set(tabVisible);
+</script>
+
+<div class:tabVisible>
+  <svelte:component this={tabComponent} {...$$restProps} {tabid} {tabVisible} />
+</div>
+
+<style>
+  div {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+  }
+  .tabVisible {
+    visibility: visible;
+  }
+  :not(.tabVisible) {
+    visibility: hidden;
+  }
+</style>

packages/web/src/TabRegister.svelte

@@ -0,0 +1,62 @@
+<script context="module" lang="ts">
+  function createTabComponent(selectedTab) {
+    const tabComponent = tabs[selectedTab.tabComponent]?.default;
+    if (tabComponent) {
+      return {
+        tabComponent,
+        props: selectedTab && selectedTab.props,
+      };
+    }
+    return null;
+  }
+</script>
+
+<script lang="ts">
+  import _ from 'lodash';
+  import { openedTabs } from './stores';
+  import TabContent from './TabContent.svelte';
+  import tabs from './tabs';
+
+  let mountedTabs = {};
+  $: selectedTab = $openedTabs.find(x => x.selected && x.closedTime == null);
+
+  // cleanup closed tabs
+  $: {
+    if (
+      _.difference(
+        _.keys(mountedTabs),
+        _.map(
+          $openedTabs.filter(x => x.closedTime == null),
+          'tabid'
+        )
+      ).length > 0
+    ) {
+      mountedTabs = _.pickBy(mountedTabs, (v, k) => $openedTabs.find(x => x.tabid == k && x.closedTime == null));
+    }
+  }
+
+  // open missing tabs
+  $: {
+    if (selectedTab) {
+      const { tabid } = selectedTab;
+      if (tabid && !mountedTabs[tabid]) {
+        const newTab = createTabComponent(selectedTab);
+        if (newTab) {
+          mountedTabs = {
+            ...mountedTabs,
+            [tabid]: newTab,
+          };
+        }
+      }
+    }
+  }
+</script>
+
+{#each _.keys(mountedTabs) as tabid (tabid)}
+  <TabContent
+    tabComponent={mountedTabs[tabid].tabComponent}
+    {...mountedTabs[tabid].props}
+    {tabid}
+    tabVisible={tabid == (selectedTab && selectedTab.tabid)}
+  />
+{/each}

packages/web/src/TabsPanel.js

@@ -1,300 +0,0 @@
-import _ from 'lodash';
-import React from 'react';
-import styled from 'styled-components';
-import { DropDownMenuItem, DropDownMenuDivider } from './modals/DropDownMenu';
-
-import { useOpenedTabs, useSetOpenedTabs, useCurrentDatabase, useSetCurrentDatabase } from './utility/globalState';
-import { getConnectionInfo } from './utility/metadataLoaders';
-import { FontIcon } from './icons';
-import useTheme from './theme/useTheme';
-import usePropsCompare from './utility/usePropsCompare';
-import { useShowMenu } from './modals/showMenu';
-import { setSelectedTabFunc } from './utility/common';
-import getElectron from './utility/getElectron';
-
-// const files = [
-//   { name: 'app.js' },
-//   { name: 'BranchCategory', type: 'table', selected: true },
-//   { name: 'ApplicationList' },
-// ];
-
-const DbGroupHandler = styled.div`
-  display: flex;
-  flex: 1;
-  align-content: stretch;
-`;
-
-const DbWrapperHandler = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-`;
-
-const DbNameWrapper = styled.div`
-  text-align: center;
-  font-size: 8pt;
-  border-bottom: 1px solid ${props => props.theme.border};
-  border-right: 1px solid ${props => props.theme.border};
-  cursor: pointer;
-  user-select: none;
-  padding: 1px;
-  position: relative;
-  white-space: nowrap;
-
-  overflow: hidden;
-  text-overflow: ellipsis;
-  // height: 15px;
-
-  &:hover {
-    background-color: ${props => props.theme.tabs_background3};
-  }
-  background-color: ${props =>
-    // @ts-ignore
-    props.selected ? props.theme.tabs_background1 : 'inherit'};
-`;
-
-// const DbNameWrapperInner = styled.div`
-//   position: absolute;
-//   white-space: nowrap;
-// `;
-
-const FileTabItem = styled.div`
-  border-right: 1px solid ${props => props.theme.border};
-  padding-left: 15px;
-  padding-right: 15px;
-  flex-shrink: 1;
-  flex-grow: 1;
-  min-width: 10px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  &:hover {
-    color: ${props => props.theme.tabs_font_hover};
-  }
-  background-color: ${props =>
-    // @ts-ignore
-    props.selected ? props.theme.tabs_background1 : 'inherit'};
-`;
-
-const FileNameWrapper = styled.span`
-  margin-left: 5px;
-`;
-
-const CloseButton = styled(FontIcon)`
-  margin-left: 5px;
-  color: gray;
-  &:hover {
-    color: ${props => props.theme.tabs_font2};
-  }
-`;
-
-function TabContextMenu({ close, closeAll, closeOthers, closeWithSameDb, closeWithOtherDb, props }) {
-  const { database } = props || {};
-  const { conid } = props || {};
-  return (
-    <>
-      <DropDownMenuItem onClick={close}>Close</DropDownMenuItem>
-      <DropDownMenuItem onClick={closeAll}>Close all</DropDownMenuItem>
-      <DropDownMenuItem onClick={closeOthers}>Close others</DropDownMenuItem>
-      {conid && database && (
-        <DropDownMenuItem onClick={closeWithSameDb}>Close with same DB - {database}</DropDownMenuItem>
-      )}
-      {conid && database && (
-        <DropDownMenuItem onClick={closeWithOtherDb}>Close with other DB than {database}</DropDownMenuItem>
-      )}
-    </>
-  );
-}
-
-function getTabDbName(tab) {
-  if (tab.props && tab.props.conid && tab.props.database) return tab.props.database;
-  if (tab.props && tab.props.archiveFolder) return tab.props.archiveFolder;
-  return '(no DB)';
-}
-
-function getTabDbKey(tab) {
-  if (tab.props && tab.props.conid && tab.props.database) return `database://${tab.props.database}-${tab.props.conid}`;
-  if (tab.props && tab.props.archiveFolder) return `archive://${tab.props.archiveFolder}`;
-  return '_no';
-}
-
-function getDbIcon(key) {
-  if (key.startsWith('database://')) return 'icon database';
-  if (key.startsWith('archive://')) return 'icon archive';
-  return 'icon file';
-}
-
-function buildTooltip(tab) {
-  let res = tab.tooltip;
-  if (tab.props && tab.props.savedFilePath) {
-    if (res) res += '\n';
-    res += tab.props.savedFilePath;
-  }
-  return res;
-}
-
-export default function TabsPanel() {
-  // const formatDbKey = (conid, database) => `${database}-${conid}`;
-  const theme = useTheme();
-  const showMenu = useShowMenu();
-
-  const tabs = useOpenedTabs();
-  const setOpenedTabs = useSetOpenedTabs();
-  const currentDb = useCurrentDatabase();
-  const setCurrentDb = useSetCurrentDatabase();
-
-  const { name, connection } = currentDb || {};
-  const currentDbKey = name && connection ? `database://${name}-${connection._id}` : '_no';
-
-  const handleTabClick = (e, tabid) => {
-    if (e.target.closest('.tabCloseButton')) {
-      return;
-    }
-    setOpenedTabs(files => setSelectedTabFunc(files, tabid));
-  };
-  const closeTabFunc = closeCondition => tabid => {
-    setOpenedTabs(files => {
-      const active = files.find(x => x.tabid == tabid);
-      if (!active) return files;
-
-      const newFiles = files.map(x => ({
-        ...x,
-        closedTime: x.closedTime || (closeCondition(x, active) ? new Date().getTime() : undefined),
-      }));
-
-      if (newFiles.find(x => x.selected && x.closedTime == null)) {
-        return newFiles;
-      }
-
-      const selectedIndex = _.findLastIndex(newFiles, x => x.closedTime == null);
-
-      return newFiles.map((x, index) => ({
-        ...x,
-        selected: index == selectedIndex,
-      }));
-    });
-  };
-
-  const closeTab = closeTabFunc((x, active) => x.tabid == active.tabid);
-  const closeAll = () => {
-    const closedTime = new Date().getTime();
-    setOpenedTabs(tabs =>
-      tabs.map(tab => ({
-        ...tab,
-        closedTime: tab.closedTime || closedTime,
-        selected: false,
-      }))
-    );
-  };
-  const closeWithSameDb = closeTabFunc(
-    (x, active) =>
-      _.get(x, 'props.conid') == _.get(active, 'props.conid') &&
-      _.get(x, 'props.database') == _.get(active, 'props.database')
-  );
-  const closeWithOtherDb = closeTabFunc(
-    (x, active) =>
-      _.get(x, 'props.conid') != _.get(active, 'props.conid') ||
-      _.get(x, 'props.database') != _.get(active, 'props.database')
-  );
-  const closeOthers = closeTabFunc((x, active) => x.tabid != active.tabid);
-  const handleMouseUp = (e, tabid) => {
-    if (e.button == 1) {
-      e.preventDefault();
-      closeTab(tabid);
-    }
-  };
-  const handleContextMenu = (event, tabid, props) => {
-    event.preventDefault();
-    showMenu(
-      event.pageX,
-      event.pageY,
-      <TabContextMenu
-        close={() => closeTab(tabid)}
-        closeAll={closeAll}
-        closeOthers={() => closeOthers(tabid)}
-        closeWithSameDb={() => closeWithSameDb(tabid)}
-        closeWithOtherDb={() => closeWithOtherDb(tabid)}
-        props={props}
-      />
-    );
-  };
-
-  React.useEffect(() => {
-    const electron = getElectron();
-    if (electron) {
-      const { ipcRenderer } = electron;
-      const activeTab = tabs.find(x => x.selected);
-      window['dbgate_activeTabId'] = activeTab ? activeTab.tabid : null;
-      ipcRenderer.send('update-menu');
-    }
-  }, [tabs]);
-
-  // console.log(
-  //   't',
-  //   tabs.map(x => x.tooltip)
-  // );
-  const tabsWithDb = tabs
-    .filter(x => !x.closedTime)
-    .map(tab => ({
-      ...tab,
-      tabDbName: getTabDbName(tab),
-      tabDbKey: getTabDbKey(tab),
-    }));
-  const tabsByDb = _.groupBy(tabsWithDb, 'tabDbKey');
-  const dbKeys = _.keys(tabsByDb).sort();
-
-  const handleSetDb = async props => {
-    const { conid, database } = props || {};
-    if (conid) {
-      const connection = await getConnectionInfo({ conid, database });
-      if (connection) {
-        setCurrentDb({ connection, name: database });
-        return;
-      }
-    }
-    setCurrentDb(null);
-  };
-
-  return (
-    <>
-      {dbKeys.map(dbKey => (
-        <DbWrapperHandler key={dbKey}>
-          <DbNameWrapper
-            // @ts-ignore
-            selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey}
-            onClick={() => handleSetDb(tabsByDb[dbKey][0].props)}
-            theme={theme}
-          >
-            <FontIcon icon={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName}
-          </DbNameWrapper>
-          <DbGroupHandler>
-            {_.sortBy(tabsByDb[dbKey], ['title', 'tabid']).map(tab => (
-              <FileTabItem
-                {...tab}
-                title={buildTooltip(tab)}
-                key={tab.tabid}
-                theme={theme}
-                onClick={e => handleTabClick(e, tab.tabid)}
-                onMouseUp={e => handleMouseUp(e, tab.tabid)}
-                onContextMenu={e => handleContextMenu(e, tab.tabid, tab.props)}
-              >
-                {<FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />}
-                <FileNameWrapper>{tab.title}</FileNameWrapper>
-                <CloseButton
-                  icon="icon close"
-                  className="tabCloseButton"
-                  theme={theme}
-                  onClick={e => {
-                    e.preventDefault();
-                    closeTab(tab.tabid);
-                  }}
-                />
-              </FileTabItem>
-            ))}
-          </DbGroupHandler>
-        </DbWrapperHandler>
-      ))}
-    </>
-  );
-}

packages/web/src/appobj/AppObjectCore.js

@@ -1,97 +0,0 @@
-// @ts-nocheck
-
-import _ from 'lodash';
-import React from 'react';
-import styled from 'styled-components';
-import { FontIcon } from '../icons';
-import { useShowMenu } from '../modals/showMenu';
-import useTheme from '../theme/useTheme';
-
-const AppObjectDiv = styled.div`
-  padding: 5px;
-  ${props =>
-    !props.disableHover &&
-    `
-    &:hover {
-      background-color: ${props.theme.left_background_blue[1]};
-    }
-  `}
-  cursor: pointer;
-  white-space: nowrap;
-  font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
-`;
-
-const IconWrap = styled.span`
-  margin-right: 5px;
-`;
-
-const StatusIconWrap = styled.span`
-  margin-left: 5px;
-`;
-
-const ExtInfoWrap = styled.span`
-  font-weight: normal;
-  margin-left: 5px;
-  color: ${props => props.theme.left_font3};
-`;
-
-export function AppObjectCore({
-  title,
-  icon,
-  data,
-  onClick = undefined,
-  onClick2 = undefined,
-  onClick3 = undefined,
-  isBold = undefined,
-  isBusy = undefined,
-  prefix = undefined,
-  statusIcon = undefined,
-  extInfo = undefined,
-  statusTitle = undefined,
-  disableHover = false,
-  children = null,
-  Menu = undefined,
-  ...other
-}) {
-  const theme = useTheme();
-  const showMenu = useShowMenu();
-
-  const handleContextMenu = event => {
-    if (!Menu) return;
-
-    event.preventDefault();
-    showMenu(event.pageX, event.pageY, <Menu data={data} />);
-  };
-
-  return (
-    <>
-      <AppObjectDiv
-        onContextMenu={handleContextMenu}
-        onClick={() => {
-          if (onClick) onClick(data);
-          if (onClick2) onClick2(data);
-          if (onClick3) onClick3(data);
-        }}
-        theme={theme}
-        isBold={isBold}
-        draggable
-        onDragStart={e => {
-          e.dataTransfer.setData('app_object_drag_data', JSON.stringify(data));
-        }}
-        disableHover={disableHover}
-        {...other}
-      >
-        {prefix}
-        <IconWrap>{isBusy ? <FontIcon icon="icon loading" /> : <FontIcon icon={icon} />}</IconWrap>
-        {title}
-        {statusIcon && (
-          <StatusIconWrap>
-            <FontIcon icon={statusIcon} title={statusTitle} />
-          </StatusIconWrap>
-        )}
-        {extInfo && <ExtInfoWrap theme={theme}>{extInfo}</ExtInfoWrap>}
-      </AppObjectDiv>
-      {children}
-    </>
-  );
-}

packages/web/src/appobj/AppObjectCore.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+  import contextMenu from '../utility/contextMenu';
+  import { createEventDispatcher } from 'svelte';
+  import CheckboxField from '../forms/CheckboxField.svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let icon;
+  export let title;
+  export let data;
+  export let module;
+
+  export let isBold = false;
+  export let isBusy = false;
+  export let statusIcon = undefined;
+  export let statusTitle = undefined;
+  export let extInfo = undefined;
+  export let menu = undefined;
+  export let expandIcon = undefined;
+  export let checkedObjectsStore = null;
+  export let disableContextMenu = false;
+
+  $: isChecked = checkedObjectsStore && $checkedObjectsStore.find(x => module.extractKey(data) == module.extractKey(x));
+
+  function handleExpand() {
+    dispatch('expand');
+  }
+  function handleClick() {
+    if (checkedObjectsStore) {
+      if (isChecked) {
+        checkedObjectsStore.update(x => x.filter(y => module.extractKey(data) != module.extractKey(y)));
+      } else {
+        checkedObjectsStore.update(x => [...x, data]);
+      }
+    } else {
+      dispatch('click');
+    }
+  }
+
+  function setChecked(value) {
+    if (!value && isChecked) {
+      checkedObjectsStore.update(x => x.filter(y => module.extractKey(data) != module.extractKey(y)));
+    }
+    if (value && !isChecked) {
+      checkedObjectsStore.update(x => [...x, data]);
+    }
+  }
+</script>
+
+<div
+  class="main"
+  class:isBold
+  draggable={true}
+  on:click={handleClick}
+  use:contextMenu={disableContextMenu ? null : menu}
+  on:dragstart={e => {
+    e.dataTransfer.setData('app_object_drag_data', JSON.stringify(data));
+  }}
+>
+  {#if checkedObjectsStore}
+    <CheckboxField
+      checked={!!isChecked}
+      on:change={e => {
+        // @ts-ignore
+        setChecked(e.target.checked);
+      }}
+    />
+  {/if}
+  {#if expandIcon}
+    <span class="expand-icon" on:click|stopPropagation={handleExpand}>
+      <FontIcon icon={expandIcon} />
+    </span>
+  {/if}
+  {#if isBusy}
+    <FontIcon icon="icon loading" />
+  {:else}
+    <FontIcon {icon} />
+  {/if}
+  {title}
+  {#if statusIcon}
+    <span class="status">
+      <FontIcon icon={statusIcon} title={statusTitle} />
+    </span>
+  {/if}
+  {#if extInfo}
+    <span class="ext-info">
+      {extInfo}
+    </span>
+  {/if}
+</div>
+<slot />
+
+<style>
+  .main {
+    padding: 5px;
+    cursor: pointer;
+    white-space: nowrap;
+    font-weight: normal;
+  }
+  .main:hover {
+    background-color: var(--theme-bg-hover);
+  }
+  .isBold {
+    font-weight: bold;
+  }
+  .status {
+    margin-left: 5px;
+  }
+  .ext-info {
+    font-weight: normal;
+    margin-left: 5px;
+    color: var(--theme-font-3);
+  }
+  .expand-icon {
+    margin-right: 3px;
+  }
+</style>

packages/web/src/appobj/AppObjectGroup.svelte

@@ -0,0 +1,82 @@
+<script>
+  import Link from '../elements/Link.svelte';
+
+  import { plusExpandIcon } from '../icons/expandIcons';
+
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  import AppObjectListItem from './AppObjectListItem.svelte';
+
+  export let group;
+  export let groupFunc;
+  export let items;
+  export let module;
+  export let checkedObjectsStore = null;
+  export let disableContextMenu = false;
+
+  let isExpanded = true;
+
+  $: filtered = items.filter(x => x.isMatched);
+  $: countText = filtered.length < items.length ? `${filtered.length}/${items.length}` : `${items.length}`;
+
+  function handleCheckAll(isChecked) {
+    checkedObjectsStore.update(checkList => {
+      const res = isChecked
+        ? [
+            ...checkList,
+            ...filtered
+              .filter(x => !checkList.find(y => module.extractKey(x.data) == module.extractKey(y)))
+              .map(x => x.data),
+          ]
+        : checkList.filter(x => groupFunc(x) != group);
+      return res;
+    });
+  }
+</script>
+
+<div class="group" on:click={() => (isExpanded = !isExpanded)}>
+  <span class="expand-icon">
+    <FontIcon icon={plusExpandIcon(isExpanded)} />
+  </span>
+
+  {group}
+  {items && `(${countText})`}
+</div>
+
+{#if isExpanded}
+  {#if checkedObjectsStore}
+    <div class="ml-2">
+      <Link onClick={() => handleCheckAll(true)}>Check all</Link>
+      |
+      <Link onClick={() => handleCheckAll(false)}>Uncheck all</Link>
+    </div>
+  {/if}
+
+  {#each filtered as item (module.extractKey(item.data))}
+    <AppObjectListItem
+      {...$$restProps}
+      {module}
+      data={item.data}
+      {checkedObjectsStore}
+      on:objectClick
+      {disableContextMenu}
+    />
+  {/each}
+{/if}
+
+<style>
+  .group {
+    user-select: none;
+    padding: 5px;
+    cursor: pointer;
+    white-space: nowrap;
+    font-weight: bold;
+  }
+
+  .group:hover {
+    background-color: var(--theme-bg-hover);
+  }
+  .expand-icon {
+    margin-right: 3px;
+  }
+</style>

packages/web/src/appobj/AppObjectList.js

@@ -1,164 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import styled from 'styled-components';
-import { ExpandIcon } from '../icons';
-import useTheme from '../theme/useTheme';
-
-const SubItemsDiv = styled.div`
-  margin-left: 28px;
-`;
-
-const ExpandIconHolder2 = styled.span`
-  margin-right: 3px;
-  // position: relative;
-  // top: -3px;
-`;
-
-const ExpandIconHolder = styled.span`
-  margin-right: 5px;
-`;
-
-const GroupDiv = styled.div`
-  user-select: none;
-  padding: 5px;
-  &:hover {
-    background-color: ${props => props.theme.left_background_blue[1]};
-  }
-  cursor: pointer;
-  white-space: nowrap;
-  font-weight: bold;
-`;
-
-function AppObjectListItem({
-  AppObjectComponent,
-  data,
-  filter,
-  onObjectClick,
-  isExpandable,
-  SubItems,
-  getCommonProps,
-  expandOnClick,
-  ExpandIconComponent,
-}) {
-  const [isExpanded, setIsExpanded] = React.useState(false);
-
-  const expandable = data && isExpandable && isExpandable(data);
-
-  React.useEffect(() => {
-    if (!expandable) {
-      setIsExpanded(false);
-    }
-  }, [expandable]);
-
-  let commonProps = {
-    prefix: SubItems ? (
-      <ExpandIconHolder2>
-        {expandable ? (
-          <ExpandIconComponent
-            isExpanded={isExpanded}
-            onClick={e => {
-              setIsExpanded(v => !v);
-              e.stopPropagation();
-            }}
-          />
-        ) : (
-          <ExpandIconComponent isBlank />
-        )}
-      </ExpandIconHolder2>
-    ) : null,
-  };
-
-  if (SubItems && expandOnClick) {
-    commonProps.onClick2 = () => setIsExpanded(v => !v);
-  }
-  if (onObjectClick) {
-    commonProps.onClick3 = onObjectClick;
-  }
-
-  if (getCommonProps) {
-    commonProps = { ...commonProps, ...getCommonProps(data) };
-  }
-
-  let res = <AppObjectComponent data={data} commonProps={commonProps} />;
-  if (SubItems && isExpanded) {
-    res = (
-      <>
-        {res}
-        <SubItemsDiv>
-          <SubItems data={data} filter={filter} />
-        </SubItemsDiv>
-      </>
-    );
-  }
-  return res;
-}
-
-function AppObjectGroup({ group, items }) {
-  const [isExpanded, setIsExpanded] = React.useState(true);
-  const theme = useTheme();
-  const filtered = items.filter(x => x.component);
-  let countText = filtered.length.toString();
-  if (filtered.length < items.length) countText += `/${items.length}`;
-
-  return (
-    <>
-      <GroupDiv onClick={() => setIsExpanded(!isExpanded)} theme={theme}>
-        <ExpandIconHolder>
-          <ExpandIcon isExpanded={isExpanded} />
-        </ExpandIconHolder>
-        {group} {items && `(${countText})`}
-      </GroupDiv>
-      {isExpanded && filtered.map(x => x.component)}
-    </>
-  );
-}
-
-export function AppObjectList({
-  list,
-  AppObjectComponent,
-  SubItems = undefined,
-  onObjectClick = undefined,
-  filter = undefined,
-  groupFunc = undefined,
-  groupOrdered = undefined,
-  isExpandable = undefined,
-  getCommonProps = undefined,
-  expandOnClick = false,
-  ExpandIconComponent = ExpandIcon,
-}) {
-  const createComponent = data => (
-    <AppObjectListItem
-      key={AppObjectComponent.extractKey(data)}
-      AppObjectComponent={AppObjectComponent}
-      data={data}
-      filter={filter}
-      onObjectClick={onObjectClick}
-      SubItems={SubItems}
-      isExpandable={isExpandable}
-      getCommonProps={getCommonProps}
-      expandOnClick={expandOnClick}
-      ExpandIconComponent={ExpandIconComponent}
-    />
-  );
-
-  if (groupFunc) {
-    const listGrouped = _.compact(
-      (list || []).map(data => {
-        const matcher = AppObjectComponent.createMatcher && AppObjectComponent.createMatcher(data);
-        const component = matcher && !matcher(filter) ? null : createComponent(data);
-        const group = groupFunc(data);
-        return { group, data, component };
-      })
-    );
-    const groups = _.groupBy(listGrouped, 'group');
-    return (groupOrdered || _.keys(groups)).map(group => (
-      <AppObjectGroup key={group} group={group} items={groups[group]} />
-    ));
-  }
-
-  return (list || []).map(data => {
-    const matcher = AppObjectComponent.createMatcher && AppObjectComponent.createMatcher(data);
-    if (matcher && !matcher(filter)) return null;
-    return createComponent(data);
-  });
-}

packages/web/src/appobj/AppObjectList.svelte

@@ -0,0 +1,67 @@
+<script>
+  import _ from 'lodash';
+  import AppObjectGroup from './AppObjectGroup.svelte';
+
+  import AppObjectListItem from './AppObjectListItem.svelte';
+
+  export let list;
+  export let module;
+  export let subItemsComponent = undefined;
+  export let expandOnClick = false;
+  export let isExpandable = undefined;
+  export let filter;
+  export let expandIconFunc = undefined;
+  export let checkedObjectsStore = null;
+  export let disableContextMenu = false;
+
+  export let groupFunc = undefined;
+
+  $: filtered = list.filter(data => {
+    const matcher = module.createMatcher && module.createMatcher(data);
+    if (matcher && !matcher(filter)) return false;
+    return true;
+  });
+
+  $: listGrouped = groupFunc
+    ? _.compact(
+        (list || []).map(data => {
+          const matcher = module.createMatcher && module.createMatcher(data);
+          const isMatched = matcher && !matcher(filter) ? false : true;
+          const group = groupFunc(data);
+          return { group, data, isMatched };
+        })
+      )
+    : null;
+
+  $: groups = groupFunc ? _.groupBy(listGrouped, 'group') : null;
+</script>
+
+{#if groupFunc}
+  {#each _.keys(groups) as group (group)}
+    <AppObjectGroup
+      {group}
+      {module}
+      items={groups[group]}
+      {expandIconFunc}
+      {isExpandable}
+      {subItemsComponent}
+      {checkedObjectsStore}
+      {groupFunc}
+      {disableContextMenu}
+    />
+  {/each}
+{:else}
+  {#each filtered as data (module.extractKey(data))}
+    <AppObjectListItem
+      {module}
+      {subItemsComponent}
+      {expandOnClick}
+      {data}
+      {isExpandable}
+      on:objectClick
+      {expandIconFunc}
+      {checkedObjectsStore}
+      {disableContextMenu}
+    />
+  {/each}
+{/if}

packages/web/src/appobj/AppObjectListItem.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" context="module">
+  function getExpandIcon(expandable, subItemsComponent, isExpanded, expandIconFunc) {
+    if (!subItemsComponent) return null;
+    if (!expandable) return 'icon invisible-box';
+    return expandIconFunc(isExpanded);
+  }
+</script>
+
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { plusExpandIcon } from '../icons/expandIcons';
+
+  export let module;
+  export let data;
+  export let subItemsComponent;
+  export let expandOnClick;
+  export let isExpandable = undefined;
+  export let expandIconFunc = plusExpandIcon;
+  export let checkedObjectsStore = null;
+  export let disableContextMenu = false;
+
+  let isExpanded = false;
+
+  async function handleExpand() {
+    if (subItemsComponent && expandOnClick) {
+      await tick();
+      isExpanded = !isExpanded;
+    }
+  }
+
+  function handleExpandButton() {
+    isExpanded = !isExpanded;
+  }
+
+  $: expandable = data && isExpandable && isExpandable(data);
+
+  $: if (!expandable && isExpanded) isExpanded = false;
+</script>
+
+<svelte:component
+  this={module.default}
+  {data}
+  on:click={handleExpand}
+  on:expand={handleExpandButton}
+  expandIcon={getExpandIcon(expandable, subItemsComponent, isExpanded, expandIconFunc)}
+  {checkedObjectsStore}
+  {module}
+  {disableContextMenu}
+/>
+
+{#if isExpanded && subItemsComponent}
+  <div class="subitems">
+    <svelte:component this={subItemsComponent} {data} />
+  </div>
+{/if}
+
+<style>
+  .subitems {
+    margin-left: 28px;
+  }
+</style>

packages/web/src/appobj/ArchiveFileAppObject.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import { DropDownMenuItem } from '../modals/DropDownMenu';
-import { filterName } from 'dbgate-datalib';
-import axios from '../utility/axios';
-import { AppObjectCore } from './AppObjectCore';
-import useOpenNewTab from '../utility/useOpenNewTab';
-
-function openArchive(openNewTab, fileName, folderName) {
-  openNewTab({
-    title: fileName,
-    icon: 'img archive',
-    tooltip: `${folderName}\n${fileName}`,
-    tabComponent: 'ArchiveFileTab',
-    props: {
-      archiveFile: fileName,
-      archiveFolder: folderName,
-    },
-  });
-}
-
-function Menu({ data }) {
-  const openNewTab = useOpenNewTab();
-  const handleDelete = () => {
-    axios.post('archive/delete-file', { file: data.fileName, folder: data.folderName });
-    // setOpenedTabs((tabs) => tabs.filter((x) => x.tabid != data.tabid));
-  };
-  const handleOpenRead = () => {
-    openArchive(openNewTab, data.fileName, data.folderName);
-  };
-  const handleOpenWrite = async () => {
-    // const resp = await axios.post('archive/load-free-table', { file: data.fileName, folder: data.folderName });
-
-    openNewTab({
-      title: data.fileName,
-      icon: 'img archive',
-      tabComponent: 'FreeTableTab',
-      props: {
-        initialArgs: {
-          functionName: 'archiveReader',
-          props: {
-            fileName: data.fileName,
-            folderName: data.folderName,
-          },
-        },
-        archiveFile: data.fileName,
-        archiveFolder: data.folderName,
-      },
-    });
-  };
-
-  return (
-    <>
-      <DropDownMenuItem onClick={handleOpenRead}>Open (readonly)</DropDownMenuItem>
-      <DropDownMenuItem onClick={handleOpenWrite}>Open in free table editor</DropDownMenuItem>
-      <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>
-    </>
-  );
-}
-
-function ArchiveFileAppObject({ data, commonProps }) {
-  const { fileName, folderName } = data;
-  const openNewTab = useOpenNewTab();
-  const onClick = () => {
-    openArchive(openNewTab, fileName, folderName);
-  };
-
-  return (
-    <AppObjectCore {...commonProps} data={data} title={fileName} icon="img archive" onClick={onClick} Menu={Menu} />
-  );
-}
-
-ArchiveFileAppObject.extractKey = data => data.fileName;
-ArchiveFileAppObject.createMatcher = ({ fileName }) => filter => filterName(filter, fileName);
-
-export default ArchiveFileAppObject;

packages/web/src/appobj/ArchiveFileAppObject.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" context="module">
+  function openArchive(fileName, folderName) {
+    openNewTab({
+      title: fileName,
+      icon: 'img archive',
+      tooltip: `${folderName}\n${fileName}`,
+      tabComponent: 'ArchiveFileTab',
+      props: {
+        archiveFile: fileName,
+        archiveFolder: folderName,
+      },
+    });
+  }
+
+  export const extractKey = data => data.fileName;
+  export const createMatcher = ({ fileName }) => filter => filterName(filter, fileName);
+</script>
+
+<script lang="ts">
+  import { filterName } from 'dbgate-datalib';
+
+  import { currentArchive } from '../stores';
+
+  import axiosInstance from '../utility/axiosInstance';
+  import openNewTab from '../utility/openNewTab';
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export let data;
+
+  const handleDelete = () => {
+    axiosInstance.post('archive/delete-file', { file: data.fileName, folder: data.folderName });
+  };
+  const handleOpenRead = () => {
+    openArchive(data.fileName, data.folderName);
+  };
+  const handleOpenWrite = () => {
+    openNewTab({
+      title: data.fileName,
+      icon: 'img archive',
+      tabComponent: 'FreeTableTab',
+      props: {
+        initialArgs: {
+          functionName: 'archiveReader',
+          props: {
+            fileName: data.fileName,
+            folderName: data.folderName,
+          },
+        },
+        archiveFile: data.fileName,
+        archiveFolder: data.folderName,
+      },
+    });
+  };
+  const handleClick = () => {
+    openArchive(data.fileName, data.folderName);
+  };
+
+  function createMenu() {
+    return [
+      { text: 'Open (readonly)', onClick: handleOpenRead },
+      { text: 'Open in free table editor', onClick: handleOpenWrite },
+      { text: 'Delete', onClick: handleDelete },
+    ];
+  }
+</script>
+
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  title={data.fileName}
+  icon="img archive"
+  menu={createMenu}
+  on:click={handleClick}
+/>

packages/web/src/appobj/ArchiveFolderAppObject.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import { DropDownMenuItem } from '../modals/DropDownMenu';
-import axios from '../utility/axios';
-import { filterName } from 'dbgate-datalib';
-import { AppObjectCore } from './AppObjectCore';
-import { useCurrentArchive } from '../utility/globalState';
-
-function Menu({ data }) {
-  const handleDelete = () => {
-    axios.post('archive/delete-folder', { folder: data.name });
-  };
-  return <>{data.name != 'default' && <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>}</>;
-}
-
-function ArchiveFolderAppObject({ data, commonProps }) {
-  const { name } = data;
-  const currentArchive = useCurrentArchive();
-
-  return (
-    <AppObjectCore
-      {...commonProps}
-      data={data}
-      title={name}
-      icon="img archive-folder"
-      isBold={name == currentArchive}
-      Menu={Menu}
-    />
-  );
-}
-
-ArchiveFolderAppObject.extractKey = data => data.name;
-ArchiveFolderAppObject.createMatcher = data => filter => filterName(filter, data.name);
-
-export default ArchiveFolderAppObject;

packages/web/src/appobj/ArchiveFolderAppObject.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" context="module">
+  export const extractKey = data => data.name;
+  export const createMatcher = data => filter => filterName(filter, data.name);
+</script>
+
+<script lang="ts">
+  import { filterName } from 'dbgate-datalib';
+
+  import { currentArchive } from '../stores';
+
+  import axiosInstance from '../utility/axiosInstance';
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export let data;
+
+  const handleDelete = () => {
+    axiosInstance.post('archive/delete-folder', { folder: data.name });
+  };
+
+  function createMenu() {
+    return [data.name != 'default' && { text: 'Delete', onClick: handleDelete }];
+  }
+</script>
+
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  title={data.name}
+  icon="img archive-folder"
+  isBold={data.name == $currentArchive}
+  on:click={() => ($currentArchive = data.name)}
+  menu={createMenu}
+/>

packages/web/src/appobj/ClosedTabAppObject.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import moment from 'moment';
-import { DropDownMenuItem } from '../modals/DropDownMenu';
-import { useSetOpenedTabs } from '../utility/globalState';
-import { AppObjectCore } from './AppObjectCore';
-import { setSelectedTabFunc } from '../utility/common';
-import styled from 'styled-components';
-import { FontIcon } from '../icons';
-import useTheme from '../theme/useTheme';
-
-const InfoDiv = styled.div`
-  margin-left: 30px;
-  color: ${props => props.theme.left_font3};
-`;
-
-function Menu({ data }) {
-  const setOpenedTabs = useSetOpenedTabs();
-  const handleDelete = () => {
-    setOpenedTabs(tabs => tabs.filter(x => x.tabid != data.tabid));
-  };
-  const handleDeleteOlder = () => {
-    setOpenedTabs(tabs => tabs.filter(x => !x.closedTime || x.closedTime >= data.closedTime));
-  };
-  return (
-    <>
-      <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>
-      <DropDownMenuItem onClick={handleDeleteOlder}>Delete older</DropDownMenuItem>
-    </>
-  );
-}
-
-function ClosedTabAppObject({ data, commonProps }) {
-  const { tabid, props, selected, icon, title, closedTime, busy } = data;
-  const setOpenedTabs = useSetOpenedTabs();
-  const theme = useTheme();
-
-  const onClick = () => {
-    setOpenedTabs(files =>
-      setSelectedTabFunc(
-        files.map(x => ({
-          ...x,
-          closedTime: x.tabid == tabid ? undefined : x.closedTime,
-        })),
-        tabid
-      )
-    );
-  };
-
-  return (
-    <AppObjectCore
-      {...commonProps}
-      data={data}
-      title={`${title} ${moment(closedTime).fromNow()}`}
-      icon={icon}
-      isBold={!!selected}
-      onClick={onClick}
-      isBusy={busy}
-      Menu={Menu}
-    >
-      {data.props && data.props.database && (
-        <InfoDiv theme={theme}>
-          <FontIcon icon="icon database" /> {data.props.database}
-        </InfoDiv>
-      )}
-      {data.contentPreview && <InfoDiv theme={theme}>{data.contentPreview}</InfoDiv>}
-    </AppObjectCore>
-  );
-}
-
-ClosedTabAppObject.extractKey = data => data.tabid;
-
-export default ClosedTabAppObject;

packages/web/src/appobj/ClosedTabAppObject.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" context="module">
+  export const extractKey = data => data.tabid;
+</script>
+
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { openedTabs } from '../stores';
+  import { setSelectedTabFunc } from '../utility/common';
+  import moment from 'moment';
+
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export let data;
+
+  const handleDelete = () => {
+    openedTabs.update(tabs => tabs.filter(x => x.tabid != data.tabid));
+  };
+  const handleDeleteOlder = () => {
+    openedTabs.update(tabs => tabs.filter(x => !x.closedTime || x.closedTime >= data.closedTime));
+  };
+
+  const onClick = () => {
+    openedTabs.update(files =>
+      setSelectedTabFunc(
+        files.map(x => ({
+          ...x,
+          closedTime: x.tabid == data.tabid ? undefined : x.closedTime,
+        })),
+        data.tabid
+      )
+    );
+  };
+
+  function createMenu() {
+    return [
+      { text: 'Delete', onClick: handleDelete },
+      { text: 'Delete older', onClick: handleDeleteOlder },
+    ];
+  }
+</script>
+
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  title={`${data.title} ${moment(data.closedTime).fromNow()}`}
+  icon={data.icon}
+  isBold={!!data.selected}
+  on:click={onClick}
+  isBusy={data.busy}
+  menu={createMenu}
+>
+  {#if data.props && data.props.database}
+    <div class="info">
+      <FontIcon icon="icon database" />
+      {data.props.database}
+    </div>
+  {/if}
+  {#if data.contentPreview}
+    <div class="info">
+      {data.contentPreview}
+    </div>
+  {/if}
+</AppObjectCore>
+
+<style>
+  .info {
+    margin-left: 30px;
+    color: var(--theme-font-3);
+  }
+</style>

packages/web/src/appobj/ColumnAppObject.svelte

@@ -0,0 +1,22 @@
+<script lang="ts" context="module">
+  export const extractKey = ({ columnName }) => columnName;
+</script>
+
+<script lang="ts">
+  import { getColumnIcon } from '../elements/ColumnLabel.svelte';
+
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export let data;
+
+  $: extInfo = data.foreignKey ? `${data.dataType} -> ${data.foreignKey.refTableName}` : data.dataType;
+</script>
+
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  title={data.columnName}
+  {extInfo}
+  icon={getColumnIcon(data, true)}
+  disableHover
+/>

packages/web/src/appobj/ConnectionAppObject.js

@@ -1,119 +0,0 @@
-import _ from 'lodash';
-import React from 'react';
-import { DropDownMenuItem } from '../modals/DropDownMenu';
-import ConnectionModal from '../modals/ConnectionModal';
-import axios from '../utility/axios';
-import { filterName } from 'dbgate-datalib';
-import ConfirmModal from '../modals/ConfirmModal';
-import CreateDatabaseModal from '../modals/CreateDatabaseModal';
-import { useCurrentDatabase, useOpenedConnections, useSetOpenedConnections } from '../utility/globalState';
-import { AppObjectCore } from './AppObjectCore';
-import useShowModal from '../modals/showModal';
-import { useConfig } from '../utility/metadataLoaders';
-import useExtensions from '../utility/useExtensions';
-
-function Menu({ data }) {
-  const openedConnections = useOpenedConnections();
-  const setOpenedConnections = useSetOpenedConnections();
-  const showModal = useShowModal();
-  const config = useConfig();
-
-  const handleEdit = () => {
-    showModal(modalState => <ConnectionModal modalState={modalState} connection={data} />);
-  };
-  const handleDelete = () => {
-    showModal(modalState => (
-      <ConfirmModal
-        modalState={modalState}
-        message={`Really delete connection ${data.displayName || data.server}?`}
-        onConfirm={() => axios.post('connections/delete', data)}
-      />
-    ));
-  };
-  const handleCreateDatabase = () => {
-    showModal(modalState => <CreateDatabaseModal modalState={modalState} conid={data._id} />);
-  };
-  const handleRefresh = () => {
-    axios.post('server-connections/refresh', { conid: data._id });
-  };
-  const handleDisconnect = () => {
-    setOpenedConnections(list => list.filter(x => x != data._id));
-  };
-  const handleConnect = () => {
-    setOpenedConnections(list => _.uniq([...list, data._id]));
-  };
-  return (
-    <>
-      {config.runAsPortal == false && (
-        <>
-          <DropDownMenuItem onClick={handleEdit}>Edit</DropDownMenuItem>
-          <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>
-        </>
-      )}
-      {!openedConnections.includes(data._id) && <DropDownMenuItem onClick={handleConnect}>Connect</DropDownMenuItem>}
-      {openedConnections.includes(data._id) && data.status && (
-        <DropDownMenuItem onClick={handleRefresh}>Refresh</DropDownMenuItem>
-      )}
-      {openedConnections.includes(data._id) && (
-        <DropDownMenuItem onClick={handleDisconnect}>Disconnect</DropDownMenuItem>
-      )}
-      {openedConnections.includes(data._id) && (
-        <DropDownMenuItem onClick={handleCreateDatabase}>Create database</DropDownMenuItem>
-      )}
-    </>
-  );
-}
-
-function ConnectionAppObject({ data, commonProps }) {
-  const { _id, server, displayName, engine, status } = data;
-  const openedConnections = useOpenedConnections();
-  const setOpenedConnections = useSetOpenedConnections();
-  const currentDatabase = useCurrentDatabase();
-  const extensions = useExtensions();
-
-  const isBold = _.get(currentDatabase, 'connection._id') == _id;
-  const onClick = () => setOpenedConnections(c => _.uniq([...c, _id]));
-
-  let statusIcon = null;
-  let statusTitle = null;
-
-  let extInfo = null;
-  if (extensions.drivers.find(x => x.engine == engine)) {
-    const match = (engine || '').match(/^([^@]*)@/);
-    extInfo = match ? match[1] : engine;
-  } else {
-    extInfo = engine;
-    statusIcon = 'img warn';
-    statusTitle = `Engine driver ${engine} not found, review installed plugins and change engine in edit connection dialog`;
-  }
-
-  if (openedConnections.includes(_id)) {
-    if (!status) statusIcon = 'icon loading';
-    else if (status.name == 'pending') statusIcon = 'icon loading';
-    else if (status.name == 'ok') statusIcon = 'img ok';
-    else statusIcon = 'img error';
-    if (status && status.name == 'error') {
-      statusTitle = status.message;
-    }
-  }
-
-  return (
-    <AppObjectCore
-      {...commonProps}
-      title={displayName || server}
-      icon="img server"
-      data={data}
-      statusIcon={statusIcon}
-      statusTitle={statusTitle}
-      extInfo={extInfo}
-      isBold={isBold}
-      onClick={onClick}
-      Menu={Menu}
-    />
-  );
-}
-
-ConnectionAppObject.extractKey = data => data._id;
-ConnectionAppObject.createMatcher = ({ displayName, server }) => filter => filterName(filter, displayName, server);
-
-export default ConnectionAppObject;

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -0,0 +1,147 @@
+<script context="module">
+  const getContextMenu = (data, $openedConnections) => () => {
+    const config = getCurrentConfig();
+    const handleRefresh = () => {
+      axiosInstance.post('server-connections/refresh', { conid: data._id });
+    };
+    const handleDisconnect = () => {
+      openedConnections.update(list => list.filter(x => x != data._id));
+    };
+    const handleConnect = () => {
+      openedConnections.update(list => _.uniq([...list, data._id]));
+    };
+    const handleEdit = () => {
+      showModal(ConnectionModal, { connection: data });
+    };
+    const handleDelete = () => {
+      showModal(ConfirmModal, {
+        message: `Really delete connection ${data.displayName || data.server}?`,
+        onConfirm: () => axiosInstance.post('connections/delete', data),
+      });
+    };
+    const handleCreateDatabase = () => {
+      showModal(InputTextModal, {
+        header: 'Create database',
+        value: 'newdb',
+        label: 'Database name',
+        onConfirm: name =>
+          axiosInstance.post('server-connections/create-database', {
+            conid: data._id,
+            name,
+          }),
+      });
+    };
+
+    return [
+      config.runAsPortal == false && [
+        {
+          text: 'Edit',
+          onClick: handleEdit,
+        },
+        {
+          text: 'Delete',
+          onClick: handleDelete,
+        },
+      ],
+      !$openedConnections.includes(data._id) && {
+        text: 'Connect',
+        onClick: handleConnect,
+      },
+      $openedConnections.includes(data._id) &&
+        data.status && {
+          text: 'Refresh',
+          onClick: handleRefresh,
+        },
+      $openedConnections.includes(data._id) && {
+        text: 'Disconnect',
+        onClick: handleDisconnect,
+      },
+      $openedConnections.includes(data._id) && {
+        text: 'Create database',
+        onClick: handleCreateDatabase,
+      },
+    ];
+  };
+
+  export const extractKey = data => data._id;
+  export const createMatcher = ({ displayName, server }) => filter => filterName(filter, displayName, server);
+</script>
+
+<script lang="ts">
+  import _ from 'lodash';
+  import AppObjectCore from './AppObjectCore.svelte';
+  import { currentDatabase, extensions, getCurrentConfig, openedConnections } from '../stores';
+  import axiosInstance from '../utility/axiosInstance';
+  import { filterName } from 'dbgate-datalib';
+  import { showModal } from '../modals/modalTools';
+  import ConnectionModal from '../modals/ConnectionModal.svelte';
+  import ConfirmModal from '../modals/ConfirmModal.svelte';
+  import InputTextModal from '../modals/InputTextModal.svelte';
+
+  export let data;
+
+  let statusIcon = null;
+  let statusTitle = null;
+  let extInfo = null;
+  let engineStatusIcon = null;
+  let engineStatusTitle = null;
+
+  $: {
+    if ($extensions.drivers.find(x => x.engine == data.engine)) {
+      const match = (data.engine || '').match(/^([^@]*)@/);
+      extInfo = match ? match[1] : data.engine;
+      engineStatusIcon = null;
+      engineStatusTitle = null;
+    } else {
+      extInfo = data.engine;
+      engineStatusIcon = 'img warn';
+      engineStatusTitle = `Engine driver ${data.engine} not found, review installed plugins and change engine in edit connection dialog`;
+    }
+  }
+
+  $: {
+    const { _id, status } = data;
+    if ($openedConnections.includes(_id)) {
+      if (!status) statusIcon = 'icon loading';
+      else if (status.name == 'pending') statusIcon = 'icon loading';
+      else if (status.name == 'ok') statusIcon = 'img ok';
+      else statusIcon = 'img error';
+      if (status && status.name == 'error') {
+        statusTitle = status.message;
+      }
+    } else {
+      statusIcon = null;
+      statusTitle = null;
+    }
+  }
+
+  // const handleEdit = () => {
+  //   showModal(modalState => <ConnectionModal modalState={modalState} connection={data} />);
+  // };
+  // const handleDelete = () => {
+  //   showModal(modalState => (
+  //     <ConfirmModal
+  //       modalState={modalState}
+  //       message={`Really delete connection ${data.displayName || data.server}?`}
+  //       onConfirm={() => axios.post('connections/delete', data)}
+  //     />
+  //   ));
+  // };
+  // const handleCreateDatabase = () => {
+  //   showModal(modalState => <CreateDatabaseModal modalState={modalState} conid={data._id} />);
+  // };
+</script>
+
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  title={data.displayName || data.server}
+  icon="img server"
+  isBold={_.get($currentDatabase, 'connection._id') == data._id}
+  statusIcon={statusIcon || engineStatusIcon}
+  statusTitle={statusTitle || engineStatusTitle}
+  {extInfo}
+  menu={getContextMenu(data, $openedConnections)}
+  on:click={() => ($openedConnections = _.uniq([...$openedConnections, data._id]))}
+  on:click
+/>

packages/web/src/appobj/DatabaseAppObject.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import { DropDownMenuItem } from '../modals/DropDownMenu';
-import ImportExportModal from '../modals/ImportExportModal';
-import { getDefaultFileFormat } from '../utility/fileformats';
-import { useCurrentDatabase } from '../utility/globalState';
-import { AppObjectCore } from './AppObjectCore';
-import useShowModal from '../modals/showModal';
-import useExtensions from '../utility/useExtensions';
-import useOpenNewTab from '../utility/useOpenNewTab';
-
-function Menu({ data }) {
-  const { connection, name } = data;
-  const openNewTab = useOpenNewTab();
-
-  const extensions = useExtensions();
-  const showModal = useShowModal();
-
-  const tooltip = `${connection.displayName || connection.server}\n${name}`;
-
-  const handleNewQuery = () => {
-    openNewTab({
-      title: 'Query #',
-      icon: 'img sql-file',
-      tooltip,
-      tabComponent: 'QueryTab',
-      props: {
-        conid: connection._id,
-        database: name,
-      },
-    });
-  };
-
-  const handleImport = () => {
-    showModal(modalState => (
-      <ImportExportModal
-        modalState={modalState}
-        initialValues={{
-          sourceStorageType: getDefaultFileFormat(extensions).storageType,
-          targetStorageType: 'database',
-          targetConnectionId: connection._id,
-          targetDatabaseName: name,
-        }}
-      />
-    ));
-  };
-
-  const handleExport = () => {
-    showModal(modalState => (
-      <ImportExportModal
-        modalState={modalState}
-        initialValues={{
-          targetStorageType: getDefaultFileFormat(extensions).storageType,
-          sourceStorageType: 'database',
-          sourceConnectionId: connection._id,
-          sourceDatabaseName: name,
-        }}
-      />
-    ));
-  };
-
-  return (
-    <>
-      <DropDownMenuItem onClick={handleNewQuery}>New query</DropDownMenuItem>
-      <DropDownMenuItem onClick={handleImport}>Import</DropDownMenuItem>
-      <DropDownMenuItem onClick={handleExport}>Export</DropDownMenuItem>
-    </>
-  );
-}
-
-function DatabaseAppObject({ data, commonProps }) {
-  const { name, connection } = data;
-  const currentDatabase = useCurrentDatabase();
-  return (
-    <AppObjectCore
-      {...commonProps}
-      data={data}
-      title={name}
-      icon="img database"
-      isBold={
-        _.get(currentDatabase, 'connection._id') == _.get(connection, '_id') && _.get(currentDatabase, 'name') == name
-      }
-      Menu={Menu}
-    />
-  );
-}
-
-DatabaseAppObject.extractKey = props => props.name;
-
-export default DatabaseAppObject;

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" context="module">
+  export const extractKey = props => props.name;
+</script>
+
+<script lang="ts">
+  import _ from 'lodash';
+  import ImportExportModal from '../modals/ImportExportModal.svelte';
+  import { showModal } from '../modals/modalTools';
+  import { getDefaultFileFormat } from '../plugins/fileformats';
+  import { currentDatabase, extensions } from '../stores';
+  import openNewTab from '../utility/openNewTab';
+  import AppObjectCore from './AppObjectCore.svelte';
+  export let data;
+
+  const handleNewQuery = () => {
+    const { connection, name } = data;
+    const tooltip = `${connection.displayName || connection.server}\n${name}`;
+    openNewTab({
+      title: 'Query #',
+      icon: 'img sql-file',
+      tooltip,
+      tabComponent: 'QueryTab',
+      props: {
+        conid: connection._id,
+        database: name,
+      },
+    });
+  };
+
+  const handleImport = () => {
+    const { connection, name } = data;
+
+    showModal(ImportExportModal, {
+      initialValues: {
+        sourceStorageType: getDefaultFileFormat($extensions).storageType,
+        targetStorageType: 'database',
+        targetConnectionId: connection._id,
+        targetDatabaseName: name,
+      },
+    });
+  };
+
+  const handleExport = () => {
+    const { connection, name } = data;
+
+    showModal(ImportExportModal, {
+      initialValues: {
+        targetStorageType: getDefaultFileFormat($extensions).storageType,
+        sourceStorageType: 'database',
+        sourceConnectionId: connection._id,
+        sourceDatabaseName: name,
+      },
+    });
+  };
+
+  function createMenu() {
+    return [
+      { onClick: handleNewQuery, text: 'New query' },
+      { onClick: handleImport, text: 'Import' },
+      { onClick: handleExport, text: 'Export' },
+    ];
+  }
+</script>
+
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  title={data.name}
+  icon="img database"
+  isBold={_.get($currentDatabase, 'connection._id') == _.get(data.connection, '_id') &&
+    _.get($currentDatabase, 'name') == data.name}
+  on:click={() => ($currentDatabase = data)}
+  menu={createMenu}
+/>

packages/web/src/appobj/DatabaseObjectAppObject.js

@@ -1,325 +0,0 @@
-import _ from 'lodash';
-import React from 'react';
-import { DropDownMenuDivider, DropDownMenuItem } from '../modals/DropDownMenu';
-import { getConnectionInfo } from '../utility/metadataLoaders';
-import fullDisplayName from '../utility/fullDisplayName';
-import { filterName } from 'dbgate-datalib';
-import ImportExportModal from '../modals/ImportExportModal';
-import { useSetOpenedTabs } from '../utility/globalState';
-import { AppObjectCore } from './AppObjectCore';
-import useShowModal from '../modals/showModal';
-import { findEngineDriver } from 'dbgate-tools';
-import useExtensions from '../utility/useExtensions';
-import useOpenNewTab from '../utility/useOpenNewTab';
-import uuidv1 from 'uuid/v1';
-import { AppObjectList } from './AppObjectList';
-
-const icons = {
-  tables: 'img table',
-  views: 'img view',
-  procedures: 'img procedure',
-  functions: 'img function',
-};
-
-const menus = {
-  tables: [
-    {
-      label: 'Open data',
-      tab: 'TableDataTab',
-      forceNewTab: true,
-    },
-    {
-      label: 'Open form',
-      tab: 'TableDataTab',
-      forceNewTab: true,
-      initialData: {
-        grid: {
-          isFormView: true,
-        },
-      },
-    },
-    {
-      label: 'Open structure',
-      tab: 'TableStructureTab',
-    },
-    {
-      label: 'Query designer',
-      isQueryDesigner: true,
-    },
-    {
-      isDivider: true,
-    },
-    {
-      label: 'Export',
-      isExport: true,
-    },
-    {
-      label: 'Open in free table editor',
-      isOpenFreeTable: true,
-    },
-    {
-      label: 'Open active chart',
-      isActiveChart: true,
-    },
-    {
-      isDivider: true,
-    },
-    {
-      label: 'SQL: CREATE TABLE',
-      sqlTemplate: 'CREATE TABLE',
-    },
-  ],
-  views: [
-    {
-      label: 'Open data',
-      tab: 'ViewDataTab',
-      forceNewTab: true,
-    },
-    {
-      label: 'Open structure',
-      tab: 'TableStructureTab',
-    },
-    {
-      label: 'Query designer',
-      isQueryDesigner: true,
-    },
-    {
-      isDivider: true,
-    },
-    {
-      label: 'Export',
-      isExport: true,
-    },
-    {
-      label: 'Open in free table editor',
-      isOpenFreeTable: true,
-    },
-    {
-      label: 'Open active chart',
-      isActiveChart: true,
-    },
-    {
-      isDivider: true,
-    },
-    {
-      label: 'SQL: CREATE VIEW',
-      sqlTemplate: 'CREATE OBJECT',
-    },
-    {
-      label: 'SQL: CREATE TABLE',
-      sqlTemplate: 'CREATE TABLE',
-    },
-  ],
-  procedures: [
-    {
-      label: 'SQL: CREATE PROCEDURE',
-      sqlTemplate: 'CREATE OBJECT',
-    },
-    {
-      label: 'SQL: EXECUTE',
-      sqlTemplate: 'EXECUTE PROCEDURE',
-    },
-  ],
-  functions: [
-    {
-      label: 'SQL: CREATE FUNCTION',
-      sqlTemplate: 'CREATE OBJECT',
-    },
-  ],
-};
-
-const defaultTabs = {
-  tables: 'TableDataTab',
-  views: 'ViewDataTab',
-};
-
-export async function openDatabaseObjectDetail(
-  openNewTab,
-  tabComponent,
-  sqlTemplate,
-  { schemaName, pureName, conid, database, objectTypeField },
-  forceNewTab,
-  initialData
-) {
-  const connection = await getConnectionInfo({ conid });
-  const tooltip = `${connection.displayName || connection.server}\n${database}\n${fullDisplayName({
-    schemaName,
-    pureName,
-  })}`;
-
-  openNewTab(
-    {
-      title: sqlTemplate ? 'Query #' : pureName,
-      tooltip,
-      icon: sqlTemplate ? 'img sql-file' : icons[objectTypeField],
-      tabComponent: sqlTemplate ? 'QueryTab' : tabComponent,
-      props: {
-        schemaName,
-        pureName,
-        conid,
-        database,
-        objectTypeField,
-        initialArgs: sqlTemplate ? { sqlTemplate } : null,
-      },
-    },
-    initialData,
-    { forceNewTab }
-  );
-}
-
-function Menu({ data }) {
-  const showModal = useShowModal();
-  const openNewTab = useOpenNewTab();
-  const extensions = useExtensions();
-
-  const getDriver = async () => {
-    const conn = await getConnectionInfo(data);
-    if (!conn) return;
-    const driver = findEngineDriver(conn, extensions);
-    return driver;
-  };
-
-  return (
-    <>
-      {menus[data.objectTypeField].map(menu =>
-        menu.isDivider ? (
-          <DropDownMenuDivider />
-        ) : (
-          <DropDownMenuItem
-            key={menu.label}
-            onClick={async () => {
-              if (menu.isExport) {
-                showModal(modalState => (
-                  <ImportExportModal
-                    modalState={modalState}
-                    initialValues={{
-                      sourceStorageType: 'database',
-                      sourceConnectionId: data.conid,
-                      sourceDatabaseName: data.database,
-                      sourceSchemaName: data.schemaName,
-                      sourceList: [data.pureName],
-                    }}
-                  />
-                ));
-              } else if (menu.isOpenFreeTable) {
-                const coninfo = await getConnectionInfo(data);
-                openNewTab({
-                  title: data.pureName,
-                  icon: 'img free-table',
-                  tabComponent: 'FreeTableTab',
-                  props: {
-                    initialArgs: {
-                      functionName: 'tableReader',
-                      props: {
-                        connection: {
-                          ...coninfo,
-                          database: data.database,
-                        },
-                        schemaName: data.schemaName,
-                        pureName: data.pureName,
-                      },
-                    },
-                  },
-                });
-              } else if (menu.isActiveChart) {
-                const driver = await getDriver();
-                const dmp = driver.createDumper();
-                dmp.put('^select * from %f', data);
-                openNewTab(
-                  {
-                    title: data.pureName,
-                    icon: 'img chart',
-                    tabComponent: 'ChartTab',
-                    props: {
-                      conid: data.conid,
-                      database: data.database,
-                    },
-                  },
-                  {
-                    editor: {
-                      config: { chartType: 'bar' },
-                      sql: dmp.s,
-                    },
-                  }
-                );
-              } else if (menu.isQueryDesigner) {
-                openNewTab(
-                  {
-                    title: 'Query #',
-                    icon: 'img query-design',
-                    tabComponent: 'QueryDesignTab',
-                    props: {
-                      conid: data.conid,
-                      database: data.database,
-                    },
-                  },
-                  {
-                    editor: {
-                      tables: [
-                        {
-                          ...data,
-                          designerId: uuidv1(),
-                          left: 50,
-                          top: 50,
-                        },
-                      ],
-                    },
-                  }
-                );
-              } else {
-                openDatabaseObjectDetail(
-                  openNewTab,
-                  menu.tab,
-                  menu.sqlTemplate,
-                  data,
-                  menu.forceNewTab,
-                  menu.initialData
-                );
-              }
-            }}
-          >
-            {menu.label}
-          </DropDownMenuItem>
-        )
-      )}
-    </>
-  );
-}
-
-function DatabaseObjectAppObject({ data, commonProps }) {
-  const { conid, database, pureName, schemaName, objectTypeField } = data;
-  const openNewTab = useOpenNewTab();
-  const onClick = ({ schemaName, pureName }) => {
-    openDatabaseObjectDetail(
-      openNewTab,
-      defaultTabs[objectTypeField],
-      defaultTabs[objectTypeField] ? null : 'CREATE OBJECT',
-      {
-        schemaName,
-        pureName,
-        conid,
-        database,
-        objectTypeField,
-      },
-      false
-    );
-  };
-
-  return (
-    <AppObjectCore
-      {...commonProps}
-      data={data}
-      title={schemaName ? `${schemaName}.${pureName}` : pureName}
-      icon={icons[objectTypeField]}
-      onClick={onClick}
-      Menu={Menu}
-    />
-  );
-}
-
-DatabaseObjectAppObject.extractKey = ({ schemaName, pureName }) =>
-  schemaName ? `${schemaName}.${pureName}` : pureName;
-
-DatabaseObjectAppObject.createMatcher = ({ pureName }) => filter => filterName(filter, pureName);
-
-export default DatabaseObjectAppObject;

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -0,0 +1,417 @@
+<script lang="ts" context="module">
+  export const extractKey = ({ schemaName, pureName }) => (schemaName ? `${schemaName}.${pureName}` : pureName);
+  export const createMatcher = ({ pureName }) => filter => filterName(filter, pureName);
+
+  const icons = {
+    tables: 'img table',
+    collections: 'img collection',
+    views: 'img view',
+    procedures: 'img procedure',
+    functions: 'img function',
+  };
+
+  const defaultTabs = {
+    tables: 'TableDataTab',
+    collections: 'CollectionDataTab',
+    views: 'ViewDataTab',
+  };
+
+  const menus = {
+    tables: [
+      {
+        label: 'Open data',
+        tab: 'TableDataTab',
+        forceNewTab: true,
+      },
+      {
+        label: 'Open form',
+        tab: 'TableDataTab',
+        forceNewTab: true,
+        initialData: {
+          grid: {
+            isFormView: true,
+          },
+        },
+      },
+      {
+        label: 'Open structure',
+        tab: 'TableStructureTab',
+      },
+      {
+        label: 'Query designer',
+        isQueryDesigner: true,
+      },
+      {
+        divider: true,
+      },
+      {
+        label: 'Export',
+        isExport: true,
+      },
+      {
+        label: 'Open in free table editor',
+        isOpenFreeTable: true,
+      },
+      {
+        label: 'Open active chart',
+        isActiveChart: true,
+      },
+      {
+        divider: true,
+      },
+      {
+        label: 'SQL: CREATE TABLE',
+        scriptTemplate: 'CREATE TABLE',
+      },
+      {
+        label: 'SQL: SELECT',
+        scriptTemplate: 'SELECT',
+      },
+      {
+        label: 'SQL Generator: CREATE TABLE',
+        sqlGeneratorProps: {
+          createTables: true,
+          createIndexes: true,
+          createForeignKeys: true,
+        },
+      },
+      {
+        label: 'SQL Generator: DROP TABLE',
+        sqlGeneratorProps: {
+          dropTables: true,
+          dropReferences: true,
+        },
+      },
+      {
+        label: 'SQL Generator: INSERT',
+        sqlGeneratorProps: {
+          insert: true,
+        },
+      },
+    ],
+    views: [
+      {
+        label: 'Open data',
+        tab: 'ViewDataTab',
+        forceNewTab: true,
+      },
+      {
+        label: 'Open structure',
+        tab: 'TableStructureTab',
+      },
+      {
+        label: 'Query designer',
+        isQueryDesigner: true,
+      },
+      {
+        divider: true,
+      },
+      {
+        label: 'Export',
+        isExport: true,
+      },
+      {
+        label: 'Open in free table editor',
+        isOpenFreeTable: true,
+      },
+      {
+        label: 'Open active chart',
+        isActiveChart: true,
+      },
+      {
+        divider: true,
+      },
+      {
+        label: 'SQL: CREATE VIEW',
+        scriptTemplate: 'CREATE OBJECT',
+      },
+      {
+        label: 'SQL: CREATE TABLE',
+        scriptTemplate: 'CREATE TABLE',
+      },
+      {
+        label: 'SQL: SELECT',
+        scriptTemplate: 'SELECT',
+      },
+      {
+        label: 'SQL Generator: CREATE VIEW',
+        sqlGeneratorProps: {
+          createViews: true,
+        },
+      },
+      {
+        label: 'SQL Generator: DROP VIEW',
+        sqlGeneratorProps: {
+          dropViews: true,
+        },
+      },
+    ],
+    procedures: [
+      {
+        label: 'SQL: CREATE PROCEDURE',
+        scriptTemplate: 'CREATE OBJECT',
+      },
+      {
+        label: 'SQL: EXECUTE',
+        scriptTemplate: 'EXECUTE PROCEDURE',
+      },
+      {
+        label: 'SQL Generator: CREATE PROCEDURE',
+        sqlGeneratorProps: {
+          createProcedures: true,
+        },
+      },
+      {
+        label: 'SQL Generator: DROP PROCEDURE',
+        sqlGeneratorProps: {
+          dropProcedures: true,
+        },
+      },
+    ],
+    functions: [
+      {
+        label: 'SQL: CREATE FUNCTION',
+        scriptTemplate: 'CREATE OBJECT',
+      },
+      {
+        label: 'SQL Generator: CREATE FUNCTION',
+        sqlGeneratorProps: {
+          createFunctions: true,
+        },
+      },
+      {
+        label: 'SQL Generator: DROP FUNCTION',
+        sqlGeneratorProps: {
+          dropFunctions: true,
+        },
+      },
+    ],
+    collections: [
+      {
+        label: 'Open data',
+        tab: 'CollectionDataTab',
+        forceNewTab: true,
+      },
+      {
+        label: 'Open JSON',
+        tab: 'CollectionDataTab',
+        forceNewTab: true,
+        initialData: {
+          grid: {
+            isJsonView: true,
+          },
+        },
+      },
+      {
+        label: 'Export',
+        isExport: true,
+      },
+      {
+        divider: true,
+      },
+      {
+        label: 'JS: dropCollection()',
+        scriptTemplate: 'dropCollection',
+      },
+      {
+        label: 'JS: find()',
+        scriptTemplate: 'findCollection',
+      },
+    ],
+  };
+
+  export async function openDatabaseObjectDetail(
+    tabComponent,
+    scriptTemplate,
+    { schemaName, pureName, conid, database, objectTypeField },
+    forceNewTab,
+    initialData
+  ) {
+    const connection = await getConnectionInfo({ conid });
+    const tooltip = `${connection.displayName || connection.server}\n${database}\n${fullDisplayName({
+      schemaName,
+      pureName,
+    })}`;
+
+    openNewTab(
+      {
+        title: scriptTemplate ? 'Query #' : pureName,
+        tooltip,
+        icon: scriptTemplate ? 'img sql-file' : icons[objectTypeField],
+        tabComponent: scriptTemplate ? 'QueryTab' : tabComponent,
+        props: {
+          schemaName,
+          pureName,
+          conid,
+          database,
+          objectTypeField,
+          initialArgs: scriptTemplate ? { scriptTemplate } : null,
+        },
+      },
+      initialData,
+      { forceNewTab }
+    );
+  }
+</script>
+
+<script lang="ts">
+  import _ from 'lodash';
+  import AppObjectCore from './AppObjectCore.svelte';
+  import { currentDatabase, extensions, openedConnections } from '../stores';
+  import openNewTab from '../utility/openNewTab';
+  import { filterName } from 'dbgate-datalib';
+  import { getConnectionInfo } from '../utility/metadataLoaders';
+  import fullDisplayName from '../utility/fullDisplayName';
+  import ImportExportModal from '../modals/ImportExportModal.svelte';
+  import { showModal } from '../modals/modalTools';
+  import { findEngineDriver } from 'dbgate-tools';
+  import uuidv1 from 'uuid/v1';
+  import SqlGeneratorModal from '../modals/SqlGeneratorModal.svelte';
+
+  export let data;
+
+  function handleClick() {
+    const { schemaName, pureName, conid, database, objectTypeField } = data;
+
+    openDatabaseObjectDetail(
+      defaultTabs[objectTypeField],
+      defaultTabs[objectTypeField] ? null : 'CREATE OBJECT',
+      {
+        schemaName,
+        pureName,
+        conid,
+        database,
+        objectTypeField,
+      },
+      false,
+      null
+    );
+
+    // openNewTab({
+    //   title: data.pureName,
+    //   icon: 'img table',
+    //   tabComponent: 'TableDataTab',
+    //   props: {
+    //     schemaName,
+    //     pureName,
+    //     conid,
+    //     database,
+    //     objectTypeField,
+    //   },
+    // });
+  }
+
+  const getDriver = async () => {
+    const conn = await getConnectionInfo(data);
+    if (!conn) return;
+    const driver = findEngineDriver(conn, $extensions);
+    return driver;
+  };
+
+  function createMenu() {
+    const { objectTypeField } = data;
+    return menus[objectTypeField].map(menu => {
+      if (menu.divider) return menu;
+      return {
+        text: menu.label,
+        onClick: async () => {
+          if (menu.isExport) {
+            showModal(ImportExportModal, {
+              initialValues: {
+                sourceStorageType: 'database',
+                sourceConnectionId: data.conid,
+                sourceDatabaseName: data.database,
+                sourceSchemaName: data.schemaName,
+                sourceList: [data.pureName],
+              },
+            });
+          } else if (menu.isOpenFreeTable) {
+            const coninfo = await getConnectionInfo(data);
+            openNewTab({
+              title: data.pureName,
+              icon: 'img free-table',
+              tabComponent: 'FreeTableTab',
+              props: {
+                initialArgs: {
+                  functionName: 'tableReader',
+                  props: {
+                    connection: {
+                      ...coninfo,
+                      database: data.database,
+                    },
+                    schemaName: data.schemaName,
+                    pureName: data.pureName,
+                  },
+                },
+              },
+            });
+          } else if (menu.isActiveChart) {
+            const driver = await getDriver();
+            const dmp = driver.createDumper();
+            dmp.put('^select * from %f', data);
+            openNewTab(
+              {
+                title: data.pureName,
+                icon: 'img chart',
+                tabComponent: 'ChartTab',
+                props: {
+                  conid: data.conid,
+                  database: data.database,
+                },
+              },
+              {
+                editor: {
+                  config: { chartType: 'bar' },
+                  sql: dmp.s,
+                },
+              }
+            );
+          } else if (menu.isQueryDesigner) {
+            openNewTab(
+              {
+                title: 'Query #',
+                icon: 'img query-design',
+                tabComponent: 'QueryDesignTab',
+                props: {
+                  conid: data.conid,
+                  database: data.database,
+                },
+              },
+              {
+                editor: {
+                  tables: [
+                    {
+                      ...data,
+                      designerId: uuidv1(),
+                      left: 50,
+                      top: 50,
+                    },
+                  ],
+                },
+              }
+            );
+          } else if (menu.sqlGeneratorProps) {
+            showModal(SqlGeneratorModal, {
+              initialObjects: [data],
+              initialConfig: menu.sqlGeneratorProps,
+              conid: data.conid,
+              database: data.database,
+            });
+          } else {
+            openDatabaseObjectDetail(menu.tab, menu.scriptTemplate, data, menu.forceNewTab, menu.initialData);
+          }
+        },
+      };
+    });
+  }
+</script>
+
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  title={data.schemaName ? `${data.schemaName}.${data.pureName}` : data.pureName}
+  icon={icons[data.objectTypeField]}
+  menu={createMenu}
+  on:click={handleClick}
+  on:expand
+/>