authWebview: Setup initial Auth Add Connections webview (#3327)

Problem:

We want to create a webview for Auth setup

Solution:

This does the following:

- Creates a vscode command which can be executed in the command palette to open the webview
- Sets up the initial code for a webview to be shown

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

Author: nkomonen-amazon

package.json

@@ -1099,6 +1099,10 @@
                     "command": "aws.auth.help",
                     "when": "false"
                 },
+                {
+                    "command": "aws.auth.showConnectionsPage",
+                    "when": "aws.isDevMode"
+                },
                 {
                     "command": "aws.dev.openMenu",
                     "when": "aws.isDevMode || isCloud9"
@@ -1983,6 +1987,12 @@
                 "title": "%AWS.command.auth.addConnection%",
                 "category": "%AWS.title%"
             },
+            {
+                "command": "aws.auth.showConnectionsPage",
+                "title": "%AWS.command.auth.showConnectionsPage%",
+                "category": "%AWS.title%",
+                "enablement": "aws.isDevMode"
+            },
             {
                 "command": "aws.auth.switchConnections",
                 "title": "%AWS.command.auth.switchConnections%",

package.nls.json

@@ -76,6 +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.switchConnections": "Switch Connections",
     "AWS.command.auth.signout": "Sign out",
     "AWS.command.github": "View Source on GitHub",

src/credentials/activation.ts

@@ -9,6 +9,8 @@ import { Settings } from '../shared/settings'
 import { Auth } from './auth'
 import { LoginManager } from './loginManager'
 import { fromString } from './providers/credentials'
+import { AuthCommandBackend, AuthCommandDeclarations } from './commands'
+import { registerCommandsWithVSCode } from '../shared/vscode/commands2'
 
 export async function initialize(
     extensionContext: vscode.ExtensionContext,
@@ -24,4 +26,12 @@ export async function initialize(
             loginManager.logout()
         }
     })
+
+    // TODO: To enable this in prod we need to remove the 'when' clause
+    // for: '"command": "aws.auth.showConnectionsPage"' in package.json
+    registerCommandsWithVSCode(
+        extensionContext,
+        new AuthCommandDeclarations(),
+        new AuthCommandBackend(extensionContext)
+    )
 }

src/credentials/commands.ts

@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CommandDeclarations, Commands } from '../shared/vscode/commands2'
+import * as vscode from 'vscode'
+import { showAuthWebview } from './vue/show'
+
+/**
+ * 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)
+    }
+}
+
+/**
+ * Declared commands related to Authentication in the toolkit.
+ */
+export class AuthCommandDeclarations implements CommandDeclarations<AuthCommandBackend> {
+    public readonly declared = {
+        showConnectionsPage: Commands.from(AuthCommandBackend).declareShowConnectionsPage({
+            id: 'aws.auth.showConnectionsPage',
+        }),
+    } as const
+}

src/credentials/vue/index.ts

@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * This module is run within the webview, and will mount the Vue app.
+ */
+
+import { createApp } from 'vue'
+import component from './root.vue'
+
+const create = () => createApp(component)
+const app = create()
+
+app.mount('#vue-app')
+window.addEventListener('remount', () => {
+    app.unmount()
+    create().mount('#vue-app')
+})

src/credentials/vue/root.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="flex-container" style="display: flex">
+        <div id="left-column">I am left column</div>
+        <div id="right-column">I am right column</div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'MyComponent',
+})
+</script>
+
+<style>
+/** By default  */
+.flex-container {
+    display: flex;
+    flex-direction: row;
+    width: 1200px;
+}
+
+/* Makes webview responsive and changes to single column when necessary */
+@media (max-width: 1200px) {
+    .flex-container {
+        flex-direction: column;
+
+        color: red;
+    }
+}
+
+#left-column {
+    flex-grow: 1;
+    max-width: 40%;
+
+    /* This can be deleted, for development purposes */
+    background-color: yellow;
+    color: black;
+    height: 200px;
+}
+
+#right-column {
+    flex-grow: 1;
+    max-width: 60%;
+
+    /* This can be deleted, for development purposes */
+    background-color: aqua;
+    color: black;
+    height: 200px;
+}
+</style>

src/credentials/vue/show.ts

@@ -0,0 +1,45 @@
+/*!
+ * Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * This module sets up the necessary components
+ * for the webview to be shown.
+ */
+
+import { getIdeProperties, isCloud9 } from '../../shared/extensionUtilities'
+import { VueWebview } from '../../webviews/main'
+import * as vscode from 'vscode'
+
+class AuthWebview extends VueWebview {
+    public override id: string = 'authWebview'
+    public override source: string = 'src/credentials/vue/index.js'
+}
+
+const Panel = VueWebview.compilePanel(AuthWebview)
+let activePanel: InstanceType<typeof Panel> | undefined
+let subscriptions: vscode.Disposable[] | undefined
+let submitPromise: Promise<void> | undefined
+
+export async function showAuthWebview(ctx: vscode.ExtensionContext): Promise<void> {
+    submitPromise ??= new Promise<void>((resolve, reject) => {
+        activePanel ??= new Panel(ctx)
+    })
+
+    const webview = await activePanel!.show({
+        title: `Add Connection to ${getIdeProperties().company}`,
+        viewColumn: isCloud9() ? vscode.ViewColumn.One : vscode.ViewColumn.Active,
+    })
+
+    if (!subscriptions) {
+        subscriptions = [
+            webview.onDidDispose(() => {
+                vscode.Disposable.from(...(subscriptions ?? [])).dispose()
+                activePanel = undefined
+                subscriptions = undefined
+                submitPromise = undefined
+            }),
+        ]
+    }
+
+    return submitPromise
+}

src/shared/vscode/commands2.ts

@@ -43,14 +43,53 @@ export interface Command<T extends Callback = Callback> {
     execute(...parameters: Parameters<T>): Promise<ReturnType<T> | undefined>
 }
 
+/**
+ * Represents a command that has been registered with VS Code, meaning
+ * it can be executed with the `executeCommand` API.
+ */
 interface RegisteredCommand<T extends Callback = Callback> extends Command<T> {
     dispose(): void
 }
 
-interface DeclaredCommand<T extends Callback = Callback, U extends any[] = any> extends Command<T> {
+/**
+ * Represents a command that has been declared but not yet registered with
+ * VS Code
+ *
+ * This is a "lazy" command that is only registered when it is actually used.
+ */
+interface DeclaredCommand<T extends Callback = Callback, U extends any[] = any[]> extends Command<T> {
     register(...dependencies: U): RegisteredCommand<T>
 }
 
+/**
+ * Classes that have "declared" commands which wrap the underlying
+ * logic provided by 'T'.
+ *
+ * These declared commands can then be used to do things like register
+ * it as a VS Code command, or to build a tree node that uses the command.
+ *
+ * @param T The class that declares the commands
+ */
+export interface CommandDeclarations<T> {
+    readonly declared: { [K in FunctionKeys<T>]: DeclaredCommand<Functions<T>[K], [T]> }
+}
+
+/**
+ * Using the given inputs will register the given commands with VS Code.
+ *
+ * @param declarations Has the mapping of command names to the backend logic
+ * @param backend The backend logic of the commands
+ */
+export function registerCommandsWithVSCode<T>(
+    extContext: vscode.ExtensionContext,
+    declarations: CommandDeclarations<T>,
+    backend: T
+): void {
+    extContext.subscriptions.push(
+        ...Object.values<DeclaredCommand>(declarations.declared).map(c => c.register(backend))
+    )
+}
+
 /**
  * Minimal wrapper around VS Code's `commands` API to give structure around commands registered
  * and consumed by the extension.