Merge master into feature/web

Author: aws-toolkit-automation

.changes/next-release/Bug Fix-2010cfac-f717-490d-b47c-5e3521cb5714.json

@@ -0,0 +1,4 @@
+{
+	"type": "Bug Fix",
+	"description": "Fix a not connected error when starting connection to CodeCatalyst Dev Environment from link"
+}

.changes/next-release/Feature-9b52cc17-feb7-402d-be2a-6b17f6fa4d6d.json

@@ -0,0 +1,4 @@
+{
+	"type": "Feature",
+	"description": "Auth: Redesign Add Connection page to show all options at once"
+}

scripts/build/generateIcons.ts

@@ -109,6 +109,7 @@ async function generate(mappings: Record<string, number | undefined> = {}) {
         fontHeight: 1000,
         template: 'css',
         templateClassName: 'icon',
+        descent: 200, // Icons were negatively offset on the y-axes, this fixes it
         templateFontPath: path.relative(stylesheetsDir, fontsDir),
         glyphTransformFn: obj => {
             const filePath = (obj as { path?: string }).path

src/auth/secondaryAuth.ts

@@ -105,8 +105,12 @@ export class SecondaryAuth<T extends Connection = Connection> {
             ) {
                 await this.clearSavedConnection()
             } else {
+                const currentConn = this.activeConnection
                 this.#activeConnection = conn
-                this.#onDidChangeActiveConnection.fire(this.activeConnection)
+                if (currentConn?.id !== this.activeConnection?.id) {
+                    // The user will get a different active connection from before, so notify them.
+                    this.#onDidChangeActiveConnection.fire(this.activeConnection)
+                }
             }
         }
 

src/auth/ui/vue/authForms/baseAuth.vue

@@ -2,6 +2,7 @@
 import { defineComponent } from 'vue'
 import { AuthFormId } from './types'
 import TelemetryClient from '../telemetry.vue'
+import { Notifications } from '../notifications/notifications.vue'
 
 export type ConnectionUpdateCause = 'signIn' | 'signOut' | 'created'
 export type ConnectionUpdateArgs = { id: AuthFormId; isConnected: boolean; cause?: ConnectionUpdateCause }
@@ -11,6 +12,7 @@ export default defineComponent({
     extends: TelemetryClient,
     methods: {
         emitAuthConnectionUpdated(args: ConnectionUpdateArgs) {
+            Notifications.instance.showSuccessNotification(args)
             this.$emit('auth-connection-updated', args)
         },
     },

src/auth/ui/vue/authForms/formTitle.vue

@@ -4,9 +4,11 @@
  -->
 
 <template>
-    <div v-if="isConnected" style="display: flex">
-        <div class="pass-icon icon icon-lg icon-vscode-pass-filled"></div>
-        <label class="auth-form-title">Connected to <slot></slot></label>
+    <div v-if="isConnected" style="display: flex; gap: 1em">
+        <label class="auth-form-title"
+            ><div class="pass-icon icon icon-vscode-pass-filled"></div>
+            Connected to <slot></slot
+        ></label>
     </div>
     <div v-else>
         <label class="auth-form-title"><slot></slot></label>
@@ -28,6 +30,5 @@ export default defineComponent({
 <style>
 .pass-icon {
     color: #73c991;
-    margin-right: 5px;
 }
 </style>

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

@@ -1,19 +1,19 @@
 <template>
-    <div class="auth-form container-background border-common" id="builder-id-form">
+    <div class="auth-form container-background border-common">
         <div>
             <FormTitle :isConnected="isConnected">AWS Builder ID</FormTitle>
 
             <div v-if="stage === 'START'">
                 <div class="form-section">
-                    <div class="sub-text-color">
-                        {{ getDescription() }}
+                    <div class="auth-form-description form-description-color">
+                        {{ description }}
                         <a :href="signUpUrl" v-on:click="emitUiClick('auth_learnMoreBuilderId')">Learn more.</a>
                     </div>
                 </div>
 
                 <div class="form-section">
                     <button v-on:click="startSignIn()">{{ submitButtonText }}</button>
-                    <div class="small-description error-text">{{ error }}</div>
+                    <div class="form-description-color input-description-small error-text">{{ error }}</div>
                 </div>
             </div>
 
@@ -45,6 +45,7 @@ import { WebviewClientFactory } from '../../../../webviews/client'
 import { AuthError } from '../types'
 import { FeatureId } from '../../../../shared/telemetry/telemetry.gen'
 import { AuthForm } from './shared.vue'
+import { CredentialSourceId } from '../../../../shared/telemetry/telemetry.gen'
 
 const client = WebviewClientFactory.create<AuthWebview>()
 
@@ -68,64 +69,45 @@ export default defineComponent({
             builderIdCode: '',
             name: this.state.name,
             error: '' as string,
-            signUpUrl: '' as string,
+            signUpUrl: this.state.getSignUpUrl(),
             submitButtonText: '' as string,
+            description: this.state.getDescription(),
         }
     },
     async created() {
-        this.signUpUrl = this.getSignUpUrl()
-        await this.update('created')
+        await this.emitUpdate('created')
     },
     methods: {
         async startSignIn() {
+            await this.state.startAuthFormInteraction()
+
+            // update UI to show a pending state
             this.stage = 'WAITING_ON_USER'
-            client.startAuthFormInteraction(this.state.featureType, 'awsId')
-            const authError = await this.state.startBuilderIdSetup()
-
-            if (authError) {
-                this.error = authError.text
-                this.stage = await this.state.stage()
-
-                client.failedAuthAttempt({
-                    authType: 'awsId',
-                    featureType: this.state.featureType,
-                    reason: authError.id,
-                })
+
+            const wasSuccessful = await this.state.startBuilderIdSetup()
+            if (wasSuccessful) {
+                await this.emitUpdate('signIn')
             } else {
-                client.successfulAuthAttempt({
-                    featureType: this.state.featureType,
-                    authType: 'awsId',
-                })
-                await this.update('signIn')
+                await this.updateForm()
             }
         },
-        async update(cause?: ConnectionUpdateCause) {
-            await this.updateSubmitButtonText()
+        /** Updates the content of the form using the state data */
+        async updateForm() {
+            this.error = this.state.error
             this.stage = await this.state.stage()
+            this.submitButtonText = await this.state.getSubmitButtonText()
             this.isConnected = await this.state.isAuthConnected()
+        },
+        async emitUpdate(cause?: ConnectionUpdateCause) {
+            await this.updateForm()
             this.emitAuthConnectionUpdated({ id: this.state.id, isConnected: this.isConnected, cause })
         },
         async signout() {
             await this.state.signout()
-            client.emitUiClick(this.state.uiClickSignout)
-            this.update('signOut')
+            this.emitUpdate('signOut')
         },
         showNodeInView() {
             this.state.showNodeInView()
-            client.emitUiClick(this.state.uiClickOpenId)
-        },
-        getSignUpUrl() {
-            return this.state.getSignUpUrl()
-        },
-        getDescription() {
-            return this.state.getDescription()
-        },
-        async updateSubmitButtonText() {
-            if (!(await isBuilderIdConnected())) {
-                this.submitButtonText = 'Sign up or Sign in'
-            } else {
-                this.submitButtonText = `Connect AWS Builder ID with ${this.state.name}`
-            }
         },
     },
 })
@@ -135,6 +117,7 @@ export default defineComponent({
  */
 abstract class BaseBuilderIdState implements AuthForm {
     protected _stage: BuilderIdStage = 'START'
+    #error: string = ''
 
     abstract get name(): string
     abstract get id(): AuthFormId
@@ -143,13 +126,30 @@ abstract class BaseBuilderIdState implements AuthForm {
     abstract get featureType(): FeatureId
     protected abstract _startBuilderIdSetup(): Promise<AuthError | undefined>
     abstract isAuthConnected(): Promise<boolean>
-    abstract showNodeInView(): Promise<void>
-
-    protected constructor() {}
+    abstract _showNodeInView(): Promise<void>
+    abstract isConnectionExists(): Promise<boolean>
+
+    /**
+     * Starts the Builder ID setup.
+     *
+     * Returns true if was successful.
+     */
+    async startBuilderIdSetup(): Promise<boolean> {
+        this.#error = ''
+
+        const authError = await this._startBuilderIdSetup()
+
+        if (authError) {
+            this.#error = authError.text
+            client.failedAuthAttempt(this.id, {
+                reason: authError.id,
+            })
+        } else {
+            this.#error = ''
+            client.successfulAuthAttempt(this.id)
+        }
 
-    async startBuilderIdSetup(): Promise<AuthError | undefined> {
-        this._stage = 'WAITING_ON_USER'
-        return this._startBuilderIdSetup()
+        return authError === undefined
     }
 
     async stage(): Promise<BuilderIdStage> {
@@ -160,6 +160,40 @@ abstract class BaseBuilderIdState implements AuthForm {
 
     async signout(): Promise<void> {
         await client.signoutBuilderId()
+        client.emitUiClick(this.uiClickSignout)
+    }
+
+    get authType(): CredentialSourceId {
+        return 'awsId'
+    }
+
+    get error(): string {
+        return this.#error
+    }
+
+    /**
+     * In the scenario a Builder ID is already connected,
+     * we want to change the submit button text for all unconnected
+     * Builder IDs to something else since they are not techincally
+     * signing in again, but instead adding scopes.
+     */
+    async getSubmitButtonText(): Promise<string> {
+        if (!(await this.anyBuilderIdConnected())) {
+            return 'Sign up or Sign in'
+        } else {
+            return `Connect AWS Builder ID with ${this.name}`
+        }
+    }
+
+    /**
+     * Returns true if any Builder Id is connected
+     */
+    private async anyBuilderIdConnected(): Promise<boolean> {
+        const results = await Promise.all([
+            CodeWhispererBuilderIdState.instance.isAuthConnected(),
+            CodeCatalystBuilderIdState.instance.isAuthConnected(),
+        ])
+        return results.some(isConnected => isConnected)
     }
 
     getSignUpUrl(): string {
@@ -169,6 +203,15 @@ abstract class BaseBuilderIdState implements AuthForm {
     getDescription(): string {
         return 'With AWS Builder ID, sign in for free without an AWS account.'
     }
+
+    startAuthFormInteraction() {
+        return client.startAuthFormInteraction(this.featureType, this.authType)
+    }
+
+    showNodeInView() {
+        this._showNodeInView()
+        client.emitUiClick(this.uiClickOpenId)
+    }
 }
 
 export class CodeWhispererBuilderIdState extends BaseBuilderIdState {
@@ -196,20 +239,26 @@ export class CodeWhispererBuilderIdState extends BaseBuilderIdState {
         return client.isCodeWhispererBuilderIdConnected()
     }
 
+    override isConnectionExists(): Promise<boolean> {
+        return client.hasBuilderId('codewhisperer')
+    }
+
     protected override _startBuilderIdSetup(): Promise<AuthError | undefined> {
         return client.startCodeWhispererBuilderIdSetup()
     }
 
-    override showNodeInView(): Promise<void> {
+    override _showNodeInView(): Promise<void> {
         return client.showCodeWhispererNode()
     }
 
     override getSignUpUrl(): string {
         return 'https://docs.aws.amazon.com/codewhisperer/latest/userguide/whisper-setup-indv-devs.html'
     }
 
+    private constructor() {
+        super()
+    }
     static #instance: CodeWhispererBuilderIdState | undefined
-
     static get instance(): CodeWhispererBuilderIdState {
         return (this.#instance ??= new CodeWhispererBuilderIdState())
     }
@@ -240,46 +289,36 @@ export class CodeCatalystBuilderIdState extends BaseBuilderIdState {
         return client.isCodeCatalystBuilderIdConnected()
     }
 
+    override isConnectionExists(): Promise<boolean> {
+        return client.hasBuilderId('codecatalyst')
+    }
+
     protected override _startBuilderIdSetup(): Promise<AuthError | undefined> {
         return client.startCodeCatalystBuilderIdSetup()
     }
 
-    override showNodeInView(): Promise<void> {
+    override _showNodeInView(): Promise<void> {
         return client.showCodeCatalystNode()
     }
 
-    static #instance: CodeCatalystBuilderIdState | undefined
-
-    static get instance(): CodeCatalystBuilderIdState {
-        return (this.#instance ??= new CodeCatalystBuilderIdState())
-    }
-
     override getDescription(): string {
         return 'You must have an existing CodeCatalyst Space connected to your AWS Builder ID.'
     }
 
     override getSignUpUrl(): string {
         return 'https://aws.amazon.com/codecatalyst/'
     }
-}
 
-/**
- * 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)
+    private constructor() {
+        super()
+    }
+    static #instance: CodeCatalystBuilderIdState | undefined
+    static get instance(): CodeCatalystBuilderIdState {
+        return (this.#instance ??= new CodeCatalystBuilderIdState())
+    }
 }
 </script>
 <style>
 @import './sharedAuthForms.css';
 @import '../shared.css';
-
-#builder-id-form {
-    width: 300px;
-    height: fit-content;
-}
 </style>