fix(mysql): support cleartext password auth option (#2499)

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

@@ -31,6 +31,7 @@ import { firstZooKeeperEndpoint, normalizeZooKeeperConnectString } from "@/lib/z
 import { isLocalFileTypeDb } from "@/lib/connectionFile";
 import { MQ_PINNED_VERSION_OPTIONS, pinnedVersionToSelection, selectionToPinnedVersion } from "@/lib/mqPinnedVersionOptions";
 import { mongodbAuthFailureHint, mongoUrlParam, setMongoUrlParam } from "@/lib/mongoConnectionOptions";
+import { mysqlCleartextPasswordAuthEnabled, setMysqlCleartextPasswordAuthEnabled } from "@/lib/mysqlConnectionOptions";
 import { copyToClipboard } from "@/lib/clipboard";
 import { agentDriverInstallKey, appendAgentDriverUpdateHint, hasAgentDriverUpdate, showAgentDriverInstallHint, type AgentDriverInstallState } from "@/lib/agentDriverInstallHint";
 import { prestoSqlBuiltinDriverPaths } from "@/lib/prestoSqlBuiltinDriver";
@@ -1593,6 +1594,13 @@ const supportsCaCertificatePath = computed(() => form.value.db_type === "clickho
 const supportsGenericUrlParams = computed(() => form.value.db_type !== "manticoresearch");
 const bareMysqlProfiles = new Set(["doris", "selectdb", "oceanbase"]);
 const supportsMysqlTlsOptions = computed(() => form.value.db_type === "starrocks" || (form.value.db_type === "mysql" && !bareMysqlProfiles.has(selectedType.value)));
+const supportsMysqlCleartextPasswordAuth = computed(() => form.value.db_type === "mysql" && !bareMysqlProfiles.has(selectedType.value));
+const mysqlCleartextPasswordAuth = computed({
+  get: () => mysqlCleartextPasswordAuthEnabled(form.value.url_params),
+  set: (value: boolean) => {
+    form.value.url_params = setMysqlCleartextPasswordAuthEnabled(form.value.url_params, value);
+  },
+});
 const mysqlTlsMode = computed({
   get: () => mysqlTlsModeFromParams(form.value.url_params, form.value.ssl),
   set: (value: string) => {
@@ -4204,7 +4212,7 @@ function openExternalUrl(url: string) {
             </TabsContent>
 
             <TabsContent v-if="supportsTlsToggle" value="tls" class="m-0">
-              <div class="connection-form-body grid gap-4 py-4 pr-2 max-h-[65vh] overflow-y-auto">
+              <div class="connection-form-body grid gap-4 py-4 pr-2 max-h-[65vh] overflow-y-auto overflow-x-hidden">
                 <div v-if="!supportsPostgresTlsOptions && !supportsMysqlTlsOptions" class="grid grid-cols-4 items-center gap-4">
                   <Label :class="connectionLabelSmallClass">SSL/TLS</Label>
                   <label class="col-span-3 flex items-center gap-2 cursor-pointer">
@@ -4284,6 +4292,16 @@ function openExternalUrl(url: string) {
                 </template>
 
                 <template v-if="supportsMysqlTlsOptions">
+                  <div v-if="supportsMysqlCleartextPasswordAuth" class="grid grid-cols-4 items-start gap-4">
+                    <Label :class="[connectionLabelSmallPaddedClass, 'min-w-0 break-words']">{{ t("connection.mysqlCleartextPasswordAuth") }}</Label>
+                    <div class="col-span-3 flex min-w-0 items-start justify-between gap-4">
+                      <p class="min-w-0 text-[11px] leading-4 text-muted-foreground break-words">
+                        {{ t("connection.mysqlCleartextPasswordAuthHint") }}
+                      </p>
+                      <Switch v-model="mysqlCleartextPasswordAuth" class="mt-0.5 shrink-0" />
+                    </div>
+                  </div>
+
                   <div class="grid grid-cols-4 items-center gap-4">
                     <Label :class="connectionLabelSmallClass">{{ t("connection.mysqlTlsMode") }}</Label>
                     <Select v-model="mysqlTlsMode">