try native plugin

.github/workflows/build-app-beta.yaml

@@ -51,8 +51,10 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }} # token for electron publish
 
-          WIN_CSC_LINK: ${{ secrets.WINCERT_CERTIFICATE }}
+          WIN_CSC_LINK: ${{ secrets.WINCERT_2025 }}
-          WIN_CSC_KEY_PASSWORD: ${{ secrets.WINCERT_PASSWORD }}
+          WIN_CSC_KEY_PASSWORD: ${{ secrets.WINCERT_2025_PASSWORD }}
+          # WIN_CSC_LINK: ${{ secrets.WINCERT_CERTIFICATE }}
+          # WIN_CSC_KEY_PASSWORD: ${{ secrets.WINCERT_PASSWORD }}
 
           CSC_LINK: ${{ secrets.APPLECERT_CERTIFICATE }}
           CSC_KEY_PASSWORD: ${{ secrets.APPLECERT_PASSWORD }}

.github/workflows/build-app.yaml

@@ -57,8 +57,10 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }} # token for electron publish
 
-          WIN_CSC_LINK: ${{ secrets.WINCERT_CERTIFICATE }}
+          WIN_CSC_LINK: ${{ secrets.WINCERT_2025 }}
-          WIN_CSC_KEY_PASSWORD: ${{ secrets.WINCERT_PASSWORD }}
+          WIN_CSC_KEY_PASSWORD: ${{ secrets.WINCERT_2025_PASSWORD }}
+          # WIN_CSC_LINK: ${{ secrets.WINCERT_CERTIFICATE }}
+          # WIN_CSC_KEY_PASSWORD: ${{ secrets.WINCERT_PASSWORD }}
 
           CSC_LINK: ${{ secrets.APPLECERT_CERTIFICATE }}
           CSC_KEY_PASSWORD: ${{ secrets.APPLECERT_PASSWORD }}

.node-version

@@ -0,0 +1 @@
+16.14.2

CHANGELOG.md

@@ -8,6 +8,17 @@ Builds:
  - linux - application for linux
  - win - application for Windows
 
+### 5.1.6
+- ADDED: Connection folders support #274
+- ADDED: Keyboard shortcut to hide result window and show/hide the side toolbar #406
+- ADDED: Ability to show/hide query results #406
+- FIXED: Double click does not maximize window on MacOS #416
+- FIXED: Some perspective rendering errors
+- FIXED: Connection to MongoDB via database URL info SSH tunnel is used
+- CHANGED: Updated windows code signing certificate
+- ADDED: Query session cleanup (kill query sessions, if browser tab is closed)
+- CHANGED: More strict timeouts to kill database and server connections (reduces resource consumption)
+
 ### 5.1.5
 - ADDED: Support perspectives for MongoDB - MongoDB query designer
 - ADDED: Show JSON content directly in the overview #395

adjustPackageJson.js

@@ -5,6 +5,9 @@ function adjustFile(file) {
   if (process.platform != 'win32') {
     delete json.optionalDependencies.msnodesqlv8;
   }
+  if (process.arch == 'arm64') {
+    delete json.optionalDependencies.oracledb;
+  }
   fs.writeFileSync(file, JSON.stringify(json, null, 2), 'utf-8');
 }
 

app/package.json

@@ -113,6 +113,7 @@
   },
   "optionalDependencies": {
     "better-sqlite3": "7.6.2",
+    "oracledb": "^5.5.0",
     "msnodesqlv8": "^2.6.0"
   }
 }

app/src/mainMenuDefinition.js

@@ -69,6 +69,7 @@ module.exports = ({ editMenu }) => [
       { command: 'app.toggleDevTools', hideDisabled: true },
       { command: 'app.toggleFullScreen', hideDisabled: true },
       { command: 'app.minimize', hideDisabled: true },
+      { command: 'toggle.sidebar' },
       { divider: true },
       { command: 'theme.changeTheme', hideDisabled: true },
       { command: 'settings.show' },

app/yarn.lock

@@ -1833,6 +1833,11 @@ open@^7.4.2:
     is-docker "^2.0.0"
     is-wsl "^2.1.1"
 
+oracledb@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/oracledb/-/oracledb-5.5.0.tgz#0cf9af5d0c0815f74849ae9ed56aee823514d71b"
+  integrity sha512-i5cPvMENpZP8nnqptB6l0pjiOyySj1IISkbM4Hr3yZEDdANo2eezarwZb9NQ8fTh5pRjmgpZdSyIbnn9N3AENw==
+
 os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"

fillNativeModules.js

@@ -5,9 +5,12 @@ let fillContent = '';
 if (process.platform == 'win32') {
   fillContent += `content.msnodesqlv8 = () => require('msnodesqlv8');`;
 }
+if (process.arch != 'arm64') {
+  fillContent += `content.oracledb = () => require('oracledb');`;
+}
 fillContent += `content['better-sqlite3'] = () => require('better-sqlite3');`;
 
-const getContent = (empty) => `
+const getContent = empty => `
 // this file is generated automatically by script fillNativeModules.js, do not edit it manually
 const content = {};
 

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "5.1.5",
+  "version": "5.1.7-beta.1",
   "name": "dbgate-all",
   "workspaces": [
     "packages/*",

packages/api/package.json

@@ -75,6 +75,7 @@
   },
   "optionalDependencies": {
     "better-sqlite3": "7.6.2",
+    "oracledb": "^5.5.0",
     "msnodesqlv8": "^2.6.0"
   }
 }

packages/api/src/controllers/connections.js

@@ -62,6 +62,7 @@ function getPortalCollections() {
       displayName: process.env[`LABEL_${id}`],
       isReadOnly: process.env[`READONLY_${id}`],
       databases: process.env[`DBCONFIG_${id}`] ? safeJsonParse(process.env[`DBCONFIG_${id}`]) : null,
+      parent: process.env[`PARENT_${id}`] || undefined,
 
       // SSH tunnel
       useSshTunnel: process.env[`USE_SSH_${id}`],

packages/api/src/controllers/sessions.js

@@ -103,6 +103,12 @@ module.exports = {
       if (handleProcessCommunication(message, subprocess)) return;
       this[`handle_${msgtype}`](sesid, message);
     });
+    subprocess.on('exit', () => {
+      this.opened = this.opened.filter(x => x.sesid != sesid);
+      this.dispatchMessage(sesid, 'Query session closed');
+      socket.emit(`session-closed-${sesid}`);
+    });
+
     subprocess.send({ msgtype: 'connect', ...connection, database });
     return _.pick(newOpened, ['conid', 'database', 'sesid']);
   },
@@ -165,6 +171,17 @@ module.exports = {
     return { state: 'ok' };
   },
 
+  ping_meta: true,
+  async ping({ sesid }) {
+    const session = this.opened.find(x => x.sesid == sesid);
+    if (!session) {
+      throw new Error('Invalid session');
+    }
+    session.subprocess.send({ msgtype: 'ping' });
+
+    return { state: 'ok' };
+  },
+
   // runCommand_meta: true,
   // async runCommand({ conid, database, sql }) {
   //   console.log(`Running SQL command , conid=${conid}, database=${database}, sql=${sql}`);

packages/api/src/proc/databaseConnectionProcess.js

@@ -335,11 +335,11 @@ function start() {
 
   setInterval(() => {
     const time = new Date().getTime();
-    if (time - lastPing > 120 * 1000) {
+    if (time - lastPing > 40 * 1000) {
       console.log('Database connection not alive, exiting');
       process.exit(0);
     }
-  }, 60 * 1000);
+  }, 10 * 1000);
 
   process.on('message', async message => {
     if (handleProcessCommunication(message)) return;

packages/api/src/proc/serverConnectionProcess.js

@@ -111,11 +111,11 @@ function start() {
 
   setInterval(() => {
     const time = new Date().getTime();
-    if (time - lastPing > 120 * 1000) {
+    if (time - lastPing > 40 * 1000) {
       console.log('Server connection not alive, exiting');
       process.exit(0);
     }
-  }, 60 * 1000);
+  }, 10 * 1000);
 
   process.on('message', async message => {
     if (handleProcessCommunication(message)) return;

packages/api/src/proc/sessionProcess.js

@@ -15,6 +15,7 @@ let systemConnection;
 let storedConnection;
 let afterConnectCallbacks = [];
 // let currentHandlers = [];
+let lastPing = null;
 
 class TableWriter {
   constructor() {
@@ -271,10 +272,15 @@ async function handleExecuteReader({ jslid, sql, fileName }) {
   });
 }
 
+function handlePing() {
+  lastPing = new Date().getTime();
+}
+
 const messageHandlers = {
   connect: handleConnect,
   executeQuery: handleExecuteQuery,
   executeReader: handleExecuteReader,
+  ping: handlePing,
   // cancel: handleCancel,
 };
 
@@ -285,6 +291,17 @@ async function handleMessage({ msgtype, ...other }) {
 
 function start() {
   childProcessChecker();
+
+  lastPing = new Date().getTime();
+
+  setInterval(() => {
+    const time = new Date().getTime();
+    if (time - lastPing > 25 * 1000) {
+      console.log('Session not alive, exiting');
+      process.exit(0);
+    }
+  }, 10 * 1000);
+
   process.on('message', async message => {
     if (handleProcessCommunication(message)) return;
     try {

packages/datalib/src/ChangeSet.ts

@@ -9,7 +9,7 @@ import {
   AllowIdentityInsert,
   Expression,
 } from 'dbgate-sqltree';
-import { NamedObjectInfo, DatabaseInfo } from 'dbgate-types';
+import type { NamedObjectInfo, DatabaseInfo } from 'dbgate-types';
 
 export interface ChangeSetItem {
   pureName: string;

packages/datalib/src/CollectionGridDisplay.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { GridDisplay, ChangeCacheFunc, ChangeConfigFunc, DisplayColumn } from './GridDisplay';
-import { EngineDriver, ViewInfo, ColumnInfo, CollectionInfo } from 'dbgate-types';
+import type { EngineDriver, ViewInfo, ColumnInfo, CollectionInfo } from 'dbgate-types';
 import { GridConfig, GridCache } from './GridConfig';
 
 function getObjectKeys(obj) {

packages/datalib/src/FormViewDisplay.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { GridConfig, GridCache, GridConfigColumns, createGridCache, GroupFunc } from './GridConfig';
-import { TableInfo, EngineDriver, DatabaseInfo, SqlDialect } from 'dbgate-types';
+import type { TableInfo, EngineDriver, DatabaseInfo, SqlDialect } from 'dbgate-types';
 import { getFilterValueExpression } from 'dbgate-filterparser';
 import { ChangeCacheFunc, ChangeConfigFunc, DisplayColumn } from './GridDisplay';
 

packages/datalib/src/FreeTableGridDisplay.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { EngineDriver, ViewInfo, ColumnInfo } from 'dbgate-types';
+import type { EngineDriver, ViewInfo, ColumnInfo } from 'dbgate-types';
 import { GridDisplay, ChangeCacheFunc, ChangeConfigFunc } from './GridDisplay';
 import { GridConfig, GridCache } from './GridConfig';
 import { FreeTableModel } from './FreeTableModel';

packages/datalib/src/FreeTableModel.ts

@@ -1,4 +1,4 @@
-import { TableInfo } from 'dbgate-types';
+import type { TableInfo } from 'dbgate-types';
 
 export interface FreeTableModel {
   structure: TableInfo;

packages/datalib/src/GridConfig.ts

@@ -1,6 +1,3 @@
-import { DisplayColumn } from './GridDisplay';
-import { TableInfo } from 'dbgate-types';
-
 export interface GridConfigColumns {
   hiddenColumns: string[];
   expandedColumns: string[];

packages/datalib/src/GridDisplay.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { GridConfig, GridCache, GridConfigColumns, createGridCache, GroupFunc, createGridConfig } from './GridConfig';
-import {
+import type {
   ForeignKeyInfo,
   TableInfo,
   ColumnInfo,

packages/datalib/src/JslGridDisplay.ts

@@ -1,6 +1,5 @@
 import _ from 'lodash';
 import { GridDisplay, ChangeCacheFunc, ChangeConfigFunc } from './GridDisplay';
-import { QueryResultColumn } from 'dbgate-types';
 import { GridConfig, GridCache } from './GridConfig';
 import { analyseCollectionDisplayColumns } from './CollectionGridDisplay';
 

packages/datalib/src/PerspectiveCache.ts

@@ -1,4 +1,3 @@
-import { RangeDefinition } from 'dbgate-types';
 import { PerspectiveDataLoadProps } from './PerspectiveDataProvider';
 import _pick from 'lodash/pick';
 import _zip from 'lodash/zip';

packages/datalib/src/PerspectiveConfig.ts

@@ -1,4 +1,4 @@
-import { DatabaseInfo, ForeignKeyInfo, NamedObjectInfo, TableInfo } from 'dbgate-types';
+import type { DatabaseInfo, ForeignKeyInfo, NamedObjectInfo, TableInfo } from 'dbgate-types';
 import uuidv1 from 'uuid/v1';
 
 // export interface PerspectiveConfigColumns {

packages/datalib/src/PerspectiveDataProvider.ts

@@ -1,6 +1,6 @@
 import debug from 'debug';
 import { Condition } from 'dbgate-sqltree';
-import { RangeDefinition } from 'dbgate-types';
+import type { RangeDefinition } from 'dbgate-types';
 import { PerspectiveBindingGroup, PerspectiveCache } from './PerspectiveCache';
 import { PerspectiveDataLoader } from './PerspectiveDataLoader';
 import { PerspectiveDataPatternDict } from './PerspectiveDataPattern';

packages/datalib/src/PerspectiveTreeNode.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   CollectionInfo,
   ColumnInfo,
   DatabaseInfo,

packages/datalib/src/TableFormViewDisplay.ts

@@ -1,7 +1,7 @@
 import { FormViewDisplay } from './FormViewDisplay';
 import _ from 'lodash';
 import { ChangeCacheFunc, DisplayColumn, ChangeConfigFunc } from './GridDisplay';
-import { EngineDriver, NamedObjectInfo, DatabaseInfo } from 'dbgate-types';
+import type { EngineDriver, NamedObjectInfo, DatabaseInfo } from 'dbgate-types';
 import { GridConfig, GridCache } from './GridConfig';
 import { mergeConditions, Condition, OrderByExpression } from 'dbgate-sqltree';
 import { TableGridDisplay } from './TableGridDisplay';

packages/datalib/src/TableGridDisplay.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import { filterName, isTableColumnUnique } from 'dbgate-tools';
 import { GridDisplay, ChangeCacheFunc, DisplayColumn, DisplayedColumnInfo, ChangeConfigFunc } from './GridDisplay';
-import {
+import type {
   TableInfo,
   EngineDriver,
   ViewInfo,

packages/datalib/src/ViewGridDisplay.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { GridDisplay, ChangeCacheFunc, ChangeConfigFunc } from './GridDisplay';
-import { EngineDriver, ViewInfo, ColumnInfo } from 'dbgate-types';
+import type { EngineDriver, ViewInfo, ColumnInfo } from 'dbgate-types';
 import { GridConfig, GridCache } from './GridConfig';
 
 export class ViewGridDisplay extends GridDisplay {

packages/datalib/src/deleteCascade.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { Command, Insert, Update, Delete, UpdateField, Condition, AllowIdentityInsert } from 'dbgate-sqltree';
-import { NamedObjectInfo, DatabaseInfo, ForeignKeyInfo, TableInfo } from 'dbgate-types';
+import type { NamedObjectInfo, DatabaseInfo, ForeignKeyInfo, TableInfo } from 'dbgate-types';
 import { ChangeSet, ChangeSetItem, extractChangeSetCondition } from './ChangeSet';
 
 export interface ChangeSetDeleteCascade {

packages/datalib/src/index.ts

@@ -20,3 +20,4 @@ export * from './PerspectiveCache';
 export * from './PerspectiveConfig';
 export * from './processPerspectiveDefaultColunns';
 export * from './PerspectiveDataPattern';
+export * from './PerspectiveDataLoader';

packages/datalib/src/processPerspectiveDefaultColunns.ts

@@ -1,5 +1,5 @@
 import { findForeignKeyForColumn } from 'dbgate-tools';
-import { DatabaseInfo, TableInfo, ViewInfo } from 'dbgate-types';
+import type { DatabaseInfo, TableInfo, ViewInfo } from 'dbgate-types';
 import { createPerspectiveNodeConfig, MultipleDatabaseInfo, PerspectiveConfig } from './PerspectiveConfig';
 import { PerspectiveDataPattern, PerspectiveDataPatternDict } from './PerspectiveDataPattern';
 import { PerspectiveTableNode } from './PerspectiveTreeNode';

packages/datalib/src/tests/chinookDbInfo.ts

@@ -1,4 +1,4 @@
-import { DatabaseInfo } from 'dbgate-types';
+import type { DatabaseInfo } from 'dbgate-types';
 
 export const chinookDbInfo: DatabaseInfo = {
   tables: [

packages/filterparser/src/datetimeParser.ts

@@ -2,7 +2,7 @@ import P from 'parsimmon';
 import moment from 'moment';
 import { FilterType } from './types';
 import { Condition } from 'dbgate-sqltree';
-import { TransformType } from 'dbgate-types';
+import type { TransformType } from 'dbgate-types';
 import { interpretEscapes, token, word, whitespace } from './common';
 
 const compoudCondition = conditionType => conditions => {

packages/filterparser/src/parseFilter.ts

@@ -2,7 +2,6 @@ import P from 'parsimmon';
 import moment from 'moment';
 import { FilterType } from './types';
 import { Condition } from 'dbgate-sqltree';
-import { TransformType } from 'dbgate-types';
 import { interpretEscapes, token, word, whitespace } from './common';
 import { mongoParser } from './mongoParser';
 import { datetimeParser } from './datetimeParser';

packages/sqltree/src/dumpSqlCommand.ts

@@ -1,4 +1,4 @@
-import { SqlDumper } from 'dbgate-types';
+import type { SqlDumper } from 'dbgate-types';
 import { Command, Select, Update, Delete, Insert } from './types';
 import { dumpSqlExpression } from './dumpSqlExpression';
 import { dumpSqlFromDefinition, dumpSqlSourceRef } from './dumpSqlSource';

packages/sqltree/src/dumpSqlCondition.ts

@@ -1,4 +1,4 @@
-import { SqlDumper } from 'dbgate-types';
+import type { SqlDumper } from 'dbgate-types';
 import { Condition, BinaryCondition } from './types';
 import { dumpSqlExpression } from './dumpSqlExpression';
 import { dumpSqlSelect } from './dumpSqlCommand';

packages/sqltree/src/dumpSqlExpression.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { SqlDumper } from 'dbgate-types';
+import type { SqlDumper } from 'dbgate-types';
 import { Expression, ColumnRefExpression } from './types';
 import { dumpSqlSourceRef } from './dumpSqlSource';
 

packages/sqltree/src/dumpSqlSource.ts

@@ -1,5 +1,5 @@
 import { Source, FromDefinition, Relation } from './types';
-import { SqlDumper } from 'dbgate-types';
+import type { SqlDumper } from 'dbgate-types';
 import { dumpSqlSelect } from './dumpSqlCommand';
 import { dumpSqlCondition } from './dumpSqlCondition';
 

packages/sqltree/src/evaluateCondition.ts

@@ -1,10 +1,6 @@
-import { SqlDumper } from 'dbgate-types';
 import _ from 'lodash';
 import { Condition, BinaryCondition } from './types';
-import { dumpSqlExpression } from './dumpSqlExpression';
-import { link } from 'fs';
 import { evaluateExpression } from './evaluateExpression';
-import { cond } from 'lodash';
 
 function isEmpty(value) {
   if (value == null) return true;

packages/sqltree/src/types.ts

@@ -1,4 +1,4 @@
-import { NamedObjectInfo, RangeDefinition, TransformType } from 'dbgate-types';
+import type { NamedObjectInfo, RangeDefinition, TransformType } from 'dbgate-types';
 
 // export interface Command {
 // }

packages/sqltree/src/utility.ts

@@ -1,4 +1,4 @@
-import { EngineDriver, SqlDumper } from 'dbgate-types';
+import type { EngineDriver, SqlDumper } from 'dbgate-types';
 import { Command, Condition } from './types';
 import { dumpSqlCommand } from './dumpSqlCommand';
 

packages/tools/src/SqlDumper.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import {
+import type {
   ColumnInfo,
   ConstraintInfo,
   EngineDriver,

packages/tools/src/SqlGenerator.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   DatabaseInfo,
   EngineDriver,
   FunctionInfo,

packages/tools/src/computeDiffRows.ts

@@ -1,5 +1,5 @@
 import { DbDiffOptions, testEqualColumns, testEqualTables, testEqualSqlObjects } from './diffTools';
-import { DatabaseInfo, EngineDriver, SqlObjectInfo, TableInfo } from 'dbgate-types';
+import type { DatabaseInfo, EngineDriver, SqlObjectInfo, TableInfo } from 'dbgate-types';
 import _ from 'lodash';
 
 export function computeDiffRowsCore(sourceList, targetList, testEqual) {

packages/tools/src/createBulkInsertStreamBase.ts

@@ -1,4 +1,3 @@
-import { EngineDriver } from 'dbgate-types';
 import _intersection from 'lodash/intersection';
 import { prepareTableForImport } from './tableTransforms';
 

packages/tools/src/diffTools.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   ColumnInfo,
   ConstraintInfo,
   DatabaseInfo,

packages/tools/src/nameTools.ts

@@ -1,6 +1,6 @@
 import _cloneDeep from 'lodash/cloneDeep';
 import _isString from 'lodash/isString';
-import {
+import type {
   ColumnInfo,
   ColumnReference,
   DatabaseInfo,

packages/tools/src/packageTools.ts

@@ -1,4 +1,4 @@
-import { EngineDriver, ExtensionsDirectory } from 'dbgate-types';
+import type { EngineDriver, ExtensionsDirectory } from 'dbgate-types';
 import _camelCase from 'lodash/camelCase';
 import _isString from 'lodash/isString';
 import _isPlainObject from 'lodash/isPlainObject';

packages/tools/src/preloadedRowsTools.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { DatabaseInfo, EngineDriver } from 'dbgate-types';
+import type { DatabaseInfo, EngineDriver } from 'dbgate-types';
 
 export async function enrichWithPreloadedRows(
   dbModel: DatabaseInfo,

packages/tools/src/schemaEditorTools.ts

@@ -1,6 +1,6 @@
 import uuidv1 from 'uuid/v1';
 import _omit from 'lodash/omit';
-import {
+import type {
   ColumnInfo,
   ConstraintInfo,
   ForeignKeyInfo,

packages/tools/src/structureTools.ts

@@ -1,4 +1,4 @@
-import { DatabaseInfo, TableInfo, ApplicationDefinition, ViewInfo, CollectionInfo } from 'dbgate-types';
+import type { DatabaseInfo, TableInfo, ApplicationDefinition, ViewInfo, CollectionInfo } from 'dbgate-types';
 import _flatten from 'lodash/flatten';
 
 export function addTableDependencies(db: DatabaseInfo): DatabaseInfo {

packages/tools/src/tableTransforms.ts

@@ -1,4 +1,4 @@
-import { TableInfo } from 'dbgate-types';
+import type { TableInfo } from 'dbgate-types';
 import _cloneDeep from 'lodash/cloneDeep';
 import _fromPairs from 'lodash/fromPairs';
 import _get from 'lodash/get';

packages/web/rollup.config.js

@@ -88,6 +88,20 @@ export default [
           // enable run-time checks when not in production
           dev: !production,
         },
+        onwarn: (warning, handler) => {
+          const ignoreWarnings = [
+            'a11y-click-events-have-key-events',
+            'a11y-missing-attribute',
+            'a11y-invalid-attribute',
+            'a11y-no-noninteractive-tabindex',
+            'a11y-label-has-associated-control',
+            'vite-plugin-svelte-css-no-scopable-elements',
+            'unused-export-let',
+          ];
+          if (ignoreWarnings.includes(warning.code)) return;
+          // console.log('***************************', warning.code);
+          handler(warning);
+        },
       }),
       // we'll extract any component CSS out into
       // a separate file - better for performance

packages/web/src/Screen.svelte

@@ -8,6 +8,7 @@
     leftPanelWidth,
     openedSnackbars,
     selectedWidget,
+    visibleWidgetSideBar,
     visibleCommandPalette,
     visibleTitleBar,
     visibleToolbar,
@@ -29,7 +30,7 @@
 
   $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 
-  $: themeStyle = `<style id="themePlugin">${$currentThemeDefinition?.themeCss}</style>`;
+  $: themeStyle = `<st` + `yle id="themePlugin">${$currentThemeDefinition?.themeCss}</st` + `yle>`;
 
   const isElectron = !!getElectron();
 </script>
@@ -63,7 +64,7 @@
   <div class="statusbar">
     <StatusBar />
   </div>
-  {#if $selectedWidget}
+  {#if $selectedWidget && $visibleWidgetSideBar}
     <div class="leftpanel">
       <WidgetContainer />
     </div>
@@ -74,7 +75,7 @@
   <div class="content">
     <TabRegister />
   </div>
-  {#if $selectedWidget}
+  {#if $selectedWidget && $visibleWidgetSideBar}
     <div
       class="horizontal-split-handle splitter"
       use:splitterDrag={'clientX'}

packages/web/src/appobj/AppFileAppObject.svelte

@@ -16,7 +16,7 @@
         tabComponent,
         tooltip,
         props: {
-          savedFile:fileName + '.' + fileType,
+          savedFile: fileName + '.' + fileType,
           savedFolder: 'app:' + folderName,
           savedFormat: 'text',
           appFolder: folderName,
@@ -28,7 +28,10 @@
   }
 
   export const extractKey = data => data.fileName;
-  export const createMatcher = ({ fileName }) => filter => filterName(filter, fileName);
+  export const createMatcher =
+    ({ fileName }) =>
+    filter =>
+      filterName(filter, fileName);
   const APP_ICONS = {
     'config.json': 'img json',
     'command.sql': 'img app-command',
@@ -50,7 +53,6 @@
   import InputTextModal from '../modals/InputTextModal.svelte';
   import ConfirmModal from '../modals/ConfirmModal.svelte';
   import { apiCall } from '../utility/api';
-  import { currentDatabase, currentDatabase } from '../stores';
 
   export let data;
 

packages/web/src/appobj/AppObjectGroup.svelte

@@ -10,10 +10,12 @@
   export let group;
   export let groupFunc;
   export let items;
+  export let groupIconFunc = plusExpandIcon;
   export let module;
   export let checkedObjectsStore = null;
   export let disableContextMenu = false;
   export let passProps;
+  export let onDropOnGroup = undefined;
 
   let isExpanded = true;
 
@@ -33,11 +35,19 @@
       return res;
     });
   }
+
+  function handleDrop(e) {
+    var data = e.dataTransfer.getData('app_object_drag_data');
+    if (data && onDropOnGroup) {
+      e.stopPropagation();
+      onDropOnGroup(data, group);
+    }
+  }
 </script>
 
-<div class="group" on:click={() => (isExpanded = !isExpanded)}>
+<div class="group" on:click={() => (isExpanded = !isExpanded)} on:drop={handleDrop}>
   <span class="expand-icon">
-    <FontIcon icon={plusExpandIcon(isExpanded)} />
+    <FontIcon icon={groupIconFunc(isExpanded)} />
   </span>
 
   {group}
@@ -53,18 +63,20 @@
     </div>
   {/if}
 
-  {#each items as item}
+  <div on:drop={handleDrop}>
-    <AppObjectListItem
+    {#each items as item}
-      isHidden={!item.isMatched}
+      <AppObjectListItem
-      {...$$restProps}
+        isHidden={!item.isMatched}
-      {module}
+        {...$$restProps}
-      data={item.data}
+        {module}
-      {checkedObjectsStore}
+        data={item.data}
-      on:objectClick
+        {checkedObjectsStore}
-      {disableContextMenu}
+        on:objectClick
-      {passProps}
+        {disableContextMenu}
-    />
+        {passProps}
-  {/each}
+      />
+    {/each}
+  </div>
 {/if}
 
 <style>

packages/web/src/appobj/AppObjectList.svelte

@@ -1,7 +1,8 @@
 <script>
-  import _ from 'lodash';
+  import _, { sortBy } from 'lodash';
   import { asyncFilter } from '../utility/common';
   import AppObjectGroup from './AppObjectGroup.svelte';
+  import { plusExpandIcon } from '../icons/expandIcons';
 
   import AppObjectListItem from './AppObjectListItem.svelte';
 
@@ -17,8 +18,12 @@
   export let passProps;
   export let getIsExpanded = null;
   export let setIsExpanded = null;
+  export let sortGroups = false;
 
+  export let groupIconFunc = plusExpandIcon;
   export let groupFunc = undefined;
+  export let onDropOnGroup = undefined;
+  export let emptyGroupNames = [];
 
   $: filtered = !groupFunc
     ? list.filter(data => {
@@ -61,16 +66,28 @@
       )
     : null;
 
-  $: groups = groupFunc ? _.groupBy(listGrouped, 'group') : null;
+  function extendGroups(base, emptyList) {
+    const res = {
+      ...base,
+    };
+    for (const item of emptyList) {
+      if (res[item]) continue;
+      res[item] = [];
+    }
+    return res;
+  }
+
+  $: groups = groupFunc ? extendGroups(_.groupBy(listGrouped, 'group'), emptyGroupNames) : null;
 </script>
 
 {#if groupFunc}
-  {#each _.keys(groups) as group}
+  {#each sortGroups ? _.sortBy(_.keys(groups)) : _.keys(groups) as group}
     <AppObjectGroup
       {group}
       {module}
       items={groups[group]}
       {expandIconFunc}
+      {groupIconFunc}
       {isExpandable}
       {subItemsComponent}
       {checkedObjectsStore}
@@ -80,6 +97,7 @@
       {passProps}
       {getIsExpanded}
       {setIsExpanded}
+      {onDropOnGroup}
     />
   {/each}
 {:else}

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -180,6 +180,7 @@
       });
       currentArchive.set(resp.archiveFolder);
       selectedWidget.set('archive');
+      visibleWidgetSideBar.set(true);
       showSnackbarSuccess(`Saved to archive ${resp.archiveFolder}`);
     };
 
@@ -338,6 +339,7 @@
     openedSingleDatabaseConnections,
     pinnedDatabases,
     selectedWidget,
+    visibleWidgetSideBar,
   } from '../stores';
   import getElectron from '../utility/getElectron';
   import openNewTab from '../utility/openNewTab';

packages/web/src/charts/chartDataLoader.ts

@@ -1,5 +1,5 @@
-import { dumpSqlSelect, Select } from 'dbgate-sqltree';
+import type { Select } from 'dbgate-sqltree';
-import { EngineDriver } from 'dbgate-types';
+import type { EngineDriver } from 'dbgate-types';
 import _ from 'lodash';
 import { apiCall } from '../utility/api';
 

packages/web/src/commands/invalidateCommands.ts

@@ -1,6 +1,6 @@
 import { tick } from 'svelte';
 import { commands } from '../stores';
-import { GlobalCommand } from './registerCommand';
+import type { GlobalCommand } from './registerCommand';
 
 let isInvalidated = false;
 

packages/web/src/commands/runCommand.ts

@@ -1,5 +1,5 @@
 import { getCommands, visibleCommandPalette } from '../stores';
-import { GlobalCommand } from './registerCommand';
+import type { GlobalCommand } from './registerCommand';
 
 export default function runCommand(id) {
   const commandsValue = getCommands();

packages/web/src/commands/stdCommands.ts

@@ -1,4 +1,13 @@
-import { currentDatabase, currentTheme, extensions, getExtensions, getVisibleToolbar, visibleToolbar } from '../stores';
+import {
+  currentDatabase,
+  currentTheme,
+  emptyConnectionGroupNames,
+  extensions,
+  getExtensions,
+  getVisibleToolbar,
+  visibleToolbar,
+  visibleWidgetSideBar,
+} from '../stores';
 import registerCommand from './registerCommand';
 import { get } from 'svelte/store';
 import AboutModal from '../modals/AboutModal.svelte';
@@ -75,6 +84,15 @@ registerCommand({
   onClick: () => showModal(AboutModal),
 });
 
+registerCommand({
+  id: 'toggle.sidebar',
+  category: 'Sidebar',
+  name: 'Show',
+  toolbarName: 'Toggle sidebar',
+  keyText: 'CtrlOrCommand+B',
+  onClick: () => visibleWidgetSideBar.update(x => !x),
+});
+
 registerCommand({
   id: 'new.connection',
   toolbar: true,
@@ -93,6 +111,31 @@ registerCommand({
   },
 });
 
+registerCommand({
+  id: 'new.connection.folder',
+  toolbar: true,
+  icon: 'icon add-folder',
+  toolbarName: 'Add connection folder',
+  category: 'New',
+  toolbarOrder: 1,
+  name: 'Connection',
+  testEnabled: () => !getCurrentConfig()?.runAsPortal,
+  onClick: () => {
+    showModal(InputTextModal, {
+      value: '',
+      label: 'New connection folder name',
+      header: 'Create connection folder',
+      onConfirm: async folder => {
+        emptyConnectionGroupNames.update(names => {
+          if (!folder) return names;
+          if (names.includes(folder)) return names;
+          return [...names, folder];
+        });
+      },
+    });
+  },
+});
+
 registerCommand({
   id: 'new.query',
   category: 'New',

packages/web/src/datagrid/ChangeSetGrider.ts

@@ -1,5 +1,6 @@
+import type { ChangeSet, MacroDefinition, MacroSelectedCell } from 'dbgate-datalib';
+
 import {
-  ChangeSet,
   changeSetContainsChanges,
   changeSetInsertNewRow,
   createChangeSet,
@@ -7,8 +8,6 @@ import {
   findExistingChangeSetItem,
   getChangeSetInsertedRows,
   GridDisplay,
-  MacroDefinition,
-  MacroSelectedCell,
   revertChangeSetRowChanges,
   setChangeSetValue,
   setChangeSetRowData,
@@ -16,7 +15,8 @@ import {
   runMacroOnValue,
   changeSetInsertDocuments,
 } from 'dbgate-datalib';
-import Grider, { GriderRowStatus } from './Grider';
+import Grider from './Grider';
+import type { GriderRowStatus } from './Grider';
 
 function getRowFromItem(row, matchedChangeSetItem) {
   return matchedChangeSetItem.document

packages/web/src/datagrid/RowsArrayGrider.ts

@@ -1,4 +1,4 @@
-import Grider, { GriderRowStatus } from './Grider';
+import Grider from './Grider';
 
 export default class RowsArrayGrider extends Grider {
   constructor(private rows: any[]) {

packages/web/src/datagrid/gridutil.ts

@@ -1,8 +1,8 @@
 import _ from 'lodash';
 import { SeriesSizes } from './SeriesSizes';
-import { CellAddress } from './selection';
+import type { CellAddress } from './selection';
-import { GridDisplay } from 'dbgate-datalib';
+import type { GridDisplay } from 'dbgate-datalib';
-import Grider from './Grider';
+import type Grider from './Grider';
 import { isJsonLikeLongString, safeJsonParse } from 'dbgate-tools';
 
 export function countColumnSizes(grider: Grider, columns, containerWidth, display: GridDisplay) {

packages/web/src/designer/DesignerComponentCreator.ts

@@ -1,7 +1,5 @@
 import _ from 'lodash';
-import { dumpSqlSelect, Select, JoinType, Condition, Relation, mergeConditions, Source } from 'dbgate-sqltree';
+import type { DesignerInfo, DesignerTableInfo, DesignerReferenceInfo, DesignerJoinType } from './types';
-import { EngineDriver } from 'dbgate-types';
-import { DesignerInfo, DesignerTableInfo, DesignerReferenceInfo, DesignerJoinType } from './types';
 import { findPrimaryTable, findConnectingReference, referenceIsJoin, referenceIsExists } from './designerTools';
 
 export class DesignerComponent {

packages/web/src/designer/DesignerQueryDumper.ts

@@ -1,18 +1,9 @@
 import _ from 'lodash';
-import {
+import type { Select, JoinType, Condition, ResultField, Expression } from 'dbgate-sqltree';
-  dumpSqlSelect,
+
-  Select,
+import { mergeConditions } from 'dbgate-sqltree';
-  JoinType,
+import type { DesignerInfo, DesignerTableInfo } from './types';
-  Condition,
+import type { DesignerComponent } from './DesignerComponentCreator';
-  Relation,
-  mergeConditions,
-  Source,
-  ResultField,
-  Expression,
-} from 'dbgate-sqltree';
-import { EngineDriver } from 'dbgate-types';
-import { DesignerInfo, DesignerTableInfo, DesignerReferenceInfo, DesignerJoinType } from './types';
-import { DesignerComponent } from './DesignerComponentCreator';
 import {
   getReferenceConditions,
   referenceIsCrossJoin,

packages/web/src/designer/DomTableRef.ts

@@ -1,4 +1,4 @@
-import { DesignerTableInfo } from './types';
+import type { DesignerTableInfo } from './types';
 
 export default class DomTableRef {
   domTable: Element;

packages/web/src/designer/GraphLayout.ts

@@ -1,12 +1,6 @@
 import _ from 'lodash';
-import {
+import type { IBoxBounds, IPoint } from './designerMath';
-  IBoxBounds,
+import { rectangleDistance, rectangleIntersectArea, solveOverlapsInIntervalArray, Vector2D } from './designerMath';
-  IPoint,
-  rectangleDistance,
-  rectangleIntersectArea,
-  solveOverlapsInIntervalArray,
-  Vector2D,
-} from './designerMath';
 import { union, intersection } from 'interval-operations';
 
 const MIN_NODE_DISTANCE = 50;

packages/web/src/designer/designerTools.ts

@@ -1,7 +1,8 @@
 import _ from 'lodash';
-import { dumpSqlSelect, Select, JoinType, Condition, Relation, mergeConditions, Source } from 'dbgate-sqltree';
+import type { Select, Condition, Source } from 'dbgate-sqltree';
-import { EngineDriver } from 'dbgate-types';
+import { dumpSqlSelect, mergeConditions } from 'dbgate-sqltree';
-import { DesignerInfo, DesignerTableInfo, DesignerReferenceInfo, DesignerJoinType } from './types';
+import type { EngineDriver } from 'dbgate-types';
+import type { DesignerInfo, DesignerTableInfo, DesignerReferenceInfo, DesignerJoinType } from './types';
 import { DesignerComponentCreator } from './DesignerComponentCreator';
 import { DesignerQueryDumper } from './DesignerQueryDumper';
 import { getFilterType } from 'dbgate-filterparser';

packages/web/src/designer/types.ts

@@ -1,5 +1,5 @@
-import { JoinType } from 'dbgate-sqltree';
+import type { JoinType } from 'dbgate-sqltree';
-import { TableInfo } from 'dbgate-types';
+import type { TableInfo } from 'dbgate-types';
 
 export type DesignerTableInfo = TableInfo & {
   designerId: string;

packages/web/src/elements/QueryDesignColumns.svelte

@@ -47,7 +47,7 @@
       );
 
       if (index >= 0 && index + d >= 0 && index + d < current.columns?.length) {
-        const columns = [...current.columns];
+        let columns = [...current.columns];
 
         [columns[index], columns[index + d]] = [columns[index + d], columns[index]];
 

packages/web/src/formview/ChangeSetFormer.ts

@@ -1,5 +1,5 @@
+import type { ChangeSet, ChangeSetRowDefinition } from 'dbgate-datalib';
 import {
-  ChangeSet,
   changeSetContainsChanges,
   changeSetInsertNewRow,
   createChangeSet,
@@ -9,7 +9,6 @@ import {
   TableFormViewDisplay,
   revertChangeSetRowChanges,
   setChangeSetValue,
-  ChangeSetRowDefinition,
 } from 'dbgate-datalib';
 import Former from './Former';
 

packages/web/src/freetable/FreeTableGrider.ts

@@ -1,5 +1,5 @@
-import { FreeTableModel } from 'dbgate-datalib';
+import type { FreeTableModel } from 'dbgate-datalib';
-import Grider, { GriderRowStatus } from '../datagrid/Grider';
+import Grider from '../datagrid/Grider';
 
 export default class FreeTableGrider extends Grider {
   public model: FreeTableModel;

packages/web/src/freetable/MacroPreviewGrider.ts

@@ -1,5 +1,7 @@
-import { FreeTableModel, MacroDefinition, MacroSelectedCell, runMacro } from 'dbgate-datalib';
+import type { FreeTableModel, MacroDefinition, MacroSelectedCell } from 'dbgate-datalib';
-import Grider, { GriderRowStatus } from '../datagrid/Grider';
+import { runMacro } from 'dbgate-datalib';
+import Grider from '../datagrid/Grider';
+import type { GriderRowStatus } from '../datagrid/Grider';
 import _ from 'lodash';
 
 function convertToSet(row, field) {

packages/web/src/icons/FontIcon.svelte

@@ -29,6 +29,7 @@
     'icon arrange': 'mdi mdi-arrange-send-to-back',
     'icon app': 'mdi mdi-layers-triple',
     'icon open-in-new': 'mdi mdi-open-in-new',
+    'icon add-folder': 'mdi mdi-folder-plus-outline',
 
     'icon window-restore': 'mdi mdi-window-restore',
     'icon window-close': 'mdi mdi-window-close',

packages/web/src/icons/expandIcons.ts

@@ -1,7 +1,7 @@
-export function plusExpandIcon(isExpanded) {
+export function plusExpandIcon(isExpanded): string {
   return isExpanded ? 'icon minus-box' : 'icon plus-box';
 }
 
-export function chevronExpandIcon(isExpanded) {
+export function chevronExpandIcon(isExpanded): string {
   return isExpanded ? 'icon chevron-down' : 'icon chevron-right';
 }

packages/web/src/modals/ImportExportModal.svelte

@@ -16,7 +16,7 @@
   import { getDefaultFileFormat } from '../plugins/fileformats';
   import RunnerOutputFiles from '../query/RunnerOutputFiles.svelte';
   import SocketMessageView from '../query/SocketMessageView.svelte';
-  import { currentArchive, currentDatabase, extensions, getCurrentConfig, selectedWidget } from '../stores';
+  import { currentArchive, currentDatabase, extensions, visibleWidgetSideBar, selectedWidget } from '../stores';
   import { apiCall, apiOff, apiOn } from '../utility/api';
   import createRef from '../utility/createRef';
   import openNewTab from '../utility/openNewTab';
@@ -85,6 +85,7 @@
       apiCall('archive/refresh-files', { folder: refreshArchiveFolderRef.get() });
       $currentArchive = refreshArchiveFolderRef.get();
       $selectedWidget = 'archive';
+      $visibleWidgetSideBar = true;
     }
   };
 

packages/web/src/perspectives/CustomJoinModal.svelte

@@ -16,13 +16,8 @@
     useViewInfo,
   } from '../utility/metadataLoaders';
   import { onMount, tick } from 'svelte';
-  import {
+  import { createPerspectiveNodeConfig, PerspectiveTreeNode } from 'dbgate-datalib';
-    ChangePerspectiveConfigFunc,
+  import type { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveCustomJoinConfig } from 'dbgate-datalib';
-    createPerspectiveNodeConfig,
-    PerspectiveConfig,
-    PerspectiveCustomJoinConfig,
-    PerspectiveTreeNode,
-  } from 'dbgate-datalib';
   import getConnectionLabel from '../utility/getConnectionLabel';
   import uuidv1 from 'uuid/v1';
   import TextField from '../forms/TextField.svelte';

packages/web/src/perspectives/PerspectiveCell.svelte

@@ -23,7 +23,7 @@
       {:else}
         <span class="null"> (no image)</span>
       {/if}
-    {:else if !value.$oid && (_.isArray(value) || _.isPlainObject(value))}
+    {:else if !value?.$oid && (_.isArray(value) || _.isPlainObject(value))}
       <JSONTree {value} slicedKeyCount={1} disableContextMenu />
     {:else}
       <CellValue {rowData} {value} />

packages/web/src/perspectives/PerspectiveDesigner.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
   import {
     createPerspectiveNodeConfig,
-    MultipleDatabaseInfo,
-    PerspectiveConfig,
-    PerspectiveDataPatternDict,
     perspectiveNodesHaveStructure,
     PerspectiveTreeNode,
     switchPerspectiveReferenceDirection,
   } from 'dbgate-datalib';
-  import { CollectionInfo } from 'dbgate-types';
+  import type { MultipleDatabaseInfo, PerspectiveConfig, PerspectiveDataPatternDict } from 'dbgate-datalib';
+  import type { CollectionInfo } from 'dbgate-types';
   import _ from 'lodash';
   import { tick } from 'svelte';
   import runCommand from '../commands/runCommand';

packages/web/src/perspectives/PerspectiveFilters.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveTreeNode } from 'dbgate-datalib';
+  import { PerspectiveTreeNode } from 'dbgate-datalib';
+  import type { ChangePerspectiveConfigFunc, PerspectiveConfig } from 'dbgate-datalib';
   import { keys } from 'localforage';
 
   import _, { map } from 'lodash';

packages/web/src/perspectives/PerspectiveFiltersColumn.svelte

@@ -1,19 +1,10 @@
 <script lang="ts">
   import DataFilterControl from '../datagrid/DataFilterControl.svelte';
 
-  import ColumnLabel from '../elements/ColumnLabel.svelte';
   import InlineButton from '../buttons/InlineButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
-  import { getFilterType, getFilterValueExpression } from 'dbgate-filterparser';
+  import { PerspectiveTreeNode } from 'dbgate-datalib';
-  import {
+  import type { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveFilterColumnInfo } from 'dbgate-datalib';
-    ChangePerspectiveConfigFunc,
-    PerspectiveConfig,
-    PerspectiveFilterColumnInfo,
-    PerspectiveTreeNode,
-  } from 'dbgate-datalib';
-  import { showModal } from '../modals/modalTools';
-  import DictionaryLookupModal from '../modals/DictionaryLookupModal.svelte';
-  import ValueLookupModal from '../modals/ValueLookupModal.svelte';
 
   export let filterInfo: PerspectiveFilterColumnInfo;
 

packages/web/src/perspectives/PerspectiveHeaderControl.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveDisplayColumn } from 'dbgate-datalib';
+  import { PerspectiveDisplayColumn } from 'dbgate-datalib';
+  import type { ChangePerspectiveConfigFunc, PerspectiveConfig } from 'dbgate-datalib';
   import _, { mapKeys } from 'lodash';
 
   import DropDownButton from '../buttons/DropDownButton.svelte';
@@ -49,13 +50,13 @@
   .label {
     flex-wrap: nowrap;
   }
-  .order-index {
+  /* .order-index {
     font-size: 10pt;
     margin-left: -3px;
     margin-right: 2px;
     top: -1px;
     position: relative;
-  }
+  } */
   .label {
     flex: 1;
     min-width: 10px;
@@ -68,13 +69,13 @@
     align-self: center;
     font-size: 18px;
   }
-  .grouping {
+  /* .grouping {
     color: var(--theme-font-alt);
     white-space: nowrap;
   }
   .data-type {
     color: var(--theme-font-3);
-  }
+  } */
 
   th {
     /* border: 1px solid var(--theme-border); */

packages/web/src/perspectives/PerspectiveNodeRow.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveTreeNode } from 'dbgate-datalib';
+  import type { ChangePerspectiveConfigFunc, PerspectiveConfig } from 'dbgate-datalib';
+  import { PerspectiveTreeNode } from 'dbgate-datalib';
 
   import ColumnLabel from '../elements/ColumnLabel.svelte';
   import { plusExpandIcon } from '../icons/expandIcons';
@@ -93,7 +94,7 @@
     background: var(--theme-bg-hover);
   }
 
-  .row.isSelected {
+  /* .row.isSelected {
     background: var(--theme-bg-selected);
-  }
+  } */
 </style>

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -13,15 +13,14 @@
 
 <script lang="ts">
   import {
-    ChangePerspectiveConfigFunc,
-    PerspectiveConfig,
     PerspectiveDisplay,
     PerspectivePatternColumnNode,
     PerspectiveTableColumnNode,
     PerspectiveTreeNode,
     PERSPECTIVE_PAGE_SIZE,
   } from 'dbgate-datalib';
-  import _, { values } from 'lodash';
+  import type { ChangePerspectiveConfigFunc, PerspectiveConfig } from 'dbgate-datalib';
+  import _ from 'lodash';
   import { onMount, tick } from 'svelte';
   import resizeObserver from '../utility/resizeObserver';
   import debug from 'debug';
@@ -597,9 +596,9 @@
     z-index: 100;
   }
 
-  th.filter {
+  /* th.filter {
     padding: 0;
-  }
+  } */
 
   thead :global(tr:first-child) :global(th) {
     border-top: 1px solid var(--theme-border);

packages/web/src/perspectives/PerspectiveTree.svelte

@@ -1,11 +1,6 @@
 <script lang="ts">
-  import {
+  import { PerspectiveTreeNode } from 'dbgate-datalib';
-    ChangeConfigFunc,
+  import type { ChangeConfigFunc, ChangePerspectiveConfigFunc, GridConfig, PerspectiveConfig } from 'dbgate-datalib';
-    ChangePerspectiveConfigFunc,
-    GridConfig,
-    PerspectiveConfig,
-    PerspectiveTreeNode,
-  } from 'dbgate-datalib';
   import { filterName } from 'dbgate-tools';
 
   import PerspectiveNodeRow from './PerspectiveNodeRow.svelte';

packages/web/src/perspectives/PerspectiveView.svelte

@@ -26,15 +26,14 @@
 
 <script lang="ts">
   import {
-    ChangePerspectiveConfigFunc,
     extractPerspectiveDatabases,
-    PerspectiveConfig,
     PerspectiveDataProvider,
     PerspectiveTableNode,
     PerspectiveTreeNode,
     processPerspectiveDefaultColunns,
     shouldProcessPerspectiveDefaultColunns,
   } from 'dbgate-datalib';
+  import type { ChangePerspectiveConfigFunc, PerspectiveConfig } from 'dbgate-datalib';
 
   import _ from 'lodash';
 
@@ -48,7 +47,7 @@
   import PerspectiveTable from './PerspectiveTable.svelte';
   import { apiCall } from '../utility/api';
   import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
-  import { PerspectiveDataLoader } from 'dbgate-datalib/lib/PerspectiveDataLoader';
+  import { PerspectiveDataLoader } from 'dbgate-datalib';
   import stableStringify from 'json-stable-stringify';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import registerCommand from '../commands/registerCommand';

packages/web/src/perspectives/perspectiveMenu.ts

@@ -1,4 +1,4 @@
-import { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveTreeNode } from 'dbgate-datalib';
+import type { ChangePerspectiveConfigFunc, PerspectiveConfig, PerspectiveTreeNode } from 'dbgate-datalib';
 import _ from 'lodash';
 import { showModal } from '../modals/modalTools';
 import CustomJoinModal from './CustomJoinModal.svelte';

packages/web/src/plugins/AvailablePluginsList.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import _ from 'lodash';
+  import ErrorInfo from '../elements/ErrorInfo.svelte';
 
   import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
   import SearchInput from '../elements/SearchInput.svelte';
@@ -21,5 +22,9 @@
   <SearchInput placeholder="Search extensions on web" {filter} bind:value={filter} />
 </SearchBoxWrapper>
 <WidgetsInnerContainer>
-  <PluginsList plugins={$plugins} />
+  {#if $plugins?.errorMessage}
+    <ErrorInfo message={$plugins?.errorMessage} />
+  {:else}
+    <PluginsList plugins={$plugins} />
+  {/if}
 </WidgetsInnerContainer>

packages/web/src/plugins/PluginsProvider.svelte

@@ -59,7 +59,7 @@
   import { useInstalledPlugins } from '../utility/metadataLoaders';
   import { buildFileFormats, buildQuickExports } from './fileformats';
   import { buildThemes } from './themes';
-  import dbgateTools from 'dbgate-tools';
+  import * as dbgateTools from 'dbgate-tools';
   import { apiCall } from '../utility/api';
 
   let pluginsDict = {};

packages/web/src/plugins/fileformats.ts

@@ -1,4 +1,4 @@
-import { FileFormatDefinition, QuickExportDefinition } from 'dbgate-types';
+import type { FileFormatDefinition, QuickExportDefinition } from 'dbgate-types';
 
 const jsonlFormat = {
   storageType: 'jsonl',

packages/web/src/settings/SettingsModal.svelte

@@ -18,7 +18,13 @@
   import { closeCurrentModal } from '../modals/modalTools';
   import { EDITOR_THEMES, FONT_SIZES } from '../query/AceEditor.svelte';
   import SqlEditor from '../query/SqlEditor.svelte';
-  import { currentEditorFontSize, currentEditorTheme, extensions, selectedWidget } from '../stores';
+  import {
+    currentEditorFontSize,
+    currentEditorTheme,
+    extensions,
+    selectedWidget,
+    visibleWidgetSideBar,
+  } from '../stores';
   import { isMac } from '../utility/common';
   import getElectron from '../utility/getElectron';
   import ThemeSkeleton from './ThemeSkeleton.svelte';
@@ -47,6 +53,7 @@ ORDER BY
   function openThemePlugins() {
     closeCurrentModal();
     $selectedWidget = 'plugins';
+    $visibleWidgetSideBar = true;
   }
 </script>
 
@@ -123,7 +130,6 @@ ORDER BY
               { value: 'lowerCase', label: 'lower case' },
             ]}
           />
-
         </svelte:fragment>
         <svelte:fragment slot="2">
           <div class="heading">Application theme</div>

packages/web/src/settings/ThemeSkeleton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ThemeDefinition } from 'dbgate-types';
+  import type { ThemeDefinition } from 'dbgate-types';
   import FontIcon from '../icons/FontIcon.svelte';
   import { currentTheme } from '../stores';
   import _ from 'lodash';

packages/web/src/stores.ts

@@ -1,5 +1,5 @@
 import { writable, derived, readable } from 'svelte/store';
-import { ExtensionsDirectory } from 'dbgate-types';
+import type { ExtensionsDirectory } from 'dbgate-types';
 import invalidateCommands from './commands/invalidateCommands';
 import getElectron from './utility/getElectron';
 import { getSettings, useConfig, useSettings } from './utility/metadataLoaders';
@@ -50,6 +50,12 @@ function subscribeCssVariable(store, transform, cssVariable) {
 }
 
 export const selectedWidget = writableWithStorage('database', 'selectedWidget');
+export const visibleWidgetSideBar = writableWithStorage(true, 'visibleWidgetSideBar');
+export const visibleSelectedWidget = derived(
+  [selectedWidget, visibleWidgetSideBar],
+  ([$selectedWidget, $visibleWidgetSideBar]) => ($visibleWidgetSideBar ? $selectedWidget : null)
+);
+export const emptyConnectionGroupNames = writableWithStorage([], 'emptyConnectionGroupNames');
 export const openedConnections = writable([]);
 export const openedSingleDatabaseConnections = writable([]);
 export const expandedConnections = writable([]);
@@ -127,7 +133,7 @@ export const visibleHamburgerMenuWidget = derived(useSettings(), $settings => {
   return !!$settings['app.fullscreen'];
 });
 
-subscribeCssVariable(selectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel');
+subscribeCssVariable(visibleSelectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel');
 // subscribeCssVariable(visibleToolbar, x => (x ? 1 : 0), '--dim-visible-toolbar');
 subscribeCssVariable(leftPanelWidth, x => `${x}px`, '--dim-left-panel-width');
 subscribeCssVariable(visibleTitleBar, x => (x ? 1 : 0), '--dim-visible-titlebar');

packages/web/src/tabs/QueryDesignTab.svelte

@@ -54,6 +54,7 @@
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
   import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/ToolStripExportButton.svelte';
   import ToolStripSaveButton from '../buttons/ToolStripSaveButton.svelte';
+  import { onDestroy, onMount } from 'svelte';
 
   export let tabid;
   export let conid;
@@ -79,8 +80,10 @@
   function onSession(sid) {
     if (sid) {
       apiOn(`session-done-${sid}`, handleSessionDone);
+      apiOn(`session-closed-${sid}`, handleSessionClosed);
       return () => {
         apiOff(`session-done-${sid}`, handleSessionDone);
+        apiOff(`session-closed-${sid}`, handleSessionClosed);
       };
     }
     return () => {};
@@ -102,6 +105,22 @@
 
   $: generatePreview($modelState.value, engine);
 
+  let intervalId;
+
+  onMount(() => {
+    intervalId = setInterval(() => {
+      if (sessionId) {
+        apiCall('sessions/ping', {
+          sesid: sessionId,
+        });
+      }
+    }, 15 * 1000);
+  });
+
+  onDestroy(() => {
+    clearInterval(intervalId);
+  });
+
   export function canKill() {
     return !!sessionId;
   }
@@ -180,6 +199,11 @@
     timerLabel.stop();
   };
 
+  const handleSessionClosed = () => {
+    sessionId = null;
+    handleSessionDone();
+  };
+
   const handleChange = (value, skipUndoChain) =>
     // @ts-ignore
     dispatchModel({

packages/web/src/tabs/QueryTab.svelte

@@ -17,6 +17,14 @@
     testEnabled: () => getCurrentEditor()?.isSqlEditor(),
     onClick: () => getCurrentEditor().insertSqlJoin(),
   });
+  registerCommand({
+    id: 'query.toggleVisibleResultTabs',
+    category: 'Query',
+    name: 'Toggle visible result tabs',
+    keyText: 'CtrlOrCommand+Shift+R',
+    testEnabled: () => !!getCurrentEditor(),
+    onClick: () => getCurrentEditor().toggleVisibleResultTabs(),
+  });
   registerFileCommands({
     idPrefix: 'query',
     category: 'Query',
@@ -42,7 +50,7 @@
 </script>
 
 <script lang="ts">
-  import { getContext } from 'svelte';
+  import { getContext, onDestroy, onMount } from 'svelte';
   import sqlFormatter from 'sql-formatter';
 
   import registerCommand from '../commands/registerCommand';
@@ -92,6 +100,21 @@
   let resultCount;
   let errorMessages;
   let domEditor;
+  let intervalId;
+
+  onMount(() => {
+    intervalId = setInterval(() => {
+      if (sessionId) {
+        apiCall('sessions/ping', {
+          sesid: sessionId,
+        });
+      }
+    }, 15 * 1000);
+  });
+
+  onDestroy(() => {
+    clearInterval(intervalId);
+  });
 
   $: connection = useConnectionInfo({ conid });
   $: driver = findEngineDriver($connection, $extensions);
@@ -102,8 +125,10 @@
   function onSession(sid) {
     if (sid) {
       apiOn(`session-done-${sid}`, handleSessionDone);
+      apiOn(`session-closed-${sid}`, handleSessionClosed);
       return () => {
         apiOff(`session-done-${sid}`, handleSessionDone);
+        apiOff(`session-closed-${sid}`, handleSessionClosed);
       };
     }
     return () => {};
@@ -144,6 +169,10 @@
     return !!conid && (!$connection?.isReadOnly || driver?.readOnlySessions);
   }
 
+  export function toggleVisibleResultTabs() {
+    visibleResultTabs = !visibleResultTabs;
+  }
+
   async function executeCore(sql, startLine = 0) {
     if (busy) return;
     if (!sql || !sql.trim()) {
@@ -252,6 +281,11 @@
     timerLabel.stop();
   };
 
+  const handleSessionClosed = () => {
+    sessionId = null;
+    handleSessionDone();
+  };
+
   const { editorState, editorValue, setEditorData } = useEditorData({
     tabid,
     loadFromArgs:
@@ -279,6 +313,8 @@
       { divider: true },
       { command: 'query.find' },
       { command: 'query.replace' },
+      { divider: true },
+      { command: 'query.toggleVisibleResultTabs' },
     ];
   }