From 8a22f9215f84c4c3dc636afad061cc2b8df727f9 Mon Sep 17 00:00:00 2001 From: Stela Augustinova Date: Wed, 17 Dec 2025 16:13:20 +0100 Subject: [PATCH 1/3] Added svg icons for engines --- packages/types/engines.d.ts | 1 + plugins/dbgate-plugin-cassandra/src/frontend/driver.js | 3 +++ plugins/dbgate-plugin-clickhouse/src/frontend/driver.js | 3 +++ plugins/dbgate-plugin-mongo/src/frontend/drivers.js | 3 +++ plugins/dbgate-plugin-mssql/src/frontend/driver.js | 2 ++ plugins/dbgate-plugin-mysql/src/frontend/drivers.js | 2 ++ plugins/dbgate-plugin-oracle/src/frontend/driver.js | 2 ++ plugins/dbgate-plugin-postgres/src/frontend/drivers.js | 2 ++ plugins/dbgate-plugin-redis/src/frontend/driver.js | 2 ++ plugins/dbgate-plugin-sqlite/src/frontend/drivers.js | 2 ++ 10 files changed, 22 insertions(+) diff --git a/packages/types/engines.d.ts b/packages/types/engines.d.ts index 5556b5b10..656ba1224 100644 --- a/packages/types/engines.d.ts +++ b/packages/types/engines.d.ts @@ -253,6 +253,7 @@ export interface EngineDriver extends FilterBeha collectionPluralLabel?: string; collectionNameLabel?: string; newCollectionFormParams?: any[]; + icon?: any; supportedCreateDatabase?: boolean; showConnectionField?: ( diff --git a/plugins/dbgate-plugin-cassandra/src/frontend/driver.js b/plugins/dbgate-plugin-cassandra/src/frontend/driver.js index 587569add..941697b22 100644 --- a/plugins/dbgate-plugin-cassandra/src/frontend/driver.js +++ b/plugins/dbgate-plugin-cassandra/src/frontend/driver.js @@ -3,6 +3,8 @@ const Dumper = require('./Dumper'); const { mysqlSplitterOptions } = require('dbgate-query-splitter/lib/options'); const _cloneDeepWith = require('lodash/cloneDeepWith'); +const cassandraIcon = '' + /** @type {import('dbgate-types').SqlDialect} */ const dialect = { limitSelect: true, @@ -85,6 +87,7 @@ const driver = { dialect, engine: 'cassandra@dbgate-plugin-cassandra', title: 'Cassandra', + icon: cassandraIcon, showConnectionField: (field, values) => ['server', 'singleDatabase', 'localDataCenter', 'isReadOnly', 'user', 'password'].includes(field), getQuerySplitterOptions: (usage) => diff --git a/plugins/dbgate-plugin-clickhouse/src/frontend/driver.js b/plugins/dbgate-plugin-clickhouse/src/frontend/driver.js index 5db8c7d38..249398f4c 100644 --- a/plugins/dbgate-plugin-clickhouse/src/frontend/driver.js +++ b/plugins/dbgate-plugin-clickhouse/src/frontend/driver.js @@ -3,6 +3,8 @@ const Dumper = require('./Dumper'); const { mysqlSplitterOptions } = require('dbgate-query-splitter/lib/options'); const _cloneDeepWith = require('lodash/cloneDeepWith'); +const clickhouseIcon = ''; + const clickhouseEngines = [ 'MergeTree', 'ReplacingMergeTree', @@ -148,6 +150,7 @@ const driver = { engine: 'clickhouse@dbgate-plugin-clickhouse', title: 'ClickHouse', supportsIncrementalAnalysis: true, + icon: clickhouseIcon, showConnectionField: (field, values) => { return ['databaseUrl', 'defaultDatabase', 'singleDatabase', 'isReadOnly', 'user', 'password'].includes(field); }, diff --git a/plugins/dbgate-plugin-mongo/src/frontend/drivers.js b/plugins/dbgate-plugin-mongo/src/frontend/drivers.js index 84db9321c..d9fe25e87 100644 --- a/plugins/dbgate-plugin-mongo/src/frontend/drivers.js +++ b/plugins/dbgate-plugin-mongo/src/frontend/drivers.js @@ -5,6 +5,8 @@ const { mongoSplitterOptions } = require('dbgate-query-splitter/lib/options'); const _pickBy = require('lodash/pickBy'); const _fromPairs = require('lodash/fromPairs'); +const mongoIcon = ''; + function mongoReplacer(key, value) { if (typeof value === 'bigint') { return { $bigint: value.toString() }; @@ -61,6 +63,7 @@ const mongoDriverBase = { databaseUrlPlaceholder: 'e.g. mongodb://username:password@mongodb.mydomain.net/dbname', collectionSingularLabel: 'collection', collectionPluralLabel: 'collections', + icon: mongoIcon, getQuerySplitterOptions: () => mongoSplitterOptions, diff --git a/plugins/dbgate-plugin-mssql/src/frontend/driver.js b/plugins/dbgate-plugin-mssql/src/frontend/driver.js index 7f9961202..3b1c0a154 100644 --- a/plugins/dbgate-plugin-mssql/src/frontend/driver.js +++ b/plugins/dbgate-plugin-mssql/src/frontend/driver.js @@ -1,6 +1,7 @@ const { driverBase } = global.DBGATE_PACKAGES['dbgate-tools']; const MsSqlDumper = require('./MsSqlDumper'); const { mssqlSplitterOptions } = require('dbgate-query-splitter/lib/options'); +const msSqlIcon = '' const spatialTypes = ['GEOGRAPHY']; @@ -136,6 +137,7 @@ const driver = { dialect, readOnlySessions: false, requiresDefaultSortCriteria: true, + icon: msSqlIcon, dialectByVersion(version) { if (version && version.productVersionNumber < 11) { return { diff --git a/plugins/dbgate-plugin-mysql/src/frontend/drivers.js b/plugins/dbgate-plugin-mysql/src/frontend/drivers.js index 0ed90f494..52d097181 100644 --- a/plugins/dbgate-plugin-mysql/src/frontend/drivers.js +++ b/plugins/dbgate-plugin-mysql/src/frontend/drivers.js @@ -1,6 +1,7 @@ const { driverBase } = global.DBGATE_PACKAGES['dbgate-tools']; const { mysqlSplitterOptions } = require('dbgate-query-splitter/lib/options'); const Dumper = require('./Dumper'); +const mySqlIcon = ''; const spatialTypes = [ 'POINT', @@ -395,6 +396,7 @@ const mysqlDriver = { __analyserInternals: { quoteDefaultValues: true, }, + icon: mySqlIcon, }; const mariaDbDialect = { diff --git a/plugins/dbgate-plugin-oracle/src/frontend/driver.js b/plugins/dbgate-plugin-oracle/src/frontend/driver.js index 49cd9ee5e..4cd723985 100644 --- a/plugins/dbgate-plugin-oracle/src/frontend/driver.js +++ b/plugins/dbgate-plugin-oracle/src/frontend/driver.js @@ -1,6 +1,7 @@ const { driverBase } = global.DBGATE_PACKAGES['dbgate-tools']; const Dumper = require('./Dumper'); const { oracleSplitterOptions } = require('dbgate-query-splitter/lib/options'); +const oracleIcon = ''; const spatialTypes = ['GEOGRAPHY']; @@ -106,6 +107,7 @@ const oracleDriver = { implicitTransactions: true, databaseUrlPlaceholder: 'e.g. localhost:1521/orcl', + icon: oracleIcon, showConnectionField: (field, values, { config }) => { if (field == 'useDatabaseUrl') return true; diff --git a/plugins/dbgate-plugin-postgres/src/frontend/drivers.js b/plugins/dbgate-plugin-postgres/src/frontend/drivers.js index 190e92ba9..37da705f4 100644 --- a/plugins/dbgate-plugin-postgres/src/frontend/drivers.js +++ b/plugins/dbgate-plugin-postgres/src/frontend/drivers.js @@ -1,6 +1,7 @@ const { driverBase } = global.DBGATE_PACKAGES['dbgate-tools']; const Dumper = require('./Dumper'); const { postgreSplitterOptions } = require('dbgate-query-splitter/lib/options'); +const postgresIcon = '' const spatialTypes = ['GEOGRAPHY', 'GEOMETRY']; @@ -126,6 +127,7 @@ const postgresDriverBase = { dialect, // showConnectionField: (field, values) => // ['server', 'port', 'user', 'password', 'defaultDatabase', 'singleDatabase'].includes(field), + icon : postgresIcon, getQuerySplitterOptions: usage => usage == 'editor' ? { ...postgreSplitterOptions, ignoreComments: true, preventSingleLineSplit: true } diff --git a/plugins/dbgate-plugin-redis/src/frontend/driver.js b/plugins/dbgate-plugin-redis/src/frontend/driver.js index 3182cbc25..d5355c161 100644 --- a/plugins/dbgate-plugin-redis/src/frontend/driver.js +++ b/plugins/dbgate-plugin-redis/src/frontend/driver.js @@ -1,6 +1,7 @@ const { driverBase } = global.DBGATE_PACKAGES['dbgate-tools']; const { redisSplitterOptions } = require('dbgate-query-splitter/lib/options'); const Dumper = require('./Dumper'); +const redisIcon = ''; /** @type {import('dbgate-types').SqlDialect} */ const dialect = { @@ -30,6 +31,7 @@ const driver = { databaseUrlPlaceholder: 'e.g. redis://:authpassword@127.0.0.1:6380/4', authTypeLabel: 'Connection mode', defaultAuthTypeName: 'node', + icon: redisIcon, supportedKeyTypes: [ { name: 'string', diff --git a/plugins/dbgate-plugin-sqlite/src/frontend/drivers.js b/plugins/dbgate-plugin-sqlite/src/frontend/drivers.js index 91fc37fa3..c4bb396bf 100644 --- a/plugins/dbgate-plugin-sqlite/src/frontend/drivers.js +++ b/plugins/dbgate-plugin-sqlite/src/frontend/drivers.js @@ -3,6 +3,7 @@ const { driverBase } = global.DBGATE_PACKAGES['dbgate-tools']; const Dumper = require('./Dumper'); const { sqliteSplitterOptions, noSplitSplitterOptions } = require('dbgate-query-splitter/lib/options'); +const sqlLiteIcon = ''; function getDatabaseFileLabel(databaseFile) { if (!databaseFile) return databaseFile; @@ -59,6 +60,7 @@ const sqliteDriverBase = { showConnectionTab: (field) => false, predefinedDataTypes: ['integer', 'real', 'text', 'blob'], + icon: sqlLiteIcon, }; /** @type {import('dbgate-types').EngineDriver} */ From 69b1fb1bfda510b9d471ae939180171d19b8a4bc Mon Sep 17 00:00:00 2001 From: Stela Augustinova Date: Wed, 17 Dec 2025 16:15:35 +0100 Subject: [PATCH 2/3] Add support for SVG icons in FontIcon component and update connection icon logic --- .../web/src/appobj/ConnectionAppObject.svelte | 3 +- packages/web/src/icons/FontIcon.svelte | 42 +++++++++++++++---- 2 files changed, 35 insertions(+), 10 deletions(-) diff --git a/packages/web/src/appobj/ConnectionAppObject.svelte b/packages/web/src/appobj/ConnectionAppObject.svelte index afdaa91e5..0c3d848c8 100644 --- a/packages/web/src/appobj/ConnectionAppObject.svelte +++ b/packages/web/src/appobj/ConnectionAppObject.svelte @@ -431,13 +431,14 @@ } $: apps = useAllApps(); + $: driver = $extensions.drivers.find(x => x.engine == data.engine); - +{#if isSvgString} + + {@html icon} + +{:else} + +{/if} '; const spatialTypes = [ 'POINT', 'LINESTRING', @@ -438,6 +438,7 @@ const mariaDriver = { __analyserInternals: { quoteDefaultValues: false, }, + icon: mariaDbIcon, }; module.exports = [mysqlDriver, mariaDriver]; diff --git a/plugins/dbgate-plugin-oracle/src/frontend/driver.js b/plugins/dbgate-plugin-oracle/src/frontend/driver.js index 4cd723985..e5124b11f 100644 --- a/plugins/dbgate-plugin-oracle/src/frontend/driver.js +++ b/plugins/dbgate-plugin-oracle/src/frontend/driver.js @@ -1,7 +1,7 @@ const { driverBase } = global.DBGATE_PACKAGES['dbgate-tools']; const Dumper = require('./Dumper'); const { oracleSplitterOptions } = require('dbgate-query-splitter/lib/options'); -const oracleIcon = ''; +const oracleIcon = ''; const spatialTypes = ['GEOGRAPHY']; diff --git a/plugins/dbgate-plugin-postgres/src/frontend/drivers.js b/plugins/dbgate-plugin-postgres/src/frontend/drivers.js index 37da705f4..6aaa35a1c 100644 --- a/plugins/dbgate-plugin-postgres/src/frontend/drivers.js +++ b/plugins/dbgate-plugin-postgres/src/frontend/drivers.js @@ -2,7 +2,8 @@ const { driverBase } = global.DBGATE_PACKAGES['dbgate-tools']; const Dumper = require('./Dumper'); const { postgreSplitterOptions } = require('dbgate-query-splitter/lib/options'); const postgresIcon = '' - +const cockroachIcon = 'CL'; +const redshiftIcon = ''; const spatialTypes = ['GEOGRAPHY', 'GEOMETRY']; /** @type {import('dbgate-types').SqlDialect} */ @@ -127,7 +128,6 @@ const postgresDriverBase = { dialect, // showConnectionField: (field, values) => // ['server', 'port', 'user', 'password', 'defaultDatabase', 'singleDatabase'].includes(field), - icon : postgresIcon, getQuerySplitterOptions: usage => usage == 'editor' ? { ...postgreSplitterOptions, ignoreComments: true, preventSingleLineSplit: true } @@ -372,7 +372,7 @@ const postgresDriver = { ...dialect, materializedViews: true, }, - + icon : postgresIcon, dialectByVersion(version) { if (version) { return { @@ -403,6 +403,7 @@ const cockroachDriver = { dropPrimaryKey: false, }, __analyserInternals: {}, + icon: cockroachIcon, }; /** @type {import('dbgate-types').EngineDriver} */ @@ -421,6 +422,7 @@ const redshiftDriver = { defaultPort: 5439, premiumOnly: true, databaseUrlPlaceholder: 'e.g. redshift-cluster-1.xxxx.redshift.amazonaws.com:5439/dev', + icon: redshiftIcon, showConnectionField: (field, values) => ['databaseUrl', 'user', 'password', 'isReadOnly', 'useSeparateSchemas'].includes(field), beforeConnectionSave: connection => {