fix(codecatalyst): Dev Env "Space" input also shows Projects #3292

Problem:
When selecting a Space while creating a Dev Env, the user
sees a quick pick of all Spaces + Projects.

Solution:
- When the user selects a Space, show only the Space names.
- The Project is disabled until a Space is chosen.
- Upon initial loading of the webview, Space names
  are pre-loaded.
- Upon selection of a Space, Projects are pre-loaded
  before the user clicks the 'edit' icon on a Project.

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

Author: nkomonen-amazon

.changes/next-release/Bug Fix-132bdce0-d348-4c2b-bb87-5630a54a22d4.json

@@ -0,0 +1,4 @@
+{
+	"type": "Bug Fix",
+	"description": "Dev Env Space quick pick shows all Spaces + Projects"
+}

src/codecatalyst/vue/create/backend.ts

@@ -33,26 +33,29 @@ import { isCloud9 } from '../../../shared/extensionUtilities'
 import { telemetry } from '../../../shared/telemetry/telemetry'
 import { isNonNullable } from '../../../shared/utilities/tsUtils'
 import { recordSource } from '../../utils'
-import { QuickPickPrompter } from '../../../shared/ui/pickerPrompter'
-import { createProjectPrompter } from '../../wizards/selectResource'
+import { createOrgPrompter, createProjectPrompter } from '../../wizards/selectResource'
 import { GetSourceRepositoryCloneUrlsRequest } from 'aws-sdk/clients/codecatalyst'
+import { QuickPickPrompter } from '../../../shared/ui/pickerPrompter'
 
 interface LinkedResponse {
     readonly type: 'linked'
+    readonly selectedSpace: Pick<CodeCatalystOrg, 'name'>
     readonly selectedProject: CodeCatalystProject
     readonly selectedBranch: CodeCatalystBranch
     readonly newBranch: string
 }
 
 interface EmptyResponse {
     readonly type: 'none'
+    readonly selectedSpace: Pick<CodeCatalystOrg, 'name'>
     readonly selectedProject: CodeCatalystProject
 }
 
 export type SourceResponse = LinkedResponse | EmptyResponse
 
 export class CodeCatalystCreateWebview extends VueWebview {
     private projectPrompter?: QuickPickPrompter<CodeCatalystProject>
+    private spacePrompter?: QuickPickPrompter<CodeCatalystOrg>
 
     public readonly id = 'createCodeCatalyst'
     public readonly source = 'src/codecatalyst/vue/create/index.js'
@@ -64,13 +67,8 @@ export class CodeCatalystCreateWebview extends VueWebview {
     ) {
         super()
 
-        // When webview first loads, an instance of this class
-        // is created.
-        // We build the prompter here since it immeditely starts
-        // fetching the Projects upon creation.
-        // When a user triggers the prompt to select a Project the **first** time,
-        // the fetching of Projects will already be in progress.
-        this.projectPrompter = createProjectPrompter(this.client)
+        // triggers pre-loading of Spaces
+        this.spacePrompter = createOrgPrompter(client)
     }
 
     public close() {
@@ -79,24 +77,38 @@ export class CodeCatalystCreateWebview extends VueWebview {
     }
 
     /**
-     * Opens a quick pick that lists all Projects from all Spaces.
+     * Opens a quick pick that lists all Spaces of the user.
      *
-     * @param spaceName Only show Projects from this Space in the quick pick. If undefined,
-     *                  shows Projects from all Spaces.
-     * @returns Project if it was selected, otherwise undefined due to user cancellation.
+     * @returns Space if it was selected, otherwise undefined due to user cancellation.
      */
-    public async quickPickProject(spaceName?: CodeCatalystOrg['name']): Promise<CodeCatalystProject | undefined> {
-        // We use an existing prompter since it would have already started
-        // fetching Projects (improved UX).
-        if (this.projectPrompter === undefined) {
-            this.projectPrompter = createProjectPrompter(this.client, spaceName)
+    public async quickPickSpace(): Promise<CodeCatalystOrg | undefined> {
+        this.spacePrompter = this.spacePrompter ?? createOrgPrompter(this.client)
+        const selectedSpace = await this.spacePrompter.prompt()
+        this.spacePrompter = undefined // We want the prompter to be re-created on subsequent calls
+
+        if (!isValidResponse(selectedSpace)) {
+            return undefined
         }
 
+        // This will initiate preloading of the projects
+        this.projectPrompter = createProjectPrompter(this.client, selectedSpace?.name)
+
+        return selectedSpace
+    }
+
+    /**
+     * Opens a quick pick that lists all Projects from a given Space.
+     *
+     * @param spaceName Space to show Projects from
+     * @returns Project if it was selected, otherwise undefined due to user cancellation.
+     */
+    public async quickPickProject(spaceName: CodeCatalystOrg['name']): Promise<CodeCatalystProject | undefined> {
+        this.projectPrompter = this.projectPrompter ?? createProjectPrompter(this.client, spaceName)
         const selectedProject = await this.projectPrompter.prompt()
-        this.projectPrompter = undefined
+        this.projectPrompter = undefined // We want the prompter to be re-created on subsequent calls
 
         if (!isValidResponse(selectedProject)) {
-            return
+            return undefined
         }
 
         return selectedProject

src/codecatalyst/vue/create/source.vue

@@ -15,15 +15,15 @@
         <div class="modes flex-sizing mt-16">
             <span class="flex-sizing mt-8">
                 <label class="option-label soft">Space</label>
-                <button class="project-button" @click="quickPickProject()">
+                <button class="project-button" @click="quickPickSpace()">
                     {{ selectedSpaceName }}
                     <span class="icon icon-lg icon-vscode-edit edit-icon"></span>
                 </button>
             </span>
 
             <span class="flex-sizing mt-8">
                 <label class="option-label soft">Project</label>
-                <button class="project-button" @click="quickPickProject(model.selectedProject?.org.name)">
+                <button class="project-button" @click="quickPickProject()" :disabled="!isSpaceSelected">
                     {{ selectedProjectName }}
                     <span class="icon icon-lg icon-vscode-edit edit-icon"></span>
                 </button>
@@ -71,15 +71,15 @@
         <div class="modes flex-sizing mt-16">
             <span class="flex-sizing mt-8">
                 <label class="option-label soft">Space</label>
-                <button class="project-button" @click="quickPickProject()">
+                <button class="project-button" @click="quickPickSpace()">
                     {{ selectedSpaceName }}
                     <span class="icon icon-lg icon-vscode-edit edit-icon"></span>
                 </button>
             </span>
 
             <span class="flex-sizing mt-8">
                 <label class="option-label soft">Project</label>
-                <button class="project-button" @click="quickPickProject(model.selectedProject?.org.name)">
+                <button class="project-button" @click="quickPickProject()" :disabled="!isSpaceSelected">
                     {{ selectedProjectName }}
                     <span class="icon icon-lg icon-vscode-edit edit-icon"></span>
                 </button>
@@ -90,7 +90,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { CodeCatalystBranch, CodeCatalystOrg, CodeCatalystProject } from '../../../shared/clients/codecatalystClient'
+import { CodeCatalystBranch, CodeCatalystProject } from '../../../shared/clients/codecatalystClient'
 import { WebviewClientFactory } from '../../../webviews/client'
 import { createClass, createType } from '../../../webviews/util'
 import { CodeCatalystCreateWebview, SourceResponse } from './backend'
@@ -214,14 +214,17 @@ export default defineComponent({
                 return 'Branch already exists'
             }
         },
+        isSpaceSelected() {
+            return !!this.model.selectedSpace
+        },
         isProjectSelected() {
             return !!this.model.selectedProject
         },
         selectedSpaceName() {
-            if (this.model.selectedProject === undefined) {
+            if (this.model.selectedSpace === undefined) {
                 return 'Not Selected'
             }
-            return this.model.selectedProject.org.name
+            return this.model.selectedSpace.name
         },
         selectedProjectName() {
             if (this.model.selectedProject === undefined) {
@@ -248,12 +251,24 @@ export default defineComponent({
             })
             this.update()
         },
-        async quickPickProject(spaceToGetProjects: CodeCatalystOrg['name'] | undefined = undefined) {
-            const res = await client.quickPickProject(spaceToGetProjects)
-            if (res === undefined) {
+        async quickPickSpace() {
+            const space = await client.quickPickSpace()
+            if (space === undefined) {
+                return
+            }
+            this.$emit('update:modelValue', { ...this.modelValue, selectedSpace: space, selectedProject: undefined })
+        },
+        async quickPickProject() {
+            const selectedSpace = this.modelValue.selectedSpace
+            if (selectedSpace === undefined) {
+                return
+            }
+
+            const project = await client.quickPickProject(selectedSpace.name)
+            if (project === undefined) {
                 return
             }
-            this.$emit('update:modelValue', { ...this.modelValue, selectedProject: res })
+            this.$emit('update:modelValue', { ...this.modelValue, selectedProject: project })
         },
     },
     emits: {

src/testE2E/codecatalyst/client.test.ts

@@ -117,6 +117,7 @@ describe('Test how this codebase uses the CodeCatalyst API', function () {
             const emptyDevEnvSettings = buildDevEnvSettings()
             const emptyDevEnv = await webviewClient.createDevEnvOfType(emptyDevEnvSettings, {
                 type: 'none',
+                selectedSpace: { name: spaceName },
                 selectedProject: { name: projectName, org: { name: spaceName }, type: 'project' },
             })
             assert.strictEqual(emptyDevEnv.project.name, projectName)
@@ -128,6 +129,7 @@ describe('Test how this codebase uses the CodeCatalyst API', function () {
 
             const actualDevEnv = await webviewClient.createDevEnvOfType(differentDevEnvSettings, {
                 type: 'none',
+                selectedSpace: { name: spaceName },
                 selectedProject: { name: projectName, org: { name: spaceName }, type: 'project' },
             })
 
@@ -202,6 +204,7 @@ describe('Test how this codebase uses the CodeCatalyst API', function () {
             // Create multiple Dev Envs
             const projectSource: SourceResponse = {
                 type: 'none',
+                selectedSpace: { name: spaceName },
                 selectedProject: { name: isolatedProjectName, org: { name: spaceName }, type: 'project' },
             }
             const createdDevEnvs = await Promise.all([