feat(heureka): update severity icons (#1161)

* update heureka items

* update heureka severity icons

* update heureka severity icons

* update icon color

* update icon logic

* update icon logic

* update icon logic

* update icon logic

* update icon logic

* update icon logic

* update icon logic

* update icon logic

Author: guoda-puidokaite

.changeset/lovely-readers-end.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-heureka": minor
+---
+
+Update severity icons.

apps/heureka/src/components/Service/ImageVersionDetailsPanel/ImageVersionIssuesList/IssuesDataRows/IssuesDataRow/index.tsx

@@ -12,7 +12,7 @@ import { Issue } from "../../../../../Services/utils"
 import { getSeverityColor, useTextOverflow } from "../../../../../../utils"
 
 const cellSeverityClasses = (severity: string) => {
-  let borderColor = getSeverityColor(severity)
+  const borderColor = getSeverityColor(severity.toLowerCase())
 
   return `
     border-l-2

apps/heureka/src/components/Services/ServicesList/ServicesDataRows/ServiceDataRow.tsx

@@ -48,7 +48,7 @@ export const ServiceDataRow = ({ item, selected, onItemClick, onServiceDetailCli
       <SeverityCount
         showDashIfZero
         count={item.issuesCount.critical}
-        icon="danger"
+        icon="severityCritical"
         variant="danger"
         tooltipContent="Critical Vulnerabilities"
       />
@@ -57,7 +57,7 @@ export const ServiceDataRow = ({ item, selected, onItemClick, onServiceDetailCli
       <SeverityCount
         showDashIfZero
         count={item.issuesCount.high}
-        icon="warning"
+        icon="severityHigh"
         variant="warning"
         tooltipContent="High Vulnerabilities"
       />
@@ -66,7 +66,7 @@ export const ServiceDataRow = ({ item, selected, onItemClick, onServiceDetailCli
       <SeverityCount
         showDashIfZero
         count={item.issuesCount.medium}
-        icon="errorOutline"
+        icon="severityMedium"
         variant="warning"
         tooltipContent="Medium Vulnerabilities"
       />
@@ -75,7 +75,7 @@ export const ServiceDataRow = ({ item, selected, onItemClick, onServiceDetailCli
       <SeverityCount
         showDashIfZero
         count={item.issuesCount.low}
-        icon="info"
+        icon="severityLow"
         variant="info"
         tooltipContent="Low Vulnerabilities"
       />
@@ -84,7 +84,7 @@ export const ServiceDataRow = ({ item, selected, onItemClick, onServiceDetailCli
       <SeverityCount
         showDashIfZero
         count={item.issuesCount.none}
-        icon="help"
+        icon="severityUnknown"
         variant="default"
         tooltipContent="None Vulnerabilities"
       />

apps/heureka/src/components/Vulnerabilities/VulnerabilitiesList/VulnerabilitiesDataRows/VulnerabilityDataRow.tsx

@@ -4,8 +4,8 @@
  */
 
 import React, { useState } from "react"
-import { DataGridRow, DataGridCell, Stack, Icon, KnownIcons } from "@cloudoperators/juno-ui-components"
-import { getSeverityColor, useTextOverflow } from "../../../../utils"
+import { DataGridRow, DataGridCell, Stack, Icon } from "@cloudoperators/juno-ui-components"
+import { getSeverityColor, iconMap, useTextOverflow } from "../../../../utils"
 import { IssueTimestamp } from "../../../common/IssueTimestamp"
 import { Vulnerability } from "../../utils"
 
@@ -16,7 +16,7 @@ type VulnerabilityDataRowProps = {
 }
 
 const cellSeverityClasses = (severity: string) => {
-  let borderColor = getSeverityColor(severity || "none")
+  const borderColor = getSeverityColor(severity.toLowerCase() || "none")
 
   return `
     border-l-2
@@ -28,15 +28,7 @@ const cellSeverityClasses = (severity: string) => {
 
 const getIconForSeverity = (severity: string) => {
   const severityLower = (severity || "none").toLowerCase()
-  const iconColor = getSeverityColor(severity || "none")
-
-  const iconMap: Record<string, KnownIcons> = {
-    critical: "danger",
-    high: "warning",
-    medium: "errorOutline",
-    low: "info",
-    none: "help",
-  }
+  const iconColor = getSeverityColor(severityLower || "none")
 
   return <Icon icon={iconMap[severityLower] || "help"} color={iconColor} />
 }

apps/heureka/src/components/common/IssueCountsPerSeverityLevel.tsx

@@ -24,30 +24,35 @@ export const IssueCountsPerSeverityLevel = ({ counts }: IssueCountsPerSeverityLe
         <div className="font-bold mr-2">{counts.total}</div>
       </>
       <SeverityCount
-        icon="danger"
+        icon="severityCritical"
         count={counts.critical}
         variant={counts.critical > 0 ? "danger" : "default"}
         tooltipContent="Critical Vulnerabilities"
       />
       <SeverityCount
-        icon="warning"
+        icon="severityHigh"
         count={counts.high}
         variant={counts.high > 0 ? "warning" : "default"}
         tooltipContent="High Vulnerabilities"
       />
       <SeverityCount
-        icon="errorOutline"
+        icon="severityMedium"
         count={counts.medium}
         variant={counts.medium > 0 ? "warning" : "default"}
         tooltipContent="Medium Vulnerabilities"
       />
       <SeverityCount
-        icon="info"
+        icon="severityLow"
         count={counts.low}
         variant={counts.low > 0 ? "info" : "default"}
         tooltipContent="Low Vulnerabilities"
       />
-      <SeverityCount icon="help" count={counts.none} variant="default" tooltipContent="None Vulnerabilities" />
+      <SeverityCount
+        icon="severityUnknown"
+        count={counts.none}
+        variant="default"
+        tooltipContent="None Vulnerabilities"
+      />
     </Stack>
   )
 }

apps/heureka/src/components/common/IssueIcon.tsx

@@ -4,24 +4,16 @@
  */
 
 import React from "react"
-import { Icon, KnownIcons } from "@cloudoperators/juno-ui-components"
-import { getSeverityColor } from "../../utils"
+import { Icon } from "@cloudoperators/juno-ui-components"
+import { getSeverityColor, iconMap } from "../../utils"
 
 type IssueIconProps = {
   severity: string
 }
 
 const getIconForSeverity = (severity: string) => {
   const severityLower = severity.toLowerCase()
-  const iconColor = getSeverityColor(severity)
-
-  const iconMap: Record<string, KnownIcons> = {
-    critical: "danger",
-    high: "warning",
-    medium: "errorOutline",
-    low: "info",
-    none: "help",
-  }
+  const iconColor = getSeverityColor(severityLower)
 
   return <Icon icon={iconMap[severityLower] || "help"} color={iconColor} />
 }

apps/heureka/src/components/common/ServiceImageVersions/ImageVersionsDataRows/ImageVersionsDataRow.tsx

@@ -55,7 +55,7 @@ export const ImageVersionsDataRow = ({
         <SeverityCount
           showDashIfZero
           count={version.issueCounts.critical}
-          icon="danger"
+          icon="severityCritical"
           variant="danger"
           tooltipContent="Critical Vulnerabilities"
         />
@@ -64,7 +64,7 @@ export const ImageVersionsDataRow = ({
         <SeverityCount
           showDashIfZero
           count={version.issueCounts.high}
-          icon="warning"
+          icon="severityHigh"
           variant="warning"
           tooltipContent="High Vulnerabilities"
         />
@@ -73,7 +73,7 @@ export const ImageVersionsDataRow = ({
         <SeverityCount
           showDashIfZero
           count={version.issueCounts.medium}
-          icon="errorOutline"
+          icon="severityMedium"
           variant="warning"
           tooltipContent="Medium Vulnerabilities"
         />
@@ -82,7 +82,7 @@ export const ImageVersionsDataRow = ({
         <SeverityCount
           showDashIfZero
           count={version.issueCounts.low}
-          icon="info"
+          icon="severityLow"
           variant="info"
           tooltipContent="Low Vulnerabilities"
         />
@@ -91,7 +91,7 @@ export const ImageVersionsDataRow = ({
         <SeverityCount
           showDashIfZero
           count={version.issueCounts.none}
-          icon="help"
+          icon="severityUnknown"
           variant="default"
           tooltipContent="None Vulnerabilities"
         />

apps/heureka/src/components/common/SeverityCount.test.tsx

@@ -9,31 +9,47 @@ import { SeverityCount } from "./SeverityCount"
 
 describe("SeverityCount", () => {
   it("renders with count and shows badge", () => {
-    render(<SeverityCount showDashIfZero icon="danger" count={5} variant="danger" tooltipContent="Critical Issues" />)
+    render(
+      <SeverityCount
+        showDashIfZero
+        icon="severityCritical"
+        count={5}
+        variant="danger"
+        tooltipContent="Critical Issues"
+      />
+    )
 
     // Check if the badge is rendered with the count
     const badge = screen.getByText("5")
     expect(badge).toBeInTheDocument()
   })
 
   it("renders without count and shows dash in single mode", () => {
-    render(<SeverityCount showDashIfZero icon="danger" count={0} variant="danger" tooltipContent="Critical Issues" />)
+    render(
+      <SeverityCount
+        showDashIfZero
+        icon="severityCritical"
+        count={0}
+        variant="danger"
+        tooltipContent="Critical Issues"
+      />
+    )
 
     // Check if dash is rendered instead of a badge
     const dash = screen.getByText("—")
     expect(dash).toBeInTheDocument()
   })
 
   it("renders with zero count and shows '0' in all mode", () => {
-    render(<SeverityCount icon="danger" count={0} variant="danger" tooltipContent="Critical Issues" />)
+    render(<SeverityCount icon="severityCritical" count={0} variant="danger" tooltipContent="Critical Issues" />)
 
     // Check if the badge is rendered with "0"
     const badge = screen.getByText("0")
     expect(badge).toBeInTheDocument()
   })
 
   it("renders with positive count in all mode", () => {
-    render(<SeverityCount icon="danger" count={3} variant="danger" tooltipContent="Critical Issues" />)
+    render(<SeverityCount icon="severityCritical" count={3} variant="danger" tooltipContent="Critical Issues" />)
 
     // Check if the badge is rendered with the count
     const badge = screen.getByText("3")

apps/heureka/src/components/common/SeverityCount.tsx

@@ -11,6 +11,7 @@ import {
   TooltipContent,
   KnownIcons,
   BadgeVariantType,
+  Icon,
 } from "@cloudoperators/juno-ui-components"
 
 type SeverityCountProps = {

apps/heureka/src/utils.ts

@@ -4,6 +4,7 @@
  */
 
 import { useState, useRef, useEffect } from "react"
+import { KnownIcons } from "@cloudoperators/juno-ui-components"
 
 export const capitalizeFirstLetter = (str: string): string => {
   return str.charAt(0).toUpperCase() + str.slice(1)
@@ -12,20 +13,28 @@ export const capitalizeFirstLetter = (str: string): string => {
 export const getSeverityColor = (severity: string): string => {
   switch (severity.toLowerCase()) {
     case "critical":
-      return "text-theme-danger"
+      return "text-theme-severity-critical"
     case "high":
-      return "text-theme-warning"
+      return "text-theme-severity-high"
     case "medium":
-      return "text-theme-warning"
+      return "text-theme-severity-medium"
     case "low":
-      return "text-theme-info"
+      return "text-theme-severity-low"
     case "none":
-      return "text-theme-default"
+      return "text-theme-severity-unknown"
     default:
       return "text-theme-default"
   }
 }
 
+export const iconMap: Record<string, KnownIcons> = {
+  critical: "severityCritical",
+  high: "severityHigh",
+  medium: "severityMedium",
+  low: "severityLow",
+  none: "severityUnknown",
+}
+
 /**
  * Hook to detect if text content overflows its container
  * @param text - The text content to check