[One Workflow] UI/UX Design Alignment - Historical (elastic#241978)

## Summary

issue: elastic/security-team#14392

White background in the editor when we are in _Executions_ tab.

<img width="987" height="346" alt="Captura de pantalla 2025-11-05 a les
14 28 22"
src="https://github.com/user-attachments/assets/f9f3e616-0425-4828-a02b-68a568f36727"
/>

Fixed execution history item clickable area:

<img width="502" height="346" alt="Captura de pantalla 2025-11-05 a les
14 30 35"
src="https://github.com/user-attachments/assets/3da3ea01-c273-4378-9a2b-157e0299bfd5"
/>

Author: semd

src/platform/plugins/shared/workflows_management/public/features/workflow_execution_list/ui/workflow_execution_list_item.tsx

@@ -66,14 +66,12 @@ export const WorkflowExecutionListItem = React.memo<WorkflowExecutionListItemPro
     }, [selected, onClick, styles]);
 
     return (
-      <EuiPanel color="plain" hasShadow={false} paddingSize="m" hasBorder css={panelCss}>
+      <EuiPanel onClick={onClick} hasShadow={false} paddingSize="m" hasBorder css={panelCss}>
         <EuiFlexGroup
           gutterSize="m"
           alignItems="center"
           justifyContent="flexStart"
-          onClick={onClick ?? undefined}
           responsive={false}
-          color="plain"
         >
           <EuiFlexItem grow={false}>{getExecutionStatusIcon(euiTheme, status)}</EuiFlexItem>
           <EuiFlexItem>
@@ -132,10 +130,11 @@ const componentStyles = {
     }),
   selectableContainer: ({ euiTheme }: UseEuiTheme) =>
     css({
-      backgroundColor: euiTheme.colors.backgroundBasePlain,
-      cursor: 'pointer',
       '&:hover': {
         backgroundColor: euiTheme.colors.backgroundBaseInteractiveHover,
+        // Prevent hover animation effect from affecting the panel
+        boxShadow: 'none',
+        transform: 'none',
       },
     }),
 };

src/platform/plugins/shared/workflows_management/public/shared/ui/json_data_view/json_editor_common.tsx

@@ -7,20 +7,14 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import {
-  EuiButtonEmpty,
-  EuiCopy,
-  EuiFlexGroup,
-  EuiFlexItem,
-  type UseEuiTheme,
-  useEuiTheme,
-} from '@elastic/eui';
+import { EuiButtonEmpty, EuiCopy, EuiFlexGroup, EuiFlexItem, type UseEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { CodeEditor } from '@kbn/code-editor';
 import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import { i18n } from '@kbn/i18n';
-import { monaco } from '@kbn/monaco';
+import type { monaco } from '@kbn/monaco';
+import { WORKFLOWS_MONACO_EDITOR_THEME } from '../../../widgets/workflow_yaml_editor/styles/use_workflows_monaco_theme';
 
 const codeEditorAriaLabel = i18n.translate('workflows.jsonDataView.codeEditorAriaLabel', {
   defaultMessage: 'Read only JSON view',
@@ -49,18 +43,6 @@ export const JsonCodeEditorCommon = ({
   enableFindAction,
 }: JsonCodeEditorCommonProps) => {
   const styles = useMemoCss(componentStyles);
-  const { euiTheme } = useEuiTheme();
-  useEffect(() => {
-    monaco.editor.defineTheme('workflows-subdued', {
-      base: 'vs',
-      inherit: true,
-      rules: [],
-      colors: {
-        'editor.background': euiTheme.colors.backgroundBaseSubdued,
-      },
-    });
-  }, [euiTheme]);
-
   if (jsonValue === '') {
     return null;
   }
@@ -74,7 +56,8 @@ export const JsonCodeEditorCommon = ({
       editorDidMount={onEditorDidMount}
       aria-label={codeEditorAriaLabel}
       options={{
-        theme: 'workflows-subdued',
+        // Limitation: it's not possible to use different themes for different code editors in the same page, so the same theme as the workflow yaml editor is used.
+        theme: WORKFLOWS_MONACO_EDITOR_THEME,
         automaticLayout: true,
         fontSize: 12,
         // prevent line numbers margin from being too wide

src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/styles/use_workflow_editor_styles.ts

@@ -12,6 +12,8 @@ import { transparentize } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 
+export const EXECUTION_YAML_SNAPSHOT_CLASS = 'execution-yaml-snapshot';
+
 /**
  * Hook that provides memoized CSS styles for the workflow YAML editor component
  */
@@ -144,12 +146,17 @@ export const useWorkflowEditorStyles = () => {
         },
       }),
 
-    editorContainer: css({
-      flex: '1 1 0',
-      minWidth: 0,
-      overflowY: 'auto',
-      minHeight: 0,
-    }),
+    editorContainer: ({ euiTheme }: UseEuiTheme) =>
+      css({
+        flex: '1 1 0',
+        minWidth: 0,
+        overflowY: 'auto',
+        minHeight: 0,
+        backgroundColor: euiTheme.colors.backgroundBaseSubdued,
+        [`&.${EXECUTION_YAML_SNAPSHOT_CLASS}`]: {
+          backgroundColor: euiTheme.colors.backgroundBasePlain,
+        },
+      }),
 
     validationErrorsContainer: css({
       flexShrink: 0,

src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/styles/use_workflows_monaco_theme.ts

@@ -12,17 +12,18 @@ import { useEffect } from 'react';
 
 import { monaco } from '@kbn/monaco';
 
+export const WORKFLOWS_MONACO_EDITOR_THEME = 'workflows-theme';
+
 export function useWorkflowsMonacoTheme() {
   const { euiTheme } = useEuiTheme();
   useEffect(() => {
-    monaco.editor.defineTheme('workflows-subdued', {
+    monaco.editor.defineTheme(WORKFLOWS_MONACO_EDITOR_THEME, {
       base: 'vs',
       inherit: true,
       rules: [],
       colors: {
         'list.hoverForeground': euiTheme.colors.textPrimary,
         'list.hoverBackground': euiTheme.colors.backgroundBaseInteractiveSelect,
-        'editor.background': euiTheme.colors.backgroundBaseSubdued,
         'editorSuggestWidget.foreground': euiTheme.colors.textParagraph,
         'editorSuggestWidget.background': euiTheme.colors.backgroundBasePlain,
         'editorSuggestWidget.selectedForeground': euiTheme.colors.textPrimary,
@@ -36,6 +37,10 @@ export function useWorkflowsMonacoTheme() {
         'editorLineNumber.activeForeground': euiTheme.colors.textSubdued,
         'editorIndentGuide.background1': euiTheme.colors.backgroundLightText,
         'editorIndentGuide.activeBackground1': euiTheme.colors.borderBaseDisabled,
+        // Transparent backgrounds, they are set by the styles of the editor container behind.
+        'editor.background': '#00000000',
+        'editorGutter.background': '#00000000',
+        'minimap.background': '#00000000',
       },
     });
   }, [euiTheme]);

src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/ui/workflow_yaml_editor.tsx

@@ -11,6 +11,7 @@
 
 import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
+import classnames from 'classnames';
 import type { SchemasSettings } from 'monaco-yaml';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -70,8 +71,14 @@ import { useRegisterKeyboardCommands } from '../lib/use_register_keyboard_comman
 import { navigateToErrorPosition } from '../lib/utils';
 import { GlobalWorkflowEditorStyles } from '../styles/global_workflow_editor_styles';
 import { useDynamicTypeIcons } from '../styles/use_dynamic_type_icons';
-import { useWorkflowEditorStyles } from '../styles/use_workflow_editor_styles';
-import { useWorkflowsMonacoTheme } from '../styles/use_workflows_monaco_theme';
+import {
+  EXECUTION_YAML_SNAPSHOT_CLASS,
+  useWorkflowEditorStyles,
+} from '../styles/use_workflow_editor_styles';
+import {
+  useWorkflowsMonacoTheme,
+  WORKFLOWS_MONACO_EDITOR_THEME,
+} from '../styles/use_workflows_monaco_theme';
 
 const editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
   minimap: { enabled: false },
@@ -88,7 +95,7 @@ const editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
   wordWrap: 'on',
   wordWrapColumn: 80,
   wrappingIndent: 'indent',
-  theme: 'workflows-subdued',
+  theme: WORKFLOWS_MONACO_EDITOR_THEME,
   padding: {
     top: 24,
     bottom: 16,
@@ -591,7 +598,10 @@ export const WorkflowYAMLEditor = ({
           </EuiFlexGroup>
         </div>
       )}
-      <div css={styles.editorContainer}>
+      <div
+        css={styles.editorContainer}
+        className={classnames({ [EXECUTION_YAML_SNAPSHOT_CLASS]: isExecutionYaml })}
+      >
         <YamlEditor
           editorDidMount={handleEditorDidMount}
           editorWillUnmount={handleEditorWillUnmount}