From def7b203ef642db3c2022f1b10b7b98ce351b1e1 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 28 Apr 2023 14:42:08 +0300
Subject: [PATCH 1/5] UI: Add copy button for attribute table cell

---
 .../attribute/attribute-table.component.html  | 26 +++++++++++++++++--
 .../assets/locale/locale.constant-en_US.json  |  4 ++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index 089db1e98d..a2d230bde9 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -161,7 +161,18 @@
         <ng-container matColumnDef="key">
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'attribute.key' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let attribute">
-            {{ attribute.key }}
+            <div fxLayout="row" style="align-items: center">
+              <span>{{ attribute.key }}</span>
+              <tb-copy-button
+                [disabled]="isLoading$ | async"
+                [copyText]="attribute.key"
+                tooltipText="{{ 'attribute.copy-key' | translate }}"
+                tooltipPosition="above"
+                icon="content_copy"
+                [style]="{padding: '4px', 'font-size': '16px', color: 'rgba(0,0,0,.87)'}"
+              >
+              </tb-copy-button>
+            </div>
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="value">
@@ -170,7 +181,18 @@
                     class="tb-value-cell"
                     (click)="editAttribute($event, attribute)">
             <div fxLayout="row" style="align-items: center">
-              <span style="overflow: hidden;text-overflow: ellipsis;" fxFlex>{{attribute.value | tbJson}}</span>
+              <div fxFlex>
+                <span style="overflow: hidden;text-overflow: ellipsis;">{{attribute.value | tbJson}}</span>
+                <tb-copy-button
+                  [disabled]="isLoading$ | async"
+                  [copyText]="attribute.value | tbJson"
+                  tooltipText="{{ 'attribute.copy-value' | translate }}"
+                  tooltipPosition="above"
+                  icon="content_copy"
+                  [style]="{padding: '4px', 'font-size': '16px', color: 'rgba(0,0,0,.87)'}"
+                >
+                </tb-copy-button>
+              </div>
               <span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
                 <mat-icon>edit</mat-icon>
               </span>
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 3aac9e1909..528fbb36c3 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -691,7 +691,9 @@
         "selected-attributes": "{ count, plural, =1 {1 attribute} other {# attributes} } selected",
         "selected-telemetry": "{ count, plural, =1 {1 telemetry unit} other {# telemetry units} } selected",
         "no-attributes-text": "No attributes found",
-        "no-telemetry-text": "No telemetry found"
+        "no-telemetry-text": "No telemetry found",
+        "copy-key": "Copy key",
+        "copy-value": "Copy value"
     },
     "api-usage": {
         "api-features": "API features",

From a8d5e276d3c9f9e54356a75271012e6e633d6666 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 28 Apr 2023 17:53:59 +0300
Subject: [PATCH 2/5] UI: Fixed for long key and value

---
 .../components/attribute/attribute-table.component.html   | 8 ++++----
 .../components/attribute/attribute-table.component.scss   | 5 +++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index a2d230bde9..e056140b71 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -162,7 +162,7 @@
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'attribute.key' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let attribute">
             <div fxLayout="row" style="align-items: center">
-              <span>{{ attribute.key }}</span>
+              <span class="ellipsis">{{ attribute.key }}</span>
               <tb-copy-button
                 [disabled]="isLoading$ | async"
                 [copyText]="attribute.key"
@@ -180,9 +180,9 @@
           <mat-cell *matCellDef="let attribute"
                     class="tb-value-cell"
                     (click)="editAttribute($event, attribute)">
-            <div fxLayout="row" style="align-items: center">
-              <div fxFlex>
-                <span style="overflow: hidden;text-overflow: ellipsis;">{{attribute.value | tbJson}}</span>
+            <div fxFlex fxLayout="row" style="align-items: center">
+              <div fxFlex fxLayout="row"  class="ellipsis" style="align-items: center;">
+                <span class="ellipsis">{{attribute.value | tbJson}}</span>
                 <tb-copy-button
                   [disabled]="isLoading$ | async"
                   [copyText]="attribute.value | tbJson"
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
index 67bf37453a..3d92d8c5fc 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
@@ -65,6 +65,11 @@
         overflow: hidden;
         text-overflow: ellipsis;
       }
+
+      .ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 

From fba360a237c72879b4c6f814623c881967851ec7 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 28 Apr 2023 18:10:05 +0300
Subject: [PATCH 3/5] UI: Refactoring

---
 .../home/components/attribute/attribute-table.component.html    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index e056140b71..5cacb555b9 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -181,7 +181,7 @@
                     class="tb-value-cell"
                     (click)="editAttribute($event, attribute)">
             <div fxFlex fxLayout="row" style="align-items: center">
-              <div fxFlex fxLayout="row"  class="ellipsis" style="align-items: center;">
+              <div fxFlex fxLayout="row" style="overflow: hidden; align-items: center;">
                 <span class="ellipsis">{{attribute.value | tbJson}}</span>
                 <tb-copy-button
                   [disabled]="isLoading$ | async"

From 0dd8161790bc02cee46a2428a51e811d282f77ab Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Mon, 1 May 2023 16:26:49 +0300
Subject: [PATCH 4/5] UI: Copy button visible on hover

---
 .../attribute/attribute-table.component.html         |  6 ++++--
 .../attribute/attribute-table.component.scss         | 12 ++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index 5cacb555b9..0a57bfef9b 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -161,9 +161,10 @@
         <ng-container matColumnDef="key">
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'attribute.key' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let attribute">
-            <div fxLayout="row" style="align-items: center">
+            <div class="attribute" fxLayout="row" style="align-items: center">
               <span class="ellipsis">{{ attribute.key }}</span>
               <tb-copy-button
+                class="attribute-copy"
                 [disabled]="isLoading$ | async"
                 [copyText]="attribute.key"
                 tooltipText="{{ 'attribute.copy-key' | translate }}"
@@ -181,9 +182,10 @@
                     class="tb-value-cell"
                     (click)="editAttribute($event, attribute)">
             <div fxFlex fxLayout="row" style="align-items: center">
-              <div fxFlex fxLayout="row" style="overflow: hidden; align-items: center;">
+              <div class="attribute" fxFlex fxLayout="row" style="overflow: hidden; align-items: center;">
                 <span class="ellipsis">{{attribute.value | tbJson}}</span>
                 <tb-copy-button
+                  class="attribute-copy"
                   [disabled]="isLoading$ | async"
                   [copyText]="attribute.value | tbJson"
                   tooltipText="{{ 'attribute.copy-value' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
index 3d92d8c5fc..80e1a8060e 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
@@ -51,6 +51,7 @@
         overflow: auto;
         .mat-mdc-table {
           table-layout: fixed;
+          min-width: 450px;
         }
       }
 
@@ -70,6 +71,17 @@
         overflow: hidden;
         text-overflow: ellipsis;
       }
+
+      .attribute-copy {
+        visibility: hidden;
+        transition: visibility 0.2s;
+      }
+
+      .attribute:hover {
+        .attribute-copy {
+          visibility: visible;
+        }
+      }
     }
   }
 

From 0a2e64bded799849a8028c8296fc0f4f36b509c4 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Tue, 2 May 2023 09:19:53 +0300
Subject: [PATCH 5/5] UI: Refactoring

---
 .../components/attribute/attribute-table.component.html   | 8 ++++----
 .../components/attribute/attribute-table.component.scss   | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index 0a57bfef9b..61dc5bf013 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -160,8 +160,8 @@
         </ng-container>
         <ng-container matColumnDef="key">
           <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'attribute.key' | translate }} </mat-header-cell>
-          <mat-cell *matCellDef="let attribute">
-            <div class="attribute" fxLayout="row" style="align-items: center">
+          <mat-cell *matCellDef="let attribute" class="attribute">
+            <div fxLayout="row" style="align-items: center">
               <span class="ellipsis">{{ attribute.key }}</span>
               <tb-copy-button
                 class="attribute-copy"
@@ -179,10 +179,10 @@
         <ng-container matColumnDef="value">
           <mat-header-cell *matHeaderCellDef style="width: 60%"> {{ 'attribute.value' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let attribute"
-                    class="tb-value-cell"
+                    class="tb-value-cell attribute"
                     (click)="editAttribute($event, attribute)">
             <div fxFlex fxLayout="row" style="align-items: center">
-              <div class="attribute" fxFlex fxLayout="row" style="overflow: hidden; align-items: center;">
+              <div fxFlex fxLayout="row" style="overflow: hidden; align-items: center;">
                 <span class="ellipsis">{{attribute.value | tbJson}}</span>
                 <tb-copy-button
                   class="attribute-copy"
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
index 80e1a8060e..831762d1e4 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
@@ -74,7 +74,7 @@
 
       .attribute-copy {
         visibility: hidden;
-        transition: visibility 0.2s;
+        transition: visibility 0.1s;
       }
 
       .attribute:hover {