From a1effcbb98f9baf8feca4794e66364faad0adb37 Mon Sep 17 00:00:00 2001
From: Kenji Gaillac <48765390+Nhqml@users.noreply.github.com>
Date: Tue, 24 Oct 2023 03:52:35 +0200
Subject: [PATCH] Add label's description as tooltip (#19421)

* feat(ui): add label's description as tooltip

Will only display the tooltip on artifact-list-page.

Signed-off-by: Kenji Gaillac <kenji@gaillac.eu>

* fix(ui): remove redundant condition

Signed-off-by: Kenji Gaillac <kenji@gaillac.eu>

---------

Signed-off-by: Kenji Gaillac <kenji@gaillac.eu>
---
 .../artifact-list-tab.component.html          |  6 ++-
 .../label-piece/label-piece.component.html    | 45 +++++++++++--------
 .../label-piece/label-piece.component.ts      |  1 +
 3 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
index fb90facf5..33117a053 100644
--- a/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
+++ b/src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html
@@ -430,7 +430,8 @@
                         <hbr-label-piece
                             *ngIf="artifact.labels?.length"
                             [label]="artifact.labels[0]"
-                            [labelWidth]="90">
+                            [labelWidth]="90"
+                            [withTooltip]="true">
                         </hbr-label-piece>
                         <div
                             class="signpost-item"
@@ -447,7 +448,8 @@
                                         class="margin-5px">
                                         <hbr-label-piece
                                             [labelWidth]="130"
-                                            [label]="label">
+                                            [label]="label"
+                                            [withTooltip]="true">
                                         </hbr-label-piece>
                                     </div>
                                 </clr-signpost-content>
diff --git a/src/portal/src/app/shared/components/label/label-piece/label-piece.component.html b/src/portal/src/app/shared/components/label/label-piece/label-piece.component.html
index 9429f78b4..8f3f1647d 100644
--- a/src/portal/src/app/shared/components/label/label-piece/label-piece.component.html
+++ b/src/portal/src/app/shared/components/label/label-piece/label-piece.component.html
@@ -1,18 +1,27 @@
-<label
-    class="label"
-    [ngStyle]="{
-        'background-color': labelColor?.color,
-        color: labelColor?.textColor,
-        border: labelColor?.color === '#FFFFFF' ? '1px solid #A1A1A1' : 'none'
-    }"
-    [style.max-width.px]="labelWidth">
-    <span>
-        <clr-icon
-            *ngIf="hasIcon && label.scope === 'p'"
-            shape="organization"></clr-icon>
-        <clr-icon
-            *ngIf="hasIcon && label.scope === 'g'"
-            shape="administrator"></clr-icon>
-    </span>
-    <span class="label-name">{{ label.name }}</span>
-</label>
+<clr-tooltip>
+    <label
+        clrTooltipTrigger
+        class="label"
+        [ngStyle]="{
+            'background-color': labelColor?.color,
+            color: labelColor?.textColor,
+            border:
+                labelColor?.color === '#FFFFFF' ? '1px solid #A1A1A1' : 'none'
+        }"
+        [style.max-width.px]="labelWidth">
+        <span>
+            <clr-icon
+                *ngIf="hasIcon && label.scope === 'p'"
+                shape="organization"></clr-icon>
+            <clr-icon
+                *ngIf="hasIcon && label.scope === 'g'"
+                shape="administrator"></clr-icon>
+        </span>
+        <span class="label-name">{{ label.name }}</span>
+    </label>
+    <clr-tooltip-content
+        [clrPosition]="'right'"
+        *ngIf="withTooltip && label.description">
+        <span>{{ label.description }}</span>
+    </clr-tooltip-content>
+</clr-tooltip>
diff --git a/src/portal/src/app/shared/components/label/label-piece/label-piece.component.ts b/src/portal/src/app/shared/components/label/label-piece/label-piece.component.ts
index 4607df24b..5c2c289dc 100644
--- a/src/portal/src/app/shared/components/label/label-piece/label-piece.component.ts
+++ b/src/portal/src/app/shared/components/label/label-piece/label-piece.component.ts
@@ -24,6 +24,7 @@ export class LabelPieceComponent implements OnChanges {
     @Input() label: Label;
     @Input() labelWidth: number;
     @Input() hasIcon: boolean = true;
+    @Input() withTooltip: boolean = false;
     labelColor: { [key: string]: string };
 
     ngOnChanges(): void {