[Security Solution] Prepare Rule Management owned pages for Borealis (#…

…206122) **Resolves: #204737** **Related PR (fixes severity indicator colors): #206276** ## Summary This PR introduces some of the necessary changes to support the Borealis UI theme on Rule Management team-owned pages. You can find a list of what needs to be done in this [issue](#199715) description under "Requested Code Changes". ## Changes in this PR - Replaced deprecated `euiThemeVars` with `useEuiTheme`. - Fixed incorrect "disabled" button color for the rule delete bulk action. ## Changes that are needed, but are outside of this PR's scope - Fix incorrect severity colors in Borealis. Will be resolved by this Threat Hunting [PR](#206276). <img width="93" alt="Schermafbeelding 2025-01-13 om 13 46 26" src="https://github.com/user-attachments/assets/d35407d7-77f9-4d7d-a6b8-3dfe4f8a0e9e" /> - Fix rule execution status indicator appearing too dark in the Borealis theme. This issue will be addressed in EUI, but there is no draft PR yet, as discussions are still ongoing between the design team and EUI folks to determine the best approach. <img width="326" alt="borealis" src="https://github.com/user-attachments/assets/3324448c-be13-4074-bfdc-c6837fb2bc6c" /> ## Testing You can find the theme switcher in "Stack Management" -> "Advanced Settings". Then you can test if everything looks correct in: - Amsterdam theme, light mode - Amsterdam theme, dark mode - Borealis theme, light mode - Borealis theme, dark mode Work started on: 08-01-2025
elastic · Jan 14, 2025 · 51ed29b · 51ed29b
1 parent fd2d1ba
commit 51ed29b
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 57 deletions.
diff --git a/...n/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx b/...n/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx
@@ -8,8 +8,7 @@
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import React, { useMemo, useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { css } from '@emotion/css';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { css } from '@emotion/react';
 import {
   EuiButtonEmpty,
   EuiTitle,
@@ -22,6 +21,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   useGeneratedHtmlId,
+  useEuiTheme,
 } from '@elastic/eui';
 import type { EuiTabbedContentTab, EuiTabbedContentProps, EuiFlyoutProps } from '@elastic/eui';
 
@@ -104,13 +104,19 @@ const ScrollableFlyoutTabbedContent = (props: EuiTabbedContentProps) => (
   </StyledFlexGroup>
 );
 
-const tabPaddingClassName = css`
-  padding: 0 ${euiThemeVars.euiSizeM} ${euiThemeVars.euiSizeXL} ${euiThemeVars.euiSizeM};
-`;
+export const TabContentPadding: FC<PropsWithChildren<unknown>> = ({ children }) => {
+  const { euiTheme } = useEuiTheme();
 
-export const TabContentPadding: FC<PropsWithChildren<unknown>> = ({ children }) => (
-  <div className={tabPaddingClassName}>{children}</div>
-);
+  return (
+    <div
+      css={css`
+        padding: 0 ${euiTheme.size.m} ${euiTheme.size.xl} ${euiTheme.size.m};
+      `}
+    >
+      {children}
+    </div>
+  );
+};
 
 interface RuleDetailsFlyoutProps {
   rule: RuleResponse;

diff --git a/...ection_engine/rule_management_ui/components/rules_table/bulk_actions/use_bulk_actions.tsx b/...ection_engine/rule_management_ui/components/rules_table/bulk_actions/use_bulk_actions.tsx
@@ -10,7 +10,6 @@ import type { EuiContextMenuPanelDescriptor } from '@elastic/eui';
 import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiTextColor } from '@elastic/eui';
 import type { Toast } from '@kbn/core/public';
 import { toMountPoint } from '@kbn/react-kibana-mount';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React, { useCallback } from 'react';
 import { MAX_MANUAL_RULE_RUN_BULK_SIZE } from '../../../../../../common/constants';
 import type { TimeRange } from '../../../../rule_gaps/types';
@@ -470,12 +469,10 @@ export const useBulkActions = ({
             },
             {
               key: i18n.BULK_ACTION_DELETE,
-              name: (
-                <EuiTextColor
-                  color={isDeleteDisabled ? euiThemeVars.euiButtonColorDisabledText : 'danger'}
-                >
-                  {i18n.BULK_ACTION_DELETE}
-                </EuiTextColor>
+              name: isDeleteDisabled ? (
+                i18n.BULK_ACTION_DELETE
+              ) : (
+                <EuiTextColor color="danger">{i18n.BULK_ACTION_DELETE}</EuiTextColor>
               ),
               'data-test-subj': 'deleteRuleBulk',
               disabled: isDeleteDisabled,

diff --git a/...nagement_ui/components/rules_table/rules_table_filters/rule_execution_status_selector.tsx b/...nagement_ui/components/rules_table/rules_table_filters/rule_execution_status_selector.tsx
@@ -97,7 +97,7 @@ const RuleExecutionStatusSelectorComponent = ({
       repositionOnScroll
     >
       <EuiSelectable
-        aria-label={i18n.RULE_EXECTION_STATUS_FILTER}
+        aria-label={i18n.RULE_EXECUTION_STATUS_FILTER}
         options={selectableOptions}
         onChange={handleSelectableOptionsChange}
         singleSelection

diff --git a/..._solution/public/detection_engine/rule_management_ui/pages/coverage_overview/constants.ts b/..._solution/public/detection_engine/rule_management_ui/pages/coverage_overview/constants.ts
@@ -17,18 +17,6 @@ export const coverageOverviewLegendWidth = 380;
 
 export const coverageOverviewFilterWidth = 300;
 
-/**
- * Rules count -> color map
- *
- * A corresponding color is applied if rules count >= a specific threshold
- */
-export const coverageOverviewCardColorThresholds = [
-  { threshold: 10, color: '#00BFB3' },
-  { threshold: 7, color: '#00BFB399' },
-  { threshold: 3, color: '#00BFB34D' },
-  { threshold: 1, color: '#00BFB326' },
-];
-
 export const ruleActivityFilterDefaultOptions = [
   {
     label: CoverageOverviewRuleActivity.Enabled,

diff --git a/...ty_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/helpers.ts b/...ty_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/helpers.ts
@@ -10,15 +10,6 @@ import type {
   CoverageOverviewRuleActivity,
   CoverageOverviewRuleSource,
 } from '../../../../../common/api/detection_engine';
-import { coverageOverviewCardColorThresholds } from './constants';
-
-export const getCardBackgroundColor = (value: number) => {
-  for (const { threshold, color } of coverageOverviewCardColorThresholds) {
-    if (value >= threshold) {
-      return color;
-    }
-  }
-};
 
 export const extractSelected = <
   T extends CoverageOverviewRuleSource | CoverageOverviewRuleActivity

diff --git a/..._engine/rule_management_ui/pages/coverage_overview/shared_components/dashboard_legend.tsx b/..._engine/rule_management_ui/pages/coverage_overview/shared_components/dashboard_legend.tsx
@@ -14,8 +14,9 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
-import { coverageOverviewCardColorThresholds, coverageOverviewLegendWidth } from '../constants';
+import { coverageOverviewLegendWidth } from '../constants';
 import * as i18n from '../translations';
+import { useCoverageColors } from '../use_coverage_colors';
 
 const LegendLabel = ({ label, color }: { label: string; color?: string }) => (
   <EuiFacetButton
@@ -36,20 +37,22 @@ const LegendLabel = ({ label, color }: { label: string; color?: string }) => (
 );
 
 export const CoverageOverviewLegend = () => {
+  const { coverageColors } = useCoverageColors();
+
   const thresholds = useMemo(
     () =>
-      coverageOverviewCardColorThresholds.map(({ threshold, color }, index, thresholdsMap) => (
+      coverageColors.map(({ threshold, backgroundColor }, index, thresholdsMap) => (
         <LegendLabel
+          key={index}
           label={`${
             index === 0
               ? `\u003E${threshold}`
               : `${threshold}-${thresholdsMap[index - 1].threshold}`
           } ${i18n.CoverageOverviewLegendRulesLabel}`}
-          key={index}
-          color={color}
+          color={backgroundColor}
         />
       )),
-    []
+    [coverageColors]
   );
 
   return (

diff --git a/...ution/public/detection_engine/rule_management_ui/pages/coverage_overview/tactic_panel.tsx b/...ution/public/detection_engine/rule_management_ui/pages/coverage_overview/tactic_panel.tsx
@@ -5,10 +5,9 @@
  * 2.0.
  */
 
-import { EuiPanel, EuiProgress, EuiSpacer, EuiText, EuiToolTip } from '@elastic/eui';
-import { css } from '@emotion/css';
+import { EuiPanel, EuiProgress, EuiSpacer, EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import React, { memo, useMemo } from 'react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import type { CoverageOverviewMitreTactic } from '../../../rule_management/model/coverage_overview/mitre_tactic';
 import { coverageOverviewPanelWidth } from './constants';
 import * as i18n from './translations';
@@ -20,6 +19,8 @@ export interface CoverageOverviewTacticPanelProps {
 }
 
 const CoverageOverviewTacticPanelComponent = ({ tactic }: CoverageOverviewTacticPanelProps) => {
+  const { euiTheme } = useEuiTheme();
+
   const coveredTechniques = useMemo(() => getNumOfCoveredTechniques(tactic), [tactic]);
 
   const ProgressLabel = useMemo(
@@ -37,15 +38,15 @@ const CoverageOverviewTacticPanelComponent = ({ tactic }: CoverageOverviewTactic
       hasShadow={false}
       hasBorder
       paddingSize="s"
-      className={css`
-        background: ${euiThemeVars.euiColorLightestShade};
-        border-color: ${euiThemeVars.euiColorMediumShade};
+      css={css`
+        background: ${euiTheme.colors.lightestShade};
+        border-color: ${euiTheme.colors.mediumShade};
         width: ${coverageOverviewPanelWidth}px;
       `}
     >
       <EuiToolTip content={tactic.name}>
         <EuiText
-          className={css`
+          css={css`
             h4 {
               white-space: nowrap;
               overflow: hidden;

diff --git a/...on/public/detection_engine/rule_management_ui/pages/coverage_overview/technique_panel.tsx b/...on/public/detection_engine/rule_management_ui/pages/coverage_overview/technique_panel.tsx
@@ -12,8 +12,8 @@ import type { CoverageOverviewMitreTechnique } from '../../../rule_management/mo
 import { getTotalRuleCount } from '../../../rule_management/model/coverage_overview/mitre_technique';
 import { coverageOverviewPanelWidth } from './constants';
 import { useCoverageOverviewDashboardContext } from './coverage_overview_dashboard_context';
-import { getCardBackgroundColor } from './helpers';
 import { CoverageOverviewPanelRuleStats } from './shared_components/panel_rule_stats';
+import { useCoverageColors } from './use_coverage_colors';
 import * as i18n from './translations';
 
 export interface CoverageOverviewMitreTechniquePanelProps {
@@ -34,11 +34,11 @@ const CoverageOverviewMitreTechniquePanelComponent = ({
   const {
     state: { filter },
   } = useCoverageOverviewDashboardContext();
+
+  const { getColorsForValue } = useCoverageColors();
+
   const totalRuleCount = getTotalRuleCount(technique, filter.activity);
-  const techniqueBackgroundColor = useMemo(
-    () => getCardBackgroundColor(totalRuleCount),
-    [totalRuleCount]
-  );
+  const techniqueColors = getColorsForValue(totalRuleCount);
 
   const handlePanelOnClick = useCallback(
     () => setIsPopoverOpen(!isPopoverOpen),
@@ -68,11 +68,12 @@ const CoverageOverviewMitreTechniquePanelComponent = ({
     <EuiPanel
       data-test-subj="coverageOverviewTechniquePanel"
       className={css`
-        background: ${techniqueBackgroundColor};
+        background: ${techniqueColors?.backgroundColor};
+        color: ${techniqueColors?.textColor};
         width: ${coverageOverviewPanelWidth}px;
       `}
       hasShadow={false}
-      hasBorder={!techniqueBackgroundColor}
+      hasBorder={!techniqueColors}
       paddingSize="s"
       onClick={handlePanelOnClick}
       element="div"

diff --git a/...ublic/detection_engine/rule_management_ui/pages/coverage_overview/use_coverage_colors.tsx b/...ublic/detection_engine/rule_management_ui/pages/coverage_overview/use_coverage_colors.tsx
@@ -0,0 +1,36 @@
+/*
+ * 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 { useMemo } from 'react';
+import { useEuiTheme } from '@elastic/eui';
+
+export function useCoverageColors() {
+  const { euiTheme } = useEuiTheme();
+
+  const coverageColors = useMemo(
+    () => [
+      { threshold: 10, backgroundColor: '#00BFB3', textColor: euiTheme.colors.textInverse },
+      { threshold: 7, backgroundColor: '#00BFB399', textColor: euiTheme.colors.textParagraph },
+      { threshold: 3, backgroundColor: '#00BFB34D', textColor: euiTheme.colors.textParagraph },
+      { threshold: 1, backgroundColor: '#00BFB326', textColor: euiTheme.colors.textParagraph },
+    ],
+    [euiTheme.colors.textInverse, euiTheme.colors.textParagraph]
+  );
+
+  const getColorsForValue = (value: number) => {
+    for (const item of coverageColors) {
+      if (value >= item.threshold) {
+        return item;
+      }
+    }
+  };
+
+  return {
+    coverageColors,
+    getColorsForValue,
+  };
+}
diff --git a/.../plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts b/.../plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts
@@ -856,7 +856,7 @@ export const MODIFIED_TOOLTIP = i18n.translate(
   }
 );
 
-export const RULE_EXECTION_STATUS_FILTER = i18n.translate(
+export const RULE_EXECUTION_STATUS_FILTER = i18n.translate(
   'xpack.securitySolution.detectionEngine.rules.allRules.filters.ruleExecutionStatusFilter',
   {
     defaultMessage: 'Select rule execution status to filter by',