[One Workflow] Fix yaml document parsing for executions (#241315)

## Summary

Issue: elastic/security-team#14485

Fixes part of the problem with broken decorators in executions.

Done: Fixes the step types and triggers decorators.
Pending: Fix step highlighting.




https://github.com/user-attachments/assets/edf861ad-b715-4842-9d53-0cc794574fa5

Author: semd

src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_editor.test.tsx

@@ -42,9 +42,9 @@ jest.mock('react-redux', () => ({
 }));
 
 // Mock lazy loaded components
-const WorkflowYAMLEditorMock = ({ workflowYaml, readOnly, highlightDiff }: any) => (
+const WorkflowYAMLEditorMock = ({ workflowYaml, isExecutionYaml, highlightDiff }: any) => (
   <div data-test-subj="workflow-yaml-editor">
-    {readOnly && <span data-test-subj="read-only-indicator">{'Read Only'}</span>}
+    {isExecutionYaml && <span data-test-subj="read-only-indicator">{'Read Only'}</span>}
     {highlightDiff && <span data-test-subj="highlight-diff-indicator">{'Highlight Diff'}</span>}
     <div data-test-subj="yaml-content">{workflowYaml || 'No YAML'}</div>
   </div>

src/platform/plugins/shared/workflows_management/public/pages/workflow_detail/ui/workflow_detail_editor.tsx

@@ -124,7 +124,7 @@ export const WorkflowDetailEditor = React.memo<WorkflowDetailEditorProps>(({ hig
             <WorkflowYAMLEditor
               stepExecutions={execution?.stepExecutions}
               workflowYaml={overrideYamlValue ?? workflowYaml}
-              readOnly={activeTab === 'executions'}
+              isExecutionYaml={activeTab === 'executions'}
               highlightDiff={highlightDiff}
               selectedExecutionId={selectedExecutionId}
               onStepActionClicked={handleStepRun}

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

@@ -86,21 +86,21 @@ type Story = StoryObj<typeof WorkflowYAMLEditor>;
 export const Default: Story = {
   args: {
     workflowYaml,
-    readOnly: false,
+    isExecutionYaml: false,
   },
 };
 
 export const ReadOnly: Story = {
   args: {
     workflowYaml,
-    readOnly: true,
+    isExecutionYaml: true,
   },
 };
 
 export const WithStepExecutions: Story = {
   args: {
     workflowYaml,
-    readOnly: false,
+    isExecutionYaml: false,
     stepExecutions: [
       {
         stepId: 'analysis',

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

@@ -231,16 +231,20 @@ steps:
         <WorkflowYAMLEditor
           {...defaultProps}
           workflowYaml={yamlWithAlertTrigger}
-          readOnly={false}
+          isExecutionYaml={false}
         />
       );
 
       expect(document.querySelector('[data-testid="yaml-editor"]')).toBeInTheDocument();
     });
 
-    it('renders in readOnly mode', () => {
+    it('renders in readOnly mode when isExecutionYaml is true', () => {
       renderWithProviders(
-        <WorkflowYAMLEditor {...defaultProps} workflowYaml={yamlWithAlertTrigger} readOnly={true} />
+        <WorkflowYAMLEditor
+          {...defaultProps}
+          workflowYaml={yamlWithAlertTrigger}
+          isExecutionYaml={true}
+        />
       );
 
       expect(document.querySelector('[data-testid="yaml-editor"]')).toBeInTheDocument();
@@ -262,7 +266,11 @@ steps:
       // Should not throw an error
       expect(() => {
         renderWithProviders(
-          <WorkflowYAMLEditor {...defaultProps} workflowYaml={invalidYaml} readOnly={false} />
+          <WorkflowYAMLEditor
+            {...defaultProps}
+            workflowYaml={invalidYaml}
+            isExecutionYaml={false}
+          />
         );
       }).not.toThrow();
 

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

@@ -14,7 +14,7 @@ import { css } from '@emotion/react';
 import type { SchemasSettings } from 'monaco-yaml';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import type YAML from 'yaml';
+import YAML from 'yaml';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { monaco } from '@kbn/monaco';
 import { isTriggerType } from '@kbn/workflows';
@@ -116,7 +116,7 @@ const editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
 
 export interface WorkflowYAMLEditorProps {
   workflowYaml: string;
-  readOnly?: boolean;
+  isExecutionYaml?: boolean;
   stepExecutions?: WorkflowStepExecutionDto[];
   'data-testid'?: string;
   highlightDiff?: boolean;
@@ -130,7 +130,7 @@ export interface WorkflowYAMLEditorProps {
 
 export const WorkflowYAMLEditor = ({
   workflowYaml,
-  readOnly = false,
+  isExecutionYaml = false,
   stepExecutions,
   highlightDiff = false,
   onMount,
@@ -174,9 +174,19 @@ export const WorkflowYAMLEditor = ({
   // Refs / Disposables for Monaco providers
   const disposablesRef = useRef<monaco.IDisposable[]>([]);
   const focusedStepInfo = useSelector(selectFocusedStepInfo);
-  const yamlDocument = useSelector(selectYamlDocument);
   const workflowYamlSchemaLoose = useSelector(selectSchemaLoose);
-  const yamlDocumentRef = useRef<YAML.Document | null>(null);
+  // The current yaml document in the editor (could be unsaved)
+  const currentYamlDocument = useSelector(selectYamlDocument);
+
+  const yamlDocument = useMemo(() => {
+    // if the yaml comes from an execution, we need to parse it to get the correct yaml document
+    if (isExecutionYaml) {
+      return YAML.parseDocument(workflowYaml, { keepSourceTokens: true });
+    }
+    return currentYamlDocument;
+  }, [isExecutionYaml, workflowYaml, currentYamlDocument]);
+
+  const yamlDocumentRef = useRef<YAML.Document | null>(yamlDocument ?? null);
   yamlDocumentRef.current = yamlDocument || null;
 
   const focusedStepInfoRef = useRef<StepInfo | undefined>(focusedStepInfo);
@@ -416,7 +426,7 @@ export const WorkflowYAMLEditor = ({
     editor: editorRef.current,
     yamlDocument: yamlDocument || null,
     isEditorMounted,
-    readOnly,
+    readOnly: isExecutionYaml,
   });
 
   const updateContainerPosition = (
@@ -486,8 +496,8 @@ export const WorkflowYAMLEditor = ({
   const completionProvider = useCompletionProvider();
 
   const options = useMemo(() => {
-    return { ...editorOptions, readOnly };
-  }, [readOnly]);
+    return { ...editorOptions, readOnly: isExecutionYaml };
+  }, [isExecutionYaml]);
 
   useEffect(() => {
     // Monkey patching