From 68f67cf45f123db61c16076840b4c066cf598253 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Mon, 10 Aug 2026 12:09:07 +0800
Subject: [PATCH] fix(mqtt): wire TLS switches to connection config

Closes #5722
---
 .../connection/ConnectionDialog.vue           |  4 ++--
 .../connection/mqttConnectionDialog.spec.ts   | 21 +++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 apps/desktop/src/lib/__tests__/connection/mqttConnectionDialog.spec.ts

diff --git a/apps/desktop/src/components/connection/ConnectionDialog.vue b/apps/desktop/src/components/connection/ConnectionDialog.vue
index 071a6a298b..280196e4c6 100644
--- a/apps/desktop/src/components/connection/ConnectionDialog.vue
+++ b/apps/desktop/src/components/connection/ConnectionDialog.vue
@@ -6438,10 +6438,10 @@ function openExternalUrl(url: string) {
                   <div class="grid grid-cols-4 items-center gap-4">
                     <Label :class="connectionLabelClass">{{ t("connection.mqttTls") }}</Label>
                     <div class="col-span-3 flex items-center gap-2">
-                      <Switch :checked="mqttTls" @update:checked="mqttTls = $event" />
+                      <Switch v-model="mqttTls" />
                       <Label class="text-sm" :class="mqttTls ? '' : 'text-muted-foreground'">TLS</Label>
                       <template v-if="mqttTls">
-                        <Switch :checked="mqttTlsSkipVerify" @update:checked="mqttTlsSkipVerify = $event" class="ml-4" />
+                        <Switch v-model="mqttTlsSkipVerify" class="ml-4" />
                         <Label class="text-sm" :class="mqttTlsSkipVerify ? '' : 'text-muted-foreground'">{{ t("connection.mqttTlsSkipVerify") }}</Label>
                       </template>
                     </div>
diff --git a/apps/desktop/src/lib/__tests__/connection/mqttConnectionDialog.spec.ts b/apps/desktop/src/lib/__tests__/connection/mqttConnectionDialog.spec.ts
new file mode 100644
index 0000000000..595bdfba5e
--- /dev/null
+++ b/apps/desktop/src/lib/__tests__/connection/mqttConnectionDialog.spec.ts
@@ -0,0 +1,21 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const dialogSource = readFileSync(new URL("../../../components/connection/ConnectionDialog.vue", import.meta.url), "utf8");
+const mqttSectionStart = dialogSource.indexOf('<template v-else-if="form.db_type === \'mqtt\'">');
+const mqttSectionEnd = dialogSource.indexOf('<template v-else-if="form.db_type === \'victoriametrics\'">', mqttSectionStart);
+const mqttSection = dialogSource.slice(mqttSectionStart, mqttSectionEnd);
+
+describe("MQTT connection dialog", () => {
+  it("binds TLS switches through the shared Switch model API", () => {
+    expect(mqttSection).toContain('<Switch v-model="mqttTls" />');
+    expect(mqttSection).toContain('<Switch v-model="mqttTlsSkipVerify" class="ml-4" />');
+    expect(mqttSection).not.toContain(":checked=");
+    expect(mqttSection).not.toContain("@update:checked=");
+  });
+
+  it("serializes both TLS choices into the MQTT external config", () => {
+    expect(dialogSource).toContain("tls: mqttTls.value");
+    expect(dialogSource).toContain("tlsSkipVerify: mqttTlsSkipVerify.value");
+  });
+});