From 9fef084d904f12202cd4c7dc7acae97cfe64bf3c Mon Sep 17 00:00:00 2001
From: James Scott Aslan <scottyaslan@gmail.com>
Date: Tue, 5 Nov 2024 17:32:20 -0500
Subject: [PATCH] [NIFI-13968] add title tooltip for truncated attribute values

---
 .../flowfile-dialog.component.html                |  7 +++++--
 .../provenance-event-dialog.component.html        | 15 +++++----------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
index 9bf5219e38..56546151d7 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
@@ -207,7 +207,10 @@
                 <div class="unset neutral-color">Empty string set</div>
             </ng-container>
             <ng-template #nonEmptyValue>
-                <div class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
+                <div
+                    class="tertiary-color font-medium truncate"
+                    [title]="value"
+                    *ngIf="title == null; else valueWithTitle">
                     {{ value }}
                 </div>
                 <ng-template #valueWithTitle>
@@ -221,7 +224,7 @@
     </ng-template>
     <ng-template #formatContentValue let-value let-title="title">
         <ng-container *ngIf="value != null; else nullValue">
-            <div class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
+            <div class="tertiary-color font-medium truncate" [title]="value" *ngIf="title == null; else valueWithTitle">
                 {{ value }}
             </div>
             <ng-template #valueWithTitle>
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
index 4db0afd666..58d1c7539a 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
@@ -426,14 +426,13 @@
             </ng-container>
             <ng-template #nonEmptyValue>
                 <div
-                    class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+                    class="tertiary-color font-medium truncate"
+                    [title]="value"
                     *ngIf="title == null; else valueWithTitle">
                     {{ value }}
                 </div>
                 <ng-template #valueWithTitle>
-                    <div
-                        class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
-                        [title]="title">
+                    <div class="tertiary-color font-medium truncate" [title]="title">
                         {{ value }}
                     </div>
                 </ng-template>
@@ -445,15 +444,11 @@
     </ng-template>
     <ng-template #formatContentValue let-value let-title="title">
         <ng-container *ngIf="value != null; else nullValue">
-            <div
-                class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
-                *ngIf="title == null; else valueWithTitle">
+            <div class="tertiary-color font-medium truncate" [title]="value" *ngIf="title == null; else valueWithTitle">
                 {{ value }}
             </div>
             <ng-template #valueWithTitle>
-                <div
-                    class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
-                    [title]="title">
+                <div class="tertiary-color font-medium truncate" [title]="title">
                     {{ value }}
                 </div>
             </ng-template>