feat(stepfunctions): Enabling text box input to accept Execution ARNs (#7625)

l0minous · Diler Zaza · web-flow · commit 3d636967ef90 · 2025-07-10T10:36:09.000-07:00
## Problem `View Execution Details by Execution ARN` command currently works only as a button that opens a hardcoded execution ARN ## Solution Modifying `View Execution Details by Execution ARN` command to now prompt the user to input an Execution ARN which gets passed to `ExecutionDetailProvider`. Invalid ARNs open a webview displaying `The execution ARN is invalid.` ## Verification ![test5](https://github.com/user-attachments/assets/c24490fb-e9d8-4269-8885-9399989ad359) --- - 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: Diler Zaza <zazadile@amazon.com>
diff --git a/packages/core/src/stepFunctions/activation.ts b/packages/core/src/stepFunctions/activation.ts
@@ -24,6 +24,7 @@ import { WorkflowStudioEditorProvider } from './workflowStudio/workflowStudioEdi
 import { StateMachineNode } from './explorer/stepFunctionsNodes'
 import { downloadStateMachineDefinition } from './commands/downloadStateMachineDefinition'
 import { ExecutionDetailProvider } from './executionDetails/executionDetailProvider'
+import { validate } from '@aws-sdk/util-arn-parser'
 
 /**
  * Activate Step Functions related functionality for the extension.
@@ -100,7 +101,19 @@ async function registerStepFunctionCommands(
             await publishStateMachine({ awsContext: awsContext, outputChannel: outputChannel, region: region })
         }),
         Commands.register('aws.stepfunctions.viewExecutionDetailsByExecutionARN', async () => {
-            await ExecutionDetailProvider.openExecutionDetails('')
+            const arn = await vscode.window.showInputBox({
+                prompt: 'Enter Execution ARN',
+                placeHolder:
+                    'arn:aws:states:us-east-1:123456789012:execution:MyStateMachine:12345678-1234-1234-1234-123456789012',
+            })
+
+            if (validate(arn)) {
+                await ExecutionDetailProvider.openExecutionDetails(arn!)
+            } else {
+                void vscode.window.showErrorMessage(
+                    'Invalid ARN format. Please provide a valid Step Functions execution ARN (e.g., arn:aws:states:us-east-1:123456789012:execution:MyStateMachine:12345678-1234-1234-1234-123456789012)'
+                )
+            }
         })
     )
 }
diff --git a/packages/core/src/stepFunctions/executionDetails/executionDetailProvider.ts b/packages/core/src/stepFunctions/executionDetails/executionDetailProvider.ts
@@ -67,7 +67,7 @@ export class ExecutionDetailProvider {
      * Gets the webview content for Execution Details.
      * @private
      */
-    private getWebviewContent = async (): Promise<string> => {
+    private getWebviewContent = async (executionArn: string): Promise<string> => {
         const htmlFileSplit = this.webviewHtml.split('<head>')
 
         // Set asset source to CDN
@@ -83,8 +83,9 @@ export class ExecutionDetailProvider {
 
         // Set component type to ExecutionDetails
         const componentTypeTag = `<meta name="component-type" content="${ComponentType.ExecutionDetails}" />`
+        const executionArnTag = `<meta name="execution-arn" content="${executionArn}" />`
 
-        return `${htmlFileSplit[0]} <head> ${baseTag} ${localeTag} ${darkModeTag} ${componentTypeTag} ${htmlFileSplit[1]}`
+        return `${htmlFileSplit[0]} <head> ${baseTag} ${localeTag} ${darkModeTag} ${componentTypeTag} ${executionArnTag} ${htmlFileSplit[1]}`
     }
 
     /**
@@ -99,7 +100,7 @@ export class ExecutionDetailProvider {
             }
 
             // Set up the content
-            panel.webview.html = await this.getWebviewContent()
+            panel.webview.html = await this.getWebviewContent(executionArn)
             const context: ExecutionDetailsContext = {
                 panel,
                 loaderNotification: undefined,
