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>
goharbor · Oct 24, 2023 · a1effcb · a1effcb
1 parent f58dc2d
commit a1effcb
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 20 deletions.
diff --git a/...ifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html b/...ifact/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
@@ -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
@@ -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 {