From fb91898bd3e561483014483c1e2a5cde93af4248 Mon Sep 17 00:00:00 2001
From: Dmitriymush <powder322@gmail.com>
Date: Thu, 2 May 2024 16:57:25 +0300
Subject: [PATCH] UI: improvements for connectors config

---
 .../ellipsis-chip-list.directive.ts             | 16 ++++++++++++----
 .../mapping-data-keys-panel.component.scss      |  2 +-
 .../dialog/mapping-dialog.component.html        | 10 ++++++----
 .../gateway/dialog/mapping-dialog.component.ts  | 17 +++++++++++++++--
 .../assets/locale/locale.constant-en_US.json    |  5 +----
 5 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts
index e5a6c5a54c..aa4738d707 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts
@@ -79,6 +79,10 @@ export class EllipsisChipListDirective implements OnDestroy {
 
       chipNodes.forEach((chip) => {
         this.renderer.setStyle(chip, 'display', 'inline-flex');
+        const textLabelContainer = chip.querySelector('.mdc-evolution-chip__text-label');
+
+        this.applyMaxChipTextWidth(textLabelContainer, (availableWidth / 3));
+
         if ((usedWidth + (chip.offsetWidth + margin) <= availableWidth) && (visibleChipsCount < this.chipsValue.length)) {
           visibleChipsCount++;
           usedWidth += chip.offsetWidth + margin;
@@ -104,15 +108,19 @@ export class EllipsisChipListDirective implements OnDestroy {
       this.renderer.setStyle(ellipsisChip, 'display', 'none');
       this.renderer.setStyle(chipNodes[0], 'display', 'inline-flex');
 
-      this.renderer.setStyle(textLabelContainer, 'max-width', computedTextWidth + 'px');
-      this.renderer.setStyle(textLabelContainer, 'overflow', 'hidden');
-      this.renderer.setStyle(textLabelContainer, 'text-overflow', 'ellipsis');
-      this.renderer.setStyle(textLabelContainer, 'white-space', 'nowrap');
+      this.applyMaxChipTextWidth(textLabelContainer, computedTextWidth);
     } else {
       this.renderer.setStyle(ellipsisChip, 'display', 'none');
     }
   }
 
+  private applyMaxChipTextWidth(element: HTMLElement, widthLimit: number): void {
+    this.renderer.setStyle(element, 'max-width', widthLimit + 'px');
+    this.renderer.setStyle(element, 'overflow', 'hidden');
+    this.renderer.setStyle(element, 'text-overflow', 'ellipsis');
+    this.renderer.setStyle(element, 'white-space', 'nowrap');
+  }
+
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.scss
index 7f6aef05c0..24498863c9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.scss
@@ -20,7 +20,7 @@
     max-width: 700px;
 
     .title-container {
-      max-width: 14vw;
+      max-width: 11vw;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
index 97366bd26b..78ceaa566f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
@@ -595,13 +595,15 @@
                       <div class="fixed-title-width tb-required" translate>gateway.response-timeout</div>
                       <div class="tb-flex no-gap">
                         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-                          <input matInput name="value" type="number" formControlName="responseTimeout" placeholder="{{ 'gateway.set' | translate }}"/>
+                          <input matInput name="value" type="number" min="1" formControlName="responseTimeout"
+                                 placeholder="{{ 'gateway.set' | translate }}"/>
                           <mat-icon matSuffix
                                     matTooltipPosition="above"
                                     matTooltipClass="tb-error-tooltip"
-                                    [matTooltip]="('gateway.response-timeout-required') | translate"
-                                    *ngIf="mappingForm.get('requestValue.serverSideRpc.responseTimeout').hasError('required') &&
-                                           mappingForm.get('requestValue.serverSideRpc.responseTimeout').touched"
+                                    [matTooltip]="responseTimeoutErrorTooltip"
+                                    *ngIf="(mappingForm.get('requestValue.serverSideRpc.responseTimeout').hasError('required') ||
+                                            mappingForm.get('requestValue.serverSideRpc.responseTimeout').hasError('min')) &&
+                                            mappingForm.get('requestValue.serverSideRpc.responseTimeout').touched"
                                     class="tb-error">
                             warning
                           </mat-icon>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts
index b083439ef7..d01050b52e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts
@@ -50,6 +50,7 @@ import { startWith, takeUntil } from 'rxjs/operators';
 import { MatButton } from '@angular/material/button';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { MappingDataKeysPanelComponent } from '@home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'tb-mapping-dialog',
@@ -105,7 +106,8 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
               private fb: FormBuilder,
               private popoverService: TbPopoverService,
               private renderer: Renderer2,
-              private viewContainerRef: ViewContainerRef) {
+              private viewContainerRef: ViewContainerRef,
+              private translate: TranslateService) {
     super(store, router, dialogRef);
 
     this.createMappingForm();
@@ -135,6 +137,17 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
     return this.mappingForm.get('requestType').value;
   }
 
+  get responseTimeoutErrorTooltip(): string {
+    const control = this.mappingForm.get('requestValue.serverSideRpc.responseTimeout');
+    if (control.hasError('required')) {
+      return this.translate.instant('gateway.response-timeout-required');
+    } else if (control.hasError('min')) {
+      return this.translate.instant('gateway.response-timeout-limits-error', {min: 1});
+    }
+    return '';
+  }
+
+
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
@@ -215,7 +228,7 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
           responseTopicExpression: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
           valueExpression: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
           responseTopicQoS: [0, []],
-          responseTimeout: [10000, [Validators.required]],
+          responseTimeout: [10000, [Validators.required, Validators.min(1)]],
         })
       }));
       this.mappingForm.get('requestType').valueChanges.pipe(
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 c6e24e83c5..74e8b64303 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3033,22 +3033,19 @@
         "requests-mapping": "Requests mapping",
         "requests-mapping-hint": "MQTT Connector requests allows you to connect, disconnect, process attribute requests from the device, handle attribute updates on the server and RPC processing configuration.",
         "request-topic-expression": "Request topic expression",
-        "request-topic-expression-hint": "Request topic expression some hint",
         "request-topic-expression-required": "Request topic expression is required.",
         "response-timeout": "Response timeout (ms)",
         "response-timeout-required": "Response timeout is required.",
+        "response-timeout-limits-error": "Timeout must be more then {{min}} ms.",
         "response-topic-Qos": "Response topic QoS",
         "response-topic-Qos-hint": "MQTT Quality of Service (QoS) is an agreement between the message sender and receiver that defines the level of delivery guarantee for a specific message.",
         "response-topic-expression": "Response topic expression",
-        "response-topic-expression-hint": "Response topic expression hint",
         "response-topic-expression-required": "Response topic expression is required.",
         "response-value-expression": "Response value expression",
-        "response-value-expression-hint": "Response value expression hint",
         "response-value-expression-required": "Response value expression is required.",
         "value": "Value",
         "value-required": "Value is required.",
         "value-expression": "Value expression",
-        "value-expression-hint": "Value expression hint",
         "value-expression-required": "Value expression is required.",
         "with-response": "With response",
         "without-response": "Without response",