feat(credentials): "Edit Credentials" button in error message #2880

Problem:
When onboarding "from zero" (no ~/.aws, need credentials) or when
running the "Create Credentials Profile" command, if the provided
credentials are invalid, or if the user needs to edit ~/.aws/credentials
to provide non-static credentials, there is no obvious way to open the
~/.aws/credentials file for new users.

Solution:
Show "Edit Credentials" in the error message if "Create Credentials
Profile" fails.

Author: justinmk3

.changes/next-release/Feature-9b4c339a-7cdf-4340-b911-f33bde49b461.json

@@ -0,0 +1,4 @@
+{
+	"type": "Feature",
+	"description": "if \"Create Credentials Profile\" fails, error message now shows \"Edit Credentials\" button"
+}

src/credentials/credentialsUtilities.ts

@@ -12,7 +12,7 @@ import { credentialHelpUrl } from '../shared/constants'
 import { Profile } from '../shared/credentials/credentialsFile'
 import globals from '../shared/extensionGlobals'
 import { isCloud9 } from '../shared/extensionUtilities'
-import { showMessageWithCancel, showViewLogsMessage } from '../shared/utilities/messages'
+import { messages, showMessageWithCancel, showViewLogsMessage } from '../shared/utilities/messages'
 import { Timeout, waitTimeout } from '../shared/utilities/timeoutUtils'
 import { fromExtensionManifest } from '../shared/settings'
 
@@ -32,20 +32,24 @@ export function asEnvironmentVariables(credentials: Credentials): NodeJS.Process
     return environmentVariables
 }
 
-export function notifyUserInvalidCredentials(credentialsId: string): void {
+export function showLoginFailedMessage(credentialsId: string, errMsg: string): void {
     const getHelp = localize('AWS.generic.message.getHelp', 'Get Help...')
+    const editCreds = messages.editCredentials(false)
     // TODO: getHelp page for Cloud9.
-    const buttons = isCloud9() ? [] : [getHelp]
+    const buttons = isCloud9() ? [editCreds] : [editCreds, getHelp]
 
     showViewLogsMessage(
-        localize('AWS.message.credentials.invalid', 'Invalid credentials: {0}', credentialsId),
+        localize('AWS.message.credentials.invalid', 'Credentials "{0}" failed to connect: {1}', credentialsId, errMsg),
         vscode.window,
         'error',
         buttons
     ).then((selection: string | undefined) => {
         if (selection === getHelp) {
             vscode.env.openExternal(vscode.Uri.parse(credentialHelpUrl))
         }
+        if (selection === editCreds) {
+            vscode.commands.executeCommand('aws.credentials.edit')
+        }
     })
 }
 

src/credentials/loginManager.ts

@@ -14,7 +14,7 @@ import { AwsContext } from '../shared/awsContext'
 import { getLogger } from '../shared/logger'
 import { CredentialSourceId, CredentialType, Result } from '../shared/telemetry/telemetry'
 import { CredentialsStore } from './credentialsStore'
-import { CredentialsSettings, notifyUserInvalidCredentials } from './credentialsUtilities'
+import { CredentialsSettings, showLoginFailedMessage } from './credentialsUtilities'
 import {
     asString,
     CredentialsProvider,
@@ -86,9 +86,10 @@ export class LoginManager {
         } catch (err) {
             const credentialsId = asString(args.providerId)
             if (!CancellationError.isUserCancelled(err)) {
-                const msg = `login: failed to connect with "${credentialsId}": ${(err as Error).message}`
+                const errMsg = (err as Error).message
+                const msg = `login: failed to connect with "${credentialsId}": ${errMsg}`
                 if (!args.passive) {
-                    notifyUserInvalidCredentials(credentialsId)
+                    showLoginFailedMessage(credentialsId, errMsg)
                     getLogger().error(msg)
                 }
             } else {

src/credentials/wizards/createProfile.ts

@@ -15,7 +15,7 @@ import { DefaultStsClient } from '../../shared/clients/stsClient'
 import { ProfileKey } from './templates'
 import { createCommonButtons } from '../../shared/ui/buttons'
 import { credentialHelpUrl } from '../../shared/constants'
-import { showMessageWithUrl } from '../../shared/utilities/messages'
+import { showLoginFailedMessage } from '../credentialsUtilities'
 
 function createProfileNamePrompter(profiles: ParsedIniData) {
     return createInputBox({
@@ -88,18 +88,7 @@ class ProfileChecker<T extends Profile> extends Prompter<string> {
 
             return (await stsClient.getCallerIdentity()).Account
         } catch (err) {
-            showMessageWithUrl(
-                localize(
-                    'AWS.message.prompt.credentials.invalid',
-                    'Profile {0} is invalid: {1}',
-                    this.name,
-                    (err as any).message
-                ),
-                credentialHelpUrl,
-                undefined,
-                'error'
-            )
-
+            showLoginFailedMessage(this.name, (err as any).message ?? '?')
             return WIZARD_BACK
         } finally {
             loadingBar.dispose()

src/shared/credentials/defaultCredentialSelectionDataProvider.ts

@@ -26,7 +26,7 @@ import { getIdeProperties } from '../extensionUtilities'
 import { credentialHelpUrl } from '../constants'
 import { createHelpButton } from '../ui/buttons'
 import { recentlyUsed } from '../localizedText'
-import { getIcon, codicon } from '../icons'
+import { messages } from '../utilities/messages'
 
 interface ProfileEntry {
     profileName: string
@@ -259,7 +259,7 @@ export async function credentialProfileSelector(
     ) {
         const actions = [
             {
-                label: localize('AWS.credentials.edit', '{0} Edit Credentials', codicon`${getIcon('vscode-edit')}`),
+                label: messages.editCredentials(true),
                 alwaysShow: true,
                 description: localize('AWS.credentials.edit.desc', 'open ~/.aws/credentials'),
             },

src/shared/utilities/messages.ts

@@ -14,6 +14,15 @@ import { sleep } from './timeoutUtils'
 import { Timeout } from './timeoutUtils'
 import { addCodiconToString } from './textUtilities'
 import * as localizedText from '../../shared/localizedText'
+import { getIcon, codicon } from '../icons'
+
+export const messages = {
+    editCredentials(icon: boolean) {
+        // codicons are not supported in showInformationMessage. (vscode 1.71)
+        const icon_ = icon ? codicon`${getIcon('vscode-edit')}` + ' ' : ''
+        return localize('AWS.credentials.edit', '{0}Edit Credentials', icon_)
+    },
+}
 
 export function makeFailedWriteMessage(filename: string): string {
     const message = localize('AWS.failedToWrite', '{0}: Failed to write "{1}".', getIdeProperties().company, filename)