From 5d91efd690495402cb943a6c3a0905b973372f62 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Fri, 29 May 2026 17:59:14 +0800
Subject: [PATCH] feat: merge OceanBase picker entries into one with
 MySQL/Oracle mode toggle

Replace two separate "OceanBase" and "OceanBase Oracle Mode" entries in the
database picker with a single "OceanBase" entry. After selecting, users can
switch between MySQL and Oracle modes via button toggles in the config form.
---
 .../connection/ConnectionDialog.vue           | 49 ++++++++++++++++++-
 apps/desktop/src/i18n/locales/en.ts           |  2 +
 apps/desktop/src/i18n/locales/es.ts           |  2 +
 apps/desktop/src/i18n/locales/zh-CN.ts        |  2 +
 4 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/components/connection/ConnectionDialog.vue b/apps/desktop/src/components/connection/ConnectionDialog.vue
index 6d40adab65..3ecb36f1ab 100644
--- a/apps/desktop/src/components/connection/ConnectionDialog.vue
+++ b/apps/desktop/src/components/connection/ConnectionDialog.vue
@@ -119,6 +119,7 @@ const jdbcDrivers = ref<JdbcDriverInfo[]>([]);
 const agentDrivers = ref<AgentDriverInstallState[]>([]);
 const selectedJdbcDriverPath = ref("");
 const connectionUrlInput = ref("");
+const oceanbaseSubMode = ref<"mysql" | "oracle">("mysql");
 const dialogStep = ref<DialogStep>("select");
 const dbPickerView = ref<DbPickerView>("icon");
 const dbSearchQuery = ref("");
@@ -275,8 +276,12 @@ const driverProfiles: Record<
 };
 
 function profileForConfig(config: ConnectionConfig) {
-  if (config.driver_profile && driverProfiles[config.driver_profile]) return config.driver_profile;
+  if (config.driver_profile && driverProfiles[config.driver_profile]) {
+    if (config.driver_profile === "oceanbase-oracle") return "oceanbase";
+    return config.driver_profile;
+  }
   if (config.db_type === "dameng") return "dm";
+  if (config.db_type === "oceanbase-oracle") return "oceanbase";
   return config.db_type;
 }
 
@@ -319,6 +324,17 @@ function applyProfile(val: string, preserveConnectionFields = false) {
   }
 }
 
+function switchOceanbaseMode(mode: "mysql" | "oracle") {
+  oceanbaseSubMode.value = mode;
+  if (mode === "mysql") {
+    applyProfile("oceanbase", false);
+  } else {
+    applyProfile("oceanbase-oracle", false);
+    selectedType.value = "oceanbase";
+  }
+  resetTestState();
+}
+
 watch(
   () => props.editConfig,
   (config) => {
@@ -370,6 +386,9 @@ watch(
         redis_cluster_nodes: config.redis_cluster_nodes || "",
       };
       selectedType.value = profile;
+      if (profile === "oceanbase") {
+        oceanbaseSubMode.value = config.driver_profile === "oceanbase-oracle" ? "oracle" : "mysql";
+      }
       mongoUseUrl.value = !!config.connection_string;
       jdbcDriverPathsInput.value = (config.jdbc_driver_paths || []).join("\n");
       customDriverName.value = isCustomCompatibleProfile() ? config.driver_label || "" : "";
@@ -380,6 +399,7 @@ watch(
       form.value = defaultForm();
       selectedType.value = "mysql";
       customDriverName.value = "";
+      oceanbaseSubMode.value = "mysql";
       dialogStep.value = "select";
       configTab.value = "connection";
     }
@@ -499,7 +519,6 @@ const dbOptions = [
   { value: "gaussdb", label: "GaussDB" },
   { value: "tidb", label: "TiDB" },
   { value: "oceanbase", label: "OceanBase" },
-  { value: "oceanbase-oracle", label: "OceanBase Oracle Mode" },
   { value: "goldendb", label: "GoldenDB" },
   { value: "tdsql", label: "TDSQL" },
   { value: "polardb", label: "PolarDB" },
@@ -982,6 +1001,7 @@ function resetForm() {
   selectedType.value = "mysql";
   customDriverName.value = "";
   mongoUseUrl.value = false;
+  oceanbaseSubMode.value = "mysql";
   jdbcDriverPathsInput.value = "";
   selectedJdbcDriverPath.value = "";
   connectionUrlInput.value = "";
@@ -1041,6 +1061,10 @@ function applyConnectionPrefill(draft: ConnectionDeepLinkDraft) {
     one_time: draft.oneTime || undefined,
   };
   selectedType.value = draft.driverProfile;
+  if (draft.driverProfile === "oceanbase-oracle") {
+    oceanbaseSubMode.value = "oracle";
+    selectedType.value = "oceanbase";
+  }
   customDriverName.value = isCustomCompatibleProfile() ? draft.driverLabel : "";
   mongoUseUrl.value = !!draft.useMongoUrl;
   if (draft.name?.trim()) {
@@ -1501,6 +1525,27 @@ function openExternalUrl(url: string) {
                   </button>
                 </div>
 
+                <!-- OceanBase mode toggle -->
+                <div v-if="selectedType === 'oceanbase'" class="grid grid-cols-4 items-center gap-4">
+                  <Label class="text-right text-xs">{{ t("connection.mode") }}</Label>
+                  <div class="col-span-3 flex gap-2">
+                    <Button
+                      size="sm"
+                      :variant="oceanbaseSubMode === 'mysql' ? 'default' : 'outline'"
+                      @click="switchOceanbaseMode('mysql')"
+                    >
+                      {{ t("connection.oceanbaseMySQLMode") }}
+                    </Button>
+                    <Button
+                      size="sm"
+                      :variant="oceanbaseSubMode === 'oracle' ? 'default' : 'outline'"
+                      @click="switchOceanbaseMode('oracle')"
+                    >
+                      {{ t("connection.oceanbaseOracleMode") }}
+                    </Button>
+                  </div>
+                </div>
+
                 <div v-if="isCustomCompatibleProfile()" class="grid grid-cols-4 items-center gap-4">
                   <Label class="text-right">{{ t("connection.driverName") }}</Label>
                   <Input
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index 8285ff0a5b..9d21550a7c 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -163,6 +163,8 @@ export default {
     redisStandaloneMode: "Standalone",
     redisSentinelMode: "Sentinel",
     redisClusterMode: "Cluster",
+    oceanbaseMySQLMode: "MySQL Mode",
+    oceanbaseOracleMode: "Oracle Mode",
     redisFirstSentinel: "First Sentinel",
     redisFirstClusterNode: "First Seed Node",
     redisSentinelNodes: "Sentinel Nodes",
diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts
index 6441037649..2704a924e1 100644
--- a/apps/desktop/src/i18n/locales/es.ts
+++ b/apps/desktop/src/i18n/locales/es.ts
@@ -155,6 +155,8 @@ export default {
     redisStandaloneMode: "Directa",
     redisSentinelMode: "Sentinel",
     redisClusterMode: "Cluster",
+    oceanbaseMySQLMode: "Modo MySQL",
+    oceanbaseOracleMode: "Modo Oracle",
     redisFirstSentinel: "Primer Sentinel",
     redisFirstClusterNode: "Primer nodo semilla",
     redisSentinelNodes: "Nodos Sentinel",
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index f624f4e064..f2b40f30ea 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -160,6 +160,8 @@ export default {
     redisStandaloneMode: "直连",
     redisSentinelMode: "哨兵",
     redisClusterMode: "集群",
+    oceanbaseMySQLMode: "MySQL 模式",
+    oceanbaseOracleMode: "Oracle 模式",
     redisFirstSentinel: "首个哨兵",
     redisFirstClusterNode: "首个种子节点",
     redisSentinelNodes: "哨兵节点",