fix(auth): more UX improvements #2981

Problem:
* Lack of validation when entering start URL
* Walkthrough is outdated
* SSO connection labels are too long

Solution:
* Add validation to SSO start URL
* Update the walkthrough
* Use start URL subdomain as label

Author: JadenSimon

package.json

@@ -3124,7 +3124,8 @@
                             "markdown": "resources/walkthrough/setup-connect.md"
                         },
                         "completionEvents": [
-                            "onContext:config.aws.profile"
+                            "onCommand:aws.login",
+                            "onCommand:aws.credentials.profile.create"
                         ]
                     },
                     {

resources/walkthrough/images/aws-toolkit-add-connection.png

@@ -15,17 +15,17 @@ To interact with Amazon Web Services \(AWS\) through the AWS Toolkit for Visual
     >
     > ![AWS Toolkit Command palette, Connect to AWS](./images/aws-toolkit-commandpalette.png)
 
-2. Choose a profile from the list\.
+2. Choose a connection from the list\.
 
-    ![AWS Toolkit command palette choose profile window](./images/aws-toolkit-choose-profile.png)
+    ![AWS Toolkit command palette choose profile window](./images/aws-toolkit-choose-connection.png)
 
-    If you don't have a credentials profile set up, you are prompted to set one up\. Look for a pop\-up in the lower\-right corner of the editor\. Choose **Yes**, and then follow the setup wizard to enter a profile name, your access key ID, and your secret access key\.
+    If you don't have a connection set up, you are prompted to set one up\. Choose **Enter IAM Credentials** in order to view resources in the AWS Explorer. SSO connections cannot be used to view resources in the AWS Explorer at this time.
 
-    ![AWS Toolkit setup profile prompt.](./images/aws-toolkit-cred-prompt.png)
+    ![AWS Toolkit setup profile prompt.](./images/aws-toolkit-add-connection.png)
 
     > **Note**
     >
-    > If you want to provide an external credential process instead of using AWS\-supported credentials, choose **No** and see [Using an external credential process](https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/external-credential-process.html) instead\.
+    > If you want to provide an external credential process instead of using AWS\-supported credentials, exit the wizard and see [Using an external credential process](https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/external-credential-process.html) instead\.
 
 3. Open the **AWS: Explorer** Side Bar, which we call the **_AWS Explorer_**, to verify the connection\. You will see either a list of AWS Regions \(if you have made any Regions visible in the **AWS Explorer**\) or a message to add Regions to the **AWS Explorer**\.
 

resources/walkthrough/images/aws-toolkit-choose-connection.png

@@ -25,7 +25,7 @@ import { SsoClient } from './sso/clients'
 import { getLogger } from '../shared/logger'
 import { CredentialsProviderManager } from './providers/credentialsProviderManager'
 import { asString, CredentialsProvider, fromString } from './providers/credentials'
-import { once, shared } from '../shared/utilities/functionUtils'
+import { once } from '../shared/utilities/functionUtils'
 import { getResourceFromTreeNode } from '../shared/treeview/utils'
 import { Instance } from '../shared/utilities/typeConstructors'
 import { TreeNode } from '../shared/treeview/resourceTreeDataProvider'
@@ -284,6 +284,10 @@ export class Auth implements AuthService, ConnectionManager {
         return this.#activeConnection
     }
 
+    public get hasConnections() {
+        return this.store.listProfiles().length !== 0
+    }
+
     public async restorePreviousSession(): Promise<Connection | undefined> {
         const id = this.store.getCurrentProfileId()
         if (id === undefined) {
@@ -751,12 +755,36 @@ export const createIamItem = () =>
         detail: 'Activates working with resources in the Explorer. Not supported by CodeWhisperer. Requires an access key ID and secret access key.',
     } as DataQuickPickItem<'iam'>)
 
-export const createStartUrlPrompter = (title: string) =>
-    createInputBox({
+export const isIamConnection = (conn?: Connection): conn is IamConnection => conn?.type === 'iam'
+export const isSsoConnection = (conn?: Connection): conn is SsoConnection => conn?.type === 'sso'
+
+export async function createStartUrlPrompter(title: string) {
+    const existingConnections = (await Auth.instance.listConnections())
+        .filter(isSsoConnection)
+        .map(conn => vscode.Uri.parse(conn.startUrl))
+
+    function validateSsoUrl(url: string) {
+        if (!url.match(/^(http|https):\/\//i)) {
+            return 'URLs must start with http:// or https://. Example: https://d-xxxxxxxxxx.awsapps.com/start'
+        }
+
+        try {
+            const uri = vscode.Uri.parse(url, true)
+            if (existingConnections.find(conn => conn.authority.toLowerCase() === uri.authority.toLowerCase())) {
+                return 'A connection for this start URL already exists. Sign out before creating a new one.'
+            }
+        } catch (err) {
+            return `URL is malformed: ${UnknownError.cast(err).message}`
+        }
+    }
+
+    return createInputBox({
         title: `${title}: Enter Start URL`,
-        placeholder: 'https://d-xxxxxxxxxx.awsapps.com/start',
+        placeholder: "Enter start URL for your organization's SSO",
         buttons: createCommonButtons(),
+        validateInput: validateSsoUrl,
     })
+}
 
 // TODO: add specific documentation URL
 Commands.register('aws.auth.help', async () => (await Commands.get('aws.help'))?.execute())
@@ -775,7 +803,8 @@ const addConnection = Commands.register('aws.auth.addConnection', async () => {
         case 'iam':
             return await globals.awsContextCommands.onCommandCreateCredentialsProfile()
         case 'sso': {
-            const startUrl = await createStartUrlPrompter('SSO Connection').prompt()
+            const startUrlPrompter = await createStartUrlPrompter('SSO Connection')
+            const startUrl = await startUrlPrompter.prompt()
             if (!isValidResponse(startUrl)) {
                 throw new CancellationError('user')
             }
@@ -838,20 +867,18 @@ export class AuthNode implements TreeNode<Auth> {
 
     public constructor(public readonly resource: Auth) {}
 
-    // Guard against race conditions when rendering the node
-    private listConnections = shared(() => this.resource.listConnections())
     public async getTreeItem() {
         // Calling this here is robust but `TreeShim` must be instantiated lazily to stop side-effects
         await this.resource.tryAutoConnect()
 
-        const conn = this.resource.activeConnection
-        if (conn === undefined && (await this.listConnections()).length === 0) {
+        if (!this.resource.hasConnections) {
             const item = new vscode.TreeItem(`Connect to ${getIdeProperties().company} to Get Started...`)
             item.command = addConnection.build().asCommand({ title: 'Add Connection' })
 
             return item
         }
 
+        const conn = this.resource.activeConnection
         const itemLabel =
             conn?.label !== undefined
                 ? localize('aws.auth.node.connected', `Connected with {0}`, conn.label)