feat: fill existing ExecutionInput when start new execution from ExecutionDetails tab.

Author: Zelin Zhou

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

@@ -11,6 +11,7 @@ import {
     ExecutionDetailsContext,
     ApiCallRequestMessage,
     InitResponseMessage,
+    StartExecutionMessage,
 } from '../messageHandlers/types'
 import {
     loadStageMessageHandler,
@@ -39,7 +40,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 +86,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 +101,7 @@ async function startExecutionMessageHandler(context: ExecutionDetailsContext) {
             arn: stateMachineArn,
             name: stateMachineName,
             region: region,
+            executionInput: message.executionInput,
         })
     } catch (error) {
         logger.error('Start execution failed: %O', error)

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

@@ -105,6 +105,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/utils.ts

@@ -177,19 +177,21 @@ export const openWorkflowStudioWithDefinition = async (
  * 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
+ * @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
+    executionInput?: string
 }) => {
     const Panel = VueWebview.compilePanel(ExecuteStateMachineWebview)
     const wv = new Panel(globals.context, globals.outputChannel, {
         arn: stateMachineData.arn,
         name: stateMachineData.name,
         region: stateMachineData.region,
+        executionInput: stateMachineData.executionInput,
     })
 
     await wv.show({

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

@@ -22,6 +22,7 @@ interface StateMachine {
     arn: string
     name: string
     region: string
+    executionInput?: string
 }
 
 export class ExecuteStateMachineWebview extends VueWebview {
@@ -89,11 +90,16 @@ export class ExecuteStateMachineWebview extends VueWebview {
     }
 }
 
-export async function executeStateMachine(context: ExtContext, node: StateMachineNode): Promise<void> {
+export async function executeStateMachine(
+    context: ExtContext,
+    node: StateMachineNode,
+    executionInput?: string
+): Promise<void> {
     await showExecuteStateMachineWebview({
         arn: node.details.stateMachineArn || '',
         name: node.details.name || '',
         region: node.regionCode,
+        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 || '{}')
         },