feat(sam): "Sync SAM" info if no bucket/stack/ECR items

Problem:
The "Sync SAM" wizard has steps for S3, ECR, and CFN. If there are no
items it is not obvious what to do.

Solution:
- For each step,
    - provide a "Open AWS Console" button
    - show a "No X items found. Click to open AWS Console" message.

Author: justinmk3

.changes/next-release/Feature-c1e800e4-94d4-433d-a545-d6a32b64c7a3.json

@@ -0,0 +1,4 @@
+{
+	"type": "Feature",
+	"description": "\"Sync SAM Application\" command provides Create and Help actions at each step (SAM template, S3 bucket, ECR repo, CloudFormation stack)"
+}

src/shared/awsConsole.ts

@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2018-2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as vscode from 'vscode'
+
+export function getAwsConsoleUrl(service: 'ecr' | 'cloudformation', region: string): vscode.Uri {
+    switch (service) {
+        case 'ecr':
+            return vscode.Uri.parse(`https://${region}.console.aws.amazon.com/ecr/repositories?region=${region}`)
+        case 'cloudformation':
+            return vscode.Uri.parse(`https://${region}.console.aws.amazon.com/cloudformation/home?region=${region}`)
+        default:
+            throw Error()
+    }
+}

src/shared/sam/sync.ts

@@ -42,6 +42,7 @@ import { isAutomation } from '../vscode/env'
 import { getOverriddenParameters } from '../../lambda/config/parameterUtils'
 import { addTelemetryEnvVar } from './cli/samCliInvokerUtils'
 import { samSyncUrl, samInitDocUrl } from '../constants'
+import { getAwsConsoleUrl } from '../awsConsole'
 
 const localize = nls.loadMessageBundle()
 
@@ -71,13 +72,22 @@ function createBucketPrompter(client: DefaultS3Client) {
 
     return createQuickPick(items, {
         title: 'Select an S3 Bucket',
-        placeholder: 'Filter or enter a new bucket name',
+        placeholder: 'Select a bucket (or enter a name to create one)',
         buttons: createCommonButtons(samSyncUrl),
         filterBoxInputSettings: {
             label: 'Create a New Bucket',
             // This is basically a hack. I need to refactor `createQuickPick` a bit.
             transform: v => prefixNewBucketName(v),
         },
+        noItemsFoundItem: {
+            label: localize(
+                'aws.cfn.noStacks',
+                'No S3 buckets for region "{0}". Enter a name to create a new one.',
+                client.regionCode
+            ),
+            data: undefined,
+            onClick: undefined,
+        },
     })
 }
 
@@ -87,6 +97,7 @@ const canShowStack = (s: StackSummary) =>
 
 function createStackPrompter(client: DefaultCloudFormationClient) {
     const recentStack = getRecentResponse(client.regionCode, 'stackName')
+    const consoleUrl = getAwsConsoleUrl('cloudformation', client.regionCode)
     const items = client.listAllStacks().map(stacks =>
         stacks.filter(canShowStack).map(s => ({
             label: s.StackName,
@@ -99,17 +110,27 @@ function createStackPrompter(client: DefaultCloudFormationClient) {
 
     return createQuickPick(items, {
         title: 'Select a CloudFormation Stack',
-        placeholder: 'Filter or enter a new stack name',
+        placeholder: 'Select a stack (or enter a name to create one)',
         filterBoxInputSettings: {
             label: 'Create a New Stack',
             transform: v => v,
         },
-        buttons: createCommonButtons(samSyncUrl),
+        buttons: createCommonButtons(samSyncUrl, consoleUrl),
+        noItemsFoundItem: {
+            label: localize(
+                'aws.cfn.noStacks',
+                'No stacks in region "{0}". Enter a name to create a new one.',
+                client.regionCode
+            ),
+            data: undefined,
+            onClick: undefined,
+        },
     })
 }
 
 function createEcrPrompter(client: DefaultEcrClient) {
     const recentEcrRepo = getRecentResponse(client.regionCode, 'ecrRepoUri')
+    const consoleUrl = getAwsConsoleUrl('ecr', client.regionCode)
     const items = client.listAllRepositories().map(list =>
         list.map(repo => ({
             label: repo.repositoryName,
@@ -121,12 +142,21 @@ function createEcrPrompter(client: DefaultEcrClient) {
 
     return createQuickPick(items, {
         title: 'Select an ECR Repository',
-        placeholder: 'Filter or enter an existing repository URI',
-        buttons: createCommonButtons(samSyncUrl),
+        placeholder: 'Select a repository (or enter repository URI)',
+        buttons: createCommonButtons(samSyncUrl, consoleUrl),
         filterBoxInputSettings: {
             label: 'Existing repository URI',
             transform: v => v,
         },
+        noItemsFoundItem: {
+            label: localize(
+                'aws.ecr.noRepos',
+                'No ECR repositories in region "{0}". Enter a name to create a new one.',
+                client.regionCode
+            ),
+            data: undefined,
+            onClick: undefined,
+        },
     })
 }
 
@@ -141,6 +171,7 @@ export function createEnvironmentPrompter(config: SamConfig, environments = conf
 
     return createQuickPick(items, {
         title: 'Select an Environment to Use',
+        placeholder: 'Select an environment',
         buttons: createCommonButtons(samSyncUrl),
     })
 }

src/shared/ui/buttons.ts

@@ -8,9 +8,11 @@ import * as nls from 'vscode-nls'
 import { documentationUrl } from '../constants'
 import { getIcon } from '../icons'
 import { WizardControl, WIZARD_EXIT, WIZARD_RETRY } from '../wizards/wizard'
+import { getIdeProperties } from '../extensionUtilities'
 
 const localize = nls.loadMessageBundle()
 const helpTooltip = localize('AWS.command.help', 'View Toolkit Documentation')
+const awsConsoleTooltip = () => localize('AWS.button.awsConsole', 'Open {0} Console', getIdeProperties().company)
 
 type WizardButton<T> = QuickInputButton<T | WizardControl> | QuickInputButton<void>
 export type PrompterButtons<T> = readonly WizardButton<T>[]
@@ -109,6 +111,14 @@ export function createBackButton(): QuickInputButton<WizardControl> {
     return vscode.QuickInputButtons.Back as QuickInputButton<WizardControl>
 }
 
+export function createAwsConsoleButton(
+    uri: string | vscode.Uri,
+    tooltip: string = awsConsoleTooltip()
+): QuickInputLinkButton {
+    const iconPath = getIcon('vscode-link-external')
+    return new QuickInputLinkButton(uri, iconPath, tooltip)
+}
+
 export function createExitButton(): QuickInputButton<WizardControl> {
     return {
         iconPath: getIcon('vscode-close'),
@@ -137,8 +147,14 @@ export function createPlusButton(tooltip?: string): QuickInputButton<void> {
  * Currently has: 'help', 'exit', and 'back'
  *
  * @param helpUri optional URI to link to for the 'help' button (see {@link createHelpButton} for defaults)
+ * @param awsConsoleUri optional URI to AWS web console
  * @returns An array of buttons
  */
-export function createCommonButtons(helpUri?: string | vscode.Uri): PrompterButtons<WizardControl> {
-    return [createHelpButton(helpUri), createBackButton(), createExitButton()]
+export function createCommonButtons(
+    helpUri?: string | vscode.Uri,
+    awsConsoleUri?: string | vscode.Uri
+): PrompterButtons<WizardControl> {
+    const buttons2 = [createHelpButton(helpUri), createBackButton(), createExitButton()]
+    const buttons1: typeof buttons2 = awsConsoleUri ? [createAwsConsoleButton(awsConsoleUri)] : []
+    return buttons1.concat(buttons2)
 }