From cf73f670797b081628fe31e179cbcb8154c880eb Mon Sep 17 00:00:00 2001
From: Guilhem <guilhem@mbp-de-windmill.home>
Date: Tue, 1 Oct 2024 17:38:25 +0200
Subject: [PATCH] Add bage for advanced options

---
 .../src/lib/components/AssignableTags.svelte  |  2 +-
 frontend/src/lib/components/Section.svelte    |  6 +-
 frontend/src/lib/components/Toggle.svelte     |  6 +-
 .../details/ErrorHandlerToggleButtonV2.svelte |  3 +
 .../flows/content/FlowSettings.svelte         | 55 +++++++++++++------
 5 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/frontend/src/lib/components/AssignableTags.svelte b/frontend/src/lib/components/AssignableTags.svelte
index a09aaab4db..b7703d31da 100644
--- a/frontend/src/lib/components/AssignableTags.svelte
+++ b/frontend/src/lib/components/AssignableTags.svelte
@@ -13,7 +13,7 @@
 	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
 >
 	<svelte:fragment slot="button">
-		<Button color="dark" size="xs" nonCaptureEvent={true}>
+		<Button color="nord" size="xs" nonCaptureEvent={true}>
 			<div class="flex flex-row gap-1 items-center"
 				><Pen size={14} /> Custom Tags&nbsp;<Tooltip light
 					>Tags are assigned to scripts and flows. Workers only accept jobs that correspond to their
diff --git a/frontend/src/lib/components/Section.svelte b/frontend/src/lib/components/Section.svelte
index dec7b6f8c3..ee6df63406 100644
--- a/frontend/src/lib/components/Section.svelte
+++ b/frontend/src/lib/components/Section.svelte
@@ -16,7 +16,7 @@
 </script>
 
 <div class="w-full">
-	<div class="flex flex-row justify-between items-center mb-2">
+	<div class="flex flex-row justify-between items-start mb-2">
 		<h2
 			class={twMerge(
 				subsection ? 'font-normal' : 'font-semibold',
@@ -50,7 +50,11 @@
 			{/if}
 		</h2>
 		<slot name="action" />
+		{#if collapsable && collapsed}
+			<slot name="badge" />
+		{/if}
 	</div>
+
 	<div class={collapsable && collapsed ? `hidden ${$$props.class}` : `${$$props.class}`}>
 		<slot />
 	</div>
diff --git a/frontend/src/lib/components/Toggle.svelte b/frontend/src/lib/components/Toggle.svelte
index 46d6f5f004..be7b387f1e 100644
--- a/frontend/src/lib/components/Toggle.svelte
+++ b/frontend/src/lib/components/Toggle.svelte
@@ -14,7 +14,7 @@
 	export let disabled = false
 	export let textClass = ''
 	export let textStyle = ''
-	export let color: 'blue' | 'red' = 'blue'
+	export let color: 'blue' | 'red' | 'nord' = 'blue'
 	export let id = (Math.random() + 1).toString(36).substring(10)
 	export let lightMode: boolean = false
 
@@ -71,7 +71,9 @@
 				"transition-all bg-surface-selected rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-surface after:border-white after:border after:rounded-full after:transition-all ",
 				color == 'red'
 					? 'peer-checked:bg-red-600'
-					: 'peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500',
+					: color == 'blue'
+					? 'peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500'
+					: 'peer-checked:bg-nord-300 dark:peer-checked:bg-frost-500',
 				lightToogle
 					? 'w-9 h-5 after:top-0.5 after:left-[2px] after:h-4 after:w-4'
 					: size === 'sm'
diff --git a/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte b/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
index 6bb4303d36..09aa1d3f41 100644
--- a/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
+++ b/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
@@ -11,6 +11,8 @@
 	export let textDisabled = false
 	let toggleState = errorHandlerMuted
 
+	export let color: 'nord' | 'red' | 'blue' = 'nord'
+
 	async function toggleErrorHandler(): Promise<void> {
 		toggleState = !toggleState
 		if ($workspaceStore !== undefined) {
@@ -54,6 +56,7 @@
 </script>
 
 <Toggle
+	{color}
 	lightToogle={true}
 	size="sm"
 	checked={toggleState}
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index 4298e07a6c..da95d267bc 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -21,6 +21,7 @@
 	import ErrorHandlerToggleButtonV2 from '$lib/components/details/ErrorHandlerToggleButtonV2.svelte'
 	import WorkerTagPicker from '$lib/components/WorkerTagPicker.svelte'
 	import MetadataGen from '$lib/components/copilot/MetadataGen.svelte'
+	import Badge from '$lib/components/Badge.svelte'
 
 	export let noEditor: boolean
 
@@ -43,18 +44,26 @@
 
 	$: displayWorkerTagPicker = Boolean($flowStore.tag)
 
-	$: numberOfAdvancedOptionsOn = [
-		$flowStore.value.priority !== undefined && $flowStore.value.priority > 0,
-		Boolean($flowStore.ws_error_handler_muted),
-		Boolean($flowStore.visible_to_runner_only),
-		Boolean($flowStore.value.same_worker),
-		Boolean($flowStore.value.cache_ttl),
-		Boolean($flowStore.value.skip_expr),
-		Boolean($flowStore.value.early_return),
-		Boolean($flowStore.dedicated_worker),
-		Boolean($flowStore.value.concurrent_limit),
-		displayWorkerTagPicker
-	].filter(Boolean).length
+	$: activeAdvancedOptions = [
+		{
+			name: 'High Priority',
+			active: $flowStore.value.priority !== undefined && $flowStore.value.priority > 0
+		},
+		{ name: 'Error Handler Muted', active: Boolean($flowStore.ws_error_handler_muted) },
+		{ name: 'Invisible to Others', active: Boolean($flowStore.visible_to_runner_only) },
+		{ name: 'Shared Directory', active: Boolean($flowStore.value.same_worker) },
+		{ name: 'Cache Results', active: Boolean($flowStore.value.cache_ttl) },
+		{ name: 'Early Stop', active: Boolean($flowStore.value.skip_expr) },
+		{ name: 'Early Return', active: Boolean($flowStore.value.early_return) },
+		{ name: 'Dedicated Worker', active: Boolean($flowStore.dedicated_worker) },
+		{ name: 'Concurrent Limit', active: Boolean($flowStore.value.concurrent_limit) },
+		{ name: 'Worker Tag', active: displayWorkerTagPicker }
+	]
+
+	$: numberOfAdvancedOptionsOn = activeAdvancedOptions.filter((option) => option.active).length
+	$: activeAdvancedOptionNames = activeAdvancedOptions
+		.filter((option) => option.active)
+		.map((option) => option.name)
 
 	beforeUpdate(() => {
 		if (scrollableDiv) {
@@ -71,7 +80,7 @@
 	})
 </script>
 
-<div class="h-full overflow-auto flex flex-col" bind:this={scrollableDiv}>
+<div class="h-full overflow-y-auto flex flex-col" bind:this={scrollableDiv}>
 	<FlowCard {noEditor} title="Settings">
 		<div class="grow min-h-0 p-4 h-full flex flex-col gap-8">
 			<!-- Metadata Section -->
@@ -233,18 +242,19 @@
 			>
 				<!-- Metadata Advanced Section -->
 				<!-- TODO: Add EE-only badge when we have it -->
-
-				<svelte:fragment slot="header">
+				<svelte:fragment slot="badge">
 					{#if numberOfAdvancedOptionsOn > 0}
-						<div
-							class="bg-blue-600 dark:bg-blue-500 w-4 h-4 rounded text-white flex items-center justify-center text-2xs"
-							>{numberOfAdvancedOptionsOn}
+						<div class="flex grow min-w-0 w-full flex-wrap gap-1">
+							{#each activeAdvancedOptionNames as optionName}
+								<Badge twBgColor="bg-nord-300" twTextColor="text-white">{optionName}</Badge>
+							{/each}
 						</div>
 					{/if}
 				</svelte:fragment>
 
 				<!-- Priority Section -->
 				<Toggle
+					color="nord"
 					lightToogle={true}
 					disabled={!$enterpriseLicense || isCloudHosted()}
 					checked={$flowStore.value.priority !== undefined && $flowStore.value.priority > 0}
@@ -284,6 +294,7 @@
 
 				<!-- Visibility Section -->
 				<Toggle
+					color="nord"
 					lightToogle={true}
 					size="sm"
 					checked={Boolean($flowStore.visible_to_runner_only)}
@@ -306,6 +317,7 @@
 				<!-- Error Handler Section -->
 				<div class="flex flex-row items-center py-1">
 					<ErrorHandlerToggleButtonV2
+						color="nord"
 						kind="flow"
 						scriptOrFlowPath={$pathStore}
 						bind:errorHandlerMuted={$flowStore.ws_error_handler_muted}
@@ -316,6 +328,7 @@
 				<!-- Shared Directory Section -->
 				{#if customUi?.settingsTabs?.sharedDiretory != false}
 					<Toggle
+						color="nord"
 						lightToogle={true}
 						bind:checked={$flowStore.value.same_worker}
 						options={{
@@ -334,6 +347,7 @@
 				{#if customUi?.settingsTabs?.cache != false}
 					<div>
 						<Toggle
+							color="nord"
 							lightToogle={true}
 							size="sm"
 							checked={Boolean($flowStore.value.cache_ttl)}
@@ -370,6 +384,7 @@
 					<div>
 						<!-- documentationLink="https://www.windmill.dev/docs/flows/early_stop -->
 						<Toggle
+							color="nord"
 							lightToogle={true}
 							checked={Boolean($flowStore.value.skip_expr)}
 							on:change={() => {
@@ -420,6 +435,7 @@
 				{#if customUi?.settingsTabs?.earlyReturn != false}
 					<div>
 						<Toggle
+							color="nord"
 							lightToogle={true}
 							checked={Boolean($flowStore.value.early_return)}
 							on:change={() => {
@@ -463,6 +479,7 @@
 				{#if customUi?.settingsTabs?.workerGroup != false}
 					<div>
 						<Toggle
+							color="nord"
 							lightToogle={true}
 							disabled={!$enterpriseLicense}
 							size="sm"
@@ -486,6 +503,7 @@
 
 					<div>
 						<Toggle
+							color="nord"
 							lightToogle={true}
 							disabled={!$enterpriseLicense || isCloudHosted()}
 							size="sm"
@@ -525,6 +543,7 @@
 				{#if customUi?.settingsTabs?.concurrency != false}
 					<div>
 						<Toggle
+							color="nord"
 							lightToogle={true}
 							disabled={!$enterpriseLicense}
 							size="sm"