feat(stepfunctions): add View by Execution ARN command and provider

Author: Diler Zaza

packages/core/src/stepFunctions/constants/webviewResources.ts

@@ -0,0 +1,8 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const isLocalDev = true // eslint-disable-line @typescript-eslint/naming-convention
+export const localhost = 'http://127.0.0.1:3002' // eslint-disable-line @typescript-eslint/naming-convention
+export const cdn = 'https://d5t62uwepi9lu.cloudfront.net' // eslint-disable-line @typescript-eslint/naming-convention

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

@@ -6,19 +6,10 @@
 import * as vscode from 'vscode'
 import { getLogger } from '../../shared/logger/logger'
 import request from '../../shared/request'
-import { getClientId } from '../../shared/telemetry/util'
-import { telemetry } from '../../shared/telemetry/telemetry'
-import globals from '../../shared/extensionGlobals'
-// import { getStringHash } from '../../shared/utilities/textUtilities'
 import { ToolkitError } from '../../shared/errors'
-import { getTabSizeSetting } from '../../shared/utilities/editorUtilities'
 import { i18n } from '../../shared/i18n-helper'
-import { WorkflowMode } from '../workflowStudio/types'
-
-const isLocalDev = true
-const localhost = 'http://127.0.0.1:3002'
-const cdn = 'https://d5t62uwepi9lu.cloudfront.net'
-let clientId = ''
+import { ComponentType } from '../workflowStudio/types'
+import { isLocalDev, localhost, cdn } from '../constants/webviewResources'
 
 /**
  * Provider for Execution Details panels.
@@ -37,23 +28,21 @@ export class ExecutionDetailProvider {
         executionArn: string,
         params?: vscode.WebviewPanelOptions & vscode.WebviewOptions
     ): Promise<void> {
-        await telemetry.stepfunctions_openWorkflowStudio.run(async () => {
-            // Create and show the webview panel
-            const panel = vscode.window.createWebviewPanel(
-                ExecutionDetailProvider.viewType,
-                `Execution: ${executionArn.split(':').pop() || executionArn}`,
-                vscode.ViewColumn.Beside,
-                {
-                    enableScripts: true,
-                    retainContextWhenHidden: true,
-                    ...params,
-                }
-            )
-
-            // Create the provider and initialize the panel
-            const provider = new ExecutionDetailProvider()
-            await provider.initializePanel(panel, executionArn)
-        })
+        // Create and show the webview panel
+        const panel = vscode.window.createWebviewPanel(
+            ExecutionDetailProvider.viewType,
+            `Execution: ${executionArn.split(':').pop() || executionArn}`,
+            vscode.ViewColumn.Beside,
+            {
+                enableScripts: true,
+                retainContextWhenHidden: true,
+                ...params,
+            }
+        )
+
+        // Create the provider and initialize the panel
+        const provider = new ExecutionDetailProvider()
+        await provider.initializePanel(panel, executionArn)
     }
 
     /**
@@ -102,16 +91,12 @@ export class ExecutionDetailProvider {
         const localeTag = `<meta name='locale' content='${locale}'>`
         const theme = vscode.window.activeColorTheme.kind
         const isDarkMode = theme === vscode.ColorThemeKind.Dark || theme === vscode.ColorThemeKind.HighContrast
-        const tabSizeTag = `<meta name='tab-size' content='${getTabSizeSetting()}'>`
         const darkModeTag = `<meta name='dark-mode' content='${isDarkMode}'>`
 
         // Set component type to ExecutionDetails
-        const componentTypeTag = `<meta name="component-type" content="ExecutionDetails" />`
+        const componentTypeTag = `<meta name="component-type" content="${ComponentType.ExecutionDetails}" />`
 
-        // Set to read-only mode as this is just displaying execution details
-        const modeTag = `<meta name="workflow-mode" content="${WorkflowMode.Readonly}" />`
-
-        return `${htmlFileSplit[0]} <head> ${baseTag} ${localeTag} ${darkModeTag} ${tabSizeTag} ${modeTag} ${componentTypeTag} ${htmlFileSplit[1]}`
+        return `${htmlFileSplit[0]} <head> ${baseTag} ${localeTag} ${darkModeTag} ${componentTypeTag} ${htmlFileSplit[1]}`
     }
 
     /**
@@ -125,10 +110,6 @@ export class ExecutionDetailProvider {
                 await this.fetchWebviewHtml()
             }
 
-            if (clientId === '') {
-                clientId = getClientId(globals.globalState)
-            }
-
             // Set up the content
             panel.webview.html = await this.getWebviewContent()
 

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

@@ -5,6 +5,11 @@
 import { IAM, StepFunctions } from 'aws-sdk'
 import * as vscode from 'vscode'
 
+export enum ComponentType {
+    WorkflowStudio = 'WorkflowStudio',
+    ExecutionDetails = 'ExecutionDetails',
+}
+
 export enum WorkflowMode {
     Editable = 'toolkit',
     Readonly = 'readonly',

packages/core/src/stepFunctions/workflowStudio/workflowStudioEditorProvider.ts

@@ -15,11 +15,9 @@ import { getTabSizeSetting } from '../../shared/utilities/editorUtilities'
 import { WorkflowStudioEditor } from './workflowStudioEditor'
 import { i18n } from '../../shared/i18n-helper'
 import { isInvalidJsonFile, isInvalidYamlFile } from '../utils'
-import { WorkflowMode } from './types'
+import { ComponentType, WorkflowMode } from './types'
+import { isLocalDev, localhost, cdn } from '../constants/webviewResources'
 
-const isLocalDev = false
-const localhost = 'http://127.0.0.1:3002'
-const cdn = 'https://d5t62uwepi9lu.cloudfront.net'
 let clientId = ''
 
 /**
@@ -133,7 +131,11 @@ export class WorkflowStudioEditorProvider implements vscode.CustomTextEditorProv
         const darkModeTag = `<meta name='dark-mode' content='${isDarkMode}'>`
 
         const modeTag = `<meta name="workflow-mode" content="${mode}" />`
-        return `${htmlFileSplit[0]} <head> ${baseTag} ${localeTag} ${darkModeTag} ${tabSizeTag} ${modeTag} ${htmlFileSplit[1]}`
+
+        // Set component type to WorkflowStudio
+        const componentTypeTag = `<meta name="component-type" content="${ComponentType.WorkflowStudio}" />`
+
+        return `${htmlFileSplit[0]} <head> ${baseTag} ${localeTag} ${darkModeTag} ${tabSizeTag} ${modeTag} ${componentTypeTag} ${htmlFileSplit[1]}`
     }
 
     /**

packages/toolkit/.changes/next-release/Feature-ce02287b-d043-4d71-8589-685903fb5ee7.json

@@ -1,4 +1,4 @@
 {
 	"type": "Feature",
-	"description": "View By Execution ARN command launches a webview panel for Execution Details"
+	"description": "Added view by execution ARN command to visualize an execution"
 }

packages/toolkit/package.json

@@ -2,7 +2,7 @@
     "name": "aws-toolkit-vscode",
     "displayName": "AWS Toolkit",
     "description": "Including CodeCatalyst, Infrastructure Composer, and support for Lambda, S3, CloudWatch Logs, CloudFormation, and many other services.",
-    "version": "3.63.0-SNAPSHOT",
+    "version": "3.67.0-SNAPSHOT",
     "extensionKind": [
         "workspace"
     ],