From b671c7671b0702223bd94f71fc30f42bafeabc42 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Mon, 22 May 2023 12:40:41 +0300
Subject: [PATCH 1/3] UI: Fixed tenant profile form

---
 .../components/entity/add-entity-dialog.component.html    | 2 +-
 .../home/components/profile/tenant-profile.component.scss | 8 +++++++-
 .../home/components/queue/queue-form.component.html       | 4 ++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
index 4abf910c1a..66dbbba2e3 100644
--- a/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form (ngSubmit)="add()" style="min-width: 400px; width: 700px;" [ngStyle]="entitiesTableConfig.addDialogStyle">
+<form (ngSubmit)="add()" style="min-width: 400px; width: 750px;" [ngStyle]="entitiesTableConfig.addDialogStyle">
   <mat-toolbar color="primary">
     <h2 translate>{{ translations.add }}</h2>
     <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.scss b/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.scss
index bd5dfa99ae..d052c97385 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.scss
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.scss
@@ -14,10 +14,16 @@
  * limitations under the License.
  */
 :host ::ng-deep {
-  .mat-mdc-form-field-infix {
+  .mat-mdc-floating-label {
     width: 100% !important;
   }
 
+  .mat-mdc-form-field-error {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .mat-mdc-checkbox{
     &.hinted-checkbox {
       .mdc-checkbox {
diff --git a/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html b/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
index 8f8f509e94..9fee72fef4 100644
--- a/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
+++ b/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
@@ -40,7 +40,7 @@
         <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="16px" formGroupName="submitStrategy">
           <div fxFlex>
             <label class="group-label" translate>queue.submit-strategy</label>
-            <mat-radio-group fxFlex fxLayout="column" fxLayoutGap="15px" formControlName="type" required>
+            <mat-radio-group fxFlex fxLayout="column" formControlName="type" required>
               <mat-radio-button *ngFor="let strategy of submitStrategies" [value]="strategy">
                 {{ queueSubmitStrategyTypesMap.get(queueSubmitStrategyTypes[strategy]).label | translate }}
                 <mat-icon
@@ -78,7 +78,7 @@
         <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="16px" formGroupName="processingStrategy">
           <div fxFlex>
             <label class="group-label" translate>queue.processing-strategy</label>
-              <mat-radio-group fxFlex fxLayout="column" fxLayoutGap="15px" formControlName="type" required>
+              <mat-radio-group fxFlex fxLayout="column" formControlName="type" required>
                 <mat-radio-button *ngFor="let strategy of processingStrategies" [value]="strategy">
                   {{ queueProcessingStrategyTypesMap.get(queueProcessingStrategyTypes[strategy]).label | translate }}
                   <mat-icon

From 027ef90b15399b063f14deea92f161e6f9bbf196 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Tue, 23 May 2023 18:31:02 +0300
Subject: [PATCH 2/3] UI: Refactoring tenant profile

---
 .../profile/tenant-profile.component.scss     |  8 +--
 ...enant-profile-configuration.component.html | 60 ++++++++++++-------
 .../assets/locale/locale.constant-en_US.json  |  4 +-
 3 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.scss b/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.scss
index d052c97385..bd5dfa99ae 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.scss
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant-profile.component.scss
@@ -14,16 +14,10 @@
  * limitations under the License.
  */
 :host ::ng-deep {
-  .mat-mdc-floating-label {
+  .mat-mdc-form-field-infix {
     width: 100% !important;
   }
 
-  .mat-mdc-form-field-error {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
   .mat-mdc-checkbox{
     &.hinted-checkbox {
       .mdc-checkbox {
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
index 0bbb6a5926..4e287a888c 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
@@ -21,7 +21,7 @@
       {{ 'tenant-profile.entities' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
     <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-devices</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxDevices"
@@ -32,8 +32,9 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxDevices').hasError('min')">
           {{ 'tenant-profile.maximum-devices-range' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-dashboards</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxDashboards"
@@ -44,10 +45,11 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxDashboards').hasError('min')">
           {{ 'tenant-profile.maximum-dashboards-range' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
     </div>
     <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-assets</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxAssets"
@@ -58,8 +60,9 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxAssets').hasError('min')">
           {{ 'tenant-profile.maximum-assets-range' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-users</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxUsers"
@@ -70,6 +73,7 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxUsers').hasError('min')">
           {{ 'tenant-profile.maximum-users-range' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
     </div>
     <mat-expansion-panel class="configuration-panel">
@@ -80,7 +84,7 @@
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.maximum-customers</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxCustomers"
@@ -91,8 +95,9 @@
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxCustomers').hasError('min')">
               {{ 'tenant-profile.maximum-customers-range' | translate}}
             </mat-error>
+            <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.maximum-rule-chains</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxRuleChains"
@@ -103,6 +108,7 @@
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxRuleChains').hasError('min')">
               {{ 'tenant-profile.maximum-rule-chains-range' | translate}}
             </mat-error>
+            <mat-hint></mat-hint>
           </mat-form-field>
         </div>
       </ng-template>
@@ -114,7 +120,7 @@
       {{ 'tenant-profile.rule-engine' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
     <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-r-e-executions</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxREExecutions"
@@ -125,8 +131,9 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxREExecutions').hasError('min')">
           {{ 'tenant-profile.max-r-e-executions-range' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-transport-messages</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxTransportMessages"
@@ -137,6 +144,7 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxTransportMessages').hasError('min')">
           {{ 'tenant-profile.max-transport-messages-required' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
     </div>
     <mat-expansion-panel class="configuration-panel">
@@ -147,7 +155,7 @@
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-j-s-executions</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxJSExecutions"
@@ -158,8 +166,9 @@
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxJSExecutions').hasError('min')">
               {{ 'tenant-profile.max-j-s-executions-range' | translate}}
             </mat-error>
+            <mat-hint></mat-hint>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-transport-data-points</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxTransportDataPoints"
@@ -170,10 +179,11 @@
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxTransportDataPoints').hasError('min')">
               {{ 'tenant-profile.max-transport-data-points-range' | translate}}
             </mat-error>
+            <mat-hint></mat-hint>
           </mat-form-field>
         </div>
         <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-          <mat-form-field fxFlex class="mat-block" appearance="fill">
+          <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
             <mat-label translate>tenant-profile.max-rule-node-executions-per-message</mat-label>
             <input matInput required min="0" step="1"
                    formControlName="maxRuleNodeExecutionsPerMessage"
@@ -184,6 +194,7 @@
             <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxRuleNodeExecutionsPerMessage').hasError('min')">
               {{ 'tenant-profile.max-rule-node-executions-per-message-range' | translate}}
             </mat-error>
+            <mat-hint></mat-hint>
           </mat-form-field>
           <div fxFlex></div>
         </div>
@@ -196,7 +207,7 @@
       {{ 'tenant-profile.time-to-live' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
     <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-d-p-storage-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxDPStorageDays"
@@ -207,8 +218,9 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxDPStorageDays').hasError('min')">
           {{ 'tenant-profile.max-d-p-storage-days-range' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.alarms-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="alarmsTtlDays"
@@ -219,10 +231,11 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('alarmsTtlDays').hasError('min')">
           {{ 'tenant-profile.alarms-ttl-days-days-range' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
     </div>
     <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.default-storage-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="defaultStorageTtlDays"
@@ -233,8 +246,9 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('defaultStorageTtlDays').hasError('min')">
           {{ 'tenant-profile.default-storage-ttl-days-range' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.rpc-ttl-days</mat-label>
         <input matInput required min="0" step="1"
                formControlName="rpcTtlDays"
@@ -245,6 +259,7 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('rpcTtlDays').hasError('min')">
           {{ 'tenant-profile.rpc-ttl-days-days-range' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
     </div>
   </fieldset>
@@ -254,7 +269,7 @@
       {{ 'tenant-profile.alarms-and-notifications' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
     <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-emails</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxEmails"
@@ -265,8 +280,9 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxEmails').hasError('min')">
           {{ 'tenant-profile.max-emails-range' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-created-alarms</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxCreatedAlarms"
@@ -277,10 +293,11 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxCreatedAlarms').hasError('min')">
           {{ 'tenant-profile.max-created-alarms-range' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
     </div>
     <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.max-sms</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxSms"
@@ -291,6 +308,7 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxSms').hasError('min')">
           {{ 'tenant-profile.max-sms-range' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
       <div fxFlex></div>
   </div>
@@ -301,7 +319,7 @@
       {{ 'tenant-profile.ota-files-in-bytes' | translate }} <span translate>tenant-profile.unlimited</span>
     </legend>
     <div class="fields-element" fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-resources-sum-data-size</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxResourcesInBytes"
@@ -312,8 +330,9 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxResourcesInBytes').hasError('min')">
           {{ 'tenant-profile.maximum-resources-sum-data-size-range' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
-      <mat-form-field fxFlex class="mat-block" appearance="fill">
+      <mat-form-field fxFlex class="mat-block" appearance="fill" subscriptSizing="dynamic">
         <mat-label translate>tenant-profile.maximum-ota-packages-sum-data-size</mat-label>
         <input matInput required min="0" step="1"
                formControlName="maxOtaPackagesInBytes"
@@ -324,6 +343,7 @@
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxOtaPackagesInBytes').hasError('min')">
           {{ 'tenant-profile.maximum-ota-packages-sum-data-size-range' | translate}}
         </mat-error>
+        <mat-hint></mat-hint>
       </mat-form-field>
     </div>
   </fieldset>
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 bcaa4a183f..933462b06b 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3600,8 +3600,8 @@
         "maximum-resources-sum-data-size-required": "Resource files sum size is required.",
         "maximum-resources-sum-data-size-range": "Resource files sum size can`t be negative",
         "maximum-ota-packages-sum-data-size": "OTA package files sum size",
-        "maximum-ota-package-sum-data-size-required": "OTA package files sum size is required.",
-        "maximum-ota-package-sum-data-size-range": "OTA package files sum size can`t be negative",
+        "maximum-ota-packages-sum-data-size-required": "OTA package files sum size is required.",
+        "maximum-ota-packages-sum-data-size-range": "OTA package files sum size can`t be negative",
         "rest-requests-for-tenant": "REST requests for tenant",
         "transport-tenant-telemetry-msg-rate-limit": "Transport tenant telemetry messages",
         "transport-tenant-telemetry-data-points-rate-limit": "Transport tenant telemetry data points",

From 41a3e6c22ebddaaa83161219c64a6f1eff93f5f0 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 26 May 2023 12:21:32 +0300
Subject: [PATCH 3/3] UI: Refactoring

---
 .../profile/queue/tenant-profile-queues.component.ts        | 6 +++---
 .../default-tenant-profile-configuration.component.html     | 4 ++--
 .../modules/home/components/queue/queue-form.component.html | 4 ++--
 ui-ngx/src/assets/locale/locale.constant-en_US.json         | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.ts b/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.ts
index c3ff3ccc4c..8f510cfbda 100644
--- a/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/queue/tenant-profile-queues.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnDestroy } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -53,7 +53,7 @@ import { takeUntil } from 'rxjs/operators';
     }
   ]
 })
-export class TenantProfileQueuesComponent implements ControlValueAccessor, Validator, OnDestroy {
+export class TenantProfileQueuesComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy {
 
   tenantProfileQueuesFormGroup: UntypedFormGroup;
   newQueue = false;
@@ -115,7 +115,7 @@ export class TenantProfileQueuesComponent implements ControlValueAccessor, Valid
   }
 
   writeValue(queues: Array<QueueInfo> | null): void {
-    if (queues.length === this.queuesFormArray.length) {
+    if (queues?.length === this.queuesFormArray.length) {
       this.queuesFormArray.patchValue(queues, {emitEvent: false});
     } else {
       const queuesControls: Array<AbstractControl> = [];
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
index 4e287a888c..0edb1b4b47 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/default-tenant-profile-configuration.component.html
@@ -338,10 +338,10 @@
                formControlName="maxOtaPackagesInBytes"
                type="number">
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxOtaPackagesInBytes').hasError('required')">
-          {{ 'tenant-profile.maximum-ota-packages-sum-data-size-required' | translate}}
+          {{ 'tenant-profile.maximum-ota-package-sum-data-size-required' | translate}}
         </mat-error>
         <mat-error *ngIf="defaultTenantProfileConfigurationFormGroup.get('maxOtaPackagesInBytes').hasError('min')">
-          {{ 'tenant-profile.maximum-ota-packages-sum-data-size-range' | translate}}
+          {{ 'tenant-profile.maximum-ota-package-sum-data-size-range' | translate}}
         </mat-error>
         <mat-hint></mat-hint>
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html b/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
index 9fee72fef4..56b20d8aa8 100644
--- a/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
+++ b/ui-ngx/src/app/modules/home/components/queue/queue-form.component.html
@@ -37,7 +37,7 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="16px" formGroupName="submitStrategy">
+        <div fxFlex fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px" formGroupName="submitStrategy">
           <div fxFlex>
             <label class="group-label" translate>queue.submit-strategy</label>
             <mat-radio-group fxFlex fxLayout="column" formControlName="type" required>
@@ -75,7 +75,7 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="16px" formGroupName="processingStrategy">
+        <div fxFlex fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px" formGroupName="processingStrategy">
           <div fxFlex>
             <label class="group-label" translate>queue.processing-strategy</label>
               <mat-radio-group fxFlex fxLayout="column" formControlName="type" required>
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 933462b06b..bcaa4a183f 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3600,8 +3600,8 @@
         "maximum-resources-sum-data-size-required": "Resource files sum size is required.",
         "maximum-resources-sum-data-size-range": "Resource files sum size can`t be negative",
         "maximum-ota-packages-sum-data-size": "OTA package files sum size",
-        "maximum-ota-packages-sum-data-size-required": "OTA package files sum size is required.",
-        "maximum-ota-packages-sum-data-size-range": "OTA package files sum size can`t be negative",
+        "maximum-ota-package-sum-data-size-required": "OTA package files sum size is required.",
+        "maximum-ota-package-sum-data-size-range": "OTA package files sum size can`t be negative",
         "rest-requests-for-tenant": "REST requests for tenant",
         "transport-tenant-telemetry-msg-rate-limit": "Transport tenant telemetry messages",
         "transport-tenant-telemetry-data-points-rate-limit": "Transport tenant telemetry data points",