cleanup bug icon on env card

equinor · Jan 14, 2025 · 618cd1e · 618cd1e
1 parent 14b569a
commit 618cd1e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 55 deletions.
diff --git a/src/components/environments-summary/dev.tsx b/src/components/environments-summary/dev.tsx
@@ -255,7 +255,22 @@ const cards: EnvironmentCardLayoutProps[] = [
       activeFrom: '2020-02-02T12:00:00Z',
     },
     isLoading: false,
-    envScan: { name: 'dev' },
+    envScan: {
+      name: 'dev',
+      components: {
+        web: {
+          image: 'test:test',
+          scanSuccess: true,
+          scanTime: '2020-02-02T12:00:00Z',
+          vulnerabilitySummary: {
+            critical: 0,
+            high: 1,
+            medium: 2,
+            low: 5,
+          },
+        },
+      },
+    },
     components: [],
     repository: 'https://github.com/equinor/radix-web-console',
     utilization: {

diff --git a/src/components/environments-summary/environment-card-status.tsx b/src/components/environments-summary/environment-card-status.tsx
@@ -1,9 +1,4 @@
-import {
-  CircularProgress,
-  Icon,
-  type IconProps,
-  Popover,
-} from '@equinor/eds-core-react';
+import { CircularProgress, Icon } from '@equinor/eds-core-react';
 import {
   check,
   error_outlined,
@@ -14,10 +9,12 @@ import {
 } from '@equinor/eds-icons';
 import { upperFirst } from 'lodash-es';
 import type React from 'react';
-import { useRef, useState } from 'react';
 import type { ImageScan, Vulnerability } from '../../store/scan-api';
 import { StatusBadgeTemplate } from '../status-badges/status-badge-template';
-import { StatusPopover } from '../status-popover/status-popover';
+import {
+  StatusPopover,
+  type StatusPopoverType,
+} from '../status-popover/status-popover';
 import { VulnerabilitySummary } from '../vulnerability-summary';
 import {
   EnvironmentStatus,
@@ -53,57 +50,30 @@ const EnvironmentStatusIcon = ({ status }: { status: EnvironmentStatus }) => {
   }
 };
 
+type VulnerabilitySummaryType = Required<ImageScan>['vulnerabilitySummary'];
 type Props = {
-  title?: string;
+  title: string;
   size?: number;
   visibleKeys?: Array<Lowercase<Vulnerability['severity']>>;
-  summary: Required<ImageScan>['vulnerabilitySummary'];
+  summary: VulnerabilitySummaryType;
 };
 export const EnvironmentVulnerabilityIndicator = ({
   title,
   summary,
   size = 24,
   ...rest
 }: Props) => {
-  const [popoverOpen, setPopoverOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
+  let type: StatusPopoverType = 'none';
+  if (summary.medium > 0 || summary.low > 0) type = 'success';
+  if (summary.high > 0 || summary.unknown > 0) type = 'warning';
+  if (summary.critical > 0) type = 'danger';
 
   return (
-    <>
-      <Popover
-        open={popoverOpen}
-        anchorEl={containerRef.current}
-        placement={'top'}
-      >
-        {title && (
-          <Popover.Header>
-            <Popover.Title>{title}</Popover.Title>
-          </Popover.Header>
-        )}
-        <Popover.Content className="grid grid--gap-x-small grid--auto-columns">
-          <VulnerabilitySummary summary={summary} {...rest} />
-        </Popover.Content>
-      </Popover>
-      <div
-        ref={containerRef}
-        onMouseEnter={() => setPopoverOpen(true)}
-        onMouseLeave={() => setPopoverOpen(false)}
-      >
-        <Icon
-          data={report_bug}
-          size={size as IconProps['size']}
-          color={`var(${
-            summary.critical > 0
-              ? '--eds_interactive_danger__text'
-              : summary.high > 0 || summary.unknown > 0
-                ? '--eds_interactive_warning__text'
-                : summary.medium > 0 || summary.low > 0
-                  ? '--eds_interactive_success__hover'
-                  : '--eds_text_static_icons__tertiary'
-          })`}
-        />
+    <StatusPopover title={title} icon={<Icon data={report_bug} />} type={type}>
+      <div className="grid grid--gap-x-small grid--auto-columns">
+        <VulnerabilitySummary summary={summary} {...rest} />
       </div>
-    </>
+    </StatusPopover>
   );
 };
 

diff --git a/src/components/environments-summary/environment-headers.tsx b/src/components/environments-summary/environment-headers.tsx
@@ -56,14 +56,13 @@ type VulnerabilityHeaderProps = {
 export const VulnerabilityHeader = ({ envScan }: VulnerabilityHeaderProps) => {
   const vulnerabilities = environmentVulnerabilitySummarizer(envScan);
 
+  if (!visibleKeys.some((key) => vulnerabilities[key] > 0)) return null;
   return (
-    visibleKeys.some((key) => vulnerabilities[key] > 0) && (
-      <EnvironmentVulnerabilityIndicator
-        title="Vulnerabilities"
-        size={22}
-        summary={filterFields(vulnerabilities, visibleKeys)}
-        visibleKeys={visibleKeys}
-      />
-    )
+    <EnvironmentVulnerabilityIndicator
+      title="Vulnerabilities"
+      size={22}
+      summary={filterFields(vulnerabilities, visibleKeys)}
+      visibleKeys={visibleKeys}
+    />
   );
 };