From 8119e26369fccaaea96e0a224209e14cffc73746 Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Fri, 26 Jul 2024 19:10:08 +0300
Subject: [PATCH] Added Connector tables Row Action buttons descriptions
 tooltips

---
 .../mapping-table.component.html              | 18 +++++------
 .../modbus-master-table.component.html        | 32 +++++++++----------
 .../modbus-master-table.component.ts          |  2 +-
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html
index 9f0566b566..76e7294403 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html
@@ -75,15 +75,22 @@
           </mat-header-cell>
           <mat-cell *matCellDef="let mapping; let i = index"
                     [ngStyle.gt-md]="{ minWidth: '96px', maxWidth: '96px', width: '96px'}">
-            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+            <ng-template #rowActions>
               <button mat-icon-button
+                      matTooltip="{{ 'action.edit' | translate }}"
+                      matTooltipPosition="above"
                       (click)="manageMapping($event, i)">
                 <tb-icon>edit</tb-icon>
               </button>
               <button mat-icon-button
+                      matTooltip="{{ 'action.delete' | translate }}"
+                      matTooltipPosition="above"
                       (click)="deleteMapping($event, i)">
                 <tb-icon>delete</tb-icon>
               </button>
+            </ng-template>
+            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+              <ng-container [ngTemplateOutlet]="rowActions"></ng-container>
             </div>
             <div fxHide fxShow.lt-lg fxFlex fxLayout="row" fxLayoutAlign="end">
               <button mat-icon-button
@@ -92,14 +99,7 @@
                 <mat-icon class="material-icons">more_vert</mat-icon>
               </button>
               <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                <button mat-icon-button
-                        (click)="manageMapping($event, i)">
-                  <tb-icon>edit</tb-icon>
-                </button>
-                <button mat-icon-button
-                        (click)="deleteMapping($event, i)">
-                  <tb-icon>delete</tb-icon>
-                </button>
+                <ng-container [ngTemplateOutlet]="rowActions"></ng-container>
               </mat-menu>
             </div>
           </mat-cell>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html
index e16aa0c51f..29e2fb6ccf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.html
@@ -63,33 +63,40 @@
           <mat-header-cell *matHeaderCellDef class="table-value-column">
             {{ 'gateway.name' | translate }}
           </mat-header-cell>
-          <mat-cell *matCellDef="let mapping" class="table-value-column">
-            {{ mapping['name'] }}
+          <mat-cell *matCellDef="let slave" class="table-value-column">
+            {{ slave['name'] }}
           </mat-cell>
         </ng-container>
         <ng-container [matColumnDef]="'type'">
           <mat-header-cell *matHeaderCellDef class="table-value-column">
             {{ 'gateway.client-communication-type' | translate }}
           </mat-header-cell>
-          <mat-cell *matCellDef="let mapping" class="table-value-column">
-            {{ ModbusProtocolLabelsMap.get(mapping['type']) }}
+          <mat-cell *matCellDef="let slave" class="table-value-column">
+            {{ ModbusProtocolLabelsMap.get(slave['type']) }}
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" stickyEnd>
           <mat-header-cell *matHeaderCellDef
                            [ngStyle.gt-md]="{ minWidth: '96px', maxWidth: '96px', width: '96px', textAlign: 'center'}">
           </mat-header-cell>
-          <mat-cell *matCellDef="let mapping; let i = index"
+          <mat-cell *matCellDef="let slave; let i = index"
                     [ngStyle.gt-md]="{ minWidth: '96px', maxWidth: '96px', width: '96px'}">
-            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+            <ng-template #rowActions>
               <button mat-icon-button
+                      matTooltip="{{ 'action.edit' | translate }}"
+                      matTooltipPosition="above"
                       (click)="manageSlave($event, i)">
                 <tb-icon>edit</tb-icon>
               </button>
               <button mat-icon-button
-                      (click)="deleteMapping($event, i)">
+                      matTooltip="{{ 'action.delete' | translate }}"
+                      matTooltipPosition="above"
+                      (click)="deleteSlave($event, i)">
                 <tb-icon>delete</tb-icon>
               </button>
+            </ng-template>
+            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+              <ng-container [ngTemplateOutlet]="rowActions"></ng-container>
             </div>
             <div fxHide fxShow.lt-lg fxFlex fxLayout="row" fxLayoutAlign="end">
               <button mat-icon-button
@@ -98,20 +105,13 @@
                 <mat-icon class="material-icons">more_vert</mat-icon>
               </button>
               <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                <button mat-icon-button
-                        (click)="manageSlave($event, i)">
-                  <tb-icon>edit</tb-icon>
-                </button>
-                <button mat-icon-button
-                        (click)="deleteMapping($event, i)">
-                  <tb-icon>delete</tb-icon>
-                </button>
+                <ng-container [ngTemplateOutlet]="rowActions"></ng-container>
               </mat-menu>
             </div>
           </mat-cell>
         </ng-container>
         <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="['name', 'type', 'actions']; sticky: true"></mat-header-row>
-        <mat-row *matRowDef="let mapping; columns: ['name', 'type', 'actions']"></mat-row>
+        <mat-row *matRowDef="let slave; columns: ['name', 'type', 'actions']"></mat-row>
       </table>
       <section [fxShow]="!textSearchMode && (dataSource.isEmpty() | async)" fxLayoutAlign="center center"
                class="mat-headline-5 tb-absolute-fill tb-add-new">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.ts
index 2cb66f6062..915de21c32 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.ts
@@ -185,7 +185,7 @@ export class ModbusMasterTableComponent implements ControlValueAccessor, Validat
     });
   }
 
-  deleteMapping($event: Event, index: number): void {
+  deleteSlave($event: Event, index: number): void {
     if ($event) {
       $event.stopPropagation();
     }