From a445364ce370d7336c01777b8979b7a7ac748d3b Mon Sep 17 00:00:00 2001
From: deaflynx <artemio.babak@gmail.com>
Date: Wed, 7 May 2025 13:23:47 +0300
Subject: [PATCH] UI: mqtt node add protocol version.

---
 .../external/mqtt-config.component.html          | 10 ++++++++++
 .../rule-node/external/mqtt-config.component.ts  |  5 +++++
 ui-ngx/src/app/shared/models/device.models.ts    | 16 +++++++++++++++-
 .../src/assets/locale/locale.constant-en_US.json |  1 +
 4 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/mqtt-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/mqtt-config.component.html
index 090fea41f3..1fb41b4548 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/mqtt-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/mqtt-config.component.html
@@ -72,6 +72,16 @@
     {{ 'rule-node-config.parse-to-plain-text' | translate }}
   </mat-checkbox>
   <div class="tb-hint">{{ "rule-node-config.parse-to-plain-text-hint" | translate }}</div>
+  <mat-form-field class="flex flex-1" subscriptSizing="dynamic">
+    <mat-label translate>device-profile.mqtt-protocol-version</mat-label>
+    <mat-select formControlName="protocolVersion">
+      @for (version of mqttVersions; track version) {
+        <mat-option [value]="version">
+          {{ mqttVersionTranslation.get(version) }}
+        </mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
   <mat-checkbox formControlName="cleanSession">
     {{ 'rule-node-config.clean-session' | translate }}
   </mat-checkbox>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/mqtt-config.component.ts b/ui-ngx/src/app/modules/home/components/rule-node/external/mqtt-config.component.ts
index 00a95e5ce6..3efeb3d61e 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/mqtt-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/mqtt-config.component.ts
@@ -18,6 +18,7 @@ import { Component } from '@angular/core';
 import { isNotEmptyStr } from '@core/public-api';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { RuleNodeConfiguration, RuleNodeConfigurationComponent } from '@shared/models/rule-node.models';
+import { MqttVersions, MqttVersionTranslation } from '@shared/models/device.models';
 
 @Component({
   selector: 'tb-external-node-mqtt-config',
@@ -28,6 +29,9 @@ export class MqttConfigComponent extends RuleNodeConfigurationComponent {
 
   mqttConfigForm: UntypedFormGroup;
 
+  mqttVersions = MqttVersions;
+  mqttVersionTranslation = MqttVersionTranslation;
+
   constructor(private fb: UntypedFormBuilder) {
     super();
   }
@@ -52,6 +56,7 @@ export class MqttConfigComponent extends RuleNodeConfigurationComponent {
       cleanSession: [configuration ? configuration.cleanSession : false, []],
       retainedMessage: [configuration ? configuration.retainedMessage : false, []],
       ssl: [configuration ? configuration.ssl : false, []],
+      protocolVersion: [configuration ? configuration.protocolVersion : null, []],
       credentials: [configuration ? configuration.credentials : null, []]
     });
   }
diff --git a/ui-ngx/src/app/shared/models/device.models.ts b/ui-ngx/src/app/shared/models/device.models.ts
index 8298d3a1fe..d0bbdd9b0f 100644
--- a/ui-ngx/src/app/shared/models/device.models.ts
+++ b/ui-ngx/src/app/shared/models/device.models.ts
@@ -36,7 +36,7 @@ import {
   PowerMode
 } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models';
 import { PageLink } from '@shared/models/page/page-link';
-import { isDefinedAndNotNull, isNotEmptyStr } from '@core/utils';
+import { isDefinedAndNotNull, isNotEmptyStr, isNumber } from '@core/utils';
 import { EdgeId } from '@shared/models/id/edge-id';
 
 export enum DeviceProfileType {
@@ -902,3 +902,17 @@ export const getAlarmScheduleRangeText = (startsOn: Date | number, endsOn: Date
   return `<span><span class="nowrap">12:00 AM</span> – <span class="nowrap">${end.format('hh:mm A')}</span>` +
     ` and <span class="nowrap">${start.format('hh:mm A')}</span> – <span class="nowrap">12:00 PM</span></span>`;
 };
+
+export enum MqttVersion {
+  MQTT_3_1 = 3,
+  MQTT_3_1_1 = 4,
+  MQTT_5 = 5
+}
+
+export const MqttVersions = Object.values(MqttVersion).filter(v => isNumber(v)) as MqttVersion[];
+
+export const MqttVersionTranslation = new Map<MqttVersion, string>([
+  [MqttVersion.MQTT_3_1, 'MQTT 3.1'],
+  [MqttVersion.MQTT_3_1_1, 'MQTT 3.1.1'],
+  [MqttVersion.MQTT_5, 'MQTT 5.0']
+]);
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 72afcfc0b9..21f430c1ba 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1914,6 +1914,7 @@
         "mqtt-use-json-format-for-default-downlink-topics-hint": "When enabled, the platform will use Json payload format to push attributes and RPC via the following topics: <b>v1/devices/me/attributes/response/$request_id</b>, <b>v1/devices/me/attributes</b>, <b>v1/devices/me/rpc/request/$request_id</b>, <b>v1/devices/me/rpc/response/$request_id</b>. This setting does not impact attribute and rpc subscriptions sent using new (v2) topics: <b>v2/a/res/$request_id</b>, <b>v2/a</b>, <b>v2/r/req/$request_id</b>, <b>v2/r/res/$request_id</b>. Where <b>$request_id</b> is an integer request identifier.",
         "mqtt-send-ack-on-validation-exception": "Send PUBACK on PUBLISH message validation failure",
         "mqtt-send-ack-on-validation-exception-hint": "By default, the platform will close the MQTT session on message validation failure. When enabled, the platform will send publish acknowledgment instead of closing the session.",
+        "mqtt-protocol-version": "Protocol version",
         "snmp-add-mapping": "Add SNMP mapping",
         "snmp-mapping-not-configured": "No mapping for OID to time series/telemetry configured",
         "snmp-timseries-or-attribute-name": "Time series/attribute name for mapping",