Improve types (hopefully)

acstll · acstll · commit ba7ec4f18ee1 · 2025-04-29T14:48:57.000+02:00
diff --git a/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx b/x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions/layer_actions.tsx
@@ -20,7 +20,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiToolTip,
-  EuiButtonIconProps,
 } from '@elastic/eui';
 import type { CoreStart } from '@kbn/core/public';
 import { css } from '@emotion/react';
@@ -63,25 +62,25 @@ export const getSharedActions = ({
   core: Pick<CoreStart, 'overlays' | 'analytics' | 'i18n' | 'theme' | 'userProfile'>;
   customRemoveModalText?: { title?: string; description?: string };
 }) => [
-  getOpenLayerSettingsAction({
-    hasLayerSettings,
-    openLayerSettings,
-  }),
-  getCloneLayerAction({
-    execute: onCloneLayer,
-    layerIndex,
-    activeVisualization,
-    isTextBasedLanguage,
-  }),
-  getRemoveLayerAction({
-    execute: onRemoveLayer,
-    layerIndex,
-    layerType,
-    isOnlyLayer,
-    core,
-    customModalText: customRemoveModalText,
-  }),
-];
+    getOpenLayerSettingsAction({
+      hasLayerSettings,
+      openLayerSettings,
+    }),
+    getCloneLayerAction({
+      execute: onCloneLayer,
+      layerIndex,
+      activeVisualization,
+      isTextBasedLanguage,
+    }),
+    getRemoveLayerAction({
+      execute: onRemoveLayer,
+      layerIndex,
+      layerType,
+      isOnlyLayer,
+      core,
+      customModalText: customRemoveModalText,
+    }),
+  ];
 
 /** @internal **/
 const InContextMenuActions = (props: LayerActionsProps) => {
@@ -102,6 +101,16 @@ const InContextMenuActions = (props: LayerActionsProps) => {
     }
   }, [isPopoverOpen]);
 
+  // `neutral` and `risk` variants belong to `severity` so they're not
+  // available in `euiTheme.colors` directly
+  const getColorFromTheme = useCallback(
+    (color: LayerAction['color']) =>
+      color === 'risk' || color === 'neutral'
+        ? euiTheme.colors.severity[color]
+        : euiTheme.colors[color!],
+    [euiTheme]
+  );
+
   return (
     <EuiOutsideClickDetector onOutsideClick={closePopover}>
       <EuiPopover
@@ -144,16 +153,14 @@ const InContextMenuActions = (props: LayerActionsProps) => {
               }}
               {...(i.color
                 ? {
-                    css: css`
-                      color: ${euiTheme.colors[i.color as keyof EuiButtonIconProps['color']]};
+                  css: css`
+                      color: ${getColorFromTheme(i.color)};
                       &:hover {
-                        text-decoration-color: ${euiTheme.colors[
-                          i.color as keyof EuiButtonIconProps['color']
-                        ]} !important;
+                        text-decoration-color: ${getColorFromTheme(i.color)} !important;
                       }
                     `,
-                    size: 's', // need to be explicit here as css prop will disable the default small size
-                  }
+                  size: 's', // need to be explicit here as css prop will disable the default small size
+                }
                 : {})}
             >
               <EuiText size={'s'} color={i.color}>
diff --git a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/components/rca/rca_panel/index.tsx
@@ -5,17 +5,12 @@
  * 2.0.
  */
 
-import { EuiPanel, UseEuiTheme } from '@elastic/eui';
+import { EuiPanel } from '@elastic/eui';
 import { css } from '@emotion/css';
 import { rgba } from 'polished';
 import React from 'react';
 import { useTheme } from '../../../hooks/use_theme';
 
-type EuiBackgroundColor = Pick<
-  UseEuiTheme['euiTheme']['colors'],
-  'accent' | 'accentSecondary' | 'primary' | 'success' | 'warning' | 'danger'
->;
-
 export function RootCauseAnalysisPanel({
   children,
   color,
@@ -25,15 +20,16 @@ export function RootCauseAnalysisPanel({
 }) {
   const theme = useTheme();
 
+  const isSeverityColor = color === 'risk' || color === 'neutral';
   const panelClassName =
     color &&
-    color !== 'transparent' &&
-    color !== 'plain' &&
-    color !== 'subdued' &&
-    color !== 'highlighted'
+      color !== 'transparent' &&
+      color !== 'plain' &&
+      color !== 'subdued' &&
+      color !== 'highlighted'
       ? css`
           border: 1px solid;
-          border-color: ${rgba(theme.colors[color as keyof EuiBackgroundColor], 0.25)};
+          border-color: ${rgba(isSeverityColor ? theme.colors.severity[color] : theme.colors[color], 0.25)};
         `
       : undefined;
 
