authWebview: UI buttons open auth webview (#3539)

* refactor: make AuthCommandDeclarations singleton

This makes this class a singleton and updates
existing use cases

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

* uiOpensView: Developer Tools 'Start' button opens webview

When the 'Start' node for CC or CW is selected
this will now have the webview open instead
of the builder id setup prompts

- still need to setup the start button to cause
  webview to open on specific service item

- Also added a fallback when not in dev mode to use
the old add connection functionality.

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

* uiOpenView: 'Start' from developer tools opens with service already selected

When the user clicks the 'Start' button the auth webview
page will be openend with the specific service already
selected.

Eg: Clicking 'Start' in CodeCatalyst opens up the webview
directly to CodeCatalyst

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

* explorer: vscode command to show 'developer tools' root node

- Creates vscode commands that can eventually be executed
  and will show the root node (cc, cw, ..) in the developer
  tools tree view

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

* button in form to open node

After the user has signed in with BuilderID
to CC or CW, we will now show a button which
can be clicked and will open the appropriate
node in the 'Developer Tools' view.

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

* fix: circular dependency

Problem:

The getStartedCommand is now used in multiple
places outside of the explorer. This was causing
a circular dependency.

Solution:

Move the getStartedCommand to the utils module

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

* uiOpensView: Resource Explorer credentials form button

Adds a button once the resource explorer credentials
are authenticated to open the Resource Explorer
view

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

* uiOpensView: Identity Center form button opens node

Now once CW is signed in with Identity Center we will
show a button that expands the CW node in the Developer
Tools menu

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

* uiOpensView: 'Add New Connection' quick pick opens webview

In the connection selection quick pick the last option
is 'Add New Connection' that previously led in to
another vscode wizard.

Now this instead opens the Add Connection webview.

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

* codewhisperer: Update tests to point to new sso signup command

Problem:

Before the new auth webview, CW used a quickpick wizard for
users to setup their required auth (sso, builderid). They used
a specific command and ensured they used it in their unit tests.

But now with the auth webview changes we will not be redirecting
them to the quickpick wizard anymore. Instead, we will redirect
users to the webview. This uses a different command name.

Solution:

Update the unit tests to point to the new vscode command name
that will be used.

Additionally, since the whole auth webview feature is not ready
we fallback to the old functionality if the user is not in
dev mode (an aws extension setting).

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

* uiOpensView: change auth id to lowercase

Changes the IDs of service to lowercase
and in some cases certain names should
be one word (CC and CW).

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

* uiOpensView: lowercase + single service id

converts the service id values to lower case
and makes some as single words

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

* uiOpensView: aws.auth.showConnectionsPage > aws.auth.manageConnections

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

---------

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

Author: nkomonen-amazon

package.json

@@ -1108,7 +1108,7 @@
                     "when": "false"
                 },
                 {
-                    "command": "aws.auth.showConnectionsPage",
+                    "command": "aws.auth.manageConnections",
                     "when": "aws.isDevMode"
                 },
                 {
@@ -1872,7 +1872,7 @@
             ],
             "aws.auth": [
                 {
-                    "command": "aws.auth.addConnection",
+                    "command": "aws.auth.manageConnections",
                     "group": "0@1"
                 },
                 {
@@ -2020,10 +2020,9 @@
                 "category": "%AWS.title%"
             },
             {
-                "command": "aws.auth.showConnectionsPage",
+                "command": "aws.auth.manageConnections",
                 "title": "%AWS.command.auth.showConnectionsPage%",
-                "category": "%AWS.title%",
-                "enablement": "aws.isDevMode"
+                "category": "%AWS.title%"
             },
             {
                 "command": "aws.auth.switchConnections",

package.nls.json

@@ -76,7 +76,7 @@
     "AWS.command.apig.invokeRemoteRestApi": "Invoke on AWS",
     "AWS.command.apig.invokeRemoteRestApi.cn": "Invoke on Amazon",
     "AWS.command.auth.addConnection": "Add New Connection",
-    "AWS.command.auth.showConnectionsPage": "Show Auth Connections Page",
+    "AWS.command.auth.showConnectionsPage": "Add New Connection",
     "AWS.command.auth.switchConnections": "Switch Connections",
     "AWS.command.auth.signout": "Sign out",
     "AWS.command.github": "View Source on GitHub",

src/auth/activation.ts

@@ -26,10 +26,10 @@ export async function initialize(
     })
 
     // TODO: To enable this in prod we need to remove the 'when' clause
-    // for: '"command": "aws.auth.showConnectionsPage"' in package.json
+    // for: '"command": "aws.auth.manageConnections"' in package.json
     registerCommandsWithVSCode(
         extensionContext,
-        new AuthCommandDeclarations(),
+        AuthCommandDeclarations.instance,
         new AuthCommandBackend(extensionContext)
     )
 }

src/auth/commands.ts

@@ -5,25 +5,40 @@
 import * as vscode from 'vscode'
 import { CommandDeclarations, Commands } from '../shared/vscode/commands2'
 import { showAuthWebview } from './ui/vue/show'
+import { ServiceItemId, isServiceItemId } from './ui/vue/types'
+import { showConnectionsPageCommand } from './utils'
 
 /**
  * The methods with backend logic for the Auth commands.
  */
 export class AuthCommandBackend {
     constructor(private readonly extContext: vscode.ExtensionContext) {}
 
-    public async showConnectionsPage() {
-        await showAuthWebview(this.extContext)
+    public showConnectionsPage(serviceToShow?: ServiceItemId) {
+        // Edge case where called by vscode UI and non ServiceItemId object
+        // is passed in.
+        if (!isServiceItemId(serviceToShow)) {
+            serviceToShow = undefined
+        }
+        return showAuthWebview(this.extContext, serviceToShow)
     }
 }
 
 /**
  * Declared commands related to Authentication in the toolkit.
  */
 export class AuthCommandDeclarations implements CommandDeclarations<AuthCommandBackend> {
+    static #instance: AuthCommandDeclarations
+
+    static get instance(): AuthCommandDeclarations {
+        return (this.#instance ??= new AuthCommandDeclarations())
+    }
+
+    private constructor() {}
+
     public readonly declared = {
         showConnectionsPage: Commands.from(AuthCommandBackend).declareShowConnectionsPage({
-            id: 'aws.auth.showConnectionsPage',
+            id: showConnectionsPageCommand,
         }),
     } as const
 }

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

@@ -28,6 +28,10 @@
                 <div class="form-section">
                     <div v-on:click="signout()" style="cursor: pointer; color: #75beff">Sign out</div>
                 </div>
+
+                <div class="form-section">
+                    <button v-on:click="showNodeInView()">Open {{ name }} in Toolkit</button>
+                </div>
             </div>
         </div>
     </div>
@@ -62,6 +66,7 @@ export default defineComponent({
             isConnected: false,
             builderIdCode: '',
             canShowAll: false,
+            name: this.state.name,
         }
     },
     async created() {
@@ -84,6 +89,9 @@ export default defineComponent({
 
             this.update()
         },
+        showNodeInView() {
+            this.state.showNodeInView()
+        },
     },
 })
 
@@ -93,9 +101,11 @@ export default defineComponent({
 abstract class BaseBuilderIdState implements AuthStatus {
     protected _stage: BuilderIdStage = 'START'
 
+    abstract get name(): string
     abstract get id(): AuthFormId
     protected abstract _startBuilderIdSetup(): Promise<void>
     abstract isAuthConnected(): Promise<boolean>
+    abstract showNodeInView(): Promise<void>
 
     async startBuilderIdSetup(): Promise<void> {
         this._stage = 'WAITING_ON_USER'
@@ -114,8 +124,12 @@ abstract class BaseBuilderIdState implements AuthStatus {
 }
 
 export class CodeWhispererBuilderIdState extends BaseBuilderIdState {
+    override get name(): string {
+        return 'CodeWhisperer'
+    }
+
     override get id(): AuthFormId {
-        return 'BUILDER_ID_CODE_WHISPERER'
+        return 'builderIdCodeWhisperer'
     }
 
     override isAuthConnected(): Promise<boolean> {
@@ -125,11 +139,19 @@ export class CodeWhispererBuilderIdState extends BaseBuilderIdState {
     protected override _startBuilderIdSetup(): Promise<void> {
         return client.startCodeWhispererBuilderIdSetup()
     }
+
+    override showNodeInView(): Promise<void> {
+        return client.showCodeWhispererNode()
+    }
 }
 
 export class CodeCatalystBuilderIdState extends BaseBuilderIdState {
+    override get name(): string {
+        return 'CodeCatalyst'
+    }
+
     override get id(): AuthFormId {
-        return 'BUILDER_ID_CODE_CATALYST'
+        return 'builderIdCodeCatalyst'
     }
 
     override isAuthConnected(): Promise<boolean> {
@@ -139,6 +161,10 @@ export class CodeCatalystBuilderIdState extends BaseBuilderIdState {
     protected override _startBuilderIdSetup(): Promise<void> {
         return client.startCodeCatalystBuilderIdSetup()
     }
+
+    override showNodeInView(): Promise<void> {
+        return client.showCodeCatalystNode()
+    }
 }
 </script>
 <style>

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

@@ -3,6 +3,10 @@
         <div>
             <FormTitle :isConnected="isConnected">IAM Credentials</FormTitle>
 
+            <div class="form-section">
+                <button v-if="isConnected" v-on:click="showResourceExplorer">Open Resource Explorer</button>
+            </div>
+
             <div v-if="isConnected" class="form-section" v-on:click="toggleShowForm()" id="collapsible">
                 <div :class="collapsibleClass"></div>
                 <div>Add another profile</div>
@@ -135,7 +139,7 @@ export default defineComponent({
         async updateConnectedStatus() {
             return this.state.isAuthConnected().then(isConnected => {
                 this.isConnected = isConnected
-                this.emitAuthConnectionUpdated('CREDENTIALS')
+                this.emitAuthConnectionUpdated('credentials')
             })
         },
         async submitData() {
@@ -169,6 +173,9 @@ export default defineComponent({
         editCredentialsFile() {
             client.editCredentialsFile()
         },
+        showResourceExplorer() {
+            client.showResourceExplorer()
+        },
     },
     watch: {
         'data.profileName'(newVal) {

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

@@ -42,6 +42,10 @@
                 <div class="form-section">
                     <div v-on:click="signout()" style="cursor: pointer; color: #75beff">Sign out</div>
                 </div>
+
+                <div class="form-section">
+                    <button v-on:click="showView()">Open {{ authName }} in Toolkit</button>
+                </div>
             </div>
         </div>
     </div>
@@ -85,6 +89,7 @@ export default defineComponent({
             stage: 'START' as IdentityCenterStage,
 
             canShowAll: false,
+            authName: this.state.name,
         }
     },
 
@@ -122,6 +127,9 @@ export default defineComponent({
 
             this.canSubmit = await this.state.canSubmit()
         },
+        showView() {
+            this.state.showView()
+        },
     },
     watch: {
         'data.startUrl'(value: string) {
@@ -151,8 +159,10 @@ abstract class BaseIdentityCenterState implements AuthStatus {
     }
 
     abstract get id(): AuthFormId
+    abstract get name(): string
     protected abstract _startIdentityCenterSetup(): Promise<void>
     abstract isAuthConnected(): Promise<boolean>
+    abstract showView(): Promise<void>
 
     setValue(key: IdentityCenterKey, value: string) {
         this._data[key] = value
@@ -199,7 +209,11 @@ abstract class BaseIdentityCenterState implements AuthStatus {
 
 export class CodeWhispererIdentityCenterState extends BaseIdentityCenterState {
     override get id(): AuthFormId {
-        return 'IDENTITY_CENTER_CODE_WHISPERER'
+        return 'identityCenterCodeWhisperer'
+    }
+
+    override get name(): string {
+        return 'CodeWhisperer'
     }
 
     protected override async _startIdentityCenterSetup(): Promise<void> {
@@ -210,6 +224,10 @@ export class CodeWhispererIdentityCenterState extends BaseIdentityCenterState {
     override async isAuthConnected(): Promise<boolean> {
         return client.isCodeWhispererIdentityCenterConnected()
     }
+
+    override async showView(): Promise<void> {
+        client.showCodeWhispererNode()
+    }
 }
 </script>
 <style>

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

@@ -8,10 +8,10 @@ import { AuthFormId } from './types'
  * The state instance of all auth forms
  */
 const authFormsState: Readonly<Record<AuthFormId, any>> = {
-    CREDENTIALS: new CredentialsState() as CredentialsState,
-    BUILDER_ID_CODE_WHISPERER: new CodeWhispererBuilderIdState(),
-    BUILDER_ID_CODE_CATALYST: new CodeCatalystBuilderIdState(),
-    IDENTITY_CENTER_CODE_WHISPERER: new CodeWhispererIdentityCenterState(),
+    credentials: new CredentialsState() as CredentialsState,
+    builderIdCodeWhisperer: new CodeWhispererBuilderIdState(),
+    builderIdCodeCatalyst: new CodeCatalystBuilderIdState(),
+    identityCenterCodeWhisperer: new CodeWhispererIdentityCenterState(),
 } as const
 
 export interface AuthStatus {

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

@@ -4,7 +4,7 @@
  */
 
 export type AuthFormId =
-    | 'CREDENTIALS'
-    | 'BUILDER_ID_CODE_WHISPERER'
-    | 'BUILDER_ID_CODE_CATALYST'
-    | 'IDENTITY_CENTER_CODE_WHISPERER'
+    | 'credentials'
+    | 'builderIdCodeWhisperer'
+    | 'builderIdCodeCatalyst'
+    | 'identityCenterCodeWhisperer'

src/auth/ui/vue/root.vue

@@ -98,6 +98,7 @@ export default defineComponent({
         }
     },
     async created() {
+        await this.selectInitialService()
         await this.updateServiceConnections()
 
         // This handles the case where non-webview auth setup is used.
@@ -111,6 +112,9 @@ export default defineComponent({
             // this forced rerender will display the new state
             this.rerenderSelectedContentWindow()
         })
+        client.onDidSelectService((id: ServiceItemId) => {
+            this.selectService(id)
+        })
     },
     mounted() {
         window.addEventListener('resize', this.updateWindowWidth)
@@ -157,6 +161,10 @@ export default defineComponent({
             serviceItemsState.toggleSelected(id)
             this.renderItems()
         },
+        selectService(id: ServiceItemId) {
+            serviceItemsState.select(id)
+            this.renderItems()
+        },
         /**
          * Builds a unique key for a service item to optimize re-rendering.
          *
@@ -189,14 +197,14 @@ export default defineComponent({
         },
         async updateServiceConnections() {
             return Promise.all([
-                this.serviceItemsAuthStatus.RESOURCE_EXPLORER.isAuthConnected().then(isConnected => {
-                    this.updateServiceLock('RESOURCE_EXPLORER', isConnected)
+                this.serviceItemsAuthStatus.resourceExplorer.isAuthConnected().then(isConnected => {
+                    this.updateServiceLock('resourceExplorer', isConnected)
                 }),
-                this.serviceItemsAuthStatus.CODE_WHISPERER.isAuthConnected().then(isConnected => {
-                    this.updateServiceLock('CODE_WHISPERER', isConnected)
+                this.serviceItemsAuthStatus.codewhisperer.isAuthConnected().then(isConnected => {
+                    this.updateServiceLock('codewhisperer', isConnected)
                 }),
-                this.serviceItemsAuthStatus.CODE_CATALYST.isAuthConnected().then(isConnected => {
-                    this.updateServiceLock('CODE_CATALYST', isConnected)
+                this.serviceItemsAuthStatus.codecatalyst.isAuthConnected().then(isConnected => {
+                    this.updateServiceLock('codecatalyst', isConnected)
                 }),
             ]).then(() => this.renderItems())
         },
@@ -207,6 +215,12 @@ export default defineComponent({
             // Arbitrarily toggles value between 0 and 1
             this.rerenderContentWindowKey = this.rerenderContentWindowKey === 0 ? 1 : 0
         },
+        async selectInitialService() {
+            const initialService = await client.getInitialService()
+            if (initialService) {
+                this.selectService(initialService)
+            }
+        },
     },
 })
 </script>