authWebview: Bug Bash fixes (#3620)

* identityCenter: Have button only say 'sign in'

You can't really sign up for builder id

Signed-off-by: Nikolas Komonen <[email protected]>

* authForm: Show error on submit but empty field

If a user clicks the submit button on a form
but they have not entered information in to a
certain field we will now show an errror message
under that field.

Fixes IDE-11014

Signed-off-by: Nikolas Komonen <[email protected]>

* builderId: Submit button text changes on context

If we have a builder id already signed in
on subsequent builder id forms we do not want
to prompt the user to 'sign in' again since they
already are and it may confuse them.

Solution:

If we see builder id is already signed in then
we want to change the text of the submit button
for other builder id forms to have a cta to
'connect builder id' with the other service

Signed-off-by: Nikolas Komonen <[email protected]>

* bug: Builder ID add scopes fix + missing Event

Problem:

- Sign in to builder id for CW
- Start sign in for builder id for CC
- On the prompt that asks to copy code, click cancel

We are now in a weird state where in the Tree View
we see CW asking for 'Reconnect' but in webview it
is still Enabled.

Solution:

- I was missing an Auth Event to trigger on when
  a connection is updated.
- During the addScopes() process it will update the
  connection, and if we then cancelled the webview
  would be wrong since it only refreshed on a successful
  addScopes() run.
- Now I added in the webview event listener to listen to
  the connection update event and it works

Additional:

If we update scopes of a connection but during reauthenticate()
the user cancels, we are stuck in a weird state where
the scopes on the unauthenticated connection include the
new scopes.

As a fix, we catch if the user cancels and revert the scopes to
what they previously were. The user will still need to reauth
but at least they are shown the actual state of things.

Signed-off-by: Nikolas Komonen <[email protected]>

* refactor: Get CCAuth instance without race condition

Previously the code attempted to handle a race condition
for getting the CC auth instance.

Solution:

Instead we will create the instance if it does not exist
and pass it in as an arg to the class that needed it.

Additionally, remove the old code that waited for the
object to exist since it is not needed anymore.

Signed-off-by: Nikolas Komonen <[email protected]>

* refactor: Include service names in text content

In the tabs + status bar we will now include more specific
information regarding the service

Signed-off-by: Nikolas Komonen <[email protected]>

* preloadImages: in auth webview

This uses the <img> tag to preload the images
on initial webview load

Signed-off-by: Nikolas Komonen <[email protected]>

* refactor: is first extension use logic

Previously we had a flag in settings.json to
indicate if the extension was first used. But
this could be manipulated easily by users.

Solution:

Create a class ExtensionUse that manages this
for you and instead uses the vscode global state
to keep track of this.

Remove the old way we tracked if this was the
first use.

Signed-off-by: Nikolas Komonen <[email protected]>

---------

Signed-off-by: Nikolas Komonen <[email protected]>

Author: nkomonen-amazon

package.json

@@ -220,10 +220,6 @@
                         "codeWhispererConnectionExpired": {
                             "type": "boolean",
                             "default": false
-                        },
-                        "manageConnections": {
-                            "type": "boolean",
-                            "default": false
                         }
                     },
                     "additionalProperties": false

src/auth/activation.ts

@@ -10,10 +10,8 @@ import { LoginManager } from './deprecated/loginManager'
 import { fromString } from './providers/credentials'
 import { registerCommandsWithVSCode } from '../shared/vscode/commands2'
 import { AuthCommandBackend, AuthCommandDeclarations } from './commands'
-import { dontShow } from '../shared/localizedText'
-import { DevSettings, PromptSettings } from '../shared/settings'
-import { waitUntil } from '../shared/utilities/timeoutUtils'
-import { CodeCatalystAuthenticationProvider } from '../codecatalyst/auth'
+import { DevSettings } from '../shared/settings'
+import { ExtensionUse } from '../shared/utilities/vsCodeUtils'
 
 export async function initialize(
     extensionContext: vscode.ExtensionContext,
@@ -49,20 +47,9 @@ export async function initialize(
  * again on next startup.
  */
 async function showManageConnectionsOnStartup() {
-    await waitUntil(() => Promise.resolve(CodeCatalystAuthenticationProvider.instance), {
-        interval: 500,
-        timeout: 10000,
-    })
-    const settings = PromptSettings.instance
-
-    if (!(await settings.isPromptEnabled('manageConnections'))) {
+    if (!ExtensionUse.instance.isFirstUse()) {
         return
     }
 
     AuthCommandDeclarations.instance.declared.showConnectionsPage.execute()
-    vscode.window.showInformationMessage("Don't show Add Connections page on startup?", dontShow).then(selection => {
-        if (selection === dontShow) {
-            settings.disablePrompt('manageConnections')
-        }
-    })
 }

src/auth/secondaryAuth.ts

@@ -235,15 +235,30 @@ export class SecondaryAuth<T extends Connection = Connection> {
 
     public async addScopes(conn: T & SsoConnection, extraScopes: string[]) {
         await promptForRescope(conn, this.toolLabel)
-        const scopes = Array.from(new Set([...(conn.scopes ?? []), ...extraScopes]))
-        const updatedConn = await this.auth.updateConnection(conn, {
-            type: 'sso',
-            scopes,
-            startUrl: conn.startUrl,
-            ssoRegion: conn.ssoRegion,
-        })
+        const oldScopes = conn.scopes ?? []
+        const newScopes = Array.from(new Set([...oldScopes, ...extraScopes]))
+
+        const updateConnectionScopes = (scopes: string[]) => {
+            return this.auth.updateConnection(conn, {
+                type: 'sso',
+                scopes,
+                startUrl: conn.startUrl,
+                ssoRegion: conn.ssoRegion,
+            })
+        }
+
+        const updatedConn = await updateConnectionScopes(newScopes)
 
-        return this.auth.reauthenticate(updatedConn)
+        try {
+            return await this.auth.reauthenticate(updatedConn)
+        } catch (e) {
+            if (CancellationError.isUserCancelled(e)) {
+                // We updated the connection scopes, but the user cancelled reauth.
+                // Revert to old connection scopes, otherwise the new scopes persist.
+                await updateConnectionScopes(oldScopes)
+            }
+            throw e
+        }
     }
 
     // Used to lazily restore persisted connections.

src/auth/ui/vue/authForms/manageBuilderId.vue

@@ -12,7 +12,7 @@
                 </div>
 
                 <div class="form-section">
-                    <button v-on:click="startSignIn()">Sign up or Sign in</button>
+                    <button v-on:click="startSignIn()">{{ submitButtonText }}</button>
                     <div class="small-description error-text">{{ error }}</div>
                 </div>
             </div>
@@ -67,6 +67,7 @@ export default defineComponent({
             name: this.state.name,
             error: '' as string,
             signUpUrl: '' as string,
+            submitButtonText: '' as string,
         }
     },
     async created() {
@@ -84,6 +85,7 @@ export default defineComponent({
             }
         },
         async update(cause?: ConnectionUpdateCause) {
+            await this.updateSubmitButtonText()
             this.stage = await this.state.stage()
             this.isConnected = await this.state.isAuthConnected()
             this.emitAuthConnectionUpdated({ id: this.state.id, isConnected: this.isConnected, cause })
@@ -98,6 +100,13 @@ export default defineComponent({
         getSignUpUrl() {
             return this.state.getSignUpUrl()
         },
+        async updateSubmitButtonText() {
+            if (!(await isBuilderIdConnected())) {
+                this.submitButtonText = 'Sign up or Sign in'
+            } else {
+                this.submitButtonText = `Connect AWS Builder ID with ${this.state.name}`
+            }
+        },
     },
 })
 
@@ -113,6 +122,8 @@ abstract class BaseBuilderIdState implements AuthStatus {
     abstract isAuthConnected(): Promise<boolean>
     abstract showNodeInView(): Promise<void>
 
+    protected constructor() {}
+
     async startBuilderIdSetup(): Promise<string> {
         this._stage = 'WAITING_ON_USER'
         return this._startBuilderIdSetup()
@@ -157,6 +168,12 @@ export class CodeWhispererBuilderIdState extends BaseBuilderIdState {
     override getSignUpUrl(): string {
         return 'https://docs.aws.amazon.com/codewhisperer/latest/userguide/whisper-setup-indv-devs.html'
     }
+
+    static #instance: CodeWhispererBuilderIdState | undefined
+
+    static get instance(): CodeWhispererBuilderIdState {
+        return (this.#instance ??= new CodeWhispererBuilderIdState())
+    }
 }
 
 export class CodeCatalystBuilderIdState extends BaseBuilderIdState {
@@ -179,14 +196,31 @@ export class CodeCatalystBuilderIdState extends BaseBuilderIdState {
     override showNodeInView(): Promise<void> {
         return client.showCodeCatalystNode()
     }
+
+    static #instance: CodeCatalystBuilderIdState | undefined
+
+    static get instance(): CodeCatalystBuilderIdState {
+        return (this.#instance ??= new CodeCatalystBuilderIdState())
+    }
+}
+
+/**
+ * Returns true if any Builder Id is connected
+ */
+export async function isBuilderIdConnected(): Promise<boolean> {
+    const results = await Promise.all([
+        CodeWhispererBuilderIdState.instance.isAuthConnected(),
+        CodeCatalystBuilderIdState.instance.isAuthConnected(),
+    ])
+    return results.some(isConnected => isConnected)
 }
 </script>
 <style>
 @import './sharedAuthForms.css';
 @import '../shared.css';
 
 #builder-id-form {
-    width: 250px;
+    width: 300px;
     height: fit-content;
 }
 </style>

src/auth/ui/vue/authForms/manageCredentials.vue

@@ -49,7 +49,7 @@
                 </div>
 
                 <div class="form-section">
-                    <button :disabled="!canSubmit" v-on:click="submitData()">Add Profile</button>
+                    <button v-on:click="submitData()">Add Profile</button>
                     <div class="small-description error-text">{{ errors.submit }}</div>
                 </div>
             </div>
@@ -150,6 +150,9 @@ export default defineComponent({
             })
         },
         async submitData() {
+            if (this.setCannotBeEmptyErrors()) {
+                return
+            }
             // pre submission
             this.canSubmit = false // disable submit button
 
@@ -168,6 +171,18 @@ export default defineComponent({
             this.canSubmit = true // enable submit button
             await this.updateConnectedStatus('signIn')
         },
+        /**
+         * Sets the 'cannot be empty' error for each empty field
+         *
+         * @returns true if there was an empty field, otherwise false
+         */
+        setCannotBeEmptyErrors() {
+            const emptyFields = Object.keys(this.data).filter(key => !this.data[key as keyof typeof this.data])
+            emptyFields.forEach(fieldName => {
+                this.errors[fieldName as keyof typeof this.data] = 'Cannot be empty.'
+            })
+            return emptyFields.length > 0
+        },
         toggleShowForm() {
             this.isFormShown = !this.isFormShown
         },

src/auth/ui/vue/authForms/manageIdentityCenter.vue

@@ -39,7 +39,7 @@
             </div>
 
             <div class="form-section">
-                <button v-on:click="signin()" :disabled="!canSubmit">Sign up or Sign in</button>
+                <button v-on:click="signin()">Sign in</button>
                 <div class="small-description error-text">{{ errors.submit }}</div>
             </div>
         </div>
@@ -126,6 +126,12 @@ export default defineComponent({
     computed: {},
     methods: {
         async signin(): Promise<void> {
+            console.log(this.data.startUrl)
+            if (!this.data.startUrl) {
+                this.errors.startUrl = 'Cannot be empty.'
+                return
+            }
+
             this.stage = 'WAITING_ON_USER'
             this.errors.submit = await this.state.startIdentityCenterSetup()
 

src/auth/ui/vue/authForms/shared.vue

@@ -8,10 +8,10 @@ import { CodeWhispererIdentityCenterState, ExplorerIdentityCenterState } from '.
  */
 const authFormsState = {
     credentials: new CredentialsState() as CredentialsState,
-    builderIdCodeWhisperer: new CodeWhispererBuilderIdState(),
-    builderIdCodeCatalyst: new CodeCatalystBuilderIdState(),
+    builderIdCodeWhisperer: CodeWhispererBuilderIdState.instance,
+    builderIdCodeCatalyst: CodeCatalystBuilderIdState.instance,
     identityCenterCodeWhisperer: new CodeWhispererIdentityCenterState(),
-    identityCenterExplorer: new ExplorerIdentityCenterState()
+    identityCenterExplorer: new ExplorerIdentityCenterState(),
 } as const
 
 export interface AuthStatus {

src/auth/ui/vue/authForms/types.ts

@@ -13,9 +13,9 @@ export type AuthFormId =
 
 export const AuthFormDisplayName: Record<AuthFormId, string> = {
     credentials: 'IAM Credentials',
-    builderIdCodeCatalyst: 'Builder ID',
-    builderIdCodeWhisperer: 'Builder ID',
-    identityCenterCodeWhisperer: 'IAM Identity Center',
-    identityCenterExplorer: 'IAM Identity Center',
-    aggregateExplorer: ''
+    builderIdCodeCatalyst: 'CodeCatalyst with AWS Builder ID',
+    builderIdCodeWhisperer: 'CodeWhisperer with AWS Builder ID',
+    identityCenterCodeWhisperer: 'CodeWhisperer with IAM Identity Center',
+    identityCenterExplorer: 'Explorer with IAM Identity Center',
+    aggregateExplorer: '',
 } as const

src/auth/ui/vue/root.vue

@@ -1,4 +1,14 @@
 <template>
+    <!-- 
+        HACK: Want to prefetch images but <link ref="prefetch"> does not work.
+        We use <img> instead but hide it.
+     -->
+    <img
+        v-show="false"
+        src="https://github.com/aws/aws-toolkit-vscode/raw/HEAD/docs/marketplace/vscode/CC_dev_env.gif"
+    />
+    <link v-show="false" src="https://github.com/aws/aws-toolkit-vscode/raw/HEAD/docs/marketplace/vscode/S3.gif" />
+
     <div style="display: flex; flex-direction: column; gap: 20px; padding-top: 20px">
         <!-- Status Bars -->
         <div
@@ -21,11 +31,12 @@
                 <div class="icon icon-lg icon-vscode-check"></div>
                 &nbsp; &nbsp;
                 <div style="display: flex; flex-direction: row">
-                    You're connected to {{ authFormDisplayName }}! Switch between connections in the&nbsp;<a
+                    Connected to&nbsp;<span style="font-weight: bold">{{ authFormDisplayName }}</span
+                    >! Switch between existing connections in the&nbsp;<a
                         v-on:click="showConnectionQuickPick()"
                         style="cursor: pointer"
                         >Toolkit panel</a
-                    >&nbsp;or add additional connections below.
+                    >.
                 </div>
                 &nbsp;&nbsp;
                 <div
@@ -54,7 +65,7 @@
                         v-on:click="showConnectionQuickPick()"
                         style="cursor: pointer"
                         >Toolkit panel</a
-                    >&nbsp;.
+                    >.
                 </div>
                 &nbsp;&nbsp;
                 <div

src/auth/ui/vue/serviceItem.vue

@@ -128,15 +128,15 @@ export default defineComponent({
 
 const staticServiceItemProps: Readonly<Record<ServiceItemId, { title: string; description: string }>> = {
     resourceExplorer: {
-        title: 'View, modify, and deploy AWS Resources',
+        title: 'Explorer: View, modify, and deploy AWS Resources',
         description: 'Work with S3, CloudWatch, and more.',
     },
     codewhisperer: {
-        title: 'AI-powered code suggestions from CodeWhisperer',
+        title: 'CodeWhisperer: AI-powered code suggestions',
         description: 'Build applications faster with your AI coding companion.',
     },
     codecatalyst: {
-        title: 'Launch CodeCatalyst Cloud-based Dev Environments',
+        title: 'CodeCatalytst: Launch Cloud-based Dev Environments',
         description: 'Spark a faster planning, development, and delivery lifecycle on AWS.',
     },
 }