From faaef3016d0f44d9019af37dd2c213a6510ea0fd Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 19 Jun 2024 13:50:21 +0200
Subject: [PATCH] use auto-complete for worker group select

---
 backend/windmill-queue/src/jobs.rs            |  7 +++--
 .../(root)/(logged)/workers/+page.svelte      | 27 ++++++++++++++-----
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/backend/windmill-queue/src/jobs.rs b/backend/windmill-queue/src/jobs.rs
index a949ef917e..710cfedda2 100644
--- a/backend/windmill-queue/src/jobs.rs
+++ b/backend/windmill-queue/src/jobs.rs
@@ -2678,7 +2678,7 @@ fn restructure_cloudevents_metadata(
         let mut hm = serde_json::from_str::<Option<HashMap<String, Box<JsonRawValue>>>>(&str)
             .map_err(|e| Error::BadRequest(format!("invalid json: {}", e)))?
             .unwrap_or_else(HashMap::new);
-            hm.insert("WEBHOOK__METADATA__".to_string(), to_raw_value(&p));
+        hm.insert("WEBHOOK__METADATA__".to_string(), to_raw_value(&p));
         Ok(hm)
     }
 }
@@ -2836,7 +2836,10 @@ where
             .unwrap()
             .starts_with("application/cloudevents-batch+json")
         {
-            Err(Error::BadRequest(format!("Cloud events batching is not supported yet")).into_response())
+            Err(
+                Error::BadRequest(format!("Cloud events batching is not supported yet"))
+                    .into_response(),
+            )
         } else if content_type
             .unwrap()
             .starts_with("application/x-www-form-urlencoded")
diff --git a/frontend/src/routes/(root)/(logged)/workers/+page.svelte b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
index 39ffcd2fee..dd231b6b46 100644
--- a/frontend/src/routes/(root)/(logged)/workers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
@@ -20,6 +20,8 @@
 	import { displayDate, groupBy, pluralize, truncate } from '$lib/utils'
 	import { AlertTriangle, FileJson, LineChart, Plus, Search } from 'lucide-svelte'
 	import { onDestroy, onMount } from 'svelte'
+	import AutoComplete from 'simple-svelte-autocomplete'
+
 	import YAML from 'yaml'
 
 	let workers: WorkerPing[] | undefined = undefined
@@ -295,13 +297,13 @@
 		{/if}
 
 		<div class="py-4 w-full flex justify-between"
-			><h2
-				>Worker Groups <Tooltip
+			><h4
+				>{groupWorkers?.length} Worker Groups <Tooltip
 					documentationLink="https://www.windmill.dev/docs/core_concepts/worker_groups"
 					>Worker groups are groups of workers that share a config and are meant to be identical.
 					Worker groups are meant to be used with tags. Tags can be assigned to scripts and flows
 					and can be seen as dedicated queues. Only the corresponding
-				</Tooltip></h2
+				</Tooltip></h4
 			>
 			<div />
 			{#if $superadmin}
@@ -378,9 +380,20 @@
 			{/if}</div
 		>
 
-		{#if Object.keys(workerGroups ?? {}).length > 5}
-			<div>
-				<select
+		{#if (groupedWorkers ?? []).length > 5}
+			<div class="flex gap-2 items-center">
+				<div class="text-secondary text-sm">Worker group:</div>
+				<AutoComplete
+					noInputStyles
+					items={groupedWorkers.map((x) => x[0])}
+					bind:selectedItem={selectedTab}
+					hideArrow={true}
+					inputClassName={'flex !font-gray-600 !font-primary !bg-surface-primary"'}
+					dropdownClassName="!text-sm !py-2 !rounded-sm  !border-gray-200 !border !shadow-md"
+					className="!font-gray-600 !font-primary !bg-surface-primary"
+				/>
+
+				<!-- <select
 					class="max-w-64"
 					bind:value={selectedTab}
 					on:change={() => {
@@ -395,7 +408,7 @@
 							)})
 						</option>
 					{/each}
-				</select>
+				</select> -->
 			</div>
 		{:else}
 			<Tabs bind:selected={selectedTab}>