From 2ed9fd5349ac789b7ceeb9000d681d38dfbc3d28 Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Thu, 8 Aug 2024 17:09:17 +0300
Subject: [PATCH 1/2] Gateway Modbus Connector UI adjustments and hints

---
 .../modbus-basic-config.component.html        |  2 +-
 .../modbus-data-keys-panel.component.html     | 24 ++++++++--
 .../modbus-security-config.component.html     |  8 +++-
 .../modbus-security-config.component.ts       |  2 +
 .../modbus-slave-config.component.html        | 20 +++++----
 .../modbus-slave-config.component.ts          |  2 +
 .../modbus-slave-dialog.component.html        | 44 ++++++++++---------
 .../modbus-slave-dialog.component.ts          |  5 ++-
 .../dialog/add-connector-dialog.component.ts  |  3 +-
 .../lib/gateway/gateway-widget.models.ts      |  8 ++--
 .../gateway/modbus-functions-data-types_fn.md | 33 ++++++++++++++
 .../assets/locale/locale.constant-en_US.json  | 30 ++++++++++++-
 12 files changed, 139 insertions(+), 42 deletions(-)
 create mode 100644 ui-ngx/src/assets/help/en_US/widget/lib/gateway/modbus-functions-data-types_fn.md

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html
index 105a3c0e8e..30233cddcf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html
@@ -19,7 +19,7 @@
   <mat-tab label="{{ 'gateway.general' | translate }}">
     <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>
   </mat-tab>
-  <mat-tab label="{{ 'gateway.master-connections' | translate }}*">
+  <mat-tab label="{{ 'gateway.master-connections' | translate }}">
     <tb-modbus-master-table formControlName="master"></tb-modbus-master-table>
   </mat-tab>
   <mat-tab label="{{ 'gateway.server-config' | translate }}">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html
index f53e3ee277..cfb97f674d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html
@@ -39,10 +39,19 @@
                 </mat-panel-title>
               </mat-expansion-panel-header>
               <ng-template matExpansionPanelContent>
+                <div class="tb-form-hint tb-primary-fill tb-flex center align-center">
+                  {{ 'gateway.hints.modbus.data-keys' | translate }}
+                  <div matSuffix
+                       class="see-example"
+                       [tb-help-popup]="'widget/lib/gateway/modbus-functions-data-types_fn'"
+                       tb-help-popup-placement="left"
+                       [tb-help-popup-style]="{maxWidth: '970px'}">
+                  </div>
+                </div>
                 <div class="tb-form-panel stroked">
                   <div class="tb-form-panel-title" translate>gateway.platform-side</div>
                   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" translate>
+                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.key' | translate }}" translate>
                       gateway.key
                     </div>
                     <div class="tb-flex no-gap">
@@ -91,7 +100,7 @@
                     </div>
                   </div>
                   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width" translate>gateway.objects-count</div>
+                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.objects-count' | translate }}" translate>gateway.objects-count</div>
                     <div class="tb-flex no-gap">
                       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                         <input
@@ -104,11 +113,20 @@
                           placeholder="{{ 'gateway.set' | translate }}"
                           [readonly]="!ModbusEditableDataTypes.includes(keyControl.get('type').value)"
                         />
+                        <mat-icon matSuffix
+                                  matTooltipPosition="above"
+                                  matTooltipClass="tb-error-tooltip"
+                                  [matTooltip]="('gateway.objects-count-required') | translate"
+                                  *ngIf="keyControl.get('objectsCount').hasError('required') &&
+                                           keyControl.get('objectsCount').touched"
+                                  class="tb-error">
+                          warning
+                        </mat-icon>
                       </mat-form-field>
                     </div>
                   </div>
                   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" translate>gateway.address</div>
+                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.address' | translate }}" translate>gateway.address</div>
                     <div class="tb-flex no-gap">
                       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                         <input matInput type="number" min="0" max="50000" name="value" formControlName="address" placeholder="{{ 'gateway.set' | translate }}"/>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.html
index 66db8c5018..3fc3e33ad0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.html
@@ -18,7 +18,9 @@
 <div class="tb-form-panel no-border no-padding" [formGroup]="securityConfigFormGroup">
   <div class="tb-form-hint tb-primary-fill">{{ 'gateway.hints.path-in-os' | translate }}</div>
   <div class="tb-form-row space-between tb-flex fill-width">
-    <div class="fixed-title-width" translate>gateway.client-cert-path</div>
+    <div class="fixed-title-width" tbTruncateWithTooltip tb-hint-tooltip-icon="{{ 'gateway.hints.ca-cert' | translate }}">
+      <span tbTruncateWithTooltip translate>gateway.client-cert-path</span>
+    </div>
     <div class="tb-flex no-gap">
       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
         <input matInput name="value" formControlName="certfile" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -26,7 +28,9 @@
     </div>
   </div>
   <div class="tb-form-row space-between tb-flex fill-width">
-    <div class="fixed-title-width" translate>gateway.private-key-path</div>
+    <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.private-key-path' | translate }}">
+      <span tbTruncateWithTooltip translate>gateway.private-key-path</span>
+    </div>
     <div class="tb-flex no-gap">
       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
         <input matInput name="value" formControlName="keyfile" placeholder="{{ 'gateway.set' | translate }}"/>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.ts
index bc40727b55..062f77fafb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-security-config/modbus-security-config.component.ts
@@ -42,6 +42,7 @@ import { CommonModule } from '@angular/common';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { coerceBoolean } from '@shared/decorators/coercion';
+import { TruncateWithTooltipDirective } from '@shared/directives/truncate-with-tooltip.directive';
 
 @Component({
   selector: 'tb-modbus-security-config',
@@ -63,6 +64,7 @@ import { coerceBoolean } from '@shared/decorators/coercion';
   imports: [
     CommonModule,
     SharedModule,
+    TruncateWithTooltipDirective,
   ]
 })
 export class ModbusSecurityConfigComponent implements ControlValueAccessor, Validator, OnChanges, OnDestroy {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html
index d1a16c33bc..9360ef499a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html
@@ -28,7 +28,7 @@
            class="tb-form-row column-xs"
            fxLayoutAlign="space-between center"
       >
-        <div class="fixed-title-width tb-required" translate>gateway.host</div>
+        <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.host' | translate }}" translate>gateway.host</div>
         <div class="tb-flex no-gap">
           <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
             <input matInput name="value" formControlName="host" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -48,7 +48,7 @@
            class="tb-form-row column-xs"
            fxLayoutAlign="space-between center"
       >
-        <div class="fixed-title-width tb-required" translate>gateway.port</div>
+        <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.port' | translate }}" translate>gateway.port</div>
         <div class="tb-flex no-gap">
           <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
             <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"
@@ -69,7 +69,7 @@
       </div>
       <ng-template #serialPort>
         <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-          <div class="fixed-title-width tb-required" translate>gateway.port</div>
+          <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.serial-port' | translate }}" translate>gateway.port</div>
           <div class="tb-flex no-gap">
             <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
               <input matInput name="value" formControlName="serialPort" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -86,7 +86,7 @@
         </div>
       </ng-template>
       <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-        <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.framer-type' | translate }}" translate>
+        <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.framer-type' | translate }}" translate>
           gateway.method
         </div>
         <div class="tb-flex no-gap">
@@ -100,7 +100,7 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width tb-required" translate>gateway.unit-id</div>
+      <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.unit-id' | translate }}" translate>gateway.unit-id</div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <input matInput type="number" min="0" name="value" formControlName="unitId" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -151,7 +151,11 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width tb-required" translate>gateway.poll-period</div>
+      <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.poll-period' | translate }}">
+        <span tbTruncateWithTooltip translate>
+          gateway.poll-period
+        </span>
+      </div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -159,7 +163,7 @@
       </div>
     </div>
     <div *ngIf="protocolType === ModbusProtocolType.Serial" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" translate>gateway.baudrate</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.baudrate' | translate }}" translate>gateway.baudrate</div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="baudrate">
@@ -184,7 +188,7 @@
         </mat-expansion-panel-header>
         <div class="tb-form-panel no-border no-padding padding-top">
           <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" translate>gateway.byte-order</div>
+            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.byte-order' | translate }}" translate>gateway.byte-order</div>
             <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <mat-select formControlName="byteOrder">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts
index 5f5b4d293c..206b0c2ac5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts
@@ -48,6 +48,7 @@ import { GatewayPortTooltipPipe } from '@home/components/widget/lib/gateway/pipe
 import { ModbusSecurityConfigComponent } from '../modbus-security-config/modbus-security-config.component';
 import { ModbusValuesComponent, } from '../modbus-values/modbus-values.component';
 import { isEqual } from '@core/utils';
+import { TruncateWithTooltipDirective } from '@shared/directives/truncate-with-tooltip.directive';
 
 @Component({
   selector: 'tb-modbus-slave-config',
@@ -72,6 +73,7 @@ import { isEqual } from '@core/utils';
     ModbusValuesComponent,
     ModbusSecurityConfigComponent,
     GatewayPortTooltipPipe,
+    TruncateWithTooltipDirective,
   ],
 })
 export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validator, OnDestroy {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html
index 088b385623..d8f2ca9626 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html
@@ -57,7 +57,7 @@
                class="tb-form-row column-xs"
                fxLayoutAlign="space-between center"
           >
-            <div class="fixed-title-width tb-required" translate>gateway.host</div>
+            <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.host' | translate }}" translate>gateway.host</div>
             <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <input matInput name="value" formControlName="host" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -77,7 +77,7 @@
                class="tb-form-row column-xs"
                fxLayoutAlign="space-between center"
           >
-            <div class="fixed-title-width tb-required" translate>gateway.port</div>
+            <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.port' | translate }}" translate>gateway.port</div>
             <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <input matInput type="number" min="{{portLimits.MIN}}" max="{{portLimits.MAX}}"
@@ -98,7 +98,7 @@
           </div>
           <ng-template #serialPort>
             <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width tb-required" translate>gateway.port</div>
+              <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.serial-port' | translate }}" translate>gateway.port</div>
               <div class="tb-flex no-gap">
                 <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                   <input matInput name="value" formControlName="serialPort" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -116,7 +116,7 @@
             </div>
           </ng-template>
           <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.framer-type' | translate }}" translate>
+            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.framer-type' | translate }}" translate>
               gateway.method
             </div>
             <div class="tb-flex no-gap">
@@ -131,7 +131,7 @@
         </div>
         <ng-container *ngIf="protocolType === ModbusProtocolType.Serial">
           <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" translate>gateway.baudrate</div>
+            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.baudrate' | translate }}" translate>gateway.baudrate</div>
             <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <mat-select formControlName="baudrate">
@@ -141,7 +141,7 @@
             </div>
           </div>
           <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" translate>gateway.bytesize</div>
+            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.bytesize' | translate }}" translate>gateway.bytesize</div>
             <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <mat-select formControlName="bytesize">
@@ -151,7 +151,7 @@
             </div>
           </div>
           <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" translate>gateway.stopbits</div>
+            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.stopbits' | translate }}"  translate>gateway.stopbits</div>
             <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <input matInput type="number" min="0" name="value" formControlName="stopbits" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -159,7 +159,7 @@
             </div>
           </div>
           <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" translate>gateway.parity</div>
+            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.parity' | translate }}" translate>gateway.parity</div>
             <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                 <mat-select formControlName="parity">
@@ -170,14 +170,14 @@
           </div>
           <div class="tb-form-row" fxLayoutAlign="space-between center">
             <mat-slide-toggle class="mat-slide" formControlName="strict">
-              <mat-label>
+              <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.strict' | translate }}">
                 {{ 'gateway.strict' | translate }}
               </mat-label>
             </mat-slide-toggle>
           </div>
         </ng-container>
         <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-          <div class="fixed-title-width tb-required" translate>gateway.unit-id</div>
+          <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.unit-id' | translate }}" translate>gateway.unit-id</div>
           <div class="tb-flex no-gap">
             <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
               <input matInput type="number" min="0" name="value" formControlName="unitId" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -243,7 +243,7 @@
             </mat-expansion-panel-header>
             <div class="tb-form-panel no-border no-padding padding-top">
               <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width" translate>gateway.connection-timeout</div>
+                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.connection-timeout' | translate }}" translate>gateway.connection-timeout</div>
                 <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <input matInput type="number" min="0" name="value" formControlName="timeout" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -251,7 +251,7 @@
                 </div>
               </div>
               <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width" translate>gateway.byte-order</div>
+                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.byte-order' | translate }}" translate>gateway.byte-order</div>
                 <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <mat-select formControlName="byteOrder">
@@ -261,7 +261,7 @@
                 </div>
               </div>
               <div *ngIf="protocolType !== ModbusProtocolType.Serial" class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width" translate>gateway.word-order</div>
+                <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.word-order' | translate }}" translate>gateway.word-order</div>
                 <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <mat-select formControlName="wordOrder">
@@ -286,27 +286,31 @@
               </div>
               <div class="tb-form-row" fxLayoutAlign="space-between center">
                 <mat-slide-toggle class="mat-slide" formControlName="retries">
-                  <mat-label>
+                  <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.retries' | translate }}">
                     {{ 'gateway.retries' | translate }}
                   </mat-label>
                 </mat-slide-toggle>
               </div>
               <div class="tb-form-row" fxLayoutAlign="space-between center">
                 <mat-slide-toggle class="mat-slide" formControlName="retryOnEmpty">
-                  <mat-label>
+                  <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.retries-on-empty' | translate }}">
                     {{ 'gateway.retries-on-empty' | translate }}
                   </mat-label>
                 </mat-slide-toggle>
               </div>
               <div class="tb-form-row" fxLayoutAlign="space-between center">
                 <mat-slide-toggle class="mat-slide" formControlName="retryOnInvalid">
-                  <mat-label>
+                  <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.retries-on-invalid' | translate }}">
                     {{ 'gateway.retries-on-invalid' | translate }}
                   </mat-label>
                 </mat-slide-toggle>
               </div>
               <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width-230 tb-required" translate>gateway.poll-period</div>
+                <div class="fixed-title-width-230 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.poll-period' | translate }}">
+                  <span tbTruncateWithTooltip translate>
+                    gateway.poll-period
+                  </span>
+                </div>
                 <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <input matInput type="number" min="0" name="value" formControlName="pollPeriod" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -314,7 +318,7 @@
                 </div>
               </div>
               <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width-230 tb-required" translate>gateway.connect-attempt-time</div>
+                <div class="fixed-title-width-230 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.connect-attempt-time' | translate }}" translate>gateway.connect-attempt-time</div>
                 <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <input matInput type="number" min="0" name="value" formControlName="connectAttemptTimeMs" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -322,7 +326,7 @@
                 </div>
               </div>
               <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width-230 tb-required" translate>gateway.connect-attempt-count</div>
+                <div class="fixed-title-width-230 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.connect-attempt-count' | translate }}" translate>gateway.connect-attempt-count</div>
                 <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <input matInput type="number" min="0" name="value" formControlName="connectAttemptCount" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -330,7 +334,7 @@
                 </div>
               </div>
               <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width-230 tb-required" translate>gateway.wait-after-failed-attempts</div>
+                <div class="fixed-title-width-230 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.wait-after-failed-attempts' | translate }}" translate>gateway.wait-after-failed-attempts</div>
                 <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <input matInput type="number" min="0" name="value" formControlName="waitAfterFailedAttemptsMs" placeholder="{{ 'gateway.set' | translate }}"/>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts
index e21a9921a7..3d2f5b6f5d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts
@@ -52,6 +52,8 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { GatewayPortTooltipPipe } from '@home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe';
 import { takeUntil } from 'rxjs/operators';
 import { isEqual } from '@core/utils';
+import { TruncateWithTooltipDirective } from '@shared/directives/truncate-with-tooltip.directive';
+import { helpBaseUrl } from '@shared/models/constants';
 
 @Component({
   selector: 'tb-modbus-slave-dialog',
@@ -76,6 +78,7 @@ import { isEqual } from '@core/utils';
     ModbusValuesComponent,
     ModbusSecurityConfigComponent,
     GatewayPortTooltipPipe,
+    TruncateWithTooltipDirective,
   ],
   styleUrls: ['./modbus-slave-dialog.component.scss'],
 })
@@ -97,7 +100,7 @@ export class ModbusSlaveDialogComponent extends DialogComponent<ModbusSlaveDialo
   readonly ModbusProtocolLabelsMap = ModbusProtocolLabelsMap;
   readonly ModbusMethodLabelsMap = ModbusMethodLabelsMap;
   readonly modbusHelpLink =
-    'https://thingsboard.io/docs/iot-gateway/config/modbus/#section-master-description-and-configuration-parameters';
+    helpBaseUrl + '/docs/iot-gateway/config/modbus/#section-master-description-and-configuration-parameters';
 
   private readonly serialSpecificControlKeys = ['serialPort', 'baudrate', 'stopbits', 'bytesize', 'parity', 'strict'];
   private readonly tcpUdpSpecificControlKeys = ['port', 'security', 'host', 'wordOrder'];
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.ts
index 5a1b5d2a1b..cc8e9a6cbf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/add-connector-dialog.component.ts
@@ -34,6 +34,7 @@ import {
 import { Subject } from 'rxjs';
 import { ResourcesService } from '@core/services/resources.service';
 import { takeUntil, tap } from 'rxjs/operators';
+import { helpBaseUrl } from '@shared/models/constants';
 
 @Component({
   selector: 'tb-add-connector-dialog',
@@ -83,7 +84,7 @@ export class AddConnectorDialogComponent extends DialogComponent<AddConnectorDia
   }
 
   helpLinkId(): string {
-    return 'https://thingsboard.io/docs/iot-gateway/configuration/';
+    return helpBaseUrl + '/docs/iot-gateway/configuration/';
   }
 
   cancel(): void {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
index 12df05c8f3..1bbb242fea 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
@@ -16,7 +16,7 @@
 
 import { ResourcesService } from '@core/services/resources.service';
 import { Observable } from 'rxjs';
-import { ValueTypeData } from '@shared/models/constants';
+import { helpBaseUrl, ValueTypeData } from '@shared/models/constants';
 
 export const noLeadTrailSpacesRegex = /^\S+(?: \S+)*$/;
 
@@ -553,9 +553,9 @@ export const MappingHintTranslationsMap = new Map<MappingType, string>(
 
 export const HelpLinkByMappingTypeMap = new Map<MappingType, string>(
   [
-    [MappingType.DATA, 'https://thingsboard.io/docs/iot-gateway/config/mqtt/#section-mapping'],
-    [MappingType.OPCUA, 'https://thingsboard.io/docs/iot-gateway/config/opc-ua/#section-mapping'],
-    [MappingType.REQUESTS, 'https://thingsboard.io/docs/iot-gateway/config/mqtt/#section-mapping']
+    [MappingType.DATA, helpBaseUrl + '/docs/iot-gateway/config/mqtt/#section-mapping'],
+    [MappingType.OPCUA, helpBaseUrl + '/docs/iot-gateway/config/opc-ua/#section-mapping'],
+    [MappingType.REQUESTS, helpBaseUrl + '/docs/iot-gateway/config/mqtt/#section-mapping']
   ]
 );
 
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/gateway/modbus-functions-data-types_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/gateway/modbus-functions-data-types_fn.md
new file mode 100644
index 0000000000..6a38f9220f
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/lib/gateway/modbus-functions-data-types_fn.md
@@ -0,0 +1,33 @@
+# Modbus Functions
+
+The Modbus connector supports the following Modbus functions:
+
+| Modbus Function Code | Description                      |
+|----------------------|----------------------------------|
+| 1                    | Read Coils                        |
+| 2                    | Read Discrete Inputs              |
+| 3                    | Read Multiple Holding Registers   |
+| 4                    | Read Input Registers              |
+| 5                    | Write Coil                        |
+| 6                    | Write Register                    |
+| 15                   | Write Coils                       |
+| 16                   | Write Registers                   |
+
+## Data Types
+
+A list and description of the supported data types for reading/writing data:
+
+| Type     | Function Code | Objects Count | Note                                               |
+|----------|---------------|---------------|----------------------------------------------------|
+| string   | 3-4           | 1-…           | Read bytes from registers and decode it (‘UTF-8’ coding). |
+| bytes    | 3-4           | 1-…           | Read bytes from registers.                        |
+| bits     | 1-4           | 1-…           | Read coils. If the objects count is 1, result will be interpreted as a boolean. Otherwise, the result will be an array with bits. |
+| 16int    | 3-4           | 1             | Integer 16 bit.                                   |
+| 16uint   | 3-4           | 1             | Unsigned integer 16 bit.                          |
+| 16float  | 3-4           | 1             | Float 16 bit.                                     |
+| 32int    | 3-4           | 2             | Integer 32 bit.                                   |
+| 32uint   | 3-4           | 2             | Unsigned integer 32 bit.                          |
+| 32float  | 3-4           | 2             | Float 32 bit.                                     |
+| 64int    | 3-4           | 4             | Integer 64 bit.                                   |
+| 64uint   | 3-4           | 4             | Unsigned integer 64 bit.                          |
+| 64float  | 3-4           | 4             | Float 64 bit.                                     |
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 b32818723b..a71c93a184 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3312,6 +3312,7 @@
             "exactly-once": "2 - Exactly once"
         },
         "objects-count": "Objects count",
+        "objects-count-required": "Objects count is required",
         "wait-after-failed-attempts": "Wait after failed attempts (ms)",
         "tls-path-private-key": "Path to private key on gateway",
         "toggle-fullscreen": "Toggle fullscreen",
@@ -3367,7 +3368,6 @@
             "permit-without-calls": "Allow server to keep the GRPC connection alive even when there are no active RPC calls.",
             "path-in-os": "Path in gateway os.",
             "memory": "Your data will be stored in the in-memory queue, it is a fastest but no persistence guarantee.",
-            "framer-type": "Type of framer.",
             "file": "Your data will be stored in separated files and will be saved even after the gateway restart.",
             "sqlite": "Your data will be stored in file based database. And will be saved even after the gateway restart.",
             "opcua-timeout": "Timeout in seconds for connecting to OPC-UA server.",
@@ -3376,7 +3376,33 @@
             "enable-subscription": "If true - the gateway will subscribe to interesting nodes and wait for data update and if false - the gateway will rescan OPC-UA server every scanPeriodInMillis.",
             "show-map": "Show nodes on scanning.",
             "method-name": "Name of method on OPC-UA server.",
-            "arguments": "Arguments for the method (will be overwritten by arguments from the RPC request)."
+            "arguments": "Arguments for the method (will be overwritten by arguments from the RPC request).",
+            "modbus": {
+                "framer-type": "Type of a framer (Socket, RTU, or ASCII), if needed.",
+                "host": "Hostname or IP address of Modbus server.",
+                "port": "Modbus server port for connection.",
+                "unit-id": "Modbus slave ID.",
+                "connection-timeout": "Connection timeout (in seconds) for the Modbus server.",
+                "byte-order": "Byte order for reading data.",
+                "word-order": "Word order when reading multiple registers.",
+                "retries": "Retrying data transmission to the master. Acceptable values: true or false.",
+                "retries-on-empty": "Retry sending data to the master if the data is empty.",
+                "retries-on-invalid": "Retry sending data to the master if it fails.",
+                "poll-period": "Period in milliseconds to check attributes and telemetry on the slave.",
+                "connect-attempt-time": "A waiting period in milliseconds before establishing a connection to the master.",
+                "connect-attempt-count": "The number of connection attempts made through the gateway.",
+                "wait-after-failed-attempts": "A waiting period in milliseconds before attempting to send data to the master.",
+                "serial-port": "Serial port for connection.",
+                "baudrate": "Baud rate for the serial device.",
+                "stopbits": "The number of stop bits sent after each character in a message to indicate the end of the byte.",
+                "bytesize": "The number of bits in a byte of serial data. This can be one of 5, 6, 7, or 8.",
+                "parity": "The type of checksum used to verify data integrity. Options: (E)ven, (O)dd, (N)one.",
+                "strict": "Use inter-character timeout for baudrates ≤ 19200.",
+                "objects-count": "Depends on the selected type.",
+                "address": "Register address to verify.",
+                "key": "Key to be used as the attribute key for the platform instance.",
+                "data-keys": "For more information about function codes and data types click on help icon"
+            }
         }
     },
     "grid": {

From 3e6247082deca6494b4d2a3f0c2a5658d76d0f33 Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Thu, 8 Aug 2024 17:55:29 +0300
Subject: [PATCH 2/2] adjustments

---
 .../modbus-slave-dialog.component.html                 | 10 +++++-----
 .../modbus-slave-dialog.component.scss                 | 10 ++++++++++
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html
index d8f2ca9626..1cf95ad06e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html
@@ -281,7 +281,7 @@
                       </mat-slide-toggle>
                     </mat-panel-title>
                   </mat-expansion-panel-header>
-                  <tb-modbus-security-config formControlName="security"></tb-modbus-security-config>
+                  <tb-modbus-security-config class="security-config" formControlName="security"></tb-modbus-security-config>
                 </mat-expansion-panel>
               </div>
               <div class="tb-form-row" fxLayoutAlign="space-between center">
@@ -306,7 +306,7 @@
                 </mat-slide-toggle>
               </div>
               <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width-230 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.poll-period' | translate }}">
+                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.poll-period' | translate }}">
                   <span tbTruncateWithTooltip translate>
                     gateway.poll-period
                   </span>
@@ -318,7 +318,7 @@
                 </div>
               </div>
               <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width-230 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.connect-attempt-time' | translate }}" translate>gateway.connect-attempt-time</div>
+                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.connect-attempt-time' | translate }}" translate>gateway.connect-attempt-time</div>
                 <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <input matInput type="number" min="0" name="value" formControlName="connectAttemptTimeMs" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -326,7 +326,7 @@
                 </div>
               </div>
               <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width-230 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.connect-attempt-count' | translate }}" translate>gateway.connect-attempt-count</div>
+                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.connect-attempt-count' | translate }}" translate>gateway.connect-attempt-count</div>
                 <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <input matInput type="number" min="0" name="value" formControlName="connectAttemptCount" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -334,7 +334,7 @@
                 </div>
               </div>
               <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                <div class="fixed-title-width-230 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.wait-after-failed-attempts' | translate }}" translate>gateway.wait-after-failed-attempts</div>
+                <div class="fixed-title-width-260 tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.modbus.wait-after-failed-attempts' | translate }}" translate>gateway.wait-after-failed-attempts</div>
                 <div class="tb-flex no-gap">
                   <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                     <input matInput type="number" min="0" name="value" formControlName="waitAfterFailedAttemptsMs" placeholder="{{ 'gateway.set' | translate }}"/>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss
index 8900741a93..0c68b6af9e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss
@@ -23,4 +23,14 @@
     margin-right: 16px;
     color: rgba(0, 0, 0, 0.87);
   }
+
+  .fixed-title-width-260 {
+    min-width: 260px;
+  }
+
+  ::ng-deep.security-config {
+    .fixed-title-width {
+      min-width: 230px;
+    }
+  }
 }