From e62b062d5b0ff24ddc70d57101743303fbe0188e Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Tue, 4 Mar 2025 14:57:46 +0200
Subject: [PATCH] Added copy argument name button

---
 ...lated-field-arguments-table.component.html | 19 ++++++++++++++-----
 ...lated-field-arguments-table.component.scss | 18 ++++++++++++++++++
 .../components/event/event-table-config.ts    |  4 ++--
 .../assets/locale/locale.constant-en_US.json  |  1 +
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html
index 6bab01f976..8a362f7eda 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html
@@ -20,18 +20,27 @@
     <table mat-table [dataSource]="dataSource" class="overflow-hidden bg-transparent" matSort
            [matSortActive]="sortOrder.property" [matSortDirection]="sortOrder.direction" matSortDisableClear>
       <ng-container [matColumnDef]="'name'">
-        <mat-header-cell mat-sort-header *matHeaderCellDef class="!w-1/4 xs:!w-1/2">
+        <mat-header-cell mat-sort-header *matHeaderCellDef class="!w-1/3 xs:!w-1/2">
           <div tbTruncateWithTooltip>{{ 'common.name' | translate }}</div>
         </mat-header-cell>
-        <mat-cell *matCellDef="let argument" class="w-1/4 xs:w-1/2">
-          <div tbTruncateWithTooltip>{{ argument.argumentName }}</div>
+        <mat-cell *matCellDef="let argument" class="argument-name-cell w-1/3 xs:w-1/2">
+          <div class="flex items-center">
+            <div tbTruncateWithTooltip class="flex-1">{{ argument.argumentName }}</div>
+            <tb-copy-button
+              class="copy-argument-name"
+              [copyText]="argument.argumentName"
+              tooltipText="{{ 'calculated-fields.copy-argument-name' | translate }}"
+              tooltipPosition="above"
+              icon="content_copy"
+            />
+          </div>
         </mat-cell>
       </ng-container>
       <ng-container [matColumnDef]="'entityType'">
-        <mat-header-cell mat-sort-header *matHeaderCellDef class="entity-type-header w-1/4 xs:hidden">
+        <mat-header-cell mat-sort-header *matHeaderCellDef class="entity-type-header w-1/5 xs:hidden">
           {{ 'entity.entity-type' | translate }}
         </mat-header-cell>
-        <mat-cell *matCellDef="let argument" class="w-1/4 xs:hidden">
+        <mat-cell *matCellDef="let argument" class="w-1/5 xs:hidden">
           <div tbTruncateWithTooltip>
             @if (argument.refEntityId?.entityType === ArgumentEntityType.Tenant) {
               {{ 'calculated-fields.argument-current-tenant' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.scss b/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.scss
index 877a749afa..ae8fd25170 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.scss
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.scss
@@ -28,6 +28,17 @@
     .key-text {
       font-size: 13px;
     }
+
+    .copy-argument-name {
+      visibility: hidden;
+      transition: visibility 0.1s;
+    }
+
+    .argument-name-cell:hover {
+      .copy-argument-name {
+        visibility: visible;
+      }
+    }
   }
 
   .max-args-warning {
@@ -61,4 +72,11 @@
       padding: 0 28px 0 0;
     }
   }
+
+  .copy-argument-name {
+    .mat-icon {
+      font-size: 16px;
+      padding: 4px;
+    }
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/event/event-table-config.ts b/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
index 6c334d2a5e..56a17cc7ae 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
+++ b/ui-ngx/src/app/modules/home/components/event/event-table-config.ts
@@ -369,7 +369,7 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
             (entity) => entity.body.entityId,
             {
               name: this.translate.instant('event.copy-entity-id'),
-              icon: 'content_paste',
+              icon: 'content_copy',
               style: {
                 padding: '4px',
                 'font-size': '16px',
@@ -389,7 +389,7 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
             false,
             {
               name: this.translate.instant('event.copy-message-id'),
-              icon: 'content_paste',
+              icon: 'content_copy',
               style: {
                 padding: '4px',
                 'font-size': '16px',
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 02c604d8ae..96d8bf205f 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1031,6 +1031,7 @@
         "argument-type": "Argument type",
         "see-debug-events": "See debug events",
         "attribute": "Attribute",
+        "copy-argument-name": "Copy argument name",
         "timeseries-key": "Time series key",
         "device-name": "Device name",
         "latest-telemetry": "Latest telemetry",