feat(appcomposer): show CodeLens link to Application Composer #4436

Problem:
- Users have reported difficulty finding Application Composer in the Toolkit.
Solution:
- Add an "Open with Application Composer" link using CodeLens to the start of detected CloudFormation / SAM templates.

Co-authored-by: Aiden Carpenter <[email protected]>
Co-authored-by: Jacob Largent <[email protected]>

Author: 3 people

.changes/next-release/Feature-c2593f64-d7ec-4552-915d-47245c1239c4.json

@@ -0,0 +1,4 @@
+{
+	"type": "Feature",
+	"description": "CloudFormation and SAM templates now have a CodeLens link to Application Composer"
+}

packages/toolkit/src/applicationcomposer/activation.ts

@@ -5,50 +5,9 @@
 
 import * as vscode from 'vscode'
 import { ApplicationComposerManager } from './webviewManager'
-import { Commands } from '../shared/vscode/commands2'
-import { ToolkitError } from '../shared/errors'
-import { AuthUtil, getChatAuthState } from '../codewhisperer/util/authUtil'
-import { telemetry } from '../shared/telemetry/telemetry'
-
-export const openTemplateInComposerCommand = Commands.declare(
-    'aws.openInApplicationComposer',
-    (manager: ApplicationComposerManager) => async (arg?: vscode.TextEditor | vscode.Uri) => {
-        const authState = await getChatAuthState(AuthUtil.instance)
-
-        let result: vscode.WebviewPanel | undefined
-        await telemetry.appcomposer_openTemplate.run(async span => {
-            span.record({
-                hasChatAuth: authState.codewhispererChat === 'connected' || authState.codewhispererChat === 'expired',
-            })
-            arg ??= vscode.window.activeTextEditor
-            const input = arg instanceof vscode.Uri ? arg : arg?.document
-
-            if (!input) {
-                throw new ToolkitError('No active text editor or document found')
-            }
-
-            result = await manager.visualizeTemplate(input)
-        })
-        return result
-    }
-)
-
-export const openInComposerDialogCommand = Commands.declare(
-    'aws.openInApplicationComposerDialog',
-    (manager: ApplicationComposerManager) => async () => {
-        const fileUri = await vscode.window.showOpenDialog({
-            filters: {
-                Templates: ['yml', 'yaml', 'json', 'template'],
-            },
-            canSelectFiles: true,
-            canSelectFolders: false,
-            canSelectMany: false,
-        })
-        if (fileUri && fileUri[0]) {
-            return await manager.visualizeTemplate(fileUri[0])
-        }
-    }
-)
+import { ApplicationComposerCodeLensProvider } from './codeLensProvider'
+import { openTemplateInComposerCommand } from './commands/openTemplateInComposer'
+import { openInComposerDialogCommand } from './commands/openInComposerDialog'
 
 export async function activate(extensionContext: vscode.ExtensionContext): Promise<void> {
     const visualizationManager = new ApplicationComposerManager(extensionContext)
@@ -57,4 +16,11 @@ export async function activate(extensionContext: vscode.ExtensionContext): Promi
         openTemplateInComposerCommand.register(visualizationManager),
         openInComposerDialogCommand.register(visualizationManager)
     )
+
+    extensionContext.subscriptions.push(
+        vscode.languages.registerCodeLensProvider(
+            ['yaml', 'json', { scheme: 'file' }],
+            new ApplicationComposerCodeLensProvider()
+        )
+    )
 }

packages/toolkit/src/applicationcomposer/codeLensProvider.ts

@@ -0,0 +1,44 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import vscode from 'vscode'
+import * as CloudFormation from '../shared/cloudformation/cloudformation'
+import * as nls from 'vscode-nls'
+import { openTemplateInComposerCommand } from './commands/openTemplateInComposer'
+
+const localize = nls.loadMessageBundle()
+
+export class ApplicationComposerCodeLensProvider implements vscode.CodeLensProvider {
+    public async provideCodeLenses(
+        document: vscode.TextDocument,
+        _token: vscode.CancellationToken
+    ): Promise<vscode.CodeLens[]> {
+        const cfnTemplate = CloudFormation.isValidFilename(document.uri)
+            ? await CloudFormation.tryLoad(document.uri)
+            : undefined
+        if (!cfnTemplate?.template) {
+            return []
+        }
+
+        let codeLensLine = 0
+        for (let i = 0; i < document.getText().length; i++) {
+            const line = document.lineAt(i)
+            const lineContents = line.text.substring(line.firstNonWhitespaceCharacterIndex)
+            if (lineContents.length > 0 && !lineContents.startsWith('#')) {
+                codeLensLine = i
+                break
+            }
+        }
+        const resourcesLoc = new vscode.Range(codeLensLine, 0, codeLensLine, 0)
+        const codeLens = openTemplateInComposerCommand.build().asCodeLens(resourcesLoc, {
+            title: localize('AWS.applicationComposer.codeLens.title', 'Visualize with Application Composer'),
+            tooltip: localize(
+                'AWS.applicationComposer.codeLens.tooltip',
+                'Visually design and build modern applications quickly'
+            ),
+        })
+        return [codeLens]
+    }
+}

packages/toolkit/src/applicationcomposer/commands/openInComposerDialog.ts

@@ -0,0 +1,25 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Commands } from '../../shared/vscode/commands2'
+import { ApplicationComposerManager } from '../webviewManager'
+import vscode from 'vscode'
+
+export const openInComposerDialogCommand = Commands.declare(
+    'aws.openInApplicationComposerDialog',
+    (manager: ApplicationComposerManager) => async () => {
+        const fileUri = await vscode.window.showOpenDialog({
+            filters: {
+                Templates: ['yml', 'yaml', 'json', 'template'],
+            },
+            canSelectFiles: true,
+            canSelectFolders: false,
+            canSelectMany: false,
+        })
+        if (fileUri && fileUri[0]) {
+            return await manager.visualizeTemplate(fileUri[0])
+        }
+    }
+)

packages/toolkit/src/applicationcomposer/commands/openTemplateInComposer.ts

@@ -0,0 +1,34 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Commands } from '../../shared/vscode/commands2'
+import { ApplicationComposerManager } from '../webviewManager'
+import vscode from 'vscode'
+import { AuthUtil, getChatAuthState } from '../../codewhisperer/util/authUtil'
+import { telemetry } from '../../shared/telemetry/telemetry'
+import { ToolkitError } from '../../shared/errors'
+
+export const openTemplateInComposerCommand = Commands.declare(
+    'aws.openInApplicationComposer',
+    (manager: ApplicationComposerManager) => async (arg?: vscode.TextEditor | vscode.Uri) => {
+        const authState = await getChatAuthState(AuthUtil.instance)
+
+        let result: vscode.WebviewPanel | undefined
+        await telemetry.appcomposer_openTemplate.run(async span => {
+            span.record({
+                hasChatAuth: authState.codewhispererChat === 'connected' || authState.codewhispererChat === 'expired',
+            })
+            arg ??= vscode.window.activeTextEditor
+            const input = arg instanceof vscode.Uri ? arg : arg?.document
+
+            if (!input) {
+                throw new ToolkitError('No active text editor or document found')
+            }
+
+            result = await manager.visualizeTemplate(input)
+        })
+        return result
+    }
+)

packages/toolkit/src/shared/awsFiletypes.ts

@@ -67,10 +67,9 @@ export function activate(): void {
         vscode.workspace.onDidOpenTextDocument(async (doc: vscode.TextDocument) => {
             const isAwsFileExt = isAwsFiletype(doc)
             const isSchemaHandled = globals.schemaService.isMapped(doc.uri)
-            const cfnTemplate =
-                CloudFormation.isValidFilename(doc.uri) && doc.languageId === 'yaml'
-                    ? await CloudFormation.tryLoad(doc.uri)
-                    : undefined
+            const cfnTemplate = CloudFormation.isValidFilename(doc.uri)
+                ? await CloudFormation.tryLoad(doc.uri)
+                : undefined
             const isCfnTemplate = cfnTemplate?.template !== undefined
 
             if (!isAwsFileExt && !isSchemaHandled && !isCfnTemplate) {

packages/toolkit/src/shared/cloudformation/cloudformation.ts

@@ -19,7 +19,8 @@ export const SERVERLESS_API_TYPE = 'AWS::Serverless::Api' // eslint-disable-line
 export const SERVERLESS_FUNCTION_TYPE = 'AWS::Serverless::Function' // eslint-disable-line @typescript-eslint/naming-convention
 export const LAMBDA_FUNCTION_TYPE = 'AWS::Lambda::Function' // eslint-disable-line @typescript-eslint/naming-convention
 
-export const templateFileGlobPattern = '**/*.{yaml,yml}'
+export const templateFileGlobPattern = '**/*.{yaml,yml,json,template}'
+export const templateFileRegexPattern = /.*\.(yaml|yml|json|template)$/i
 export const devfileExcludePattern = /.*devfile\.(yaml|yml)/i
 /**
  * Match any file path that contains a .aws-sam folder. The way this works is:
@@ -378,16 +379,13 @@ export interface TemplateResources {
 export function isValidFilename(filename: string | vscode.Uri): boolean {
     filename = typeof filename === 'string' ? filename : filename.fsPath
     filename = filename.trim()
-    if (!filename.endsWith('.yml') && !filename.endsWith('.yaml')) {
+    if (!filename.match(templateFileRegexPattern)) {
         return false
     }
     // Note: intentionally _not_ checking `templateFileExcludePattern` here, because while excluding
     // template files in .aws-sam/ is relevant for the workspace scan, it's irrelevant if such
     // a file was opened explicitly by the user.
-    if (filename.match(devfileExcludePattern)) {
-        return false
-    }
-    return true
+    return !filename.match(devfileExcludePattern)
 }
 
 export async function load(filename: string, validate: boolean = true): Promise<Template> {

packages/toolkit/src/test/shared/cloudformation/cloudformation.test.ts

@@ -35,6 +35,8 @@ describe('CloudFormation', function () {
     })
 
     it('isValidFilename()', async function () {
+        assert.deepStrictEqual(CloudFormation.isValidFilename('/foo/bar.json'), true)
+        assert.deepStrictEqual(CloudFormation.isValidFilename('/foo/bar.template'), true)
         assert.deepStrictEqual(CloudFormation.isValidFilename('/foo/bar.yaml'), true)
         assert.deepStrictEqual(CloudFormation.isValidFilename('/foo/template.yaml'), true)
         assert.deepStrictEqual(CloudFormation.isValidFilename('template.yaml'), true)