fix: circular dependency in StepFunctions extension by introducing a callback to openExecutionDetails.

Author: Zelin Zhou

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/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

@@ -21,6 +21,7 @@ import {
 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,
@@ -98,12 +99,11 @@ async function startExecutionMessageHandler(message: StartExecutionMessage, cont
 
         const { region, stateMachineName, stateMachineArn } = parsedArn
 
-        const executeStateMachineUtils = await import('../vue/executeStateMachine/executeStateMachine.js')
-        const { showExecuteStateMachineWebview } = executeStateMachineUtils
         await showExecuteStateMachineWebview({
             arn: stateMachineArn,
             name: stateMachineName,
             region: region,
+            openExecutionDetails: context.openExecutionDetails,
             executionInput: message.executionInput,
         })
     } catch (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 = {

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

@@ -15,13 +15,14 @@ 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 globals from '../../../shared/extensionGlobals'
+import { openExecutionDetailsCallBack } from '../../messageHandlers/types'
 
 interface StateMachine {
     arn: string
     name: string
     region: string
+    openExecutionDetails: openExecutionDetailsCallBack
     executionInput?: string
 }
 
@@ -64,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()
             )
@@ -101,13 +102,15 @@ 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,
     })
 
@@ -122,12 +125,14 @@ export const showExecuteStateMachineWebview = async (stateMachineData: {
 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()