From 143d56b9656932eacf0b76f26469ae1c08794812 Mon Sep 17 00:00:00 2001
From: Kenji Gaillac <kenji@gaillac.eu>
Date: Fri, 6 Oct 2023 22:04:54 +0200
Subject: [PATCH 1/2] 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>
---
 .../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 fb90facf57d..33117a0532a 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 9429f78b4c2..975eac1cbca 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 && 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 4607df24bbc..5c2c289dcb8 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 {

From bef46522c72fa93c2c3217ac06067ef9354b42d5 Mon Sep 17 00:00:00 2001
From: Kenji Gaillac <kenji@gaillac.eu>
Date: Mon, 23 Oct 2023 20:36:45 +0200
Subject: [PATCH 2/2] fix(ui): remove redundant condition

Signed-off-by: Kenji Gaillac <kenji@gaillac.eu>
---
 .../components/label/label-piece/label-piece.component.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 975eac1cbca..8f3f1647da2 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
@@ -5,7 +5,8 @@
         [ngStyle]="{
             'background-color': labelColor?.color,
             color: labelColor?.textColor,
-            border: labelColor?.color === '#FFFFFF' ? '1px solid #A1A1A1' : 'none'
+            border:
+                labelColor?.color === '#FFFFFF' ? '1px solid #A1A1A1' : 'none'
         }"
         [style.max-width.px]="labelWidth">
         <span>
@@ -20,8 +21,7 @@
     </label>
     <clr-tooltip-content
         [clrPosition]="'right'"
-        *ngIf="withTooltip && label.description && label.description !== ''"
-        >
+        *ngIf="withTooltip && label.description">
         <span>{{ label.description }}</span>
     </clr-tooltip-content>
 </clr-tooltip>