UI: Fix trackby queues and add padding

ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.ts

@@ -130,12 +130,8 @@ export class TenantProfileQueuesComponent implements ControlValueAccessor, Valid
     });
   }
 
-  public trackByQueue(index: number, queueControl: AbstractControl): string {
+  public trackByQueue(index: number, queueControl: AbstractControl) {
-    if (queueControl) {
+    return queueControl;
-      return queueControl.value.id;
-    } else {
-      return null;
-    }
   }
 
   public removeQueue(index: number) {

ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.html

@@ -68,35 +68,37 @@
           <div class="tb-hint">{{'tenant.isolated-tb-rule-engine-details' | translate}}</div>
         </mat-checkbox>
       </div>
-      <mat-accordion formGroupName="profileData" multi>
+      <div class="expansion-panel-block">
-        <mat-expansion-panel [expanded]="true" *ngIf="entityForm.get('isolatedTbRuleEngine').value">
+        <mat-accordion formGroupName="profileData" multi>
-          <mat-expansion-panel-header>
+          <mat-expansion-panel [expanded]="true" *ngIf="entityForm.get('isolatedTbRuleEngine').value">
-            <mat-panel-title>
+            <mat-expansion-panel-header>
-              {{'tenant-profile.queues-with-count' | translate:
+              <mat-panel-title>
-                {count: entityForm.get('profileData').get('queueConfiguration').value ?
+                {{'tenant-profile.queues-with-count' | translate:
-                    entityForm.get('profileData').get('queueConfiguration').value.length : 0} }}
+                  {count: entityForm.get('profileData').get('queueConfiguration').value ?
-            </mat-panel-title>
+                      entityForm.get('profileData').get('queueConfiguration').value.length : 0} }}
-          </mat-expansion-panel-header>
+              </mat-panel-title>
-          <ng-template matExpansionPanelContent>
+            </mat-expansion-panel-header>
-            <tb-tenant-profile-queues
+            <ng-template matExpansionPanelContent>
-              formControlName="queueConfiguration"
+              <tb-tenant-profile-queues
-            ></tb-tenant-profile-queues>
+                formControlName="queueConfiguration"
-          </ng-template>
+              ></tb-tenant-profile-queues>
-        </mat-expansion-panel>
+            </ng-template>
-        <mat-expansion-panel [expanded]="true">
+          </mat-expansion-panel>
-          <mat-expansion-panel-header>
+          <mat-expansion-panel [expanded]="true">
-            <mat-panel-title>
+            <mat-expansion-panel-header>
-              <div translate>tenant-profile.profile-configuration</div>
+              <mat-panel-title>
-            </mat-panel-title>
+                <div translate>tenant-profile.profile-configuration</div>
-          </mat-expansion-panel-header>
+              </mat-panel-title>
-          <ng-template matExpansionPanelContent>
+            </mat-expansion-panel-header>
-            <tb-tenant-profile-data
+            <ng-template matExpansionPanelContent>
-              formControlName="configuration"
+              <tb-tenant-profile-data
-              required>
+                formControlName="configuration"
-            </tb-tenant-profile-data>
+                required>
-          </ng-template>
+              </tb-tenant-profile-data>
-        </mat-expansion-panel>
+            </ng-template>
-      </mat-accordion>
+          </mat-expansion-panel>
+        </mat-accordion>
+      </div>
       <mat-form-field class="mat-block">
         <mat-label translate>tenant-profile.description</mat-label>
         <textarea matInput formControlName="description" rows="2"></textarea>

ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.scss

@@ -35,4 +35,7 @@
       width: fit-content;
     }
   }
+  .expansion-panel-block {
+    padding-bottom: 16px;
+  }
 }