From 4cca1b6e57dd153cea609c4ebf1ba5effb8c1eed Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 23 Dec 2022 17:14:34 +0200
Subject: [PATCH] UI: Hide MQTT transport configuration fields in sparkPlug
 enabled

---
 ...file-transport-configuration.component.html | 18 +++++++++---------
 ...rofile-transport-configuration.component.ts | 11 ++++++-----
 2 files changed, 15 insertions(+), 14 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 cf91c8b2c5..d99ddfa554 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
@@ -15,15 +15,15 @@
     limitations under the License.
 
 -->
-<form [formGroup]="mqttDeviceProfileTransportConfigurationFormGroup" style="padding-bottom: 16px;">
-  <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">
+<form [formGroup]="mqttDeviceProfileTransportConfigurationFormGroup" 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>
+</form>
+<form [formGroup]="mqttDeviceProfileTransportConfigurationFormGroup" style="padding-bottom: 16px;" *ngIf="!mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').value">
+  <fieldset class="fields-group">
     <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">
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 4b517a081d..4a81284d5c 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
@@ -122,11 +122,10 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
       takeUntil(this.destroy$)
     ).subscribe((value) => {
       if (value) {
-        this.mqttDeviceProfileTransportConfigurationFormGroup.get('deviceAttributesTopic').disable({emitEvent: false});
-        this.mqttDeviceProfileTransportConfigurationFormGroup.get('deviceTelemetryTopic').disable({emitEvent: false});
+        this.mqttDeviceProfileTransportConfigurationFormGroup.disable({emitEvent: false});
+        this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').enable({emitEvent: false});
       } else {
-        this.mqttDeviceProfileTransportConfigurationFormGroup.get('deviceAttributesTopic').enable({emitEvent: false});
-        this.mqttDeviceProfileTransportConfigurationFormGroup.get('deviceTelemetryTopic').enable({emitEvent: false});
+        this.mqttDeviceProfileTransportConfigurationFormGroup.enable({emitEvent: false});
       }
     });
     this.mqttDeviceProfileTransportConfigurationFormGroup.valueChanges.pipe(
@@ -163,8 +162,10 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
   writeValue(value: MqttDeviceProfileTransportConfiguration | null): void {
     if (isDefinedAndNotNull(value)) {
       this.mqttDeviceProfileTransportConfigurationFormGroup.patchValue(value, {emitEvent: false});
-      this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').updateValueAndValidity({onlySelf: true});
       this.updateTransportPayloadBasedControls(value.transportPayloadTypeConfiguration?.transportPayloadType);
+      if (!this.disabled) {
+        this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkPlug').updateValueAndValidity({onlySelf: true});
+      }
     }
   }