From 88b37889face330d700c476a848014dcb895b6df Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Thu, 19 Jun 2025 15:00:13 +0200
Subject: [PATCH] fix: replace worker tags to listen multiselect (#5997)

* rename all multiselects to Legacy

* move Select

* Separate SelectDropdown

* fix click outside for select with portal

* multiselect v0

* multiselect clear btn

* move filterText logic to SelectDropdown

* ui nits

* console.log

* draggable

* Draggable multiselect

* multiselect search

* nit refacto

* autofocus multiselect input

* Replace in AppMultiSelectV2

* search icon

* app multi select nits

* arginput update multiselect

* fix autofocus scrolling up

* replace High priority tags multiselect

* autoscaling config editor multiselect replace

* fix clear btn not in border

* replace multiselect in cron input

* replace multiselect in savedinputs

* replace EventHandlerItem multiselect

* select dropdown shadow

* more multiselect migration

* hover opacity on drag

* TokensTable UI fixes + replace multiselect

* ai settings replace multiselect

* DefaultTags Multiselect replace

* prevent multiselect from opening on drag

* nit

* app multiselect css + simplify

* console log

* safeSelectItems cleanup

* Remove svelte-multiselect

* clip when wrap not allowed

* hide duplicate app components

* CSS works better  with multiselect in app editor

* allowOverflow

* allowClear

* replace tags to listen to with a multiselect

* fix custom createText messed up with search
---
 .../src/lib/components/TagsToListenTo.svelte  | 100 +++---------------
 1 file changed, 17 insertions(+), 83 deletions(-)

diff --git a/frontend/src/lib/components/TagsToListenTo.svelte b/frontend/src/lib/components/TagsToListenTo.svelte
index d9744a6449..76c7fe15d6 100644
--- a/frontend/src/lib/components/TagsToListenTo.svelte
+++ b/frontend/src/lib/components/TagsToListenTo.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { X, Plus, Trash } from 'lucide-svelte'
-	import { Button } from './common'
-	import { superadmin } from '$lib/stores'
 	import { createEventDispatcher } from 'svelte'
 	import { defaultTags, nativeTags } from './worker_group'
-	import Select from './select/Select.svelte'
 	import { safeSelectItems } from './select/utils.svelte'
+	import MultiSelect from './select/MultiSelect.svelte'
+	import { superadmin } from '$lib/stores'
 
 	const dispatch = createEventDispatcher()
 	type Props = {
@@ -16,85 +14,21 @@
 	let {
 		worker_tags = $bindable([]),
 		customTags = $bindable([]),
-		disabled = $bindable(false)
+		disabled: _disabled = $bindable(false)
 	}: Props = $props()
-	let newTag = $state('')
-	let createdTags: string[] = $state([])
+
+	let disabled = $derived(_disabled || !$superadmin)
 </script>
 
-<div class="flex gap-2 gap-y-2 flex-wrap pb-3">
-	{#if worker_tags?.length === 0}
-		<div class="text-xs text-secondary">No tags selected</div>
-	{/if}
-
-	{#each worker_tags as tag}
-		<div
-			class="flex items-center gap-1 px-2 py-1 rounded-full border border-primary text-2xs text-primary bg-surface-primary"
-		>
-			<span>{tag}</span>
-			{#if $superadmin && !disabled}
-				<Button
-					class="p-1 rounded-full hover:bg-surface-hover transition"
-					aria-label="Remove tag"
-					on:click={() => {
-						worker_tags = worker_tags?.filter((t) => t !== tag) ?? []
-						dispatch('dirty')
-						dispatch('deletePriorityTag', tag)
-					}}
-				>
-					<X size={12} />
-				</Button>
-			{/if}
-		</div>
-	{/each}
-</div>
-
-{#if $superadmin}
-	<div class="max-w-md space-y-2">
-		<Select
-			items={safeSelectItems(
-				[...(customTags ?? []), ...createdTags, ...defaultTags, ...nativeTags].filter(
-					(x) => !worker_tags?.includes(x)
-				)
-			)}
-			{disabled}
-			bind:value={newTag}
-			onFocus={() => dispatch('focus')}
-			onCreateItem={(c) => (createdTags.push(c), (createdTags = [...createdTags]), (newTag = c))}
-			createText="Press Enter to use this tag"
-		/>
-
-		<div class="flex gap-2">
-			<Button
-				variant="contained"
-				color="light"
-				size="xs"
-				startIcon={{ icon: Plus }}
-				disabled={disabled || newTag == '' || worker_tags?.includes(newTag)}
-				on:click={() => {
-					worker_tags = [...(worker_tags ?? []), newTag.replaceAll(' ', '_')]
-					newTag = ''
-					dispatch('dirty')
-				}}
-			>
-				Add tag
-			</Button>
-			<Button
-				variant="contained"
-				color="red"
-				size="xs"
-				startIcon={{ icon: Trash }}
-				disabled={disabled || worker_tags.length === 0}
-				on:click={() => {
-					worker_tags = worker_tags.filter((tag) => {
-						dispatch('deletePriorityTag', tag)
-						return false
-					})
-					dispatch('dirty')
-				}}
-			>
-				Remove all selected tags
-			</Button>
-		</div>
-	</div>
-{/if}
+<MultiSelect
+	items={safeSelectItems([...(customTags ?? []), ...worker_tags, ...defaultTags, ...nativeTags])}
+	bind:value={
+		() => worker_tags,
+		(w) => ((worker_tags = w.map((s) => s.replaceAll(' ', '_'))), dispatch('dirty'))
+	}
+	{disabled}
+	class={disabled ? 'border-0' : ''}
+	allowClear={!disabled}
+	onCreateItem={(c) => worker_tags.push(c)}
+	createText="Press Enter to use this tag"
+/>