feat(codecatalyst): Dev Env project quickpick #3243

Problem:
When using the Create Dev Env webview we used
a drop down menu to provide all possible Projects.
The problem is that querying all Projects takes time
and nothing would show on the screen for a while.
Additionally, if the user had many projects from
multiple spaces it was not easy to find

Solution:
- Instead of a dropdown menu use an async quick pick
which will continuously load new Projects as they
come in the the paginated query for all Projects.
- Along with using a quick pick, the user can easily
filter the Projects using the quick picks built in
filtering mechanism.
- Upon initial load of the webview, the fetching of
  projects is started immediately. This will improve UX.

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

Author: nkomonen-amazon

src/codecatalyst/vue/create/backend.ts

@@ -32,6 +32,8 @@ 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'
 
 interface LinkedResponse {
     readonly type: 'linked'
@@ -48,6 +50,8 @@ interface EmptyResponse {
 export type SourceResponse = LinkedResponse | EmptyResponse
 
 export class CodeCatalystCreateWebview extends VueWebview {
+    private projectPrompter?: QuickPickPrompter<CodeCatalystProject>
+
     public readonly id = 'createCodeCatalyst'
     public readonly source = 'src/codecatalyst/vue/create/index.js'
 
@@ -57,15 +61,43 @@ export class CodeCatalystCreateWebview extends VueWebview {
         private readonly onComplete: (devenv?: DevEnvironment) => void
     ) {
         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)
     }
 
     public close() {
         this.dispose()
         this.onComplete()
     }
 
-    public async getProjects() {
-        return this.client.listResources('project').flatten().promise()
+    /**
+     * Opens a quick pick that lists all Projects from all Spaces.
+     *
+     * @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.
+     */
+    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)
+        }
+
+        const selectedProject = await this.projectPrompter.prompt()
+        this.projectPrompter = undefined
+
+        if (!isValidResponse(selectedProject)) {
+            return
+        }
+
+        return selectedProject
     }
 
     public async getBranches(project: CodeCatalystProject) {

src/codecatalyst/vue/create/source.vue

@@ -12,15 +12,23 @@
     </div>
 
     <div class="source-pickers" v-if="model.type === 'linked'">
-        <span style="width: 100%">
-            <label class="option-label soft">Project</label>
-            <select class="picker" v-model="model.selectedProject" @input="update">
-                <option disabled :value="undefined">{{ loadingProjects ? 'Loading...' : 'Select a project' }}</option>
-                <option v-for="project in projects" :key="project.name" :value="project">
-                    {{ `${project.org.name} / ${project.name}` }}
-                </option>
-            </select>
-        </span>
+        <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()">
+                    {{ 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)">
+                    {{ selectedProjectName }}
+                    <span class="icon icon-lg icon-vscode-edit edit-icon"></span>
+                </button>
+            </span>
+        </div>
 
         <div class="modes flex-sizing mt-16">
             <!-- Existing branch -->
@@ -73,7 +81,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { CodeCatalystBranch, CodeCatalystProject } from '../../../shared/clients/codecatalystClient'
+import { CodeCatalystBranch, CodeCatalystOrg, CodeCatalystProject } from '../../../shared/clients/codecatalystClient'
 import { WebviewClientFactory } from '../../../webviews/client'
 import { createClass, createType } from '../../../webviews/util'
 import { CodeCatalystCreateWebview, SourceResponse } from './backend'
@@ -112,7 +120,6 @@ export default defineComponent({
     },
     async created() {
         this.loadingProjects = true
-        this.projects = await client.getProjects().finally(() => (this.loadingProjects = false))
     },
     watch: {
         async 'model.selectedProject'(project?: CodeCatalystProject) {
@@ -162,6 +169,21 @@ export default defineComponent({
                 return 'Branch already exists'
             }
         },
+        isProjectSelected() {
+            return !!this.model.selectedProject
+        },
+        selectedSpaceName() {
+            if (this.model.selectedProject === undefined) {
+                return 'Not Selected'
+            }
+            return this.model.selectedProject.org.name
+        },
+        selectedProjectName() {
+            if (this.model.selectedProject === undefined) {
+                return 'Not Selected'
+            }
+            return this.model.selectedProject.name
+        },
     },
     methods: {
         update() {
@@ -181,6 +203,13 @@ export default defineComponent({
             })
             this.update()
         },
+        async quickPickProject(spaceToGetProjects: CodeCatalystOrg['name'] | undefined = undefined) {
+            const res = await client.quickPickProject(spaceToGetProjects)
+            if (res === undefined) {
+                return
+            }
+            this.$emit('update:modelValue', { ...this.modelValue, selectedProject: res })
+        },
     },
     emits: {
         'update:modelValue': (value: InstanceType<typeof VueModel>) => true,
@@ -242,4 +271,16 @@ body.vscode-light .mode-container[data-disabled='true'] .config-item {
 #branch-input {
     min-width: 300px;
 }
+
+.project-button {
+    background-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
+    font-weight: bold;
+}
+
+.edit-icon {
+    margin-left: 10px;
+    color: #0078d7;
+}
 </style>

src/codecatalyst/wizards/selectResource.ts

@@ -111,10 +111,10 @@ export function createOrgPrompter(
 
 export function createProjectPrompter(
     client: codecatalyst.CodeCatalystClient,
-    org?: codecatalyst.CodeCatalystOrg
+    spaceName?: codecatalyst.CodeCatalystOrg['name']
 ): QuickPickPrompter<codecatalyst.CodeCatalystProject> {
     const helpUri = isCloud9() ? docs.cloud9.main : docs.vscode.main
-    const projects = org ? client.listProjects({ spaceName: org.name }) : client.listResources('project')
+    const projects = spaceName ? client.listProjects({ spaceName }) : client.listResources('project')
 
     return createResourcePrompter(projects, helpUri, {
         title: 'Select a CodeCatalyst Project',