[Security Solution] Prepare Rule Management owned pages for Borealis

x-pack/solutions/security/plugins/security_solution/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;

x-pack/solutions/security/plugins/security_solution/public/detection_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,

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_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

x-pack/solutions/security/plugins/security_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,

x-pack/solutions/security/plugins/security_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

x-pack/solutions/security/plugins/security_solution/public/detection_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 (

x-pack/solutions/security/plugins/security_solution/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;

x-pack/solutions/security/plugins/security_solution/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"

x-pack/solutions/security/plugins/security_solution/public/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,
+  };
+}

x-pack/solutions/security/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',