v7.0.0

This reverts commit 3f05934b6b.

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

@@ -21,6 +21,10 @@ jobs:
           - windows-2022
           - ubuntu-22.04
     steps:
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+      - run: python -m pip install --upgrade pip setuptools
       - name: Install python 3.11 (MacOS)
         if: matrix.os == 'macos-14'
         run: |

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

@@ -21,6 +21,10 @@ jobs:
           - windows-2022
           - ubuntu-22.04
     steps:
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+      - run: python -m pip install --upgrade pip setuptools
       - name: Install python 3.11 (MacOS)
         if: matrix.os == 'macos-14'
         run: |

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

@@ -21,6 +21,10 @@ jobs:
           - windows-2022
           - ubuntu-22.04
     steps:
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+      - run: python -m pip install --upgrade pip setuptools
       - name: Install python 3.11 (MacOS)
         if: matrix.os == 'macos-14'
         run: |
@@ -43,7 +47,7 @@ jobs:
           repository: dbgate/dbgate-pro
           token: ${{ secrets.GH_TOKEN }}
           path: dbgate-pro
-          ref: ae1fcf6e61c6f7dfbb21005daa259c68e899a80a
+          ref: 7ee269974ea614b22ceb1ccf43b9a81b1a886d04
       - name: Merge dbgate/dbgate-pro
         run: |
           mkdir ../dbgate-pro

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

@@ -21,6 +21,10 @@ jobs:
           - windows-2022
           - ubuntu-22.04
     steps:
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+      - run: python -m pip install --upgrade pip setuptools
       - name: Install python 3.11 (MacOS)
         if: matrix.os == 'macos-14'
         run: |
@@ -43,7 +47,7 @@ jobs:
           repository: dbgate/dbgate-pro
           token: ${{ secrets.GH_TOKEN }}
           path: dbgate-pro
-          ref: ae1fcf6e61c6f7dfbb21005daa259c68e899a80a
+          ref: 7ee269974ea614b22ceb1ccf43b9a81b1a886d04
       - name: Merge dbgate/dbgate-pro
         run: |
           mkdir ../dbgate-pro

.github/workflows/build-app.yaml

@@ -21,6 +21,10 @@ jobs:
           - windows-2022
           - ubuntu-22.04
     steps:
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+      - run: python -m pip install --upgrade pip setuptools
       - name: Install python 3.11 (MacOS)
         if: matrix.os == 'macos-14'
         run: |

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

@@ -39,7 +39,7 @@ jobs:
           repository: dbgate/dbgate-pro
           token: ${{ secrets.GH_TOKEN }}
           path: dbgate-pro
-          ref: ae1fcf6e61c6f7dfbb21005daa259c68e899a80a
+          ref: 7ee269974ea614b22ceb1ccf43b9a81b1a886d04
       - 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: ae1fcf6e61c6f7dfbb21005daa259c68e899a80a
+          ref: 7ee269974ea614b22ceb1ccf43b9a81b1a886d04
       - 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: ae1fcf6e61c6f7dfbb21005daa259c68e899a80a
+          ref: 7ee269974ea614b22ceb1ccf43b9a81b1a886d04
       - name: Merge dbgate/dbgate-pro
         run: |
           mkdir ../dbgate-pro

.github/workflows/e2e-pro.yaml

@@ -5,10 +5,14 @@ name: Cypress tests with screenshots PREMIUM
 'on':
   push:
     branches:
+      - stable
       - master
       - develop
       - feature/**
       - hotfix/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 jobs:
   e2e-tests:
     runs-on: ubuntu-latest
@@ -26,7 +30,7 @@ jobs:
           repository: dbgate/dbgate-pro
           token: ${{ secrets.GH_TOKEN }}
           path: dbgate-pro
-          ref: ae1fcf6e61c6f7dfbb21005daa259c68e899a80a
+          ref: 7ee269974ea614b22ceb1ccf43b9a81b1a886d04
       - name: Merge dbgate/dbgate-pro
         run: |
           mkdir ../dbgate-pro
@@ -69,8 +73,8 @@ jobs:
         with:
           name: screenshots
           path: screenshots
-      - name: Push E2E screenshots
-        if: ${{ github.ref_name == 'master' }}
+      - name: Push E2E screenshots - stable
+        if: ${{ github.ref_name == 'stable' }}
         run: |
           git config --global user.email "info@dbgate.info"
           git config --global user.name "GitHub Actions"
@@ -80,6 +84,17 @@ jobs:
           git add .
           git commit --amend --no-edit
           git push --force
+      - name: Push E2E screenshots - master
+        if: ${{ github.ref_name == 'master' }}
+        run: |
+          git config --global user.email "info@dbgate.info"
+          git config --global user.name "GitHub Actions"
+          git clone https://${{ secrets.DIFLOW_GIT_SECRET }}@github.com/dbgate/dbgate-img.git
+          cp ../dbgate-merged/e2e-tests/screenshots/*.png dbgate-img/static/img-dev
+          cd dbgate-img/static/img-dev
+          git add .
+          git commit --amend --no-edit
+          git push --force
     services:
       postgres-cypress:
         image: postgres

.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,43 @@ Builds:
  - linux - application for linux
  - win - application for Windows
 
+## 7.0.0
+- CHANGED: New design of application, new theme system
+- ADDED: Theme AI assistant - create custom themes using AI (Premium)
+- CHANGED: Themes are now defined in JSON files, custom themes could be shared via DbGate Cloud
+- REMOVED: Custom themes are no longer part of plugins
+- CHANGED: Huge improvements of Redis support
+- ADDED: Support for Redis JSON and Stream types
+- ADDED: Editing Redis values (Strings, Hashes, Lists, Sets, Sorted Sets, JSON, Streams)
+- ADDED: Support for Team Folders (Team Premium)
+- CHANGED: Upgraded Svelte to version 4
+- ADDED: Differentiate pinned database with same name #1306
+- ADDED: Database icons/logos for faster visual recognition #1222
+
+## 6.8.2
+- FIXED: Initialize storage database from envoronment variables failed with PostgreSQL
+
+## 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
@@ -79,7 +116,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
 

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbgate",
-  "version": "6.0.0-alpha.1",
+  "version": "7.0.0-alpha.1",
   "private": true,
   "author": "Jan Prochazka <jenasoft.database@gmail.com>",
   "description": "Opensource database administration tool",

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

@@ -85,14 +85,16 @@ describe('Data browser data', () => {
     cy.contains('MySql-connection').click();
     cy.contains('MyChinook').click();
     cy.contains('Album').click();
+
+    // hide what is not needed
+    cy.testid('WidgetIconPanel_database').click();
+    cy.testid('DataGrid_itemReferences').click();
+
     cy.testid('DataFilterControl_input_Title').type('Rock{enter}');
     cy.contains('Rows: 7');
     cy.testid('DataFilterControl_input_AlbumId').type('>10xxx{enter}');
     cy.contains('Rows: 7');
-    cy.testid('DataFilterControl_filtermenu_Title').click();
-    // hide what is not needed
-    cy.testid('WidgetIconPanel_database').click();
-    cy.testid('DataGrid_itemReferences').click();
+    cy.testid('DataFilterControl_filtermenu_ArtistId').click();
     cy.themeshot('data-browser-filter');
     cy.testid('DataGridCore_button_clearFilters').click();
     cy.contains('Rows: 347');
@@ -202,7 +204,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 +215,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 +296,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 +341,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 +351,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 +477,48 @@ 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.contains('Rows: 412');
+    cy.get('[data-row="0"][data-col="header"]').click();
+    cy.get('[data-row="1"][data-col="header"]').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');
+  });
+
+  it('Export window', () => {
+    cy.contains('Redis-connection').click();
+    cy.contains('db1').click();
+    cy.contains('actor:*').click();
+    cy.contains('1000').click();
+    cy.contains('Sandra');
+    cy.themeshot('data-browser-redis-hash');
+  });
 });

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

@@ -229,10 +229,8 @@ describe('Charts', () => {
     // 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');
+    cy.testid('ThemeSkeleton-Dark-built-in').click();
+    cy.testid('ThemeSkeleton-Light-built-in').click();
 
     // General
     cy.contains(/^General$/).click();

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

@@ -3,6 +3,8 @@ const { formatQueryWithoutParams } = require('dbgate-tools');
 
 global.DBGATE_PACKAGES = {
   'dbgate-tools': require('dbgate-tools'),
+  'dbgate-sqltree': require('dbgate-sqltree'),
+  'dbgate-datalib': require('dbgate-datalib'),
 };
 
 function requireEngineDriver(engine) {
@@ -141,7 +143,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 +163,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');
@@ -237,7 +239,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');
   });
@@ -256,7 +258,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/cypress/support/commands.js

@@ -37,7 +37,7 @@ Cypress.Commands.add(
   },
   (subject, file, options) => {
     cy.window().then(win => {
-      win.__changeCurrentTheme('theme-dark');
+      win.__changeCurrentTheme('dark');
     });
 
     // cy.screenshot(`${file}-dark`, {
@@ -64,7 +64,7 @@ Cypress.Commands.add(
     // });
 
     cy.window().then(win => {
-      win.__changeCurrentTheme('theme-light');
+      win.__changeCurrentTheme('light');
     });
 
     if (subject) {

e2e-tests/data/redis-db1.redis

@@ -0,0 +1,15 @@
+HSET "actor:1000" "first_name" "Sandra"
+HSET "actor:1000" "last_name" "Bullock"
+HSET "actor:1000" "date_of_birth" "1964"
+
+HSET "actor:1001" "first_name" "Jon"
+HSET "actor:1001" "last_name" "Hamm"
+HSET "actor:1001" "date_of_birth" "1971"
+
+HSET "actor:1002" "first_name" "Allison"
+HSET "actor:1002" "last_name" "Janney"
+HSET "actor:1002" "date_of_birth" "1959"
+
+HSET "actor:1003" "first_name" "Steve"
+HSET "actor:1003" "last_name" "Coogan"
+HSET "actor:1003" "date_of_birth" "1965"

e2e-tests/init/browse-data.js

@@ -125,7 +125,7 @@ async function initMongoDatabase(dbname, inputDirectory) {
   // });
 }
 
-async function initRedisDatabase(inputDirectory) {
+async function initRedisDatabase(inputDirectory, inputDirectory2) {
   await dbgateApi.executeQuery({
     connection: {
       server: process.env.SERVER_redis,
@@ -152,6 +152,19 @@ async function initRedisDatabase(inputDirectory) {
     });
   }
 
+  await dbgateApi.executeQuery({
+    connection: {
+      server: process.env.SERVER_redis,
+      user: process.env.USER_redis,
+      password: process.env.PASSWORD_redis,
+      port: process.env.PORT_redis,
+      engine: 'redis@dbgate-plugin-redis',
+      database: 1,
+    },
+    sqlFile: path.join(inputDirectory2, 'redis-db1.redis'),
+    // logScriptItems: true,
+  });
+
   // await dbgateApi.importDatabase({
   //   connection: {
   //     server: process.env.SERVER_postgres,
@@ -188,7 +201,10 @@ async function run() {
   await initMongoDatabase('MgChinook', path.resolve(path.join(__dirname, '../data/chinook-jsonl')));
   await initMongoDatabase('MgRivers', path.resolve(path.join(__dirname, '../data/rivers-jsonl')));
 
-  await initRedisDatabase(path.resolve(path.join(__dirname, '../data/redis')));
+  await initRedisDatabase(
+    path.resolve(path.join(__dirname, '../data/redis')),
+    path.resolve(path.join(__dirname, '../data'))
+  );
 
   await copyFolder(
     path.resolve(path.join(__dirname, '../data/chinook-jsonl')),

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbgate-integration-tests",
-  "version": "6.0.0-alpha.1",
+  "version": "7.0.0-alpha.1",
   "homepage": "https://dbgate.org/",
   "repository": {
     "type": "git",

integration-tests/setupTests.js

@@ -1,6 +1,7 @@
 global.DBGATE_PACKAGES = {
   'dbgate-tools': require('dbgate-tools'),
   'dbgate-sqltree': require('dbgate-sqltree'),
+  'dbgate-datalib': require('dbgate-datalib'),
 };
 
 const { prettyFactory } = require('pino-pretty');

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 {

integration-tests/wait.js

@@ -3,6 +3,7 @@ const engines = require('./engines');
 global.DBGATE_PACKAGES = {
   'dbgate-tools': require('dbgate-tools'),
   'dbgate-sqltree': require('dbgate-sqltree'),
+  'dbgate-datalib': require('dbgate-datalib'),
 };
 
 async function connectEngine(engine) {

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "6.7.3",
+  "version": "7.0.0",
   "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,54 @@
+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
+
+STORAGE_SERVER=localhost
+STORAGE_USER=postgres
+STORAGE_PASSWORD=Pwd2020Db
+STORAGE_PORT=5432
+STORAGE_DATABASE=dbgate_sfill
+STORAGE_ENGINE=postgres@dbgate-plugin-postgres
+
+
+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

@@ -1,7 +1,7 @@
 {
   "name": "dbgate-api",
   "main": "src/index.js",
-  "version": "6.0.0-alpha.1",
+  "version": "7.0.0-alpha.1",
   "homepage": "https://dbgate.org/",
   "repository": {
     "type": "git",
@@ -30,10 +30,10 @@
     "compare-versions": "^3.6.0",
     "cors": "^2.8.5",
     "cross-env": "^6.0.3",
-    "dbgate-datalib": "^6.0.0-alpha.1",
+    "dbgate-datalib": "^7.0.0-alpha.1",
     "dbgate-query-splitter": "^4.11.9",
-    "dbgate-sqltree": "^6.0.0-alpha.1",
-    "dbgate-tools": "^6.0.0-alpha.1",
+    "dbgate-sqltree": "^7.0.0-alpha.1",
+    "dbgate-tools": "^7.0.0-alpha.1",
     "debug": "^4.3.4",
     "diff": "^5.0.0",
     "diff2html": "^3.4.13",
@@ -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",
@@ -86,7 +87,7 @@
   "devDependencies": {
     "@types/fs-extra": "^9.0.11",
     "@types/lodash": "^4.14.149",
-    "dbgate-types": "^6.0.0-alpha.1",
+    "dbgate-types": "^7.0.0-alpha.1",
     "env-cmd": "^10.1.0",
     "jsdoc-to-markdown": "^9.0.5",
     "node-loader": "^1.0.2",

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/controllers/databaseConnections.js

@@ -393,6 +393,12 @@ module.exports = {
     return null;
   },
 
+  dispatchRedisKeysChanged_meta: true,
+  dispatchRedisKeysChanged({ conid, database }) {
+    socket.emit(`redis-keys-changed-${conid}-${database}`);
+    return null;
+  },
+
   loadKeys_meta: true,
   async loadKeys({ conid, database, root, filter, limit }, req) {
     await testConnectionPermission(conid, req);
@@ -494,6 +500,20 @@ module.exports = {
     return res.result || null;
   },
 
+  multiCallMethod_meta: true,
+  async multiCallMethod({ conid, database, callList }, req) {
+    await testConnectionPermission(conid, req);
+
+    const opened = await this.ensureOpened(conid, database);
+    const res = await this.sendRequest(opened, { msgtype: 'multiCallMethod', callList });
+    if (res.errorMessage) {
+      return {
+        errorMessage: res.errorMessage,
+      };
+    }
+    return res.result || null;
+  },
+
   status_meta: true,
   async status({ conid, database }, req) {
     if (!conid) {

packages/api/src/controllers/files.js

@@ -68,6 +68,7 @@ module.exports = {
     await fs.unlink(path.join(filesdir(), folder, file));
     socket.emitChanged(`files-changed`, { folder });
     socket.emitChanged(`all-files-changed`);
+    this.emitChangedFolder(folder);
     return true;
   },
 
@@ -140,6 +141,15 @@ module.exports = {
     return deserialize(format, text);
   },
 
+  emitChangedFolder(folder) {
+    if (folder == 'themes') {
+      socket.emitChanged(`file-themes-changed`);
+    }
+    if (folder == 'favorites') {
+      socket.emitChanged('files-changed-favorites');
+    }
+  },
+
   save_meta: true,
   async save({ folder, file, data, format }, req) {
     const loadedPermissions = await loadPermissionsFromRequest(req);
@@ -173,6 +183,8 @@ module.exports = {
       if (folder == 'shell') {
         scheduler.reload();
       }
+      this.emitChangedFolder(folder);
+
       return true;
     }
   },
@@ -240,8 +252,8 @@ module.exports = {
   },
 
   exportDiagram_meta: true,
-  async exportDiagram({ filePath, html, css, themeType, themeClassName, watermark }) {
-    await fs.writeFile(filePath, getDiagramExport(html, css, themeType, themeClassName, watermark));
+  async exportDiagram({ filePath, html, css, themeType, themeVariables, watermark }) {
+    await fs.writeFile(filePath, getDiagramExport(html, css, themeType, themeVariables, watermark));
     return true;
   },
 
@@ -346,4 +358,20 @@ module.exports = {
     }
     return res;
   },
+
+  getFileThemes_meta: true,
+  async getFileThemes(_params, req) {
+    const loadedPermissions = await loadPermissionsFromRequest(req);
+    if (!hasPermission(`files/themes/read`, loadedPermissions)) return [];
+    const dir = path.join(filesdir(), 'themes');
+    if (!(await fs.exists(dir))) return [];
+    const files = await fs.readdir(dir);
+    const res = [];
+    for (const file of files) {
+      const filePath = path.join(dir, file);
+      const text = await fs.readFile(filePath, { encoding: 'utf-8' });
+      res.push(JSON.parse(text));
+    }
+    return res;
+  },
 };

packages/api/src/currentVersion.js

@@ -1,5 +1,5 @@
 
 module.exports = { 
-  version: '6.0.0-alpha.1',
+  version: '7.0.0-alpha.1',
   buildTime: '2024-12-01T00:00:00Z'
 };

packages/api/src/index.js

@@ -147,6 +147,7 @@ const shell = require('./shell/index');
 global.DBGATE_PACKAGES = {
   'dbgate-tools': require('dbgate-tools'),
   'dbgate-sqltree': require('dbgate-sqltree'),
+  'dbgate-datalib': require('dbgate-datalib'),
 };
 
 if (processArgs.startProcess) {

packages/api/src/proc/databaseConnectionProcess.js

@@ -368,6 +368,107 @@ async function handleSaveTableData({ msgid, changeSet }) {
   }
 }
 
+async function handleMultiCallMethod({ msgid, callList }) {
+  try {
+    const driver = requireEngineDriver(storedConnection);
+    await driver.invokeMethodCallList(dbhan, callList);
+
+    // for (const change of changeSet.changes) {
+    //   if (change.type === 'string') {
+    //     await driver.query(dbhan, `SET "${change.key}" "${change.value}"`);
+    //   } else if (change.type === 'json') {
+    //     await driver.query(dbhan, `JSON.SET "${change.key}" $ '${change.value.replace(/'/g, "\\'")}'`);
+    //   } else if (change.type === 'hash') {
+    //     if (change.updates && Array.isArray(change.updates)) {
+    //       for (const update of change.updates) {
+    //         await driver.query(dbhan, `HSET "${change.key}" "${update.key}" "${update.value}"`);
+          
+    //         if (update.ttl !== undefined && update.ttl !== null && update.ttl !== -1) {
+    //           try {
+    //             await dbhan.client.call('HEXPIRE', change.key, update.ttl, 'FIELDS', 1, update.key);
+    //           } catch (e) {}
+    //         }
+    //       }
+    //     }
+    //     if (change.inserts && Array.isArray(change.inserts)) {
+    //       for (const insert of change.inserts) {
+    //         await driver.query(dbhan, `HSET "${change.key}" "${insert.key}" "${insert.value}"`);
+            
+    //         if (insert.ttl !== undefined && insert.ttl !== null && insert.ttl !== -1) {
+    //           try {
+    //             await dbhan.client.call('HEXPIRE', change.key, insert.ttl, 'FIELDS', 1, insert.key);
+    //           } catch (e) {}
+    //         }
+    //       }
+    //     }
+    //     if (change.deletes && Array.isArray(change.deletes)) {
+    //       for (const delKey of change.deletes) {
+    //         await driver.query(dbhan, `HDEL "${change.key}" "${delKey}"`);
+    //       }
+    //     }
+    //   } else if (change.type === 'zset') {
+    //     if (change.updates && Array.isArray(change.updates)) {
+    //       for (const update of change.updates) {
+    //         await driver.query(dbhan, `ZADD "${change.key}" ${update.score} "${update.member}"`);
+    //       }
+    //     }
+    //     if (change.inserts && Array.isArray(change.inserts)) {
+    //       for (const insert of change.inserts) {
+    //         await driver.query(dbhan, `ZADD "${change.key}" ${insert.score} "${insert.member}"`);
+    //       }
+    //     }
+    //     if (change.deletes && Array.isArray(change.deletes)) {
+    //       for (const delMember of change.deletes) {
+    //         await driver.query(dbhan, `ZREM "${change.key}" "${delMember}"`);
+    //       }
+    //     }
+    //   } else if (change.type === 'list') {
+    //     if (change.updates && Array.isArray(change.updates)) {
+    //       for (const update of change.updates) {
+    //         await driver.query(dbhan, `LSET "${change.key}" ${update.index} "${update.value}"`);
+    //       }
+    //     }
+    //     if (change.inserts && Array.isArray(change.inserts)) {
+    //       for (const insert of change.inserts) {
+    //         await driver.query(dbhan, `RPUSH "${change.key}" "${insert.value}"`);
+    //       }
+    //     }
+    //   } else if (change.type === 'set') {
+    //     if (change.inserts && Array.isArray(change.inserts)) {
+    //       for (const insert of change.inserts) {
+    //         await driver.query(dbhan, `SADD "${change.key}" "${insert.value}"`);
+    //       }
+    //     }
+    //     if (change.deletes && Array.isArray(change.deletes)) {
+    //       for (const delValue of change.deletes) {
+    //         await driver.query(dbhan, `SREM "${change.key}" "${delValue}"`);
+    //       }
+    //     }
+    //   } else if (change.type === 'stream') {
+    //     if (change.inserts && Array.isArray(change.inserts)) {
+    //       for (const insert of change.inserts) {
+    //         const streamId = insert.id === '*' || !insert.id ? '*' : insert.id;
+    //         await driver.query(dbhan, `XADD "${change.key}" ${streamId} value "${insert.value}"`);
+    //       }
+    //     }
+    //     if (change.deletes && Array.isArray(change.deletes)) {
+    //       for (const delId of change.deletes) {
+    //         await driver.query(dbhan, `XDEL "${change.key}" "${delId}"`);
+    //       }
+    //     }
+    //   }
+    // }
+
+    process.send({ msgtype: 'response', msgid });
+  } catch (err) {
+    process.send({
+      msgtype: 'response',
+      msgid,
+      errorMessage: extractErrorMessage(err, 'Error saving Redis data'),
+    });
+  }
+}
+
 async function handleSqlPreview({ msgid, objects, options }) {
   await waitStructure();
   const driver = requireEngineDriver(storedConnection);
@@ -501,6 +602,7 @@ const messageHandlers = {
   schemaList: handleSchemaList,
   executeSessionQuery: handleExecuteSessionQuery,
   evalJsonScript: handleEvalJsonScript,
+  multiCallMethod: handleMultiCallMethod,
   // runCommand: handleRunCommand,
 };
 

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

@@ -686,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",
@@ -790,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": [
@@ -805,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",
@@ -854,6 +939,12 @@ module.exports = {
           "columnName": "connection_id",
           "dataType": "int",
           "notNull": true
+        },
+        {
+          "pureName": "role_connections",
+          "columnName": "import_source_id",
+          "dataType": "int",
+          "notNull": false
         }
       ],
       "foreignKeys": [
@@ -882,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": {
@@ -934,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": [
@@ -974,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": {
@@ -1087,6 +1214,12 @@ module.exports = {
           "columnName": "permission",
           "dataType": "varchar(250)",
           "notNull": true
+        },
+        {
+          "pureName": "role_permissions",
+          "columnName": "import_source_id",
+          "dataType": "int",
+          "notNull": false
         }
       ],
       "foreignKeys": [
@@ -1102,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": {
@@ -1184,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": [
@@ -1236,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": {
@@ -1329,6 +1498,86 @@ module.exports = {
         ]
       }
     },
+    {
+      "pureName": "role_team_folders",
+      "columns": [
+        {
+          "pureName": "role_team_folders",
+          "columnName": "id",
+          "dataType": "int",
+          "autoIncrement": true,
+          "notNull": true
+        },
+        {
+          "pureName": "role_team_folders",
+          "columnName": "role_id",
+          "dataType": "int",
+          "notNull": true
+        },
+        {
+          "pureName": "role_team_folders",
+          "columnName": "team_folder_id",
+          "dataType": "int",
+          "notNull": true
+        },
+        {
+          "pureName": "role_team_folders",
+          "columnName": "allow_read_files",
+          "dataType": "int",
+          "notNull": false
+        },
+        {
+          "pureName": "role_team_folders",
+          "columnName": "allow_write_files",
+          "dataType": "int",
+          "notNull": false
+        },
+        {
+          "pureName": "role_team_folders",
+          "columnName": "allow_use_files",
+          "dataType": "int",
+          "notNull": false
+        }
+      ],
+      "foreignKeys": [
+        {
+          "constraintType": "foreignKey",
+          "constraintName": "FK_role_team_folders_role_id",
+          "pureName": "role_team_folders",
+          "refTableName": "roles",
+          "deleteAction": "CASCADE",
+          "columns": [
+            {
+              "columnName": "role_id",
+              "refColumnName": "id"
+            }
+          ]
+        },
+        {
+          "constraintType": "foreignKey",
+          "constraintName": "FK_role_team_folders_team_folder_id",
+          "pureName": "role_team_folders",
+          "refTableName": "team_folders",
+          "deleteAction": "CASCADE",
+          "columns": [
+            {
+              "columnName": "team_folder_id",
+              "refColumnName": "id"
+            }
+          ]
+        }
+      ],
+      "primaryKey": {
+        "pureName": "role_team_folders",
+        "constraintType": "primaryKey",
+        "constraintName": "PK_role_team_folders",
+        "columns": [
+          {
+            "columnName": "id"
+          }
+        ]
+      }
+    },
     {
       "pureName": "table_permission_roles",
       "columns": [
@@ -1486,6 +1735,14 @@ module.exports = {
           "columnName": "metadata",
           "dataType": "varchar(1000)",
           "notNull": false
+        },
+        {
+          "pureName": "team_files",
+          "columnName": "team_folder_id",
+          "dataType": "int",
+          "notNull": true,
+          "defaultValue": -1,
+          "defaultConstraint": "DF_team_files_team_folder_id"
         }
       ],
       "foreignKeys": [
@@ -1512,6 +1769,18 @@ module.exports = {
               "refColumnName": "id"
             }
           ]
+        },
+        {
+          "constraintType": "foreignKey",
+          "constraintName": "FK_team_files_team_folder_id",
+          "pureName": "team_files",
+          "refTableName": "team_folders",
+          "columns": [
+            {
+              "columnName": "team_folder_id",
+              "refColumnName": "id"
+            }
+          ]
         }
       ],
       "primaryKey": {
@@ -1596,6 +1865,41 @@ module.exports = {
         }
       ]
     },
+    {
+      "pureName": "team_folders",
+      "columns": [
+        {
+          "pureName": "team_folders",
+          "columnName": "id",
+          "dataType": "int",
+          "autoIncrement": true,
+          "notNull": true
+        },
+        {
+          "pureName": "team_folders",
+          "columnName": "folder_name",
+          "dataType": "varchar(250)",
+          "notNull": false
+        }
+      ],
+      "foreignKeys": [],
+      "primaryKey": {
+        "pureName": "team_folders",
+        "constraintType": "primaryKey",
+        "constraintName": "PK_team_folders",
+        "columns": [
+          {
+            "columnName": "id"
+          }
+        ]
+      },
+      "preloadedRows": [
+        {
+          "id": -1,
+          "folder_name": "default"
+        }
+      ]
+    },
     {
       "pureName": "users",
       "columns": [
@@ -2194,6 +2498,86 @@ module.exports = {
           }
         ]
       }
+    },
+    {
+      "pureName": "user_team_folders",
+      "columns": [
+        {
+          "pureName": "user_team_folders",
+          "columnName": "id",
+          "dataType": "int",
+          "autoIncrement": true,
+          "notNull": true
+        },
+        {
+          "pureName": "user_team_folders",
+          "columnName": "user_id",
+          "dataType": "int",
+          "notNull": true
+        },
+        {
+          "pureName": "user_team_folders",
+          "columnName": "team_folder_id",
+          "dataType": "int",
+          "notNull": true
+        },
+        {
+          "pureName": "user_team_folders",
+          "columnName": "allow_read_files",
+          "dataType": "int",
+          "notNull": false
+        },
+        {
+          "pureName": "user_team_folders",
+          "columnName": "allow_write_files",
+          "dataType": "int",
+          "notNull": false
+        },
+        {
+          "pureName": "user_team_folders",
+          "columnName": "allow_use_files",
+          "dataType": "int",
+          "notNull": false
+        }
+      ],
+      "foreignKeys": [
+        {
+          "constraintType": "foreignKey",
+          "constraintName": "FK_user_team_folders_user_id",
+          "pureName": "user_team_folders",
+          "refTableName": "users",
+          "deleteAction": "CASCADE",
+          "columns": [
+            {
+              "columnName": "user_id",
+              "refColumnName": "id"
+            }
+          ]
+        },
+        {
+          "constraintType": "foreignKey",
+          "constraintName": "FK_user_team_folders_team_folder_id",
+          "pureName": "user_team_folders",
+          "refTableName": "team_folders",
+          "deleteAction": "CASCADE",
+          "columns": [
+            {
+              "columnName": "team_folder_id",
+              "refColumnName": "id"
+            }
+          ]
+        }
+      ],
+      "primaryKey": {
+        "pureName": "user_team_folders",
+        "constraintType": "primaryKey",
+        "constraintName": "PK_user_team_folders",
+        "columns": [
+          {
+            "columnName": "id"
+          }
+        ]
+      }
     }
   ],
   "collections": [],

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/api/src/utility/getDiagramExport.js

@@ -1,21 +1,29 @@
-const getDiagramExport = (html, css, themeType, themeClassName, watermark) => {
+const getDiagramExport = (html, css, themeType, themeVariables, watermark) => {
   const watermarkHtml = watermark
     ? `
-        <div style="position: fixed; bottom: 0; right: 0; padding: 5px; font-size: 12px; color: var(--theme-font-2); background-color: var(--theme-bg-2); border-top-left-radius: 5px; border: 1px solid var(--theme-border);">
+        <div style="position: fixed; bottom: 0; right: 0; padding: 5px; font-size: 12px; color: var(--theme-generic-font-grayed); background-color: var(--theme-datagrid-background); border-top-left-radius: 5px; border: var(--theme-card-border);">
         ${watermark}
       </div>
   `
     : '';
+  
+  // Convert theme variables object to CSS custom properties
+  const themeVariablesCSS = themeVariables 
+    ? `:root {\n${Object.entries(themeVariables).map(([key, value]) => `  ${key}: ${value};`).join('\n')}\n}`
+    : '';
+  
   return `<html>
   <meta charset='utf-8'>
   
   <head>
       <style>
+        ${themeVariablesCSS}
+        
         ${css}
 
         body {
-          background: var(--theme-bg-1);
-          color: var(--theme-font-1);
+          background: var(--theme-datagrid-background);
+          color: var(--theme-generic-font);
         }
       </style>
 
@@ -55,7 +63,7 @@ const getDiagramExport = (html, css, themeType, themeClassName, watermark) => {
       </script>
   </head>
   
-  <body class='${themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light'} ${themeClassName}' style='user-select:none; cursor:pointer'>
+  <body class='${themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light'}' style='user-select:none; cursor:pointer'>
       ${html}
       ${watermarkHtml}
   </body>

packages/datalib/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.0.0-alpha.1",
+  "version": "7.0.0-alpha.1",
   "name": "dbgate-datalib",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -19,14 +19,14 @@
   ],
   "dependencies": {
     "date-fns": "^4.1.0",
-    "dbgate-filterparser": "^6.0.0-alpha.1",
-    "dbgate-sqltree": "^6.0.0-alpha.1",
-    "dbgate-tools": "^6.0.0-alpha.1",
+    "dbgate-filterparser": "^7.0.0-alpha.1",
+    "dbgate-sqltree": "^7.0.0-alpha.1",
+    "dbgate-tools": "^7.0.0-alpha.1",
     "uuid": "^3.4.0"
   },
   "devDependencies": {
     "@types/node": "^13.7.0",
-    "dbgate-types": "^6.0.0-alpha.1",
+    "dbgate-types": "^7.0.0-alpha.1",
     "jest": "^28.1.3",
     "ts-jest": "^28.0.7",
     "typescript": "^4.4.3"

packages/datalib/src/ChangeSetRedis.ts

@@ -0,0 +1,210 @@
+import { DatabaseMethodCallItem, DatabaseMethodCallList } from 'dbgate-types';
+
+export interface ChangeSetRedis_String {
+  key: string;
+  type: 'string';
+  value: string;
+}
+
+export interface ChangeSetRedis_JSON {
+  key: string;
+  type: 'json';
+  value: string;
+}
+
+export interface ChangeSetRedis_Hash {
+  key: string;
+  type: 'hash';
+  inserts: { key: string; value: string; ttl: number; editorRowId: string }[];
+  updates: { key: string; value: string; ttl: number }[];
+  deletes: string[];
+}
+
+export interface ChangeSetRedis_List {
+  key: string;
+  type: 'list';
+  inserts: { value: string; editorRowId: string }[];
+  updates: { index: number; value: string }[];
+  deletes: number[];
+}
+
+export interface ChangeSetRedis_Set {
+  key: string;
+  type: 'set';
+  inserts: { value: string; editorRowId: string }[];
+  deletes: string[];
+}
+
+export interface ChangeSetRedis_ZSet {
+  key: string;
+  type: 'zset';
+  inserts: { member: string; score: number; editorRowId: string }[];
+  updates: { member: string; score: number }[];
+  deletes: string[];
+}
+
+export interface ChangeSetRedis_Stream {
+  key: string;
+  type: 'stream';
+  generatedId?: string;
+  inserts: { field: string; value: string; editorRowId: string }[];
+  deletes: string[];
+}
+
+export type ChangeSetRedisType =
+  | ChangeSetRedis_String
+  | ChangeSetRedis_JSON
+  | ChangeSetRedis_Hash
+  | ChangeSetRedis_List
+  | ChangeSetRedis_Set
+  | ChangeSetRedis_ZSet
+  | ChangeSetRedis_Stream;
+
+export interface ChangeSetRedis {
+  changes: ChangeSetRedisType[];
+}
+
+export function redisChangeSetToRedisCommands(changeSet: ChangeSetRedis): DatabaseMethodCallList {
+  const calls: DatabaseMethodCallItem[] = [];
+
+  for (const change of changeSet.changes) {
+    if (change.type === 'string') {
+      calls.push({
+        method: 'SET',
+        args: [change.key, change.value],
+      });
+    } else if (change.type === 'json') {
+      calls.push({
+        method: 'JSON.SET',
+        args: [change.key, '$', change.value],
+      });
+    } else if (change.type === 'hash') {
+      if (change.updates && Array.isArray(change.updates)) {
+        for (const update of change.updates) {
+          calls.push({
+            method: 'HSET',
+            args: [change.key, update.key, update.value],
+          });
+
+          if (update.ttl !== undefined && update.ttl !== null && update.ttl !== -1) {
+            calls.push({
+              method: 'HEXPIRE',
+              args: [change.key, update.ttl, 'FIELDS', 1, update.key],
+            });
+          }
+        }
+      }
+
+      if (change.inserts && Array.isArray(change.inserts)) {
+        for (const insert of change.inserts) {
+          calls.push({
+            method: 'HSET',
+            args: [change.key, insert.key, insert.value],
+          });
+
+          if (insert.ttl !== undefined && insert.ttl !== null && insert.ttl !== -1) {
+            calls.push({
+              method: 'HEXPIRE',
+              args: [change.key, insert.ttl, 'FIELDS', 1, insert.key],
+            });
+          }
+        }
+      }
+
+      if (change.deletes && Array.isArray(change.deletes)) {
+        for (const delKey of change.deletes) {
+          calls.push({
+            method: 'HDEL',
+            args: [change.key, delKey],
+          });
+        }
+      }
+    } else if (change.type === 'zset') {
+      if (change.updates && Array.isArray(change.updates)) {
+        for (const update of change.updates) {
+          calls.push({
+            method: 'ZADD',
+            args: [change.key, update.score, update.member],
+          });
+        }
+      }
+
+      if (change.inserts && Array.isArray(change.inserts)) {
+        for (const insert of change.inserts) {
+          calls.push({
+            method: 'ZADD',
+            args: [change.key, insert.score, insert.member],
+          });
+        }
+      }
+
+      if (change.deletes && Array.isArray(change.deletes)) {
+        for (const delMember of change.deletes) {
+          calls.push({
+            method: 'ZREM',
+            args: [change.key, delMember],
+          });
+        }
+      }
+    } else if (change.type === 'list') {
+      if (change.updates && Array.isArray(change.updates)) {
+        for (const update of change.updates) {
+          calls.push({
+            method: 'LSET',
+            args: [change.key, update.index, update.value],
+          });
+        }
+      }
+
+      if (change.inserts && Array.isArray(change.inserts)) {
+        for (const insert of change.inserts) {
+          calls.push({
+            method: 'RPUSH',
+            args: [change.key, insert.value],
+          });
+        }
+      }
+    } else if (change.type === 'set') {
+      if (change.inserts && Array.isArray(change.inserts)) {
+        for (const insert of change.inserts) {
+          calls.push({
+            method: 'SADD',
+            args: [change.key, insert.value],
+          });
+        }
+      }
+
+      if (change.deletes && Array.isArray(change.deletes)) {
+        for (const delValue of change.deletes) {
+          calls.push({
+            method: 'SREM',
+            args: [change.key, delValue],
+          });
+        }
+      }
+    } else if (change.type === 'stream') {
+      if (change.inserts.length > 0) {
+        calls.push({
+          method: 'XADD',
+          args: [change.key, change.generatedId || '*', ...change.inserts.flatMap(f => [f.field, f.value])],
+        });
+      }
+      for (const delValue of change.deletes) {
+        calls.push({
+          method: 'XDEL',
+          args: [change.key, delValue],
+        });
+      }
+    }
+  }
+
+  return { calls };
+}
+
+export function convertRedisCallListToScript(callList: DatabaseMethodCallList): string {
+  let script = '';
+  for (const call of callList.calls) {
+    script += `${call.method} ${call.args.map(arg => (typeof arg === 'string' ? `"${arg}"` : arg)).join(' ')}\n`;
+  }
+  return script;
+}

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/datalib/src/index.ts

@@ -25,3 +25,4 @@ export * from './CustomGridDisplay';
 export * from './ScriptDrivedDeployer';
 export * from './chartDefinitions';
 export * from './chartProcessor';
+export * from './ChangeSetRedis';

packages/dbmodel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbmodel",
-  "version": "6.0.0-alpha.1",
+  "version": "7.0.0-alpha.1",
   "homepage": "https://dbgate.org/",
   "repository": {
     "type": "git",
@@ -30,16 +30,16 @@
   ],
   "dependencies": {
     "commander": "^10.0.0",
-    "dbgate-api": "^6.0.0-alpha.1",
-    "dbgate-plugin-csv": "^6.0.0-alpha.1",
-    "dbgate-plugin-excel": "^6.0.0-alpha.1",
-    "dbgate-plugin-mongo": "^6.0.0-alpha.1",
-    "dbgate-plugin-mssql": "^6.0.0-alpha.1",
-    "dbgate-plugin-mysql": "^6.0.0-alpha.1",
-    "dbgate-plugin-postgres": "^6.0.0-alpha.1",
-    "dbgate-plugin-xml": "^6.0.0-alpha.1",
-    "dbgate-plugin-oracle": "^6.0.0-alpha.1",
-    "dbgate-web": "^6.0.0-alpha.1",
+    "dbgate-api": "^7.0.0-alpha.1",
+    "dbgate-plugin-csv": "^7.0.0-alpha.1",
+    "dbgate-plugin-excel": "^7.0.0-alpha.1",
+    "dbgate-plugin-mongo": "^7.0.0-alpha.1",
+    "dbgate-plugin-mssql": "^7.0.0-alpha.1",
+    "dbgate-plugin-mysql": "^7.0.0-alpha.1",
+    "dbgate-plugin-postgres": "^7.0.0-alpha.1",
+    "dbgate-plugin-xml": "^7.0.0-alpha.1",
+    "dbgate-plugin-oracle": "^7.0.0-alpha.1",
+    "dbgate-web": "^7.0.0-alpha.1",
     "dotenv": "^16.0.0",
     "pinomin": "^1.0.5"
   }

packages/filterparser/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.0.0-alpha.1",
+  "version": "7.0.0-alpha.1",
   "name": "dbgate-filterparser",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -17,7 +17,7 @@
     "lib"
   ],
   "devDependencies": {
-    "dbgate-types": "^6.0.0-alpha.1",
+    "dbgate-types": "^7.0.0-alpha.1",
     "@types/jest": "^25.1.4",
     "@types/node": "^13.7.0",
     "jest": "^28.1.3",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@types/parsimmon": "^1.10.1",
-    "dbgate-tools": "^6.0.0-alpha.1",
+    "dbgate-tools": "^7.0.0-alpha.1",
     "lodash": "^4.17.21",
     "date-fns": "^4.1.0",
     "moment": "^2.24.0",

packages/serve/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbgate-serve",
-  "version": "6.0.0-alpha.1",
+  "version": "7.0.0-alpha.1",
   "homepage": "https://dbgate.org/",
   "repository": {
     "type": "git",
@@ -18,19 +18,19 @@
     "web"
   ],
   "dependencies": {
-    "dbgate-api": "^6.0.0-alpha.1",
-    "dbgate-plugin-clickhouse": "^6.0.0-alpha.1",
-    "dbgate-plugin-csv": "^6.0.0-alpha.1",
-    "dbgate-plugin-excel": "^6.0.0-alpha.1",
-    "dbgate-plugin-mongo": "^6.0.0-alpha.1",
-    "dbgate-plugin-mssql": "^6.0.0-alpha.1",
-    "dbgate-plugin-mysql": "^6.0.0-alpha.1",
-    "dbgate-plugin-oracle": "^6.0.0-alpha.1",
-    "dbgate-plugin-postgres": "^6.0.0-alpha.1",
-    "dbgate-plugin-redis": "^6.0.0-alpha.1",
-    "dbgate-plugin-sqlite": "^6.0.0-alpha.1",
-    "dbgate-plugin-xml": "^6.0.0-alpha.1",
-    "dbgate-web": "^6.0.0-alpha.1",
+    "dbgate-api": "^7.0.0-alpha.1",
+    "dbgate-plugin-clickhouse": "^7.0.0-alpha.1",
+    "dbgate-plugin-csv": "^7.0.0-alpha.1",
+    "dbgate-plugin-excel": "^7.0.0-alpha.1",
+    "dbgate-plugin-mongo": "^7.0.0-alpha.1",
+    "dbgate-plugin-mssql": "^7.0.0-alpha.1",
+    "dbgate-plugin-mysql": "^7.0.0-alpha.1",
+    "dbgate-plugin-oracle": "^7.0.0-alpha.1",
+    "dbgate-plugin-postgres": "^7.0.0-alpha.1",
+    "dbgate-plugin-redis": "^7.0.0-alpha.1",
+    "dbgate-plugin-sqlite": "^7.0.0-alpha.1",
+    "dbgate-plugin-xml": "^7.0.0-alpha.1",
+    "dbgate-web": "^7.0.0-alpha.1",
     "dotenv": "^16.0.0"
   }
 }

packages/sqltree/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.0.0-alpha.1",
+  "version": "7.0.0-alpha.1",
   "name": "dbgate-sqltree",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -27,7 +27,7 @@
   ],
   "devDependencies": {
     "@types/node": "^13.7.0",
-    "dbgate-types": "^6.0.0-alpha.1",
+    "dbgate-types": "^7.0.0-alpha.1",
     "typescript": "^4.4.3"
   },
   "dependencies": {

packages/tools/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.0.0-alpha.1",
+  "version": "7.0.0-alpha.1",
   "name": "dbgate-tools",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -26,7 +26,7 @@
   ],
   "devDependencies": {
     "@types/node": "^13.7.0",
-    "dbgate-types": "^6.0.0-alpha.1",
+    "dbgate-types": "^7.0.0-alpha.1",
     "jest": "^28.1.3",
     "ts-jest": "^28.0.7",
     "typescript": "^4.4.3"
@@ -34,7 +34,7 @@
   "dependencies": {
     "blueimp-md5": "^2.19.0",
     "dbgate-query-splitter": "^4.11.9",
-    "dbgate-sqltree": "^6.0.0-alpha.1",
+    "dbgate-sqltree": "^7.0.0-alpha.1",
     "debug": "^4.3.4",
     "json-stable-stringify": "^1.0.1",
     "lodash": "^4.17.21",

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 {
@@ -667,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');
@@ -681,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/dbKeysLoader.ts

@@ -1,351 +0,0 @@
-import _omit from 'lodash/omit';
-import _sortBy from 'lodash/sortBy';
-
-export const DB_KEYS_SHOW_INCREMENT = 100;
-
-export interface DbKeysNodeModelBase {
-  text?: string;
-  sortKey: string;
-  key: string;
-  count?: number;
-  level: number;
-  keyPath: string[];
-  parentKey: string;
-}
-
-export interface DbKeysLeafNodeModel extends DbKeysNodeModelBase {
-  type: 'string' | 'hash' | 'set' | 'list' | 'zset' | 'stream' | 'binary' | 'ReJSON-RL';
-}
-
-export interface DbKeysFolderNodeModel extends DbKeysNodeModelBase {
-  // root: string;
-  type: 'dir';
-  // visibleCount?: number;
-  // isExpanded?: boolean;
-}
-
-export interface DbKeysFolderStateMode {
-  key: string;
-  visibleCount?: number;
-  isExpanded?: boolean;
-}
-
-export interface DbKeysTreeModel {
-  treeKeySeparator: string;
-  root: DbKeysFolderNodeModel;
-  dirsByKey: { [key: string]: DbKeysFolderNodeModel };
-  dirStateByKey: { [key: string]: DbKeysFolderStateMode };
-  childrenByKey: { [key: string]: DbKeysNodeModel[] };
-  keyObjectsByKey: { [key: string]: DbKeysNodeModel };
-  scannedKeys: number;
-  loadCount: number;
-  dbsize: number;
-  cursor: string;
-  loadedAll: boolean;
-  // refreshAll?: boolean;
-}
-
-export type DbKeysNodeModel = DbKeysLeafNodeModel | DbKeysFolderNodeModel;
-
-export interface DbKeyLoadedModel {
-  key: string;
-
-  type: 'string' | 'hash' | 'set' | 'list' | 'zset' | 'stream' | 'binary' | 'ReJSON-RL';
-  count?: number;
-}
-
-export interface DbKeysLoadResult {
-  nextCursor: string;
-  keys: DbKeyLoadedModel[];
-  dbsize: number;
-}
-
-// export type DbKeysLoadFunction = (root: string, limit: number) => Promise<DbKeysLoadResult>;
-
-export type DbKeysChangeModelFunction = (
-  func: (model: DbKeysTreeModel) => DbKeysTreeModel,
-  loadNextPage: boolean
-) => void;
-
-// function dbKeys_findFolderNode(node: DbKeysNodeModel, root: string) {
-//   if (node.type != 'dir') {
-//     return null;
-//   }
-//   if (node.root === root) {
-//     return node;
-//   }
-//   for (const child of node.children ?? []) {
-//     const res = dbKeys_findFolderNode(child, root);
-//     if (res) {
-//       return res;
-//     }
-//   }
-//   return null;
-// }
-
-// export async function dbKeys_loadKeysFromNode(
-//   tree: DbKeysTreeModel,
-//   callingRoot: string,
-//   separator: string,
-//   loader: DbKeysLoadFunction
-// ): Promise<DbKeysTreeModel> {
-//   const callingRootNode = tree.dirsByKey[callingRoot];
-//   if (!callingRootNode) {
-//     return tree;
-//   }
-//   const newItems = await loader(callingRoot, callingRootNode.maxShowCount ?? SHOW_INCREMENT);
-
-//   return {
-//     ...tree,
-//     childrenByKey: {
-//       ...tree.childrenByKey,
-//       [callingRoot]: newItems,
-//     },
-//   };
-// }
-
-// export async function dbKeys_loadMissing(tree: DbKeysTreeModel, loader: DbKeysLoadFunction): Promise<DbKeysTreeModel> {
-//   const childrenByKey = { ...tree.childrenByKey };
-//   const dirsByKey = { ...tree.dirsByKey };
-
-//   for (const root in tree.dirsByKey) {
-//     const dir = tree.dirsByKey[root];
-
-//     if (dir.isExpanded && dir.shouldLoadNext) {
-//       if (!tree.childrenByKey[root] || dir.hasNext) {
-//         const loadCount = dir.maxShowCount && dir.shouldLoadNext ? dir.maxShowCount + SHOW_INCREMENT : SHOW_INCREMENT;
-//         const items = await loader(root, loadCount + 1);
-
-//         childrenByKey[root] = items.slice(0, loadCount);
-//         dirsByKey[root] = {
-//           ...dir,
-//           shouldLoadNext: false,
-//           maxShowCount: loadCount,
-//           hasNext: items.length > loadCount,
-//         };
-
-//         for (const child of items.slice(0, loadCount)) {
-//           if (child.type == 'dir' && !dirsByKey[child.root]) {
-//             dirsByKey[child.root] = {
-//               shouldLoadNext: false,
-//               maxShowCount: null,
-//               hasNext: false,
-//               isExpanded: false,
-//               type: 'dir',
-//               level: dir.level + 1,
-//               root: child.root,
-//               text: child.text,
-//             };
-//           }
-//         }
-//       } else {
-//         dirsByKey[root] = {
-//           ...dir,
-//           shouldLoadNext: false,
-//         };
-//       }
-//     }
-//   }
-
-//   return {
-//     ...tree,
-//     dirsByKey,
-//     childrenByKey,
-//     refreshAll: false,
-//   };
-// }
-
-export function dbKeys_mergeNextPage(tree: DbKeysTreeModel, nextPage: DbKeysLoadResult): DbKeysTreeModel {
-  const keyObjectsByKey = { ...tree.keyObjectsByKey };
-
-  for (const keyObj of nextPage.keys) {
-    const keyPath = keyObj.key.split(tree.treeKeySeparator);
-    keyObjectsByKey[keyObj.key] = {
-      ...keyObj,
-      level: keyPath.length,
-      text: keyPath[keyPath.length - 1],
-      sortKey: keyPath[keyPath.length - 1],
-      keyPath,
-      parentKey: keyPath.slice(0, -1).join(tree.treeKeySeparator),
-    };
-  }
-
-  const dirsByKey: { [key: string]: DbKeysFolderNodeModel } = {};
-  const childrenByKey: { [key: string]: DbKeysNodeModel[] } = {};
-
-  dirsByKey[''] = tree.root;
-
-  for (const keyObj of Object.values(keyObjectsByKey)) {
-    const dirPath = keyObj.keyPath.slice(0, -1);
-    const dirKey = dirPath.join(tree.treeKeySeparator);
-
-    let dirDepth = keyObj.keyPath.length - 1;
-
-    while (dirDepth > 0) {
-      const newDirPath = keyObj.keyPath.slice(0, dirDepth);
-      const newDirKey = newDirPath.join(tree.treeKeySeparator);
-      if (!dirsByKey[newDirKey]) {
-        dirsByKey[newDirKey] = {
-          level: keyObj.level - 1,
-          keyPath: newDirPath,
-          parentKey: newDirPath.slice(0, -1).join(tree.treeKeySeparator),
-          type: 'dir',
-          key: newDirKey,
-          text: `${newDirPath[newDirPath.length - 1]}${tree.treeKeySeparator}*`,
-          sortKey: newDirPath[newDirPath.length - 1],
-        };
-      }
-
-      dirDepth -= 1;
-    }
-
-    if (!childrenByKey[dirKey]) {
-      childrenByKey[dirKey] = [];
-    }
-
-    childrenByKey[dirKey].push(keyObj);
-  }
-
-  for (const dirObj of Object.values(dirsByKey)) {
-    if (dirObj.key == '') {
-      continue;
-    }
-
-    if (!childrenByKey[dirObj.parentKey]) {
-      childrenByKey[dirObj.parentKey] = [];
-    }
-    childrenByKey[dirObj.parentKey].push(dirObj);
-
-    // set key count
-    dirsByKey[dirObj.key].count = childrenByKey[dirObj.key].length;
-  }
-
-  for (const key in childrenByKey) {
-    childrenByKey[key] = _sortBy(childrenByKey[key], 'sortKey');
-  }
-
-  return {
-    ...tree,
-    cursor: nextPage.nextCursor,
-    dirsByKey,
-    childrenByKey,
-    keyObjectsByKey,
-    scannedKeys: tree.scannedKeys + tree.loadCount,
-    loadedAll: nextPage.nextCursor == '0',
-    dbsize: nextPage.dbsize,
-  };
-}
-
-export function dbKeys_markNodeExpanded(tree: DbKeysTreeModel, root: string, isExpanded: boolean): DbKeysTreeModel {
-  const node = tree.dirStateByKey[root];
-  return {
-    ...tree,
-    dirStateByKey: {
-      ...tree.dirStateByKey,
-      [root]: {
-        ...node,
-        isExpanded,
-      },
-    },
-  };
-}
-
-export function dbKeys_showNextItems(tree: DbKeysTreeModel, root: string): DbKeysTreeModel {
-  const node = tree.dirStateByKey[root];
-  return {
-    ...tree,
-    dirStateByKey: {
-      ...tree.dirStateByKey,
-      [root]: {
-        ...node,
-        visibleCount: (node?.visibleCount ?? DB_KEYS_SHOW_INCREMENT) + DB_KEYS_SHOW_INCREMENT,
-      },
-    },
-  };
-}
-
-export function dbKeys_createNewModel(treeKeySeparator: string): DbKeysTreeModel {
-  const root: DbKeysFolderNodeModel = {
-    level: 0,
-    type: 'dir',
-    keyPath: [],
-    parentKey: '',
-    key: '',
-    sortKey: '',
-  };
-  return {
-    treeKeySeparator,
-    childrenByKey: {},
-    keyObjectsByKey: {},
-    dirsByKey: {
-      '': root,
-    },
-    dirStateByKey: {
-      '': {
-        key: '',
-        visibleCount: DB_KEYS_SHOW_INCREMENT,
-        isExpanded: true,
-      },
-    },
-    scannedKeys: 0,
-    dbsize: 0,
-    loadCount: 2000,
-    cursor: '0',
-    root,
-    loadedAll: false,
-  };
-}
-
-export function dbKeys_clearLoadedData(tree: DbKeysTreeModel): DbKeysTreeModel {
-  return {
-    ...tree,
-    childrenByKey: {},
-    keyObjectsByKey: {},
-    dirsByKey: {
-      '': tree.root,
-    },
-    scannedKeys: 0,
-    dbsize: 0,
-    cursor: '0',
-    loadedAll: false,
-  };
-}
-
-// export function dbKeys_reloadFolder(tree: DbKeysTreeModel, root: string): DbKeysTreeModel {
-//   return {
-//     ...tree,
-//     childrenByKey: _omit(tree.childrenByKey, root),
-//     dirsByKey: {
-//       ...tree.dirsByKey,
-//       [root]: {
-//         ...tree.dirsByKey[root],
-//         shouldLoadNext: true,
-//         hasNext: undefined,
-//       },
-//     },
-//   };
-// }
-
-function addFlatItems(tree: DbKeysTreeModel, root: string, res: DbKeysNodeModel[], visitedRoots: string[] = []) {
-  const item = tree.dirStateByKey[root];
-  if (!item?.isExpanded) {
-    return false;
-  }
-  const children = tree.childrenByKey[root] || [];
-  for (const child of children) {
-    res.push(child);
-    if (child.type == 'dir') {
-      if (visitedRoots.includes(child.key)) {
-        console.warn('Redis: preventing infinite loop for root', child.key);
-        return false;
-      }
-      addFlatItems(tree, child.key, res, [...visitedRoots, root]);
-    }
-  }
-}
-
-export function dbKeys_getFlatList(tree: DbKeysTreeModel) {
-  const res: DbKeysNodeModel[] = [];
-  addFlatItems(tree, '', res);
-  return res;
-}

packages/tools/src/index.ts

@@ -24,6 +24,6 @@ export * from './getConnectionLabel';
 export * from './detectSqlFilterBehaviour';
 export * from './filterBehaviours';
 export * from './schemaInfoTools';
-export * from './dbKeysLoader';
+export * from './redisKeysLoader';
 export * from './rowProgressReporter';
 export * from './diagramTools';

packages/tools/src/nameTools.ts

@@ -146,4 +146,5 @@ export const DATA_FOLDER_NAMES = [
   { name: 'datadeploy', label: 'Data deploy jobs' },
   { name: 'dbcompare', label: 'Database compare jobs' },
   { name: 'apps', label: 'Applications' },
+  { name: 'themes', label: 'Themes' },
 ];

packages/tools/src/redisKeysLoader.ts

@@ -0,0 +1,328 @@
+import _omit from 'lodash/omit';
+import _sortBy from 'lodash/sortBy';
+
+export const DB_KEYS_SHOW_INCREMENT = 100;
+
+export interface RedisNodeModelBase {
+  text?: string;
+  sortKey: string;
+  key: string;
+  count?: number;
+  level: number;
+  keyPath: string[];
+  parentKey: string;
+}
+
+export interface RedisLeafNodeModel extends RedisNodeModelBase {
+  type: 'string' | 'hash' | 'set' | 'list' | 'zset' | 'stream' | 'binary' | 'ReJSON-RL';
+}
+
+export interface RedisFolderNodeModel extends RedisNodeModelBase {
+  // root: string;
+  type: 'dir';
+  // visibleCount?: number;
+  // isExpanded?: boolean;
+}
+
+export interface RedisFolderStateMode {
+  key: string;
+  visibleCount?: number;
+  isExpanded?: boolean;
+}
+
+export interface RedisTreeModel {
+  treeKeySeparator: string;
+  root: RedisFolderNodeModel;
+  dirsByKey: { [key: string]: RedisFolderNodeModel };
+  dirStateByKey: { [key: string]: RedisFolderStateMode };
+  childrenByKey: { [key: string]: RedisNodeModel[] };
+  keyObjectsByKey: { [key: string]: RedisNodeModel };
+  scannedKeys: number;
+  loadCount: number;
+  dbsize: number;
+  cursor: string;
+  loadedAll: boolean;
+  // refreshAll?: boolean;
+}
+
+export type RedisNodeModel = RedisLeafNodeModel | RedisFolderNodeModel;
+
+export interface RedisLoadedModel {
+  key: string;
+
+  type: 'string' | 'hash' | 'set' | 'list' | 'zset' | 'stream' | 'binary' | 'ReJSON-RL';
+  count?: number;
+}
+
+export interface RedisLoadResult {
+  nextCursor: string;
+  keys: RedisLoadedModel[];
+  dbsize: number;
+}
+
+export type RedisChangeModelFunction = (func: (model: RedisTreeModel) => RedisTreeModel, loadNextPage: boolean) => void;
+
+export function redis_mergeNextPage(tree: RedisTreeModel, nextPage: RedisLoadResult): RedisTreeModel {
+  const keyObjectsByKey = { ...tree.keyObjectsByKey };
+
+  for (const keyObj of nextPage.keys) {
+    const keyPath = keyObj.key.split(tree.treeKeySeparator);
+    keyObjectsByKey[keyObj.key] = {
+      ...keyObj,
+      level: keyPath.length,
+      text: keyPath[keyPath.length - 1],
+      sortKey: keyPath[keyPath.length - 1],
+      keyPath,
+      parentKey: keyPath.slice(0, -1).join(tree.treeKeySeparator),
+    };
+  }
+
+  const dirsByKey: { [key: string]: RedisFolderNodeModel } = {};
+  const childrenByKey: { [key: string]: RedisNodeModel[] } = {};
+
+  dirsByKey[''] = tree.root;
+
+  for (const keyObj of Object.values(keyObjectsByKey)) {
+    const dirPath = keyObj.keyPath.slice(0, -1);
+    const dirKey = dirPath.join(tree.treeKeySeparator);
+
+    let dirDepth = keyObj.keyPath.length - 1;
+
+    while (dirDepth > 0) {
+      const newDirPath = keyObj.keyPath.slice(0, dirDepth);
+      const newDirKey = newDirPath.join(tree.treeKeySeparator);
+      if (!dirsByKey[newDirKey]) {
+        dirsByKey[newDirKey] = {
+          level: keyObj.level - 1,
+          keyPath: newDirPath,
+          parentKey: newDirPath.slice(0, -1).join(tree.treeKeySeparator),
+          type: 'dir',
+          key: newDirKey,
+          text: `${newDirPath[newDirPath.length - 1]}${tree.treeKeySeparator}*`,
+          sortKey: newDirPath[newDirPath.length - 1],
+        };
+      }
+
+      dirDepth -= 1;
+    }
+
+    if (!childrenByKey[dirKey]) {
+      childrenByKey[dirKey] = [];
+    }
+
+    childrenByKey[dirKey].push(keyObj);
+  }
+
+  for (const dirObj of Object.values(dirsByKey)) {
+    if (dirObj.key == '') {
+      continue;
+    }
+
+    if (!childrenByKey[dirObj.parentKey]) {
+      childrenByKey[dirObj.parentKey] = [];
+    }
+    childrenByKey[dirObj.parentKey].push(dirObj);
+
+    // set key count
+    dirsByKey[dirObj.key].count = childrenByKey[dirObj.key].length;
+  }
+
+  for (const key in childrenByKey) {
+    childrenByKey[key] = _sortBy(childrenByKey[key], 'sortKey');
+  }
+
+  return {
+    ...tree,
+    cursor: nextPage.nextCursor,
+    dirsByKey,
+    childrenByKey,
+    keyObjectsByKey,
+    scannedKeys: tree.scannedKeys + tree.loadCount,
+    loadedAll: nextPage.nextCursor == '0',
+    dbsize: nextPage.dbsize,
+  };
+}
+
+export function redis_markNodeExpanded(tree: RedisTreeModel, root: string, isExpanded: boolean): RedisTreeModel {
+  const node = tree.dirStateByKey[root];
+  return {
+    ...tree,
+    dirStateByKey: {
+      ...tree.dirStateByKey,
+      [root]: {
+        ...node,
+        isExpanded,
+      },
+    },
+  };
+}
+
+export function redis_showNextItems(tree: RedisTreeModel, root: string): RedisTreeModel {
+  const node = tree.dirStateByKey[root];
+  return {
+    ...tree,
+    dirStateByKey: {
+      ...tree.dirStateByKey,
+      [root]: {
+        ...node,
+        visibleCount: (node?.visibleCount ?? DB_KEYS_SHOW_INCREMENT) + DB_KEYS_SHOW_INCREMENT,
+      },
+    },
+  };
+}
+
+export function redis_createNewModel(treeKeySeparator: string): RedisTreeModel {
+  const root: RedisFolderNodeModel = {
+    level: 0,
+    type: 'dir',
+    keyPath: [],
+    parentKey: '',
+    key: '',
+    sortKey: '',
+  };
+  return {
+    treeKeySeparator,
+    childrenByKey: {},
+    keyObjectsByKey: {},
+    dirsByKey: {
+      '': root,
+    },
+    dirStateByKey: {
+      '': {
+        key: '',
+        visibleCount: DB_KEYS_SHOW_INCREMENT,
+        isExpanded: true,
+      },
+    },
+    scannedKeys: 0,
+    dbsize: 0,
+    loadCount: 2000,
+    cursor: '0',
+    root,
+    loadedAll: false,
+  };
+}
+
+export function redis_clearLoadedData(tree: RedisTreeModel): RedisTreeModel {
+  return {
+    ...tree,
+    childrenByKey: {},
+    keyObjectsByKey: {},
+    dirsByKey: {
+      '': tree.root,
+    },
+    scannedKeys: 0,
+    dbsize: 0,
+    cursor: '0',
+    loadedAll: false,
+  };
+}
+
+function addFlatItems(tree: RedisTreeModel, root: string, res: RedisNodeModel[], visitedRoots: string[] = []) {
+  const item = tree.dirStateByKey[root];
+  if (!item?.isExpanded) {
+    return false;
+  }
+  const children = tree.childrenByKey[root] || [];
+  for (const child of children) {
+    res.push(child);
+    if (child.type == 'dir') {
+      if (visitedRoots.includes(child.key)) {
+        console.warn('Redis: preventing infinite loop for root', child.key);
+        return false;
+      }
+      addFlatItems(tree, child.key, res, [...visitedRoots, root]);
+    }
+  }
+}
+
+export function redis_getFlatList(tree: RedisTreeModel) {
+  const res: RedisNodeModel[] = [];
+  addFlatItems(tree, '', res);
+  return res;
+}
+
+export interface SupportedRedisKeyType {
+  name: string;
+  label: string;
+  dbKeyFields: {
+    name: string;
+    cols?: number;
+    label?: string;
+    placeholder?: string;
+  }[];
+  dbKeyFieldsForGrid?: {
+    name: string;
+    cols?: number;
+    label?: string;
+  }[];
+  keyColumn?: string;
+  showItemList?: boolean;
+  showGeneratedId?: boolean;
+}
+
+export const supportedRedisKeyTypes: SupportedRedisKeyType[] = [
+  {
+    name: 'string',
+    label: 'String',
+    dbKeyFields: [{ name: 'value' }],
+  },
+  {
+    name: 'list',
+    label: 'List',
+    dbKeyFields: [{ name: 'value', cols: 12 }],
+    showItemList: true,
+  },
+  {
+    name: 'set',
+    label: 'Set',
+    dbKeyFields: [{ name: 'value', cols: 12 }],
+    keyColumn: 'value',
+    showItemList: true,
+  },
+  {
+    name: 'zset',
+    label: 'Sorted Set',
+    dbKeyFields: [
+      { name: 'member', cols: 8 },
+      { name: 'score', cols: 4 },
+    ],
+    keyColumn: 'member',
+    showItemList: true,
+  },
+  {
+    name: 'hash',
+    label: 'Hash',
+    dbKeyFields: [
+      { name: 'key', cols: 3, label: 'Field' },
+      { name: 'value', cols: 7 },
+      { name: 'ttl', cols: 2, label: 'TTL' },
+    ],
+    keyColumn: 'key',
+    showItemList: true,
+  },
+  {
+    name: 'stream',
+    label: 'Stream',
+    dbKeyFields: [
+      { name: 'field', cols: 6 },
+      { name: 'value', cols: 6 },
+    ],
+    dbKeyFieldsForGrid: [
+      { name: 'id', cols: 6 },
+      { name: 'value', cols: 6 },
+    ],
+    keyColumn: 'id',
+    showItemList: true,
+    showGeneratedId: true,
+  },
+  {
+    name: 'json',
+    label: 'JSON',
+    dbKeyFields: [{ name: 'value' }],
+  },
+];
+
+export function findSupportedRedisKeyType(type: string): SupportedRedisKeyType | undefined {
+  return supportedRedisKeyTypes.find(t => t.name === type);
+}

packages/tools/src/stringTools.ts

@@ -504,6 +504,7 @@ export function getIconForRedisType(type) {
     case 'binary':
       return 'img type-binary';
     case 'ReJSON-RL':
+    case 'JSON':
       return 'img type-rejson';
     default:
       return null;

packages/types/engines.d.ts

@@ -15,6 +15,8 @@ import {
 } from './dbinfo';
 import { FilterBehaviour } from './filter-type';
 
+export type EngineDriverIcon = string | { light: string; dark?: string };
+
 export interface StreamOptions {
   recordset: (columns) => void;
   row: (row) => void;
@@ -224,6 +226,15 @@ export interface RestoreDatabaseSettings extends BackupRestoreSettingsBase {
   inputFile: string;
 }
 
+export interface DatabaseMethodCallItem {
+  method: string;
+  args: any[];
+}
+
+export interface DatabaseMethodCallList {
+  calls: DatabaseMethodCallItem[];
+}
+
 export interface EngineDriver<TClient = any, TDataBase = any> extends FilterBehaviourProvider {
   engine: string;
   title: string;
@@ -231,7 +242,6 @@ export interface EngineDriver<TClient = any, TDataBase = any> extends FilterBeha
   databaseEngineTypes: string[];
   editorMode?: string;
   readOnlySessions: boolean;
-  supportedKeyTypes: SupportedDbKeyType[];
   dataEditorTypesBehaviour: DataEditorTypesBehaviour;
   supportsDatabaseUrl?: boolean;
   supportsDatabaseBackup?: boolean;
@@ -253,6 +263,7 @@ export interface EngineDriver<TClient = any, TDataBase = any> extends FilterBeha
   collectionPluralLabel?: string;
   collectionNameLabel?: string;
   newCollectionFormParams?: any[];
+  icon?: EngineDriverIcon;
 
   supportedCreateDatabase?: boolean;
   showConnectionField?: (
@@ -337,6 +348,8 @@ export interface EngineDriver<TClient = any, TDataBase = any> extends FilterBeha
   readCollection(dbhan: DatabaseHandle<TClient, TDataBase>, options: ReadCollectionOptions): Promise<any>;
   updateCollection(dbhan: DatabaseHandle<TClient, TDataBase>, changeSet: any): Promise<any>;
   getCollectionUpdateScript(changeSet: any, collectionInfo: CollectionInfo): string;
+  getKeyValueMethodCallList(changeSet: any): DatabaseMethodCallList;
+  invokeMethodCallList(dbhan: DatabaseHandle<TClient, TDataBase>, callList: DatabaseMethodCallList): Promise<void>;
   createDatabase(dbhan: DatabaseHandle<TClient, TDataBase>, name: string): Promise;
   dropDatabase(dbhan: DatabaseHandle<TClient, TDataBase>, name: string): Promise;
   getQuerySplitterOptions(usage: 'stream' | 'script' | 'editor' | 'import'): any;

packages/types/extensions.d.ts

@@ -23,10 +23,11 @@ export interface FileFormatDefinition {
 }
 
 export interface ThemeDefinition {
-  themeClassName: string;
   themeName: string;
   themeType: 'light' | 'dark';
-  themeCss?: string;
+  isBuiltInTheme?: boolean;
+  themeVariables?: { [key: string]: string };
+  themePublicCloudPath?: string;
 }
 
 export interface PluginDefinition {
@@ -47,5 +48,4 @@ export interface ExtensionsDirectory {
   fileFormats: FileFormatDefinition[];
   quickExports: QuickExportDefinition[];
   drivers: EngineDriver[];
-  themes: ThemeDefinition[];
 }

packages/types/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.0.0-alpha.1",
+  "version": "7.0.0-alpha.1",
   "name": "dbgate-types",
   "homepage": "https://dbgate.org/",
   "repository": {

packages/web/index.html.tpl

@@ -20,6 +20,7 @@
     <link rel="stylesheet" href="dimensions.css" />
     <link rel="stylesheet" href="bulma.css" />
     <link rel="stylesheet" href="icon-colors.css" />
+    <link rel="stylesheet" href="build/tailwind.css" />
     <link rel="stylesheet" href="build/bundle.css" />
     <link rel="stylesheet" href="build/fonts/materialdesignicons.css" />
     <link rel="stylesheet" href="build/diff2html.min.css" />

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbgate-web",
-  "version": "6.0.0-alpha.1",
+  "version": "7.0.0-alpha.1",
   "scripts": {
     "build": "yarn build:index && rollup -c",
     "dev": "yarn build:index && cross-env API_URL=http://localhost:3000 rollup -c -w",
@@ -25,17 +25,19 @@
     "@rollup/plugin-node-resolve": "^13.0.5",
     "@rollup/plugin-replace": "^3.0.0",
     "@rollup/plugin-typescript": "^8.2.5",
+    "@tailwindcss/postcss": "^4.1.18",
     "@tsconfig/svelte": "^1.0.0",
     "ace-builds": "^1.36.5",
+    "autoprefixer": "^10.4.23",
     "chart.js": "^4.4.2",
     "chartjs-adapter-moment": "^1.0.0",
     "chartjs-plugin-datalabels": "^2.2.0",
     "cross-env": "^7.0.3",
-    "dbgate-datalib": "^6.0.0-alpha.1",
+    "dbgate-datalib": "^7.0.0-alpha.1",
     "dbgate-query-splitter": "^4.11.9",
-    "dbgate-sqltree": "^6.0.0-alpha.1",
-    "dbgate-tools": "^6.0.0-alpha.1",
-    "dbgate-types": "^6.0.0-alpha.1",
+    "dbgate-sqltree": "^7.0.0-alpha.1",
+    "dbgate-tools": "^7.0.0-alpha.1",
+    "dbgate-types": "^7.0.0-alpha.1",
     "diff": "^5.0.0",
     "diff2html": "^3.4.13",
     "file-selector": "^0.2.4",
@@ -44,21 +46,24 @@
     "json-stable-stringify": "^1.0.1",
     "localforage": "^1.9.0",
     "lodash": "^4.17.21",
+    "postcss": "^8.5.6",
     "randomcolor": "^0.6.2",
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^2.57.0",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-svelte": "^7.2.2",
+    "rollup-plugin-terser": "^7.0.2",
     "sirv-cli": "^1.0.0",
     "sql-formatter": "^3.1.0",
-    "svelte": "^3.46.4",
+    "svelte": "^4.2.20",
     "svelte-check": "^1.0.0",
     "svelte-markdown": "^0.1.4",
     "svelte-preprocess": "^4.9.5",
     "svelte-select": "^4.4.7",
+    "tailwindcss": "^4.1.18",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3",
     "uuid": "^3.4.0"

packages/web/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+};

packages/web/public/dimensions.css

@@ -2,14 +2,21 @@
   --dim-widget-icon-size: 50px;
   --dim-statusbar-height: 22px;
   --dim-left-panel-width: 300px;
+  --dim-right-panel-width: 300px;
   --dim-tabs-height: 33px;
   --dim-tabs-panel-height: calc( var(--dim-visible-tabs-databases) * 20px + var(--dim-tabs-height) );
-  --dim-splitter-thickness: 3px;
+  --dim-splitter-thickness: 4px;
 
   --dim-visible-left-panel: 1; /* set from JS */
   --dim-content-left: calc(
     var(--dim-widget-icon-size) + var(--dim-visible-left-panel) *
-      (var(--dim-left-panel-width) + var(--dim-splitter-thickness))
+      (var(--dim-left-panel-width))
+  );
+
+  --dim-visible-right-panel: 0; /* set from JS */
+  --dim-content-right: calc(
+    var(--dim-visible-right-panel) *
+      (var(--dim-right-panel-width))
   );
 
   --dim-visible-toolbar: 0; /* set from JS */

packages/web/public/global.css

@@ -12,21 +12,47 @@ body {
 }
 
 .horizontal-split-handle {
-  background-color: var(--theme-border);
-  width: var(--dim-splitter-thickness);
+  width: 0px;
+  position: relative;
   cursor: col-resize;
 }
-.horizontal-split-handle:hover {
-  background-color: var(--theme-bg-2);
+.horizontal-split-handle::before {
+  content: '';
+  position: absolute;
+  cursor: col-resize;
+  left: -1px;
+  right: -1px;
+  top: 0;
+  bottom: 0;
+  width: var(--dim-splitter-thickness);
+  background-color: transparent;
+  transition: background-color 0.2s ease;
+  z-index: 200;
+}
+.horizontal-split-handle:hover::before {
+  background-color: var(--theme-splitter-active);
 }
 
 .vertical-split-handle {
-  background-color: var(--theme-border);
-  height: var(--dim-splitter-thickness);
+  height: 0px;
+  position: relative;
   cursor: row-resize;
 }
-.vertical-split-handle:hover {
-  background-color: var(--theme-bg-2);
+.vertical-split-handle::before {
+  content: '';
+  position: absolute;
+  cursor: row-resize;
+  top: -1px;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: var(--dim-splitter-thickness);
+  background-color: transparent;
+  transition: background-color 0.2s ease;
+  z-index: 200;
+}
+.vertical-split-handle:hover::before {
+  background-color: var(--theme-splitter-active);
 }
 
 .icon-invisible {
@@ -65,19 +91,7 @@ body {
   overflow: scroll;
 }
 .bg-0 {
-  background-color: var(--theme-bg-0);
-}
-.bg-1 {
-  background-color: var(--theme-bg-1);
-}
-.bg-2 {
-  background-color: var(--theme-bg-2);
-}
-.bg-3 {
-  background-color: var(--theme-bg-3);
-}
-.bg-4 {
-  background-color: var(--theme-bg-4);
+  background-color: var(--theme-content-background);
 }
 
 .col-10 {
@@ -117,21 +131,32 @@ body {
   max-width: 16.6666%;
 }
 
-.largeFormMarker input[type='text'], .largeFormMarker input[type='number'], .largeFormMarker input[type='password'], .largeFormMarker textarea  {
+.largeFormMarker input[type='text'],
+.largeFormMarker input[type='number'],
+.largeFormMarker input[type='password'],
+.largeFormMarker textarea {
   width: 100%;
   padding: 10px 10px;
   font-size: 14px;
   box-sizing: border-box;
   border-radius: 4px;
-  border: 1px solid var(--theme-border);
+  border: var(--theme-input-border);
+  background: var(--theme-input-background);
 }
 
 .input1 {
-  padding: 5px 5px;
+  padding: 5px 2px;
   font-size: 14px;
   box-sizing: border-box;
   border-radius: 4px;
-  border: 1px solid var(--theme-border);
+  border: var(--theme-input-border);
+  background: var(--theme-input-background);
+}
+
+.input1:focus {
+  outline: none;
+  border: var(--theme-input-border-focus);
+  box-shadow: var(--theme-input-focus-ring);
 }
 
 .largeFormMarker select {
@@ -148,54 +173,88 @@ body *::-webkit-scrollbar {
 }
 body *::-webkit-scrollbar-track {
   border-radius: 1px;
-  background-color: var(--theme-bg-1);
+  background: var(--theme-scrollbar-background);
 }
 body *::-webkit-scrollbar-corner {
   border-radius: 1px;
-  background-color: var(--theme-bg-2);
+  background: var(--theme-scrollbar-corner-background);
 }
 
 body *::-webkit-scrollbar-thumb {
   border-radius: 1px;
-  background-color: var(--theme-bg-3);
+  background: var(--theme-scrollbar-thumb-background);
 }
 
 body *::-webkit-scrollbar-thumb:hover {
-  background-color: var(--theme-bg-4);
+  background: var(--theme-scrollbar-thumb-background-hover);
 }
 
 input {
-  background-color: var(--theme-bg-0);
-  color: var(--theme-font-1);
-  border: 1px solid var(--theme-border);
+  background: var(--theme-input-background);
+  color: var(--theme-generic-font);
+  border: var(--theme-input-border);
 }
 
 input[disabled] {
-  background-color: var(--theme-bg-1);
+  background: var(--theme-input-background-disabled);
+  color: var(--theme-input-foreground-disabled);  
+}
+
+.largeFormMarker input[disabled] {
+  background: var(--theme-input-background-disabled);
+  color: var(--theme-input-foreground-disabled);  
 }
 
 select {
-  background-color: var(--theme-bg-0);
-  color: var(--theme-font-1);
-  border: 1px solid var(--theme-border);
+  padding: 10px 12px;
+    border: var(--theme-input-border);
+    border-radius: 4px;
+    background-color: var(--theme-input-background);
+    color: var(--theme-input-foreground);
+    font-size: 13px;
+    transition: all 0.15s ease;
+    font-family: inherit;
+}
+
+select:hover {
+  border: var(--theme-input-border-hover);
+}
+
+select:focus {
+  outline: none;
+  border: var(--theme-input-border-focus);
+  box-shadow: var(--theme-input-focus-ring);
 }
 
 select[disabled] {
-  background-color: var(--theme-bg-1);
+  background-color: var(--theme-input-background-disabled);
+  color: var(--theme-input-foreground-disabled);
+  cursor: not-allowed;
+  border: var(--theme-input-border-disabled);
+}
+
+.largeFormMarker select[disabled] {
+  background: var(--theme-input-background-disabled);
+  color: var(--theme-input-foreground-disabled);  
 }
 
 .classicform select {
   padding: 5px 5px 4px;
 }
 
+.selectContainer.focused {
+  box-shadow: var(--theme-input-focus-ring);
+}
+
 textarea {
-  background-color: var(--theme-bg-0);
-  color: var(--theme-font-1);
-  border: 1px solid var(--theme-border);
+  background: var(--theme-input-background);
+  color: var(--theme-generic-font);
+  border: var(--theme-input-border);
 }
 
 textarea[disabled] {
-  background-color: var(--theme-bg-1);
+  background: var(--theme-input-background-disabled);
+  color: var(--theme-input-foreground-disabled);
 }
 
 .ace_gutter-cell.ace-gutter-sql-run {
@@ -219,11 +278,69 @@ textarea[disabled] {
 }
 
 .ace_gutter-cell.ace-gutter-sql-run:hover {
-   background-color: var(--theme-bg-2);
+  background-color: var(--theme-datagrid-cell-background-alt);
 }
 
 .ace_gutter-cell.ace-gutter-current-part {
-   /* background-color: var(--theme-bg-2); */
-   font-weight: bold;
-   color: var(--theme-font-hover);
-}
+  font-weight: bold;
+  color: var(--theme-generic-font-hover);
+}
+
+input[type='checkbox'] {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+
+  border-radius: 4px;
+  border: var(--theme-checkbox-border);
+  background-color: var(--theme-input-background);
+
+  display: inline-grid;
+  place-content: center;
+
+  cursor: pointer;
+}
+
+input[type='checkbox']:hover:not(:disabled) {
+  border: 1px solid var(--theme-checkbox-hover-not-disabled);
+}
+
+input[type='checkbox']:checked:hover {
+  border: 1px solid var(--theme-checkbox-background);
+}
+
+input[type='checkbox']:checked {
+  background-color: var(--theme-checkbox-background);
+  border: var(--theme-checkbox-border);
+}
+
+input[type='checkbox']::before {
+  content: '';
+  width: 10px;
+  height: 10px;
+  transform: scale(0);
+  transition: transform 120ms ease;
+  background-color: var(--theme-checkbox-mark);
+  clip-path: polygon(
+    14% 44%,
+    0 65%,
+    50% 100%,
+    100% 16%,
+    80% 0,
+    43% 62%
+  );
+}
+
+input[type='checkbox']:checked::before {
+  transform: scale(1);
+}
+
+input[type='checkbox']:disabled {
+  cursor: not-allowed;
+  background-color: var(--theme-checkbox-background-disabled);
+  border: var(--theme-checkbox-border);
+}
+
+input[type='checkbox']:disabled::before {
+  background-color: var(--theme-checkbox-background-disabled-before);
+}

packages/web/public/icon-colors.css

@@ -23,12 +23,12 @@
 }
 
 
-.color-icon-inv-green {
-  color: var(--theme-icon-inv-green);
+.color-icon-statusbar-red {
+  color: var(--theme-statusbar-icon-error);
 }
 
-.color-icon-inv-red {
-  color: var(--theme-icon-inv-red);
+.color-icon-statusbar-green {
+  color: var(--theme-statusbar-icon-ok);
 }
 
 .premium-background-gradient {

packages/web/public/tailwind-colors.css

@@ -0,0 +1,288 @@
+/* Force all Tailwind color variables to be included in build */
+body {
+    /* Slate */
+    --tw-copy-slate-50: var(--tw-color-slate-50);
+    --tw-copy-slate-100: var(--tw-color-slate-100);
+    --tw-copy-slate-200: var(--tw-color-slate-200);
+    --tw-copy-slate-300: var(--tw-color-slate-300);
+    --tw-copy-slate-400: var(--tw-color-slate-400);
+    --tw-copy-slate-500: var(--tw-color-slate-500);
+    --tw-copy-slate-600: var(--tw-color-slate-600);
+    --tw-copy-slate-700: var(--tw-color-slate-700);
+    --tw-copy-slate-800: var(--tw-color-slate-800);
+    --tw-copy-slate-900: var(--tw-color-slate-900);
+    --tw-copy-slate-950: var(--tw-color-slate-950);
+    
+    /* Gray */
+    --tw-copy-gray-50: var(--tw-color-gray-50);
+    --tw-copy-gray-100: var(--tw-color-gray-100);
+    --tw-copy-gray-200: var(--tw-color-gray-200);
+    --tw-copy-gray-300: var(--tw-color-gray-300);
+    --tw-copy-gray-400: var(--tw-color-gray-400);
+    --tw-copy-gray-500: var(--tw-color-gray-500);
+    --tw-copy-gray-600: var(--tw-color-gray-600);
+    --tw-copy-gray-700: var(--tw-color-gray-700);
+    --tw-copy-gray-800: var(--tw-color-gray-800);
+    --tw-copy-gray-900: var(--tw-color-gray-900);
+    --tw-copy-gray-950: var(--tw-color-gray-950);
+    
+    /* Zinc */
+    --tw-copy-zinc-50: var(--tw-color-zinc-50);
+    --tw-copy-zinc-100: var(--tw-color-zinc-100);
+    --tw-copy-zinc-200: var(--tw-color-zinc-200);
+    --tw-copy-zinc-300: var(--tw-color-zinc-300);
+    --tw-copy-zinc-400: var(--tw-color-zinc-400);
+    --tw-copy-zinc-500: var(--tw-color-zinc-500);
+    --tw-copy-zinc-600: var(--tw-color-zinc-600);
+    --tw-copy-zinc-700: var(--tw-color-zinc-700);
+    --tw-copy-zinc-800: var(--tw-color-zinc-800);
+    --tw-copy-zinc-900: var(--tw-color-zinc-900);
+    --tw-copy-zinc-950: var(--tw-color-zinc-950);
+    
+    /* Neutral */
+    --tw-copy-neutral-50: var(--tw-color-neutral-50);
+    --tw-copy-neutral-100: var(--tw-color-neutral-100);
+    --tw-copy-neutral-200: var(--tw-color-neutral-200);
+    --tw-copy-neutral-300: var(--tw-color-neutral-300);
+    --tw-copy-neutral-400: var(--tw-color-neutral-400);
+    --tw-copy-neutral-500: var(--tw-color-neutral-500);
+    --tw-copy-neutral-600: var(--tw-color-neutral-600);
+    --tw-copy-neutral-700: var(--tw-color-neutral-700);
+    --tw-copy-neutral-800: var(--tw-color-neutral-800);
+    --tw-copy-neutral-900: var(--tw-color-neutral-900);
+    --tw-copy-neutral-950: var(--tw-color-neutral-950);
+    
+    /* Stone */
+    --tw-copy-stone-50: var(--tw-color-stone-50);
+    --tw-copy-stone-100: var(--tw-color-stone-100);
+    --tw-copy-stone-200: var(--tw-color-stone-200);
+    --tw-copy-stone-300: var(--tw-color-stone-300);
+    --tw-copy-stone-400: var(--tw-color-stone-400);
+    --tw-copy-stone-500: var(--tw-color-stone-500);
+    --tw-copy-stone-600: var(--tw-color-stone-600);
+    --tw-copy-stone-700: var(--tw-color-stone-700);
+    --tw-copy-stone-800: var(--tw-color-stone-800);
+    --tw-copy-stone-900: var(--tw-color-stone-900);
+    --tw-copy-stone-950: var(--tw-color-stone-950);
+    
+    /* Red */
+    --tw-copy-red-50: var(--tw-color-red-50);
+    --tw-copy-red-100: var(--tw-color-red-100);
+    --tw-copy-red-200: var(--tw-color-red-200);
+    --tw-copy-red-300: var(--tw-color-red-300);
+    --tw-copy-red-400: var(--tw-color-red-400);
+    --tw-copy-red-500: var(--tw-color-red-500);
+    --tw-copy-red-600: var(--tw-color-red-600);
+    --tw-copy-red-700: var(--tw-color-red-700);
+    --tw-copy-red-800: var(--tw-color-red-800);
+    --tw-copy-red-900: var(--tw-color-red-900);
+    --tw-copy-red-950: var(--tw-color-red-950);
+    
+    /* Orange */
+    --tw-copy-orange-50: var(--tw-color-orange-50);
+    --tw-copy-orange-100: var(--tw-color-orange-100);
+    --tw-copy-orange-200: var(--tw-color-orange-200);
+    --tw-copy-orange-300: var(--tw-color-orange-300);
+    --tw-copy-orange-400: var(--tw-color-orange-400);
+    --tw-copy-orange-500: var(--tw-color-orange-500);
+    --tw-copy-orange-600: var(--tw-color-orange-600);
+    --tw-copy-orange-700: var(--tw-color-orange-700);
+    --tw-copy-orange-800: var(--tw-color-orange-800);
+    --tw-copy-orange-900: var(--tw-color-orange-900);
+    --tw-copy-orange-950: var(--tw-color-orange-950);
+    
+    /* Amber */
+    --tw-copy-amber-50: var(--tw-color-amber-50);
+    --tw-copy-amber-100: var(--tw-color-amber-100);
+    --tw-copy-amber-200: var(--tw-color-amber-200);
+    --tw-copy-amber-300: var(--tw-color-amber-300);
+    --tw-copy-amber-400: var(--tw-color-amber-400);
+    --tw-copy-amber-500: var(--tw-color-amber-500);
+    --tw-copy-amber-600: var(--tw-color-amber-600);
+    --tw-copy-amber-700: var(--tw-color-amber-700);
+    --tw-copy-amber-800: var(--tw-color-amber-800);
+    --tw-copy-amber-900: var(--tw-color-amber-900);
+    --tw-copy-amber-950: var(--tw-color-amber-950);
+    
+    /* Yellow */
+    --tw-copy-yellow-50: var(--tw-color-yellow-50);
+    --tw-copy-yellow-100: var(--tw-color-yellow-100);
+    --tw-copy-yellow-200: var(--tw-color-yellow-200);
+    --tw-copy-yellow-300: var(--tw-color-yellow-300);
+    --tw-copy-yellow-400: var(--tw-color-yellow-400);
+    --tw-copy-yellow-500: var(--tw-color-yellow-500);
+    --tw-copy-yellow-600: var(--tw-color-yellow-600);
+    --tw-copy-yellow-700: var(--tw-color-yellow-700);
+    --tw-copy-yellow-800: var(--tw-color-yellow-800);
+    --tw-copy-yellow-900: var(--tw-color-yellow-900);
+    --tw-copy-yellow-950: var(--tw-color-yellow-950);
+    
+    /* Lime */
+    --tw-copy-lime-50: var(--tw-color-lime-50);
+    --tw-copy-lime-100: var(--tw-color-lime-100);
+    --tw-copy-lime-200: var(--tw-color-lime-200);
+    --tw-copy-lime-300: var(--tw-color-lime-300);
+    --tw-copy-lime-400: var(--tw-color-lime-400);
+    --tw-copy-lime-500: var(--tw-color-lime-500);
+    --tw-copy-lime-600: var(--tw-color-lime-600);
+    --tw-copy-lime-700: var(--tw-color-lime-700);
+    --tw-copy-lime-800: var(--tw-color-lime-800);
+    --tw-copy-lime-900: var(--tw-color-lime-900);
+    --tw-copy-lime-950: var(--tw-color-lime-950);
+    
+    /* Green */
+    --tw-copy-green-50: var(--tw-color-green-50);
+    --tw-copy-green-100: var(--tw-color-green-100);
+    --tw-copy-green-200: var(--tw-color-green-200);
+    --tw-copy-green-300: var(--tw-color-green-300);
+    --tw-copy-green-400: var(--tw-color-green-400);
+    --tw-copy-green-500: var(--tw-color-green-500);
+    --tw-copy-green-600: var(--tw-color-green-600);
+    --tw-copy-green-700: var(--tw-color-green-700);
+    --tw-copy-green-800: var(--tw-color-green-800);
+    --tw-copy-green-900: var(--tw-color-green-900);
+    --tw-copy-green-950: var(--tw-color-green-950);
+    
+    /* Emerald */
+    --tw-copy-emerald-50: var(--tw-color-emerald-50);
+    --tw-copy-emerald-100: var(--tw-color-emerald-100);
+    --tw-copy-emerald-200: var(--tw-color-emerald-200);
+    --tw-copy-emerald-300: var(--tw-color-emerald-300);
+    --tw-copy-emerald-400: var(--tw-color-emerald-400);
+    --tw-copy-emerald-500: var(--tw-color-emerald-500);
+    --tw-copy-emerald-600: var(--tw-color-emerald-600);
+    --tw-copy-emerald-700: var(--tw-color-emerald-700);
+    --tw-copy-emerald-800: var(--tw-color-emerald-800);
+    --tw-copy-emerald-900: var(--tw-color-emerald-900);
+    --tw-copy-emerald-950: var(--tw-color-emerald-950);
+    
+    /* Teal */
+    --tw-copy-teal-50: var(--tw-color-teal-50);
+    --tw-copy-teal-100: var(--tw-color-teal-100);
+    --tw-copy-teal-200: var(--tw-color-teal-200);
+    --tw-copy-teal-300: var(--tw-color-teal-300);
+    --tw-copy-teal-400: var(--tw-color-teal-400);
+    --tw-copy-teal-500: var(--tw-color-teal-500);
+    --tw-copy-teal-600: var(--tw-color-teal-600);
+    --tw-copy-teal-700: var(--tw-color-teal-700);
+    --tw-copy-teal-800: var(--tw-color-teal-800);
+    --tw-copy-teal-900: var(--tw-color-teal-900);
+    --tw-copy-teal-950: var(--tw-color-teal-950);
+    
+    /* Cyan */
+    --tw-copy-cyan-50: var(--tw-color-cyan-50);
+    --tw-copy-cyan-100: var(--tw-color-cyan-100);
+    --tw-copy-cyan-200: var(--tw-color-cyan-200);
+    --tw-copy-cyan-300: var(--tw-color-cyan-300);
+    --tw-copy-cyan-400: var(--tw-color-cyan-400);
+    --tw-copy-cyan-500: var(--tw-color-cyan-500);
+    --tw-copy-cyan-600: var(--tw-color-cyan-600);
+    --tw-copy-cyan-700: var(--tw-color-cyan-700);
+    --tw-copy-cyan-800: var(--tw-color-cyan-800);
+    --tw-copy-cyan-900: var(--tw-color-cyan-900);
+    --tw-copy-cyan-950: var(--tw-color-cyan-950);
+    
+    /* Sky */
+    --tw-copy-sky-50: var(--tw-color-sky-50);
+    --tw-copy-sky-100: var(--tw-color-sky-100);
+    --tw-copy-sky-200: var(--tw-color-sky-200);
+    --tw-copy-sky-300: var(--tw-color-sky-300);
+    --tw-copy-sky-400: var(--tw-color-sky-400);
+    --tw-copy-sky-500: var(--tw-color-sky-500);
+    --tw-copy-sky-600: var(--tw-color-sky-600);
+    --tw-copy-sky-700: var(--tw-color-sky-700);
+    --tw-copy-sky-800: var(--tw-color-sky-800);
+    --tw-copy-sky-900: var(--tw-color-sky-900);
+    --tw-copy-sky-950: var(--tw-color-sky-950);
+    
+    /* Blue */
+    --tw-copy-blue-50: var(--tw-color-blue-50);
+    --tw-copy-blue-100: var(--tw-color-blue-100);
+    --tw-copy-blue-200: var(--tw-color-blue-200);
+    --tw-copy-blue-300: var(--tw-color-blue-300);
+    --tw-copy-blue-400: var(--tw-color-blue-400);
+    --tw-copy-blue-500: var(--tw-color-blue-500);
+    --tw-copy-blue-600: var(--tw-color-blue-600);
+    --tw-copy-blue-700: var(--tw-color-blue-700);
+    --tw-copy-blue-800: var(--tw-color-blue-800);
+    --tw-copy-blue-900: var(--tw-color-blue-900);
+    --tw-copy-blue-950: var(--tw-color-blue-950);
+    
+    /* Indigo */
+    --tw-copy-indigo-50: var(--tw-color-indigo-50);
+    --tw-copy-indigo-100: var(--tw-color-indigo-100);
+    --tw-copy-indigo-200: var(--tw-color-indigo-200);
+    --tw-copy-indigo-300: var(--tw-color-indigo-300);
+    --tw-copy-indigo-400: var(--tw-color-indigo-400);
+    --tw-copy-indigo-500: var(--tw-color-indigo-500);
+    --tw-copy-indigo-600: var(--tw-color-indigo-600);
+    --tw-copy-indigo-700: var(--tw-color-indigo-700);
+    --tw-copy-indigo-800: var(--tw-color-indigo-800);
+    --tw-copy-indigo-900: var(--tw-color-indigo-900);
+    --tw-copy-indigo-950: var(--tw-color-indigo-950);
+    
+    /* Violet */
+    --tw-copy-violet-50: var(--tw-color-violet-50);
+    --tw-copy-violet-100: var(--tw-color-violet-100);
+    --tw-copy-violet-200: var(--tw-color-violet-200);
+    --tw-copy-violet-300: var(--tw-color-violet-300);
+    --tw-copy-violet-400: var(--tw-color-violet-400);
+    --tw-copy-violet-500: var(--tw-color-violet-500);
+    --tw-copy-violet-600: var(--tw-color-violet-600);
+    --tw-copy-violet-700: var(--tw-color-violet-700);
+    --tw-copy-violet-800: var(--tw-color-violet-800);
+    --tw-copy-violet-900: var(--tw-color-violet-900);
+    --tw-copy-violet-950: var(--tw-color-violet-950);
+    
+    /* Purple */
+    --tw-copy-purple-50: var(--tw-color-purple-50);
+    --tw-copy-purple-100: var(--tw-color-purple-100);
+    --tw-copy-purple-200: var(--tw-color-purple-200);
+    --tw-copy-purple-300: var(--tw-color-purple-300);
+    --tw-copy-purple-400: var(--tw-color-purple-400);
+    --tw-copy-purple-500: var(--tw-color-purple-500);
+    --tw-copy-purple-600: var(--tw-color-purple-600);
+    --tw-copy-purple-700: var(--tw-color-purple-700);
+    --tw-copy-purple-800: var(--tw-color-purple-800);
+    --tw-copy-purple-900: var(--tw-color-purple-900);
+    --tw-copy-purple-950: var(--tw-color-purple-950);
+    
+    /* Fuchsia */
+    --tw-copy-fuchsia-50: var(--tw-color-fuchsia-50);
+    --tw-copy-fuchsia-100: var(--tw-color-fuchsia-100);
+    --tw-copy-fuchsia-200: var(--tw-color-fuchsia-200);
+    --tw-copy-fuchsia-300: var(--tw-color-fuchsia-300);
+    --tw-copy-fuchsia-400: var(--tw-color-fuchsia-400);
+    --tw-copy-fuchsia-500: var(--tw-color-fuchsia-500);
+    --tw-copy-fuchsia-600: var(--tw-color-fuchsia-600);
+    --tw-copy-fuchsia-700: var(--tw-color-fuchsia-700);
+    --tw-copy-fuchsia-800: var(--tw-color-fuchsia-800);
+    --tw-copy-fuchsia-900: var(--tw-color-fuchsia-900);
+    --tw-copy-fuchsia-950: var(--tw-color-fuchsia-950);
+    
+    /* Pink */
+    --tw-copy-pink-50: var(--tw-color-pink-50);
+    --tw-copy-pink-100: var(--tw-color-pink-100);
+    --tw-copy-pink-200: var(--tw-color-pink-200);
+    --tw-copy-pink-300: var(--tw-color-pink-300);
+    --tw-copy-pink-400: var(--tw-color-pink-400);
+    --tw-copy-pink-500: var(--tw-color-pink-500);
+    --tw-copy-pink-600: var(--tw-color-pink-600);
+    --tw-copy-pink-700: var(--tw-color-pink-700);
+    --tw-copy-pink-800: var(--tw-color-pink-800);
+    --tw-copy-pink-900: var(--tw-color-pink-900);
+    --tw-copy-pink-950: var(--tw-color-pink-950);
+    
+    /* Rose */
+    --tw-copy-rose-50: var(--tw-color-rose-50);
+    --tw-copy-rose-100: var(--tw-color-rose-100);
+    --tw-copy-rose-200: var(--tw-color-rose-200);
+    --tw-copy-rose-300: var(--tw-color-rose-300);
+    --tw-copy-rose-400: var(--tw-color-rose-400);
+    --tw-copy-rose-500: var(--tw-color-rose-500);
+    --tw-copy-rose-600: var(--tw-color-rose-600);
+    --tw-copy-rose-700: var(--tw-color-rose-700);
+    --tw-copy-rose-800: var(--tw-color-rose-800);
+    --tw-copy-rose-900: var(--tw-color-rose-900);
+    --tw-copy-rose-950: var(--tw-color-rose-950);
+}

packages/web/rollup.config.js

@@ -9,6 +9,7 @@ import typescript from '@rollup/plugin-typescript';
 import replace from '@rollup/plugin-replace';
 import css from 'rollup-plugin-css-only';
 import json from '@rollup/plugin-json';
+import postcss from 'rollup-plugin-postcss';
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -34,6 +35,21 @@ function serve() {
 }
 
 export default [
+  // Separate entry for Tailwind CSS processing
+  {
+    input: 'src/tailwind.css',
+    output: {
+      file: 'public/build/tailwind.css',
+    },
+    plugins: [
+      postcss({
+        extract: true,
+        minimize: production,
+        sourceMap: !production,
+      }),
+    ],
+  },
+
   {
     input: 'src/query/QueryParserWorker.js',
     output: {

packages/web/src/DragAndDropFileTarget.svelte

@@ -41,7 +41,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: var(--theme-bg-selected);
+    background: var(--theme-table-selected-background);
     align-items: center;
     justify-content: space-around;
     z-index: 1000;

packages/web/src/LoginPage.svelte

@@ -335,13 +335,13 @@
     border-radius: 5px;
     cursor: pointer;
 
-    border: 1px solid var(--theme-bg-button-inv-3);
-    background-color: var(--theme-bg-button-inv-2);
-    color: var(--theme-font-inv-1);
+    border: var(--theme-formbutton-border);
+    background: var(--theme-formbutton-background);
+    color: var(--theme-formbutton-foreground);
   }
 
   .loginButton:hover {
-    background-color: var(--theme-bg-button-inv-3);
+    background: var(--theme-formbutton-background-hover);
   }
 
   .login-link {

packages/web/src/Screen.svelte

@@ -2,8 +2,6 @@
   import WidgetContainer from './widgets/WidgetContainer.svelte';
   import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
   import {
-    currentTheme,
-    currentThemeDefinition,
     isFileDragActive,
     leftPanelWidth,
     openedSnackbars,
@@ -11,13 +9,10 @@
     visibleWidgetSideBar,
     visibleCommandPalette,
     visibleTitleBar,
-    visibleToolbar,
-    systemThemeStore,
+    rightPanelWidget,
+    rightPanelWidth,
   } from './stores';
-  import TabsPanel from './tabpanel/TabsPanel.svelte';
-  import TabRegister from './tabpanel/TabRegister.svelte';
   import CommandPalette from './commands/CommandPalette.svelte';
-  import Toolbar from './widgets/Toolbar.svelte';
   import splitterDrag from './utility/splitterDrag';
   import CurrentDropDownMenu from './modals/CurrentDropDownMenu.svelte';
   import StatusBar from './widgets/StatusBar.svelte';
@@ -28,22 +23,15 @@
   import TitleBar from './widgets/TitleBar.svelte';
   import FontIcon from './icons/FontIcon.svelte';
   import getElectron from './utility/getElectron';
-  import TabsContainer from './tabpanel/TabsContainer.svelte';
   import MultiTabsContainer from './tabpanel/MultiTabsContainer.svelte';
+  import { currentThemeType } from './plugins/themes';
+  import RightWidgetContainer from './widgets/RightWidgetContainer.svelte';
 
-  $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
-
-  $: themeStyle = `<st` + `yle id="themePlugin">${$currentThemeDefinition?.themeCss}</st` + `yle>`;
+  $: currentThemeTypeClass = $currentThemeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 
   const isElectron = !!getElectron();
 </script>
 
-<svelte:head>
-  {#if $currentThemeDefinition?.themeCss}
-    {@html themeStyle}
-  {/if}
-</svelte:head>
-
 <div class="not-supported" class:isElectron>
   <div class="m-5 big-icon"><FontIcon icon="img warn" /></div>
   <div class="m-3">Sorry, DbGate is not supported on mobile devices.</div>
@@ -51,7 +39,7 @@
 </div>
 
 <div
-  class={`${$currentTheme ?? $systemThemeStore} ${currentThemeType} root dbgate-screen`}
+  class={`${currentThemeTypeClass} root dbgate-screen`}
   class:isElectron
   use:dragDropFileTarget
   on:contextmenu={e => e.preventDefault()}
@@ -77,21 +65,28 @@
   </div>
   {#if $selectedWidget && $visibleWidgetSideBar}
     <div
-      class="horizontal-split-handle splitter"
+      class="horizontal-split-handle left-splitter"
       use:splitterDrag={'clientX'}
       on:resizeSplitter={e => leftPanelWidth.update(x => x + e.detail)}
     />
   {/if}
+  {#if $rightPanelWidget}
+    <div
+      class="horizontal-split-handle right-splitter"
+      use:splitterDrag={'clientX'}
+      on:resizeSplitter={e => rightPanelWidth.update(x => x - e.detail)}
+    />
+  {/if}
+  {#if $rightPanelWidget}
+    <div class="rightpanel">
+      <RightWidgetContainer />
+    </div>
+  {/if}
   {#if $visibleCommandPalette}
     <div class="commads">
       <CommandPalette />
     </div>
   {/if}
-  {#if $visibleToolbar}
-    <div class="toolbar">
-      <Toolbar />
-    </div>
-  {/if}
   <CurrentDropDownMenu />
   <ModalLayer />
   {#if $isFileDragActive}
@@ -106,7 +101,7 @@
 
 <style>
   .root {
-    color: var(--theme-font-1);
+    color: var(--theme-generic-font);
   }
   .iconbar {
     position: fixed;
@@ -115,11 +110,11 @@
     top: var(--dim-header-top);
     bottom: var(--dim-statusbar-height);
     width: var(--dim-widget-icon-size);
-    background: var(--theme-bg-inv-1);
+    background: var(--theme-widget-panel-background);
   }
   .statusbar {
     position: fixed;
-    background: var(--theme-bg-statusbar-inv);
+    background: var(--theme-statusbar-background);
     height: var(--dim-statusbar-height);
     left: 0;
     right: 0;
@@ -132,8 +127,22 @@
     left: var(--dim-widget-icon-size);
     bottom: var(--dim-statusbar-height);
     width: var(--dim-left-panel-width);
-    background-color: var(--theme-bg-1);
+    background-color: var(--theme-sidebar-background);
+    color: var(--theme-sidebar-foreground);
     display: flex;
+    border-right: var(--theme-sidebar-border);
+  }
+
+  .rightpanel {
+    position: fixed;
+    top: var(--dim-header-top);
+    right: 0;
+    bottom: var(--dim-statusbar-height);
+    width: var(--dim-right-panel-width);
+    background-color: var(--theme-altsidebar-background);
+    color: var(--theme-altsidebar-foreground);
+    display: flex;
+    border-left: var(--theme-altsidebar-border);
   }
   .commads {
     position: fixed;
@@ -146,16 +155,23 @@
     height: var(--dim-toolbar-height);
     left: 0;
     right: 0;
-    background: var(--theme-bg-1);
+    background: var(--theme-toolstrip-background);
   }
 
-  .splitter {
+  .left-splitter {
     position: absolute;
     top: var(--dim-header-top);
     bottom: var(--dim-statusbar-height);
     left: calc(var(--dim-widget-icon-size) + var(--dim-left-panel-width));
   }
 
+  .right-splitter {
+    position: absolute;
+    top: var(--dim-header-top);
+    bottom: var(--dim-statusbar-height);
+    right: var(--dim-content-right);
+  }
+
   .snackbar-container {
     z-index: 1000;
     position: fixed;
@@ -197,7 +213,7 @@
     top: var(--dim-header-top);
     left: var(--dim-content-left);
     bottom: var(--dim-statusbar-height);
-    right: 0;
-    background-color: var(--theme-bg-1);
+    right: var(--dim-content-right);
+    background-color: var(--theme-content-background);
   }
 </style>

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/ai/ThemeAiAssistantWidget.svelte

@@ -0,0 +1 @@
+This component is only for Premium edition

packages/web/src/appobj/AppObjectCore.svelte

@@ -213,20 +213,20 @@
     position: relative;
   }
   .main:hover:not(.disableHover) {
-    background-color: var(--theme-bg-hover);
+    background-color: var(--theme-sidebar-background-hover);
   }
   .isBold {
     font-weight: bold;
   }
   .isGrayed {
-    color: var(--theme-font-3);
+    color: var(--theme-generic-font-grayed);
   }
 
   .isChoosed {
-    background-color: var(--theme-bg-3);
+    background-color: var(--theme-sidebar-background-active);
   }
   :global(.app-object-list-focused) .isChoosed {
-    background-color: var(--theme-bg-selected);
+    background-color: var(--theme-sidebar-background-focused);
   }
   .status {
     margin-left: 5px;
@@ -234,23 +234,24 @@
   .ext-info {
     font-weight: normal;
     margin-left: 5px;
-    color: var(--theme-font-3);
+    color: var(--theme-sidebar-foreground-grayed);
   }
   .expand-icon {
     margin-right: 3px;
   }
 
   .pin,
-  .pin-active {
+  .pin-active,
+  .unpin {
     z-index: 150;
     position: absolute;
     right: 0;
   }
   .pin {
-    color: var(--theme-font-2);
+    color: var(--theme-sidebar-foreground-button);
   }
   .pin:hover {
-    color: var(--theme-font-hover);
+    color: var(--theme-sidebar-foreground-hover);
   }
   .main .pin {
     visibility: hidden;
@@ -260,13 +261,13 @@
   }
 
   .unpin {
-    color: var(--theme-font-2);
+    color: var(--theme-sidebar-foreground-button);
   }
   .unpin:hover {
-    color: var(--theme-font-hover);
+    color: var(--theme-sidebar-foreground-hover);
   }
 
   .pin-active {
-    color: var(--theme-font-2);
+    color: var(--theme-sidebar-foreground-button);
   }
 </style>

packages/web/src/appobj/AppObjectGroup.svelte

@@ -106,7 +106,7 @@
   }
 
   .group:hover {
-    background-color: var(--theme-bg-hover);
+    background-color: var(--theme-sidebar-background-hover);
   }
   .expand-icon {
     margin-right: 3px;

packages/web/src/appobj/ClosedTabAppObject.svelte

@@ -1,5 +1,10 @@
 <script lang="ts" context="module">
   export const extractKey = data => data.tabid;
+
+  export const createMatcher =
+    filter =>
+    ({ title }) =>
+      filterName(filter, title);
 </script>
 
 <script lang="ts">
@@ -9,6 +14,7 @@
   import moment from 'moment';
 
   import AppObjectCore from './AppObjectCore.svelte';
+  import { filterName } from 'dbgate-tools';
 
   export let data;
 
@@ -65,6 +71,6 @@
 <style>
   .info {
     margin-left: 30px;
-    color: var(--theme-font-3);
+    color: var(--theme-generic-font-grayed);
   }
 </style>

packages/web/src/appobj/CloudContentAppObject.svelte

@@ -135,7 +135,7 @@
   .info {
     margin-left: 30px;
     margin-right: 5px;
-    color: var(--theme-font-3);
+    color: var(--theme-generic-font-grayed);
     white-space: nowrap;
   }
 </style>

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -143,6 +143,8 @@
   import { getConnectionClickActionSetting } from '../settings/settingsTools';
   import { _t } from '../translations';
   import { isProApp } from '../utility/proTools';
+  import { currentThemeType } from '../plugins/themes';
+  import { getDriverIcon } from '../utility/driverIcons';
 
   export let data;
   export let passProps;
@@ -152,6 +154,8 @@
   let extInfo = null;
   let engineStatusIcon = null;
   let engineStatusTitle = null;
+  let driverIcon = null;
+  let connectionIcon = null;
 
   $: isPinned = data.singleDatabase && !!$pinnedDatabases.find(x => x?.connection?._id == data?._id);
 
@@ -431,13 +435,18 @@
   }
 
   $: apps = useAllApps();
+  $: driver = $extensions.drivers.find(x => x.engine == data.engine);
+  $: driverIcon = getDriverIcon(driver, $currentThemeType);
+  $: connectionIcon =
+    driverIcon ||
+    (data._id.startsWith('cloud://') ? 'img cloud-connection' : data.singleDatabase ? 'img database' : 'img server');
 </script>
 
 <AppObjectCore
   {...$$restProps}
   {data}
   title={getConnectionLabel(data, { showUnsaved: true })}
-  icon={data._id.startsWith('cloud://') ? 'img cloud-connection' : data.singleDatabase ? 'img database' : 'img server'}
+  icon={connectionIcon}
   isBold={data.singleDatabase
     ? $currentDatabase?.connection?._id == data._id && $currentDatabase?.name == data.defaultDatabase
     : $currentDatabase?.connection?._id == data._id}

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -446,7 +446,7 @@ await dbgateApi.executeQuery(${JSON.stringify(
         driver?.databaseEngineTypes?.includes('document') && {
           onClick: handleNewCollection,
           text: _t('database.newCollection', {
-            defaultMessage: 'New collection/container'
+            defaultMessage: 'New collection/container',
           }),
         },
       hasPermission(`dbops/query`) &&
@@ -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' }),
@@ -671,10 +669,12 @@ await dbgateApi.executeQuery(${JSON.stringify(
   import { getNumberIcon } from '../icons/FontIcon.svelte';
   import { getDatabaseClickActionSetting } from '../settings/settingsTools';
   import { _t } from '../translations';
-  import { tick } from 'svelte';
 
   export let data;
   export let passProps;
+  export let passExtInfo = undefined;
+  export let passIcon = undefined;
+  export let passColorMark = undefined;
 
   function createMenu() {
     return getDatabaseMenuItems(
@@ -702,10 +702,11 @@ await dbgateApi.executeQuery(${JSON.stringify(
   {...$$restProps}
   {data}
   title={data.name}
-  extInfo={data.extInfo}
-  icon="img database"
-  colorMark={passProps?.connectionColorFactory &&
-    passProps?.connectionColorFactory({ conid: data?.connection?._id, database: data.name }, null, null, false)}
+  extInfo={passExtInfo ?? data.extInfo}
+  icon={passIcon || 'img database'}
+  colorMark={passColorMark ||
+    (passProps?.connectionColorFactory &&
+      passProps?.connectionColorFactory({ conid: data?.connection?._id, database: data.name }, null, null, false))}
   isBold={$currentDatabase?.connection?._id == data?.connection?._id &&
     extractDbNameFromComposite($currentDatabase?.name) == data.name}
   on:dblclick={() => {

packages/web/src/appobj/OpenedTabAppObject.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" context="module">
+  import { filterName } from 'dbgate-tools';
+
+  export const extractKey = data => data.tabid;
+
+  export const createMatcher =
+    filter =>
+    ({ title }) =>
+      filterName(filter, title);
+</script>
+
+<script lang="ts">
+  import { openedTabs } from '../stores';
+  import { setSelectedTabFunc } from '../utility/common';
+  import tabs from '../tabs';
+  import uuidv1 from 'uuid/v1';
+
+  import AppObjectCore from './AppObjectCore.svelte';
+  import { apiCall } from '../utility/api';
+
+  export let data;
+
+  const handleClose = () => {
+    openedTabs.update(tabs => tabs.map(x => (x.tabid == data.tabid ? { ...x, closedTime: new Date().getTime() } : x)));
+  };
+
+  function createMenu() {
+    return [{ text: 'Close', onClick: handleClose }];
+  }
+
+  const onClick = () => {
+    openedTabs.update(files => setSelectedTabFunc(files, data.tabid));
+  };
+
+  function handlePin() {
+    apiCall('files/save', {
+      folder: 'favorites',
+      file: uuidv1(),
+      format: 'json',
+      data,
+    });
+  }
+
+  $: tabComponent = data.tabComponent;
+</script>
+
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  title={data.title}
+  icon={data.icon}
+  isBold={!!data.selected}
+  on:click={onClick}
+  isBusy={data.busy}
+  menu={createMenu}
+  onPin={tabComponent &&
+    tabs[tabComponent] &&
+    tabs[tabComponent].allowAddToFavorites &&
+    tabs[tabComponent].allowAddToFavorites(data) &&
+    handlePin}
+  on:middleclick={handleClose}
+/>
+
+<style>
+  .info {
+    margin-left: 30px;
+    color: var(--theme-generic-font-grayed);
+  }
+</style>

packages/web/src/appobj/PinnedAppObject.svelte

@@ -26,9 +26,19 @@
 
 <script lang="ts">
   import _, { values } from 'lodash';
-  import { draggedPinnedObject, pinnedDatabases, pinnedTables } from '../stores';
+  import { draggedPinnedObject, extensions, pinnedDatabases, pinnedTables } from '../stores';
+  import { getConnectionLabel } from 'dbgate-tools';
+  import { currentThemeType } from '../plugins/themes';
+  import { getDriverIcon } from '../utility/driverIcons';
 
   export let data;
+  export let passProps;
+
+  let pinnedDriver = null;
+  let pinnedDriverIcon = null;
+
+  $: pinnedDriver = $extensions?.drivers?.find(x => x.engine == data?.connection?.engine);
+  $: pinnedDriverIcon = getDriverIcon(pinnedDriver, $currentThemeType);
 </script>
 
 {#if data}
@@ -69,6 +79,9 @@
       on:dragend={() => {
         $draggedPinnedObject = null;
       }}
+      passExtInfo={getConnectionLabel(data.connection)}
+      passIcon={pinnedDriverIcon}
+      passColorMark={passProps?.connectionColorFactory && passProps?.connectionColorFactory({ conid: data.connection._id })}
     />
   {/if}
 {/if}

packages/web/src/appobj/PublicCloudFileAppObject.svelte

@@ -11,10 +11,12 @@
 <script lang="ts">
   import { apiCall } from '../utility/api';
   import newQuery from '../query/newQuery';
-  import { filterName, getSqlFrontMatter, setSqlFrontMatter } from 'dbgate-tools';
+  import { filterName, getSqlFrontMatter, safeJsonParse, setSqlFrontMatter } from 'dbgate-tools';
   import { currentActiveCloudTags } from '../stores';
   import _ from 'lodash';
   import yaml from 'js-yaml';
+  import { _t } from '../translations';
+  import { currentThemeDefinition } from '../plugins/themes';
 
   export let data;
 
@@ -33,8 +35,28 @@
     });
   }
 
+  async function handleUseTheme() {
+    const fileData = await apiCall('cloud/public-file-data', { path: data.path });
+    $currentThemeDefinition = safeJsonParse(fileData.text);
+  }
+
   function createMenu() {
-    return [{ text: 'Open', onClick: handleOpenSqlFile }];
+    if (data?.type == 'sql') {
+      return [{ text: _t('common.open', { defaultMessage: 'Open' }), onClick: handleOpenSqlFile }];
+    }
+    if (data?.type == 'theme') {
+      return [{ text: _t('theme.useTheme', { defaultMessage: 'Use theme' }), onClick: handleUseTheme }];
+    }
+    return [];
+  }
+
+  function handleOpenFile() {
+    if (data?.type == 'sql') {
+      handleOpenSqlFile();
+    }
+    if (data?.type == 'theme') {
+      handleUseTheme();
+    }
   }
 
   $: relatedToCurrentConnection = _.intersection($currentActiveCloudTags, data.tags || []).length > 0;
@@ -43,10 +65,10 @@
 <AppObjectCore
   {...$$restProps}
   {data}
-  icon={data.icon ?? 'img sql-file'}
+  icon={data.icon ?? (data.type == 'sql' ? 'img sql-file' : 'img theme')}
   title={data.title}
   menu={createMenu}
-  on:click={handleOpenSqlFile}
+  on:click={handleOpenFile}
   isGrayed={!relatedToCurrentConnection}
   data-testid={`public-cloud-file-${data.path}`}
 >
@@ -61,7 +83,7 @@
   .info {
     margin-left: 30px;
     margin-right: 5px;
-    color: var(--theme-font-3);
+    color: var(--theme-generic-font-grayed);
     white-space: nowrap;
   }
 </style>

packages/web/src/appobj/SavedFileAppObject.svelte

@@ -142,6 +142,16 @@
     label: 'Model transform file',
   };
 
+  const themes: FileTypeHandler = {
+    icon: 'img theme',
+    format: 'text',
+    tabComponent: 'JsonEditorTab',
+    folder: 'themes',
+    currentConnection: false,
+    extension: 'json',
+    label: 'Theme file',
+  };
+
   const apps: FileTypeHandler = isProApp()
     ? {
         icon: 'img app',
@@ -164,6 +174,7 @@
     perspectives,
     impexp,
     modtrans,
+    themes,
     datadeploy,
     dbcompare,
     apps,

packages/web/src/buttons/CtaButton.svelte

@@ -26,7 +26,7 @@
     border: none;
     padding: 0;
     margin: 0;
-    color: var(--theme-font-link);
+    color: var(--theme-link-foreground);
     text-decoration: underline;
     cursor: pointer;
     font-size: inherit;
@@ -35,11 +35,11 @@
   }
 
   .cta-button:hover:not(:disabled) {
-    color: var(--theme-font-hover);
+    color: var(--theme-generic-font-hover);
   }
 
   .cta-button:disabled {
-    color: var(--theme-font-3);
+    color: var(--theme-generic-font-grayed);
     cursor: not-allowed;
     text-decoration: none;
   }

packages/web/src/buttons/DropDownButton.svelte

@@ -12,6 +12,8 @@
   export let square = true;
   export let disabled = false;
   export let title = undefined;
+  export let circleHover = false;
+  export let useBorder = false;
 
   let domButton;
   let isLoading = false;
@@ -42,6 +44,8 @@
   {disabled}
   data-testid={$$props['data-testid']}
   {title}
+  {circleHover}
+  {useBorder}
 >
   <FontIcon icon={isLoading ? 'icon loading' : icon} />
 </InlineButton>

packages/web/src/buttons/FormStyledButton.svelte

@@ -38,46 +38,45 @@
 
 <style>
   input {
-    border: 1px solid var(--theme-bg-button-inv-2);
+    border: var(--theme-formbutton-border);
     padding: 5px;
     margin: 2px;
-    color: var(--theme-font-inv-1);
-    border-radius: 2px;
+    color: var(--theme-formbutton-foreground);
+    border-radius: 3px;
+    cursor: pointer;
   }
 
   .setBackgroundColor {
-    background-color: var(--theme-bg-button-inv);
+    background: var(--theme-formbutton-background);
   }
 
   input:not(.skipWidth) {
     width: 100px;
   }
 
-  input:not(.setBackgroundColor) {
-    cursor: pointer;
-  }
-
   input.setBackgroundColor:hover:not(.disabled):not(.outline) {
-    background-color: var(--theme-bg-button-inv-2);
+    background: var(--theme-formbutton-background-hover);
+    border: var(--theme-formbutton-border-hover)
   }
   input.setBackgroundColor:active:not(.disabled):not(.outline) {
-    background-color: var(--theme-bg-button-inv-3);
+    background: var(--theme-formbutton-background-active);
+    border: var(--theme-formbutton-border-active);
   }
   input.disabled {
-    background-color: var(--theme-bg-button-inv-3);
-    color: var(--theme-font-inv-3);
+    background: var(--theme-formbutton-background-disabled);
+    color: var(--theme-formbutton-foreground-disabled);
+    border: var(--theme-formbutton-border-disabled);
   }
 
   input.outline {
     background-color: transparent;
-    color: var(--theme-font-2);
-    border: 1px solid var(--theme-bg-button-inv-2);
+    color: var(--theme-outlinebutton-foreground);
+    border: var(--theme-outlinebutton-border);
   }
 
   input.outline:hover:not(.disabled) {
-    color: var(--theme-bg-button-inv-3);
-    border: 2px solid var(--theme-bg-button-inv-3);
+    color: var(--theme-outlinebutton-hover-foreground);
+    border: var(--theme-outlinebutton-hover-border);
     margin: 1px;
   }
-
 </style>

packages/web/src/buttons/FormStyledButtonLikeLabel.svelte

@@ -8,12 +8,12 @@
 
 <style>
   label {
-    border: 1px solid var(--theme-bg-button-inv-2);
+    border: var(--theme-formbutton-border);
     padding: 4px;
     margin: 2px;
     width: 100px;
-    background-color: var(--theme-bg-button-inv);
-    color: var(--theme-font-inv-1);
+    background: var(--theme-formbutton-background);
+    color: var(--theme-formbutton-foreground);
     border-radius: 2px;
     position: relative;
     top: 3px;
@@ -21,13 +21,13 @@
   }
 
   label:hover:not(.disabled) {
-    background-color: var(--theme-bg-button-inv-2);
+    background: var(--theme-formbutton-background-hover);
   }
   label:active:not(.disabled) {
-    background-color: var(--theme-bg-button-inv-3);
+    background: var(--theme-formbutton-background-active);
   }
   label.disabled {
-    background-color: var(--theme-bg-button-inv-3);
-    color: var(--theme-font-inv-3);
+    background: var(--theme-formbutton-background-disabled);
+    color: var(--theme-formbutton-foreground-disabled);
   }
 </style>

packages/web/src/buttons/FormStyledDropDownButton.svelte

@@ -38,12 +38,12 @@
 
 <style>
   div {
-    border: 1px solid var(--theme-bg-button-inv-2);
+    border: var(--theme-formbutton-border);
     padding: 2px;
     padding-bottom: 4px;
     margin: 2px;
-    background-color: var(--theme-bg-button-inv);
-    color: var(--theme-font-inv-1);
+    background: var(--theme-formbutton-background);
+    color: var(--theme-formbutton-foreground);
     border-radius: 2px;
     display: inline-block;
     cursor: pointer;
@@ -54,25 +54,25 @@
   }
 
   div:hover:not(.disabled):not(.outline) {
-    background-color: var(--theme-bg-button-inv-2);
+    background: var(--theme-formbutton-background-hover);
   }
   div:active:not(.disabled):not(.outline) {
-    background-color: var(--theme-bg-button-inv-3);
+    background: var(--theme-formbutton-background-active);
   }
   div.disabled {
-    background-color: var(--theme-bg-button-inv-3);
-    color: var(--theme-font-inv-3);
+    background: var(--theme-formbutton-background-disabled);
+    color: var(--theme-formbutton-foreground-disabled);
   }
 
   div.outline {
     background-color: transparent;
-    color: var(--theme-font-2);
-    border: 1px solid var(--theme-bg-button-inv-2);
+    color: var(--theme-outlinebutton-foreground);
+    border: var(--theme-outlinebutton-border);
   }
 
   input.outline:hover:not(.disabled) {
-    color: var(--theme-bg-button-inv-3);
-    border: 2px solid var(--theme-bg-button-inv-3);
+    color: var(--theme-outlinebutton-hover-foreground);
+    border: var(--theme-outlinebutton-hover-border);
     margin: 1px;
   }
 </style>

packages/web/src/buttons/InlineButton.svelte

@@ -3,7 +3,9 @@
   export let square = false;
   export let narrow = false;
   export let title = null;
-  export let inlineBlock=false;
+  export let inlineBlock = false;
+  export let useBorder = false;
+  export let circleHover = false;
 
   let domButton;
 
@@ -19,7 +21,10 @@
   class:square
   class:narrow
   class:inlineBlock
+  class:useBorder
+  class:circleHover
   on:click
+  on:mousedown
   bind:this={domButton}
   data-testid={$$props['data-testid']}
 >
@@ -30,16 +35,10 @@
 
 <style>
   .outer {
-    --bg-1: var(--theme-bg-1);
-    --bg-2: var(--theme-bg-3);
-
-    background: linear-gradient(to bottom, var(--bg-1) 5%, var(--bg-2) 100%);
-    background-color: var(--bg-1);
-    border: 1px solid var(--bg-2);
     display: inline-block;
     cursor: pointer;
     vertical-align: middle;
-    color: var(--theme-font-1);
+    color: var(--theme-inlinebutton-foreground);
     font-size: 12px;
     padding: 3px;
     margin: 0;
@@ -47,21 +46,36 @@
     display: flex;
   }
 
+  .outer.circleHover:hover:not(.disabled) {
+    border-radius: 50%;
+    background-color: var(--theme-inlinebutton-circle-hover-background);
+    width: 18px;
+  }
+
+  .outer:not(.useBorder) {
+    font-size: 14px;
+  }
+
+  .outer.useBorder {
+    background: var(--theme-inlinebutton-bordered-background);
+    border: var(--theme-inlinebutton-bordered-border);
+  }
+
   .narrow {
     padding: 3px 1px;
   }
 
   .outer.disabled {
-    color: var(--theme-font-3);
+    color: var(--theme-inlinebutton-foreground-disabled);
+  }
+
+  .outer.useBorder:hover:not(.disabled) {
+    border: var(--theme-inlinebutton-bordered-hover-border);
+    background: var(--theme-inlinebutton-bordered-hover-background);
   }
 
   .outer:hover:not(.disabled) {
-    border: 1px solid var(--theme-font-1);
-  }
-
-  .outer:active:not(.disabled) {
-    background: linear-gradient(to bottom, var(--bg-2) 5%, var(--bg-1) 100%);
-    background-color: var(--bg-2);
+    color: var(--theme-inlinebutton-foreground-hover);
   }
 
   .inner {
@@ -70,7 +84,7 @@
     text-align: center;
   }
 
-  .square {
+  .square.useBorder {
     width: 18px;
   }
 

packages/web/src/buttons/InlineButtonLabel.svelte

@@ -3,6 +3,7 @@
   export let square = false;
   export let narrow = false;
   export let title = null;
+  export let useBorder = false;
 
   let domButton;
 
@@ -28,16 +29,10 @@
 
 <style>
   .outer {
-    --bg-1: var(--theme-bg-1);
-    --bg-2: var(--theme-bg-3);
-
-    background: linear-gradient(to bottom, var(--bg-1) 5%, var(--bg-2) 100%);
-    background-color: var(--bg-1);
-    border: 1px solid var(--bg-2);
     display: inline-block;
     cursor: pointer;
     vertical-align: middle;
-    color: var(--theme-font-1);
+    color: var(--theme-inlinebutton-foreground);
     font-size: 12px;
     padding: 3px;
     margin: 0;
@@ -45,21 +40,34 @@
     display: flex;
   }
 
+  .outer:not(.useBorder) {
+    font-size: 14px;
+  }
+
+  .outer.useBorder {
+    background: var(--theme-inlinebutton-bordered-background);
+    border: var(--theme-inlinebutton-bordered-border);
+  }
+
   .narrow {
     padding: 3px 1px;
   }
 
   .outer.disabled {
-    color: var(--theme-font-3);
+    color: var(--theme-inlinebutton-foreground-disabled);
+  }
+
+  .outer.useBorder:hover:not(.disabled) {
+    border: var(--theme-inlinebutton-bordered-hover-border);
   }
 
   .outer:hover:not(.disabled) {
-    border: 1px solid var(--theme-font-1);
+    color: var(--theme-inlinebutton-foreground-hover);
   }
 
-  .outer:active:not(.disabled) {
-    background: linear-gradient(to bottom, var(--bg-2) 5%, var(--bg-1) 100%);
-    background-color: var(--bg-2);
+  .outer.useBorder:active:not(.disabled) {
+    border: var(--theme-inlinebutton-bordered-hover-border);
+    background: var(--theme-inlinebutton-bordered-hover-background);
   }
 
   .inner {
@@ -68,7 +76,11 @@
     text-align: center;
   }
 
-  .square {
+  .square.useBorder {
     width: 18px;
   }
+
+  .inlineBlock {
+    display: inline-block;
+  }
 </style>

packages/web/src/buttons/LargeButton.svelte

@@ -24,37 +24,55 @@
 
 <style>
   .button {
-    padding: 5px 15px;
-    color: var(--theme-font-1);
-    border: 1px solid var(--theme-border);
-    width: 120px;
-    height: 60px;
-    background-color: var(--theme-bg-1);
-  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px 16px;
+  color: var(--theme-toolstrip-button-foreground);
+  border: var(--theme-toolstrip-button-border);
+  width: 120px;
+  height: 48px;
+  background-color: var(--theme-toolstrip-button-background);
+  border-radius: 10px;
+  cursor: pointer;
+}
 
-  .button.fillHorizontal {
-    width: auto;
-    margin: 0px 10px;
-  }
+.button.fillHorizontal {
+  width: auto;
+  margin: 0px 10px;
+  padding: 0;
+}
 
-  .button:not(.disabled):hover {
-    background-color: var(--theme-bg-2);
-  }
+.button:not(.disabled):hover {
+  background-color: var(--theme-toolstrip-button-background-hover);
+  border: var(--theme-toolstrip-button-border-hover);
+}
 
-  .button:not(.disabled):active {
-    background-color: var(--theme-bg-3);
-  }
+.button:not(.disabled):active {
+  background-color: var(--theme-toolstrip-button-background-active);
+  border: var(--theme-toolstrip-button-border);
+  transform: translateY(1px);
+}
 
-  .button.disabled {
-    color: var(--theme-font-3);
-  }
+.button.disabled {
+  color: var(--theme-toolstrip-button-foreground-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
 
-  .icon {
-    font-size: 30px;
-    text-align: center;
-  }
+.icon {
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0;
+}
 
-  .inner {
-    text-align: center;
-  }
+.inner {
+  text-align: left;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.2;
+}
 </style>

packages/web/src/buttons/NewObjectButton.svelte

@@ -37,51 +37,54 @@
 
 <style>
   .new-object-button {
-    width: 150px;
-    height: 150px;
-    background-color: var(--theme-bg-1);
-    border-radius: 4px;
-    border: 1px solid var(--theme-border);
+  height: 114px;
+  padding: 10px 8px;
 
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
+  background-color: var(--theme-new-object-button-background);
+  border: var(--theme-inlinebutton-bordered-border);
+  border-radius: 6px;
 
-  .new-object-button.enabled {
-    cursor: pointer;
-  }
-  .new-object-button.enabled:hover {
-    background-color: var(--theme-bg-2);
-  }
-  .icon {
-    font-size: 3em;
-    margin-top: 20px;
-    color: var(--theme-font-1);
-  }
-  .title {
-    margin-top: 0.2em;
-    font-weight: bold;
-  }
-  .description {
-    margin-top: 0.2em;
-    margin-left: 0.5em;
-    margin-right: 0.5em;
-    font-size: 0.9em;
-    color: var(--theme-font-2);
-  }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
 
-  .new-object-button.disabled .title {
-    color: var(--theme-font-2);
-  }
-  .new-object-button.disabled .description {
-    color: var(--theme-font-2);
-  }
-  .new-object-button.disabled .icon {
-    color: var(--theme-font-2);
-  }
-  .new-object-button.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
+.new-object-button.enabled {
+  cursor: pointer;
+}
+
+.new-object-button.enabled:hover {
+  background-color: var(--theme-new-object-button-background-hover);
+}
+
+.icon {
+  font-size: 2.5em;
+  margin: 6px 0 6px;
+  color: var(--theme-generic-font);
+}
+
+.title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.description {
+  font-size: 0.7rem;
+  color: var(--theme-generic-font-grayed);
+  line-height: 1.2;
+  margin-top: 2px;
+}
+
+.new-object-button.disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.new-object-button.disabled .icon,
+.new-object-button.disabled .title,
+.new-object-button.disabled .description {
+  color: var(--theme-generic-font);
+}
 </style>

packages/web/src/buttons/ToolStripButton.svelte

@@ -27,40 +27,52 @@
 
 <style>
   .button {
-    /* padding: 5px 15px; */
-    padding-left: 5px;
-    padding-right: 5px;
-    color: var(--theme-font-1);
-    border: 0;
+    padding-left: 3px;
+    padding-right: 3px;
+    color: var(--theme-toolstrip-button-foreground);
     align-self: stretch;
     display: flex;
     user-select: none;
-    margin: 2px 0px;
+    margin: 1px;
   }
   .button.disabled {
-    color: var(--theme-font-3);
+    color: var(--theme-toolstrip-button-foreground-disabled);
+    opacity: 0.6;
   }
   .inner:hover:not(.disabled) {
-    background: var(--theme-bg-3);
+    background: var(--theme-toolstrip-button-background-hover);
+    border: var(--theme-toolstrip-button-border-hover);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   }
   .inner:active:hover:not(.disabled) {
-    background: var(--theme-bg-4);
+    background: var(--theme-toolstrip-button-background-active);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset;
+    transform: translateY(1px);
   }
   .icon {
     margin-right: 5px;
-    color: var(--theme-font-link);
+    color: var(--theme-toolstrip-button-foreground-icon);
+    transition: color 0.15s ease;
   }
   .icon.disabled {
-    color: var(--theme-font-3);
+    color: var(--theme-toolstrip-button-foreground-disabled);
   }
   .inner {
-    /* position: relative;
-    top: 2px; */
     white-space: nowrap;
     align-self: center;
-    background: var(--theme-bg-2);
+    background: var(--theme-toolstrip-button-background);
     padding: 3px 8px;
     border-radius: 4px;
+    border: var(--theme-toolstrip-button-border);
     cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    font-weight: 500;
+  }
+  .inner.disabled {
+    border: var(--theme-toolstrip-button-border-disabled);
+    cursor: not-allowed;
   }
 </style>

packages/web/src/buttons/ToolStripContainer.svelte

@@ -13,16 +13,23 @@
 
   export let scrollContent = false;
   export let hideToolStrip = false;
+  export let toolstripPosition = 'top'; // 'top' | 'bottom'
 
   $: isComponentActive = showAlways || ($isComponentActiveStore('ToolStripContainer', thisInstance) && !hideToolStrip);
 </script>
 
 <div class="wrapper">
+  {#if isComponentActive && toolstripPosition === 'top'}
+    <div class="toolstrip">
+      <slot name="toolstrip" />
+    </div>
+  {/if}
+
   <div class="content" class:scrollContent class:isComponentActive>
     <slot />
   </div>
 
-  {#if isComponentActive}
+  {#if isComponentActive && toolstripPosition === 'bottom'}
     <div class="toolstrip">
       <slot name="toolstrip" />
     </div>
@@ -36,7 +43,6 @@
     flex-direction: column;
   }
   .content {
-    border-bottom: 1px solid var(--theme-border);
     display: flex;
     flex: 1;
     position: relative;
@@ -44,13 +50,20 @@
   }
 
   .content.isComponentActive {
-    max-height: calc(100% - 30px);
+    max-height: calc(100% - 32px);
   }
 
   .toolstrip {
     display: flex;
     flex-wrap: wrap;
-    background: var(--theme-bg-1);
+    align-items: center;
+    background: var(--theme-toolstrip-background);
+    border-top: var(--theme-toolstrip-border);
+    border-bottom: var(--theme-toolstrip-border);
+    padding: 2px 6px;
+    gap: 2px;
+    min-height: 32px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
   }
 
   .scrollContent {

packages/web/src/buttons/ToolStripSplitButton.svelte

@@ -31,47 +31,68 @@
 
 <style>
   .button {
-    /* padding: 5px 15px; */
-    padding-left: 5px;
-    padding-right: 5px;
-    color: var(--theme-font-1);
+    padding-left: 3px;
+    padding-right: 3px;
+    color: var(--theme-toolstrip-button-foreground);
     border: 0;
     align-self: stretch;
     display: flex;
     user-select: none;
-    margin: 2px 0px;
+    margin: 1px;
   }
   .button.disabled {
-    color: var(--theme-font-3);
+    color: var(--theme-toolstrip-button-foreground-disabled);
+    opacity: 0.6;
   }
   .main {
-    background: var(--theme-bg-2);
-    padding: 3px 0px 3px 8px;
+    background: var(--theme-toolstrip-button-background);
+    border: var(--theme-toolstrip-button-border);
+    padding: 3px 6px 3px 8px;
     border-radius: 4px 0px 0px 4px;
+    border-right: none;
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    font-weight: 500;
+    transition: all 0.15s ease;
   }
   .main:hover:not(.disabled) {
-    background: var(--theme-bg-3);
+    background: var(--theme-toolstrip-button-background-hover);
+    border: var(--theme-toolstrip-button-border-hover);
+    border-right: none;
+    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.08);
   }
   .main:active:hover:not(.disabled) {
-    background: var(--theme-bg-4);
+    background: var(--theme-toolstrip-button-background-active);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset;
+    transform: translateY(1px);
   }
   .split-icon:hover:not(.disabled) {
-    background: var(--theme-bg-3);
+    background: var(--theme-toolstrip-button-background-hover);
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.08);
   }
   .split-icon:active:hover:not(.disabled) {
-    background: var(--theme-bg-4);
+    background: var(--theme-toolstrip-button-background-active);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset;
+    transform: translateY(1px);
   }
   .split-icon {
-    background: var(--theme-bg-2);
-    padding: 3px 8px 3px 0px;
+    background: var(--theme-toolstrip-button-background);
+    padding: 3px 6px;
     border-radius: 0px 4px 4px 0px;
+    border: var(--theme-toolstrip-button-border);
+    border-left: var(--theme-toolstrip-button-split-separator-border);
+    transition: all 0.15s ease;
+    color: var(--theme-toolstrip-button-foreground-icon);
+    cursor: pointer;
   }
   .icon {
     margin-right: 5px;
-    color: var(--theme-font-link);
+    color: var(--theme-toolstrip-button-foreground-icon);
+    transition: color 0.15s ease;
   }
   .icon.disabled {
-    color: var(--theme-font-3);
+    color: var(--theme-toolstrip-button-foreground-disabled);
   }
   .inner {
     white-space: nowrap;
@@ -79,13 +100,4 @@
     cursor: pointer;
     display: flex;
   }
-  .main {
-    display: flex;
-    padding-right: 5px;
-  }
-  .split-icon {
-    padding-left: 5px;
-    color: var(--theme-font-link);
-    border-left: 1px solid var(--theme-bg-4);
-  }
 </style>

packages/web/src/buttons/ToolbarButton.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  import FontIcon from '../icons/FontIcon.svelte';
-
-  export let disabled = false;
-  export let icon = null;
-  export let title = null;
-  export let externalImage = null;
-
-  const dispatch = createEventDispatcher();
-
-  function handleClick(e) {
-    if (disabled) return;
-    dispatch('click');
-  }
-</script>
-
-<div class="button" on:click={handleClick} class:disabled {title}>
-  <div class="inner">
-    {#if externalImage}
-      <img src={externalImage} />
-    {:else}
-      <span class="icon" class:disabled><FontIcon {icon} /></span>
-      <slot />
-    {/if}
-  </div>
-</div>
-
-<style>
-  .button {
-    /* padding: 5px 15px; */
-    padding-left: 15px;
-    padding-right: 15px;
-    color: var(--theme-font-1);
-    border: 0;
-    border-right: 1px solid var(--theme-border);
-    align-self: stretch;
-    display: flex;
-    user-select: none;
-  }
-  .button.disabled {
-    color: var(--theme-font-3);
-  }
-  .button:hover:not(.disabled) {
-    background: var(--theme-bg-2);
-  }
-  .button:active:hover:not(.disabled) {
-    background: var(--theme-bg-3);
-  }
-  .icon {
-    margin-right: 5px;
-    color: var(--theme-font-link);
-  }
-  .icon.disabled {
-    color: var(--theme-font-3);
-  }
-  .inner {
-    /* position: relative;
-    top: 2px; */
-    white-space: nowrap;
-    align-self: center;
-  }
-  img {
-    width: 20px;
-    height: 20px;
-  }
-</style>

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 {filter}>
+          <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: var(--theme-table-border);
+    border-bottom: none;
+  }
+
+  .inner {
+    overflow: auto;
+    flex: 1;
+    padding: 4px;
+  }
+
+  .no-data {
+    color: var(--theme-generic-font-grayed);
+    font-style: italic;
+    padding: 8px;
+  }
+
+  .field {
+    margin-bottom: 8px;
+    border: var(--theme-table-border);
+    border-radius: 3px;
+    overflow: hidden;
+  }
+
+  .field-name {
+    background: var(--theme-table-header-background);
+    padding: 4px 8px;
+    font-weight: 500;
+    font-size: 11px;
+    color: var(--theme-generic-font-grayed);
+    border-bottom: var(--theme-table-border);
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .field-value {
+    padding: 6px 8px;
+    background: var(--theme-table-cell-background);
+    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-table-cell-background);
+    color: var(--theme-generic-font);
+    padding: 0;
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  .inline-editor:focus {
+    outline: none;
+  }
+
+  .multiple-values {
+    color: var(--theme-generic-font-grayed);
+    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/CommandPalette.svelte

@@ -23,7 +23,7 @@
     testEnabled: () => getVisibleCommandPalette() != 'database',
   });
 
-  function extractDbItems(db, dbConnectionInfo, connectionList) {
+  function extractDbItems(db, dbConnectionInfo, connectionList, $extensions, currentThemeType) {
     const objectList = _.flatten(
       ['tables', 'collections', 'views', 'matviews', 'procedures', 'functions'].map(objectTypeField =>
         _.sortBy(
@@ -42,10 +42,15 @@
       if (connection.singleDatabase) continue;
       if (getCurrentConfig()?.singleDbConnection) continue;
       const databases = getLocalStorage(`database_list_${conid}`) || [];
+      
+      const driver = findEngineDriver(connection, $extensions);
+      const driverIcon = getDriverIcon(driver, currentThemeType);
+      const connectionIcon = driverIcon || 'img database';
+      
       for (const db of databases) {
         databaseList.push({
           text: `${db.name} on ${getConnectionLabel(connection)}`,
-          icon: 'img database',
+          icon: connectionIcon,
           onClick: () => switchCurrentDatabase({ connection, name: db.name }),
         });
       }
@@ -60,7 +65,7 @@
 </script>
 
 <script>
-  import { filterName, getConnectionLabel } from 'dbgate-tools';
+  import { filterName, getConnectionLabel, findEngineDriver } from 'dbgate-tools';
 
   import _ from 'lodash';
   import { onMount } from 'svelte';
@@ -73,6 +78,7 @@
     getCurrentConfig,
     getVisibleCommandPalette,
     visibleCommandPalette,
+    extensions,
   } from '../stores';
   import clickOutside from '../utility/clickOutside';
   import { isElectronAvailable } from '../utility/getElectron';
@@ -82,6 +88,8 @@
   import registerCommand from './registerCommand';
   import { formatKeyText, switchCurrentDatabase } from '../utility/common';
   import { _tval, __t, _t } from '../translations';
+  import { getDriverIcon } from '../utility/driverIcons';
+  import { currentThemeType } from '../plugins/themes';
 
   let domInput;
   let filter = '';
@@ -112,7 +120,7 @@
     .filter(
       filter,
       ($visibleCommandPalette == 'database'
-        ? extractDbItems($databaseInfo, { conid, database }, $connectionList)
+        ? extractDbItems($databaseInfo, { conid, database }, $connectionList, $extensions, $currentThemeType)
         : parentCommand
           ? parentCommand.getSubCommands()
           : sortedComands
@@ -240,6 +248,7 @@
     justify-content: center;
     align-items: flex-start;
     padding-top: 100px;
+    z-index: 1000;
   }
 
   .overlay {
@@ -248,7 +257,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: var(--theme-modal-overlay-background);
     z-index: 1;
   }
 
@@ -256,84 +265,109 @@
     position: relative;
     z-index: 2;
     width: 600px;
-    background: var(--theme-bg-2);
-    border-radius: 4px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    background: var(--theme-modal-background);
+    border: var(--theme-modal-border);
+    border-radius: 6px;
+    box-shadow: var(--theme-modal-shadow);
+    overflow: hidden;
   }
 
   .mainInner {
-    padding: 8px;
+    padding: 0;
   }
 
   .content {
     max-height: 500px;
     overflow-y: auto;
-    margin-top: 8px;
   }
 
   .search {
     display: flex;
-    margin-bottom: 8px;
+    padding: 12px;
+    background: var(--theme-modal-background);
+    border-bottom: var(--theme-table-border);
   }
 
   input {
     width: 100%;
-    padding: 8px;
-    background: var(--theme-bg-1);
-    border: 1px solid var(--theme-border);
-    border-radius: 4px;
-    color: var(--theme-font);
+    padding: 10px 12px;
+    background: var(--theme-input-background);
+    border: var(--theme-input-border);
+    border-radius: 6px;
+    color: var(--theme-input-foreground);
     font-size: 14px;
+    font-weight: 500;
+  }
+
+  input::placeholder {
+    color: var(--theme-input-placeholder);
+  }
+
+  input:hover {
+    border: var(--theme-input-border-hover);
   }
 
   input:focus {
     outline: none;
-    border-color: var(--theme-accent);
+    border: var(--theme-input-border-focus);
+    box-shadow: var(--theme-input-focus-ring);
   }
 
   .command {
-    padding: 8px 12px;
+    padding: 10px 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
-    border-radius: 4px;
+    border-radius: 0;
+    color: var(--theme-generic-font);
+    transition: background-color 150ms ease-in-out;
   }
 
   .command:hover {
-    background: var(--theme-bg-3);
+    background: var(--theme-table-hover-background);
   }
 
   .command.selected {
-    background: var(--theme-bg-selected);
+    background: var(--theme-table-selected-background);
+    color: var(--theme-generic-font);
   }
 
   .shortcut {
-    background: var(--theme-bg-3);
-    padding: 2px 6px;
-    border-radius: 3px;
-    font-size: 12px;
-    color: var(--theme-font-dimmed);
+    background: var(--theme-input-background);
+    border: var(--theme-input-border);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    color: var(--theme-generic-font-grayed);
+    font-weight: 500;
+    margin-left: 12px;
   }
 
   .pages {
     display: flex;
-    border-bottom: 1px solid var(--theme-border);
+    background: var(--theme-modal-background);
+    border-bottom: var(--theme-table-border);
   }
 
   .page {
-    padding: 8px 16px;
+    padding: 12px 16px;
     cursor: pointer;
-    color: var(--theme-font-dimmed);
+    color: var(--theme-generic-font-grayed);
     border-bottom: 2px solid transparent;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    transition: color 150ms ease-in-out, border-color 150ms ease-in-out;
   }
 
   .page:hover {
-    color: var(--theme-font);
+    color: var(--theme-generic-font-hover);
   }
 
   .page.selected {
-    color: var(--theme-font);
-    border-bottom-color: var(--theme-accent);
+    color: var(--theme-generic-font);
+    border-bottom-color: var(--theme-link-foreground);
   }
 </style>

packages/web/src/commands/stdCommands.ts

@@ -1,15 +1,12 @@
 import {
   cloudSigninTokenHolder,
   currentDatabase,
-  currentTheme,
   emptyConnectionGroupNames,
   extensions,
   getAppUpdaterActive,
   getCloudSigninTokenHolder,
   getExtensions,
-  getVisibleToolbar,
   promoWidgetPreview,
-  visibleToolbar,
   visibleWidgetSideBar,
   selectedWidget,
 } from '../stores';
@@ -83,22 +80,6 @@ registerCommand({
   // getSubCommands: () => get(extensions).themes.map(themeCommand),
 });
 
-registerCommand({
-  id: 'toolbar.show',
-  category: __t('command.toolbar', { defaultMessage: 'Toolbar' }),
-  name: __t('command.toolbar.show', { defaultMessage: 'Show' }),
-  onClick: () => visibleToolbar.set(true),
-  testEnabled: () => !getVisibleToolbar(),
-});
-
-registerCommand({
-  id: 'toolbar.hide',
-  category: __t('command.toolbar', { defaultMessage: 'Toolbar' }),
-  name: __t('command.toolbar.hide', { defaultMessage: 'Hide' }),
-  onClick: () => visibleToolbar.set(false),
-  testEnabled: () => getVisibleToolbar(),
-});
-
 registerCommand({
   id: 'about.show',
   category: __t('command.about', { defaultMessage: 'About' }),
@@ -651,9 +632,10 @@ registerCommand({
   onClick: () => {
     const keys = [
       'leftPanelWidth',
-      'visibleToolbar',
+      'rightPanelWidth',
       'selectedWidget',
-      'currentTheme',
+      'currentThemeType',
+      'currentThemeVariables',
 
       'connectionsWidget',
       'pinnedItemsWidget',
@@ -703,7 +685,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,

packages/web/src/datagrid/CellValue.svelte

@@ -28,11 +28,11 @@
 
 <style>
   .nullCellStyle {
-    color: var(--theme-font-3);
+    color: var(--theme-datagrid-foreground-grayed);
     font-style: italic;
   }
   .valueCellStyle {
-    color: var(--theme-icon-green);
+    color: var(--theme-datagrid-cell-foreground-value-green);
   }
 
   .rightMargin {

packages/web/src/datagrid/CollapseButton.svelte

@@ -19,19 +19,15 @@
 
 <style>
   div {
-    color: var(--theme-font-3);
-    text-align: center;
-    /* position: absolute;
-    left: 0px;
-    top: 4px;
-    background-color: var(--theme-bg-1);
-    border: 1px solid var(--theme-bg-1); */
-    margin: 1px;
-  }
+  color: var(--theme-generic-font-grayed);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 1px;
+  cursor: pointer;
+}
 
-  div:hover {
-    color: var(--theme-font-hover);
-    border: 1px solid var(--theme-font-1);
-    margin: 0px;
-  }
+div:hover {
+  color: var(--theme-generic-font);
+}
 </style>