feat(stepfunctions): Start Execution fills existing ExecutionInput (#8147)

## Problem

1. We should auto fill the existing ExecutionInput when start a new
execution in ExecutionDetails tab.
2. Circular dependencies exists in the StepFunctions extension logic, we
need to fix those circular dependency in order for the build to pass.


## Solution

1. Allow the CDN bundle to pass back the ExecutionInput when invoking
`startExecutionMessageHandler` and added ExecutionInput parameter to
`executeStateMachine` command.
2. The circular dependencies were caused by a chain:
`ExecutionDetailProvider` → `handleMessage` → `utils` →
`executeStateMachine` → `ExecutionDetailProvider`. Separating `utils.ts`
into two files broke part of the cycle by removing webview functions
from the utils that `handleMessage` needed. However, a direct cycle
remained between `executeStateMachine` and `ExecutionDetailProvider` and
we cannot break this cycle by separating the utils, we introduced a
callback to openExecutionDetails in `handleMessage` ->
`executeStateMachine` so that we don't need to static import
`ExecutionDetailProvider` anymore.

## Demo

![StartExecutionFills](https://github.com/user-attachments/assets/2177bfd5-579a-4b0b-ae73-923246e8fbf8)

---

- Treat all work as PUBLIC. Private `feature/x` branches will not be
squash-merged at release time.
- Your code changes must meet the guidelines in
[CONTRIBUTING.md](https://github.com/aws/aws-toolkit-vscode/blob/master/CONTRIBUTING.md#guidelines).
- License: I confirm that my contribution is made under the terms of the
Apache 2.0 license.

---------

Co-authored-by: Zelin Zhou <[email protected]>
Co-authored-by: Laxman Reddy <[email protected]>

Author: 3 people

packages/core/src/awsexplorer/activation.ts

@@ -37,6 +37,7 @@ import { getSourceNode } from '../shared/utilities/treeNodeUtils'
 import { openAwsCFNConsoleCommand, openAwsConsoleCommand } from '../shared/awsConsole'
 import { StackNameNode } from '../awsService/appBuilder/explorer/nodes/deployedStack'
 import { LambdaFunctionNodeDecorationProvider } from '../lambda/explorer/lambdaFunctionNodeDecorationProvider'
+import { ExecutionDetailProvider } from '../stepFunctions/executionDetails/executionDetailProvider'
 
 /**
  * Activates the AWS Explorer UI and related functionality.
@@ -192,7 +193,12 @@ async function registerAwsExplorerCommands(
     context.extensionContext.subscriptions.push(
         Commands.register(
             'aws.executeStateMachine',
-            async (node: StateMachineNode) => await executeStateMachine(context, node)
+            async (node: StateMachineNode) =>
+                await executeStateMachine(
+                    context,
+                    node,
+                    ExecutionDetailProvider.openExecutionDetails.bind(ExecutionDetailProvider)
+                )
         ),
         Commands.register('aws.copyArn', async (node: AWSResourceNode | TreeNode) => {
             const sourceNode = getSourceNode<AWSResourceNode>(node)

packages/core/src/stepFunctions/commands/downloadStateMachineDefinition.ts

@@ -17,7 +17,7 @@ import { Result } from '../../shared/telemetry/telemetry'
 import { StateMachineNode } from '../explorer/stepFunctionsNodes'
 import { telemetry } from '../../shared/telemetry/telemetry'
 import { fs } from '../../shared/fs/fs'
-import { openWorkflowStudioWithDefinition } from '../utils'
+import { openWorkflowStudioWithDefinition } from '../stepFunctionsWorkflowStudioUtils'
 
 export async function downloadStateMachineDefinition(params: {
     outputChannel: vscode.OutputChannel

packages/core/src/stepFunctions/executionDetails/executionDetailProvider.ts

@@ -115,6 +115,7 @@ export class ExecutionDetailProvider {
                 loaderNotification: undefined,
                 executionArn,
                 startTime,
+                openExecutionDetails: ExecutionDetailProvider.openExecutionDetails.bind(ExecutionDetailProvider),
             }
 
             // Handle messages from the webview

packages/core/src/stepFunctions/executionDetails/handleMessage.ts

@@ -11,14 +11,17 @@ import {
     ExecutionDetailsContext,
     ApiCallRequestMessage,
     InitResponseMessage,
+    StartExecutionMessage,
 } from '../messageHandlers/types'
 import {
     loadStageMessageHandler,
     handleUnsupportedMessage,
     apiCallMessageHandler,
 } from '../messageHandlers/handleMessageHelpers'
-import { parseExecutionArnForStateMachine, openWorkflowStudio, showExecuteStateMachineWebview } from '../utils'
+import { parseExecutionArnForStateMachine } from '../utils'
 import { getLogger } from '../../shared/logger/logger'
+import { openWorkflowStudio } from '../stepFunctionsWorkflowStudioUtils'
+import { showExecuteStateMachineWebview } from '../vue/executeStateMachine/executeStateMachine'
 
 /**
  * Handles messages received from the ExecutionDetails webview. Depending on the message type and command,
@@ -39,7 +42,7 @@ export async function handleMessage(message: Message, context: ExecutionDetailsC
                 break
             }
             case Command.START_EXECUTION:
-                void startExecutionMessageHandler(context)
+                void startExecutionMessageHandler(message as StartExecutionMessage, context)
                 break
             case Command.EDIT_STATE_MACHINE:
                 void editStateMachineMessageHandler(context)
@@ -85,7 +88,7 @@ async function initMessageHandler(context: ExecutionDetailsContext) {
     }
 }
 
-async function startExecutionMessageHandler(context: ExecutionDetailsContext) {
+async function startExecutionMessageHandler(message: StartExecutionMessage, context: ExecutionDetailsContext) {
     const logger = getLogger('stepfunctions')
     try {
         // Parsing execution ARN to get state machine info
@@ -100,6 +103,8 @@ async function startExecutionMessageHandler(context: ExecutionDetailsContext) {
             arn: stateMachineArn,
             name: stateMachineName,
             region: region,
+            openExecutionDetails: context.openExecutionDetails,
+            executionInput: message.executionInput,
         })
     } catch (error) {
         logger.error('Start execution failed: %O', error)

packages/core/src/stepFunctions/messageHandlers/types.ts

@@ -35,9 +35,16 @@ export interface WebviewContext extends BaseContext {
     fileId: string
 }
 
+export type OpenExecutionDetailsCallBack = (
+    executionArn: string,
+    startTime?: string,
+    params?: vscode.WebviewPanelOptions & vscode.WebviewOptions
+) => Promise<void>
+
 export interface ExecutionDetailsContext extends BaseContext {
     executionArn: string
     startTime?: string
+    openExecutionDetails: OpenExecutionDetailsCallBack
 }
 
 export type LoaderNotification = {
@@ -105,6 +112,10 @@ export interface SyncFileRequestMessage extends SaveFileRequestMessage {
     fileContents: string
 }
 
+export interface StartExecutionMessage extends Message {
+    executionInput?: string
+}
+
 export enum ApiAction {
     IAMListRoles = 'iam:ListRoles',
     SFNTestState = 'sfn:TestState',

packages/core/src/stepFunctions/stepFunctionsWorkflowStudioUtils.ts

@@ -0,0 +1,47 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as StepFunctions from '@aws-sdk/client-sfn'
+import * as vscode from 'vscode'
+import { StepFunctionsClient } from '../shared/clients/stepFunctions'
+import { WorkflowStudioEditorProvider } from './workflowStudio/workflowStudioEditorProvider'
+
+/**
+ * Opens a state machine definition in Workflow Studio
+ * @param stateMachineArn The ARN of the state machine
+ * @param region The AWS region
+ */
+export const openWorkflowStudio = async (stateMachineArn: string, region: string) => {
+    const client: StepFunctionsClient = new StepFunctionsClient(region)
+    const stateMachineDetails: StepFunctions.DescribeStateMachineCommandOutput = await client.getStateMachineDetails({
+        stateMachineArn,
+    })
+
+    await openWorkflowStudioWithDefinition(stateMachineDetails.definition)
+}
+
+/**
+ * Opens a state machine definition in Workflow Studio using pre-fetched definition content
+ * @param definition The state machine definition content
+ * @param options Optional webview configuration options
+ */
+export const openWorkflowStudioWithDefinition = async (
+    definition: string | undefined,
+    options?: {
+        preserveFocus?: boolean
+        viewColumn?: vscode.ViewColumn
+    }
+) => {
+    const doc = await vscode.workspace.openTextDocument({
+        language: 'asl',
+        content: definition,
+    })
+
+    const textEditor = await vscode.window.showTextDocument(doc)
+    await WorkflowStudioEditorProvider.openWithWorkflowStudio(textEditor.document.uri, {
+        preserveFocus: options?.preserveFocus ?? false,
+        viewColumn: options?.viewColumn ?? vscode.ViewColumn.One,
+    })
+}

packages/core/src/stepFunctions/utils.ts

@@ -17,10 +17,6 @@ import {
 } from 'amazon-states-language-service'
 import { fromExtensionManifest } from '../shared/settings'
 import { IamRole } from '../shared/clients/iam'
-import { WorkflowStudioEditorProvider } from './workflowStudio/workflowStudioEditorProvider'
-import { VueWebview } from '../webviews/main'
-import { ExecuteStateMachineWebview } from './vue/executeStateMachine/executeStateMachine'
-import globals from '../shared/extensionGlobals'
 
 const documentSettings: DocumentLanguageSettings = { comments: 'error', trailingCommas: 'error' }
 const languageService = getLanguageService({})
@@ -135,71 +131,6 @@ export const parseExecutionArnForStateMachine = (executionArn: string) => {
     }
 }
 
-/**
- * Opens a state machine definition in Workflow Studio
- * @param stateMachineArn The ARN of the state machine
- * @param region The AWS region
- */
-export const openWorkflowStudio = async (stateMachineArn: string, region: string) => {
-    const client: StepFunctionsClient = new StepFunctionsClient(region)
-    const stateMachineDetails: StepFunctions.DescribeStateMachineCommandOutput = await client.getStateMachineDetails({
-        stateMachineArn,
-    })
-
-    await openWorkflowStudioWithDefinition(stateMachineDetails.definition)
-}
-
-/**
- * Opens a state machine definition in Workflow Studio using pre-fetched definition content
- * @param definition The state machine definition content
- * @param options Optional webview configuration options
- */
-export const openWorkflowStudioWithDefinition = async (
-    definition: string | undefined,
-    options?: {
-        preserveFocus?: boolean
-        viewColumn?: vscode.ViewColumn
-    }
-) => {
-    const doc = await vscode.workspace.openTextDocument({
-        language: 'asl',
-        content: definition,
-    })
-
-    const textEditor = await vscode.window.showTextDocument(doc)
-    await WorkflowStudioEditorProvider.openWithWorkflowStudio(textEditor.document.uri, {
-        preserveFocus: options?.preserveFocus ?? false,
-        viewColumn: options?.viewColumn ?? vscode.ViewColumn.One,
-    })
-}
-
-/**
- * Shows the Execute State Machine webview with the provided state machine data
- * @param extensionContext The extension context
- * @param outputChannel The output channel for logging
- * @param stateMachineData Object containing arn, name, and region of the state machine
- * @returns The webview instance
- */
-export const showExecuteStateMachineWebview = async (stateMachineData: {
-    arn: string
-    name: string
-    region: string
-}) => {
-    const Panel = VueWebview.compilePanel(ExecuteStateMachineWebview)
-    const wv = new Panel(globals.context, globals.outputChannel, {
-        arn: stateMachineData.arn,
-        name: stateMachineData.name,
-        region: stateMachineData.region,
-    })
-
-    await wv.show({
-        title: localize('AWS.executeStateMachine.title', 'Start Execution'),
-        cssFiles: ['executeStateMachine.css'],
-    })
-
-    return wv
-}
-
 const isInvalidJson = (content: string): boolean => {
     try {
         JSON.parse(content)

packages/core/src/stepFunctions/vue/executeStateMachine/executeStateMachine.ts

@@ -15,13 +15,15 @@ import { ExtContext } from '../../../shared/extensions'
 import { VueWebview } from '../../../webviews/main'
 import * as vscode from 'vscode'
 import { telemetry } from '../../../shared/telemetry/telemetry'
-import { ExecutionDetailProvider } from '../../executionDetails/executionDetailProvider'
-import { showExecuteStateMachineWebview } from '../../utils'
+import globals from '../../../shared/extensionGlobals'
+import { OpenExecutionDetailsCallBack } from '../../messageHandlers/types'
 
 interface StateMachine {
     arn: string
     name: string
     region: string
+    openExecutionDetails: OpenExecutionDetailsCallBack
+    executionInput?: string
 }
 
 export class ExecuteStateMachineWebview extends VueWebview {
@@ -63,7 +65,7 @@ export class ExecuteStateMachineWebview extends VueWebview {
                 stateMachineArn: this.stateMachine.arn,
                 input,
             })
-            await ExecutionDetailProvider.openExecutionDetails(
+            await this.stateMachine.openExecutionDetails(
                 startExecResponse.executionArn!,
                 startExecResponse.startDate!.toString()
             )
@@ -89,11 +91,49 @@ export class ExecuteStateMachineWebview extends VueWebview {
     }
 }
 
-export async function executeStateMachine(context: ExtContext, node: StateMachineNode): Promise<void> {
+/**
+ * Shows the Execute State Machine webview with the provided state machine data
+ * @param extensionContext The extension context
+ * @param outputChannel The output channel for logging
+ * @param stateMachineData Object containing arn, name, region, and optional executionInput of the state machine
+ * @returns The webview instance
+ */
+export const showExecuteStateMachineWebview = async (stateMachineData: {
+    arn: string
+    name: string
+    region: string
+    openExecutionDetails: OpenExecutionDetailsCallBack
+    executionInput?: string
+}) => {
+    const Panel = VueWebview.compilePanel(ExecuteStateMachineWebview)
+    const wv = new Panel(globals.context, globals.outputChannel, {
+        arn: stateMachineData.arn,
+        name: stateMachineData.name,
+        region: stateMachineData.region,
+        openExecutionDetails: stateMachineData.openExecutionDetails,
+        executionInput: stateMachineData.executionInput,
+    })
+
+    await wv.show({
+        title: localize('AWS.executeStateMachine.title', 'Start Execution'),
+        cssFiles: ['executeStateMachine.css'],
+    })
+
+    return wv
+}
+
+export async function executeStateMachine(
+    context: ExtContext,
+    node: StateMachineNode,
+    openExecutionDetails: OpenExecutionDetailsCallBack,
+    executionInput?: string
+): Promise<void> {
     await showExecuteStateMachineWebview({
         arn: node.details.stateMachineArn || '',
         name: node.details.name || '',
         region: node.regionCode,
+        openExecutionDetails,
+        executionInput,
     })
     telemetry.stepfunctions_executeStateMachineView.emit()
 }

packages/core/src/stepFunctions/vue/executeStateMachine/executeStateMachine.vue

@@ -55,11 +55,15 @@ const defaultInitialData = {
     name: '',
     region: '',
     arn: '',
+    executionInput: '',
 }
 
 export default defineComponent({
     async created() {
         this.initialData = (await client.init()) ?? this.initialData
+        if (this.initialData.executionInput) {
+            this.executionInput = this.formatJson(this.initialData.executionInput)
+        }
     },
     data: () => ({
         initialData: defaultInitialData,
@@ -89,7 +93,9 @@ export default defineComponent({
                     break
                 case 'textarea':
                     this.placeholderJson = defaultJsonPlaceholder
-                    this.executionInput = ''
+                    if (!this.initialData.executionInput) {
+                        this.executionInput = ''
+                    }
                     this.fileInputVisible = false
                     break
             }
@@ -104,7 +110,7 @@ export default defineComponent({
                 reader.onload = (event) => {
                     if (event.target) {
                         const result = event.target.result
-                        this.executionInput = result as string
+                        this.executionInput = this.formatJson(result as string)
                     }
                 } // desired file content
                 reader.onerror = (error) => {
@@ -115,6 +121,15 @@ export default defineComponent({
                 this.textAreaVisible = true
             }
         },
+        formatJson: function (jsonString: string): string {
+            try {
+                const parsed = JSON.parse(jsonString)
+                return JSON.stringify(parsed, null, 2)
+            } catch (error) {
+                console.warn('Failed to format JSON:', error)
+                return jsonString
+            }
+        },
         sendInput: function () {
             client.executeStateMachine(this.executionInput || '{}')
         },