UI: Hide MQTT transport configuration fields in sparkPlug enabled

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">

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});
+      }
     }
   }