From f8f9746ce274f320d8ca1d4c4ee907a249262953 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 8 Dec 2022 13:09:28 +0200
Subject: [PATCH] UI: Add UI MQTT transport configuration sparkPlug settings

---
 ...rofile-transport-configuration.component.html | 13 ++++++++++---
 ...-profile-transport-configuration.component.ts | 16 ++++++++++++++--
 .../src/assets/locale/locale.constant-en_US.json |  2 ++
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
index 00ecd46582..3e8038f77d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
@@ -16,7 +16,14 @@
 
 -->
 <form [formGroup]="mqttDeviceProfileTransportConfigurationFormGroup" style="padding-bottom: 16px;">
-  <fieldset class="fields-group">
+  <div style="padding-top: 8px;">
+    <mat-checkbox formControlName="sparkPlug">
+      {{ 'device-profile.mqtt-device-topic-filters-spark-plug' | translate }}
+    </mat-checkbox>
+    <div  *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').value"
+          class="tb-hint" innerHTML="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-hint' | translate }}"></div>
+  </div>
+  <fieldset class="fields-group" *ngIf="!mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').value">
     <legend class="group-title" translate>device-profile.mqtt-device-topic-filters</legend>
     <div fxLayoutGap="8px" fxLayout="column">
       <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
@@ -59,7 +66,7 @@
       <div class="tb-hint" innerHTML="{{ 'device-profile.multi-level-wildcards-hint' | translate }}"></div>
     </div>
   </fieldset>
-  <section formGroupName="transportPayloadTypeConfiguration">
+  <section formGroupName="transportPayloadTypeConfiguration" *ngIf="!mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').value">
     <fieldset class="fields-group">
       <legend class="group-title" translate>device-profile.mqtt-device-payload-type</legend>
       <div fxLayoutGap="8px" fxLayout="column">
@@ -134,7 +141,7 @@
       </div>
     </fieldset>
   </section>
-  <div style="padding-bottom: 20px">
+  <div style="padding-bottom: 20px" *ngIf="!mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').value">
     <mat-checkbox formControlName="sendAckOnValidationException">
       {{ 'device-profile.mqtt-send-ack-on-validation-exception' | translate }}
     </mat-checkbox>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts
index b51b42f1d2..4b3db82c7d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts
@@ -92,6 +92,7 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
     this.mqttDeviceProfileTransportConfigurationFormGroup = this.fb.group({
         deviceAttributesTopic: [null, [Validators.required, this.validationMQTTTopic()]],
         deviceTelemetryTopic: [null, [Validators.required, this.validationMQTTTopic()]],
+        sparkPlug: [false],
         sendAckOnValidationException: [false, Validators.required],
         transportPayloadTypeConfiguration: this.fb.group({
           transportPayloadType: [TransportPayloadType.JSON, Validators.required],
@@ -102,7 +103,7 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
           enableCompatibilityWithJsonPayloadFormat: [false, Validators.required],
           useJsonPayloadFormatForDefaultDownlinkTopics: [false, Validators.required]
         })
-      }, {validator: this.uniqueDeviceTopicValidator}
+      }, {validators: this.uniqueDeviceTopicValidator}
     );
     this.mqttDeviceProfileTransportConfigurationFormGroup.get('transportPayloadTypeConfiguration.transportPayloadType').valueChanges.pipe(
       takeUntil(this.destroy$)
@@ -117,6 +118,16 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
           .patchValue(false, {emitEvent: false});
       }
     });
+    this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe((value) => {
+      if (value) {
+        this.mqttDeviceProfileTransportConfigurationFormGroup.disable({emitEvent: false});
+        this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').enable({emitEvent: false});
+      } else {
+        this.mqttDeviceProfileTransportConfigurationFormGroup.enable({emitEvent: false});
+      }
+    });
     this.mqttDeviceProfileTransportConfigurationFormGroup.valueChanges.pipe(
       takeUntil(this.destroy$)
     ).subscribe(() => {
@@ -135,6 +146,7 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
       this.mqttDeviceProfileTransportConfigurationFormGroup.disable({emitEvent: false});
     } else {
       this.mqttDeviceProfileTransportConfigurationFormGroup.enable({emitEvent: false});
+      this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').updateValueAndValidity({onlySelf: true});
     }
   }
 
@@ -157,7 +169,7 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
   private updateModel() {
     let configuration: DeviceProfileTransportConfiguration = null;
     if (this.mqttDeviceProfileTransportConfigurationFormGroup.valid) {
-      configuration = this.mqttDeviceProfileTransportConfigurationFormGroup.value;
+      configuration = this.mqttDeviceProfileTransportConfigurationFormGroup.getRawValue();
       configuration.type = DeviceTransportType.MQTT;
     }
     this.propagateChange(configuration);
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 3df8a15e52..b8c96df26c 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1352,6 +1352,8 @@
         "create-new-device-profile": "Create a new one!",
         "mqtt-device-topic-filters": "MQTT device topic filters",
         "mqtt-device-topic-filters-unique": "MQTT device topic filters need to be unique.",
+        "mqtt-device-topic-filters-spark-plug": "MQTT device topic filters SparkPlug.",
+        "mqtt-device-topic-filters-spark-plug-hint": "Default - telemetry. Example: namespace/group_id/message_type/edge_node_id/[device_id].",
         "mqtt-device-payload-type": "MQTT device payload",
         "mqtt-device-payload-type-json": "JSON",
         "mqtt-device-payload-type-proto": "Protobuf",