Merge pull request #2772 from devtron-labs/feat/badge

feat: replace severity chips

Author: arunjaindev

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.15.3-pre-1",
+        "@devtron-labs/devtron-fe-common-lib": "1.15.3-pre-3",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

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} />}
 
             {defaultOption?.value !== String(DEFAULT_CLUSTER_ID) && (
                 <PopupMenu autoClose>

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'
@@ -1098,33 +1100,31 @@ export const getPluginIdsFromBuildStage = (
     return pluginIds
 }
 
+const SEVERITY_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
+
 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>
-        )
+    for (const item of SEVERITY_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}
+                    />
+                )
+            }
+            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;

yarn.lock

@@ -1259,10 +1259,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/[email protected]1":
-  version "1.15.3-pre-1"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.15.3-pre-1.tgz#859eb74ae32f495e95ba1bd8f3e9e9c2cb0cb618"
-  integrity sha512-W67KUyn9iSO2PW2q682jcLMTb6n2+lKBPmNOJK/Jjst/H4I2P6CtJFY9b6cjFA+bhnSYscysASnAEBUm3qYaMQ==
+"@devtron-labs/[email protected]3":
+  version "1.15.3-pre-3"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.15.3-pre-3.tgz#f80a24b6af7b11c33a3217617dfc428d8cf3576b"
+  integrity sha512-4hRZEOSaHqkiga8ObZVPgXuqrlvluBoCwnCqZmYRTxwMOaT0PTtEciVE0TPmUhuqNIOLv1iKk6w8SDWX4m70eg==
   dependencies:
     "@codemirror/lang-json" "6.0.1"
     "@codemirror/lang-yaml" "6.1.2"