kibana-cloud-security-posture owned UX adjustment for borealis

x-pack/platform/packages/shared/kbn-cloud-security-posture/common/constants.ts

@@ -5,6 +5,7 @@
  * 2.0.
  */
 import { VulnSeverity } from './types/vulnerabilities';
+import { MisconfigurationEvaluationStatus } from './types/misconfigurations';
 
 export const KSPM_POLICY_TEMPLATE = 'kspm';
 export const CSPM_POLICY_TEMPLATE = 'cspm';
@@ -48,7 +49,8 @@ export const VULNERABILITIES_SEVERITY: Record<VulnSeverity, VulnSeverity> = {
   UNKNOWN: 'UNKNOWN',
 };
 
-export const MISCONFIGURATION_STATUS: Record<string, string> = {
+export const MISCONFIGURATION_STATUS: Record<string, MisconfigurationEvaluationStatus> = {
   PASSED: 'passed',
   FAILED: 'failed',
+  UNKNOWN: 'unknown',
 };

x-pack/platform/packages/shared/kbn-cloud-security-posture/common/index.ts

@@ -24,6 +24,7 @@ export type {
 } from './schema/vulnerabilities/csp_vulnerability_finding';
 export type { BenchmarksCisId } from './types/benchmark';
 export type { VulnSeverity } from './types/vulnerabilities';
+export type { MisconfigurationEvaluationStatus } from './types/misconfigurations';
 export * from './constants';
 export {
   extractErrorMessage,

x-pack/platform/packages/shared/kbn-cloud-security-posture/common/types/misconfigurations.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export type MisconfigurationEvaluationStatus = 'passed' | 'failed' | 'unknown';

x-pack/solutions/security/packages/distribution_bar/src/distribution_bar.stories.tsx

@@ -5,21 +5,20 @@
  * 2.0.
  */
 import React from 'react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { EuiTitle, EuiSpacer } from '@elastic/eui';
 import { DistributionBar as DistributionBarComponent } from '..';
 
 const mockStatsFindings = [
   {
     key: 'passed',
     count: 90,
-    color: euiThemeVars.euiColorVis0,
+    color: 'green',
     label: 'Passed',
   },
   {
     key: 'failed',
     count: 10,
-    color: euiThemeVars.euiColorVis9,
+    color: 'red',
     label: <>{'Failed'}</>,
   },
 ];
@@ -28,22 +27,22 @@ const mockStatsAlerts = [
   {
     key: 'low',
     count: 1000,
-    color: euiThemeVars.euiColorVis0,
+    color: 'green',
   },
   {
     key: 'medium',
     count: 800,
-    color: euiThemeVars.euiColorVis5,
+    color: '#f7dc6f',
   },
   {
     key: 'high',
     count: 300,
-    color: euiThemeVars.euiColorVis7,
+    color: 'orange',
   },
   {
     key: 'critical',
     count: 50,
-    color: euiThemeVars.euiColorVis9,
+    color: 'red',
   },
 ];
 

x-pack/solutions/security/packages/distribution_bar/tsconfig.json

@@ -13,7 +13,6 @@
   },
   "include": ["**/*.ts", "**/*.tsx"],
   "kbn_references": [
-    "@kbn/ui-theme",
   ],
   "exclude": ["target/**/*"]
 }

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/index.ts

@@ -6,13 +6,16 @@
  */
 
 export * from './src/types';
-export * from './src/constants/component_constants';
 export * from './src/constants/navigation';
 export type { NavFilter } from './src/utils/query_utils';
 export { showErrorToast } from './src/utils/show_error_toast';
 export { encodeQuery, decodeQuery } from './src/utils/query_utils';
 export { CspEvaluationBadge } from './src/components/csp_evaluation_badge';
-export { getSeverityStatusColor, getCvsScoreColor } from './src/utils/get_vulnerability_colors';
+export {
+  getSeverityStatusColor,
+  getCvsScoreColor,
+  getMisconfigurationStatusColor,
+} from './src/utils/get_finding_colors';
 export { getSeverityText } from './src/utils/get_vulnerability_text';
 export { getVulnerabilityStats, hasVulnerabilitiesData } from './src/utils/vulnerability_helpers';
 export { CVSScoreBadge, SeverityStatusBadge } from './src/components/vulnerability_badges';

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/csp_evaluation_badge.tsx

@@ -6,41 +6,37 @@
  */
 
 import React from 'react';
-import { EuiBadge, type EuiBadgeProps } from '@elastic/eui';
+import { EuiBadge } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
-import { statusColors } from '../constants/component_constants';
+import { MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common';
+import type { MisconfigurationEvaluationStatus } from '@kbn/cloud-security-posture-common';
+import { getMisconfigurationStatusColor } from '../utils/get_finding_colors';
 
 interface Props {
-  type?: 'passed' | 'failed';
+  type?: MisconfigurationEvaluationStatus;
 }
 
 // 'fail' / 'pass' are same chars length, but not same width size.
 // 46px is used to make sure the badge is always the same width.
 const BADGE_WIDTH = '46px';
 
-const getColor = (type: Props['type']): EuiBadgeProps['color'] => {
-  if (type === 'passed') return statusColors.passed;
-  if (type === 'failed') return statusColors.failed;
-  return 'default';
-};
-
 export const CspEvaluationBadge = ({ type }: Props) => (
   <EuiBadge
-    color={getColor(type)}
+    color={getMisconfigurationStatusColor(type)}
     css={css`
       width: ${BADGE_WIDTH};
       display: flex;
       justify-content: center;
     `}
     data-test-subj={`${type}_finding`}
   >
-    {type === 'failed' ? (
+    {type === MISCONFIGURATION_STATUS.FAILED ? (
       <FormattedMessage
         id="securitySolutionPackages.csp.cspEvaluationBadge.failLabel"
         defaultMessage="Fail"
       />
-    ) : type === 'passed' ? (
+    ) : type === MISCONFIGURATION_STATUS.PASSED ? (
       <FormattedMessage
         id="securitySolutionPackages.csp.cspEvaluationBadge.passLabel"
         defaultMessage="Pass"

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/vulnerability_badges.tsx

@@ -5,12 +5,13 @@
  * 2.0.
  */
 
-import { EuiBadge, EuiIcon, EuiTextColor } from '@elastic/eui';
+import { EuiBadge, EuiIcon, EuiTextColor, useEuiTheme } from '@elastic/eui';
 import React from 'react';
 import { css } from '@emotion/react';
 import { float } from '@elastic/elasticsearch/lib/api/types';
 import type { VulnSeverity } from '@kbn/cloud-security-posture-common';
-import { getCvsScoreColor, getSeverityStatusColor } from '../utils/get_vulnerability_colors';
+import { useGetCvsScoreColor } from '../hooks/use_get_cvs_score_color';
+import { useGetSeverityStatusColor } from '../hooks/use_get_severity_status_color';
 
 const VULNERABILITIES_CVSS_SCORE_BADGE_SUBJ = 'vulnerabilities_cvss_score_badge';
 
@@ -24,6 +25,9 @@ interface SeverityStatusBadgeProps {
 }
 
 export const CVSScoreBadge = ({ score, version }: CVSScoreBadgeProps) => {
+  const { euiTheme } = useEuiTheme();
+  const { getCvsScoreColor } = useGetCvsScoreColor();
+
   if (!score) return null;
 
   const color = getCvsScoreColor(score);
@@ -48,7 +52,7 @@ export const CVSScoreBadge = ({ score, version }: CVSScoreBadgeProps) => {
             css={css`
               width: 1px;
               border: 0 none;
-              background-color: rgba(255, 255, 255, 0.2);
+              background-color: ${euiTheme.border.color};
               margin: 0px 6px;
             `}
           />
@@ -60,6 +64,8 @@ export const CVSScoreBadge = ({ score, version }: CVSScoreBadgeProps) => {
 };
 
 export const SeverityStatusBadge = ({ severity }: SeverityStatusBadgeProps) => {
+  const { getSeverityStatusColor } = useGetSeverityStatusColor();
+
   if (!severity) return null;
   const color = getSeverityStatusColor(severity);
 

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/hooks/use_get_cvs_score_color.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useEuiTheme } from '@elastic/eui';
+
+import { getCvsScoreColor as getCvsScoreColorUtil } from '../..';
+
+export const useGetCvsScoreColor = () => {
+  const { euiTheme } = useEuiTheme();
+
+  const getCvsScoreColor = (score: number) => {
+    return getCvsScoreColorUtil(score, euiTheme);
+  };
+
+  return { getCvsScoreColor };
+};

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/hooks/use_get_severity_status_color.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useEuiTheme } from '@elastic/eui';
+import { VulnSeverity } from '@kbn/cloud-security-posture-common';
+
+import { getSeverityStatusColor as getSeverityStatusColorUtil } from '../..';
+
+export const useGetSeverityStatusColor = () => {
+  const { euiTheme } = useEuiTheme();
+  const getSeverityStatusColor = (status: VulnSeverity) => {
+    return getSeverityStatusColorUtil(status, euiTheme);
+  };
+  return { getSeverityStatusColor };
+};

x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.test.ts

@@ -0,0 +1,77 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { getCvsScoreColor, getSeverityStatusColor, SEVERITY_COLOR } from './get_finding_colors';
+import { EuiThemeComputed } from '@elastic/eui';
+
+const mockEuiThemeBorealis = {
+  themeName: 'borialis',
+};
+
+describe('getSeverityStatusColor', () => {
+  it('should return the correct color for LOW severity', () => {
+    expect(getSeverityStatusColor('LOW', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
+      SEVERITY_COLOR.low
+    );
+  });
+
+  it('should return the correct color for MEDIUM severity', () => {
+    expect(getSeverityStatusColor('MEDIUM', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
+      SEVERITY_COLOR.medium
+    );
+  });
+
+  it('should return the correct color for HIGH severity', () => {
+    expect(getSeverityStatusColor('HIGH', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
+      SEVERITY_COLOR.high
+    );
+  });
+
+  it('should return the correct color for CRITICAL severity', () => {
+    expect(getSeverityStatusColor('CRITICAL', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
+      SEVERITY_COLOR.critical
+    );
+  });
+
+  it('should return the correct color for an unknown severity', () => {
+    expect(getSeverityStatusColor('UNKNOWN', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
+      SEVERITY_COLOR.unknown
+    );
+  });
+});
+
+describe('getCvsScoreColor', () => {
+  it('returns correct color for low severity score', () => {
+    expect(getCvsScoreColor(1.5, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
+      SEVERITY_COLOR.low
+    );
+  });
+
+  it('returns correct color for medium severity score', () => {
+    expect(getCvsScoreColor(5.5, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
+      SEVERITY_COLOR.medium
+    );
+  });
+
+  it('returns correct color for high severity score', () => {
+    expect(getCvsScoreColor(7.9, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
+      SEVERITY_COLOR.high
+    );
+  });
+
+  it('returns correct color for critical severity score', () => {
+    expect(getCvsScoreColor(10.0, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
+      SEVERITY_COLOR.critical
+    );
+  });
+
+  it('returns correct color for low severity score for undefined value', () => {
+    expect(getCvsScoreColor(-0.2, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
+      SEVERITY_COLOR.unknown
+    );
+  });
+});