From bb5ac4954209591039a8e5306b3878c48b806fc5 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 10 Jun 2021 11:53:10 +0300
Subject: [PATCH] UI: Device wizard - move transport type selector to step
 Transport configuration

---
 .../device-wizard-dialog.component.html       | 34 ++++++++-----------
 .../wizard/device-wizard-dialog.component.ts  | 18 +++-------
 2 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
index 39be34b823..54cf110d5b 100644
--- a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
@@ -48,20 +48,6 @@
               <mat-label translate>device.label</mat-label>
               <input matInput formControlName="label">
             </mat-form-field>
-            <mat-form-field class="mat-block" style="padding-bottom: 14px;">
-              <mat-label translate>device-profile.transport-type</mat-label>
-              <mat-select formControlName="transportType" required>
-                <mat-option *ngFor="let type of deviceTransportTypes" [value]="type">
-                  {{deviceTransportTypeTranslations.get(type) | translate}}
-                </mat-option>
-              </mat-select>
-              <mat-hint *ngIf="deviceWizardFormGroup.get('transportType').value">
-                {{deviceTransportTypeHints.get(deviceWizardFormGroup.get('transportType').value) | translate}}
-              </mat-hint>
-              <mat-error *ngIf="deviceWizardFormGroup.get('transportType').hasError('required')">
-                {{ 'device-profile.transport-type-required' | translate }}
-              </mat-error>
-            </mat-form-field>
             <div fxLayout="row" fxLayoutGap="16px">
               <mat-radio-group fxLayout="column" formControlName="addProfileType" fxLayoutAlign="space-around">
                 <mat-radio-button [value]="0" color="primary">
@@ -74,13 +60,10 @@
               <div fxLayout="column">
                 <tb-device-profile-autocomplete
                   [required]="!createProfile"
-                  [transportType]="deviceWizardFormGroup.get('transportType').value"
                   formControlName="deviceProfileId"
                   [ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 0}"
-                  (deviceProfileChanged)="$event?.transportType ? deviceWizardFormGroup.get('transportType').patchValue($event?.transportType) : {}"
                   [addNewProfile]="false"
                   [selectDefaultProfile]="true"
-                  [selectFirstProfile]="true"
                   [editProfileEnabled]="false">
                 </tb-device-profile-autocomplete>
                 <mat-form-field fxFlex class="mat-block"
@@ -124,9 +107,22 @@
           </fieldset>
         </form>
       </mat-step>
-      <mat-step [stepControl]="transportConfigFormGroup" *ngIf="createTransportConfiguration">
+      <mat-step [stepControl]="transportConfigFormGroup" [optional]="true" *ngIf="createProfile">
         <form [formGroup]="transportConfigFormGroup" style="padding-bottom: 16px;">
-          <ng-template matStepLabel>{{ 'device-profile.transport-configuration' | translate }}</ng-template>
+          <ng-template matStepLabel>{{ 'device-profile.transport-configuration' | translate }}</ng-template><mat-form-field class="mat-block" style="padding-bottom: 14px;">
+          <mat-label translate>device-profile.transport-type</mat-label>
+          <mat-select formControlName="transportType" required>
+            <mat-option *ngFor="let type of deviceTransportTypes" [value]="type">
+              {{deviceTransportTypeTranslations.get(type) | translate}}
+            </mat-option>
+          </mat-select>
+          <mat-hint *ngIf="transportConfigFormGroup.get('transportType').value">
+            {{deviceTransportTypeHints.get(transportConfigFormGroup.get('transportType').value) | translate}}
+          </mat-hint>
+          <mat-error *ngIf="transportConfigFormGroup.get('transportType').hasError('required')">
+            {{ 'device-profile.transport-type-required' | translate }}
+          </mat-error>
+        </mat-form-field>
           <tb-device-profile-transport-configuration
             formControlName="transportConfiguration"
             required>
diff --git a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.ts b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.ts
index 4e2b5b2ff8..b9c38d24dd 100644
--- a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.ts
@@ -29,7 +29,6 @@ import {
   DeviceProvisionConfiguration,
   DeviceProvisionType,
   DeviceTransportType,
-  deviceTransportTypeConfigurationInfoMap,
   deviceTransportTypeHintMap,
   deviceTransportTypeTranslationMap
 } from '@shared/models/device.models';
@@ -66,7 +65,6 @@ export class DeviceWizardDialogComponent extends
   showNext = true;
 
   createProfile = false;
-  createTransportConfiguration = false;
 
   entityType = EntityType;
 
@@ -88,7 +86,7 @@ export class DeviceWizardDialogComponent extends
 
   customerFormGroup: FormGroup;
 
-  labelPosition = 'end';
+  labelPosition: MatHorizontalStepper['labelPosition'] = 'end';
 
   serviceType = ServiceType.TB_RULE_ENGINE;
 
@@ -109,7 +107,6 @@ export class DeviceWizardDialogComponent extends
         label: [''],
         gateway: [false],
         overwriteActivityTime: [false],
-        transportType: [DeviceTransportType.DEFAULT, Validators.required],
         addProfileType: [0],
         deviceProfileId: [null, Validators.required],
         newDeviceProfileTitle: [{value: null, disabled: true}],
@@ -130,7 +127,6 @@ export class DeviceWizardDialogComponent extends
           this.deviceWizardFormGroup.get('defaultQueueName').disable();
           this.deviceWizardFormGroup.updateValueAndValidity();
           this.createProfile = false;
-          this.createTransportConfiguration = false;
         } else {
           this.deviceWizardFormGroup.get('deviceProfileId').setValidators(null);
           this.deviceWizardFormGroup.get('deviceProfileId').disable();
@@ -141,18 +137,18 @@ export class DeviceWizardDialogComponent extends
 
           this.deviceWizardFormGroup.updateValueAndValidity();
           this.createProfile = true;
-          this.createTransportConfiguration = this.deviceWizardFormGroup.get('transportType').value &&
-            deviceTransportTypeConfigurationInfoMap.get(this.deviceWizardFormGroup.get('transportType').value).hasProfileConfiguration;
         }
       }
     ));
 
     this.transportConfigFormGroup = this.fb.group(
       {
+        transportType: [DeviceTransportType.DEFAULT, Validators.required],
         transportConfiguration: [createDeviceProfileTransportConfiguration(DeviceTransportType.DEFAULT), Validators.required]
       }
     );
-    this.subscriptions.push(this.deviceWizardFormGroup.get('transportType').valueChanges.subscribe((transportType) => {
+
+    this.subscriptions.push(this.transportConfigFormGroup.get('transportType').valueChanges.subscribe((transportType) => {
       this.deviceProfileTransportTypeChanged(transportType);
     }));
 
@@ -229,8 +225,6 @@ export class DeviceWizardDialogComponent extends
     if (index > 0) {
       if (!this.createProfile) {
         index += 3;
-      } else if (!this.createTransportConfiguration) {
-        index += 1;
       }
     }
     switch (index) {
@@ -256,8 +250,6 @@ export class DeviceWizardDialogComponent extends
   private deviceProfileTransportTypeChanged(deviceTransportType: DeviceTransportType): void {
     this.transportConfigFormGroup.patchValue(
       {transportConfiguration: createDeviceProfileTransportConfiguration(deviceTransportType)});
-    this.createTransportConfiguration = this.createProfile && deviceTransportType &&
-      deviceTransportTypeConfigurationInfoMap.get(deviceTransportType).hasProfileConfiguration;
   }
 
   add(): void {
@@ -281,7 +273,7 @@ export class DeviceWizardDialogComponent extends
       const deviceProfile: DeviceProfile = {
         name: this.deviceWizardFormGroup.get('newDeviceProfileTitle').value,
         type: DeviceProfileType.DEFAULT,
-        transportType: this.deviceWizardFormGroup.get('transportType').value,
+        transportType: this.transportConfigFormGroup.get('transportType').value,
         provisionType: deviceProvisionConfiguration.type,
         provisionDeviceKey,
         profileData: {