Sort project list in data store creator

app/components/data-stores/create/DataStoreProjectInitializer.vue

@@ -5,6 +5,7 @@ import { useRoute } from "vue-router";
 import InputText from "primevue/inputtext";
 import RadioButton from "primevue/radiobutton";
 import Select from "primevue/select";
+import AutoComplete from "primevue/autocomplete";
 import InputNumber from "primevue/inputnumber";
 import InputGroupAddon from "primevue/inputgroupaddon";
 import InputGroup from "primevue/inputgroup";
@@ -66,7 +67,32 @@ const selectedBucketAccessPolicy = ref<allowedBucketAccessPolicies>("Private");
 const bucketAccessKey = ref<string>("");
 const bucketSecretKey = ref<string>("");
 
-const selectedProject = ref<AvailableProject | undefined>();
+const selectedProject = ref<AvailableProject | string | null | undefined>();
+const selectedProjectOption = computed<AvailableProject | undefined>(() =>
+  selectedProject.value && typeof selectedProject.value === "object"
+    ? selectedProject.value
+    : undefined,
+);
+
+const sortedProjects = computed(() =>
+  [...availableProjects.value].sort((a, b) => {
+    if (!a.name) return 1;
+    if (!b.name) return -1;
+    return a.name.localeCompare(b.name);
+  }),
+);
+
+const projectSuggestions = ref<AvailableProject[]>([]);
+
+// Show all projs if empty
+function searchProjects(event: { query: string }) {
+  const query = event.query.trim().toLowerCase();
+  projectSuggestions.value = query
+    ? sortedProjects.value.filter((proj) =>
+        (proj.name ?? proj.id).toLowerCase().includes(query),
+      )
+    : [...sortedProjects.value];
+}
 
 const dataStoreSettingsMap: Map<string, string> = new Map([
   ["name", "Project"],
@@ -98,14 +124,15 @@ const acceptedProtocols = [
 ];
 
 function rerollDataStoreName() {
-  if (selectedProject.value) {
+  const project = selectedProjectOption.value;
+  if (project) {
     dataStoreName.value = generateRandomDataStoreName(
-      selectedProject.value.name ?? selectedProject.value.id,
+      project.name ?? project.id,
     );
   }
 }
 
-watch(selectedProject, rerollDataStoreName);
+watch(selectedProjectOption, rerollDataStoreName);
 
 // Preselect the project when navigated here with a projectId query parameter
 const route = useRoute();
@@ -179,7 +206,7 @@ async function onSubmitCreateDataStoreAndProject() {
 
   const configSettings: BodyKongInitializeKongInitializePost = {
     datastore: datastoreSettings,
-    project_id: selectedProject.value!.id,
+    project_id: selectedProjectOption.value!.id,
     ds_type: selectedDataStoreType.value,
   };
 
@@ -298,12 +325,16 @@ async function onSubmitCreateDataStoreAndProject() {
                 <i class="pi pi-pen-to-square"></i>
                 <p class="data-store-field-name-box">Project</p>
               </InputGroupAddon>
-              <Select
+              <AutoComplete
                 v-model="selectedProject"
-                :options="availableProjects"
+                :suggestions="projectSuggestions"
                 class="project-picker"
+                dropdown
+                fluid
+                forceSelection
                 optionLabel="name"
-                placeholder="Select a Project"
+                placeholder="Select or search for a project"
+                @complete="searchProjects"
               />
             </InputGroup>
             <InputGroup>
@@ -325,7 +356,7 @@ async function onSubmitCreateDataStoreAndProject() {
               />
               <Button
                 v-tooltip.top="'Suggest a new random name'"
-                :disabled="!selectedProject"
+                :disabled="!selectedProjectOption"
                 class="reroll-name-btn"
                 icon="pi pi-refresh"
                 severity="secondary"

test/components/data-stores/create/DataStoreProjectInitializer.spec.ts

@@ -112,15 +112,71 @@ describe("DataStoreProjectInitializer.vue", () => {
     });
   }
 
+  async function openProjectDropdown() {
+    await wrapper.find(".p-autocomplete-dropdown").trigger("click");
+    await flushPromises();
+  }
+
+  async function selectProject(project: AvailableProject) {
+    await openProjectDropdown();
+    const listItem = wrapper.find(
+      `.p-autocomplete-option[aria-label="${project.name}"]`,
+    );
+    expect(listItem.exists()).toBe(true);
+    await listItem.trigger("click");
+    await innerVm().$nextTick();
+    expect(innerVm().selectedProject.id).toBe(project.id);
+  }
+
   it("Create Data Store - Header", () => {
     expect(wrapper).toBeTruthy();
     expect(wrapper.text()).toContain("Create a Data Store for a Project");
     expect(wrapper.text()).toContain("Helpful tooltips");
   });
 
-  it("Check data store project dropdown options", () => {
+  it("Check data store project dropdown options", async () => {
+    expect(
+      wrapper.find(".p-autocomplete-input").attributes("placeholder"),
+    ).toBe("Select or search for a project");
+    expect(wrapper.find(".p-autocomplete-option").exists()).toBe(false);
+
+    await openProjectDropdown();
+
+    const options = wrapper.findAll(".p-autocomplete-option");
+    expect(options).toHaveLength(fakeParsedProjects.length);
     const dropDownOptions = fakeParsedProjects.map((item) => item.name);
-    checkDropdown(".project-picker", dropDownOptions, "Select a Project");
+    options.forEach((option) => {
+      expect(option.text()).toBeOneOf(dropDownOptions);
+    });
+  });
+
+  it("Filters the project suggestions by the typed query", async () => {
+    const target = fakeParsedProjects[1]!;
+    const autoComplete = wrapper.findComponent(".project-picker");
+
+    await autoComplete.vm.$emit("complete", { query: "-2" });
+    await innerVm().$nextTick();
+    expect(
+      innerVm().projectSuggestions.map((p: AvailableProject) => p.name),
+    ).toEqual([target.name]);
+
+    // An empty query (i.e. the dropdown button) falls back to every project
+    await autoComplete.vm.$emit("complete", { query: "" });
+    await innerVm().$nextTick();
+    expect(innerVm().projectSuggestions).toHaveLength(
+      fakeParsedProjects.length,
+    );
+  });
+
+  it("Sorts the project suggestions alphabetically", async () => {
+    const autoComplete = wrapper.findComponent(".project-picker");
+    await autoComplete.vm.$emit("complete", { query: "" });
+    await innerVm().$nextTick();
+
+    const names = innerVm().projectSuggestions.map(
+      (p: AvailableProject) => p.name,
+    );
+    expect(names).toEqual([...names].sort());
   });
 
   it("Check data store type dropdown options", () => {
@@ -160,23 +216,7 @@ describe("DataStoreProjectInitializer.vue", () => {
     protocol: string = "http",
     // methods?: string[],
   ) {
-    await wrapper.find(".project-picker").trigger("click"); // open dropdown menu
-    expect(wrapper.findAll(".p-select-option").length).toBe(
-      fakeParsedProjects.length,
-    );
-    const listItem = wrapper.find(`li[aria-label="${projectDropdown.name}"]`);
-    expect(listItem.exists()).toBe(true);
-    await listItem.trigger("click");
-    // Can't get manually clicking option to work so manually setting it
-    // Use the actual availableProjects entry to ensure object identity matches Select options
-    const matchingProject = innerVm().availableProjects.find(
-      (p: AvailableProject) => p.id === projectDropdown.id,
-    );
-    innerVm().selectedProject = matchingProject;
-    await innerVm().$nextTick();
-    expect(wrapper.find(".project-picker span").text()).toBe(
-      projectDropdown.name,
-    );
+    await selectProject(projectDropdown);
 
     // Set server name
     const serverWrapper = wrapper.find(".data-store-server-input");