From 358e2d5a49646ff68a2e4f47dcdadeb40bfcd192 Mon Sep 17 00:00:00 2001
From: HugoCasa <hugo@casademont.ch>
Date: Tue, 23 Apr 2024 23:10:29 +0200
Subject: [PATCH] feat: ui helper for workspaced worker tags (#3595)

* feat: ui helper for workspaced worker tags

* fix: add red border when required
---
 .../src/lib/components/DefaultTags.svelte     |  6 +-
 .../lib/components/DefaultTagsInner.svelte    | 11 +---
 .../src/lib/components/WorkspaceGroup.svelte  | 64 +++++++++++++++++--
 .../(root)/(logged)/workers/+page.svelte      | 13 +++-
 4 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/components/DefaultTags.svelte b/frontend/src/lib/components/DefaultTags.svelte
index 9f96e57817..3b42ea4d42 100644
--- a/frontend/src/lib/components/DefaultTags.svelte
+++ b/frontend/src/lib/components/DefaultTags.svelte
@@ -5,6 +5,8 @@
 
 	import DefaultTagsInner from './DefaultTagsInner.svelte'
 
+	export let defaultTagPerWorkspace: boolean | undefined = undefined
+
 	let placement: 'bottom-end' | 'top-end' = 'bottom-end'
 </script>
 
@@ -22,5 +24,5 @@
 			>
 		</Button>
 	</svelte:fragment>
-	<DefaultTagsInner />
-</Popup> 
+	<DefaultTagsInner bind:defaultTagPerWorkspace />
+</Popup>
diff --git a/frontend/src/lib/components/DefaultTagsInner.svelte b/frontend/src/lib/components/DefaultTagsInner.svelte
index 768a337713..7bb0de8661 100644
--- a/frontend/src/lib/components/DefaultTagsInner.svelte
+++ b/frontend/src/lib/components/DefaultTagsInner.svelte
@@ -9,15 +9,7 @@
 	import Toggle from './Toggle.svelte'
 
 	let defaultTags: string[] | undefined = undefined
-	let defaultTagPerWorkspace: boolean | undefined = undefined
-
-	async function loadDefaultTagsPerWorkspace() {
-		try {
-			defaultTagPerWorkspace = await WorkerService.isDefaultTagsPerWorkspace()
-		} catch (err) {
-			sendUserToast(`Could not load default tag per workspace setting: ${err}`, true)
-		}
-	}
+	export let defaultTagPerWorkspace: boolean | undefined = undefined
 
 	async function loadDefaultTags() {
 		try {
@@ -28,7 +20,6 @@
 	}
 
 	loadDefaultTags()
-	loadDefaultTagsPerWorkspace()
 </script>
 
 <div class="flex flex-col w-80 p-2 gap-2">
diff --git a/frontend/src/lib/components/WorkspaceGroup.svelte b/frontend/src/lib/components/WorkspaceGroup.svelte
index 8e07e5239c..0bd23d6071 100644
--- a/frontend/src/lib/components/WorkspaceGroup.svelte
+++ b/frontend/src/lib/components/WorkspaceGroup.svelte
@@ -4,7 +4,7 @@
 	import Multiselect from 'svelte-multiselect'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import { ConfigService } from '$lib/gen'
+	import { ConfigService, WorkspaceService, type Workspace } from '$lib/gen'
 	import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte'
 	import { createEventDispatcher } from 'svelte'
 	import { sendUserToast } from '$lib/toast'
@@ -130,6 +130,15 @@
 		}
 	}
 
+	let workspaceTag = ''
+	export let defaultTagPerWorkspace: boolean | undefined = undefined
+
+	let workspaces: Workspace[] = []
+	async function listWorkspaces() {
+		workspaces = await WorkspaceService.listWorkspacesAsSuperAdmin()
+	}
+	$: $superadmin && listWorkspaces()
+
 	const dispatch = createEventDispatcher()
 
 	async function deleteWorkerGroup() {
@@ -317,12 +326,21 @@
 								size="xs"
 								on:click={() => {
 									if (nconfig != undefined) {
-										nconfig.worker_tags = defaultTags.concat(nativeTags)
+										nconfig.worker_tags = defaultTagPerWorkspace
+											? defaultTags.concat(nativeTags).map((nt) => `${nt}-${workspaceTag}`)
+											: defaultTags.concat(nativeTags)
+
 										dirty = true
 									}
 								}}
+								disabled={defaultTagPerWorkspace && !workspaceTag}
 							>
-								Reset to all tags <Tooltip>{defaultTags.concat(nativeTags).join(', ')}</Tooltip>
+								Reset to all tags <Tooltip
+									>{(defaultTagPerWorkspace
+										? defaultTags.concat(nativeTags).map((nt) => `${nt}-${workspaceTag}`)
+										: defaultTags.concat(nativeTags)
+									).join(', ')}</Tooltip
+								>
 							</Button>
 							<Button
 								variant="contained"
@@ -330,12 +348,20 @@
 								size="xs"
 								on:click={() => {
 									if (nconfig != undefined) {
-										nconfig.worker_tags = defaultTags
+										nconfig.worker_tags = defaultTagPerWorkspace
+											? defaultTags.map((nt) => `${nt}-${workspaceTag}`)
+											: defaultTags
 										dirty = true
 									}
 								}}
+								disabled={defaultTagPerWorkspace && !workspaceTag}
 							>
-								Reset to all tags minus native ones <Tooltip>{defaultTags.join(', ')}</Tooltip>
+								Reset to all tags minus native ones <Tooltip
+									>{(defaultTagPerWorkspace
+										? defaultTags.map((nt) => `${nt}-${workspaceTag}`)
+										: defaultTags
+									).join(', ')}</Tooltip
+								>
 							</Button>
 							<Button
 								variant="contained"
@@ -343,13 +369,37 @@
 								size="xs"
 								on:click={() => {
 									if (nconfig != undefined) {
-										nconfig.worker_tags = nativeTags
+										nconfig.worker_tags = defaultTagPerWorkspace
+											? nativeTags.map((nt) => `${nt}-${workspaceTag}`)
+											: nativeTags
 										dirty = true
 									}
 								}}
+								disabled={defaultTagPerWorkspace && !workspaceTag}
 							>
-								Reset to native tags <Tooltip>{nativeTags.join(', ')}</Tooltip>
+								Reset to native tags <Tooltip
+									>{(defaultTagPerWorkspace
+										? nativeTags.map((nt) => `${nt}-${workspaceTag}`)
+										: nativeTags
+									).join(', ')}</Tooltip
+								>
 							</Button>
+
+							{#if defaultTagPerWorkspace}
+								<AutoComplete
+									bind:selectedItem={workspaceTag}
+									noInputStyles
+									hideArrow={true}
+									items={workspaces.map((w) => w.id)}
+									inputClassName={'flex !font-gray-600 !font-primary !bg-surface-primary ' +
+										(!workspaceTag ? '!border-red-600/60 !dark:border-red-400/70' : '')}
+									dropdownClassName="!text-sm !py-2 !rounded-sm  !border-gray-200 !border !shadow-md"
+									className="!font-gray-600 !font-primary !bg-surface-primary"
+									create
+									onCreate={(c) => c}
+									placeholder="Workspace ID"
+								/>
+							{/if}
 						</div>
 						<div class="max-w mt-2 items-center gap-1 pt-2">
 							{#if nconfig?.worker_tags !== undefined && nconfig?.worker_tags.length > 0}
diff --git a/frontend/src/routes/(root)/(logged)/workers/+page.svelte b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
index 24b1fd0c5e..afd848f896 100644
--- a/frontend/src/routes/(root)/(logged)/workers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
@@ -65,6 +65,15 @@
 		}
 	}
 
+	let defaultTagPerWorkspace: boolean | undefined = undefined
+	async function loadDefaultTagsPerWorkspace() {
+		try {
+			defaultTagPerWorkspace = await WorkerService.isDefaultTagsPerWorkspace()
+		} catch (err) {
+			sendUserToast(`Could not load default tag per workspace setting: ${err}`, true)
+		}
+	}
+
 	onMount(() => {
 		intervalId = setInterval(() => {
 			loadWorkers()
@@ -78,6 +87,7 @@
 	loadWorkers()
 	loadWorkerGroups()
 	loadCustomTags()
+	$: $superadmin && loadDefaultTagsPerWorkspace()
 
 	onDestroy(() => {
 		if (intervalId) {
@@ -111,7 +121,7 @@
 						}}
 					/>
 				</div>
-				<div><DefaultTags /> </div>
+				<div><DefaultTags bind:defaultTagPerWorkspace /> </div>
 			</div>
 		{/if}
 	</PageHeader>
@@ -180,6 +190,7 @@
 				activeWorkers={worker_group?.[1].flatMap((x) =>
 					x[1]?.filter((y) => (y.last_ping ?? 0) < 15)
 				)?.length ?? 0}
+				{defaultTagPerWorkspace}
 			/>
 
 			<DataTable>