feat(jdbc): add dedicated connection entry

apps/desktop/src/App.vue

@@ -135,6 +135,7 @@ const settingsInitialSection = ref<string | undefined>(undefined);
 const showQueryEditorDdlDialog = ref(false);
 const driverStoreTabOpen = ref(false);
 const driverStoreActive = ref(false);
+const driverStoreActiveTab = ref<"agent" | "jdbc" | "storage" | "runtime">("agent");
 const settingsReturnSurface = ref<"query" | "driverStore" | "welcome">("welcome");
 const showDriverStore = computed(() => driverStoreTabOpen.value && driverStoreActive.value);
 const showSettingsPage = computed(() => settingsPageTabOpen.value && settingsStore.settingsPageActive);
@@ -316,7 +317,8 @@ function closeSettingsPage() {
   driverStoreActive.value = false;
 }
 
-function openDriverStorePage() {
+function openDriverStorePage(tab?: "agent" | "jdbc" | "storage" | "runtime") {
+  if (tab) driverStoreActiveTab.value = tab;
   driverStoreTabOpen.value = true;
   driverStoreActive.value = true;
   settingsStore.settingsPageActive = false;
@@ -325,6 +327,7 @@ function openDriverStorePage() {
 function closeDriverStorePage() {
   driverStoreTabOpen.value = false;
   driverStoreActive.value = false;
+  driverStoreActiveTab.value = "agent";
 }
 const toolbarAgentDriverUpdateCount = computed(() => (updateNotificationsEnabled.value ? agentDriverUpdateCount.value : 0));
 const toolbarHasUpdateAvailable = computed(() => updateNotificationsEnabled.value && hasUpdateAvailable.value);
@@ -1898,7 +1901,7 @@ onUnmounted(() => {
                 @discard-all-tab-close="handleDiscardAllPendingTabClose"
                 @cancel-tab-close="cancelPendingAppClose"
               />
-              <DriverStorePage v-if="driverStoreTabOpen" v-show="driverStoreActive" class="flex-1 min-h-0" :update-notifications-enabled="updateNotificationsEnabled" @update-count-change="updateAgentDriverUpdateCount" />
+              <DriverStorePage v-if="driverStoreTabOpen" v-show="driverStoreActive" v-model:active-tab="driverStoreActiveTab" class="flex-1 min-h-0" :update-notifications-enabled="updateNotificationsEnabled" @update-count-change="updateAgentDriverUpdateCount" />
               <EditorSettingsPage
                 v-if="settingsPageTabOpen"
                 v-show="settingsStore.settingsPageActive"
@@ -2104,7 +2107,7 @@ onUnmounted(() => {
           "
           @open-driver-store="
             setConnectionDialogOpen(false);
-            openDriverStorePage();
+            openDriverStorePage($event);
           "
           @open-tunnel-profile-settings="
             setConnectionDialogOpen(false);

apps/desktop/src/components/config/DriverStoreDialog.vue

@@ -28,17 +28,23 @@ const isWeb = !isTauriRuntime();
 const props = withDefaults(
   defineProps<{
     updateNotificationsEnabled?: boolean;
+    activeTab?: "agent" | "jdbc" | "storage" | "runtime";
   }>(),
   {
     updateNotificationsEnabled: true,
+    activeTab: "agent",
   },
 );
 
 const emit = defineEmits<{
   "update-count-change": [count: number];
+  "update:activeTab": [tab: "agent" | "jdbc" | "storage" | "runtime"];
 }>();
 
-const driverStoreTab = ref("agent");
+const driverStoreTab = computed({
+  get: () => props.activeTab,
+  set: (tab: "agent" | "jdbc" | "storage" | "runtime") => emit("update:activeTab", tab),
+});
 
 // ──────────── Driver store path ────────────
 

apps/desktop/src/components/connection/ConnectionDialog.vue

@@ -117,7 +117,7 @@ const emit = defineEmits<{
   connectStarted: [name: string];
   connectSucceeded: [name: string];
   connectFailed: [message: string];
-  openDriverStore: [];
+  openDriverStore: [tab?: "jdbc"];
   openTunnelProfileSettings: [];
 }>();
 
@@ -1820,7 +1820,6 @@ const dbOptions: DbOption[] = [
   { value: "nacos", label: "Nacos" },
   { value: "influxdb", label: "InfluxDB" },
   { value: "iris", label: "IRIS" },
-  { value: "jdbc", label: "JDBC" },
   { value: "manticoresearch", label: "Manticore Search" },
   { value: "custom_mysql", label: "Custom (MySQL)" },
   { value: "custom_postgres", label: "Custom (PostgreSQL)" },
@@ -3833,7 +3832,7 @@ function openExternalUrl(url: string) {
 
       <template v-if="dialogStep === 'select'">
         <div class="space-y-4">
-          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end">
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <div class="flex items-center gap-2">
               <div class="flex shrink-0 rounded-lg border bg-muted/40 p-0.5">
                 <Button type="button" size="icon-sm" :variant="dbPickerView === 'icon' ? 'secondary' : 'ghost'" :title="t('connection.iconView')" :aria-label="t('connection.iconView')" @click="dbPickerView = 'icon'">
@@ -3848,6 +3847,10 @@ function openExternalUrl(url: string) {
                 <Input v-model="dbSearchQuery" class="h-9 pl-8" :placeholder="t('connection.searchDatabasePlaceholder')" />
               </div>
             </div>
+            <Button data-jdbc-connection-entry type="button" variant="outline" class="h-9 shrink-0 gap-2" @click="goToConnectionStep('jdbc')">
+              <DatabaseIcon db-type="jdbc" class="h-4 w-4" />
+              {{ t("connection.jdbcConnection") }}
+            </Button>
           </div>
 
           <div class="max-h-[58vh] space-y-5 overflow-y-auto pr-2">
@@ -4132,7 +4135,7 @@ function openExternalUrl(url: string) {
                         {{ t("connection.jdbcPluginHint") }}
                       </p>
                       <div class="flex flex-wrap gap-2">
-                        <Button type="button" variant="outline" size="sm" @click="emit('openDriverStore')">
+                        <Button type="button" variant="outline" size="sm" @click="emit('openDriverStore', 'jdbc')">
                           <FolderOpen class="h-3.5 w-3.5" />
                           {{ t("toolbar.driverManager") }}
                         </Button>
@@ -5057,7 +5060,7 @@ function openExternalUrl(url: string) {
                           {{ t("connection.jdbcPluginHint") }}
                         </p>
                         <div class="flex flex-wrap gap-2">
-                          <Button type="button" variant="outline" size="sm" @click="emit('openDriverStore')">
+                          <Button type="button" variant="outline" size="sm" @click="emit('openDriverStore', 'jdbc')">
                             <FolderOpen class="h-3.5 w-3.5" />
                             {{ t("toolbar.driverManager") }}
                           </Button>

apps/desktop/src/components/layout/AppDialogs.vue

@@ -49,7 +49,7 @@ const emit = defineEmits<{
   connectStarted: [name: string];
   connectSucceeded: [name: string];
   connectFailed: [message: string];
-  openDriverStore: [];
+  openDriverStore: [tab?: "jdbc"];
   openTunnelProfileSettings: [];
   openLineageTarget: [
     target: {
@@ -136,7 +136,7 @@ watch(
     @connect-started="emit('connectStarted', $event)"
     @connect-succeeded="emit('connectSucceeded', $event)"
     @connect-failed="emit('connectFailed', $event)"
-    @open-driver-store="emit('openDriverStore')"
+    @open-driver-store="emit('openDriverStore', $event)"
     @open-tunnel-profile-settings="emit('openTunnelProfileSettings')"
   />
   <DangerConfirmDialog

apps/desktop/src/i18n/locales/en.ts

@@ -322,6 +322,7 @@ export default {
     kafkaKerberosPathHint: "The keytab and krb5.conf paths are read by DBX Agent and must exist on the machine running DBX Agent; files are not uploaded from this browser.",
     kafkaKerberosAuthHint: "Uses GSSAPI + keytab login. If the server requires encrypted transport, set Security to SASL_SSL; otherwise Auto or SASL_PLAINTEXT can be used.",
     searchDatabasePlaceholder: "Search database types",
+    jdbcConnection: "JDBC connection",
     iconView: "Icon view",
     listView: "List view",
     selectedDatabase: "Selected",

apps/desktop/src/i18n/locales/es.ts

@@ -302,6 +302,7 @@ export default withEnglishFallback({
     nacosTlsSkipVerify: "Omitir verificación de certificado",
     nacosPageSize: "Tamaño de página",
     searchDatabasePlaceholder: "Buscar tipos de bases de datos",
+    jdbcConnection: "Conexión JDBC",
     iconView: "Vista de íconos",
     listView: "Vista de lista",
     selectedDatabase: "Seleccionada",

apps/desktop/src/i18n/locales/it.ts

@@ -301,6 +301,7 @@ export default withEnglishFallback({
     nacosTlsSkipVerify: "Salta verifica certificato",
     nacosPageSize: "Dimensione pagina",
     searchDatabasePlaceholder: "Cerca tipi di database",
+    jdbcConnection: "Connessione JDBC",
     iconView: "Vista icone",
     listView: "Vista elenco",
     selectedDatabase: "Selezionato",

apps/desktop/src/i18n/locales/ja.ts

@@ -295,6 +295,7 @@ export default withEnglishFallback({
     nacosTlsSkipVerify: "証明書検証をスキップ",
     nacosPageSize: "ページサイズ",
     searchDatabasePlaceholder: "データベースタイプを検索",
+    jdbcConnection: "JDBC 接続",
     iconView: "アイコン表示",
     listView: "リスト表示",
     selectedDatabase: "選択中",

apps/desktop/src/i18n/locales/pt-BR.ts

@@ -302,6 +302,7 @@ export default withEnglishFallback({
     nacosTlsSkipVerify: "Ignorar verificação do certificado",
     nacosPageSize: "Tamanho da página",
     searchDatabasePlaceholder: "Pesquisar tipos de banco de dados",
+    jdbcConnection: "Conexão JDBC",
     iconView: "Visualização em ícones",
     listView: "Visualização em lista",
     selectedDatabase: "Selecionado",

apps/desktop/src/i18n/locales/zh-CN.ts

@@ -324,6 +324,7 @@ export default withEnglishFallback({
     kafkaKerberosPathHint: "keytab 和 krb5.conf 路径由 DBX Agent 读取，必须存在于运行 DBX Agent 的机器上；不会从当前浏览器上传文件。",
     kafkaKerberosAuthHint: "使用 GSSAPI + keytab 登录。若服务端要求加密传输，请将 Security 设为 SASL_SSL；否则可使用 Auto 或 SASL_PLAINTEXT。",
     searchDatabasePlaceholder: "搜索数据库类型",
+    jdbcConnection: "JDBC 连接",
     iconView: "图标视图",
     listView: "列表视图",
     selectedDatabase: "已选择",

apps/desktop/src/i18n/locales/zh-TW.ts

@@ -302,6 +302,7 @@ export default withEnglishFallback({
     nacosTlsSkipVerify: "跳過憑證驗證",
     nacosPageSize: "分頁大小",
     searchDatabasePlaceholder: "搜尋資料庫類型",
+    jdbcConnection: "JDBC 連線",
     iconView: "圖示檢視",
     listView: "清單檢視",
     selectedDatabase: "已選擇",

packages/app-tests/jdbcConnectionEntry.test.ts

@@ -0,0 +1,46 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { test } from "vitest";
+
+function source(relativePath: string): string {
+  return readFileSync(path.resolve(relativePath), "utf8");
+}
+
+test("keeps JDBC outside the database picker and exposes a dedicated entry", () => {
+  const content = source("apps/desktop/src/components/connection/ConnectionDialog.vue");
+  const optionsStart = content.indexOf("const dbOptions: DbOption[] = [");
+  const optionsEnd = content.indexOf("const dbCategories", optionsStart);
+  const pickerToolbar = content.indexOf("sm:justify-between");
+  const searchInput = content.indexOf('v-model="dbSearchQuery"', pickerToolbar);
+  const jdbcEntry = content.indexOf("data-jdbc-connection-entry", pickerToolbar);
+
+  assert.notEqual(optionsStart, -1);
+  assert.notEqual(optionsEnd, -1);
+  assert.equal(content.slice(optionsStart, optionsEnd).includes('{ value: "jdbc"'), false);
+  assert.ok(pickerToolbar < searchInput && searchInput < jdbcEntry);
+  assert.match(content.slice(jdbcEntry, jdbcEntry + 400), /goToConnectionStep\('jdbc'\)/);
+});
+
+test("opens driver management on the JDBC tab from JDBC connection settings", () => {
+  const connectionDialog = source("apps/desktop/src/components/connection/ConnectionDialog.vue");
+  const appDialogs = source("apps/desktop/src/components/layout/AppDialogs.vue");
+  const app = source("apps/desktop/src/App.vue");
+  const driverStore = source("apps/desktop/src/components/config/DriverStoreDialog.vue");
+
+  assert.equal(connectionDialog.match(/emit\('openDriverStore', 'jdbc'\)/g)?.length, 2);
+  assert.match(appDialogs, /@open-driver-store="emit\('openDriverStore', \$event\)"/);
+  assert.match(app, /openDriverStorePage\(\$event\)/);
+  assert.match(app, /v-model:active-tab="driverStoreActiveTab"/);
+  assert.match(driverStore, /"update:activeTab": \[tab: "agent" \| "jdbc" \| "storage" \| "runtime"\]/);
+});
+
+test("resets the driver management tab after the page is closed", () => {
+  const app = source("apps/desktop/src/App.vue");
+  const closeStart = app.indexOf("function closeDriverStorePage() {");
+  const closeEnd = app.indexOf("\n}", closeStart);
+
+  assert.notEqual(closeStart, -1);
+  assert.notEqual(closeEnd, -1);
+  assert.match(app.slice(closeStart, closeEnd), /driverStoreActiveTab\.value = "agent"/);
+});