v6.8.2

Feature/wordwrap editor

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

@@ -43,7 +43,7 @@ jobs:
           repository: dbgate/dbgate-pro
           token: ${{ secrets.GH_TOKEN }}
           path: dbgate-pro
-          ref: ca69c4857d7d93c4b066018e8a9a0a0ece2300e7
+          ref: 2a71bec538f8e2cf6c1cd1322d89e64346a139fd
       - name: Merge dbgate/dbgate-pro
         run: |
           mkdir ../dbgate-pro

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

@@ -43,7 +43,7 @@ jobs:
           repository: dbgate/dbgate-pro
           token: ${{ secrets.GH_TOKEN }}
           path: dbgate-pro
-          ref: ca69c4857d7d93c4b066018e8a9a0a0ece2300e7
+          ref: 2a71bec538f8e2cf6c1cd1322d89e64346a139fd
       - name: Merge dbgate/dbgate-pro
         run: |
           mkdir ../dbgate-pro

.github/workflows/build-cloud-pro.yaml

@@ -39,7 +39,7 @@ jobs:
           repository: dbgate/dbgate-pro
           token: ${{ secrets.GH_TOKEN }}
           path: dbgate-pro
-          ref: ca69c4857d7d93c4b066018e8a9a0a0ece2300e7
+          ref: 2a71bec538f8e2cf6c1cd1322d89e64346a139fd
       - name: Merge dbgate/dbgate-pro
         run: |
           mkdir ../dbgate-pro

.github/workflows/build-docker-pro.yaml

@@ -44,7 +44,7 @@ jobs:
           repository: dbgate/dbgate-pro
           token: ${{ secrets.GH_TOKEN }}
           path: dbgate-pro
-          ref: ca69c4857d7d93c4b066018e8a9a0a0ece2300e7
+          ref: 2a71bec538f8e2cf6c1cd1322d89e64346a139fd
       - name: Merge dbgate/dbgate-pro
         run: |
           mkdir ../dbgate-pro

.github/workflows/build-npm-pro.yaml

@@ -35,7 +35,7 @@ jobs:
           repository: dbgate/dbgate-pro
           token: ${{ secrets.GH_TOKEN }}
           path: dbgate-pro
-          ref: ca69c4857d7d93c4b066018e8a9a0a0ece2300e7
+          ref: 2a71bec538f8e2cf6c1cd1322d89e64346a139fd
       - name: Merge dbgate/dbgate-pro
         run: |
           mkdir ../dbgate-pro

.github/workflows/e2e-pro.yaml

@@ -9,6 +9,9 @@ name: Cypress tests with screenshots PREMIUM
       - develop
       - feature/**
       - hotfix/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 jobs:
   e2e-tests:
     runs-on: ubuntu-latest
@@ -26,7 +29,7 @@ jobs:
           repository: dbgate/dbgate-pro
           token: ${{ secrets.GH_TOKEN }}
           path: dbgate-pro
-          ref: ca69c4857d7d93c4b066018e8a9a0a0ece2300e7
+          ref: 2a71bec538f8e2cf6c1cd1322d89e64346a139fd
       - name: Merge dbgate/dbgate-pro
         run: |
           mkdir ../dbgate-pro

.github/workflows/run-tests.yaml

@@ -9,6 +9,9 @@ name: Integration and unit tests
       - develop
       - feature/**
       - hotfix/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 jobs:
   all-tests:
     runs-on: ubuntu-latest

CHANGELOG.md

@@ -8,6 +8,41 @@ Builds:
  - linux - application for linux
  - win - application for Windows
 
+## 6.8.1
+- FIXED: Won't navigate to the relevant field on click of a field in columns #1303
+
+## 6.8.0
+- ADDED: Form cell view for detailed data inspection and editing in data grids, with multi-row bulk editing support
+- CHANGED: Cell data sidebar moved to right side, now is part of data grid
+- FIXED: Improved widget resizing algorithm
+- FIXED: Word wrap feature in SQL editor
+- CHANGED: Data grid keyboard navigation improvements
+- CHANGED: Improved PostgreSQL decimal type support in data grid #1214
+- ADDED: Retrieve number of databases from Redis configuration #1278
+- ADDED: Run macro context menu (Premium)
+- ADDED: Support for skip update columns in replicator
+- FIXED: UTF-8 BOM handling in CSV input
+- CHANGED: Advanced export is now part of Community edition
+- FIXED: SQLite foreign key constraint types
+- FIXED: Double drop constraint issue
+- CHANGED: Improved map view lat/lon field autodetection
+- FIXED: Alter table operations and constraint sanitization
+- ADDED: Import connections from environment variables (Team Premium)
+
+## 6.7.3
+- FIXED: Fixed problem in analyser core - in PostgreSQL, after dropping table, dropped table still appeared in structure
+- FIXED: PostgreSQL numeric columns do not align right #1254
+- ADDED: Custom thousands separator #1213
+
+## 6.7.2
+- CHANGED: Settings modal redesign - now is settings opened in tab instead of modal, similarily as in VSCode
+- FIXED: Fixed search in table shortcuts #1273
+- CHANGED: Improved foreign key editor UX
+- FIXED: Fixed incremental DB structure refresh for PostgreSQL, optimalized slow loading primary keys in PostgreSQL
+- CHANGED: You could now choose, how to refresh structure, added ability to disconnect or reconnect
+- ADDED: Better processing of table backups, generate table restore script #1274
+- CHANGED: Improved storage of settings, especially for Team Premium edition
+
 ## 6.7.1
 - ADDED: LANGUAGE environment variable for the web version. #1266
 - ADDED: New localizations (Italian, Portugese (Brazil), Japanese)
@@ -65,7 +100,7 @@ Builds:
 - ADDED: SQL AI assistant - powered by database chat, could help you to write SQL queries (Premium)
 - ADDED: Explain SQL error (powered by AI) (Premium)
 - ADDED: Database chat (and SQL AI Assistant) now supports showing charts (Premium)
-- FIXED: Fxied editing new files and roles (Team Premium)
+- FIXED: Fixed editing new files and roles (Team Premium)
 - FIXED: Connection to standalone database could be now pinned
 - FIXED: Cannot open up large JSON file #1215
 

e2e-tests/cypress.config.js

@@ -10,6 +10,7 @@ module.exports = defineConfig({
     // baseUrl: 'http://localhost:3000',
     // trashAssetsBeforeRuns: false,
     chromeWebSecurity: false,
+    reporter: process.env.CI ? 'mocha-reporter-gha' : 'spec',
 
     setupNodeEvents(on, config) {
       // implement node event listeners here

e2e-tests/cypress/e2e/browse-data.cy.js

@@ -202,7 +202,7 @@ describe('Data browser data', () => {
     cy.themeshot('query-editor-join-wizard');
   });
 
-  it('Mongo JSON data view', () => {
+  it('Mongo query JSON data view', () => {
     cy.contains('Mongo-connection').click();
     cy.contains('MgChinook').click();
     cy.contains('Customer').click();
@@ -213,9 +213,10 @@ describe('Data browser data', () => {
     cy.contains('Open query').click();
     cy.wait(1000);
     cy.contains('Execute').click();
-    cy.testid('WidgetIconPanel_cell-data').click();
+    cy.testid('TabContent_1').contains('Leonie').rightclick();
+    cy.contains('Show cell data').click();
     // test JSON view
-    cy.contains('Country: "Brazil"');
+    cy.contains('Country: "Germany"');
     cy.themeshot('mongo-query-json-view');
   });
 
@@ -293,7 +294,8 @@ describe('Data browser data', () => {
     // cy.contains('location').click();
     cy.contains('14.2').click();
     cy.contains('13.9').click({ shiftKey: true });
-    cy.testid('WidgetIconPanel_cell-data').click();
+    cy.testid('WidgetIconPanel_database').click();
+    cy.testid('TableDataTab_toggleCellDataView').click();
     cy.wait(2000);
     cy.themeshot('cell-map-view');
   });
@@ -337,7 +339,7 @@ describe('Data browser data', () => {
     cy.themeshot('save-changes-mongodb');
   });
 
-  it('Edit mongo data JSON', () => {
+  it('Mongo JSON cell view', () => {
     // TODO FIX: Auto expand cell view
     cy.contains('Mongo-connection').click();
     cy.contains('MgRivers').click();
@@ -347,7 +349,8 @@ describe('Data browser data', () => {
     cy.testid('ColumnManagerRow_checkbox_countries.1').click();
     cy.testid('ColumnManagerRow_checkbox__id').click();
     cy.testid('DataFilterControl_input_countries.1').type('EXISTS{enter}');
-    cy.testid('WidgetIconPanel_cell-data').click();
+    cy.contains('Austria').click();
+    cy.testid('CollectionDataTab_toggleCellDataView').click();
     cy.themeshot('mongodb-json-cell-view');
   });
 
@@ -472,4 +475,36 @@ describe('Data browser data', () => {
     cy.testid('DataDeployTab_importIntoDb').click();
     cy.themeshot('data-replicator');
   });
+
+  it('Form cell view', () => {
+    cy.contains('MySql-connection').click();
+    cy.contains('MyChinook').click();
+    cy.contains('Invoice').click();
+    cy.get('[data-row="0"][data-col="header"]').click();
+    cy.contains('Autodetect - Form');
+    cy.themeshot('form-cell-view');
+  });
+
+  it('Group by', () => {
+    cy.contains('MySql-connection').click();
+    cy.contains('MyChinook').click();
+    cy.contains('Album').click();
+    cy.testid('WidgetIconPanel_database').click();
+    cy.testid('ColumnHeaderControl_dropdown_ArtistId').click();
+    cy.contains('Group by').click();
+    cy.testid('ColumnHeaderControl_dropdown_Title').first().click();
+    cy.themeshot('data-browser-group-by');
+  });
+
+  it('Filter by expanded column', () => {
+    cy.contains('MySql-connection').click();
+    cy.contains('MyChinook').click();
+    cy.contains('Album').click();
+    cy.testid('WidgetIconPanel_database').click();
+    cy.testid('ColumnManagerRow_expand_ArtistId').click();
+    cy.testid('ColumnManagerRow_checkbox_ArtistId.Name').click();
+    cy.testid('ColumnManagerRow_checkbox_ArtistId').click();
+    cy.testid('DataFilterControl_input_ArtistId.Name').type('mich{enter}');
+    cy.themeshot('data-browser-filter-by-expanded');
+  });
 });

e2e-tests/cypress/e2e/charts.cy.js

@@ -110,7 +110,7 @@ describe('Charts', () => {
     cy.themeshot('new-object-window');
   });
 
-  it('Database chat - charts', () => {
+  it.skip('Database chat - charts', () => {
     cy.contains('MySql-connection').click();
     cy.contains('MyChinook').click();
     cy.testid('TabsPanel_buttonNewObject').click();
@@ -125,7 +125,7 @@ describe('Charts', () => {
     cy.themeshot('database-chat-chart');
   });
 
-  it('Database chat', () => {
+  it.skip('Database chat', () => {
     cy.contains('MySql-connection').click();
     cy.contains('MyChinook').click();
     cy.testid('TabsPanel_buttonNewObject').click();
@@ -146,7 +146,7 @@ describe('Charts', () => {
     // cy.themeshot('database-chat');
   });
 
-  it('Explain query error', () => {
+  it.skip('Explain query error', () => {
     cy.contains('MySql-connection').click();
     cy.contains('MyChinook').click();
     cy.testid('TabsPanel_buttonNewObject').click();
@@ -198,4 +198,74 @@ describe('Charts', () => {
     cy.testid('ConfirmModal_okButton').click();
     cy.testid('WidgetIconPanel_settings');
   });
+
+  it('Settings', () => {
+    cy.testid('WidgetIconPanel_settings').click();
+    cy.themeshot('app-settings-general');
+
+    cy.contains('Behaviour').click();
+    cy.themeshot('app-settings-behaviour');
+    cy.get('[data-testid=BehaviourSettings_useTabPreviewMode]').uncheck();
+
+    // SQL Editor
+    cy.contains('SQL Editor').click();
+    cy.get('[data-testid=SQLEditorSettings_sqlCommandsCase]').select('lowerCase');
+
+    cy.contains('MySql-connection').click();
+    cy.contains('charts_sample').click();
+    cy.contains('employees').click();
+    cy.contains('MyChinook').click();
+    cy.contains('Customer').rightclick();
+    cy.contains('SQL template').click();
+    cy.contains('CREATE TABLE').click();
+    cy.contains('create table');
+
+    // Default Actions
+    cy.testid('WidgetIconPanel_settings').click();
+    cy.contains('Default Actions').click();
+    cy.get('[data-testid=DefaultActionsSettings_useLastUsedAction]').uncheck();
+
+
+    // Themes
+    cy.contains('Themes').click();
+    cy.themeshot('app-settings-themes');
+    cy.contains('Dark').click();
+    cy.get('body').find('.theme-dark').should('exist');
+    cy.contains('Light').click();
+    cy.get('body').find('.theme-light').should('exist');
+
+    // General
+    cy.contains(/^General$/).click();
+    cy.contains('charts_sample');
+    cy.get('[data-testid=GeneralSettings_lockedDatabaseMode]').check();
+    cy.contains('Connections').click();
+    cy.contains('charts_sample').should('not.exist');
+
+    // Datagrid
+    cy.contains('Data grid').click();
+    cy.get('[data-testid=DataGridSettings_showHintColumns]').uncheck();
+    cy.wait(500);
+    cy.contains('Album').click();
+    cy.contains('AC/DC').should('not.exist');
+
+    cy.testid('WidgetIconPanel_settings').click();
+    cy.contains('Keyboard shortcuts').click();
+    cy.themeshot('app-settings-keyboard-shortcuts');
+    cy.contains('Chart').click();
+    cy.testid('CommandModal_keyboardButton').click();
+    cy.realPress(['Control', 'g']);
+    cy.realPress('Enter');
+    cy.contains('OK').click();
+    cy.contains('Ctrl+G');
+
+    
+    cy.contains('AI').click();
+    cy.themeshot('app-settings-ai');
+    cy.get('[data-testid=AISettings_addProviderButton]').click();
+    cy.contains('Provider 1');
+    cy.get('[data-testid=AiProviderCard_removeButton]').click();
+    cy.contains('Are you sure you want to remove Provider 1 provider?');
+    cy.contains('OK').click();
+    cy.contains('Provider 1').should('not.exist');
+  });
 });

e2e-tests/cypress/e2e/multi-sql.cy.js

@@ -141,7 +141,7 @@ describe('Backup table', () => {
     cy.get('body').realType('111222333{enter}');
 
     cy.testid('TableDataTab_save').click();
-    cy.testid('ConfirmSqlModal_okButton').click();
+    cy.testid('ConfirmSqlModal_okButton', { timeout: 10000 }).click();
     cy.contains('Rows: 11').should('be.visible'); // wait for save
 
     cy.testid('app-object-group-items-table-backups').contains('addresses').rightclick();
@@ -161,7 +161,7 @@ describe('Backup table', () => {
     // cy.testid('CloseTabModal_buttonConfirm').click();
     cy.wait(1000);
 
-    cy.testid('app-object-group-items-tables').contains('addresses').click();
+    cy.testid('app-object-group-items-tables').contains('addresses', { timeout: 10000 }).click();
 
     // check whether data was successfully restored
     cy.contains('Rows: 12').should('be.visible');
@@ -210,7 +210,8 @@ describe('Import CSV', () => {
     cy.testid('ImportExportConfigurator_tableMappingSection').contains('20 rows written').should('be.visible');
 
     cy.testid('SqlObjectList_refreshButton').click();
-    cy.contains('Refresh DB structure (incremental)').click();
+    cy.testid('DatabasStatusMenu_refreshFull').click();
+    // cy.contains('Refresh DB structure (incremental)').click();
     cy.testid('SqlObjectList_container').contains('customers-20').click();
     cy.contains('Rows: 20').should('be.visible');
 
@@ -236,7 +237,7 @@ describe('Import CSV - source error', () => {
     cy.testid('ImportExportTab_preview_content').contains('Invalid Closing Quote').should('be.visible');
 
     cy.testid('ImportExportTab_executeButton').click();
-    cy.testid('ImportExportConfigurator_errorInfoIcon_customers-20-err').click();
+    cy.testid('ImportExportConfigurator_errorInfoIcon_customers-20-err', { timeout: 10000 }).click();
 
     cy.testid('ErrorMessageModal_message').contains('Invalid Closing Quote').should('be.visible');
   });
@@ -255,7 +256,7 @@ describe('Import CSV - target error', () => {
     cy.contains('customers-20');
     cy.testid('ImportExportConfigurator_targetName_customers-20').clear().type('system."]`');
     cy.testid('ImportExportTab_executeButton').click();
-    cy.testid('ImportExportConfigurator_errorInfoIcon_customers-20').click();
+    cy.testid('ImportExportConfigurator_errorInfoIcon_customers-20', { timeout: 10000 }).click();
     cy.testid('ErrorMessageModal_message').should('be.visible');
   });
 });

e2e-tests/package.json

@@ -10,11 +10,11 @@
     "cypress-real-events": "^1.13.0",
     "env-cmd": "^10.1.0",
     "kill-port": "^2.0.1",
+    "mocha-reporter-gha": "^1.1.1",
     "start-server-and-test": "^2.0.8"
   },
   "scripts": {
     "cy:open": "cypress open --config experimentalInteractiveRunEvents=true",
-
     "cy:run:add-connection": "cypress run --spec cypress/e2e/add-connection.cy.js",
     "cy:run:portal": "cypress run --spec cypress/e2e/portal.cy.js",
     "cy:run:oauth": "cypress run --spec cypress/e2e/oauth.cy.js",
@@ -23,7 +23,6 @@
     "cy:run:multi-sql": "cypress run --spec cypress/e2e/multi-sql.cy.js",
     "cy:run:cloud": "cypress run --spec cypress/e2e/cloud.cy.js",
     "cy:run:charts": "cypress run --spec cypress/e2e/charts.cy.js",
-
     "start:add-connection": "node clearTestingData && cd .. && node packer/build/bundle.js --listen-api --run-e2e-tests",
     "start:portal": "node clearTestingData && cd .. && env-cmd -f e2e-tests/env/portal/.env node e2e-tests/init/portal.js && env-cmd -f e2e-tests/env/portal/.env node packer/build/bundle.js --listen-api --run-e2e-tests",
     "start:oauth": "node clearTestingData && cd .. && env-cmd -f e2e-tests/env/oauth/.env node packer/build/bundle.js --listen-api --run-e2e-tests",
@@ -32,7 +31,6 @@
     "start:multi-sql": "node clearTestingData && cd .. && env-cmd -f e2e-tests/env/multi-sql/.env node e2e-tests/init/multi-sql.js && env-cmd -f e2e-tests/env/multi-sql/.env node packer/build/bundle.js --listen-api --run-e2e-tests",
     "start:cloud": "node clearTestingData && cd .. && env-cmd -f e2e-tests/env/cloud/.env node packer/build/bundle.js --listen-api --run-e2e-tests",
     "start:charts": "node clearTestingData && cd .. && env-cmd -f e2e-tests/env/charts/.env node e2e-tests/init/charts.js && env-cmd -f e2e-tests/env/charts/.env node packer/build/bundle.js --listen-api --run-e2e-tests",
-
     "test:add-connection": "start-server-and-test start:add-connection http://localhost:3000 cy:run:add-connection",
     "test:portal": "start-server-and-test start:portal http://localhost:3000 cy:run:portal",
     "test:oauth": "start-server-and-test start:oauth http://localhost:3000 cy:run:oauth",
@@ -41,7 +39,6 @@
     "test:multi-sql": "start-server-and-test start:multi-sql http://localhost:3000 cy:run:multi-sql",
     "test:cloud": "start-server-and-test start:cloud http://localhost:3000 cy:run:cloud",
     "test:charts": "start-server-and-test start:charts http://localhost:3000 cy:run:charts",
-
     "test": "yarn test:add-connection && yarn test:portal && yarn test:oauth && yarn test:browse-data && yarn test:team && yarn test:multi-sql && yarn test:cloud && yarn test:charts",
     "test:ci": "yarn test"
   },

e2e-tests/yarn.lock

@@ -2,6 +2,34 @@
 # yarn lockfile v1
 
 
+"@actions/core@^1.10.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@actions/core/-/core-1.11.1.tgz#ae683aac5112438021588030efb53b1adb86f172"
+  integrity sha512-hXJCSrkwfA46Vd9Z3q4cpEpHB1rL5NG04+/rbqW9d3+CSvtB1tYe8UTpAlixa1vj0m/ULglfEK2UKxMGxCxv5A==
+  dependencies:
+    "@actions/exec" "^1.1.1"
+    "@actions/http-client" "^2.0.1"
+
+"@actions/exec@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@actions/exec/-/exec-1.1.1.tgz#2e43f28c54022537172819a7cf886c844221a611"
+  integrity sha512-+sCcHHbVdk93a0XT19ECtO/gIXoxvdsgQLzb2fE2/5sIZmWQuluYyjPQtrtTHdU1YzTZ7bAPN4sITq2xi1679w==
+  dependencies:
+    "@actions/io" "^1.0.1"
+
+"@actions/http-client@^2.0.1":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@actions/http-client/-/http-client-2.2.3.tgz#31fc0b25c0e665754ed39a9f19a8611fc6dab674"
+  integrity sha512-mx8hyJi/hjFvbPokCg4uRd4ZX78t+YyRPtnKWwIl+RzNaVuFpQHfmlGVfsKEJN8LwTCvL+DfVgAM04XaHkm6bA==
+  dependencies:
+    tunnel "^0.0.6"
+    undici "^5.25.4"
+
+"@actions/io@^1.0.1":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@actions/io/-/io-1.1.3.tgz#4cdb6254da7962b07473ff5c335f3da485d94d71"
+  integrity sha512-wi9JjgKLYS7U/z8PPbco+PvTb/nRWjeoFlJ1Qer83k/3C5PHQi28hiVdeE2kHXmIL99mQFawx8qt/JPjZilJ8Q==
+
 "@colors/colors@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
@@ -39,6 +67,11 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
+"@fastify/busboy@^2.0.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.1.1.tgz#b9da6a878a371829a0502c9b6c1c143ef6663f4d"
+  integrity sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==
+
 "@hapi/hoek@^9.0.0", "@hapi/hoek@^9.3.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
@@ -947,6 +980,13 @@ minimist@^1.2.8:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
+mocha-reporter-gha@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/mocha-reporter-gha/-/mocha-reporter-gha-1.1.1.tgz#e1248abd0769f55b57b36ccd7db2b0b6573d5adf"
+  integrity sha512-CFbcgM56V4yWlbF91XuwrE6a5X/IqjVXTPefO7m8cY8Es8G1UhJ2KKOrk16AcSemRzVWXp2Fdy3bWJ7j45snWw==
+  dependencies:
+    "@actions/core" "^1.10.1"
+
 ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
@@ -1292,6 +1332,11 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+tunnel@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/tunnel/-/tunnel-0.0.6.tgz#72f1314b34a5b192db012324df2cc587ca47f92c"
+  integrity sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@@ -1307,6 +1352,13 @@ undici-types@~6.20.0:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.20.0.tgz#8171bf22c1f588d1554d55bf204bc624af388433"
   integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==
 
+undici@^5.25.4:
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/undici/-/undici-5.29.0.tgz#419595449ae3f2cdcba3580a2e8903399bd1f5a3"
+  integrity sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==
+  dependencies:
+    "@fastify/busboy" "^2.0.0"
+
 universalify@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"

integration-tests/__tests__/alter-table.spec.js

@@ -26,13 +26,15 @@ function pickImportantTableInfo(engine, table) {
       .map(props =>
         _.omitBy(props, (v, k) => k == 'defaultValue' && v == 'NULL' && engine.setNullDefaultInsteadOfDrop)
       ),
-    // foreignKeys: table.foreignKeys
-    //   .sort((a, b) => a.refTableName.localeCompare(b.refTableName))
-    //   .map(fk => ({
-    //     constraintType: fk.constraintType,
-    //     refTableName: fk.refTableName,
-    //     columns: fk.columns.map(col => ({ columnName: col.columnName, refColumnName: col.refColumnName })),
-    //   })),
+
+      // TODO:
+    foreignKeys: table.foreignKeys
+      .sort((a, b) => a.refTableName.localeCompare(b.refTableName))
+      .map(fk => ({
+        constraintType: fk.constraintType,
+        refTableName: fk.refTableName,
+        columns: fk.columns.map(col => ({ columnName: col.columnName, refColumnName: col.refColumnName })),
+      })),
   };
 }
 
@@ -103,6 +105,7 @@ async function testTableDiff(engine, conn, driver, mangle, changedTable = 't1')
 
   await driver.script(conn, sql);
 
+  // TODO:
   // if (!engine.skipIncrementalAnalysis) {
   //   const structure2RealIncremental = await driver.analyseIncremental(conn, structure1Source);
   //   checkTableStructure(engine, tget(structure2RealIncremental), tget(structure2));
@@ -116,6 +119,7 @@ async function testTableDiff(engine, conn, driver, mangle, changedTable = 't1')
 
 const TESTED_COLUMNS = ['col_pk', 'col_std', 'col_def', 'col_fk', 'col_ref', 'col_idx', 'col_uq'];
 // const TESTED_COLUMNS = ['col_pk'];
+// const TESTED_COLUMNS = ['col_fk'];
 // const TESTED_COLUMNS = ['col_idx'];
 // const TESTED_COLUMNS = ['col_def'];
 // const TESTED_COLUMNS = ['col_std'];
@@ -179,11 +183,25 @@ describe('Alter table', () => {
   )(
     'Drop column - %s - %s',
     testWrapper(async (conn, driver, column, engine) => {
-      await testTableDiff(engine, conn, driver, tbl => (tbl.columns = tbl.columns.filter(x => x.columnName != column)));
+      await testTableDiff(engine, conn, driver, 
+        tbl => {
+          tbl.columns = tbl.columns.filter(x => x.columnName != column);
+          tbl.foreignKeys = tbl.foreignKeys
+            .map(fk => ({
+              ...fk, 
+              columns: fk.columns.filter(col => col.columnName != column)
+            }))
+            .filter(fk => fk.columns.length > 0);
+        }
+      );
     })
   );
 
-  test.each(createEnginesColumnsSource(engines.filter(x => !x.skipNullable && !x.skipChangeNullability)))(
+  test.each(
+    createEnginesColumnsSource(engines.filter(x => !x.skipNullability && !x.skipChangeNullability)).filter(
+      ([_label, col]) => !col.endsWith('_pk')
+    )
+  )(
     'Change nullability - %s - %s',
     testWrapper(async (conn, driver, column, engine) => {
       await testTableDiff(
@@ -202,7 +220,11 @@ describe('Alter table', () => {
         engine,
         conn,
         driver,
-        tbl => (tbl.columns = tbl.columns.map(x => (x.columnName == column ? { ...x, columnName: 'col_renamed' } : x)))
+        tbl => {
+          tbl.columns = tbl.columns.map(x => (x.columnName == column ? { ...x, columnName: 'col_renamed' } : x));
+          tbl.foreignKeys = tbl.foreignKeys.map(fk => ({...fk, columns: fk.columns.map(col => col.columnName == column ? { ...col, columnName: 'col_renamed' } : col)
+          }));
+        }
       );
     })
   );

integration-tests/__tests__/data-replicator.spec.js

@@ -303,4 +303,52 @@ describe('Data replicator', () => {
     }),
     15 * 1000
   );
+
+  test.each(engines.filter(x => !x.skipDataReplicator).map(engine => [engine.label, engine]))(
+    'Skip columns for update - %s',
+    testWrapper(async (conn, driver, engine) => {
+      runCommandOnDriver(conn, driver, dmp =>
+        dmp.createTable({
+          pureName: 't1',
+          columns: [
+            { columnName: 'id', dataType: 'int', autoIncrement: true, notNull: true },
+            { columnName: 'key', dataType: 'varchar(50)', notNull: true },
+            { columnName: 'val', dataType: 'varchar(50)' },
+          ],
+          primaryKey: {
+            columns: [{ columnName: 'id' }],
+          },
+        })
+      );
+
+      const getcfg = (v1 = 'v1') => ({
+        systemConnection: conn,
+        driver,
+        items: [
+          {
+            name: 't1',
+            matchColumns: ['key'],
+            skipUpdateColumns: ['val'],
+            findExisting: true,
+            updateExisting: true,
+            createNew: true,
+            jsonArray: [
+              { key: '1', val: v1 },
+              { key: '2', val: 'v2' },
+              { key: '3', val: 'v3' },
+            ],
+          },
+        ],
+      });
+
+      await dataReplicator(getcfg('v1'));
+
+      const res1 = await runQueryOnDriver(conn, driver, dmp => dmp.put(`select ~val from ~t1 where ~key='1'`));
+      expect(res1.rows[0].val).toEqual('v1');
+
+      await dataReplicator(getcfg('v2'));
+      const res2 = await runQueryOnDriver(conn, driver, dmp => dmp.put(`select ~val from ~t1 where ~key='1'`));
+      expect(res2.rows[0].val).toEqual('v1');
+    })
+  );
 });

integration-tests/__tests__/schema-tests.spec.js

@@ -28,12 +28,12 @@ describe('Schema tests', () => {
       const count = schemas1.length;
       expect(structure1.tables.length).toEqual(2);
       await runCommandOnDriver(conn, driver, dmp => dmp.createSchema('myschema'));
+      const structure2 = await driver.analyseIncremental(conn, structure1);
+      const schemas2 = await driver.listSchemas(conn);
+      expect(schemas2.find(x => x.schemaName == 'myschema')).toBeTruthy();
+      expect(schemas2.length).toEqual(count + 1);
+      expect(schemas2.find(x => x.isDefault).schemaName).toEqual(engine.defaultSchemaName);
       if (!engine.skipIncrementalAnalysis) {
-        const structure2 = await driver.analyseIncremental(conn, structure1);
-        const schemas2 = await driver.listSchemas(conn);
-        expect(schemas2.find(x => x.schemaName == 'myschema')).toBeTruthy();
-        expect(schemas2.length).toEqual(count + 1);
-        expect(schemas2.find(x => x.isDefault).schemaName).toEqual(engine.defaultSchemaName);
         expect(structure2).toBeNull();
       }
     })
@@ -50,10 +50,10 @@ describe('Schema tests', () => {
       expect(schemas1.find(x => x.schemaName == 'myschema')).toBeTruthy();
       expect(structure1.tables.length).toEqual(2);
       await runCommandOnDriver(conn, driver, dmp => dmp.dropSchema('myschema'));
+      const structure2 = await driver.analyseIncremental(conn, structure1);
+      const schemas2 = await driver.listSchemas(conn);
+      expect(schemas2.find(x => x.schemaName == 'myschema')).toBeFalsy();
       if (!engine.skipIncrementalAnalysis) {
-        const structure2 = await driver.analyseIncremental(conn, structure1);
-        const schemas2 = await driver.listSchemas(conn);
-        expect(schemas2.find(x => x.schemaName == 'myschema')).toBeFalsy();
         expect(structure2).toBeNull();
       }
     })

integration-tests/__tests__/table-analyse.spec.js

@@ -94,7 +94,7 @@ describe('Table analyse', () => {
     })
   );
 
-  test.each(engines.filter(x => !x.skipIncrementalAnalysis).map(engine => [engine.label, engine]))(
+  test.each(engines.map(engine => [engine.label, engine]))(
     'Table add - incremental analysis - %s',
     testWrapper(async (conn, driver, engine) => {
       await runCommandOnDriver(conn, driver, dmp => dmp.put(t2Sql(engine)));
@@ -112,7 +112,7 @@ describe('Table analyse', () => {
     })
   );
 
-  test.each(engines.filter(x => !x.skipIncrementalAnalysis).map(engine => [engine.label, engine]))(
+  test.each(engines.map(engine => [engine.label, engine]))(
     'Table remove - incremental analysis - %s',
     testWrapper(async (conn, driver, engine) => {
       await runCommandOnDriver(conn, driver, dmp => dmp.put(t1Sql(engine)));
@@ -130,7 +130,7 @@ describe('Table analyse', () => {
     })
   );
 
-  test.each(engines.filter(x => !x.skipIncrementalAnalysis).map(engine => [engine.label, engine]))(
+  test.each(engines.map(engine => [engine.label, engine]))(
     'Table change - incremental analysis - %s',
     testWrapper(async (conn, driver, engine) => {
       await runCommandOnDriver(conn, driver, dmp => dmp.put(t1Sql(engine)));

integration-tests/docker-compose.yaml

@@ -44,7 +44,7 @@ services:
   #     - 15942:9042
   #
   # clickhouse:
-  #   image: bitnami/clickhouse:24.8.4
+  #   image: bitnamilegacy/clickhouse:24.8.4
   #   restart: always
   #   ports:
   #     - 15005:8123

integration-tests/tools.js

@@ -22,7 +22,9 @@ async function connect(engine, database) {
   if (engine.generateDbFile) {
     const conn = await driver.connect({
       ...connection,
-      databaseFile: (engine.databaseFileLocationOnServer ?? 'dbtemp/') + database,
+      databaseFile:
+        (engine.databaseFileLocationOnServer ?? (process.env.CITEST ? 'dbtemp/' : 'integration-tests/dbtemp/')) +
+        database,
     });
     return conn;
   } else {

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "6.7.2-premium-beta.4",
+  "version": "6.8.2",
   "name": "dbgate-all",
   "workspaces": [
     "packages/*",
@@ -22,6 +22,7 @@
     "start:api:auth": "yarn workspace dbgate-api start:auth | pino-pretty",
     "start:api:dblogin": "yarn workspace dbgate-api start:dblogin | pino-pretty",
     "start:api:storage": "yarn workspace dbgate-api start:storage | pino-pretty",
+    "start:api:sfill": "yarn workspace dbgate-api start:sfill | pino-pretty",
     "start:api:storage:built": "yarn workspace dbgate-api start:storage:built | pino-pretty",
     "start:api:azure": "yarn workspace dbgate-api start:azure | pino-pretty",
     "start:api:e2e:team": "yarn workspace dbgate-api start:e2e:team | pino-pretty",

packages/api/env/sfill/.env

@@ -0,0 +1,46 @@
+DEVMODE=1
+DEVWEB=1 
+
+STORAGE_SERVER=localhost
+STORAGE_USER=root
+STORAGE_PASSWORD=Pwd2020Db
+STORAGE_PORT=3306
+STORAGE_DATABASE=dbgate-filled
+STORAGE_ENGINE=mysql@dbgate-plugin-mysql
+
+CONNECTIONS=mysql,postgres,mongo,redis
+
+LABEL_mysql=MySql
+SERVER_mysql=dbgatedckstage1.sprinx.cz
+USER_mysql=root
+PASSWORD_mysql=Pwd2020Db
+PORT_mysql=3306
+ENGINE_mysql=mysql@dbgate-plugin-mysql
+
+LABEL_postgres=Postgres
+SERVER_postgres=dbgatedckstage1.sprinx.cz
+USER_postgres=postgres
+PASSWORD_postgres=Pwd2020Db
+PORT_postgres=5432
+ENGINE_postgres=postgres@dbgate-plugin-postgres
+
+LABEL_mongo=Mongo
+SERVER_mongo=dbgatedckstage1.sprinx.cz
+USER_mongo=root
+PASSWORD_mongo=Pwd2020Db
+PORT_mongo=27017
+ENGINE_mongo=mongo@dbgate-plugin-mongo
+
+LABEL_redis=Redis
+SERVER_redis=dbgatedckstage1.sprinx.cz
+ENGINE_redis=redis@dbgate-plugin-redis
+PORT_redis=6379
+
+ROLE_test1_CONNECTIONS=mysql
+ROLE_test1_PERMISSIONS=widgets/*
+ROLE_test1_DATABASES_db1_CONNECTION=mysql
+ROLE_test1_DATABASES_db1_PERMISSION=run_script
+ROLE_test1_DATABASES_db1_DATABASES=db1
+ROLE_test1_DATABASES_db2_CONNECTION=redis
+ROLE_test1_DATABASES_db2_PERMISSION=run_script
+ROLE_test1_DATABASES_db2_DATABASES=db2 

packages/api/package.json

@@ -75,6 +75,7 @@
     "start:dblogin": "env-cmd -f env/dblogin/.env node src/index.js --listen-api",
     "start:filedb": "env-cmd node src/index.js /home/jena/test/chinook/Chinook.db --listen-api",
     "start:storage": "env-cmd -f env/storage/.env node src/index.js --listen-api",
+    "start:sfill": "env-cmd -f env/sfill/.env node src/index.js --listen-api",
     "start:storage:built": "env-cmd -f env/storage/.env cross-env DEVMODE= BUILTWEBMODE=1 node dist/bundle.js --listen-api",
     "start:singleconn": "env-cmd node src/index.js --server localhost --user root --port 3307 --engine mysql@dbgate-plugin-mysql --password test --listen-api",
     "start:azure": "env-cmd -f env/azure/.env node src/index.js --listen-api",

packages/api/src/controllers/config.js

@@ -289,16 +289,11 @@ module.exports = {
     const res = await lock.acquire('settings', async () => {
       const currentValue = await this.loadSettings();
       try {
-        let updated = currentValue;
+        let updated = {
+          ...currentValue,
+          ...values,
+        };
         if (process.env.STORAGE_DATABASE) {
-          updated = {
-            ...currentValue,
-            ..._.mapValues(values, v => {
-              if (v === true) return 'true';
-              if (v === false) return 'false';
-              return v;
-            }),
-          };
           await storage.writeConfig({
             group: 'settings',
             config: updated,

packages/api/src/controllers/connections.js

@@ -23,6 +23,7 @@ const pipeForkLogs = require('../utility/pipeForkLogs');
 const requireEngineDriver = require('../utility/requireEngineDriver');
 const { getAuthProviderById } = require('../auth/authProvider');
 const { startTokenChecking } = require('../utility/authProxy');
+const { extractConnectionsFromEnv } = require('../utility/envtools');
 
 const logger = getLogger('connections');
 
@@ -61,55 +62,7 @@ function getDatabaseFileLabel(databaseFile) {
 
 function getPortalCollections() {
   if (process.env.CONNECTIONS) {
-    const connections = _.compact(process.env.CONNECTIONS.split(',')).map(id => ({
-      _id: id,
-      engine: process.env[`ENGINE_${id}`],
-      server: process.env[`SERVER_${id}`],
-      user: process.env[`USER_${id}`],
-      password: process.env[`PASSWORD_${id}`],
-      passwordMode: process.env[`PASSWORD_MODE_${id}`],
-      port: process.env[`PORT_${id}`],
-      databaseUrl: process.env[`URL_${id}`],
-      useDatabaseUrl: !!process.env[`URL_${id}`],
-      databaseFile: process.env[`FILE_${id}`]?.replace(
-        '%%E2E_TEST_DATA_DIRECTORY%%',
-        path.join(path.dirname(path.dirname(__dirname)), 'e2e-tests', 'tmpdata')
-      ),
-      socketPath: process.env[`SOCKET_PATH_${id}`],
-      serviceName: process.env[`SERVICE_NAME_${id}`],
-      authType: process.env[`AUTH_TYPE_${id}`] || (process.env[`SOCKET_PATH_${id}`] ? 'socket' : undefined),
-      defaultDatabase:
-        process.env[`DATABASE_${id}`] ||
-        (process.env[`FILE_${id}`] ? getDatabaseFileLabel(process.env[`FILE_${id}`]) : null),
-      singleDatabase: !!process.env[`DATABASE_${id}`] || !!process.env[`FILE_${id}`],
-      displayName: process.env[`LABEL_${id}`],
-      isReadOnly: process.env[`READONLY_${id}`],
-      databases: process.env[`DBCONFIG_${id}`] ? safeJsonParse(process.env[`DBCONFIG_${id}`]) : null,
-      allowedDatabases: process.env[`ALLOWED_DATABASES_${id}`]?.replace(/\|/g, '\n'),
-      allowedDatabasesRegex: process.env[`ALLOWED_DATABASES_REGEX_${id}`],
-      parent: process.env[`PARENT_${id}`] || undefined,
-      useSeparateSchemas: !!process.env[`USE_SEPARATE_SCHEMAS_${id}`],
-      localDataCenter: process.env[`LOCAL_DATA_CENTER_${id}`],
-
-      // SSH tunnel
-      useSshTunnel: process.env[`USE_SSH_${id}`],
-      sshHost: process.env[`SSH_HOST_${id}`],
-      sshPort: process.env[`SSH_PORT_${id}`],
-      sshMode: process.env[`SSH_MODE_${id}`],
-      sshLogin: process.env[`SSH_LOGIN_${id}`],
-      sshPassword: process.env[`SSH_PASSWORD_${id}`],
-      sshKeyfile: process.env[`SSH_KEY_FILE_${id}`],
-      sshKeyfilePassword: process.env[`SSH_KEY_FILE_PASSWORD_${id}`],
-
-      // SSL
-      useSsl: process.env[`USE_SSL_${id}`],
-      sslCaFile: process.env[`SSL_CA_FILE_${id}`],
-      sslCertFile: process.env[`SSL_CERT_FILE_${id}`],
-      sslCertFilePassword: process.env[`SSL_CERT_FILE_PASSWORD_${id}`],
-      sslKeyFile: process.env[`SSL_KEY_FILE_${id}`],
-      sslRejectUnauthorized: process.env[`SSL_REJECT_UNAUTHORIZED_${id}`],
-      trustServerCertificate: process.env[`SSL_TRUST_CERTIFICATE_${id}`],
-    }));
+    const connections = extractConnectionsFromEnv(process.env);
 
     for (const conn of connections) {
       for (const prop in process.env) {
@@ -229,6 +182,15 @@ module.exports = {
       );
     }
     await this.checkUnsavedConnectionsLimit();
+
+    if (process.env.STORAGE_DATABASE && process.env.CONNECTIONS) {
+      const storage = require('./storage');
+      try {
+        await storage.fillStorageConnectionsFromEnv();
+      } catch (err) {
+        logger.error(extractErrorLogData(err), 'DBGM-00268 Error filling storage connections from env');
+      }
+    }
   },
 
   list_meta: true,

packages/api/src/shell/copyStream.js

@@ -65,6 +65,8 @@ async function copyStream(input, output, options) {
       });
     }
   } catch (err) {
+    logger.error(extractErrorLogData(err, { progressName }), 'DBGM-00157 Import/export job failed');
+
     process.send({
       msgtype: 'copyStreamError',
       copyStreamError: {
@@ -82,8 +84,6 @@ async function copyStream(input, output, options) {
         errorMessage: extractErrorMessage(err),
       });
     }
-
-    logger.error(extractErrorLogData(err, { progressName }), 'DBGM-00157 Import/export job failed');
     // throw err;
   }
 }

packages/api/src/shell/dataReplicator.js

@@ -64,6 +64,7 @@ async function dataReplicator({
           createNew: compileOperationFunction(item.createNew, item.createCondition),
           updateExisting: compileOperationFunction(item.updateExisting, item.updateCondition),
           deleteMissing: !!item.deleteMissing,
+          skipUpdateColumns: item.skipUpdateColumns,
           deleteRestrictionColumns: item.deleteRestrictionColumns ?? [],
           openStream: item.openStream
             ? item.openStream

packages/api/src/storageModel.js

@@ -360,6 +360,12 @@ module.exports = {
           "columnName": "value",
           "dataType": "varchar(1000)",
           "notNull": false
+        },
+        {
+          "pureName": "config",
+          "columnName": "valueType",
+          "dataType": "varchar(50)",
+          "notNull": false
         }
       ],
       "foreignKeys": [],
@@ -680,9 +686,34 @@ module.exports = {
           "columnName": "connectionDefinition",
           "dataType": "text",
           "notNull": false
+        },
+        {
+          "pureName": "connections",
+          "columnName": "import_source_id",
+          "dataType": "int",
+          "notNull": false
+        },
+        {
+          "pureName": "connections",
+          "columnName": "id_original",
+          "dataType": "varchar(250)",
+          "notNull": false
+        }
+      ],
+      "foreignKeys": [
+        {
+          "constraintType": "foreignKey",
+          "constraintName": "FK_connections_import_source_id",
+          "pureName": "connections",
+          "refTableName": "import_sources",
+          "columns": [
+            {
+              "columnName": "import_source_id",
+              "refColumnName": "id"
+            }
+          ]
         }
       ],
-      "foreignKeys": [],
       "primaryKey": {
         "pureName": "connections",
         "constraintType": "primaryKey",
@@ -784,6 +815,41 @@ module.exports = {
         }
       ]
     },
+    {
+      "pureName": "import_sources",
+      "columns": [
+        {
+          "pureName": "import_sources",
+          "columnName": "id",
+          "dataType": "int",
+          "autoIncrement": true,
+          "notNull": true
+        },
+        {
+          "pureName": "import_sources",
+          "columnName": "name",
+          "dataType": "varchar(250)",
+          "notNull": true
+        }
+      ],
+      "foreignKeys": [],
+      "primaryKey": {
+        "pureName": "import_sources",
+        "constraintType": "primaryKey",
+        "constraintName": "PK_import_sources",
+        "columns": [
+          {
+            "columnName": "id"
+          }
+        ]
+      },
+      "preloadedRows": [
+        {
+          "id": -1,
+          "name": "env"
+        }
+      ]
+    },
     {
       "pureName": "roles",
       "columns": [
@@ -799,9 +865,34 @@ module.exports = {
           "columnName": "name",
           "dataType": "varchar(250)",
           "notNull": false
+        },
+        {
+          "pureName": "roles",
+          "columnName": "import_source_id",
+          "dataType": "int",
+          "notNull": false
+        },
+        {
+          "pureName": "roles",
+          "columnName": "id_original",
+          "dataType": "varchar(250)",
+          "notNull": false
+        }
+      ],
+      "foreignKeys": [
+        {
+          "constraintType": "foreignKey",
+          "constraintName": "FK_roles_import_source_id",
+          "pureName": "roles",
+          "refTableName": "import_sources",
+          "columns": [
+            {
+              "columnName": "import_source_id",
+              "refColumnName": "id"
+            }
+          ]
         }
       ],
-      "foreignKeys": [],
       "primaryKey": {
         "pureName": "roles",
         "constraintType": "primaryKey",
@@ -848,6 +939,12 @@ module.exports = {
           "columnName": "connection_id",
           "dataType": "int",
           "notNull": true
+        },
+        {
+          "pureName": "role_connections",
+          "columnName": "import_source_id",
+          "dataType": "int",
+          "notNull": false
         }
       ],
       "foreignKeys": [
@@ -876,6 +973,18 @@ module.exports = {
               "refColumnName": "id"
             }
           ]
+        },
+        {
+          "constraintType": "foreignKey",
+          "constraintName": "FK_role_connections_import_source_id",
+          "pureName": "role_connections",
+          "refTableName": "import_sources",
+          "columns": [
+            {
+              "columnName": "import_source_id",
+              "refColumnName": "id"
+            }
+          ]
         }
       ],
       "primaryKey": {
@@ -928,6 +1037,18 @@ module.exports = {
           "columnName": "database_permission_role_id",
           "dataType": "int",
           "notNull": true
+        },
+        {
+          "pureName": "role_databases",
+          "columnName": "import_source_id",
+          "dataType": "int",
+          "notNull": false
+        },
+        {
+          "pureName": "role_databases",
+          "columnName": "id_original",
+          "dataType": "varchar(250)",
+          "notNull": false
         }
       ],
       "foreignKeys": [
@@ -968,6 +1089,18 @@ module.exports = {
               "refColumnName": "id"
             }
           ]
+        },
+        {
+          "constraintType": "foreignKey",
+          "constraintName": "FK_role_databases_import_source_id",
+          "pureName": "role_databases",
+          "refTableName": "import_sources",
+          "columns": [
+            {
+              "columnName": "import_source_id",
+              "refColumnName": "id"
+            }
+          ]
         }
       ],
       "primaryKey": {
@@ -1081,6 +1214,12 @@ module.exports = {
           "columnName": "permission",
           "dataType": "varchar(250)",
           "notNull": true
+        },
+        {
+          "pureName": "role_permissions",
+          "columnName": "import_source_id",
+          "dataType": "int",
+          "notNull": false
         }
       ],
       "foreignKeys": [
@@ -1096,6 +1235,18 @@ module.exports = {
               "refColumnName": "id"
             }
           ]
+        },
+        {
+          "constraintType": "foreignKey",
+          "constraintName": "FK_role_permissions_import_source_id",
+          "pureName": "role_permissions",
+          "refTableName": "import_sources",
+          "columns": [
+            {
+              "columnName": "import_source_id",
+              "refColumnName": "id"
+            }
+          ]
         }
       ],
       "primaryKey": {
@@ -1178,6 +1329,18 @@ module.exports = {
           "columnName": "table_permission_scope_id",
           "dataType": "int",
           "notNull": true
+        },
+        {
+          "pureName": "role_tables",
+          "columnName": "import_source_id",
+          "dataType": "int",
+          "notNull": false
+        },
+        {
+          "pureName": "role_tables",
+          "columnName": "id_original",
+          "dataType": "varchar(250)",
+          "notNull": false
         }
       ],
       "foreignKeys": [
@@ -1230,6 +1393,18 @@ module.exports = {
               "refColumnName": "id"
             }
           ]
+        },
+        {
+          "constraintType": "foreignKey",
+          "constraintName": "FK_role_tables_import_source_id",
+          "pureName": "role_tables",
+          "refTableName": "import_sources",
+          "columns": [
+            {
+              "columnName": "import_source_id",
+              "refColumnName": "id"
+            }
+          ]
         }
       ],
       "primaryKey": {

packages/api/src/utility/envtools.js

@@ -0,0 +1,454 @@
+const path = require('path');
+const _ = require('lodash');
+const { safeJsonParse, getDatabaseFileLabel } = require('dbgate-tools');
+const crypto = require('crypto');
+
+function extractConnectionsFromEnv(env) {
+  if (!env?.CONNECTIONS) {
+    return null;
+  }
+
+  const connections = _.compact(env.CONNECTIONS.split(',')).map(id => ({
+    _id: id,
+    engine: env[`ENGINE_${id}`],
+    server: env[`SERVER_${id}`],
+    user: env[`USER_${id}`],
+    password: env[`PASSWORD_${id}`],
+    passwordMode: env[`PASSWORD_MODE_${id}`],
+    port: env[`PORT_${id}`],
+    databaseUrl: env[`URL_${id}`],
+    useDatabaseUrl: !!env[`URL_${id}`],
+    databaseFile: env[`FILE_${id}`]?.replace(
+      '%%E2E_TEST_DATA_DIRECTORY%%',
+      path.join(path.dirname(path.dirname(__dirname)), 'e2e-tests', 'tmpdata')
+    ),
+    socketPath: env[`SOCKET_PATH_${id}`],
+    serviceName: env[`SERVICE_NAME_${id}`],
+    authType: env[`AUTH_TYPE_${id}`] || (env[`SOCKET_PATH_${id}`] ? 'socket' : undefined),
+    defaultDatabase: env[`DATABASE_${id}`] || (env[`FILE_${id}`] ? getDatabaseFileLabel(env[`FILE_${id}`]) : null),
+    singleDatabase: !!env[`DATABASE_${id}`] || !!env[`FILE_${id}`],
+    displayName: env[`LABEL_${id}`],
+    isReadOnly: env[`READONLY_${id}`],
+    databases: env[`DBCONFIG_${id}`] ? safeJsonParse(env[`DBCONFIG_${id}`]) : null,
+    allowedDatabases: env[`ALLOWED_DATABASES_${id}`]?.replace(/\|/g, '\n'),
+    allowedDatabasesRegex: env[`ALLOWED_DATABASES_REGEX_${id}`],
+    parent: env[`PARENT_${id}`] || undefined,
+    useSeparateSchemas: !!env[`USE_SEPARATE_SCHEMAS_${id}`],
+    localDataCenter: env[`LOCAL_DATA_CENTER_${id}`],
+
+    // SSH tunnel
+    useSshTunnel: env[`USE_SSH_${id}`],
+    sshHost: env[`SSH_HOST_${id}`],
+    sshPort: env[`SSH_PORT_${id}`],
+    sshMode: env[`SSH_MODE_${id}`],
+    sshLogin: env[`SSH_LOGIN_${id}`],
+    sshPassword: env[`SSH_PASSWORD_${id}`],
+    sshKeyfile: env[`SSH_KEY_FILE_${id}`],
+    sshKeyfilePassword: env[`SSH_KEY_FILE_PASSWORD_${id}`],
+
+    // SSL
+    useSsl: env[`USE_SSL_${id}`],
+    sslCaFile: env[`SSL_CA_FILE_${id}`],
+    sslCertFile: env[`SSL_CERT_FILE_${id}`],
+    sslCertFilePassword: env[`SSL_CERT_FILE_PASSWORD_${id}`],
+    sslKeyFile: env[`SSL_KEY_FILE_${id}`],
+    sslRejectUnauthorized: env[`SSL_REJECT_UNAUTHORIZED_${id}`],
+    trustServerCertificate: env[`SSL_TRUST_CERTIFICATE_${id}`],
+  }));
+
+  return connections;
+}
+
+function extractImportEntitiesFromEnv(env) {
+  const portalConnections = extractConnectionsFromEnv(env) || [];
+
+  const connections = portalConnections.map((conn, index) => ({
+    ...conn,
+    id_original: conn._id,
+    import_source_id: -1,
+    conid: crypto.randomUUID(),
+    _id: undefined,
+    id: index + 1, // autoincrement id
+
+    useDatabaseUrl: conn.useDatabaseUrl ? 1 : 0,
+    isReadOnly: conn.isReadOnly ? 1 : 0,
+    useSeparateSchemas: conn.useSeparateSchemas ? 1 : 0,
+    trustServerCertificate: conn.trustServerCertificate ? 1 : 0,
+    singleDatabase: conn.singleDatabase ? 1 : 0,
+    useSshTunnel: conn.useSshTunnel ? 1 : 0,
+    useSsl: conn.useSsl ? 1 : 0,
+    sslRejectUnauthorized: conn.sslRejectUnauthorized ? 1 : 0,
+  }));
+
+  const connectionEnvIdToDbId = {};
+  for (const conn of connections) {
+    connectionEnvIdToDbId[conn.id_original] = conn.id;
+  }
+
+  const connectionsRegex = /^ROLE_(.+)_CONNECTIONS$/;
+  const permissionsRegex = /^ROLE_(.+)_PERMISSIONS$/;
+
+  const dbConnectionRegex = /^ROLE_(.+)_DATABASES_(.+)_CONNECTION$/;
+  const dbDatabasesRegex = /^ROLE_(.+)_DATABASES_(.+)_DATABASES$/;
+  const dbDatabasesRegexRegex = /^ROLE_(.+)_DATABASES_(.+)_DATABASES_REGEX$/;
+  const dbPermissionRegex = /^ROLE_(.+)_DATABASES_(.+)_PERMISSION$/;
+
+  const tableConnectionRegex = /^ROLE_(.+)_TABLES_(.+)_CONNECTION$/;
+  const tableDatabasesRegex = /^ROLE_(.+)_TABLES_(.+)_DATABASES$/;
+  const tableDatabasesRegexRegex = /^ROLE_(.+)_TABLES_(.+)_DATABASES_REGEX$/;
+  const tableSchemasRegex = /^ROLE_(.+)_TABLES_(.+)_SCHEMAS$/;
+  const tableSchemasRegexRegex = /^ROLE_(.+)_TABLES_(.+)_SCHEMAS_REGEX$/;
+  const tableTablesRegex = /^ROLE_(.+)_TABLES_(.+)_TABLES$/;
+  const tableTablesRegexRegex = /^ROLE_(.+)_TABLES_(.+)_TABLES_REGEX$/;
+  const tablePermissionRegex = /^ROLE_(.+)_TABLES_(.+)_PERMISSION$/;
+  const tableScopeRegex = /^ROLE_(.+)_TABLES_(.+)_SCOPE$/;
+
+  const roles = [];
+  const role_connections = [];
+  const role_permissions = [];
+  const role_databases = [];
+  const role_tables = [];
+
+  // Permission name to ID mappings
+  const databasePermissionMap = {
+    view: -1,
+    read_content: -2,
+    write_data: -3,
+    run_script: -4,
+    deny: -5,
+  };
+
+  const tablePermissionMap = {
+    read: -1,
+    update_only: -2,
+    create_update_delete: -3,
+    run_script: -4,
+    deny: -5,
+  };
+
+  const tableScopeMap = {
+    all_objects: -1,
+    tables: -2,
+    views: -3,
+    tables_views_collections: -4,
+    procedures: -5,
+    functions: -6,
+    triggers: -7,
+    sql_objects: -8,
+    collections: -9,
+  };
+
+  // Collect database and table permissions data
+  const databasePermissions = {};
+  const tablePermissions = {};
+
+  // First pass: collect all database and table permission data
+  for (const key in env) {
+    const dbConnMatch = key.match(dbConnectionRegex);
+    const dbDatabasesMatch = key.match(dbDatabasesRegex);
+    const dbDatabasesRegexMatch = key.match(dbDatabasesRegexRegex);
+    const dbPermMatch = key.match(dbPermissionRegex);
+
+    const tableConnMatch = key.match(tableConnectionRegex);
+    const tableDatabasesMatch = key.match(tableDatabasesRegex);
+    const tableDatabasesRegexMatch = key.match(tableDatabasesRegexRegex);
+    const tableSchemasMatch = key.match(tableSchemasRegex);
+    const tableSchemasRegexMatch = key.match(tableSchemasRegexRegex);
+    const tableTablesMatch = key.match(tableTablesRegex);
+    const tableTablesRegexMatch = key.match(tableTablesRegexRegex);
+    const tablePermMatch = key.match(tablePermissionRegex);
+    const tableScopeMatch = key.match(tableScopeRegex);
+
+    // Database permissions
+    if (dbConnMatch) {
+      const [, roleName, permId] = dbConnMatch;
+      if (!databasePermissions[roleName]) databasePermissions[roleName] = {};
+      if (!databasePermissions[roleName][permId]) databasePermissions[roleName][permId] = {};
+      databasePermissions[roleName][permId].connection = env[key];
+    }
+    if (dbDatabasesMatch) {
+      const [, roleName, permId] = dbDatabasesMatch;
+      if (!databasePermissions[roleName]) databasePermissions[roleName] = {};
+      if (!databasePermissions[roleName][permId]) databasePermissions[roleName][permId] = {};
+      databasePermissions[roleName][permId].databases = env[key]?.replace(/\|/g, '\n');
+    }
+    if (dbDatabasesRegexMatch) {
+      const [, roleName, permId] = dbDatabasesRegexMatch;
+      if (!databasePermissions[roleName]) databasePermissions[roleName] = {};
+      if (!databasePermissions[roleName][permId]) databasePermissions[roleName][permId] = {};
+      databasePermissions[roleName][permId].databasesRegex = env[key];
+    }
+    if (dbPermMatch) {
+      const [, roleName, permId] = dbPermMatch;
+      if (!databasePermissions[roleName]) databasePermissions[roleName] = {};
+      if (!databasePermissions[roleName][permId]) databasePermissions[roleName][permId] = {};
+      databasePermissions[roleName][permId].permission = env[key];
+    }
+
+    // Table permissions
+    if (tableConnMatch) {
+      const [, roleName, permId] = tableConnMatch;
+      if (!tablePermissions[roleName]) tablePermissions[roleName] = {};
+      if (!tablePermissions[roleName][permId]) tablePermissions[roleName][permId] = {};
+      tablePermissions[roleName][permId].connection = env[key];
+    }
+    if (tableDatabasesMatch) {
+      const [, roleName, permId] = tableDatabasesMatch;
+      if (!tablePermissions[roleName]) tablePermissions[roleName] = {};
+      if (!tablePermissions[roleName][permId]) tablePermissions[roleName][permId] = {};
+      tablePermissions[roleName][permId].databases = env[key]?.replace(/\|/g, '\n');
+    }
+    if (tableDatabasesRegexMatch) {
+      const [, roleName, permId] = tableDatabasesRegexMatch;
+      if (!tablePermissions[roleName]) tablePermissions[roleName] = {};
+      if (!tablePermissions[roleName][permId]) tablePermissions[roleName][permId] = {};
+      tablePermissions[roleName][permId].databasesRegex = env[key];
+    }
+    if (tableSchemasMatch) {
+      const [, roleName, permId] = tableSchemasMatch;
+      if (!tablePermissions[roleName]) tablePermissions[roleName] = {};
+      if (!tablePermissions[roleName][permId]) tablePermissions[roleName][permId] = {};
+      tablePermissions[roleName][permId].schemas = env[key];
+    }
+    if (tableSchemasRegexMatch) {
+      const [, roleName, permId] = tableSchemasRegexMatch;
+      if (!tablePermissions[roleName]) tablePermissions[roleName] = {};
+      if (!tablePermissions[roleName][permId]) tablePermissions[roleName][permId] = {};
+      tablePermissions[roleName][permId].schemasRegex = env[key];
+    }
+    if (tableTablesMatch) {
+      const [, roleName, permId] = tableTablesMatch;
+      if (!tablePermissions[roleName]) tablePermissions[roleName] = {};
+      if (!tablePermissions[roleName][permId]) tablePermissions[roleName][permId] = {};
+      tablePermissions[roleName][permId].tables = env[key]?.replace(/\|/g, '\n');
+    }
+    if (tableTablesRegexMatch) {
+      const [, roleName, permId] = tableTablesRegexMatch;
+      if (!tablePermissions[roleName]) tablePermissions[roleName] = {};
+      if (!tablePermissions[roleName][permId]) tablePermissions[roleName][permId] = {};
+      tablePermissions[roleName][permId].tablesRegex = env[key];
+    }
+    if (tablePermMatch) {
+      const [, roleName, permId] = tablePermMatch;
+      if (!tablePermissions[roleName]) tablePermissions[roleName] = {};
+      if (!tablePermissions[roleName][permId]) tablePermissions[roleName][permId] = {};
+      tablePermissions[roleName][permId].permission = env[key];
+    }
+    if (tableScopeMatch) {
+      const [, roleName, permId] = tableScopeMatch;
+      if (!tablePermissions[roleName]) tablePermissions[roleName] = {};
+      if (!tablePermissions[roleName][permId]) tablePermissions[roleName][permId] = {};
+      tablePermissions[roleName][permId].scope = env[key];
+    }
+  }
+
+  // Second pass: process roles, connections, and permissions
+  for (const key in env) {
+    const connMatch = key.match(connectionsRegex);
+    const permMatch = key.match(permissionsRegex);
+    if (connMatch) {
+      const roleName = connMatch[1];
+      let role = roles.find(r => r.name === roleName);
+      if (!role) {
+        role = {
+          id: roles.length + 1,
+          name: roleName,
+          import_source_id: -1,
+        };
+        roles.push(role);
+      }
+      const connIds = env[key]
+        .split(',')
+        .map(id => id.trim())
+        .filter(id => id.length > 0);
+      for (const connId of connIds) {
+        const dbId = connectionEnvIdToDbId[connId];
+        if (dbId) {
+          role_connections.push({
+            role_id: role.id,
+            connection_id: dbId,
+            import_source_id: -1,
+          });
+        }
+      }
+    }
+    if (permMatch) {
+      const roleName = permMatch[1];
+      let role = roles.find(r => r.name === roleName);
+      if (!role) {
+        role = {
+          id: roles.length + 1,
+          name: roleName,
+          import_source_id: -1,
+        };
+        roles.push(role);
+      }
+      const permissions = env[key]
+        .split(',')
+        .map(p => p.trim())
+        .filter(p => p.length > 0);
+      for (const permission of permissions) {
+        role_permissions.push({
+          role_id: role.id,
+          permission,
+          import_source_id: -1,
+        });
+      }
+    }
+  }
+
+  // Process database permissions
+  for (const roleName in databasePermissions) {
+    let role = roles.find(r => r.name === roleName);
+    if (!role) {
+      role = {
+        id: roles.length + 1,
+        name: roleName,
+        import_source_id: -1,
+      };
+      roles.push(role);
+    }
+
+    for (const permId in databasePermissions[roleName]) {
+      const perm = databasePermissions[roleName][permId];
+      if (perm.connection && perm.permission) {
+        const dbId = connectionEnvIdToDbId[perm.connection];
+        const permissionId = databasePermissionMap[perm.permission];
+        if (dbId && permissionId) {
+          role_databases.push({
+            role_id: role.id,
+            connection_id: dbId,
+            database_names_list: perm.databases || null,
+            database_names_regex: perm.databasesRegex || null,
+            database_permission_role_id: permissionId,
+            id_original: permId,
+            import_source_id: -1,
+          });
+        }
+      }
+    }
+  }
+
+  // Process table permissions
+  for (const roleName in tablePermissions) {
+    let role = roles.find(r => r.name === roleName);
+    if (!role) {
+      role = {
+        id: roles.length + 1,
+        name: roleName,
+        import_source_id: -1,
+      };
+      roles.push(role);
+    }
+
+    for (const permId in tablePermissions[roleName]) {
+      const perm = tablePermissions[roleName][permId];
+      if (perm.connection && perm.permission) {
+        const dbId = connectionEnvIdToDbId[perm.connection];
+        const permissionId = tablePermissionMap[perm.permission];
+        const scopeId = tableScopeMap[perm.scope || 'all_objects'];
+        if (dbId && permissionId && scopeId) {
+          role_tables.push({
+            role_id: role.id,
+            connection_id: dbId,
+            database_names_list: perm.databases || null,
+            database_names_regex: perm.databasesRegex || null,
+            schema_names_list: perm.schemas || null,
+            schema_names_regex: perm.schemasRegex || null,
+            table_names_list: perm.tables || null,
+            table_names_regex: perm.tablesRegex || null,
+            table_permission_role_id: permissionId,
+            table_permission_scope_id: scopeId,
+            id_original: permId,
+            import_source_id: -1,
+          });
+        }
+      }
+    }
+  }
+
+  if (connections.length == 0 && roles.length == 0) {
+    return null;
+  }
+
+  return {
+    connections,
+    roles,
+    role_connections,
+    role_permissions,
+    role_databases,
+    role_tables,
+  };
+}
+
+function createStorageFromEnvReplicatorItems(importEntities) {
+  return [
+    {
+      name: 'connections',
+      findExisting: true,
+      createNew: true,
+      updateExisting: true,
+      matchColumns: ['id_original', 'import_source_id'],
+      deleteMissing: true,
+      deleteRestrictionColumns: ['import_source_id'],
+      skipUpdateColumns: ['conid'],
+      jsonArray: importEntities.connections,
+    },
+    {
+      name: 'roles',
+      findExisting: true,
+      createNew: true,
+      updateExisting: true,
+      matchColumns: ['name', 'import_source_id'],
+      deleteMissing: true,
+      deleteRestrictionColumns: ['import_source_id'],
+      jsonArray: importEntities.roles,
+    },
+    {
+      name: 'role_connections',
+      findExisting: true,
+      createNew: true,
+      updateExisting: false,
+      deleteMissing: true,
+      matchColumns: ['role_id', 'connection_id', 'import_source_id'],
+      jsonArray: importEntities.role_connections,
+      deleteRestrictionColumns: ['import_source_id'],
+    },
+    {
+      name: 'role_permissions',
+      findExisting: true,
+      createNew: true,
+      updateExisting: false,
+      deleteMissing: true,
+      matchColumns: ['role_id', 'permission', 'import_source_id'],
+      jsonArray: importEntities.role_permissions,
+      deleteRestrictionColumns: ['import_source_id'],
+    },
+    {
+      name: 'role_databases',
+      findExisting: true,
+      createNew: true,
+      updateExisting: true,
+      deleteMissing: true,
+      matchColumns: ['role_id', 'id_original', 'import_source_id'],
+      jsonArray: importEntities.role_databases,
+      deleteRestrictionColumns: ['import_source_id'],
+    },
+    {
+      name: 'role_tables',
+      findExisting: true,
+      createNew: true,
+      updateExisting: true,
+      deleteMissing: true,
+      matchColumns: ['role_id', 'id_original', 'import_source_id'],
+      jsonArray: importEntities.role_tables,
+      deleteRestrictionColumns: ['import_source_id'],
+    },
+  ];
+}
+
+module.exports = {
+  extractConnectionsFromEnv,
+  extractImportEntitiesFromEnv,
+  createStorageFromEnvReplicatorItems,
+};

packages/datalib/src/DataReplicator.ts

@@ -23,6 +23,7 @@ export interface DataReplicatorItem {
   deleteMissing: boolean;
   deleteRestrictionColumns: string[];
   matchColumns: string[];
+  skipUpdateColumns?: string[];
 }
 
 export interface DataReplicatorOptions {
@@ -151,7 +152,12 @@ class ReplicatorItemHolder {
         chunk,
         this.table.columns.map(x => x.columnName)
       ),
-      [this.autoColumn, ...this.backReferences.map(x => x.columnName), ...this.references.map(x => x.columnName)]
+      [
+        this.autoColumn,
+        ...this.backReferences.map(x => x.columnName),
+        ...this.references.map(x => x.columnName),
+        ...(this.item.skipUpdateColumns || []),
+      ]
     );
 
     return res;

packages/filterparser/src/filterTool.ts

@@ -21,6 +21,7 @@ export function getFilterValueExpression(value, dataType?) {
   if (value === false) return 'FALSE';
   if (value.$oid) return `ObjectId("${value.$oid}")`;
   if (value.$bigint) return value.$bigint;
+  if (value.$decimal) return value.$decimal;
   if (value.type == 'Buffer' && Array.isArray(value.data)) {
     return '0x' + arrayToHexString(value.data);
   }

packages/sqltree/src/evaluateCondition.ts

@@ -19,6 +19,7 @@ function isLike(value, test) {
 function extractRawValue(value) {
   if (value?.$bigint) return value.$bigint;
   if (value?.$oid) return value.$oid;
+  if (value?.$decimal) return value.$decimal;
   return value;
 }
 

packages/tools/src/DatabaseAnalyser.ts

@@ -164,6 +164,11 @@ export class DatabaseAnalyser<TClient = any> {
 
     const res = {};
     for (const field of STRUCTURE_FIELDS) {
+      const isAll = this.modifications.some(x => x.action == 'all' && x.objectTypeField == field);
+      if (isAll) {
+        res[field] = newlyAnalysed[field] || [];
+        continue;
+      }
       const removedIds = this.modifications
         .filter(x => x.action == 'remove' && x.objectTypeField == field)
         .map(x => x.objectId);

packages/tools/src/SqlDumper.ts

@@ -26,6 +26,7 @@ import _isDate from 'lodash/isDate';
 import _isArray from 'lodash/isArray';
 import _isPlainObject from 'lodash/isPlainObject';
 import _keys from 'lodash/keys';
+import _cloneDeep from 'lodash/cloneDeep';
 import uuidv1 from 'uuid/v1';
 
 export class SqlDumper implements AlterProcessor {
@@ -87,6 +88,7 @@ export class SqlDumper implements AlterProcessor {
       this.putByteArrayValue(bytes);
     }
     else if (value?.$bigint) this.putRaw(value?.$bigint);
+    else if (value?.$decimal) this.putRaw(value?.$decimal);
     else if (_isPlainObject(value) || _isArray(value)) this.putStringValue(JSON.stringify(value));
     else this.put('^null');
   }
@@ -666,6 +668,68 @@ export class SqlDumper implements AlterProcessor {
     }
   }
 
+  sanitizeTableConstraints(table: TableInfo): TableInfo {
+    // Create a deep copy of the table
+    const sanitized = _cloneDeep(table);
+    
+    // Get the set of existing column names
+    const existingColumns = new Set(sanitized.columns.map(col => col.columnName));
+    
+    // Filter primary key columns to only include existing columns
+    if (sanitized.primaryKey) {
+      const validPkColumns = sanitized.primaryKey.columns.filter(col => existingColumns.has(col.columnName));
+      if (validPkColumns.length === 0) {
+        // If no valid columns remain, remove the primary key entirely
+        sanitized.primaryKey = null;
+      } else if (validPkColumns.length < sanitized.primaryKey.columns.length) {
+        // Update primary key with only valid columns
+        sanitized.primaryKey = {
+          ...sanitized.primaryKey,
+          columns: validPkColumns
+        };
+      }
+    }
+    
+    // Filter sorting key columns to only include existing columns
+    if (sanitized.sortingKey) {
+      const validSkColumns = sanitized.sortingKey.columns.filter(col => existingColumns.has(col.columnName));
+      if (validSkColumns.length === 0) {
+        sanitized.sortingKey = null;
+      } else if (validSkColumns.length < sanitized.sortingKey.columns.length) {
+        sanitized.sortingKey = {
+          ...sanitized.sortingKey,
+          columns: validSkColumns
+        };
+      }
+    }
+    
+    // Filter foreign keys to only include those with all columns present
+    if (sanitized.foreignKeys) {
+      sanitized.foreignKeys = sanitized.foreignKeys.filter(fk =>
+        fk.columns.every(col => existingColumns.has(col.columnName))
+      );
+    }
+    
+    // Filter indexes to only include those with all columns present
+    if (sanitized.indexes) {
+      sanitized.indexes = sanitized.indexes.filter(idx =>
+        idx.columns.every(col => existingColumns.has(col.columnName))
+      );
+    }
+    
+    // Filter unique constraints to only include those with all columns present
+    if (sanitized.uniques) {
+      sanitized.uniques = sanitized.uniques.filter(uq =>
+        uq.columns.every(col => existingColumns.has(col.columnName))
+      );
+    }
+    
+    // Filter dependencies (references from other tables) - these should remain as-is
+    // since they don't affect the CREATE TABLE statement for this table
+    
+    return sanitized;
+  }
+
   recreateTable(oldTable: TableInfo, newTable: TableInfo) {
     if (!oldTable.pairingId || !newTable.pairingId || oldTable.pairingId != newTable.pairingId) {
       throw new Error('Recreate is not possible: oldTable.paringId != newTable.paringId');
@@ -680,48 +744,51 @@ export class SqlDumper implements AlterProcessor {
       }))
       .filter(x => x.newcol);
 
+    // Create a sanitized version of newTable with constraints that only reference existing columns
+    const sanitizedNewTable = this.sanitizeTableConstraints(newTable);
+
     if (this.driver.supportsTransactions) {
       this.dropConstraints(oldTable, true);
       this.renameTable(oldTable, tmpTable);
 
-      this.createTable(newTable);
+      this.createTable(sanitizedNewTable);
 
-      const autoinc = newTable.columns.find(x => x.autoIncrement);
+      const autoinc = sanitizedNewTable.columns.find(x => x.autoIncrement);
       if (autoinc) {
-        this.allowIdentityInsert(newTable, true);
+        this.allowIdentityInsert(sanitizedNewTable, true);
       }
 
       this.putCmd(
         '^insert ^into %f (%,i) select %,i ^from %f',
-        newTable,
+        sanitizedNewTable,
         columnPairs.map(x => x.newcol.columnName),
         columnPairs.map(x => x.oldcol.columnName),
         { ...oldTable, pureName: tmpTable }
       );
 
       if (autoinc) {
-        this.allowIdentityInsert(newTable, false);
+        this.allowIdentityInsert(sanitizedNewTable, false);
       }
 
       if (this.dialect.dropForeignKey) {
-        newTable.dependencies.forEach(cnt => this.createConstraint(cnt));
+        sanitizedNewTable.dependencies.forEach(cnt => this.createConstraint(cnt));
       }
 
       this.dropTable({ ...oldTable, pureName: tmpTable });
     } else {
       // we have to preserve old table as long as possible
-      this.createTable({ ...newTable, pureName: tmpTable });
+      this.createTable({ ...sanitizedNewTable, pureName: tmpTable });
 
       this.putCmd(
         '^insert ^into %f (%,i) select %,s ^from %f',
-        { ...newTable, pureName: tmpTable },
+        { ...sanitizedNewTable, pureName: tmpTable },
         columnPairs.map(x => x.newcol.columnName),
         columnPairs.map(x => x.oldcol.columnName),
         oldTable
       );
 
       this.dropTable(oldTable);
-      this.renameTable({ ...newTable, pureName: tmpTable }, newTable.pureName);
+      this.renameTable({ ...sanitizedNewTable, pureName: tmpTable }, newTable.pureName);
     }
   }
 

packages/tools/src/alterPlan.ts

@@ -91,8 +91,8 @@ interface AlterOperation_RenameConstraint {
 }
 interface AlterOperation_RecreateTable {
   operationType: 'recreateTable';
-  table: TableInfo;
-  operations: AlterOperation[];
+  oldTable: TableInfo;
+  newTable: TableInfo;
 }
 interface AlterOperation_FillPreloadedRows {
   operationType: 'fillPreloadedRows';
@@ -249,11 +249,11 @@ export class AlterPlan {
     });
   }
 
-  recreateTable(table: TableInfo, operations: AlterOperation[]) {
+  recreateTable(oldTable: TableInfo, newTable: TableInfo) {
     this.operations.push({
       operationType: 'recreateTable',
-      table,
-      operations,
+      oldTable,
+      newTable,
     });
     this.recreates.tables += 1;
   }
@@ -337,7 +337,13 @@ export class AlterPlan {
             return opRes;
           }),
           op,
-        ];
+        ].filter(op => {
+          // filter duplicated drops
+          const existingDrop = this.operations.find(
+            o => o.operationType == 'dropConstraint' && o.oldObject === op['oldObject']
+          );
+          return existingDrop == null;
+        });
         return res;
       }
 
@@ -498,53 +504,121 @@ export class AlterPlan {
         return [];
       }
 
-      const table = this.wholeNewDb.tables.find(
+      const oldTable = this.wholeOldDb.tables.find(
+        x => x.pureName == op[objectField].pureName && x.schemaName == op[objectField].schemaName
+      );
+      const newTable = this.wholeNewDb.tables.find(
         x => x.pureName == op[objectField].pureName && x.schemaName == op[objectField].schemaName
       );
       this.recreates.tables += 1;
       return [
         {
           operationType: 'recreateTable',
-          table,
-          operations: [op],
+          oldTable,
+          newTable,
+          // operations: [op],
         },
       ];
     }
     return null;
   }
 
-  _groupTableRecreations(): AlterOperation[] {
-    const res = [];
-    const recreates = {};
+  _removeRecreatedTableAlters(): AlterOperation[] {
+    const res: AlterOperation[] = [];
+    const recreates = new Set<string>();
     for (const op of this.operations) {
-      if (op.operationType == 'recreateTable' && op.table) {
-        const existingRecreate = recreates[`${op.table.schemaName}||${op.table.pureName}`];
-        if (existingRecreate) {
-          existingRecreate.operations.push(...op.operations);
-        } else {
-          const recreate = {
-            ...op,
-            operations: [...op.operations],
-          };
-          res.push(recreate);
-          recreates[`${op.table.schemaName}||${op.table.pureName}`] = recreate;
-        }
-      } else {
-        // @ts-ignore
-        const oldObject: TableInfo = op.oldObject || op.object;
-        if (oldObject) {
-          const recreated = recreates[`${oldObject.schemaName}||${oldObject.pureName}`];
-          if (recreated) {
-            recreated.operations.push(op);
-            continue;
-          }
-        }
-        res.push(op);
+      if (op.operationType == 'recreateTable' && op.oldTable && op.newTable) {
+        const key = `${op.oldTable.schemaName}||${op.oldTable.pureName}`;
+        recreates.add(key);
       }
     }
+
+    for (const op of this.operations) {
+      switch (op.operationType) {
+        case 'createColumn':
+        case 'createConstraint':
+          {
+            const key = `${op.newObject.schemaName}||${op.newObject.pureName}`;
+            if (recreates.has(key)) {
+              // skip create inside recreated table
+              continue;
+            }
+          }
+          break;
+        case 'dropColumn':
+        case 'dropConstraint':
+        case 'changeColumn':
+          {
+            const key = `${op.oldObject.schemaName}||${op.oldObject.pureName}`;
+            if (recreates.has(key)) {
+              // skip drop/change inside recreated table
+              continue;
+            }
+          }
+          break;
+        case 'renameColumn':
+          {
+            const key = `${op.object.schemaName}||${op.object.pureName}`;
+            if (recreates.has(key)) {
+              // skip rename inside recreated table
+              continue;
+            }
+          }
+          break;
+      }
+      res.push(op);
+    }
     return res;
   }
 
+  _groupTableRecreations(): AlterOperation[] {
+    const res = [];
+    const recreates = new Set<string>();
+    for (const op of this.operations) {
+      if (op.operationType == 'recreateTable' && op.oldTable && op.newTable) {
+        const key = `${op.oldTable.schemaName}||${op.oldTable.pureName}`;
+        if (recreates.has(key)) {
+          // prevent duplicate recreates
+          continue;
+        }
+        recreates.add(key);
+      }
+
+      res.push(op);
+    }
+    return res;
+
+    // const res = [];
+    // const recreates = {};
+    // for (const op of this.operations) {
+    //   if (op.operationType == 'recreateTable' && op.table) {
+    //     const existingRecreate = recreates[`${op.table.schemaName}||${op.table.pureName}`];
+    //     if (existingRecreate) {
+    //       existingRecreate.operations.push(...op.operations);
+    //     } else {
+    //       const recreate = {
+    //         ...op,
+    //         operations: [...op.operations],
+    //       };
+    //       res.push(recreate);
+    //       recreates[`${op.table.schemaName}||${op.table.pureName}`] = recreate;
+    //     }
+    //   } else {
+    //     // @ts-ignore
+    //     const oldObject: TableInfo = op.oldObject || op.object;
+    //     if (oldObject) {
+    //       const recreated = recreates[`${oldObject.schemaName}||${oldObject.pureName}`];
+    //       if (recreated) {
+    //         recreated.operations.push(op);
+    //         continue;
+    //       }
+    //     }
+    //     res.push(op);
+    //   }
+    // }
+    // return res;
+  }
+
   _moveForeignKeysToLast(): AlterOperation[] {
     if (!this.dialect.createForeignKey) {
       return this.operations;
@@ -611,6 +685,8 @@ export class AlterPlan {
 
     // console.log('*****************OPERATIONS3', this.operations);
 
+    this.operations = this._removeRecreatedTableAlters();
+
     this.operations = this._moveForeignKeysToLast();
 
     // console.log('*****************OPERATIONS4', this.operations);
@@ -673,16 +749,16 @@ export function runAlterOperation(op: AlterOperation, processor: AlterProcessor)
       break;
     case 'recreateTable':
       {
-        const oldTable = generateTablePairingId(op.table);
-        const newTable = _.cloneDeep(oldTable);
-        const newDb = DatabaseAnalyser.createEmptyStructure();
-        newDb.tables.push(newTable);
-        // console.log('////////////////////////////newTable1', newTable);
-        op.operations.forEach(child => runAlterOperation(child, new DatabaseInfoAlterProcessor(newDb)));
-        // console.log('////////////////////////////op.operations', op.operations);
-        // console.log('////////////////////////////op.table', op.table);
-        // console.log('////////////////////////////newTable2', newTable);
-        processor.recreateTable(oldTable, newTable);
+        // const oldTable = generateTablePairingId(op.table);
+        // const newTable = _.cloneDeep(oldTable);
+        // const newDb = DatabaseAnalyser.createEmptyStructure();
+        // newDb.tables.push(newTable);
+        // // console.log('////////////////////////////newTable1', newTable);
+        // op.operations.forEach(child => runAlterOperation(child, new DatabaseInfoAlterProcessor(newDb)));
+        // // console.log('////////////////////////////op.operations', op.operations);
+        // // console.log('////////////////////////////op.table', op.table);
+        // // console.log('////////////////////////////newTable2', newTable);
+        processor.recreateTable(op.oldTable, op.newTable);
       }
       break;
   }

packages/tools/src/stringTools.ts

@@ -45,14 +45,15 @@ export function hexStringToArray(inputString) {
 
 export function base64ToHex(base64String) {
   const binaryString = atob(base64String);
-  const hexString = Array.from(binaryString, c =>
-    c.charCodeAt(0).toString(16).padStart(2, '0')
-  ).join('');
+  const hexString = Array.from(binaryString, c => c.charCodeAt(0).toString(16).padStart(2, '0')).join('');
   return '0x' + hexString.toUpperCase();
-};
+}
 
 export function hexToBase64(hexString) {
-  const binaryString = hexString.match(/.{1,2}/g).map(byte => String.fromCharCode(parseInt(byte, 16))).join('');
+  const binaryString = hexString
+    .match(/.{1,2}/g)
+    .map(byte => String.fromCharCode(parseInt(byte, 16)))
+    .join('');
   return btoa(binaryString);
 }
 
@@ -68,9 +69,9 @@ export function parseCellValue(value, editorTypes?: DataEditorTypesBehaviour) {
     if (mHex) {
       return {
         $binary: {
-          base64: hexToBase64(value.substring(2))
-        }
-      }
+          base64: hexToBase64(value.substring(2)),
+        },
+      };
     }
   }
 
@@ -200,6 +201,26 @@ function stringifyJsonToGrid(value): ReturnType<typeof stringifyCellValue> {
   return { value: '(JSON)', gridStyle: 'nullCellStyle' };
 }
 
+function formatNumberCustomSeparator(value, thousandsSeparator) {
+  const [intPart, decPart] = value.split('.');
+  const intPartWithSeparator = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
+  return decPart ? `${intPartWithSeparator}.${decPart}` : intPartWithSeparator;
+}
+
+function formatCellNumber(value, gridFormattingOptions?: { thousandsSeparator?: string }) {
+  const separator = gridFormattingOptions?.thousandsSeparator;
+  if (_isNumber(value)) {
+    if (separator === 'none' || (value < 1000 && value > -1000)) return value.toString();
+    if (separator === 'system') return value.toLocaleString();
+  }
+  // fallback for system locale
+  if (separator === 'space' || separator === 'system') return formatNumberCustomSeparator(value.toString(), ' ');
+  if (separator === 'narrowspace') return formatNumberCustomSeparator(value.toString(), '\u202F');
+  if (separator === 'comma') return formatNumberCustomSeparator(value.toString(), ',');
+  if (separator === 'dot') return formatNumberCustomSeparator(value.toString(), '.');
+  return value.toString();
+}
+
 export function stringifyCellValue(
   value,
   intent:
@@ -210,7 +231,7 @@ export function stringifyCellValue(
     | 'exportIntent'
     | 'clipboardIntent',
   editorTypes?: DataEditorTypesBehaviour,
-  gridFormattingOptions?: { useThousandsSeparator?: boolean },
+  gridFormattingOptions?: { thousandsSeparator?: string },
   jsonParsedValue?: any
 ): {
   value: string;
@@ -251,12 +272,19 @@ export function stringifyCellValue(
     };
   }
 
+  if (value?.$decimal) {
+    return {
+      value: formatCellNumber(value.$decimal, gridFormattingOptions),
+      gridStyle: 'valueCellStyle',
+    };
+  }
+
   if (editorTypes?.parseHexAsBuffer) {
     // if (value?.type == 'Buffer' && _isArray(value.data)) {
     //   return { value: '0x' + arrayToHexString(value.data), gridStyle: 'valueCellStyle' };
     // }
   }
-  
+
   if (editorTypes?.parseObjectIdAsDollar) {
     if (value?.$oid) {
       switch (intent) {
@@ -270,13 +298,13 @@ export function stringifyCellValue(
   }
   if (value?.$bigint) {
     return {
-      value: value.$bigint,
+      value: formatCellNumber(value.$bigint, gridFormattingOptions),
       gridStyle: 'valueCellStyle',
     };
   }
   if (typeof value === 'bigint') {
     return {
-      value: value.toString(),
+      value: formatCellNumber(value.toString(), gridFormattingOptions),
       gridStyle: 'valueCellStyle',
     };
   }
@@ -351,13 +379,8 @@ export function stringifyCellValue(
   if (_isNumber(value)) {
     switch (intent) {
       case 'gridCellIntent':
-        return {
-          value:
-            gridFormattingOptions?.useThousandsSeparator && (value >= 10000 || value <= -10000)
-              ? value.toLocaleString()
-              : value.toString(),
-          gridStyle: 'valueCellStyle',
-        };
+        const separator = gridFormattingOptions?.thousandsSeparator;
+        return { value: formatCellNumber(value, gridFormattingOptions), gridStyle: 'valueCellStyle' };
       default:
         return { value: value.toString() };
     }
@@ -449,6 +472,9 @@ export function shouldOpenMultilineDialog(value) {
   if (value?.$bigint) {
     return false;
   }
+  if (value?.$decimal) {
+    return false;
+  }
   if (_isPlainObject(value) || _isArray(value)) {
     return true;
   }
@@ -699,6 +725,9 @@ export function deserializeJsTypesFromJsonParse(obj) {
     if (value?.$bigint) {
       return BigInt(value.$bigint);
     }
+    if (value?.$decimal) {
+      return value.$decimal;
+    }
   });
 }
 
@@ -713,6 +742,9 @@ export function deserializeJsTypesReviver(key, value) {
   if (value?.$bigint) {
     return BigInt(value.$bigint);
   }
+  if (value?.$decimal) {
+    return value.$decimal;
+  }
   return value;
 }
 

packages/types/engines.d.ts

@@ -238,6 +238,7 @@ export interface EngineDriver<TClient = any, TDataBase = any> extends FilterBeha
   supportsDatabaseRestore?: boolean;
   supportsServerSummary?: boolean;
   supportsDatabaseProfiler?: boolean;
+  supportsIncrementalAnalysis?: boolean;
   requiresDefaultSortCriteria?: boolean;
   profilerFormatterFunction?: string;
   profilerTimestampFunction?: string;

packages/web/src/admin/FolderPermissionChooser.svelte

@@ -7,6 +7,7 @@
   export let onSetPermission;
   export let label;
   export let folder;
+  export let disabled = false;
 </script>
 
 <PermissionCheckBox
@@ -15,6 +16,7 @@
   permissions={$values.permissions}
   basePermissions={$values.basePermissions}
   {onSetPermission}
+  {disabled}
 />
 
 <div class="ml-4">
@@ -24,6 +26,7 @@
     permissions={$values.permissions}
     basePermissions={$values.basePermissions}
     {onSetPermission}
+    {disabled}
   />
   <PermissionCheckBox
     label="Write"
@@ -31,5 +34,6 @@
     permissions={$values.permissions}
     basePermissions={$values.basePermissions}
     {onSetPermission}
+    {disabled}
   />
 </div>

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -467,14 +467,12 @@ await dbgateApi.executeQuery(${JSON.stringify(
 
       { divider: true },
       isSqlOrDoc &&
-        isProApp() &&
         !connection.isReadOnly &&
         hasPermission(`dbops/import`) && {
           onClick: handleImport,
           text: _t('database.import', { defaultMessage: 'Import' }),
         },
       isSqlOrDoc &&
-        isProApp() &&
         hasPermission(`dbops/export`) && {
           onClick: handleExport,
           text: _t('database.export', { defaultMessage: 'Export' }),

packages/web/src/celldata/FormCellView.svelte

@@ -0,0 +1,398 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import { tick } from 'svelte';
+  import CellValue from '../datagrid/CellValue.svelte';
+  import { isJsonLikeLongString, safeJsonParse, parseCellValue, stringifyCellValue, filterName } from 'dbgate-tools';
+  import keycodes from '../utility/keycodes';
+  import createRef from '../utility/createRef';
+  import { showModal } from '../modals/modalTools';
+  import EditCellDataModal from '../modals/EditCellDataModal.svelte';
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
+  import { _t } from '../translations';
+  import ColumnLabel from '../elements/ColumnLabel.svelte';
+  import CheckboxField from '../forms/CheckboxField.svelte';
+  import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
+  import JSONTree from '../jsontree/JSONTree.svelte';
+  import Link from '../elements/Link.svelte';
+
+  export let selection;
+
+  $: firstSelection = selection?.[0];
+  $: rowData = firstSelection?.rowData;
+  $: editable = firstSelection?.editable;
+  $: editorTypes = firstSelection?.editorTypes;
+  $: displayColumns = firstSelection?.displayColumns || [];
+  $: realColumnUniqueNames = firstSelection?.realColumnUniqueNames || [];
+  $: grider = firstSelection?.grider;
+
+  $: uniqueRows = _.uniqBy(selection || [], 'row');
+  $: isMultipleRows = uniqueRows.length > 1;
+
+  function areValuesEqual(val1, val2) {
+    if (val1 === val2) return true;
+    if (val1 == null && val2 == null) return true;
+    if (val1 == null || val2 == null) return false;
+    return _.isEqual(val1, val2);
+  }
+
+  function getFieldValue(colName) {
+    if (!isMultipleRows) return { value: rowData?.[colName], hasMultipleValues: false };
+
+    const values = uniqueRows.map(sel => sel.rowData?.[colName]);
+    const firstValue = values[0];
+    const allSame = values.every(v => areValuesEqual(v, firstValue));
+
+    return allSame ? { value: firstValue, hasMultipleValues: false } : { value: null, hasMultipleValues: true };
+  }
+
+  let filter = '';
+  let notNull = getLocalStorage('dataGridCellDataFormNotNull') === 'true';
+
+  $: orderedFields = realColumnUniqueNames
+    .map(colName => {
+      const col = displayColumns.find(c => c.uniqueName === colName);
+      if (!col) return null;
+      const { value, hasMultipleValues } = getFieldValue(colName);
+      return {
+        ...col,
+        value,
+        hasMultipleValues,
+        // columnName: col.columnName || colName,
+        // uniqueName: colName,
+        // value,
+        // hasMultipleValues,
+        // col,
+      };
+    })
+    .filter(Boolean);
+
+  $: filteredFields = orderedFields
+    .filter(field => filterName(filter, field.columnName))
+    .filter(field => {
+      if (notNull) {
+        return field.value != null || field.hasMultipleValues;
+      }
+      return true;
+    });
+
+  let editingColumn = null;
+  let editValue = '';
+  let domEditor = null;
+  const isChangedRef = createRef(false);
+
+  function isJsonValue(value) {
+    if (
+      _.isPlainObject(value) &&
+      !(value?.type == 'Buffer' && _.isArray(value.data)) &&
+      !value.$oid &&
+      !value.$bigint &&
+      !value.$decimal
+    ) {
+      return true;
+    }
+    if (_.isArray(value)) return true;
+    if (typeof value !== 'string') return false;
+    if (!isJsonLikeLongString(value)) return false;
+    const parsed = safeJsonParse(value);
+    return parsed !== null && (_.isPlainObject(parsed) || _.isArray(parsed));
+  }
+
+  function getJsonObject(value) {
+    if (_.isPlainObject(value) || _.isArray(value)) return value;
+    if (typeof value === 'string') return safeJsonParse(value);
+    return null;
+  }
+
+  function handleClick(field) {
+    if (!editable || !grider) return;
+    if (isJsonValue(field.value)) return;
+    // if (isJsonValue(field.value) && !field.hasMultipleValues) {
+    //   openEditModal(field);
+    //   return;
+    // }
+    startEditing(field);
+  }
+
+  function handleDoubleClick(field) {
+    if (!editable || !grider) return;
+    if (isJsonValue(field.value) && !field.hasMultipleValues) {
+      openEditModal(field);
+      return;
+    }
+    startEditing(field);
+  }
+
+  function startEditing(field) {
+    if (!editable || !grider) return;
+    editingColumn = field.uniqueName;
+    editValue = field.hasMultipleValues ? '' : stringifyCellValue(field.value, 'inlineEditorIntent', editorTypes).value;
+    isChangedRef.set(false);
+    tick().then(() => {
+      if (!domEditor) return;
+      domEditor.focus();
+      if (!field.hasMultipleValues) domEditor.select();
+    });
+  }
+
+  function handleKeyDown(event, field) {
+    switch (event.keyCode) {
+      case keycodes.escape:
+        isChangedRef.set(false);
+        editingColumn = null;
+        break;
+      case keycodes.enter:
+        if (isChangedRef.get()) {
+          saveValue(field);
+        }
+        editingColumn = null;
+        event.preventDefault();
+        break;
+      case keycodes.tab:
+      case keycodes.upArrow:
+      case keycodes.downArrow:
+        const reverse = event.keyCode === keycodes.upArrow || (event.keyCode === keycodes.tab && event.shiftKey);
+        event.preventDefault();
+        moveToNextField(field, reverse);
+        break;
+    }
+  }
+
+  function moveToNextField(field, reverse) {
+    const currentIndex = filteredFields.findIndex(f => f.uniqueName === field.uniqueName);
+    const nextIndex = reverse ? currentIndex - 1 : currentIndex + 1;
+    const nextField = filteredFields[nextIndex];
+    if (!nextField) return;
+
+    if (isChangedRef.get()) {
+      saveValue(field);
+    }
+    editingColumn = null;
+    if (nextIndex < 0 || nextIndex >= filteredFields.length) return;
+
+    tick().then(() => {
+      startEditing(nextField);
+      // if (isJsonValue(nextField.value)) {
+      //   openEditModal(nextField);
+      // } else {
+      //   startEditing(nextField);
+      // }
+    });
+  }
+
+  function handleSearchKeyDown(e) {
+    if (e.keyCode === keycodes.backspace && (e.metaKey || e.ctrlKey)) {
+      filter = '';
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }
+
+  function handleBlur(field) {
+    if (isChangedRef.get()) {
+      saveValue(field);
+    }
+    editingColumn = null;
+  }
+
+  function setCellValue(fieldName, value) {
+    if (!grider) return;
+
+    if (selection.length > 0) {
+      const uniqueRowIndices = _.uniq(selection.map(x => x.row));
+      grider.beginUpdate();
+      for (const row of uniqueRowIndices) {
+        grider.setCellValue(row, fieldName, value);
+      }
+      grider.endUpdate();
+    }
+  }
+
+  function saveValue(field) {
+    if (!grider) return;
+    const parsedValue = parseCellValue(editValue, editorTypes);
+    setCellValue(field.uniqueName, parsedValue);
+    isChangedRef.set(false);
+  }
+
+  function openEditModal(field) {
+    if (!grider) return;
+    showModal(EditCellDataModal, {
+      value: field.value,
+      dataEditorTypesBehaviour: editorTypes,
+      onSave: value => setCellValue(field.uniqueName, value),
+    });
+  }
+
+  function getJsonParsedValue(value) {
+    if (editorTypes?.explicitDataType) return null;
+    if (!isJsonLikeLongString(value)) return null;
+    return safeJsonParse(value);
+  }
+
+  function handleEdit(field) {
+    editingColumn = null;
+    openEditModal(field);
+  }
+</script>
+
+<div class="outer">
+  <div class="content">
+    {#if rowData}
+      <div class="search-wrapper" on:keydown={handleSearchKeyDown}>
+        <SearchBoxWrapper noMargin>
+          <SearchInput
+            placeholder={_t('tableCell.filterColumns', { defaultMessage: 'Filter columns' })}
+            bind:value={filter}
+          />
+          <CloseSearchButton bind:filter />
+        </SearchBoxWrapper>
+        <CheckboxField
+          defaultChecked={notNull}
+          on:change={e => {
+            // @ts-ignore
+            notNull = e.target.checked;
+            setLocalStorage('dataGridCellDataFormNotNull', notNull ? 'true' : 'false');
+          }}
+        />
+        {_t('tableCell.hideNullValues', { defaultMessage: 'Hide NULL values' })}
+      </div>
+    {/if}
+    <div class="inner">
+      {#if !rowData}
+        <div class="no-data">{_t('tableCell.noDataSelected', { defaultMessage: 'No data selected' })}</div>
+      {:else}
+        {#each filteredFields as field (field.uniqueName)}
+          <div class="field">
+            <div class="field-name">
+              <ColumnLabel {...field} showDataType /><Link onClick={() => handleEdit(field)}
+                >{_t('tableCell.edit', { defaultMessage: 'Edit' })}
+              </Link>
+            </div>
+            <div class="field-value" class:editable on:click={() => handleClick(field)}>
+              {#if editingColumn === field.uniqueName}
+                <div class="editor-wrapper">
+                  <input
+                    type="text"
+                    bind:this={domEditor}
+                    bind:value={editValue}
+                    on:input={() => isChangedRef.set(true)}
+                    on:keydown={e => handleKeyDown(e, field)}
+                    on:blur={() => handleBlur(field)}
+                    class="inline-editor"
+                  />
+                </div>
+              {:else if field.hasMultipleValues}
+                <span class="multiple-values"
+                  >({_t('tableCell.multipleValues', { defaultMessage: 'Multiple values' })})</span
+                >
+              {:else if isJsonValue(field.value)}
+                <JSONTree value={getJsonParsedValue(field.value)} />
+              {:else}
+                <CellValue
+                  {rowData}
+                  value={field.value}
+                  jsonParsedValue={getJsonParsedValue(field.value)}
+                  {editorTypes}
+                />
+              {/if}
+            </div>
+          </div>
+        {/each}
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .outer {
+    flex: 1;
+    position: relative;
+  }
+
+  .content {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .search-wrapper {
+    padding: 4px 4px 0 4px;
+    flex-shrink: 0;
+    border: 1px solid var(--theme-border);
+    border-bottom: none;
+  }
+
+  .inner {
+    overflow: auto;
+    flex: 1;
+    padding: 4px;
+  }
+
+  .no-data {
+    color: var(--theme-font-3);
+    font-style: italic;
+    padding: 8px;
+  }
+
+  .field {
+    margin-bottom: 8px;
+    border: 1px solid var(--theme-border);
+    border-radius: 3px;
+    overflow: hidden;
+  }
+
+  .field-name {
+    background: var(--theme-bg-1);
+    padding: 4px 8px;
+    font-weight: 500;
+    font-size: 11px;
+    color: var(--theme-font-2);
+    border-bottom: 1px solid var(--theme-border);
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .field-value {
+    padding: 6px 8px;
+    background: var(--theme-bg-0);
+    min-height: 20px;
+    word-break: break-all;
+    position: relative;
+  }
+
+  .field-value.editable {
+    cursor: text;
+  }
+
+  .editor-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  .inline-editor {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: var(--theme-bg-0);
+    color: var(--theme-font-1);
+    padding: 0;
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  .inline-editor:focus {
+    outline: none;
+  }
+
+  .multiple-values {
+    color: var(--theme-font-3);
+    font-style: italic;
+  }
+</style>

packages/web/src/celldata/TextCellView.svelte

@@ -3,12 +3,21 @@
 
   export let selection;
   export let wrap;
+
+  $: singleSelection = selection?.length == 1 && selection?.[0];
+  $: grider = singleSelection?.grider;
+  $: editable = grider?.editable ?? false;
+
+  function setCellValue(value) {
+    if (!editable) return;
+    grider.setCellValue(singleSelection.row, singleSelection.column, value);
+  }
 </script>
 
 <textarea
   class="flex1"
   {wrap}
-  readonly
+  readonly={!editable}
   value={selection
     .map(cell => {
       const { value } = cell;
@@ -16,4 +25,5 @@
       return cell.value;
     })
     .join('\n')}
+  on:input={e => setCellValue(e.target['value'])}
 />

packages/web/src/commands/changeDatabaseStatusCommand.ts

@@ -1,10 +1,11 @@
 import _ from 'lodash';
-import { currentDatabase, getCurrentDatabase } from '../stores';
+import { currentDatabase, getCurrentDatabase, getExtensions } from '../stores';
 import getElectron from '../utility/getElectron';
 import registerCommand from './registerCommand';
 import { apiCall } from '../utility/api';
 import { getDatabasStatusMenu, switchCurrentDatabase } from '../utility/common';
 import { __t } from '../translations';
+import { findEngineDriver } from 'dbgate-tools';
 
 registerCommand({
   id: 'database.changeState',
@@ -18,7 +19,8 @@ registerCommand({
       conid: connection._id,
       database: name,
     };
+    const driver = findEngineDriver(connection, getExtensions());
 
-    return getDatabasStatusMenu(dbid);
+    return getDatabasStatusMenu(dbid, driver);
   },
 });

packages/web/src/commands/stdCommands.ts

@@ -40,8 +40,6 @@ import { getSettings } from '../utility/metadataLoaders';
 import { isMac, switchCurrentDatabase } from '../utility/common';
 import { doLogout } from '../clientAuth';
 import { disconnectServerConnection } from '../appobj/ConnectionAppObject.svelte';
-import UploadErrorModal from '../modals/UploadErrorModal.svelte';
-import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
 import NewCollectionModal from '../modals/NewCollectionModal.svelte';
 import ConfirmModal from '../modals/ConfirmModal.svelte';
 import localforage from 'localforage';
@@ -73,7 +71,8 @@ registerCommand({
   category: __t('command.theme', { defaultMessage: 'Theme' }),
   name: __t('command.theme.change', { defaultMessage: 'Change' }),
   toolbarName: __t('command.theme.changeToolbar', { defaultMessage: 'Change theme' }),
-  onClick: () => openNewTab({
+  onClick: () =>
+    openNewTab({
       title: 'Settings',
       icon: 'icon settings',
       tabComponent: 'SettingsTab',
@@ -704,7 +703,7 @@ registerCommand({
   name: __t('command.database.export', { defaultMessage: 'Export database' }),
   toolbar: true,
   icon: 'icon export',
-  testEnabled: () => getCurrentDatabase() != null && hasPermission(`dbops/export`) && isProApp(),
+  testEnabled: () => getCurrentDatabase() != null && hasPermission(`dbops/export`),
   onClick: () => {
     openImportExportTab({
       targetStorageType: getDefaultFileFormat(getExtensions()).storageType,
@@ -1230,8 +1229,7 @@ registerCommand({
   },
 });
 
-if ( hasPermission('application-log'))
-{
+if (hasPermission('application-log')) {
   registerCommand({
     id: 'app.showLogs',
     category: __t('command.application', { defaultMessage: 'Application' }),
@@ -1246,8 +1244,7 @@ if ( hasPermission('application-log'))
   });
 }
 
-if (hasPermission('widgets/plugins'))
-{
+if (hasPermission('widgets/plugins')) {
   registerCommand({
     id: 'app.managePlugins',
     category: __t('command.application', { defaultMessage: 'Application' }),

packages/web/src/datagrid/CellValue.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import _ from 'lodash';
-  import { getBoolSettingsValue } from '../settings/settingsTools';
+  import { getStringSettingsValue } from '../settings/settingsTools';
   import { stringifyCellValue } from 'dbgate-tools';
 
   export let rowData;
@@ -13,7 +13,7 @@
     value,
     'gridCellIntent',
     editorTypes,
-    { useThousandsSeparator: getBoolSettingsValue('dataGrid.thousandsSeparator', false) },
+    { thousandsSeparator: getStringSettingsValue('dataGrid.thousandsSeparatorChar', 'none') },
     jsonParsedValue
   );
 

packages/web/src/datagrid/ColumnHeaderControl.svelte

@@ -137,7 +137,7 @@
       {/if}
     </span>
   {/if}
-  <DropDownButton menu={getMenu} narrow />
+  <DropDownButton menu={getMenu} narrow data-testid={`ColumnHeaderControl_dropdown_${column?.uniqueName}`} />
   <div class="horizontal-split-handle resizeHandleControl" use:splitterDrag={'clientX'} on:resizeSplitter />
 </div>
 

packages/web/src/datagrid/DataFilterControl.svelte

@@ -25,6 +25,7 @@
   export let setFilter;
   export let showResizeSplitter = false;
   export let onFocusGrid = null;
+  export let onFocusGridHeader = null;
   export let onGetReference = null;
   export let foreignKey = null;
   export let conid = null;
@@ -204,6 +205,11 @@
       // ev.stopPropagation();
       ev.preventDefault();
     }
+    if (ev.keyCode == keycodes.upArrow) {
+      if (onFocusGridHeader) onFocusGridHeader();
+      // ev.stopPropagation();
+      ev.preventDefault();
+    }
     // if (ev.keyCode == KeyCodes.DownArrow || ev.keyCode == KeyCodes.UpArrow) {
     //     if (this.props.onControlKey) this.props.onControlKey(ev.keyCode);
     // }

packages/web/src/datagrid/DataGrid.svelte

@@ -24,7 +24,7 @@
   registerCommand({
     id: 'dataGrid.switchToTable',
     category: __t('command.datagrid', { defaultMessage: 'Data grid' }),
-    name: __t('command.datagrid.witchToTable', { defaultMessage: 'Switch to table'}),
+    name: __t('command.datagrid.witchToTable', { defaultMessage: 'Switch to table' }),
     icon: 'icon table',
     keyText: 'F4',
     testEnabled: () => getCurrentEditor()?.switchViewEnabled('table'),
@@ -40,6 +40,17 @@
     onClick: () => getCurrentEditor().toggleLeftPanel(),
   });
 
+  registerCommand({
+    id: 'dataGrid.toggleCellDataView',
+    category: __t('command.datagrid', { defaultMessage: 'Data grid' }),
+    name: __t('command.datagrid.toggleCellDataView', { defaultMessage: 'Toggle cell data view' }),
+    toolbarName: __t('command.datagrid.toggleCellDataView.toolbar', { defaultMessage: 'Cell Data' }),
+    menuName: __t('command.datagrid.toggleCellDataView.menu', { defaultMessage: 'Show cell data' }),
+    icon: 'icon cell-data',
+    testEnabled: () => !!getCurrentEditor(),
+    onClick: () => getCurrentEditor().toggleCellDataView(),
+  });
+
   function extractMacroValuesForMacro(macroValues, macro) {
     // return {};
     if (!macro) return {};
@@ -70,6 +81,7 @@
   import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
   import { __t, _t } from '../translations';
   import { isProApp } from '../utility/proTools';
+  import CellDataWidget from '../widgets/CellDataWidget.svelte';
 
   export let config;
   export let setConfig;
@@ -91,6 +103,7 @@
   export let hasMultiColumnFilter = false;
   export let setLoadedRows = null;
   export let hideGridLeftColumn = false;
+  export let cellDataViewVisible = false;
 
   export let onPublishedCellsChanged;
 
@@ -107,6 +120,7 @@
   setContext('macroValues', macroValues);
 
   let managerSize;
+  let cellViewWidth;
   const collapsedLeftColumnStore =
     getContext('collapsedLeftColumnStore') || writable(getLocalStorage('dataGrid_collapsedLeftColumn', false));
 
@@ -149,6 +163,10 @@
     collapsedLeftColumnStore.update(x => !x);
   }
 
+  export function toggleCellDataView() {
+    cellDataViewVisible = !cellDataViewVisible;
+  }
+
   registerMenu(
     { command: 'dataGrid.switchToForm', tag: 'switch', hideDisabled: true },
     { command: 'dataGrid.switchToTable', tag: 'switch', hideDisabled: true },
@@ -157,6 +175,7 @@
   );
 
   $: if (managerSize) setLocalStorage('dataGridManagerWidth', managerSize);
+  $: if (cellViewWidth) setLocalStorage('dataGridCellViewWidth', cellViewWidth);
 
   function getInitialManagerSize() {
     const width = getLocalStorage('dataGridManagerWidth');
@@ -165,6 +184,14 @@
     }
     return '300px';
   }
+
+  function getInitialCellViewWidth() {
+    const width = getLocalStorage('dataGridCellViewWidth');
+    if (_.isNumber(width) && width > 30 && width < 500) {
+      return width;
+    }
+    return 300;
+  }
 </script>
 
 <HorizontalSplitter
@@ -219,6 +246,7 @@
         skip={!(showMacros && isProApp())}
         collapsed={!expandMacros}
         data-testid="DataGrid_itemMacros"
+        height="20%"
       >
         <MacroManager {...$$props} {managerSize} />
       </WidgetColumnBarItem>
@@ -227,30 +255,49 @@
   <svelte:fragment slot="2">
     <VerticalSplitter initialValue="70%" isSplitter={!!$selectedMacro && !isFormView && showMacros}>
       <svelte:fragment slot="1">
-        {#if isFormView}
-          <svelte:component this={formViewComponent} {...$$props} />
-        {:else if isJsonView}
-          <svelte:component this={jsonViewComponent} {...$$props} {setLoadedRows} />
-        {:else}
-          <svelte:component
-            this={gridCoreComponent}
-            {...$$props}
-            {collapsedLeftColumnStore}
-            formViewAvailable={!!formViewComponent}
-            macroValues={extractMacroValuesForMacro($macroValues, $selectedMacro)}
-            macroPreview={$selectedMacro}
-            {setLoadedRows}
-            onPublishedCellsChanged={value => {
-              publishedCells = value;
-              if (onPublishedCellsChanged) {
-                onPublishedCellsChanged(value);
-              }
-            }}
-            onChangeSelectedColumns={cols => {
-              if (domColumnManager) domColumnManager.setSelectedColumns(cols);
-            }}
-          />
-        {/if}
+        <HorizontalSplitter
+          initialSizeRight={getInitialCellViewWidth()}
+          onChangeSize={value => (cellViewWidth = value)}
+          isSplitter={cellDataViewVisible && !isFormView}
+        >
+          <svelte:fragment slot="1">
+            {#if isFormView}
+              <svelte:component this={formViewComponent} {...$$props} />
+            {:else if isJsonView}
+              <svelte:component this={jsonViewComponent} {...$$props} {setLoadedRows} />
+            {:else}
+              <svelte:component
+                this={gridCoreComponent}
+                {...$$props}
+                {collapsedLeftColumnStore}
+                formViewAvailable={!!formViewComponent}
+                macroValues={extractMacroValuesForMacro($macroValues, $selectedMacro)}
+                macroPreview={$selectedMacro}
+                {setLoadedRows}
+                onPublishedCellsChanged={value => {
+                  publishedCells = value;
+                  if (onPublishedCellsChanged) {
+                    onPublishedCellsChanged(value);
+                  }
+                  if (value[0]?.isSelectedFullRow && !isFormView) {
+                    cellDataViewVisible = true;
+                  }
+                }}
+                onChangeSelectedColumns={cols => {
+                  if (domColumnManager) domColumnManager.setSelectedColumns(cols);
+                }}
+              />
+            {/if}
+          </svelte:fragment>
+          <svelte:fragment slot="2">
+            <CellDataWidget
+              onClose={() => {
+                cellDataViewVisible = false;
+              }}
+              selection={publishedCells}
+            />
+          </svelte:fragment>
+        </HorizontalSplitter>
       </svelte:fragment>
 
       <svelte:fragment slot="2">

packages/web/src/datagrid/DataGridCell.svelte

@@ -57,7 +57,11 @@
   $: style = computeStyle(maxWidth, col);
 
   $: isJson =
-    _.isPlainObject(value) && !(value?.type == 'Buffer' && _.isArray(value.data)) && !value.$oid && !value.$bigint;
+    _.isPlainObject(value) &&
+    !(value?.type == 'Buffer' && _.isArray(value.data)) &&
+    !value.$oid &&
+    !value.$bigint &&
+    !value.$decimal;
 
   // don't parse JSON for explicit data types
   $: jsonParsedValue = !editorTypes?.explicitDataType && isJsonLikeLongString(value) ? safeJsonParse(value) : null;
@@ -80,7 +84,7 @@
   class:isFocusedColumn
   class:hasOverlayValue
   class:isMissingOverlayField
-  class:alignRight={ (_.isNumber(value) || isTypeNumber(col.dataType)) && !showHint}
+  class:alignRight={(_.isNumber(value) || isTypeNumber(col.dataType)) && !showHint && !isModifiedCell}
   {style}
 >
   {#if hasOverlayValue}

packages/web/src/datagrid/DataGridCore.svelte

@@ -217,7 +217,7 @@
   registerCommand({
     id: 'dataGrid.filterSelected',
     category: __t('command.datagrid', { defaultMessage: 'Data grid' }),
-    name: __t('command.datagrid.filterSelected', { defaultMessage : 'Filter selected value'}),
+    name: __t('command.datagrid.filterSelected', { defaultMessage: 'Filter selected value' }),
     keyText: 'CtrlOrCommand+Shift+F',
     testEnabled: () => getCurrentDataGrid()?.getDisplay().filterable,
     onClick: () => getCurrentDataGrid().filterSelectedValue(),
@@ -225,7 +225,7 @@
   registerCommand({
     id: 'dataGrid.findColumn',
     category: __t('command.datagrid', { defaultMessage: 'Data grid' }),
-    name: __t('command.datagrid.findColumn', { defaultMessage: 'Find column'}),
+    name: __t('command.datagrid.findColumn', { defaultMessage: 'Find column' }),
     keyText: 'CtrlOrCommand+F',
     testEnabled: () => getCurrentDataGrid() != null,
     getSubCommands: () => getCurrentDataGrid().buildFindMenu(),
@@ -241,7 +241,7 @@
   registerCommand({
     id: 'dataGrid.clearFilter',
     category: __t('command.datagrid', { defaultMessage: 'Data grid' }),
-    name: __t('command.datagrid.clearFilter', { defaultMessage : 'Clear filter'}),
+    name: __t('command.datagrid.clearFilter', { defaultMessage: 'Clear filter' }),
     keyText: 'CtrlOrCommand+Shift+E',
     testEnabled: () => getCurrentDataGrid()?.clearFilterEnabled(),
     onClick: () => getCurrentDataGrid().clearFilter(),
@@ -249,7 +249,7 @@
   registerCommand({
     id: 'dataGrid.generateSqlFromData',
     category: __t('command.datagrid', { defaultMessage: 'Data grid' }),
-    name: __t('command.datagrid.generateSql', { defaultMessage: 'Generate SQL'}),
+    name: __t('command.datagrid.generateSql', { defaultMessage: 'Generate SQL' }),
     keyText: 'CtrlOrCommand+G',
     testEnabled: () => getCurrentDataGrid()?.generateSqlFromDataEnabled(),
     onClick: () => getCurrentDataGrid().generateSqlFromData(),
@@ -257,14 +257,14 @@
   registerCommand({
     id: 'dataGrid.openFreeTable',
     category: __t('command.datagrid', { defaultMessage: 'Data grid' }),
-    name: __t('command.datagrid.editSelection', { defaultMessage: 'Edit selection as table'}),
+    name: __t('command.datagrid.editSelection', { defaultMessage: 'Edit selection as table' }),
     testEnabled: () => getCurrentDataGrid() != null,
     onClick: () => getCurrentDataGrid().openFreeTable(),
   });
   registerCommand({
     id: 'dataGrid.newJson',
     category: __t('command.datagrid', { defaultMessage: 'Data grid' }),
-    name: __t('command.datagrid.addJsonDocument', { defaultMessage: 'Add JSON document'}),
+    name: __t('command.datagrid.addJsonDocument', { defaultMessage: 'Add JSON document' }),
     testEnabled: () => getCurrentDataGrid()?.addJsonDocumentEnabled(),
     onClick: () => getCurrentDataGrid().addJsonDocument(),
   });
@@ -354,7 +354,7 @@
 </script>
 
 <script lang="ts">
-  import { GridDisplay } from 'dbgate-datalib';
+  import { GridDisplay, MacroDefinition } from 'dbgate-datalib';
   import {
     driverBase,
     parseCellValue,
@@ -364,6 +364,7 @@
     base64ToHex,
   } from 'dbgate-tools';
   import { getContext, onDestroy } from 'svelte';
+  import { type Writable } from 'svelte/store';
   import _, { map } from 'lodash';
   import registerCommand from '../commands/registerCommand';
   import ColumnHeaderControl from './ColumnHeaderControl.svelte';
@@ -380,7 +381,17 @@
     filterCellsForRow,
   } from './gridutil';
   import HorizontalScrollBar from './HorizontalScrollBar.svelte';
-  import { cellFromEvent, emptyCellArray, getCellRange, isRegularCell, nullCell, topLeftCell } from './selection';
+  import {
+    cellFromEvent,
+    emptyCellArray,
+    getCellRange,
+    isColumnHeaderCell,
+    isRegularCell,
+    isRowHeaderCell,
+    isTableHeaderCell,
+    nullCell,
+    topLeftCell,
+  } from './selection';
   import VerticalScrollBar from './VerticalScrollBar.svelte';
   import LoadingInfo from '../elements/LoadingInfo.svelte';
   import InlineButton from '../buttons/InlineButton.svelte';
@@ -388,7 +399,7 @@
   import DataFilterControl from './DataFilterControl.svelte';
   import createReducer from '../utility/createReducer';
   import keycodes from '../utility/keycodes';
-  import { copyRowsFormat, currentArchive, selectedCellsCallback } from '../stores';
+  import { copyRowsFormat, currentArchive } from '../stores';
   import {
     copyRowsFormatDefs,
     copyRowsToClipboard,
@@ -426,6 +437,7 @@
   import { isProApp } from '../utility/proTools';
   import SaveArchiveModal from '../modals/SaveArchiveModal.svelte';
   import hasPermission from '../utility/hasPermission';
+  import macros from '../macro/macros';
 
   export let onLoadNextData = undefined;
   export let grider = undefined;
@@ -465,6 +477,7 @@
   export let overlayDefinition = null;
   export let onGetSelectionMenu = null;
   export let onOpenChart = null;
+  export let macroCondition = null;
 
   export const activator = createActivator('DataGridCore', false);
 
@@ -496,6 +509,7 @@
   let selectionMenu = null;
 
   const tabid = getContext('tabid');
+  const selectedMacro = getContext('selectedMacro') as Writable<MacroDefinition>;
 
   let unsubscribeDbRefresh;
 
@@ -759,7 +773,7 @@
 
   export function saveCellToFileEnabled() {
     const value = getSelectedExportableCell();
-    return _.isString(value) || (value?.type == 'Buffer' && _.isArray(value?.data)) || (value?.$binary?.base64);
+    return _.isString(value) || (value?.type == 'Buffer' && _.isArray(value?.data)) || value?.$binary?.base64;
   }
 
   export async function saveCellToFile() {
@@ -898,7 +912,7 @@
       await tick();
       const invMap = _.invert(realColumnUniqueNames);
       const colIndex = invMap[uniquePath.join('.')];
-      scrollIntoView([null, colIndex]);
+      scrollIntoView([null, parseInt(colIndex)]);
 
       currentCell = [currentCell[0], parseInt(colIndex)];
       selectedCells = [currentCell];
@@ -1154,7 +1168,7 @@
         const invMap = _.invert(realColumnUniqueNames);
         const colIndex = invMap[display.focusedColumns[0]];
         if (colIndex) {
-          scrollIntoView([null, colIndex]);
+          scrollIntoView([null, parseInt(colIndex)]);
         }
       }
     });
@@ -1203,7 +1217,6 @@
         if (rowIndexes.every(x => grider.getRowData(x))) {
           lastPublishledSelectedCellsRef.set(stringified);
           changeSetValueRef.set($changeSetStore?.value);
-          $selectedCellsCallback = () => getCellsPublished(selectedCells);
 
           if (onChangeSelectedColumns) {
             onChangeSelectedColumns(getSelectedColumns().map(x => x.columnName));
@@ -1244,30 +1257,59 @@
 
   function getCellsPublished(cells) {
     const regular = cellsToRegularCells(cells);
+
+    const commonInfo = {
+      engine: display?.driver,
+      editable: grider.editable,
+      editorTypes: display?.driver?.dataEditorTypesBehaviour,
+      displayColumns: columns,
+      realColumnUniqueNames,
+      grider,
+    };
+
+    const rowIndexes = _.sortBy(_.uniq(regular.map(x => x[0])));
+    const fullRowIndexes = new Set(cells.filter(x => x[1] == 'header').map(x => x[0]));
+    const rowInfos = rowIndexes.map(row => {
+      const rowData = grider.getRowData(row);
+
+      return {
+        row,
+        rowData,
+        condition: display?.getChangeSetCondition(rowData),
+        insertedRowIndex: grider?.getInsertedRowIndex(row),
+        rowStatus: grider.getRowStatus(row),
+        isSelectedFullRow: fullRowIndexes.has(row),
+      };
+    });
+
+    const rowInfoByIndex = _.zipObject(
+      rowIndexes.map(x => x.toString()),
+      rowInfos
+    );
+
     const res = regular
       .map(cell => {
         const row = cell[0];
-        const rowData = grider.getRowData(row);
         const column = realColumnUniqueNames[cell[1]];
+        const rowData = rowInfoByIndex[row].rowData;
+
         return {
-          row,
-          rowData,
+          ...commonInfo,
+          ...rowInfoByIndex[row],
           column,
           value: rowData && rowData[column],
-          engine: display?.driver,
-          condition: display?.getChangeSetCondition(rowData),
-          insertedRowIndex: grider?.getInsertedRowIndex(row),
-          rowStatus: grider.getRowStatus(row),
+          onSetValue: value => grider.setCellValue(row, column, value),
         };
       })
       .filter(x => x.column);
+
     return res;
   }
 
   function scrollIntoView(cell) {
     const [row, col] = cell;
 
-    if (row != null) {
+    if (_.isNumber(row)) {
       let newRow = null;
       const rowCount = grider.rowCount;
       if (rowCount == 0) return;
@@ -1285,7 +1327,7 @@
       }
     }
 
-    if (col != null) {
+    if (_.isNumber(col)) {
       if (col >= columnSizes.frozenCount) {
         let newColumn = columnSizes.scrollInView(
           firstVisibleColumnScrollIndex,
@@ -1515,7 +1557,11 @@
     }
 
     if (event.shiftKey) {
-      if (!isRegularCell(shiftDragStartCell)) {
+      if (
+        !isRegularCell(shiftDragStartCell) &&
+        !isColumnHeaderCell(shiftDragStartCell) &&
+        !isRowHeaderCell(shiftDragStartCell)
+      ) {
         shiftDragStartCell = currentCell;
       }
     } else {
@@ -1543,7 +1589,13 @@
   }
 
   function handleCursorMove(event) {
-    if (!isRegularCell(currentCell)) return null;
+    if (
+      !isRegularCell(currentCell) &&
+      !isColumnHeaderCell(currentCell) &&
+      !isRowHeaderCell(currentCell) &&
+      !isTableHeaderCell(currentCell)
+    )
+      return null;
     let rowCount = grider.rowCount;
     if (isCtrlOrCommandKey(event)) {
       switch (event.keyCode) {
@@ -1570,24 +1622,36 @@
       switch (event.keyCode) {
         case keycodes.upArrow:
           if (currentCell[0] == 0) return focusFilterEditor(currentCell[1]);
-          return moveCurrentCell(currentCell[0] - 1, currentCell[1], event);
+          return _.isNumber(currentCell[0]) ? moveCurrentCell(currentCell[0] - 1, currentCell[1], event) : null;
         case keycodes.downArrow:
-          return moveCurrentCell(currentCell[0] + 1, currentCell[1], event);
+          if (currentCell[0] == 'header') return focusFilterEditor(currentCell[1]);
+          return _.isNumber(currentCell[0]) ? moveCurrentCell(currentCell[0] + 1, currentCell[1], event) : null;
         case keycodes.enter:
-          if (!grider.editable) return moveCurrentCell(currentCell[0] + 1, currentCell[1], event);
+          if (!grider.editable)
+            return _.isNumber(currentCell[0]) ? moveCurrentCell(currentCell[0] + 1, currentCell[1], event) : null;
           break;
         case keycodes.leftArrow:
-          return moveCurrentCell(currentCell[0], currentCell[1] - 1, event);
+          return _.isNumber(currentCell[1])
+            ? moveCurrentCell(currentCell[0], currentCell[1] == 0 ? 'header' : currentCell[1] - 1, event)
+            : null;
         case keycodes.rightArrow:
-          return moveCurrentCell(currentCell[0], currentCell[1] + 1, event);
+          return currentCell[1] == 'header'
+            ? moveCurrentCell(currentCell[0], 0, event)
+            : _.isNumber(currentCell[1])
+              ? moveCurrentCell(currentCell[0], currentCell[1] + 1, event)
+              : null;
         case keycodes.home:
           return moveCurrentCell(currentCell[0], 0, event);
         case keycodes.end:
           return moveCurrentCell(currentCell[0], columnSizes.realCount - 1, event);
         case keycodes.pageUp:
-          return moveCurrentCell(currentCell[0] - visibleRowCountLowerBound, currentCell[1], event);
+          return _.isNumber(currentCell[0])
+            ? moveCurrentCell(currentCell[0] - visibleRowCountLowerBound, currentCell[1], event)
+            : null;
         case keycodes.pageDown:
-          return moveCurrentCell(currentCell[0] + visibleRowCountLowerBound, currentCell[1], event);
+          return _.isNumber(currentCell[0])
+            ? moveCurrentCell(currentCell[0] + visibleRowCountLowerBound, currentCell[1], event)
+            : null;
         case keycodes.tab: {
           return moveCurrentCellWithTabKey(event.shiftKey);
         }
@@ -1621,10 +1685,14 @@
   function moveCurrentCell(row, col, event = null) {
     const rowCount = grider.rowCount;
 
-    if (row < 0) row = 0;
-    if (row >= rowCount) row = rowCount - 1;
-    if (col < 0) col = 0;
-    if (col >= columnSizes.realCount) col = columnSizes.realCount - 1;
+    if (_.isNumber(row)) {
+      if (row < 0) row = 0;
+      if (row >= rowCount) row = rowCount - 1;
+    }
+    if (_.isNumber(col)) {
+      if (col < 0) col = 0;
+      if (col >= columnSizes.realCount) col = columnSizes.realCount - 1;
+    }
     currentCell = [row, col];
     // setSelectedCells([...(event.ctrlKey ? selectedCells : []), [row, col]]);
     selectedCells = [[row, col]];
@@ -1744,6 +1812,17 @@
     if (domFocusField) domFocusField.focus();
   };
 
+  const selectColumnHeaderCell = uniquePath => {
+    const modelIndex = columns.findIndex(x => x.uniquePath == uniquePath);
+    const realIndex = columnSizes.modelToReal(modelIndex);
+    let cell = ['header', realIndex];
+    // @ts-ignore
+    currentCell = cell;
+    // @ts-ignore
+    selectedCells = [cell];
+    if (domFocusField) domFocusField.focus();
+  };
+
   const [inplaceEditorState, dispatchInsplaceEditor] = createReducer((state, action) => {
     switch (action.type) {
       case 'show':
@@ -1796,7 +1875,7 @@
     { command: 'dataGrid.refresh' },
     { placeTag: 'copy' },
     {
-      text: _t('datagrid.copyAdvanced', { defaultMessage: 'Copy advanced'}),
+      text: _t('datagrid.copyAdvanced', { defaultMessage: 'Copy advanced' }),
       submenu: [
         _.keys(copyRowsFormatDefs).map(format => ({
           text: _tval(copyRowsFormatDefs[format].label),
@@ -1804,7 +1883,7 @@
         })),
         { divider: true },
         _.keys(copyRowsFormatDefs).map(format => ({
-          text: _t('datagrid.setFormat', { defaultMessage: 'Set format: ' }) + (_tval(copyRowsFormatDefs[format].name)),
+          text: _t('datagrid.setFormat', { defaultMessage: 'Set format: ' }) + _tval(copyRowsFormatDefs[format].name),
           onClick: () => ($copyRowsFormat = format),
         })),
 
@@ -1841,6 +1920,18 @@
     { command: 'dataGrid.openJsonArrayInSheet', hideDisabled: true },
     { command: 'dataGrid.saveCellToFile', hideDisabled: true },
     { command: 'dataGrid.loadCellFromFile', hideDisabled: true },
+    { command: 'dataGrid.toggleCellDataView', hideDisabled: true },
+    isProApp() && {
+      text: _t('datagrid.useMacro', { defaultMessage: 'Use macro' }),
+      submenu: macros
+        .filter(macro => !macroCondition || macroCondition(macro))
+        .map(macro => ({
+          text: _tval(macro.title),
+          onClick: () => {
+            selectedMacro.set(macro);
+          },
+        })),
+    },
     // { command: 'dataGrid.copyJsonDocument', hideDisabled: true },
     { divider: true },
     { placeTag: 'export' },
@@ -1992,6 +2083,7 @@
               data-row="header"
               data-col={col.colIndex}
               style={`width:${col.width}px; min-width:${col.width}px; max-width:${col.width}px`}
+              class:active-header-cell={currentCell && currentCell[0] == 'header' && currentCell[1] == col.colIndex}
             >
               <ColumnHeaderControl
                 column={col}
@@ -2066,6 +2158,9 @@
                   onFocusGrid={() => {
                     selectTopmostCell(col.uniqueName);
                   }}
+                  onFocusGridHeader={() => {
+                    selectColumnHeaderCell(col.uniqueName);
+                  }}
                   dataType={col.dataType}
                   filterDisabled={display.isFilterDisabled(col.uniqueName)}
                 />
@@ -2192,6 +2287,9 @@
     background-color: var(--theme-bg-1);
     overflow: hidden;
   }
+  :global(.data-grid-focused) .active-header-cell {
+    background-color: var(--theme-bg-selected);
+  }
   .filter-cell {
     text-align: left;
     overflow: hidden;

packages/web/src/datagrid/DataGridRow.svelte

@@ -76,6 +76,7 @@
     onShowForm={onSetFormView && !overlayDefinition ? () => onSetFormView(rowData, null) : null}
     extraIcon={overlayDefinition ? OVERLAY_STATUS_ICONS[rowStatus.status] : null}
     extraIconTooltip={overlayDefinition ? OVERLAY_STATUS_TOOLTIPS[rowStatus.status] : null}
+    isSelected={frameSelection ? false : !!selectedCells?.find(cell => cell[0] == rowIndex && cell[1] == 'header')}
   />
   {#each visibleRealColumns as col (col.uniqueName)}
     {#if inplaceEditorState.cell && rowIndex == inplaceEditorState.cell[0] && col.colIndex == inplaceEditorState.cell[1]}

packages/web/src/datagrid/RowHeaderCell.svelte

@@ -7,6 +7,7 @@
 
   export let extraIcon = null;
   export let extraIconTooltip = null;
+  export let isSelected = false;
 
   let mouseIn = false;
 </script>
@@ -14,6 +15,7 @@
 <td
   data-row={rowIndex}
   data-col="header"
+  class:selected={isSelected}
   on:mouseenter={() => (mouseIn = true)}
   on:mouseleave={() => (mouseIn = false)}
 >
@@ -43,4 +45,7 @@
     right: 0px;
     top: 1px;
   }
+  :global(.data-grid-focused) td.selected {
+    background-color: var(--theme-bg-selected);
+  }
 </style>

packages/web/src/datagrid/gridutil.ts

@@ -73,6 +73,7 @@ export function countColumnSizes(grider: Grider, columns, containerWidth, displa
       if (_.isArray(value)) text = `[${value.length} items]`;
       else if (value?.$oid) text = `ObjectId("${value.$oid}")`;
       else if (value?.$bigint) text = value.$bigint;
+      else if (value?.$decimal) text = value.$decimal;
       else if (isJsonLikeLongString(value) && safeJsonParse(value)) text = '(JSON)';
       const width = context.measureText(typeof text == 'string' ? text.slice(0, MAX_GRID_TEXT_LENGTH) : text).width + 8;
       // console.log('colName', colName, text, width);

packages/web/src/datagrid/selection.ts

@@ -13,6 +13,24 @@ export function isRegularCell(cell: CellAddress): cell is RegularCellAddress {
   return _.isNumber(row) && _.isNumber(col);
 }
 
+export function isRowHeaderCell(cell: CellAddress): boolean {
+  if (!cell) return false;
+  const [row, col] = cell;
+  return col === 'header' && _.isNumber(row);
+}
+
+export function isColumnHeaderCell(cell: CellAddress): boolean {
+  if (!cell) return false;
+  const [row, col] = cell;
+  return row === 'header' && _.isNumber(col);
+}
+
+export function isTableHeaderCell(cell: CellAddress): boolean {
+  if (!cell) return false;
+  const [row, col] = cell;
+  return row === 'header' && col === 'header';
+}
+
 function normalizeHeaderForSelection(addr: CellAddress): CellAddress {
   if (addr[0] == 'filter') return ['header', addr[1]];
   return addr;

packages/web/src/elements/SelectionMapView.svelte

@@ -1,4 +1,44 @@
 <script lang="ts" context="module">
+  const LAT_PRIORITY_PATTERNS = [
+    /^lat$/i,
+    /^latitude$/i,
+    /latitude$/i,
+    /lat$/i,
+    /latitude/i,
+    /lat/i,
+  ];
+
+  const LON_PRIORITY_PATTERNS = [
+    /^lon$/i,
+    /^lng$/i,
+    /^longitude$/i,
+    /longitude$/i,
+    /lon$/i,
+    /lng$/i,
+    /longitude/i,
+    /lon|lng/i,
+  ];
+
+  function getFieldName(fieldPath) {
+    return fieldPath.split('.').pop() || fieldPath;
+  }
+
+  function getFieldPriority(fieldPath, patterns) {
+    const name = getFieldName(fieldPath);
+    for (let i = 0; i < patterns.length; i++) {
+      if (patterns[i].test(name)) return i;
+    }
+    return patterns.length;
+  }
+
+  function sortByPriorityThenLength(paths, patterns) {
+    return paths.sort((a, b) => {
+      const priorityDiff = getFieldPriority(a, patterns) - getFieldPriority(b, patterns);
+      if (priorityDiff !== 0) return priorityDiff;
+      return getFieldName(a).length - getFieldName(b).length;
+    });
+  }
+
   function findLatLonPaths(obj, attrTest, res = [], prefix = '') {
     for (const key of Object.keys(obj)) {
       if (attrTest(key, obj[key])) {
@@ -10,11 +50,15 @@
     }
     return res;
   }
+
   export function findLatPaths(obj) {
-    return findLatLonPaths(obj, x => x.toLowerCase()?.includes('lat'));
+    const paths = findLatLonPaths(obj, x => x.toLowerCase()?.includes('lat'));
+    return sortByPriorityThenLength(paths, LAT_PRIORITY_PATTERNS);
   }
+
   export function findLonPaths(obj) {
-    return findLatLonPaths(obj, x => x.toLowerCase()?.includes('lon') || x.toLowerCase()?.includes('lng'));
+    const paths = findLatLonPaths(obj, x => x.toLowerCase()?.includes('lon') || x.toLowerCase()?.includes('lng'));
+    return sortByPriorityThenLength(paths, LON_PRIORITY_PATTERNS);
   }
   export function findAllObjectPaths(obj) {
     return findLatLonPaths(obj, (_k, v) => v != null && !_.isNaN(Number(v)));

packages/web/src/elements/SettingsMenuControl.svelte

@@ -137,6 +137,7 @@
     position: relative;
     overflow: hidden;
     height: 100%;
+    background-color: var(--theme-bg-0);
   }
 
   .scrollableContentContainer {

packages/web/src/forms/FormArgument.svelte

@@ -7,9 +7,11 @@
   import FormStringList from './FormStringList.svelte';
   import FormDropDownTextField from './FormDropDownTextField.svelte';
   import { getFormContext } from './FormProviderCore.svelte';
+  import { _tval } from '../translations';
 
   export let arg;
   export let namePrefix;
+  export let isReadOnly = false;
 
   $: name = `${namePrefix}${arg.name}`;
 
@@ -18,46 +20,52 @@
 
 {#if arg.type == 'text'}
   <FormTextField
-    label={arg.label}
+    label={_tval(arg.label)}
     {name}
     defaultValue={arg.default}
     focused={arg.focused}
     placeholder={arg.placeholder}
-    disabled={arg.disabledFn ? arg.disabledFn($values) : arg.disabled}
+    disabled={isReadOnly || (arg.disabledFn ? arg.disabledFn($values) : arg.disabled)}
   />
 {:else if arg.type == 'stringlist'}
-  <FormStringList label={arg.label} addButtonLabel={arg.addButtonLabel} {name} placeholder={arg.placeholder} />
+  <FormStringList
+    label={_tval(arg.label)}
+    addButtonLabel={_tval(arg.addButtonLabel)}
+    {name}
+    placeholder={arg.placeholder}
+    isReadOnly={isReadOnly || (arg.disabledFn ? arg.disabledFn($values) : arg.disabled)}
+  />
 {:else if arg.type == 'number'}
   <FormTextField
-    label={arg.label}
+    label={_tval(arg.label)}
     type="number"
     {name}
     defaultValue={arg.default}
     focused={arg.focused}
     placeholder={arg.placeholder}
-    disabled={arg.disabledFn ? arg.disabledFn($values) : arg.disabled}
+    disabled={isReadOnly || (arg.disabledFn ? arg.disabledFn($values) : arg.disabled)}
   />
 {:else if arg.type == 'checkbox'}
   <FormCheckboxField
-    label={arg.label}
+    label={_tval(arg.label)}
     {name}
     defaultValue={arg.default}
-    disabled={arg.disabledFn ? arg.disabledFn($values) : arg.disabled}
+    disabled={isReadOnly || (arg.disabledFn ? arg.disabledFn($values) : arg.disabled)}
   />
 {:else if arg.type == 'select'}
   <FormSelectField
-    label={arg.label}
+    label={_tval(arg.label)}
     isNative
     {name}
     defaultValue={arg.default}
     options={arg.options.map(opt =>
       _.isString(opt) ? { label: opt, value: opt } : { label: opt.name, value: opt.value }
     )}
-    disabled={arg.disabledFn ? arg.disabledFn($values) : arg.disabled}
+    disabled={isReadOnly || (arg.disabledFn ? arg.disabledFn($values) : arg.disabled)}
   />
 {:else if arg.type == 'dropdowntext'}
   <FormDropDownTextField
-    label={arg.label}
+    label={_tval(arg.label)}
     {name}
     defaultValue={arg.default}
     menu={() => {
@@ -66,6 +74,6 @@
         onClick: () => setFieldValue(name, _.isString(opt) ? opt : opt.value),
       }));
     }}
-    disabled={arg.disabledFn ? arg.disabledFn($values) : arg.disabled}
+    disabled={isReadOnly || (arg.disabledFn ? arg.disabledFn($values) : arg.disabled)}
   />
 {/if}

packages/web/src/forms/FormArgumentList.svelte

@@ -3,10 +3,11 @@
 
   export let namePrefix = '';
   export let args: any[];
+  export let isReadOnly = false;
 </script>
 
 <div>
   {#each args as arg (arg.name)}
-    <FormArgument {arg} {namePrefix} />
+    <FormArgument {arg} {namePrefix} {isReadOnly} />
   {/each}
 </div>

packages/web/src/forms/FormFieldTemplateLarge.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+  import FontIcon from "../icons/FontIcon.svelte";
+
   export let type;
   export let label;
   export let noMargin = false;
   export let disabled = false;
   export let labelProps: any = {};
+  export let labelIcon = null;
 </script>
 
 <div class="largeFormMarker" class:noMargin>
@@ -12,6 +15,9 @@
     <span {...labelProps} on:click={labelProps.onClick} class:disabled class='checkLabel'>{label}</span>
   {:else}
     <div class="label" {...labelProps} on:click={labelProps.onClick}>
+      {#if labelIcon}
+        <FontIcon icon={labelIcon} padRight />
+      {/if}
       <span {...labelProps} on:click={labelProps.onClick} class:disabled>{label}</span>
     </div>
     <slot />

packages/web/src/forms/FormStringList.svelte

@@ -12,6 +12,7 @@
   export let addButtonLabel;
   export let placeholder;
   export let templateProps;
+  export let isReadOnly = false;
 
   const { template, values, setFieldValue } = getFormContext();
 
@@ -20,7 +21,7 @@
 
 <svelte:component this={template} type="text" {label} {...templateProps}>
   {#each stringList as value, index}
-    <div class='input-line-flex'>
+    <div class="input-line-flex">
       <TextField
         {value}
         {placeholder}
@@ -28,12 +29,14 @@
           const newValues = stringList.map((v, i) => (i === index ? e.target['value'] : v));
           setFieldValue(name, newValues);
         }}
+        disabled={isReadOnly}
       />
 
       <InlineButton
         on:click={() => {
           setFieldValue(name, [...stringList.slice(0, index), ...stringList.slice(index + 1)]);
         }}
+        disabled={isReadOnly}
       >
         <FontIcon icon="icon delete" />
       </InlineButton>
@@ -45,11 +48,12 @@
     on:click={() => {
       setFieldValue(name, [...stringList, '']);
     }}
+    disabled={isReadOnly}
   />
 </svelte:component>
 
 <style>
-    .input-line-flex {
-        display: flex;
-    }
-</style>
+  .input-line-flex {
+    display: flex;
+  }
+</style>

packages/web/src/macro/MacroHeader.svelte

@@ -2,7 +2,7 @@
   import { getContext } from 'svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import ToolbarButton from '../buttons/ToolbarButton.svelte';
-  import { _t } from '../translations';
+  import { _t, _tval } from '../translations';
 
   export let onExecute;
 
@@ -13,7 +13,7 @@
   <div class="header">
     <FontIcon icon="img macro" />
     <div class="ml-2">
-      {$selectedMacro?.title}
+      {_tval($selectedMacro?.title)}
     </div>
   </div>
   <div class="buttons">

packages/web/src/macro/MacroInfoTab.svelte

@@ -5,7 +5,7 @@
 
   import WidgetTitle from '../widgets/WidgetTitle.svelte';
   import MacroParameters from './MacroParameters.svelte';
-  import { _t } from '../translations';
+  import { _t, _tval } from '../translations';
 
   const selectedMacro = getContext('selectedMacro') as any;
 
@@ -31,7 +31,7 @@
 
   <div class="section">
     <WidgetTitle>{_t('common.description', { defaultMessage: 'Description' })}</WidgetTitle>
-    <div class="m-1">{$selectedMacro?.description}</div>
+    <div class="m-1">{_tval($selectedMacro?.description)}</div>
   </div>
 </div>
 

packages/web/src/modals/DropDownMenu.svelte

@@ -164,7 +164,12 @@
           changeActiveSubmenu();
         }}
       >
-        <a on:click={e => handleClick(e, item)} class:disabled={item.disabled} class:bold={item.isBold}>
+        <a
+          on:click={e => handleClick(e, item)}
+          class:disabled={item.disabled}
+          class:bold={item.isBold}
+          data-testid={item.testid}
+        >
           <span>
             {#if item.switchValue && item.switchStoreGetter}
               {#key switchIndex}

packages/web/src/modals/NewObjectModal.svelte

@@ -95,7 +95,6 @@
       title: _t('common.exportDatabase', { defaultMessage: 'Export database' }),
       description: _t('newObject.exportDescription', { defaultMessage: 'Export to file like CSV, JSON, Excel, or other DB' }),
       command: 'database.export',
-      isProFeature: true,
       testid: 'NewObjectModal_databaseExport',
       disabledMessage: _t('newObject.exportDisabled', { defaultMessage: 'Export is not available for current database' }),
     },

packages/web/src/perspectives/PerspectiveFilters.svelte

@@ -9,6 +9,7 @@
   import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import PerspectiveFiltersColumn from './PerspectiveFiltersColumn.svelte';
+  import { _t } from '../translations';
 
   export let managerSize;
   export let config: PerspectiveConfig;
@@ -25,8 +26,8 @@
 <ManagerInnerContainer width={managerSize} isFlex={filterCount == 0}>
   {#if filterCount == 0}
     <div class="msg">
-      <div class="mb-3 bold">No Filters defined</div>
-      <div><FontIcon icon="img info" /> Use context menu, command "Add to filter" in table or in tree</div>
+      <div class="mb-3 bold">{_t('perspective.noFiltersDefined', { defaultMessage: "No Filters defined" })}</div>
+      <div><FontIcon icon="img info" /> {_t('perspective.useContextMenuAddToFilter', { defaultMessage: 'Use context menu, command "Add to filter" in table or in tree' })}</div>
     </div>
   {:else}
     {#each config.nodes as nodeConfig}

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -3,8 +3,8 @@
 
   registerCommand({
     id: 'perspective.openJson',
-    category: 'Perspective',
-    name: 'Open JSON',
+    category: __t('command.perspective', { defaultMessage: 'Perspective' }),
+    name: __t('command.perspective.openJson', { defaultMessage: 'Open JSON' }),
     isRelatedToTab: true,
     testEnabled: () => getCurrentEditor()?.openJsonEnabled(),
     onClick: () => getCurrentEditor().openJson(),
@@ -40,6 +40,7 @@
   import openNewTab from '../utility/openNewTab';
   import { getFilterValueExpression } from 'dbgate-filterparser';
   import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
+  import { __t } from '../translations';
 
   const TABS_BY_FIELD = {
     tables: {

packages/web/src/perspectives/PerspectiveView.svelte

@@ -3,8 +3,8 @@
 
   registerCommand({
     id: 'perspective.customJoin',
-    category: 'Perspective',
-    name: 'Custom join',
+    category: __t('perspective.category', { defaultMessage: 'Perspective' }),
+    name: __t('perspective.customJoin', { defaultMessage: 'Custom join' }),
     keyText: 'CtrlOrCommand+J',
     isRelatedToTab: true,
     icon: 'icon custom-join',
@@ -65,6 +65,7 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import InlineButton from '../buttons/InlineButton.svelte';
   import { usePerspectiveDataPatterns } from '../utility/usePerspectiveDataPatterns';
+  import { _t, __t } from '../translations';
 
   const dbg = debug('dbgate:PerspectiveView');
 
@@ -168,7 +169,7 @@
 <HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize} allowCollapseChild1>
   <div class="left" slot="1">
     <WidgetColumnBar>
-      <WidgetColumnBarItem title="Choose data" name="perspectiveTree" height={'70%'}>
+      <WidgetColumnBarItem title={_t('perspective.chooseData', { defaultMessage: "Choose data" })} name="perspectiveTree" height={'70%'}>
         {#if tempRoot && tempRoot != root}
           <div class="temp-root">
             <div>
@@ -184,7 +185,7 @@
         {/if}
 
         <SearchBoxWrapper>
-          <SearchInput placeholder="Search column or table" bind:value={filter} />
+          <SearchInput placeholder={_t('perspective.searchColumnOrTable', { defaultMessage: "Search column or table" })} bind:value={filter} />
           <CloseSearchButton bind:filter />
         </SearchBoxWrapper>
 
@@ -195,7 +196,7 @@
         </ManagerInnerContainer>
       </WidgetColumnBarItem>
 
-      <WidgetColumnBarItem title="Filters" name="tableFilters">
+      <WidgetColumnBarItem title={_t('perspective.filters', { defaultMessage: "Filters" })} name="tableFilters">
         <PerspectiveFilters {managerSize} {config} {setConfig} {conid} {database} {driver} {root} />
       </WidgetColumnBarItem>
     </WidgetColumnBar>

packages/web/src/query/SqlEditor.svelte

@@ -12,7 +12,7 @@
   import useEffect from '../utility/useEffect';
   import { getContext } from 'svelte';
   import { mountCodeCompletion } from './codeCompletion';
-  import { getCurrentSettings } from '../stores';
+  import { currentEditorWrapEnabled, getCurrentSettings } from '../stores';
   export let engine = null;
   export let conid = null;
   export let database = null;
@@ -29,6 +29,8 @@
     mode = engineToMode[match ? match[1] : engine] || 'sql';
   }
 
+  $: enableWrap = $currentEditorWrapEnabled || false;
+
   export function getEditor(): ace.Editor {
     return domEditor.getEditor();
   }
@@ -63,5 +65,6 @@
   options={{
     ...$$props.options,
     enableBasicAutocompletion: true,
+    wrap: enableWrap,
   }}
 />

packages/web/src/settings/BehaviourSettings.svelte

@@ -1,58 +1,61 @@
 <script lang="ts">
-    import FormCheckboxField from "../forms/FormCheckboxField.svelte";
-    import { _t } from "../translations";
-    import FontIcon from '../icons/FontIcon.svelte';
-    import FormValues from "../forms/FormValues.svelte";
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+  import { _t } from '../translations';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import FormValues from '../forms/FormValues.svelte';
 </script>
 
 <div class="wrapper">
-<FormValues let:values>
+  <FormValues let:values>
     <div class="heading">{_t('settings.behaviour', { defaultMessage: 'Behaviour' })}</div>
 
     <FormCheckboxField
-    name="behaviour.useTabPreviewMode"
-    label={_t('settings.behaviour.useTabPreviewMode', { defaultMessage: 'Use tab preview mode' })}
-    defaultValue={true}
+      name="behaviour.jsonPreviewWrap"
+      label={_t('settings.behaviour.jsonPreviewWrap', { defaultMessage: 'Wrap JSON in preview' })}
+      defaultValue={false}
     />
 
     <FormCheckboxField
-    name="behaviour.jsonPreviewWrap"
-    label={_t('settings.behaviour.jsonPreviewWrap', { defaultMessage: 'Wrap JSON in preview' })}
-    defaultValue={false}
+      name="behaviour.openDetailOnArrows"
+      label={_t('settings.behaviour.openDetailOnArrows', {
+        defaultMessage: 'Open detail on keyboard navigation',
+      })}
+      defaultValue={true}
+      disabled={values['behaviour.useTabPreviewMode'] === false}
     />
 
+    <div class="heading">{_t('settings.tabPreviewMode', { defaultMessage: 'Tab Preview Mode' })}</div>
+
     <div class="tip">
-    <FontIcon icon="img tip" />
-    {_t('settings.behaviour.singleClickPreview', {
+      <FontIcon icon="img tip" />
+      {_t('settings.behaviour.singleClickPreview', {
         defaultMessage:
-        'When you single-click or select a file in the "Tables, Views, Functions" view, it is shown in a preview mode and reuses an existing tab (preview tab). This is useful if you are quickly browsing tables and don\'t want every visited table to have its own tab. When you start editing the table or use double-click to open the table from the "Tables" view, a new tab is dedicated to that table.',
-    })}
+          'When you single-click or select a file in the "Tables, Views, Functions" view, it is shown in a preview mode and reuses an existing tab (preview tab). This is useful if you are quickly browsing tables and don\'t want every visited table to have its own tab. When you start editing the table or use double-click to open the table from the "Tables" view, a new tab is dedicated to that table.',
+      })}
     </div>
 
     <FormCheckboxField
-    name="behaviour.openDetailOnArrows"
-    label={_t('settings.behaviour.openDetailOnArrows', {
-        defaultMessage: 'Open detail on keyboard navigation',
-    })}
-    defaultValue={true}
-    disabled={values['behaviour.useTabPreviewMode'] === false}
+      name="behaviour.useTabPreviewMode"
+      label={_t('settings.behaviour.useTabPreviewMode', { defaultMessage: 'Use tab preview mode' })}
+      defaultValue={true}
+      data-testid="BehaviourSettings_useTabPreviewMode"
     />
 
     <div class="heading">{_t('settings.confirmations', { defaultMessage: 'Confirmations' })}</div>
 
     <FormCheckboxField
-    name="skipConfirm.tableDataSave"
-    label={_t('settings.confirmations.skipConfirm.tableDataSave', {
+      name="skipConfirm.tableDataSave"
+      label={_t('settings.confirmations.skipConfirm.tableDataSave', {
         defaultMessage: 'Skip confirmation when saving table data (SQL)',
-    })}
+      })}
     />
     <FormCheckboxField
-    name="skipConfirm.collectionDataSave"
-    label={_t('settings.confirmations.skipConfirm.collectionDataSave', {
+      name="skipConfirm.collectionDataSave"
+      label={_t('settings.confirmations.skipConfirm.collectionDataSave', {
         defaultMessage: 'Skip confirmation when saving collection data (NoSQL)',
-    })}
+      })}
     />
-</FormValues>
+  </FormValues>
 </div>
 
 <style>
@@ -67,4 +70,4 @@
     margin-left: var(--dim-large-form-margin);
     margin-top: var(--dim-large-form-margin);
   }
-</style>
+</style>

packages/web/src/settings/ConnectionAdvancedDriverFields.svelte

@@ -6,6 +6,8 @@
   import FormArgumentList from '../forms/FormArgumentList.svelte';
   import { _t } from '../translations';
 
+  export let isFormReadOnly;
+
   const { values } = getFormContext();
 
   $: engine = $values.engine;
@@ -17,9 +19,18 @@
   $: advancedFields = driver?.getAdvancedConnectionFields ? driver?.getAdvancedConnectionFields() : null;
 </script>
 
-<FormTextAreaField label={_t('connection.allowedDatabases', { defaultMessage: 'Allowed databases, one per line' })} name="allowedDatabases" disabled={isConnected} rows={8} />
-<FormTextField label={_t('connection.allowedDatabasesRegex', { defaultMessage: 'Allowed databases regular expression' })} name="allowedDatabasesRegex" disabled={isConnected} />
+<FormTextAreaField
+  label={_t('connection.allowedDatabases', { defaultMessage: 'Allowed databases, one per line' })}
+  name="allowedDatabases"
+  disabled={isConnected || isFormReadOnly}
+  rows={8}
+/>
+<FormTextField
+  label={_t('connection.allowedDatabasesRegex', { defaultMessage: 'Allowed databases regular expression' })}
+  name="allowedDatabasesRegex"
+  disabled={isConnected || isFormReadOnly}
+/>
 
 {#if advancedFields}
-  <FormArgumentList args={advancedFields} />
+  <FormArgumentList args={advancedFields} isReadOnly={isFormReadOnly} />
 {/if}

packages/web/src/settings/ConnectionDriverFields.svelte

@@ -23,6 +23,7 @@
 
   export let getDatabaseList;
   export let currentConnection;
+  export let isFormReadOnly;
 
   const { values, setFieldValue } = getFormContext();
   const electron = getElectron();
@@ -90,10 +91,10 @@
   label={_t('connection.type', { defaultMessage: 'Connection type' })}
   name="engine"
   isNative
-  disabled={isConnected}
+  disabled={isConnected || isFormReadOnly}
   data-testid="ConnectionDriverFields_connectionType"
   options={[
-    { label: _t('connection.selectType', { defaultMessage: '(select connection type)' })},
+    { label: _t('connection.selectType', { defaultMessage: '(select connection type)' }) },
     ..._.sortBy(
       $extensions.drivers
         // .filter(driver => !driver.isElectronOnly || electron)
@@ -113,7 +114,7 @@
       data-testid="ConnectionDriverFields_authType"
       name="authType"
       isNative
-      disabled={isConnected}
+      disabled={isConnected || isFormReadOnly}
       defaultValue={driver?.defaultAuthTypeName}
       options={$authTypes.map(auth => ({
         value: auth.name,
@@ -127,16 +128,18 @@
   <FormClusterNodesField
     label={_t('connection.clusterNodes', { defaultMessage: 'Cluster nodes' })}
     name="clusterNodes"
-    disabled={isConnected || disabledFields.includes('clusterNodes')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('clusterNodes')}
     data-testid="ConnectionDriverFields_clusterNodes"
   />
 {/if}
 
 {#if driver?.showConnectionField('autoDetectNatMap', $values, showConnectionFieldArgs)}
   <FormCheckboxField
-    label={_t('connection.autoDetectNatMap', { defaultMessage: 'Auto detect NAT map (use for Redis Cluster in Docker network)' })}
+    label={_t('connection.autoDetectNatMap', {
+      defaultMessage: 'Auto detect NAT map (use for Redis Cluster in Docker network)',
+    })}
     name="autoDetectNatMap"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
     data-testid="ConnectionDriverFields_autoDetectNatMap"
   />
 {/if}
@@ -146,13 +149,13 @@
     <FormElectronFileSelector
       label={_t('connection.databaseFile', { defaultMessage: 'Database file' })}
       name="databaseFile"
-      disabled={isConnected || disabledFields.includes('databaseFile')}
+      disabled={isConnected || isFormReadOnly || disabledFields.includes('databaseFile')}
     />
   {:else}
     <FormTextField
       label={_t('connection.databaseFilePath', { defaultMessage: 'Database file (path on server)' })}
       name="databaseFile"
-      disabled={isConnected || disabledFields.includes('databaseFile')}
+      disabled={isConnected || isFormReadOnly || disabledFields.includes('databaseFile')}
     />
   {/if}
 {/if}
@@ -160,11 +163,15 @@
 {#if driver?.showConnectionField('useDatabaseUrl', $values, showConnectionFieldArgs)}
   <div class="radio">
     <FormRadioGroupField
-      disabled={isConnected || disabledFields.includes('useDatabaseUrl')}
+      disabled={isConnected || isFormReadOnly || disabledFields.includes('useDatabaseUrl')}
       name="useDatabaseUrl"
       matchValueToOption={(value, option) => !!option.value == !!value}
       options={[
-        { label: _t('connection.fillDetails', { defaultMessage: 'Fill database connection details' }), value: '', default: true },
+        {
+          label: _t('connection.fillDetails', { defaultMessage: 'Fill database connection details' }),
+          value: '',
+          default: true,
+        },
         { label: _t('connection.useUrl', { defaultMessage: 'Use database URL' }), value: '1' },
       ]}
     />
@@ -177,7 +184,7 @@
     name="databaseUrl"
     data-testid="ConnectionDriverFields_databaseUrl"
     placeholder={driver?.databaseUrlPlaceholder}
-    disabled={isConnected || disabledFields.includes('databaseUrl')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('databaseUrl')}
   />
 {/if}
 
@@ -187,7 +194,7 @@
     name="localDataCenter"
     data-testid="ConnectionDriverFields_localDataCenter"
     placeholder={driver?.defaultLocalDataCenter}
-    disabled={isConnected || disabledFields.includes('localDataCenter')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('localDataCenter')}
   />
 {/if}
 
@@ -196,7 +203,7 @@
     label={_t('connection.authToken', { defaultMessage: 'Auth token' })}
     name="authToken"
     data-testid="ConnectionDriverFields_authToken"
-    disabled={isConnected || disabledFields.includes('authToken')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('authToken')}
   />
 {/if}
 
@@ -207,7 +214,7 @@
       data-testid="ConnectionDriverFields_authType"
       name="authType"
       isNative
-      disabled={isConnected}
+      disabled={isConnected || isFormReadOnly}
       defaultValue={driver?.defaultAuthTypeName}
       options={$authTypes.map(auth => ({
         value: auth.name,
@@ -219,9 +226,9 @@
 
 {#if driver?.showConnectionField('endpoint', $values, showConnectionFieldArgs)}
   <FormTextField
-    label='Endpoint'
+    label="Endpoint"
     name="endpoint"
-    disabled={isConnected || disabledFields.includes('endpoint')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('endpoint')}
     data-testid="ConnectionDriverFields_endpoint"
   />
 {/if}
@@ -230,7 +237,7 @@
   <FormTextField
     label={_t('connection.endpointKey', { defaultMessage: 'Key' })}
     name="endpointKey"
-    disabled={isConnected || disabledFields.includes('endpointKey')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('endpointKey')}
     data-testid="ConnectionDriverFields_endpointKey"
   />
 {/if}
@@ -239,7 +246,7 @@
   <FormTextField
     label={_t('connection.clientLibraryPath', { defaultMessage: 'Client library path' })}
     name="clientLibraryPath"
-    disabled={isConnected || disabledFields.includes('clientLibraryPath')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('clientLibraryPath')}
     data-testid="ConnectionDriverFields_clientLibraryPath"
   />
 {/if}
@@ -250,7 +257,7 @@
       <FormTextField
         label={_t('connection.server', { defaultMessage: 'Server' })}
         name="server"
-        disabled={isConnected || disabledFields.includes('server')}
+        disabled={isConnected || isFormReadOnly || disabledFields.includes('server')}
         templateProps={{ noMargin: true }}
         data-testid="ConnectionDriverFields_server"
       />
@@ -260,7 +267,7 @@
         <FormTextField
           label="Port"
           name="port"
-          disabled={isConnected || disabledFields.includes('port')}
+          disabled={isConnected || isFormReadOnly || disabledFields.includes('port')}
           templateProps={{ noMargin: true }}
           placeholder={driver?.defaultPort}
           data-testid="ConnectionDriverFields_port"
@@ -271,7 +278,9 @@
   {#if getCurrentConfig().isDocker}
     <div class="row">
       <FontIcon icon="img warn" padRight />
-      { _t('connection.dockerWarning', { defaultMessage: 'Under docker, localhost and 127.0.0.1 will not work, use dockerhost instead' }) }
+      {_t('connection.dockerWarning', {
+        defaultMessage: 'Under docker, localhost and 127.0.0.1 will not work, use dockerhost instead',
+      })}
     </div>
   {/if}
 {/if}
@@ -280,9 +289,11 @@
   <div class="row">
     <div class="col-9 mr-1">
       <FormTextField
-        label={$values.serviceNameType == 'sid' ? 'SID' : _t('connection.serviceName', { defaultMessage: 'Service name' })}
+        label={$values.serviceNameType == 'sid'
+          ? 'SID'
+          : _t('connection.serviceName', { defaultMessage: 'Service name' })}
         name="serviceName"
-        disabled={isConnected}
+        disabled={isConnected || isFormReadOnly}
         templateProps={{ noMargin: true }}
         data-testid="ConnectionDriverFields_serviceName"
       />
@@ -293,7 +304,7 @@
         isNative
         name="serviceNameType"
         defaultValue="serviceName"
-        disabled={isConnected}
+        disabled={isConnected || isFormReadOnly}
         templateProps={{ noMargin: true }}
         options={[
           { value: 'serviceName', label: _t('connection.serviceName', { defaultMessage: 'Service name' }) },
@@ -309,7 +320,7 @@
   <FormTextField
     label={_t('connection.socketPath', { defaultMessage: 'Socket path' })}
     name="socketPath"
-    disabled={isConnected || disabledFields.includes('socketPath')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('socketPath')}
     placeholder={driver?.defaultSocketPath}
     data-testid="ConnectionDriverFields_scoketPath"
   />
@@ -322,7 +333,7 @@
         <FormTextField
           label={_t('connection.user', { defaultMessage: 'User' })}
           name="user"
-          disabled={isConnected || disabledFields.includes('user')}
+          disabled={isConnected || isFormReadOnly || disabledFields.includes('user')}
           templateProps={{ noMargin: true }}
           data-testid="ConnectionDriverFields_user"
         />
@@ -333,7 +344,7 @@
         <FormPasswordField
           label={_t('connection.password', { defaultMessage: 'Password' })}
           name="password"
-          disabled={isConnected || disabledFields.includes('password')}
+          disabled={isConnected || isFormReadOnly || disabledFields.includes('password')}
           templateProps={{ noMargin: true }}
           data-testid="ConnectionDriverFields_password"
         />
@@ -345,7 +356,7 @@
   <FormTextField
     label={_t('connection.user', { defaultMessage: 'User' })}
     name="user"
-    disabled={isConnected || disabledFields.includes('user')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('user')}
     data-testid="ConnectionDriverFields_user"
   />
 {/if}
@@ -353,7 +364,7 @@
   <FormPasswordField
     label={_t('connection.password', { defaultMessage: 'Password' })}
     name="password"
-    disabled={isConnected || disabledFields.includes('password')}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('password')}
     data-testid="ConnectionDriverFields_password"
   />
 {/if}
@@ -380,7 +391,7 @@
       <FormTextField
         label={_t('connection.accessKeyId', { defaultMessage: 'Access Key ID' })}
         name="accessKeyId"
-        disabled={isConnected || disabledFields.includes('accessKeyId')}
+        disabled={isConnected || isFormReadOnly || disabledFields.includes('accessKeyId')}
         templateProps={{ noMargin: true }}
         data-testid="ConnectionDriverFields_accesKeyId"
       />
@@ -391,7 +402,7 @@
       <FormPasswordField
         label={_t('connection.secretAccessKey', { defaultMessage: 'Secret access key' })}
         name="secretAccessKey"
-        disabled={isConnected || disabledFields.includes('secretAccessKey')}
+        disabled={isConnected || isFormReadOnly || disabledFields.includes('secretAccessKey')}
         templateProps={{ noMargin: true }}
         data-testid="ConnectionDriverFields_secretAccessKey"
       />
@@ -405,12 +416,15 @@
     isNative
     name="passwordMode"
     defaultValue="saveEncrypted"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
     options={[
       { value: 'saveEncrypted', label: _t('connection.saveEncrypted', { defaultMessage: 'Save and encrypt' }) },
       { value: 'saveRaw', label: _t('connection.saveRaw', { defaultMessage: 'Save raw (UNSAFE!!)' }) },
       { value: 'askPassword', label: _t('connection.askPassword', { defaultMessage: "Don't save, ask for password" }) },
-      { value: 'askUser', label: _t('connection.askUser', { defaultMessage: "Don't save, ask for login and password" }) },
+      {
+        value: 'askUser',
+        label: _t('connection.askUser', { defaultMessage: "Don't save, ask for login and password" }),
+      },
     ]}
     data-testid="ConnectionDriverFields_passwordMode"
   />
@@ -420,7 +434,7 @@
   <FormTextField
     label={_t('connection.keySeparator', { defaultMessage: 'Key separator' })}
     name="treeKeySeparator"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
     placeholder=":"
     data-testid="ConnectionDriverFields_treeKeySeparator"
   />
@@ -430,7 +444,7 @@
   <FormTextField
     label={_t('connection.windowsDomain', { defaultMessage: 'Domain (specify to use NTLM authentication)' })}
     name="windowsDomain"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
     data-testid="ConnectionDriverFields_windowsDomain"
   />
 {/if}
@@ -439,7 +453,7 @@
   <FormCheckboxField
     label={_t('connection.isReadOnly', { defaultMessage: 'Is read only' })}
     name="isReadOnly"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
     data-testid="ConnectionDriverFields_isReadOnly"
   />
 {/if}
@@ -448,7 +462,7 @@
   <FormCheckboxField
     label={_t('connection.trustServerCertificate', { defaultMessage: 'Trust server certificate' })}
     name="trustServerCertificate"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
     data-testid="ConnectionDriverFields_trustServerCertificate"
   />
 {/if}
@@ -457,33 +471,42 @@
   <FormDropDownTextField
     label={_t('connection.defaultDatabase', { defaultMessage: 'Default database' })}
     name="defaultDatabase"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly || disabledFields.includes('defaultDatabase')}
     data-testid="ConnectionDriverFields_defaultDatabase"
     asyncMenu={createDatabasesMenu}
-    placeholder={_t('common.notSelectedOptional', { defaultMessage : "(not selected - optional)"})}
+    placeholder={_t('common.notSelectedOptional', { defaultMessage: '(not selected - optional)' })}
   />
 {/if}
 
 {#if defaultDatabase && driver?.showConnectionField('singleDatabase', $values, showConnectionFieldArgs)}
   <FormCheckboxField
-    label={_t('connection.singleDatabase', { defaultMessage: 'Use only database {defaultDatabase}', values: { defaultDatabase } })}
+    label={_t('connection.singleDatabase', {
+      defaultMessage: 'Use only database {defaultDatabase}',
+      values: { defaultDatabase },
+    })}
     name="singleDatabase"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
     data-testid="ConnectionDriverFields_singleDatabase"
   />
 {/if}
 
 {#if driver?.showConnectionField('useSeparateSchemas', $values, showConnectionFieldArgs)}
   <FormCheckboxField
-    label={_t('connection.useSeparateSchemas', { defaultMessage: 'Use schemas separately (use this if you have many large schemas)' })}
+    label={_t('connection.useSeparateSchemas', {
+      defaultMessage: 'Use schemas separately (use this if you have many large schemas)',
+    })}
     name="useSeparateSchemas"
-    disabled={isConnected}
+    disabled={isConnected || isFormReadOnly}
     data-testid="ConnectionDriverFields_useSeparateSchemas"
   />
 {/if}
 
 {#if driver?.showConnectionField('connectionDefinition', $values, showConnectionFieldArgs)}
-  <FormFileInputField disabled={isConnected} label={_t('connection.connectionDefinition', { defaultMessage: 'Service account key JSON' })} name="connectionDefinition" />
+  <FormFileInputField
+    disabled={isConnected || isFormReadOnly}
+    label={_t('connection.connectionDefinition', { defaultMessage: 'Service account key JSON' })}
+    name="connectionDefinition"
+  />
 {/if}
 
 {#if driver}
@@ -493,7 +516,7 @@
         label={_t('connection.displayName', { defaultMessage: 'Display name' })}
         name="displayName"
         templateProps={{ noMargin: true }}
-        disabled={isConnected}
+        disabled={isConnected || isFormReadOnly}
         data-testid="ConnectionDriverFields_displayName"
         placeholder={getConnectionLabel(currentConnection)}
       />
@@ -505,7 +528,7 @@
         name="connectionColor"
         emptyLabel="(not selected)"
         templateProps={{ noMargin: true }}
-        disabled={isConnected}
+        disabled={isConnected || isFormReadOnly}
         data-testid="ConnectionDriverFields_connectionColor"
       />
     </div>

packages/web/src/settings/ConnectionSettings.svelte

@@ -1,81 +1,64 @@
 <script lang="ts">
-  import CheckboxField from "../forms/CheckboxField.svelte";
-  import FormCheckboxField from "../forms/FormCheckboxField.svelte";
-  import FormFieldTemplateLarge from "../forms/FormFieldTemplateLarge.svelte";
-  import FormSelectField from "../forms/FormSelectField.svelte";
-  import FormTextField from "../forms/FormTextField.svelte";
-  import FormValues from "../forms/FormValues.svelte";
-  import { lockedDatabaseMode } from "../stores";
-  import { _t } from "../translations";
-
-    
+  import CheckboxField from '../forms/CheckboxField.svelte';
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+  import FormFieldTemplateLarge from '../forms/FormFieldTemplateLarge.svelte';
+  import FormSelectField from '../forms/FormSelectField.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+  import FormValues from '../forms/FormValues.svelte';
+  import { lockedDatabaseMode } from '../stores';
+  import { _t } from '../translations';
 </script>
 
 <div class="wrapper">
-<FormValues let:values>
+  <FormValues let:values>
     <div class="heading">{_t('settings.connection', { defaultMessage: 'Connection' })}</div>
 
-    <FormFieldTemplateLarge
-    label={_t('settings.connection.showOnlyTabsFromSelectedDatabase', {
-        defaultMessage: 'Show only tabs from selected database',
-    })}
-    type="checkbox"
-    labelProps={{
-        onClick: () => {
-        $lockedDatabaseMode = !$lockedDatabaseMode;
-        },
-    }}
-    >
-    <CheckboxField checked={$lockedDatabaseMode} on:change={e => ($lockedDatabaseMode = e.target.checked)} />
-    </FormFieldTemplateLarge>
-
     <FormCheckboxField
-    name="connection.autoRefresh"
-    label={_t('settings.connection.autoRefresh', {
+      name="connection.autoRefresh"
+      label={_t('settings.connection.autoRefresh', {
         defaultMessage: 'Automatic refresh of database model on background',
-    })}
-    defaultValue={false}
+      })}
+      defaultValue={false}
     />
     <FormTextField
-    name="connection.autoRefreshInterval"
-    label={_t('settings.connection.autoRefreshInterval', {
+      name="connection.autoRefreshInterval"
+      label={_t('settings.connection.autoRefreshInterval', {
         defaultMessage: 'Interval between automatic DB structure reloads in seconds',
-    })}
-    defaultValue="30"
-    disabled={values['connection.autoRefresh'] === false}
+      })}
+      defaultValue="30"
+      disabled={values['connection.autoRefresh'] === false}
     />
     <FormSelectField
-    label={_t('settings.connection.sshBindHost', { defaultMessage: 'Local host address for SSH connections' })}
-    name="connection.sshBindHost"
-    isNative
-    defaultValue="127.0.0.1"
-    options={[
+      label={_t('settings.connection.sshBindHost', { defaultMessage: 'Local host address for SSH connections' })}
+      name="connection.sshBindHost"
+      isNative
+      defaultValue="127.0.0.1"
+      options={[
         { value: '127.0.0.1', label: '127.0.0.1 (IPv4)' },
         { value: '::1', label: '::1  (IPv6)' },
         { value: 'localhost', label: 'localhost (domain name)' },
-    ]}
+      ]}
     />
 
     <div class="heading">{_t('settings.session', { defaultMessage: 'Query sessions' })}</div>
     <FormCheckboxField
-    name="session.autoClose"
-    label={_t('settings.session.autoClose', {
+      name="session.autoClose"
+      label={_t('settings.session.autoClose', {
         defaultMessage: 'Automatic close query sessions after period without any activity',
-    })}
-    defaultValue={true}
+      })}
+      defaultValue={true}
     />
     <FormTextField
-    name="session.autoCloseTimeout"
-    label={_t('settings.session.autoCloseTimeout', {
+      name="session.autoCloseTimeout"
+      label={_t('settings.session.autoCloseTimeout', {
         defaultMessage: 'Interval, after which query session without activity is closed (in minutes)',
-    })}
-    defaultValue="15"
-    disabled={values['session.autoClose'] === false}
+      })}
+      defaultValue="15"
+      disabled={values['session.autoClose'] === false}
     />
-</FormValues>
+  </FormValues>
 </div>
 
-
 <style>
   .heading {
     font-size: 20px;
@@ -84,4 +67,11 @@
     margin-top: var(--dim-large-form-margin);
   }
 
-</style>
+  .wrapper :global(input) {
+    max-width: 400px;
+  }
+
+  .wrapper :global(select) {
+    max-width: 400px;
+  }
+</style>

packages/web/src/settings/ConnectionSshTunnelFields.svelte

@@ -14,6 +14,8 @@
   import { extensions, openedConnections, openedSingleDatabaseConnections } from '../stores';
   import { _t } from '../translations';
 
+  export let isFormReadOnly;
+
   const { values, setFieldValue } = getFormContext();
   const electron = getElectron();
 
@@ -30,9 +32,9 @@
 </script>
 
 <FormCheckboxField
-  label={_t('connection.sshTunnel.use', {defaultMessage: "Use SSH tunnel"})}
+  label={_t('connection.sshTunnel.use', { defaultMessage: 'Use SSH tunnel' })}
   name="useSshTunnel"
-  disabled={isConnected}
+  disabled={isConnected || isFormReadOnly}
   data-testid="ConnectionSshTunnelFields_useSshTunnel"
 />
 
@@ -41,7 +43,7 @@
     <FormTextField
       label="Host"
       name="sshHost"
-      disabled={isConnected || !useSshTunnel}
+      disabled={isConnected || !useSshTunnel || isFormReadOnly}
       templateProps={{ noMargin: true }}
       data-testid="ConnectionSshTunnelFields_sshHost"
     />
@@ -50,23 +52,30 @@
     <FormTextField
       label="Port"
       name="sshPort"
-      disabled={isConnected || !useSshTunnel}
+      disabled={isConnected || !useSshTunnel || isFormReadOnly}
       templateProps={{ noMargin: true }}
       placeholder="22"
       data-testid="ConnectionSshTunnelFields_sshPort"
     />
   </div>
 </div>
-<FormTextField label="Bastion host (Jump host)" name="sshBastionHost" disabled={isConnected || !useSshTunnel} />
+<FormTextField
+  label="Bastion host (Jump host)"
+  name="sshBastionHost"
+  disabled={isConnected || !useSshTunnel || isFormReadOnly}
+/>
 
 <FormSelectField
-  label={_t('connection.sshTunnel.authentication', {defaultMessage: "SSH Authentication"})}
+  label={_t('connection.sshTunnel.authentication', { defaultMessage: 'SSH Authentication' })}
   name="sshMode"
   isNative
   defaultSelectValue="userPassword"
-  disabled={isConnected || !useSshTunnel}
+  disabled={isConnected || !useSshTunnel || isFormReadOnly}
   options={[
-    { value: 'userPassword', label: _t('connection.sshTunnel.authMethod.userPassword', {defaultMessage: "Username & password"}) },
+    {
+      value: 'userPassword',
+      label: _t('connection.sshTunnel.authMethod.userPassword', { defaultMessage: 'Username & password' }),
+    },
     { value: 'agent', label: 'SSH agent' },
     { value: 'keyFile', label: 'Key file' },
   ]}
@@ -77,7 +86,7 @@
   <FormTextField
     label="Login"
     name="sshLogin"
-    disabled={isConnected || !useSshTunnel}
+    disabled={isConnected || !useSshTunnel || isFormReadOnly}
     data-testid="ConnectionSshTunnelFields_sshLogin"
   />
 {/if}
@@ -88,16 +97,16 @@
       <FormTextField
         label="Login"
         name="sshLogin"
-        disabled={isConnected || !useSshTunnel}
+        disabled={isConnected || !useSshTunnel || isFormReadOnly}
         templateProps={{ noMargin: true }}
         data-testid="ConnectionSshTunnelFields_sshLogin"
       />
     </div>
     <div class="col-6">
       <FormPasswordField
-        label={_t('connection.password', {defaultMessage: 'Password'})}
+        label={_t('connection.password', { defaultMessage: 'Password' })}
         name="sshPassword"
-        disabled={isConnected || !useSshTunnel}
+        disabled={isConnected || !useSshTunnel || isFormReadOnly}
         templateProps={{ noMargin: true }}
         data-testid="ConnectionSshTunnelFields_sshPassword"
       />
@@ -110,18 +119,18 @@
     <div class="col-6 mr-1">
       {#if electron}
         <FormElectronFileSelector
-          label={_t('connection.sshTunnel.privateKeyFile', {defaultMessage: "Private key file"})}
+          label={_t('connection.sshTunnel.privateKeyFile', { defaultMessage: 'Private key file' })}
           name="sshKeyfile"
-          disabled={isConnected || !useSshTunnel}
+          disabled={isConnected || !useSshTunnel || isFormReadOnly}
           templateProps={{ noMargin: true }}
           defaultFileName={$platformInfo?.defaultKeyfile}
           data-testid="ConnectionSshTunnelFields_sshKeyfile"
         />
       {:else}
         <FormTextField
-          label={_t('connection.sshTunnel.privateKeyFilePath', {defaultMessage: "Private key file (path on server)"})}
+          label={_t('connection.sshTunnel.privateKeyFilePath', { defaultMessage: 'Private key file (path on server)' })}
           name="sshKeyfile"
-          disabled={isConnected || !useSshTunnel}
+          disabled={isConnected || !useSshTunnel || isFormReadOnly}
           templateProps={{ noMargin: true }}
           placeholder={$platformInfo?.defaultKeyfile}
           data-testid="ConnectionSshTunnelFields_sshKeyfile"
@@ -130,9 +139,9 @@
     </div>
     <div class="col-6">
       <FormPasswordField
-        label={_t('connection.sshTunnel.keyFilePassphrase', {defaultMessage: "Key file passphrase"})}
+        label={_t('connection.sshTunnel.keyFilePassphrase', { defaultMessage: 'Key file passphrase' })}
         name="sshKeyfilePassword"
-        disabled={isConnected || !useSshTunnel}
+        disabled={isConnected || !useSshTunnel || isFormReadOnly}
         templateProps={{ noMargin: true }}
         data-testid="ConnectionSshTunnelFields_sshKeyfilePassword"
       />
@@ -143,9 +152,10 @@
 {#if useSshTunnel && $values.sshMode == 'agent'}
   <div class="ml-3 mb-3">
     {#if $platformInfo && $platformInfo.sshAuthSock}
-      <FontIcon icon="img ok" /> {_t('connection.sshTunnel.agentFound', {defaultMessage: "SSH Agent found"})}
+      <FontIcon icon="img ok" /> {_t('connection.sshTunnel.agentFound', { defaultMessage: 'SSH Agent found' })}
     {:else}
-      <FontIcon icon="img error" /> {_t('connection.sshTunnel.agentNotFound', {defaultMessage: "SSH Agent not found"})}
+      <FontIcon icon="img error" />
+      {_t('connection.sshTunnel.agentNotFound', { defaultMessage: 'SSH Agent not found' })}
     {/if}
   </div>
 {/if}

packages/web/src/settings/ConnectionSslFields.svelte

@@ -9,6 +9,8 @@
   import { openedConnections, openedSingleDatabaseConnections } from '../stores';
   import { _t } from '../translations';
 
+  export let isFormReadOnly;
+
   const { values, setFieldValue } = getFormContext();
   const electron = getElectron();
 
@@ -16,21 +18,35 @@
   $: isConnected = $openedConnections.includes($values._id) || $openedSingleDatabaseConnections.includes($values._id);
 </script>
 
-<FormCheckboxField label={_t('connection.ssl.use', {defaultMessage: "Use SSL"})} name="useSsl" disabled={isConnected} />
-<FormElectronFileSelector label={_t('connection.ssl.caCert', {defaultMessage: "CA Cert (optional)"})} name="sslCaFile" disabled={isConnected || !useSsl || !electron} />
+<FormCheckboxField
+  label={_t('connection.ssl.use', { defaultMessage: 'Use SSL' })}
+  name="useSsl"
+  disabled={isConnected || isFormReadOnly}
+/>
 <FormElectronFileSelector
-  label={_t('connection.ssl.certificate', {defaultMessage: "Certificate (optional)"})}
+  label={_t('connection.ssl.caCert', { defaultMessage: 'CA Cert (optional)' })}
+  name="sslCaFile"
+  disabled={isConnected || !useSsl || !electron || isFormReadOnly}
+/>
+<FormElectronFileSelector
+  label={_t('connection.ssl.certificate', { defaultMessage: 'Certificate (optional)' })}
   name="sslCertFile"
-  disabled={isConnected || !useSsl || !electron}
+  disabled={isConnected || !useSsl || !electron || isFormReadOnly}
 />
 <FormPasswordField
-  label={_t('connection.ssl.certificateKeyFilePassword', {defaultMessage: "Certificate key file password (optional)"})}
+  label={_t('connection.ssl.certificateKeyFilePassword', {
+    defaultMessage: 'Certificate key file password (optional)',
+  })}
   name="sslCertFilePassword"
-  disabled={isConnected || !useSsl || !electron}
+  disabled={isConnected || !useSsl || !electron || isFormReadOnly}
 />
 <FormElectronFileSelector
-  label={_t('connection.ssl.keyFile', {defaultMessage: "Key file (optional)"})}
+  label={_t('connection.ssl.keyFile', { defaultMessage: 'Key file (optional)' })}
   name="sslKeyFile"
-  disabled={isConnected || !useSsl || !electron}
+  disabled={isConnected || !useSsl || !electron || isFormReadOnly}
+/>
+<FormCheckboxField
+  label={_t('connection.ssl.rejectUnauthorized', { defaultMessage: 'Reject unauthorized' })}
+  name="sslRejectUnauthorized"
+  disabled={isConnected || !useSsl || isFormReadOnly}
 />
-<FormCheckboxField label={_t('connection.ssl.rejectUnauthorized', {defaultMessage: "Reject unauthorized"})} name="sslRejectUnauthorized" disabled={isConnected || !useSsl} />

packages/web/src/settings/DataGridSettings.svelte

@@ -1,93 +1,105 @@
 <script lang="ts">
-  import FormCheckboxField from "../forms/FormCheckboxField.svelte";
-  import FormSelectField from "../forms/FormSelectField.svelte";
-  import FormTextField from "../forms/FormTextField.svelte";
-  import { _t } from "../translations";
-  import { isProApp } from "../utility/proTools";
-
-
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+  import FormSelectField from '../forms/FormSelectField.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+  import { _t } from '../translations';
+  import { isProApp } from '../utility/proTools';
 </script>
 
 <div class="wrapper">
-    <div class="heading">{_t('settings.dataGrid.title', { defaultMessage: 'Data grid' })}</div>
-<FormTextField
-name="dataGrid.pageSize"
-label={_t('settings.dataGrid.pageSize', {
-    defaultMessage: 'Page size (number of rows for incremental loading, must be between 5 and 50000)',
-})}
-defaultValue="100"
-/>
-{#if isProApp()}
-<FormCheckboxField
-    name="dataGrid.showHintColumns"
-    label={_t('settings.dataGrid.showHintColumns', { defaultMessage: 'Show foreign key hints' })}
-    defaultValue={true}
-/>
-{/if}
-<!-- <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} /> -->
+  <div class="heading">{_t('settings.dataGrid.title', { defaultMessage: 'Data grid' })}</div>
+  <FormTextField
+    name="dataGrid.pageSize"
+    label={_t('settings.dataGrid.pageSize', {
+      defaultMessage: 'Page size (number of rows for incremental loading, must be between 5 and 50000)',
+    })}
+    defaultValue="100"
+  />
+  {#if isProApp()}
+    <FormCheckboxField
+      name="dataGrid.showHintColumns"
+      label={_t('settings.dataGrid.showHintColumns', { defaultMessage: 'Show foreign key hints' })}
+      defaultValue={true}
+      data-testid="DataGridSettings_showHintColumns"
+    />
+  {/if}
+  <!-- <FormCheckboxField name="dataGrid.showHintColumns" label="Show foreign key hints" defaultValue={true} /> -->
 
-<FormCheckboxField
-name="dataGrid.thousandsSeparator"
-label={_t('settings.dataGrid.thousandsSeparator', {
-    defaultMessage: 'Use thousands separator for numbers',
-})}
-/>
+  <FormSelectField
+    label={_t('settings.dataGrid.thousandsSeparator', { defaultMessage: 'Thousands separator for numbers' })}
+    name="dataGrid.thousandsSeparatorChar"
+    isNative
+    defaultValue="none"
+    options={[
+      { value: 'none', label: _t('settings.dataGrid.thousandsSeparator.none', { defaultMessage: 'None' }) },
+      { value: 'system', label: _t('settings.dataGrid.thousandsSeparator.system', { defaultMessage: 'System' }) },
+      { value: 'space', label: _t('settings.dataGrid.thousandsSeparator.space', { defaultMessage: 'Space' }) },
+      {
+        value: 'narrowspace',
+        label: _t('settings.dataGrid.thousandsSeparator.narrowSpace', {
+          defaultMessage: 'Narrow space',
+        }),
+      },
+      { value: 'comma', label: _t('settings.dataGrid.thousandsSeparator.comma', { defaultMessage: 'Comma (,)' }) },
+      { value: 'dot', label: _t('settings.dataGrid.thousandsSeparator.dot', { defaultMessage: 'Dot (.)' }) },
+    ]}
+  />
 
-<FormTextField
-name="dataGrid.defaultAutoRefreshInterval"
-label={_t('settings.dataGrid.defaultAutoRefreshInterval', {
-    defaultMessage: 'Default grid auto refresh interval in seconds',
-})}
-defaultValue="10"
-/>
+  <FormTextField
+    name="dataGrid.defaultAutoRefreshInterval"
+    label={_t('settings.dataGrid.defaultAutoRefreshInterval', {
+      defaultMessage: 'Default grid auto refresh interval in seconds',
+    })}
+    defaultValue="10"
+  />
 
-<FormCheckboxField
-name="dataGrid.alignNumbersRight"
-label={_t('settings.dataGrid.alignNumbersRight', { defaultMessage: 'Align numbers to right' })}
-defaultValue={false}
-/>
+  <FormCheckboxField
+    name="dataGrid.alignNumbersRight"
+    label={_t('settings.dataGrid.alignNumbersRight', { defaultMessage: 'Align numbers to right' })}
+    defaultValue={false}
+  />
 
-<FormTextField
-name="dataGrid.collectionPageSize"
-label={_t('settings.dataGrid.collectionPageSize', {
-    defaultMessage: 'Collection page size (for MongoDB JSON view, must be between 5 and 1000)',
-})}
-defaultValue="50"
-/>
+  <FormTextField
+    name="dataGrid.collectionPageSize"
+    label={_t('settings.dataGrid.collectionPageSize', {
+      defaultMessage: 'Collection page size (for MongoDB JSON view, must be between 5 and 1000)',
+    })}
+    defaultValue="50"
+  />
 
-<FormSelectField
-label={_t('settings.dataGrid.coloringMode', { defaultMessage: 'Row coloring mode' })}
-name="dataGrid.coloringMode"
-isNative
-defaultValue="36"
-options={[
-    {
-    value: '36',
-    label: _t('settings.dataGrid.coloringMode.36', { defaultMessage: 'Every 3rd and 6th row' }),
-    },
-    {
-    value: '2-primary',
-    label: _t('settings.dataGrid.coloringMode.2-primary', {
-        defaultMessage: 'Every 2-nd row, primary color',
-    }),
-    },
-    {
-    value: '2-secondary',
-    label: _t('settings.dataGrid.coloringMode.2-secondary', {
-        defaultMessage: 'Every 2-nd row, secondary color',
-    }),
-    },
-    { value: 'none', label: _t('settings.dataGrid.coloringMode.none', { defaultMessage: 'None' }) },
-]}
-/>
+  <FormSelectField
+    label={_t('settings.dataGrid.coloringMode', { defaultMessage: 'Row coloring mode' })}
+    name="dataGrid.coloringMode"
+    isNative
+    defaultValue="36"
+    options={[
+      {
+        value: '36',
+        label: _t('settings.dataGrid.coloringMode.36', { defaultMessage: 'Every 3rd and 6th row' }),
+      },
+      {
+        value: '2-primary',
+        label: _t('settings.dataGrid.coloringMode.2-primary', {
+          defaultMessage: 'Every 2-nd row, primary color',
+        }),
+      },
+      {
+        value: '2-secondary',
+        label: _t('settings.dataGrid.coloringMode.2-secondary', {
+          defaultMessage: 'Every 2-nd row, secondary color',
+        }),
+      },
+      { value: 'none', label: _t('settings.dataGrid.coloringMode.none', { defaultMessage: 'None' }) },
+    ]}
+  />
 
-<FormCheckboxField
-name="dataGrid.showAllColumnsWhenSearch"
-label={_t('settings.dataGrid.showAllColumnsWhenSearch', {
-    defaultMessage: 'Show all columns when searching',
-})}
-defaultValue={false}
-/>
+  <FormCheckboxField
+    name="dataGrid.showAllColumnsWhenSearch"
+    label={_t('settings.dataGrid.showAllColumnsWhenSearch', {
+      defaultMessage: 'Show all columns when searching',
+    })}
+    defaultValue={false}
+  />
 </div>
 
 <style>
@@ -97,4 +109,12 @@ defaultValue={false}
     margin-left: var(--dim-large-form-margin);
     margin-top: var(--dim-large-form-margin);
   }
-</style>
+
+  .wrapper :global(select) {
+    max-width: 400px;
+  }
+
+  .wrapper :global(input) {
+    max-width: 400px;
+  }
+</style>

packages/web/src/settings/DefaultActionsSettings.svelte

@@ -56,6 +56,7 @@
     name="defaultAction.useLastUsedAction"
     label={_t('settings.defaultActions.useLastUsedAction', { defaultMessage: 'Use last used action' })}
     defaultValue={true}
+    data-testid="DefaultActionsSettings_useLastUsedAction"
     />
 
     <FormDefaultActionField
@@ -100,4 +101,8 @@
     margin-top: var(--dim-large-form-margin);
   }
 
+  .wrapper :global(select){
+    max-width: 400px;
+  }
+
 </style>

packages/web/src/settings/GeneralSettings.svelte

@@ -1,115 +1,138 @@
 <script lang="ts">
-    import { internalRedirectTo } from '../clientAuth';
-    import FormCheckboxField from '../forms/FormCheckboxField.svelte';
-    import FormFieldTemplateLarge from '../forms/FormFieldTemplateLarge.svelte';
-    import FormSelectField from '../forms/FormSelectField.svelte';
-    import SelectField from '../forms/SelectField.svelte';
-    import FontIcon from '../icons/FontIcon.svelte';
-    import { showModal } from '../modals/modalTools';
-    import { _t, getSelectedLanguage, setSelectedLanguage } from '../translations';
-    import { isMac } from '../utility/common';
-    import getElectron from '../utility/getElectron';
-    import ConfirmModal from '../modals/ConfirmModal.svelte';
+  import { internalRedirectTo } from '../clientAuth';
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+  import FormFieldTemplateLarge from '../forms/FormFieldTemplateLarge.svelte';
+  import FormSelectField from '../forms/FormSelectField.svelte';
+  import SelectField from '../forms/SelectField.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { showModal } from '../modals/modalTools';
+  import { _t, getSelectedLanguage, setSelectedLanguage } from '../translations';
+  import { isMac } from '../utility/common';
+  import getElectron from '../utility/getElectron';
+  import ConfirmModal from '../modals/ConfirmModal.svelte';
+  import hasPermission from '../utility/hasPermission';
+  import CheckboxField from '../forms/CheckboxField.svelte';
+  import { lockedDatabaseMode } from '../stores';
 
-    const electron = getElectron();
-    let restartWarning = false;
+  const electron = getElectron();
+  let restartWarning = false;
 </script>
+
 <div class="wrapper">
-
-    <div class="heading">{_t('settings.application', { defaultMessage: 'Application' })}</div>
-    <FormFieldTemplateLarge
-        label={_t('settings.localization.language', { defaultMessage: 'Language' })}
-        type="combo"
-    >
-        <SelectField
-    isNative
-    data-testid="SettingsModal_languageSelect"
-    options={[
-    { value: 'cs', label: 'Čeština' },
-    { value: 'de', label: 'Deutsch' },
-    { value: 'en', label: 'English' },
-    { value: 'es', label: 'Español' },
-    { value: 'fr', label: 'Français' },
-    { value: 'it', label: 'Italiano' },
-    { value: 'pt', label: 'Português (Brasil)' },
-    { value: 'sk', label: 'Slovenčina' },
-    { value: 'ja', label: '日本語' },
-    { value: 'zh', label: '中文' },
-    ]}
-    defaultValue={getSelectedLanguage()}
-    value={getSelectedLanguage()}
-    on:change={e => {
-    setSelectedLanguage(e.detail);
-    showModal(ConfirmModal, {
-        message: _t('settings.localization.reloadWarning', {
-        defaultMessage: 'Application will be reloaded to apply new language settings',
-        }),
-        onConfirm: () => {
-        setTimeout(() => {
-            internalRedirectTo(electron ? '/index.html' : '/');
-        }, 100);
-        },
-    });
-    }}
-/>
-    </FormFieldTemplateLarge>
-
-    <FormSelectField
-        label={_t('settings.other.autoUpdateApplication', { defaultMessage: 'Auto update application' })}
-        name="app.autoUpdateMode"
-        isNative
-        defaultValue=""
-        options={[
-            {
-            value: 'skip',
-            label: _t('settings.other.autoUpdateApplication.skip', {
-                defaultMessage: 'Do not check for new versions',
-            }),
-            },
-            {
-            value: '',
-            label: _t('settings.other.autoUpdateApplication.check', { defaultMessage: 'Check for new versions' }),
-            },
-            {
-            value: 'download',
-            label: _t('settings.other.autoUpdateApplication.download', {
-                defaultMessage: 'Check and download new versions',
-            }),
-            },
-        ]}
+  <div class="heading">{_t('settings.application', { defaultMessage: 'Application' })}</div>
+  <FormFieldTemplateLarge
+    label={_t('settings.localization.language', { defaultMessage: 'Language' })}
+    type="combo"
+    labelIcon="mdi mdi-translate"
+  >
+    <SelectField
+      isNative
+      data-testid="SettingsModal_languageSelect"
+      options={[
+        { value: 'cs', label: 'Čeština' },
+        { value: 'de', label: 'Deutsch' },
+        { value: 'en', label: 'English' },
+        { value: 'es', label: 'Español' },
+        { value: 'fr', label: 'Français' },
+        { value: 'it', label: 'Italiano' },
+        { value: 'pt', label: 'Português (Brasil)' },
+        { value: 'sk', label: 'Slovenčina' },
+        { value: 'ja', label: '日本語' },
+        { value: 'zh', label: '中文' },
+      ]}
+      defaultValue={getSelectedLanguage()}
+      value={getSelectedLanguage()}
+      on:change={e => {
+        setSelectedLanguage(e.detail);
+        showModal(ConfirmModal, {
+          message: _t('settings.localization.reloadWarning', {
+            defaultMessage: 'Application will be reloaded to apply new language settings',
+          }),
+          onConfirm: () => {
+            setTimeout(() => {
+              internalRedirectTo(electron ? '/index.html' : '/');
+            }, 100);
+          },
+        });
+      }}
     />
+  </FormFieldTemplateLarge>
 
-    <div class="heading">{_t('settings.appearance', { defaultMessage: 'Appearance' })}</div>
+  {#if electron}
+    <FormSelectField
+      label={_t('settings.other.autoUpdateApplication', { defaultMessage: 'Auto update application' })}
+      name="app.autoUpdateMode"
+      isNative
+      defaultValue=""
+      options={[
+        {
+          value: 'skip',
+          label: _t('settings.other.autoUpdateApplication.skip', {
+            defaultMessage: 'Do not check for new versions',
+          }),
+        },
+        {
+          value: '',
+          label: _t('settings.other.autoUpdateApplication.check', { defaultMessage: 'Check for new versions' }),
+        },
+        {
+          value: 'download',
+          label: _t('settings.other.autoUpdateApplication.download', {
+            defaultMessage: 'Check and download new versions',
+          }),
+        },
+      ]}
+    />
+  {/if}
 
-    {#if electron}
-        
-        <FormCheckboxField
-            name="app.useNativeMenu"
-            label={isMac()
-            ? _t('settings.useNativeWindowTitle', { defaultMessage: 'Use native window title' })
-            : _t('settings.useSystemNativeMenu', { defaultMessage: 'Use system native menu' })}
-            on:change={() => {
-            restartWarning = true;
-            }}
-        />
-        {#if restartWarning}
-            <div class="ml-5 mb-3">
-            <FontIcon icon="img warn" />
-            {_t('settings.nativeMenuRestartWarning', {
-                defaultMessage: 'Native menu settings will be applied after app restart',
-            })}
-            </div>
-        {/if}
-    {/if}
+  <FormFieldTemplateLarge
+    label={_t('settings.connection.showOnlyTabsFromSelectedDatabase', {
+      defaultMessage: 'Show only tabs from selected database',
+    })}
+    type="checkbox"
+    labelProps={{
+      onClick: () => {
+        $lockedDatabaseMode = !$lockedDatabaseMode;
+      },
+    }}
+  >
+    <CheckboxField
+      checked={$lockedDatabaseMode}
+      on:change={e => ($lockedDatabaseMode = e.target['checked'])}
+      data-testid="GeneralSettings_lockedDatabaseMode"
+    />
+  </FormFieldTemplateLarge>
 
+  <div class="heading">{_t('settings.appearance', { defaultMessage: 'Appearance' })}</div>
+
+  {#if electron}
     <FormCheckboxField
+      name="app.useNativeMenu"
+      label={isMac()
+        ? _t('settings.useNativeWindowTitle', { defaultMessage: 'Use native window title' })
+        : _t('settings.useSystemNativeMenu', { defaultMessage: 'Use system native menu' })}
+      on:change={() => {
+        restartWarning = true;
+      }}
+    />
+    {#if restartWarning}
+      <div class="ml-5 mb-3">
+        <FontIcon icon="img warn" />
+        {_t('settings.nativeMenuRestartWarning', {
+          defaultMessage: 'Native menu settings will be applied after app restart',
+        })}
+      </div>
+    {/if}
+  {/if}
+
+  <FormCheckboxField
     name="tabGroup.showServerName"
     label={_t('settings.tabGroup.showServerName', {
-        defaultMessage: 'Show server name alongside database name in title of the tab group',
+      defaultMessage: 'Show server name alongside database name in title of the tab group',
     })}
     defaultValue={false}
-    />
-
+    disabled={!hasPermission('settings/change')}
+  />
 </div>
 
 <style>
@@ -120,4 +143,7 @@
     margin-top: var(--dim-large-form-margin);
   }
 
-</style>
+  .wrapper :global(select) {
+    max-width: 400px;
+  }
+</style>

packages/web/src/settings/SQLEditorSettings.svelte

@@ -15,8 +15,6 @@
 <div class="wrapper">
     <div class="heading">{_t('settings.sqlEditor', { defaultMessage: 'SQL editor' })}</div>
 
-<div class="flex">
-<div class="col-3">
     <FormSelectField
     label={_t('settings.sqlEditor.sqlCommandsCase', { defaultMessage: 'SQL commands case' })}
     name="sqlEditor.sqlCommandsCase"
@@ -26,9 +24,8 @@
         { value: 'upperCase', label: 'UPPER CASE' },
         { value: 'lowerCase', label: 'lower case' },
     ]}
+    data-testid="SQLEditorSettings_sqlCommandsCase"
     />
-</div>
-<div class="col-3">
     <FormFieldTemplateLarge
     label={_t('settings.editor.keybinds', { defaultMessage: 'Editor keybinds' })}
     type="combo"
@@ -41,53 +38,49 @@
         on:change={e => ($currentEditorKeybindigMode = e.detail)}
     />
     </FormFieldTemplateLarge>
-</div>
-<div class="col-3">
     <FormFieldTemplateLarge
     label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })}
-    type="combo"
+    type="checkbox"
     >
     <CheckboxField
         checked={$currentEditorWrapEnabled}
         on:change={e => ($currentEditorWrapEnabled = e.target.checked)}
     />
     </FormFieldTemplateLarge>
-</div>
-</div>
 
-<FormTextField
-name="sqlEditor.limitRows"
-label={_t('settings.sqlEditor.limitRows', { defaultMessage: 'Return only N rows from query' })}
-placeholder={_t('settings.sqlEditor.limitRowsPlaceholder', { defaultMessage: '(No rows limit)' })}
-/>
+    <FormTextField
+    name="sqlEditor.limitRows"
+    label={_t('settings.sqlEditor.limitRows', { defaultMessage: 'Return only N rows from query' })}
+    placeholder={_t('settings.sqlEditor.limitRowsPlaceholder', { defaultMessage: '(No rows limit)' })}
+    />
 
-<FormCheckboxField
-name="sqlEditor.showTableAliasesInCodeCompletion"
-label={_t('settings.sqlEditor.showTableAliasesInCodeCompletion', {
-    defaultMessage: 'Show table aliases in code completion',
-})}
-defaultValue={false}
-/>
+    <FormCheckboxField
+    name="sqlEditor.showTableAliasesInCodeCompletion"
+    label={_t('settings.sqlEditor.showTableAliasesInCodeCompletion', {
+        defaultMessage: 'Show table aliases in code completion',
+    })}
+    defaultValue={false}
+    />
 
-<FormCheckboxField
-name="sqlEditor.disableSplitByEmptyLine"
-label={_t('settings.sqlEditor.disableSplitByEmptyLine', { defaultMessage: 'Disable split by empty line' })}
-defaultValue={false}
-/>
+    <FormCheckboxField
+    name="sqlEditor.disableSplitByEmptyLine"
+    label={_t('settings.sqlEditor.disableSplitByEmptyLine', { defaultMessage: 'Disable split by empty line' })}
+    defaultValue={false}
+    />
 
-<FormCheckboxField
-name="sqlEditor.disableExecuteCurrentLine"
-label={_t('settings.sqlEditor.disableExecuteCurrentLine', {
-    defaultMessage: 'Disable current line execution (Execute current)',
-})}
-defaultValue={false}
-/>
+    <FormCheckboxField
+    name="sqlEditor.disableExecuteCurrentLine"
+    label={_t('settings.sqlEditor.disableExecuteCurrentLine', {
+        defaultMessage: 'Disable current line execution (Execute current)',
+    })}
+    defaultValue={false}
+    />
 
-<FormCheckboxField
-name="sqlEditor.hideColumnsPanel"
-label={_t('settings.sqlEditor.hideColumnsPanel', { defaultMessage: 'Hide Columns/Filters panel by default' })}
-defaultValue={false}
-/>
+    <FormCheckboxField
+    name="sqlEditor.hideColumnsPanel"
+    label={_t('settings.sqlEditor.hideColumnsPanel', { defaultMessage: 'Hide Columns/Filters panel by default' })}
+    defaultValue={false}
+    />
 </div>
 
 <style>
@@ -97,4 +90,12 @@ defaultValue={false}
     margin-left: var(--dim-large-form-margin);
     margin-top: var(--dim-large-form-margin);
   }
+
+  .wrapper :global(input){
+    max-width: 400px;
+  }
+
+  .wrapper :global(select) {
+    max-width: 400px;
+  }
 </style>

packages/web/src/settings/settingsTools.ts

@@ -29,6 +29,13 @@ export function getStringSettingsValue(name, defaultValue) {
   return res;
 }
 
+export function getObjectSettingsValue(name, defaultValue) {
+  const settings = getCurrentSettings();
+  const res = settings[name];
+  if (res == null) return defaultValue;
+  return res;
+}
+
 export function getConnectionClickActionSetting(): 'connect' | 'openDetails' | 'none' {
   return getStringSettingsValue('defaultAction.connectionClick', 'connect');
 }

packages/web/src/stores.ts

@@ -168,7 +168,6 @@ export const nullStore = readable(null, () => {});
 export const currentArchive = writableWithStorage('default', 'currentArchive');
 export const currentApplication = writableWithStorage(null, 'currentApplication');
 export const isFileDragActive = writable(false);
-export const selectedCellsCallback = writable(null);
 export const loadingPluginStore = writable({
   loaded: false,
   loadingPackageName: null,

packages/web/src/tabpanel/TabContent.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" context="module">
+  let tabContentCounter = 0;
+</script>
+
 <script lang="ts">
   import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
@@ -19,7 +23,7 @@
   $: tabFocusedStore.set(tabFocused);
 </script>
 
-<div class:tabVisible>
+<div class:tabVisible data-testid={`TabContent_${tabContentCounter++}`}>
   <svelte:component this={tabComponent} {...$$restProps} {tabid} {tabVisible} {tabFocused} {tabPreviewMode} />
 </div>
 

packages/web/src/tabs/CollectionDataTab.svelte

@@ -221,5 +221,6 @@
     <ToolStripExportButton {quickExportHandlerRef} command="collectionDataGrid.export" />
     <ToolStripCommandButton command="collectionJsonView.expandAll" hideDisabled />
     <ToolStripCommandButton command="collectionJsonView.collapseAll" hideDisabled />
+    <ToolStripCommandButton command="dataGrid.toggleCellDataView" hideDisabled data-testid="CollectionDataTab_toggleCellDataView" />
   </svelte:fragment>
 </ToolStripContainer>

packages/web/src/tabs/ConnectionTab.svelte

@@ -59,6 +59,8 @@
       }
     );
 
+  $: isFormReadOnly = !!$values.import_source_id;
+
   // $: console.log('ConnectionTab.$values', $values);
   // $: console.log('ConnectionTab.driver', driver);
 
@@ -302,22 +304,25 @@
         {
           label: _t('common.general', { defaultMessage: 'General' }),
           component: ConnectionDriverFields,
-          props: { getDatabaseList, currentConnection },
+          props: { getDatabaseList, currentConnection, isFormReadOnly },
           testid: 'ConnectionTab_tabGeneral',
         },
         driver?.showConnectionTab('sshTunnel', $values) && {
           label: 'SSH Tunnel',
           component: ConnectionSshTunnelFields,
+          props: { isFormReadOnly },
           testid: 'ConnectionTab_tabSshTunnel',
         },
         driver?.showConnectionTab('ssl', $values) && {
           label: 'SSL',
           component: ConnectionSslFields,
+          props: { isFormReadOnly },
           testid: 'ConnectionTab_tabSsl',
         },
         {
           label: _t('common.advanced', { defaultMessage: 'Advanced' }),
           component: ConnectionAdvancedDriverFields,
+          props: { isFormReadOnly },
           testid: 'ConnectionTab_tabAdvanced',
         },
       ]}
@@ -383,7 +388,8 @@
           {/if}
           {#if isTesting}
             <div>
-              <FontIcon icon="icon loading" /> {_t('common.testingConnection', { defaultMessage: 'Testing connection' })}
+              <FontIcon icon="icon loading" />
+              {_t('common.testingConnection', { defaultMessage: 'Testing connection' })}
             </div>
           {/if}
         </div>

packages/web/src/tabs/DiagramTab.svelte

@@ -141,11 +141,10 @@
       />
     </svelte:fragment>
     <svelte:fragment slot="2">
-      <WidgetColumnBar>
+      <WidgetColumnBar storageName="diagramSettingsWidget">
         <WidgetColumnBarItem
           title="Settings"
           name="diagramSettings"
-          storageName="diagramSettingsWidget"
           onClose={() => {
             styleStore.update(x => ({ ...x, settingsVisible: false }));
           }}

packages/web/src/tabs/ImportExportTab.svelte

@@ -1,17 +1,19 @@
 <script lang="ts" context="module">
   const getCurrentEditor = () => getActiveComponent('ImportExportTab');
 
-  registerFileCommands({
-    idPrefix: 'impexp',
-    category: 'Import & Export',
-    getCurrentEditor,
-    folder: 'impexp',
-    format: 'json',
-    fileExtension: 'impexp',
+  if (isProApp()) {
+    registerFileCommands({
+      idPrefix: 'impexp',
+      category: 'Import & Export',
+      getCurrentEditor,
+      folder: 'impexp',
+      format: 'json',
+      fileExtension: 'impexp',
 
-    // undoRedo: true,
-    defaultTeamFolder: true,
-  });
+      // undoRedo: true,
+      defaultTeamFolder: true,
+    });
+  }
 </script>
 
 <script lang="ts">
@@ -55,6 +57,7 @@
   import { tick } from 'svelte';
   import { showSnackbarError } from '../utility/snackbar';
   import { _t } from '../translations';
+  import { isProApp } from '../utility/proTools';
 
   let busy = false;
   let executeNumber = 0;
@@ -290,21 +293,24 @@
         />
 
         {#if busy}
-          <LoadingInfo wrapper message={_t('importExport.processingImportExport', { defaultMessage: "Processing import/export ..." })} />
+          <LoadingInfo
+            wrapper
+            message={_t('importExport.processingImportExport', { defaultMessage: 'Processing import/export ...' })}
+          />
         {/if}
       </div>
 
       <svelte:fragment slot="2">
         <WidgetColumnBar>
           <WidgetColumnBarItem
-            title={_t('importExport.outputFiles', { defaultMessage: "Output files" })}
+            title={_t('importExport.outputFiles', { defaultMessage: 'Output files' })}
             name="output"
             height="20%"
             data-testid="ImportExportTab_outputFiles"
           >
             <RunnerOutputFiles {runnerId} {executeNumber} />
           </WidgetColumnBarItem>
-          <WidgetColumnBarItem title={_t('importExport.messages', { defaultMessage: "Messages" })} name="messages">
+          <WidgetColumnBarItem title={_t('importExport.messages', { defaultMessage: 'Messages' })} name="messages">
             <SocketMessageView
               eventName={runnerId ? `runner-info-${runnerId}` : null}
               {executeNumber}
@@ -313,16 +319,23 @@
             />
           </WidgetColumnBarItem>
           <WidgetColumnBarItem
-            title={_t('importExport.preview', { defaultMessage: "Preview" })}
+            title={_t('importExport.preview', { defaultMessage: 'Preview' })}
             name="preview"
             skip={!$previewReaderStore}
             data-testid="ImportExportTab_preview"
           >
             <PreviewDataGrid reader={$previewReaderStore} />
           </WidgetColumnBarItem>
-          <WidgetColumnBarItem title={_t('importExport.advancedConfiguration', { defaultMessage: "Advanced configuration" })} name="config" collapsed>
-            <FormTextField label={_t('importExport.schedule', { defaultMessage: "Schedule" })} name="schedule" />
-            <FormTextField label={_t('importExport.startVariableIndex', { defaultMessage: "Start variable index" })} name="startVariableIndex" />
+          <WidgetColumnBarItem
+            title={_t('importExport.advancedConfiguration', { defaultMessage: 'Advanced configuration' })}
+            name="config"
+            collapsed
+          >
+            <FormTextField label={_t('importExport.schedule', { defaultMessage: 'Schedule' })} name="schedule" />
+            <FormTextField
+              label={_t('importExport.startVariableIndex', { defaultMessage: 'Start variable index' })}
+              name="startVariableIndex"
+            />
           </WidgetColumnBarItem>
         </WidgetColumnBar>
       </svelte:fragment>
@@ -331,17 +344,19 @@
   <svelte:fragment slot="toolstrip">
     {#if busy}
       <ToolStripButton icon="icon stop" on:click={handleCancel} data-testid="ImportExportTab_stopButton"
-        >{_t('importExport.stop', { defaultMessage: "Stop" })}</ToolStripButton
+        >{_t('importExport.stop', { defaultMessage: 'Stop' })}</ToolStripButton
       >
     {:else}
       <ToolStripButton on:click={handleExecute} icon="icon run" data-testid="ImportExportTab_executeButton"
-        >{_t('importExport.run', { defaultMessage: "Run" })}</ToolStripButton
+        >{_t('importExport.run', { defaultMessage: 'Run' })}</ToolStripButton
       >
     {/if}
     <ToolStripButton icon="img shell" on:click={handleGenerateScript} data-testid="ImportExportTab_generateScriptButton"
-      >{_t('importExport.generateScript', { defaultMessage: "Generate script" })}</ToolStripButton
+      >{_t('importExport.generateScript', { defaultMessage: 'Generate script' })}</ToolStripButton
     >
-    <ToolStripSaveButton idPrefix="impexp" />
+    {#if isProApp()}
+      <ToolStripSaveButton idPrefix="impexp" />
+    {/if}
   </svelte:fragment>
 </ToolStripContainer>
 

packages/web/src/tabs/JsonLinesEditorTab.svelte

@@ -16,7 +16,7 @@
   registerCommand({
     id: 'jsonl.save',
     group: 'save',
-    category: 'JSON Lines editor',
+    category: __t('command.jsonl', { defaultMessage: 'JSON Lines editor' }),
     name: __t('command.jsonl.save', { defaultMessage: 'Save' }),
     toolbar: true,
     isRelatedToTab: true,
@@ -27,7 +27,7 @@
 
   registerCommand({
     id: 'jsonl.preview',
-    category: 'JSON Lines editor',
+    category: __t('command.jsonl', { defaultMessage: 'JSON Lines editor' }),
     name: __t('command.jsonl.preview', { defaultMessage: 'Preview' }),
     icon: 'icon preview',
     keyText: 'F5',
@@ -37,7 +37,7 @@
 
   registerCommand({
     id: 'jsonl.previewNewTab',
-    category: 'JSON Lines editor',
+    category: __t('command.jsonl', { defaultMessage: 'JSON Lines editor' }),
     name: __t('command.jsonl.previewNewTab', { defaultMessage: 'Preview in new tab' }),
     icon: 'icon preview',
     testEnabled: () => getCurrentEditor() != null,
@@ -46,7 +46,7 @@
 
   registerCommand({
     id: 'jsonl.closePreview',
-    category: 'JSON Lines editor',
+    category: __t('command.jsonl', { defaultMessage: 'JSON Lines editor' }),
     name: __t('command.jsonl.closePreview', { defaultMessage: 'Close preview' }),
     icon: 'icon close',
     testEnabled: () => getCurrentEditor()?.isPreview(),

packages/web/src/tabs/QueryTab.svelte

@@ -170,6 +170,9 @@
   import QueryAiAssistant from '../ai/QueryAiAssistant.svelte';
   import { getCurrentSettings } from '../stores';
   import { Messages } from 'openai/resources/chat/completions';
+  import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
+  import WidgetsInnerContainer from '../widgets/WidgetsInnerContainer.svelte';
+  import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
 
   export let tabid;
   export let conid;
@@ -717,9 +720,6 @@
                 ...driver?.getQuerySplitterOptions('editor'),
                 splitByEmptyLine: !$settingsValue?.['sqlEditor.disableSplitByEmptyLine'],
               }}
-              options={{
-                wrap: enableWrap,
-              }}
               value={$editorState.value || ''}
               menu={createMenu()}
               on:input={e => {
@@ -791,33 +791,45 @@
       </VerticalSplitter>
     </svelte:fragment>
     <svelte:fragment slot="2">
-      <QueryAiAssistant
-        bind:this={domAiAssistant}
-        {conid}
-        {database}
-        {driver}
-        onClose={() => {
-          isAiAssistantVisible = false;
-        }}
-        text={$editorValue}
-        getLine={() => domEditor.getEditor().getSelectionRange().start.row}
-        onInsertAtCursor={text => {
-          const editor = domEditor.getEditor();
-          editor.session.insert(editor.getCursorPosition(), text);
-          domEditor?.getEditor()?.focus();
-        }}
-        getTextOrSelectedText={() => domEditor.getEditor().getSelectedText() || $editorValue}
-        onSetSelectedText={text => {
-          const editor = domEditor.getEditor();
-          if (editor.getSelectedText()) {
-            const range = editor.selection.getRange();
-            editor.session.replace(range, text);
-          } else {
-            editor.setValue(text);
-          }
-        }}
-        {tabid}
-      />
+      <WidgetColumnBar>
+        <WidgetColumnBarItem
+          title={_t('query.AiAssistant', { defaultMessage: 'AI Assistant' })}
+          onClose={() => {
+            isAiAssistantVisible = false;
+          }}
+          name='aiAssistant'
+        >
+          <WidgetsInnerContainer skipDefineWidth flexContainer>
+            <QueryAiAssistant
+              bind:this={domAiAssistant}
+              {conid}
+              {database}
+              {driver}
+              onClose={() => {
+                isAiAssistantVisible = false;
+              }}
+              text={$editorValue}
+              getLine={() => domEditor.getEditor().getSelectionRange().start.row}
+              onInsertAtCursor={text => {
+                const editor = domEditor.getEditor();
+                editor.session.insert(editor.getCursorPosition(), text);
+                domEditor?.getEditor()?.focus();
+              }}
+              getTextOrSelectedText={() => domEditor.getEditor().getSelectedText() || $editorValue}
+              onSetSelectedText={text => {
+                const editor = domEditor.getEditor();
+                if (editor.getSelectedText()) {
+                  const range = editor.selection.getRange();
+                  editor.session.replace(range, text);
+                } else {
+                  editor.setValue(text);
+                }
+              }}
+              {tabid}
+            />
+          </WidgetsInnerContainer>
+        </WidgetColumnBarItem>
+      </WidgetColumnBar>
     </svelte:fragment>
   </HorizontalSplitter>
   <svelte:fragment slot="toolstrip">
@@ -839,11 +851,17 @@
             },
           })}
       >
-        {queryRowsLimit ? _t('query.limitRows', { defaultMessage: 'Limit {queryRowsLimit} rows', values: { queryRowsLimit } }) : _t('query.unlimitedRows', { defaultMessage: 'Unlimited rows' })}</ToolStripButton
+        {queryRowsLimit
+          ? _t('query.limitRows', { defaultMessage: 'Limit {queryRowsLimit} rows', values: { queryRowsLimit } })
+          : _t('query.unlimitedRows', { defaultMessage: 'Unlimited rows' })}</ToolStripButton
       >
     {/if}
     {#if resultCount == 1}
-      <ToolStripExportButton command="jslTableGrid.export" {quickExportHandlerRef} label={_t('export.result', { defaultMessage: 'Export result' })} />
+      <ToolStripExportButton
+        command="jslTableGrid.export"
+        {quickExportHandlerRef}
+        label={_t('export.result', { defaultMessage: 'Export result' })}
+      />
     {/if}
     <ToolStripDropDownButton
       menu={() =>

packages/web/src/tabs/SettingsTab.svelte

@@ -3,111 +3,114 @@
 </script>
 
 <script lang="ts">
-  import SettingsMenuControl from "../elements/SettingsMenuControl.svelte";
-  import GeneralSettings from "../settings/GeneralSettings.svelte";
-  import SettingsFormProvider from "../forms/SettingsFormProvider.svelte";
-  import ConnectionSettings from "../settings/ConnectionSettings.svelte";
-  import ThemeSettings from "../settings/ThemeSettings.svelte";
-  import DefaultActionsSettings from "../settings/DefaultActionsSettings.svelte";
-  import BehaviourSettings from "../settings/BehaviourSettings.svelte";
-  import ExternalToolsSettings from "../settings/ExternalToolsSettings.svelte";
-  import LicenseSettings from "../settings/LicenseSettings.svelte";
-  import { isProApp } from "../utility/proTools";
-  import { _t } from "../translations";
-  import CommandListTab from "./CommandListTab.svelte";
-  import DataGridSettings from "../settings/DataGridSettings.svelte";
-    import SQLEditorSettings from "../settings/SQLEditorSettings.svelte";
-    import AiSettingsTab from "../settings/AiSettingsTab.svelte";
+  import SettingsMenuControl from '../elements/SettingsMenuControl.svelte';
+  import GeneralSettings from '../settings/GeneralSettings.svelte';
+  import SettingsFormProvider from '../forms/SettingsFormProvider.svelte';
+  import ConnectionSettings from '../settings/ConnectionSettings.svelte';
+  import ThemeSettings from '../settings/ThemeSettings.svelte';
+  import DefaultActionsSettings from '../settings/DefaultActionsSettings.svelte';
+  import BehaviourSettings from '../settings/BehaviourSettings.svelte';
+  import ExternalToolsSettings from '../settings/ExternalToolsSettings.svelte';
+  import LicenseSettings from '../settings/LicenseSettings.svelte';
+  import { isProApp } from '../utility/proTools';
+  import { _t } from '../translations';
+  import CommandListTab from './CommandListTab.svelte';
+  import DataGridSettings from '../settings/DataGridSettings.svelte';
+  import SQLEditorSettings from '../settings/SQLEditorSettings.svelte';
+  import AiSettingsTab from '../settings/AiSettingsTab.svelte';
+  import hasPermission from '../utility/hasPermission';
 
-    export let selectedItem = 'general';
+  export let selectedItem = 'general';
 
-    const menuItems = [
-        {
-            label: _t('settings.general', { defaultMessage: 'General' }),
-            identifier: 'general',
-            component: GeneralSettings,
-            props: {},
-            testid: 'settings-general',
-        },
-        {
-            label: _t('settings.connection', { defaultMessage: 'Connection' }),
-            identifier: 'connection',
-            component: ConnectionSettings,
-            props: {},
-            testid: 'settings-connection',
-        },
-        {
-            label: _t('settings.dataGrid.title', { defaultMessage: 'Data grid' }),
-            identifier: 'data-grid',
-            component: DataGridSettings,
-            props: {},
-            testid: 'settings-data-grid',
-        },
-        {
-            label: _t('settings.sqlEditor.title', { defaultMessage: 'SQL Editor' }),
-            identifier: 'sql-editor',
-            component: SQLEditorSettings,
-            props: {},
-            testid: 'settings-sql-editor',
-        },
-        {
-            label: _t('settings.theme', { defaultMessage: 'Themes' }),
-            identifier: 'theme',
-            component: ThemeSettings,
-            props: {},
-            testid: 'settings-themes',
-        },
-        {
-            label: _t('settings.defaultActions', { defaultMessage: 'Default Actions' }),
-            identifier: 'default-actions',
-            component: DefaultActionsSettings,
-            props: {},
-            testid: 'settings-default-actions',
-        },
-        {
-            label: _t('settings.behaviour', { defaultMessage: 'Behaviour' }),
-            identifier: 'behaviour',
-            component: BehaviourSettings,
-            props: {},
-            testid: 'settings-behaviour',
-        },
-        {
-            label: _t('settings.externalTools', { defaultMessage: 'External Tools' }),
-            identifier: 'external-tools',
-            component: ExternalToolsSettings,
-            props: {},
-            testid: 'settings-external-tools',
-        },
-        {
-            label: _t('command.settings.shortcuts', { defaultMessage: 'Keyboard shortcuts' }),
-            identifier: 'shortcuts',
-            component: CommandListTab,
-            props: {},
-            testid: 'settings-shortcuts',
-        },
-        isProApp() && {
-            label: _t('settings.license', { defaultMessage: 'License' }),
-            identifier: 'license',
-            component: LicenseSettings,
-            props: {},
-            testid: 'settings-license',
-        },
-        isProApp() && {
-            label: _t('settings.AI', { defaultMessage: 'AI'}),
-            identifier: 'ai',
-            component: AiSettingsTab,
-            props: {},
-            testid: 'settings-ai',
-        },
-    ];
+  const menuItems = [
+    {
+      label: _t('settings.general', { defaultMessage: 'General' }),
+      identifier: 'general',
+      component: GeneralSettings,
+      props: {},
+      testid: 'settings-general',
+    },
+    hasPermission('settings/change') && {
+      label: _t('settings.connection', { defaultMessage: 'Connection' }),
+      identifier: 'connection',
+      component: ConnectionSettings,
+      props: {},
+      testid: 'settings-connection',
+    },
+    hasPermission('settings/change') && {
+      label: _t('settings.dataGrid.title', { defaultMessage: 'Data grid' }),
+      identifier: 'data-grid',
+      component: DataGridSettings,
+      props: {},
+      testid: 'settings-data-grid',
+    },
+    hasPermission('settings/change') && {
+      label: _t('settings.sqlEditor.title', { defaultMessage: 'SQL Editor' }),
+      identifier: 'sql-editor',
+      component: SQLEditorSettings,
+      props: {},
+      testid: 'settings-sql-editor',
+    },
+    {
+      label: _t('settings.theme', { defaultMessage: 'Themes' }),
+      identifier: 'theme',
+      component: ThemeSettings,
+      props: {},
+      testid: 'settings-themes',
+    },
+    hasPermission('settings/change') && {
+      label: _t('settings.defaultActions', { defaultMessage: 'Default Actions' }),
+      identifier: 'default-actions',
+      component: DefaultActionsSettings,
+      props: {},
+      testid: 'settings-default-actions',
+    },
+    hasPermission('settings/change') && {
+      label: _t('settings.behaviour', { defaultMessage: 'Behaviour' }),
+      identifier: 'behaviour',
+      component: BehaviourSettings,
+      props: {},
+      testid: 'settings-behaviour',
+    },
+    hasPermission('settings/change') && {
+      label: _t('settings.externalTools', { defaultMessage: 'External Tools' }),
+      identifier: 'external-tools',
+      component: ExternalToolsSettings,
+      props: {},
+      testid: 'settings-external-tools',
+    },
+    hasPermission('settings/change') && {
+      label: _t('command.settings.shortcuts', { defaultMessage: 'Keyboard shortcuts' }),
+      identifier: 'shortcuts',
+      component: CommandListTab,
+      props: {},
+      testid: 'settings-shortcuts',
+    },
+    hasPermission('settings/change') &&
+      isProApp() && {
+        label: _t('settings.license', { defaultMessage: 'License' }),
+        identifier: 'license',
+        component: LicenseSettings,
+        props: {},
+        testid: 'settings-license',
+      },
+    hasPermission('settings/change') &&
+      isProApp() && {
+        label: _t('settings.AI', { defaultMessage: 'AI' }),
+        identifier: 'ai',
+        component: AiSettingsTab,
+        props: {},
+        testid: 'settings-ai',
+      },
+  ];
 </script>
 
 <SettingsFormProvider>
-  <SettingsMenuControl 
-      items={menuItems}
-      bind:value={selectedItem}
-      flex1={true}
-      flexColContainer={true}
-      scrollableContentContainer={true}
+  <SettingsMenuControl
+    items={menuItems}
+    bind:value={selectedItem}
+    flex1={true}
+    flexColContainer={true}
+    scrollableContentContainer={true}
   />
-</SettingsFormProvider>
+</SettingsFormProvider>

packages/web/src/tabs/TableDataTab.svelte

@@ -23,7 +23,7 @@
       time: 60,
       name: __t('command.datagrid.setAutoRefresh.60', { defaultMessage: 'Refresh every 60 seconds' }),
     },
-  ]
+  ];
 
   registerCommand({
     id: 'tableData.save',
@@ -172,7 +172,10 @@
     const resp = await apiCall('database-connections/run-script', { conid, database, sql, useTransaction: true });
     const { errorMessage } = resp || {};
     if (errorMessage) {
-      showModal(ErrorMessageModal, { title: _t('tableData.errorWhenSaving', { defaultMessage: 'Error when saving' }), message: errorMessage });
+      showModal(ErrorMessageModal, {
+        title: _t('tableData.errorWhenSaving', { defaultMessage: 'Error when saving' }),
+        message: errorMessage,
+      });
     } else {
       dispatchChangeSet({ type: 'reset', value: createChangeSet() });
       cache.update(reloadDataCacheFunc);
@@ -192,7 +195,10 @@
       });
       const { errorMessage } = resp || {};
       if (errorMessage) {
-        showModal(ErrorMessageModal, { title: _t('tableData.errorWhenSaving', { defaultMessage: 'Error when saving' }), message: errorMessage });
+        showModal(ErrorMessageModal, {
+          title: _t('tableData.errorWhenSaving', { defaultMessage: 'Error when saving' }),
+          message: errorMessage,
+        });
       } else {
         dispatchChangeSet({ type: 'reset', value: createChangeSet() });
         cache.update(reloadDataCacheFunc);
@@ -284,7 +290,10 @@
       { command: 'tableData.stopAutoRefresh', hideDisabled: true },
       { command: 'tableData.startAutoRefresh', hideDisabled: true },
       'tableData.setAutoRefresh.1',
-      ...INTERVALS.map(seconds => ({ command: `tableData.setAutoRefresh.${seconds}`, text: `...${seconds}` + ' ' + _t('command.datagrid.autoRefresh.seconds', { defaultMessage: 'seconds' }) })),
+      ...INTERVALS.map(seconds => ({
+        command: `tableData.setAutoRefresh.${seconds}`,
+        text: `...${seconds}` + ' ' + _t('command.datagrid.autoRefresh.seconds', { defaultMessage: 'seconds' }),
+      })),
     ];
   }
 </script>
@@ -360,13 +369,23 @@
     >
 
     <ToolStripCommandSplitButton
-      buttonLabel={autoRefreshStarted ? _t('tableData.refreshEvery', { defaultMessage: 'Refresh (every {autoRefreshInterval}s)', values: { autoRefreshInterval } }) : null}
+      buttonLabel={autoRefreshStarted
+        ? _t('tableData.refreshEvery', {
+            defaultMessage: 'Refresh (every {autoRefreshInterval}s)',
+            values: { autoRefreshInterval },
+          })
+        : null}
       commands={['dataGrid.refresh', ...createAutoRefreshMenu()]}
       hideDisabled
       data-testid="TableDataTab_refreshGrid"
     />
     <ToolStripCommandSplitButton
-      buttonLabel={autoRefreshStarted ? _t('tableData.refreshEvery', { defaultMessage: 'Refresh (every {autoRefreshInterval}s)', values: { autoRefreshInterval } }) : null}
+      buttonLabel={autoRefreshStarted
+        ? _t('tableData.refreshEvery', {
+            defaultMessage: 'Refresh (every {autoRefreshInterval}s)',
+            values: { autoRefreshInterval },
+          })
+        : null}
       commands={['dataForm.refresh', ...createAutoRefreshMenu()]}
       hideDisabled
       data-testid="TableDataTab_refreshForm"
@@ -402,7 +421,14 @@
 
     <ToolStripButton
       icon={$collapsedLeftColumnStore ? 'icon columns-outline' : 'icon columns'}
-      on:click={() => collapsedLeftColumnStore.update(x => !x)}>{_t('tableData.viewColumns', { defaultMessage: 'View columns' })}</ToolStripButton
+      on:click={() => collapsedLeftColumnStore.update(x => !x)}
+      >{_t('tableData.viewColumns', { defaultMessage: 'View columns' })}</ToolStripButton
     >
+
+    <ToolStripCommandButton
+      command="dataGrid.toggleCellDataView"
+      hideDisabled
+      data-testid="TableDataTab_toggleCellDataView"
+    />
   </svelte:fragment>
 </ToolStripContainer>

packages/web/src/tabs/ViewDataTab.svelte

@@ -129,6 +129,7 @@
 
       <ToolStripCommandButton command="dataGrid.refresh" />
       <ToolStripExportButton {quickExportHandlerRef} />
+      <ToolStripCommandButton command="dataGrid.toggleCellDataView" hideDisabled />
     </svelte:fragment>
   </ToolStripContainer>
 {/if}

packages/web/src/translations.ts

@@ -124,7 +124,7 @@ export function __t(key: string, options: TranslateOptions): DefferedTranslation
   };
 }
 
-export function _tval(x: string | DefferedTranslationResult): string {
+export function _tval(x: any | DefferedTranslationResult): string {
   if (typeof x === 'string') return x;
   if (typeof x?._transKey === 'string') {
     return _t(x._transKey, x._transOptions);
@@ -132,7 +132,7 @@ export function _tval(x: string | DefferedTranslationResult): string {
   if (typeof x?._transCallback === 'function') {
     return x._transCallback();
   }
-  return '';
+  return x?.toString() || '';
 }
 
 export function isDefferedTranslationResult(x: string | DefferedTranslationResult): x is DefferedTranslationResult {

packages/web/src/utility/common.ts

@@ -155,24 +155,28 @@ export function getKeyTextFromEvent(e) {
   return keyText;
 }
 
-export function getDatabasStatusMenu(dbid) {
+export function getDatabasStatusMenu(dbid, driver = null) {
   function callSchemalListChanged() {
     apiCall('database-connections/dispatch-database-changed-event', { event: 'schema-list-changed', ...dbid });
   }
-  return [
-    {
+  return _.compact([
+    driver?.supportsIncrementalAnalysis && {
       text: _t('command.database.refreshIncremental', { defaultMessage: 'Refresh DB structure (incremental)' }),
       onClick: () => {
         apiCall('database-connections/sync-model', dbid);
         callSchemalListChanged();
       },
+      testid: 'DatabasStatusMenu_refreshIncremental',
     },
     {
-      text: _t('command.database.refreshFull', { defaultMessage: 'Refresh DB structure (full)' }),
+      text: driver?.supportsIncrementalAnalysis
+        ? _t('command.database.refreshFull', { defaultMessage: 'Refresh DB structure (full)' })
+        : _t('command.database.refresh', { defaultMessage: 'Refresh DB structure' }),
       onClick: () => {
         apiCall('database-connections/sync-model', { ...dbid, isFullRefresh: true });
         callSchemalListChanged();
       },
+      testid: 'DatabasStatusMenu_refreshFull',
     },
     {
       text: _t('command.database.reopenConnection', { defaultMessage: 'Reopen connection' }),
@@ -180,6 +184,7 @@ export function getDatabasStatusMenu(dbid) {
         apiCall('database-connections/refresh', dbid);
         callSchemalListChanged();
       },
+      testid: 'DatabasStatusMenu_reopenConnection',
     },
     {
       text: _t('command.database.disconnect', { defaultMessage: 'Disconnect' }),
@@ -188,6 +193,7 @@ export function getDatabasStatusMenu(dbid) {
         if (electron) apiCall('database-connections/disconnect', dbid);
         switchCurrentDatabase(null);
       },
+      testid: 'DatabasStatusMenu_disconnect',
     },
-  ];
+  ]);
 }

packages/web/src/utility/createQuickExportMenu.ts

@@ -7,7 +7,7 @@ import { isProApp } from './proTools';
 export function createQuickExportMenuItems(handler: (fmt: QuickExportDefinition) => Function, advancedExportMenuItem) {
   const extensions = getExtensions();
   return [
-    isProApp() && {
+    {
       text: _t('export.exportAdvanced', { defaultMessage : 'Export advanced...'}),
       ...advancedExportMenuItem,
     },

packages/web/src/utility/storageCache.js

@@ -1,6 +1,7 @@
 const cache = {};
 
 export function getLocalStorage(key, defaultValue = undefined) {
+  if (!key) return defaultValue;
   if (key in cache) return cache[key];
   const item = localStorage.getItem(key);
   if (item) {
@@ -16,11 +17,13 @@ export function getLocalStorage(key, defaultValue = undefined) {
 }
 
 export function setLocalStorage(key, value) {
+  if (!key) return;
   localStorage.setItem(key, JSON.stringify(value));
   delete cache[key];
 }
 
 export function removeLocalStorage(key) {
+  if (!key) return;
   localStorage.removeItem(key);
   delete cache[key];
 }

packages/web/src/utility/widgetBarResizing.ts

@@ -0,0 +1,308 @@
+import { newMatcherFn } from 'diff2html/lib/rematch';
+import _ from 'lodash';
+
+export interface WidgetBarStoredProps {
+  contentHeight: number;
+  collapsed: boolean;
+}
+
+export interface WidgetBarStoredPropsResult {
+  [name: string]: WidgetBarStoredProps;
+}
+
+export interface WidgetBarComputedProps {
+  contentHeight: number;
+  storedHeight?: number;
+  visibleItemsCount: number;
+  splitterVisible: boolean;
+  collapsed: boolean;
+  clickableTitle: boolean;
+}
+
+export interface WidgetBarComputedResult {
+  [name: string]: WidgetBarComputedProps;
+}
+
+export interface WidgetBarItemDefinition {
+  name: string;
+  height?: string; // e.g. '200px' or '30%'
+  collapsed: boolean; // initial value of collapsing status
+  skip: boolean;
+  minimalContentHeight: number;
+  storeHeight: boolean;
+}
+
+export type PushWidgetBarItemDefinitionFunction = (def: WidgetBarItemDefinition) => void;
+export type UpdateWidgetBarItemDefinitionFunction = (name: string, def: Partial<WidgetBarItemDefinition>) => void;
+export type ResizeWidgetItemFunction = (name: string, deltaY: number) => void;
+export type ToggleCollapseWidgetItemFunction = (name: string) => void;
+
+export interface WidgetBarContainerProps {
+  clientHeight: number;
+  titleHeight: number;
+  splitterHeight: number;
+}
+
+// accordeon mode - only one item can be expanded at a time
+export function widgetShouldBeInAccordeonMode(
+  container: WidgetBarContainerProps,
+  definitions: WidgetBarItemDefinition[]
+): boolean {
+  const visibleItems = definitions.filter(def => !def.skip);
+
+  const availableContentHeight =
+    container.clientHeight -
+    visibleItems.length * container.titleHeight -
+    Math.max(0, visibleItems.length - 1) * container.splitterHeight;
+
+  const minimalRequiredContentHeight = _.sum(visibleItems.map(def => def.minimalContentHeight));
+  return availableContentHeight < minimalRequiredContentHeight;
+}
+
+export function computeInitialWidgetBarProps(
+  container: WidgetBarContainerProps,
+  definitions: WidgetBarItemDefinition[],
+  currentProps: WidgetBarComputedResult
+): WidgetBarComputedResult {
+  if (!container.clientHeight) {
+    return currentProps;
+  }
+  const visibleItems = definitions.filter(def => !def.skip);
+  const expandedItems = visibleItems.filter(def => !(currentProps[def.name]?.collapsed ?? def.collapsed));
+  const res: WidgetBarComputedResult = {};
+
+  const availableContentHeight =
+    container.clientHeight -
+    visibleItems.length * container.titleHeight -
+    Math.max(0, expandedItems.length - 1) * container.splitterHeight;
+
+  if (widgetShouldBeInAccordeonMode(container, definitions)) {
+    // In accordeon mode, only the first expanded item is shown, others are collapsed
+    const expandedItem = visibleItems.find(def => !def.collapsed);
+    for (const def of visibleItems) {
+      const isExpanded = def.name === expandedItem?.name;
+      res[def.name] = {
+        contentHeight: isExpanded ? availableContentHeight : 0,
+        storedHeight: currentProps[def.name]?.contentHeight,
+        visibleItemsCount: visibleItems.length,
+        splitterVisible: false,
+        collapsed: !isExpanded,
+        clickableTitle: !isExpanded,
+      };
+    }
+    return res;
+  }
+
+  // First pass: calculate base heights
+  let totalContentHeight = 0;
+  const itemHeights = {};
+
+  const flexibleItems = [];
+  for (const def of expandedItems) {
+    if (def.storeHeight && currentProps[def.name]?.storedHeight > 0) {
+      const storedHeight = currentProps[def.name].storedHeight;
+      itemHeights[def.name] = storedHeight;
+      totalContentHeight += storedHeight;
+    } else if (def.height) {
+      let height = 0;
+      if (_.isString(def.height) && def.height.endsWith('px')) {
+        height = parseInt(def.height.slice(0, -2));
+      } else if (_.isString(def.height) && def.height.endsWith('%'))
+        height = (availableContentHeight * parseFloat(def.height.slice(0, -1))) / 100;
+      else {
+        height = parseInt(def.height);
+      }
+      if (height < def.minimalContentHeight) {
+        height = def.minimalContentHeight;
+      }
+      totalContentHeight += height;
+      itemHeights[def.name] = height;
+    } else {
+      flexibleItems.push(def);
+    }
+  }
+
+  // Second pass - distribute remaining height
+  if (flexibleItems.length > 0) {
+    let remainingHeight = availableContentHeight - totalContentHeight;
+    for (const def of flexibleItems) {
+      let height = remainingHeight / flexibleItems.length;
+      if (height < def.minimalContentHeight) height = def.minimalContentHeight;
+      itemHeights[def.name] = height;
+    }
+  }
+
+  // Third pass - update heights to match available height
+  totalContentHeight = _.sum(Object.values(itemHeights));
+  if (totalContentHeight != availableContentHeight) {
+    const scale = availableContentHeight / totalContentHeight;
+    for (const def of expandedItems) {
+      itemHeights[def.name] = itemHeights[def.name] * scale;
+    }
+  }
+
+  // Final assembly of results
+  let visibleIndex = 0;
+  for (const def of visibleItems) {
+    res[def.name] = {
+      contentHeight: Math.round(itemHeights[def.name] || 0),
+      visibleItemsCount: visibleItems.length,
+      splitterVisible: visibleItems.length > 1 && visibleIndex < visibleItems.length - 1,
+      collapsed: !expandedItems.includes(def),
+      storedHeight: currentProps[def.name]?.storedHeight,
+      clickableTitle: true,
+    };
+    visibleIndex += 1;
+  }
+
+  return res;
+}
+
+export function handleResizeWidgetBar(
+  container: WidgetBarContainerProps,
+  definitions: WidgetBarItemDefinition[],
+  currentProps: WidgetBarComputedResult,
+  resizedItemName: string,
+  deltaY: number
+): WidgetBarComputedResult {
+  const res = _.cloneDeep(currentProps);
+  const visibleItems = definitions.filter(def => !def.skip);
+  const currentItemDef = definitions.find(def => def.name === resizedItemName);
+  if (!currentItemDef || currentItemDef.collapsed) return res;
+  const currentItemProps = res[resizedItemName];
+  let itemIndex = visibleItems.findIndex(def => def.name === resizedItemName);
+  const itemProps = res[currentItemDef.name];
+  const nextItemDef = visibleItems[itemIndex + 1];
+  const currentHeight = itemProps.contentHeight;
+  const nextItemProps = res[nextItemDef.name];
+  if (!nextItemDef) return res;
+
+  if (deltaY < 0) {
+    let newHeight = currentHeight + deltaY;
+    if (newHeight < currentItemDef.minimalContentHeight) {
+      newHeight = currentItemDef.minimalContentHeight;
+    }
+    const actualDeltaY = newHeight - currentHeight;
+    nextItemProps.contentHeight -= actualDeltaY;
+    currentItemProps.contentHeight += actualDeltaY;
+
+    // // moving up - reduce height of resized item, if too small, reduce height of previous items
+    // let remainingDeltaY = -deltaY;
+    // let itemIndex = visibleItems.findIndex(def => def.name === resizedItemName);
+    // while (remainingDeltaY > 0 && itemIndex >= 0) {
+    //   const itemDef = visibleItems[itemIndex];
+    //   const itemProps = res[itemDef.name];
+    //   const currentHeight = itemProps.contentHeight;
+    //   const minimalHeight = itemDef.minimalContentHeight;
+    //   const reducibleHeight = currentHeight - minimalHeight;
+    //   if (reducibleHeight > 0) {
+    //     const reduction = Math.min(reducibleHeight, remainingDeltaY);
+    //     itemProps.contentHeight -= reduction;
+    //     remainingDeltaY -= reduction;
+    //   }
+    //   itemIndex -= 1;
+    // }
+  } else {
+    let newHeight = nextItemProps.contentHeight - deltaY;
+    if (newHeight < nextItemDef.minimalContentHeight) {
+      newHeight = nextItemDef.minimalContentHeight;
+    }
+    const actualDeltaY = nextItemProps.contentHeight - newHeight;
+    nextItemProps.contentHeight -= actualDeltaY;
+    currentItemProps.contentHeight += actualDeltaY;
+
+    // moving down - increase height of resized item, reduce size of next item, if too small, reduce size of further items
+    // if all items below are at minimal height, stop
+    // let remainingDeltaY = deltaY;
+    // let itemIndex = visibleItems.findIndex(def => def.name === resizedItemName);
+    // while (remainingDeltaY > 0 && itemIndex < visibleItems.length) {
+    //   const itemDef = visibleItems[itemIndex];
+    //   const itemProps = res[itemDef.name];
+    //   const currentHeight = itemProps.contentHeight;
+    //   const minimalHeight = itemDef.minimalContentHeight;
+    //   const reducibleHeight = currentHeight - minimalHeight;
+    //   if (reducibleHeight > 0) {
+    //     const reduction = Math.min(reducibleHeight, remainingDeltaY);
+    //     itemProps.contentHeight -= reduction;
+    //     resizedItemProps.contentHeight += reduction;
+    //     remainingDeltaY -= reduction;
+    //   }
+    //   itemIndex += 1;
+    // }
+  }
+
+  if (currentItemDef.storeHeight) {
+    currentItemProps.storedHeight = currentItemProps.contentHeight;
+  }
+
+  if (nextItemDef.storeHeight) {
+    nextItemProps.storedHeight = nextItemProps.contentHeight;
+  }
+
+  return res;
+}
+
+export function toggleCollapseWidgetBar(
+  container: WidgetBarContainerProps,
+  definitions: WidgetBarItemDefinition[],
+  currentProps: WidgetBarComputedResult,
+  toggledItemName: string
+): WidgetBarComputedResult {
+  const visibleItems = definitions.filter(def => !def.skip);
+
+  if (widgetShouldBeInAccordeonMode(container, definitions)) {
+    // In accordeon mode, only the first expanded item is shown, others are collapsed
+    const res: WidgetBarComputedResult = {};
+    for (const def of visibleItems) {
+      const isExpanded = def.name === toggledItemName;
+      res[def.name] = {
+        contentHeight: undefined,
+        visibleItemsCount: visibleItems.length,
+        splitterVisible: false,
+        collapsed: !isExpanded,
+        clickableTitle: !isExpanded,
+      };
+    }
+    return res;
+  }
+
+  const res = _.cloneDeep(currentProps);
+  res[toggledItemName].collapsed = !res[toggledItemName].collapsed;
+  return computeInitialWidgetBarProps(container, definitions, res);
+}
+
+export function extractStoredWidgetBarProps(
+  definitions: WidgetBarItemDefinition[],
+  currentProps: WidgetBarComputedResult
+): WidgetBarStoredPropsResult {
+  const res: WidgetBarStoredPropsResult = {};
+  for (const key in currentProps) {
+    const def = definitions.find(d => d.name === key);
+    if (!def) continue;
+    res[key] = {
+      contentHeight: def.storeHeight ? currentProps[key]?.storedHeight : undefined,
+      collapsed: currentProps[key]?.collapsed,
+    };
+  }
+
+  return res;
+}
+
+export function createWidgetBarComputedResultFromStored(stored: WidgetBarStoredPropsResult): WidgetBarComputedResult {
+  const res: WidgetBarComputedResult = {};
+  if (!stored) return res;
+  let visibleIndex = 0;
+  const visibleCount = Object.keys(stored).length;
+  for (const key in stored) {
+    res[key] = {
+      storedHeight: stored[key]?.contentHeight,
+      contentHeight: 0,
+      collapsed: stored[key]?.collapsed,
+      clickableTitle: false,
+      splitterVisible: visibleCount > 1 && visibleIndex < visibleCount - 1,
+      visibleItemsCount: 0,
+    };
+    visibleIndex += 1;
+  }
+  return res;
+}

packages/web/src/widgets/ArchiveWidget.svelte

@@ -7,11 +7,11 @@
   import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
 </script>
 
-<WidgetColumnBar>
-  <WidgetColumnBarItem title="Archive folders, DB models" name="folders" height="50%" storageName='archiveFoldersWidget'>
+<WidgetColumnBar storageName="archiveWidget">
+  <WidgetColumnBarItem title="Archive folders, DB models" name="folders" height="50%">
     <ArchiveFolderList />
   </WidgetColumnBarItem>
-  <WidgetColumnBarItem title="Files, Tables, Views, Functions" name="files" storageName='archiveFilesWidget'>
+  <WidgetColumnBarItem title="Files, Tables, Views, Functions" name="files">
     <ArchiveFilesList />
   </WidgetColumnBarItem>
 </WidgetColumnBar>

packages/web/src/widgets/CellDataWidget.svelte

@@ -1,6 +1,4 @@
 <script lang="ts" context="module">
-  import { isWktGeometry } from 'dbgate-tools';
-
   const formats = [
     {
       type: 'textWrap',
@@ -14,6 +12,12 @@
       component: TextCellViewNoWrap,
       single: false,
     },
+    {
+      type: 'form',
+      title: 'Form',
+      component: FormCellView,
+      single: false,
+    },
     {
       type: 'json',
       title: 'Json',
@@ -59,10 +63,13 @@
   ];
 
   function autodetect(selection) {
+    if (selection[0]?.isSelectedFullRow) {
+      return 'form';
+    }
+
     if (selectionCouldBeShownOnMap(selection)) {
       return 'map';
     }
-
     if (selection[0]?.engine?.databaseEngineTypes?.includes('document')) {
       return 'jsonRow';
     }
@@ -92,32 +99,31 @@
   import JsonRowView from '../celldata/JsonRowView.svelte';
   import MapCellView from '../celldata/MapCellView.svelte';
   import PictureCellView from '../celldata/PictureCellView.svelte';
+  import FormCellView from '../celldata/FormCellView.svelte';
   import TextCellViewNoWrap from '../celldata/TextCellViewNoWrap.svelte';
   import TextCellViewWrap from '../celldata/TextCellViewWrap.svelte';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
   import { selectionCouldBeShownOnMap } from '../elements/SelectionMapView.svelte';
   import SelectField from '../forms/SelectField.svelte';
-  import { selectedCellsCallback } from '../stores';
   import WidgetTitle from './WidgetTitle.svelte';
   import JsonExpandedCellView from '../celldata/JsonExpandedCellView.svelte';
   import XmlCellView from '../celldata/XmlCellView.svelte';
   import { _t } from '../translations';
 
-  let selectedFormatType = 'autodetect';
+  export let onClose;
+  export let selection;
 
-  export let selection = undefined;
+  let selectedFormatType = 'autodetect';
 
   $: autodetectFormatType = autodetect(selection);
   $: autodetectFormat = formats.find(x => x.type == autodetectFormatType);
 
   $: usedFormatType = selectedFormatType == 'autodetect' ? autodetectFormatType : selectedFormatType;
   $: usedFormat = formats.find(x => x.type == usedFormatType);
-
-  $: selection = $selectedCellsCallback ? $selectedCellsCallback() : [];
 </script>
 
 <div class="wrapper">
-  <WidgetTitle>{_t('cellDataWidget.title', { defaultMessage: "Cell data view" })}</WidgetTitle>
+  <WidgetTitle {onClose}>{_t('cellDataWidget.title', { defaultMessage: 'Cell data view' })}</WidgetTitle>
   <div class="main">
     <div class="toolbar">
       Format:<span>&nbsp;</span>
@@ -127,18 +133,30 @@
         on:change={e => (selectedFormatType = e.detail)}
         data-testid="CellDataWidget_selectFormat"
         options={[
-          { value: 'autodetect', label: _t('cellDataWidget.autodetect', { defaultMessage: "Autodetect - {autoDetectTitle}", values : { autoDetectTitle: autodetectFormat.title } }) },
+          {
+            value: 'autodetect',
+            label: _t('cellDataWidget.autodetect', {
+              defaultMessage: 'Autodetect - {autoDetectTitle}',
+              values: { autoDetectTitle: autodetectFormat.title },
+            }),
+          },
           ...formats.map(fmt => ({ label: fmt.title, value: fmt.type })),
         ]}
       />
     </div>
     <div class="data">
       {#if usedFormat.single && selection?.length != 1}
-        <ErrorInfo message={_t('cellDataWidget.mustSelectOneCell', { defaultMessage: "Must be selected one cell" })} alignTop />
+        <ErrorInfo
+          message={_t('cellDataWidget.mustSelectOneCell', { defaultMessage: 'Must be selected one cell' })}
+          alignTop
+        />
       {:else if usedFormat == null}
-        <ErrorInfo message={_t('cellDataWidget.formatNotSelected', { defaultMessage: "Format not selected" })} alignTop />
+        <ErrorInfo
+          message={_t('cellDataWidget.formatNotSelected', { defaultMessage: 'Format not selected' })}
+          alignTop
+        />
       {:else if !selection || selection.length == 0}
-        <ErrorInfo message={_t('cellDataWidget.noDataSelected', { defaultMessage: "No data selected" })} alignTop />
+        <ErrorInfo message={_t('cellDataWidget.noDataSelected', { defaultMessage: 'No data selected' })} alignTop />
       {:else}
         <svelte:component this={usedFormat?.component} {selection} />
       {/if}

packages/web/src/widgets/DatabaseWidget.svelte

@@ -17,14 +17,9 @@
   $: cloudContentList = useCloudContentList();
 </script>
 
-<WidgetColumnBar {hidden}>
+<WidgetColumnBar {hidden} storageName="databaseWidget">
   {#if $config?.singleConnection}
-    <WidgetColumnBarItem
-      title={_t('widget.databases', { defaultMessage: 'Databases' })}
-      name="databases"
-      height="35%"
-      storageName="databasesWidget"
-    >
+    <WidgetColumnBarItem title={_t('widget.databases', { defaultMessage: 'Databases' })} name="databases" height="35%">
       <SingleConnectionDatabaseList connection={$config?.singleConnection} />
     </WidgetColumnBarItem>
   {:else if !$config?.singleDbConnection}
@@ -32,7 +27,7 @@
       title={_t('common.connections', { defaultMessage: 'Connections' })}
       name="connections"
       height="35%"
-      storageName="connectionsWidget"
+      storeHeight
     >
       <ConnectionList
         passProps={{

packages/web/src/widgets/DatabaseWidgetDetailContent.svelte

@@ -34,7 +34,6 @@
   title={_t('widget.pinned', { defaultMessage: 'Pinned' })}
   name="pinned"
   height="15%"
-  storageName="pinnedItemsWidget"
   skip={!_.compact($pinnedDatabases).length &&
     !$pinnedTables.some(x => x && x.conid == conid && x.database == $currentDatabase?.name)}
   positiveCondition={correctCloudStatus}
@@ -46,8 +45,7 @@
   title={driver?.databaseEngineTypes?.includes('document')
     ? _t('widget.collectionsContainers', { defaultMessage: 'Collections/containers' })
     : _t('widget.tablesViewsFunctions', { defaultMessage: 'Tables, views, functions' })}
-  name="dbObjects"
-  storageName="dbObjectsWidget"
+  name="dbObjectsSql"
   skip={!(
     conid &&
     (database || singleDatabase) &&
@@ -60,8 +58,7 @@
 
 <WidgetColumnBarItem
   title={_t('widget.keys', { defaultMessage: 'Keys' })}
-  name="dbObjects"
-  storageName="dbObjectsWidget"
+  name="dbObjectsKeyValue"
   skip={!(conid && (database || singleDatabase) && driver?.databaseEngineTypes?.includes('keyvalue'))}
   positiveCondition={correctCloudStatus}
 >
@@ -70,8 +67,7 @@
 
 <WidgetColumnBarItem
   title={_t('widget.databaseContent', { defaultMessage: 'Database content' })}
-  name="dbObjects"
-  storageName="dbObjectsWidget"
+  name="dbObjectsFocused"
   skip={conid && (database || singleDatabase)}
   positiveCondition={correctCloudStatus}
 >
@@ -84,8 +80,7 @@
 
 <WidgetColumnBarItem
   title={_t('widget.databaseContent', { defaultMessage: 'Database content' })}
-  name="dbObjects"
-  storageName="dbObjectsWidget"
+  name="dbObjectsError"
   skip={!(conid && (database || singleDatabase) && !driver)}
   positiveCondition={correctCloudStatus}
 >
@@ -102,7 +97,6 @@
   title={_t('widget.databaseContent', { defaultMessage: 'Database content' })}
   name="incorrectClaudStatus"
   height="15%"
-  storageName="incorrectClaudStatusWidget"
   skip={correctCloudStatus}
 >
   <WidgetsInnerContainer>

packages/web/src/widgets/FilesWidget.svelte

@@ -18,13 +18,13 @@
   $: favorites = useFavorites();
 </script>
 
-<WidgetColumnBar>
-  <WidgetColumnBarItem title={_t('files.savedFiles', { defaultMessage: "Saved files" })} name="files" height="70%" storageName="savedFilesWidget">
+<WidgetColumnBar storageName="filesWidget">
+  <WidgetColumnBarItem title={_t('files.savedFiles', { defaultMessage: 'Saved files' })} name="files" height="70%">
     <SavedFilesList />
   </WidgetColumnBarItem>
 
   {#if hasPermission('files/favorites/read')}
-    <WidgetColumnBarItem title={_t('files.favorites', { defaultMessage: "Favorites" })} name="favorites" storageName="favoritesWidget">
+    <WidgetColumnBarItem title={_t('files.favorites', { defaultMessage: 'Favorites' })} name="favorites">
       <WidgetsInnerContainer>
         <AppObjectList list={$favorites || []} module={favoriteFileAppObject} />
       </WidgetsInnerContainer>

packages/web/src/widgets/HistoryWidget.svelte

@@ -16,11 +16,13 @@
   import { _t } from '../translations';
 
   $: favorites = useFavorites();
-
 </script>
 
-<WidgetColumnBar>
-  <WidgetColumnBarItem title={_t('history.recentlyClosedTabs', { defaultMessage: "Recently closed tabs" })} name="closedTabs" storageName='closedTabsWidget'>
+<WidgetColumnBar storageName="historyWidget">
+  <WidgetColumnBarItem
+    title={_t('history.recentlyClosedTabs', { defaultMessage: 'Recently closed tabs' })}
+    name="closedTabs"
+  >
     <WidgetsInnerContainer>
       <AppObjectList
         list={_.sortBy(
@@ -31,7 +33,7 @@
       />
     </WidgetsInnerContainer>
   </WidgetColumnBarItem>
-  <WidgetColumnBarItem title={_t('history.queryHistory', { defaultMessage: "Query history" })} name="queryHistory" storageName='queryHistoryWidget'>
+  <WidgetColumnBarItem title={_t('history.queryHistory', { defaultMessage: 'Query history' })} name="queryHistory">
     <QueryHistoryList />
   </WidgetColumnBarItem>
 </WidgetColumnBar>