feat: replace severity chips

Author: arunjaindev

src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx

@@ -21,6 +21,8 @@ import ReactSelect, { Props as SelectProps, SelectInstance } from 'react-select'
 import {
     APP_SELECTOR_STYLES,
     AppSelectorDropdownIndicator,
+    Badge,
+    ComponentSizeType,
     DocLink,
     DocLinkProps,
     Icon,
@@ -114,7 +116,7 @@ const ClusterSelector: React.FC<ClusterSelectorType> = ({
                 }}
             />
 
-            {defaultOption?.isProd && <span className="px-6 py-2 br-4 bcb-1 cb-7 fs-12 lh-16 fw-5">Production</span>}
+            {defaultOption?.isProd && <Badge label="Production" size={ComponentSizeType.xxs} />}
 
             <PopupMenu autoClose>
                 <PopupMenu.Button rootClassName="flex ml-auto p-4 border__secondary" isKebab>

src/components/common/helpers/Helpers.tsx

@@ -30,6 +30,8 @@ import {
     useMainContext,
     SelectPickerOptionType,
     InfoBlock,
+    Badge,
+    SeveritiesDTO,
 } from '@devtron-labs/devtron-fe-common-lib'
 import YAML from 'yaml'
 import { Link } from 'react-router-dom'
@@ -1099,32 +1101,36 @@ export const getPluginIdsFromBuildStage = (
 }
 
 export const getSeverityWithCount = (severityCount: SeverityCount) => {
-    if (severityCount.critical) {
-        return (
-            <span className="severity-chip severity-chip--critical dc__w-fit-content">
-                {severityCount.critical} Critical
-            </span>
-        )
-    }
-    if (severityCount.high) {
-        return <span className="severity-chip severity-chip--high dc__w-fit-content">{severityCount.high} High</span>
-    }
-    if (severityCount.medium) {
-        return (
-            <span className="severity-chip severity-chip--medium dc__w-fit-content">{severityCount.medium} Medium</span>
-        )
-    }
-    if (severityCount.low) {
-        return <span className="severity-chip severity-chip--low dc__w-fit-content">{severityCount.low} Low</span>
-    }
-    if (severityCount.unknown) {
-        return (
-            <span className="severity-chip severity-chip--unknown dc__w-fit-content">
-                {severityCount.unknown} Unknown
-            </span>
-        )
+    const order = [
+        { key: SeveritiesDTO.CRITICAL, label: 'Critical', variant: 'negative' },
+        { key: SeveritiesDTO.HIGH, label: 'High', variant: 'custom', fontColor: 'R500', bgColor: 'R100' },
+        { key: SeveritiesDTO.MEDIUM, label: 'Medium', variant: 'custom', fontColor: 'O600', bgColor: 'O100' },
+        { key: SeveritiesDTO.LOW, label: 'Low', variant: 'warning' },
+        { key: SeveritiesDTO.UNKNOWN, label: 'Unknown', variant: 'neutral' },
+    ] as const
+    
+    for (const item of order) {
+        if (severityCount[item.key]) {
+            if (item.variant === 'custom') {
+                return (
+                    <Badge
+                        label={`${severityCount[item.key]} ${item.label}`}
+                        variant="custom"
+                        fontColor={item.fontColor}
+                        bgColor={item.bgColor}
+                    />
+                );
+            } else {
+                return (
+                    <Badge
+                        label={`${severityCount[item.key]} ${item.label}`}
+                        variant={item.variant}
+                    />
+                );
+            }
+        }
     }
-    return <span className="severity-chip severity-chip--passed dc__w-fit-content">Passed</span>
+    return <Badge label='Passed' variant='positive' />
 }
 
 // FIXME: Ideally whole branch calculations should be in fe-lib

src/css/base.scss

@@ -4826,55 +4826,6 @@ textarea::placeholder {
     background-color: var(--Y200);
 }
 
-.severity-chip {
-    display: flex;
-    padding: 0px 6px;
-    align-items: center;
-    gap: 4px;
-    border-radius: 4px;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 20px;
-    text-transform: capitalize;
-
-    &--passed {
-        color: var(--G500);
-        border: 1px solid var(--G200);
-        background: var(--G100);
-    }
-
-    &--critical {
-        color: var(--R700);
-        border: 1px solid var(--R700);
-        background: var(--R100);
-    }
-
-    &--high {
-        color: var(--R500);
-        border: 1px solid var(--R200);
-        background: var(--R100);
-    }
-
-    &--medium {
-        color: var(--O600);
-        border: 1px solid var(--O200);
-        background: var(--O100);
-    }
-
-    &--low {
-        color: var(--Y700);
-        border: 1px solid var(--Y200);
-        background: var(--Y100);
-    }
-
-    &--unknown {
-        color: var(--N700);
-        border: 1px solid var(--N200);
-        background: var(--N100);
-    }
-}
-
 .dc__grid-full {
     display: grid;
     grid-template-columns: 100% 0;