windmill-components 1.122.0 → 1.138.2

package/package/components/flows/content/FlowModuleConcurrencyLimit.svelte

@@ -0,0 +1,51 @@
+<script>import Toggle from '../../Toggle.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import JsonEditor from '../../apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
+export let flowModule;
+let code = flowModule.mock?.return_value
+    ? JSON.stringify(flowModule.mock?.return_value, null, 2)
+    : undefined;
+$: isMockEnabled = Boolean(flowModule.cache_ttl);
+</script>
+
+<h2 class="pb-4">
+	Mock
+	<Tooltip>
+		If defined and enabled, the step will immediately return the mock value instead of being
+		executed.
+	</Tooltip>
+</h2>
+<Toggle
+	checked={isMockEnabled}
+	on:change={() => {
+		if (isMockEnabled) {
+			flowModule.mock = {
+				enabled: false,
+				return_value: flowModule.mock?.return_value
+			}
+		} else {
+			flowModule.mock = {
+				enabled: true,
+				return_value: flowModule.mock?.return_value ?? { example: 'value' }
+			}
+			code = JSON.stringify(flowModule.mock?.return_value, null, 2)
+		}
+		console.log(isMockEnabled, flowModule.mock)
+	}}
+	options={{
+		right: 'Enable step mocking'
+	}}
+/>
+<div>
+	<span class="text-xs font-bold">Mocked Return value</span>
+	{#if flowModule?.mock?.return_value != undefined}
+		<JsonEditor {code} bind:value={flowModule.mock.return_value} />
+	{:else}
+		<input
+			type="text"
+			disabled
+			value={flowModule.mock?.return_value ? code : ''}
+			class="w-full p-2 border rounded-md"
+		/>
+	{/if}
+</div>

package/package/components/flows/content/FlowModuleConcurrencyLimit.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flowModule: FlowModule;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowModuleConcurrencyLimitProps = typeof __propDef.props;
+export type FlowModuleConcurrencyLimitEvents = typeof __propDef.events;
+export type FlowModuleConcurrencyLimitSlots = typeof __propDef.slots;
+export default class FlowModuleConcurrencyLimit extends SvelteComponentTyped<FlowModuleConcurrencyLimitProps, FlowModuleConcurrencyLimitEvents, FlowModuleConcurrencyLimitSlots> {
+}
+export {};

package/package/components/flows/content/FlowModuleEarlyStop.svelte

@@ -36,7 +36,9 @@ $: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_F
 		}}
 	/>
 
-	<div class="w-full border p-2 flex flex-col {flowModule.stop_after_if ? '' : 'bg-gray-50'}">
+	<div
+		class="w-full border p-2 flex flex-col {flowModule.stop_after_if ? '' : 'bg-surface-secondary'}"
+	>
 		{#if flowModule.stop_after_if}
 			<Toggle
 				bind:checked={flowModule.stop_after_if.skip_if_stopped}

package/package/components/flows/content/FlowModuleHeader.svelte

@@ -2,13 +2,13 @@
 import { WorkerService } from '../../../gen';
 import { faCodeBranch, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher, getContext } from 'svelte';
-import { Bed, Database, PhoneIncoming, Repeat, Square, Voicemail } from 'lucide-svelte';
+import { Bed, Database, Gauge, PhoneIncoming, Repeat, Square, Voicemail } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
 import { sendUserToast } from '../../../utils';
 import { workerTags } from '../../../stores';
 import { getLatestHashForScript } from '../../../scripts';
 export let module;
-const { scriptEditorDrawer } = getContext('FlowEditorContext');
+const { scriptEditorDrawer, flowStore, selectedId } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 loadWorkerGroups();
 async function loadWorkerGroups() {
@@ -25,19 +25,30 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 			placement="bottom"
 			class="center-center rounded p-2 
 			{moduleRetry
-				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200'
-				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
+				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
+				: 'bg-surface text-primay hover:bg-hover'}"
 			on:click={() => dispatch('toggleRetry')}
 		>
 			<Repeat size={14} />
 			<svelte:fragment slot="text">Retries</svelte:fragment>
 		</Popover>
+		<Popover
+			placement="bottom"
+			class="center-center rounded p-2 
+		{module?.value?.['concurrency_limit'] != undefined
+				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
+				: 'bg-surface text-primay hover:bg-hover'}"
+			on:click={() => dispatch('toggleConcurrency')}
+		>
+			<Gauge size={14} />
+			<svelte:fragment slot="text">Concurrency Limits</svelte:fragment>
+		</Popover>
 		<Popover
 			placement="bottom"
 			class="center-center rounded p-2 
 		{module.cache_ttl != undefined
-				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200'
-				: 'bg-white text-gray-800  hover:bg-gray-100'}"
+				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
+				: 'bg-surface text-primay hover:bg-hover'}"
 			on:click={() => dispatch('toggleCache')}
 		>
 			<Database size={14} />
@@ -45,10 +56,10 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 		</Popover>
 		<Popover
 			placement="bottom"
-			class="center-center rounded  p-2
+			class="center-center rounded p-2
 			{module.stop_after_if
-				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200'
-				: 'bg-white text-gray-800 hover:bg-gray-100'}"
+				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
+				: 'bg-surface text-primay hover:bg-hover'}"
 			on:click={() => dispatch('toggleStopAfterIf')}
 		>
 			<Square size={14} />
@@ -58,8 +69,8 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 			placement="bottom"
 			class="center-center rounded p-2 
 			{module.suspend
-				? 'bg-blue-100 text-blue-800 border  border-blue-300 hover:bg-blue-200'
-				: 'bg-white text-gray-800  hover:bg-gray-100'}"
+				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
+				: 'bg-surface text-primay hover:bg-hover'}"
 			on:click={() => dispatch('toggleSuspend')}
 		>
 			<PhoneIncoming size={14} />
@@ -67,10 +78,10 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 		</Popover>
 		<Popover
 			placement="bottom"
-			class="center-center rounded  p-2
+			class="center-center rounded p-2
 			{module.sleep
-				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200'
-				: 'bg-white text-gray-800  hover:bg-gray-100'}"
+				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
+				: 'bg-surface text-primay hover:bg-hover'}"
 			on:click={() => dispatch('toggleSleep')}
 		>
 			<Bed size={14} />
@@ -78,10 +89,10 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 		</Popover>
 		<Popover
 			placement="bottom"
-			class="center-center rounded  p-2
+			class="center-center rounded p-2
 		{module.mock?.enabled
-				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200'
-				: 'bg-white text-gray-800  hover:bg-gray-100'}"
+				? 'bg-blue-100  text-blue-800 border border-blue-300 hover:bg-blue-200'
+				: 'bg-surface text-primay hover:bg-hover'}"
 			on:click={() => dispatch('toggleMock')}
 		>
 			<Voicemail size={14} />
@@ -125,33 +136,42 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 		{#if $workerTags}
 			{#if $workerTags?.length > 0}
 				<div class="w-40">
-					<select
-						placeholder="Worker group"
-						bind:value={module.value.tag}
-						on:change={(e) => {
-							if (module.value.type === 'rawscript') {
-								if (module.value.tag == '') {
-									module.value.tag = undefined
+					{#if $flowStore.tag == undefined}
+						<select
+							placeholder="Worker group"
+							bind:value={module.value.tag}
+							on:change={(e) => {
+								if (module.value.type === 'rawscript') {
+									if (module.value.tag == '') {
+										module.value.tag = undefined
+									}
 								}
-							}
-						}}
-					>
-						{#if module.value.tag}
-							<option value="">reset to default</option>
-						{:else}
-							<option value="" disabled selected>Worker Group</option>
-						{/if}
-						{#each $workerTags ?? [] as tag (tag)}
-							<option value={tag}>{tag}</option>
-						{/each}
-					</select>
+							}}
+						>
+							{#if module.value.tag}
+								<option value="">reset to default</option>
+							{:else}
+								<option value="" disabled selected>Worker Group</option>
+							{/if}
+							{#each $workerTags ?? [] as tag (tag)}
+								<option value={tag}>{tag}</option>
+							{/each}
+						</select>
+					{:else}
+						<button
+							title="Worker Group is defined at the flow level"
+							class="w-full text-left items-center font-normal p-1 border text-xs rounded"
+							on:click={() => ($selectedId = 'settings-worker-group')}
+						>
+							Flow's WG: {$flowStore.tag}
+						</button>
+					{/if}
 				</div>
 			{/if}
 		{/if}
 		<Button
 			size="xs"
 			color="light"
-			btnClasses="text-gray-600"
 			startIcon={{ icon: faSave }}
 			on:click={() => dispatch('createScriptFromInlineScript')}
 			iconOnly={false}

package/package/components/flows/content/FlowModuleHeader.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
     };
     events: {
         toggleRetry: CustomEvent<any>;
+        toggleConcurrency: CustomEvent<any>;
         toggleCache: CustomEvent<any>;
         toggleStopAfterIf: CustomEvent<any>;
         toggleSuspend: CustomEvent<any>;

package/package/components/flows/content/FlowModuleTimeout.svelte

@@ -0,0 +1,43 @@
+<script>import Toggle from '../../Toggle.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import { Alert, SecondsInput } from '../../common';
+export let flowModule;
+$: istimeoutEnabled = Boolean(flowModule.timeout);
+</script>
+
+<h2 class="pb-4">
+	Timeout
+	<Tooltip>
+		If defined, the custom timeout will be used instead of the instance timeout for the step. The
+		step's timeout cannot be greater than the instance timeout.
+	</Tooltip>
+</h2>
+
+<Toggle
+	checked={istimeoutEnabled}
+	on:change={() => {
+		if (istimeoutEnabled && flowModule.timeout != undefined) {
+			flowModule.timeout = undefined
+		} else {
+			flowModule.timeout = 300
+		}
+	}}
+	options={{
+		right: 'Add a custom timeout for this step'
+	}}
+/>
+<div class="mb-4">
+	<span class="text-xs font-bold">Timeout duration</span>
+
+	{#if flowModule.timeout}
+		<SecondsInput bind:seconds={flowModule.timeout} />
+	{:else}
+		<SecondsInput disabled />
+	{/if}
+
+	<div class="mt-4" />
+
+	<Alert title="Only used when testing the full flow" type="info">
+		<p class="text-sm"> The timeout will be ignored when running "Test this step" </p>
+	</Alert>
+</div>

package/package/components/flows/content/FlowModuleTimeout.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flowModule: FlowModule;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowModuleTimeoutProps = typeof __propDef.props;
+export type FlowModuleTimeoutEvents = typeof __propDef.events;
+export type FlowModuleTimeoutSlots = typeof __propDef.slots;
+export default class FlowModuleTimeout extends SvelteComponentTyped<FlowModuleTimeoutProps, FlowModuleTimeoutEvents, FlowModuleTimeoutSlots> {
+}
+export {};

package/package/components/flows/content/FlowModuleWrapper.svelte

@@ -12,6 +12,8 @@ import FlowBranchesAllWrapper from './FlowBranchesAllWrapper.svelte';
 import FlowBranchesOneWrapper from './FlowBranchesOneWrapper.svelte';
 const { selectedId, schedule, flowStateStore } = getContext('FlowEditorContext');
 export let flowModule;
+let scriptKind = 'script';
+let scriptTemplate = 'script';
 // These pointers are used to easily access previewArgs of parent module, and previous module
 // Pointer to parent module, only defined within Branches or Loops.
 export let parentModule = undefined;
@@ -83,6 +85,8 @@ export let previousModule = undefined;
 						subkind,
 						flowModule.id
 					)
+					scriptKind = kind
+					scriptTemplate = subkind
 
 					if (kind == Script.kind.TRIGGER) {
 						if (!$schedule.cron) {
@@ -112,6 +116,8 @@ export let previousModule = undefined;
 			{parentModule}
 			{previousModule}
 			failureModule={$selectedId === 'failure'}
+			{scriptKind}
+			{scriptTemplate}
 		/>
 	{/if}
 {:else if flowModule.value.type === 'forloopflow'}

package/package/components/flows/content/FlowRetries.svelte

@@ -81,7 +81,7 @@ $: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential);
 				<div class="text-xs font-bold !mt-2">Attempts</div>
 				<input bind:value={flowModule.retry.exponential.attempts} type="number" />
 				<div class="text-xs font-bold !mt-2">Mulitplier</div>
-				<span class="text-xs text-gray-500">delay = multiplier * base ^ (number of attempt)</span>
+				<span class="text-xs text-tertiary">delay = multiplier * base ^ (number of attempt)</span>
 				<input bind:value={flowModule.retry.exponential.multiplier} type="number" />
 				<div class="text-xs font-bold !mt-2">Base (in seconds)</div>
 				<input bind:value={flowModule.retry.exponential.seconds} type="number" />
@@ -89,7 +89,7 @@ $: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential);
 				<div class="text-xs font-bold !mt-2">Attempts</div>
 				<input type="number" disabled />
 				<div class="text-xs font-bold !mt-2">Mulitplier</div>
-				<span class="text-xs text-gray-500">delay = multiplier * base ^ (number of attempt)</span>
+				<span class="text-xs text-tertiary">delay = multiplier * base ^ (number of attempt)</span>
 				<input type="number" disabled />
 				<div class="text-xs font-bold !mt-2">Base (in seconds)</div>
 				<input type="number" disabled />
@@ -109,7 +109,7 @@ $: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential);
 					(_, i) => (multiplier || 0) * (eSeconds || 0) ** (i + cArray.length + 1)
 				)}
 				{@const array = [...cArray, ...eArray]}
-				<div class="bg-gray-50 border border-gray-300 rounded px-4 py-2">
+				<div class="bg-surface-secondary border rounded px-4 py-2">
 					<div class="text-xs font-medium mb-2">Retry attempts</div>
 					{#if array.length > 0}
 						<table class="text-xs">

package/package/components/flows/content/FlowSchedules.svelte

@@ -10,7 +10,7 @@ const { schedule, flowStore } = getContext('FlowEditorContext');
 <div class="mt-10" />
 <SchemaForm schema={$flowStore.schema} bind:args={$schedule.args} />
 {#if emptyString($schedule.cron)}
-	<p class="text-xs text-gray-600 mt-10">Define a schedule frequency first</p>
+	<p class="text-xs text-tertiary mt-10">Define a schedule frequency first</p>
 {/if}
 <div class="mt-10" />
 <Toggle

package/package/components/flows/content/FlowSettings.svelte

@@ -11,15 +11,36 @@ import { Alert } from '../../common';
 import { getContext } from 'svelte';
 import autosize from 'svelte-autosize';
 import Slider from '../../Slider.svelte';
-import { workspaceStore } from '../../../stores';
+import { workerTags, workspaceStore } from '../../../stores';
 import { copyToClipboard } from '../../../utils';
 import { Icon } from 'svelte-awesome';
 import { faClipboard } from '@fortawesome/free-solid-svg-icons';
 import Tooltip from '../../Tooltip.svelte';
+import { WorkerService } from '../../../gen';
+import { Loader2 } from 'lucide-svelte';
 const { selectedId, flowStore, initialPath } = getContext('FlowEditorContext');
+async function loadWorkerGroups() {
+    if (!$workerTags) {
+        $workerTags = await WorkerService.getCustomTags();
+    }
+}
 let hostname = BROWSER ? window.location.protocol + '//' + window.location.host : 'SSR';
 $: url = `${hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore?.path}`;
 $: syncedUrl = `${hostname}/api/w/${$workspaceStore}/jobs/run_wait_result/f/${$flowStore?.path}`;
+$: if ($selectedId == 'settings-worker-group') {
+    $workerTags = undefined;
+    loadWorkerGroups();
+}
+let path = undefined;
+$: {
+    if (initialPath == '' && $flowStore.summary?.length > 0) {
+        path?.setName($flowStore.summary
+            .toLowerCase()
+            .replace(/[^a-z0-9_]/g, '_')
+            .replace(/-+/g, '_')
+            .replace(/^-|-$/g, ''));
+    }
+}
 </script>
 
 <div class="h-full overflow-hidden">
@@ -29,39 +50,52 @@ $: syncedUrl = `${hostname}/api/w/${$workspaceStore}/jobs/run_wait_result/f/${$f
 				<Tab value="settings-metadata">Metadata</Tab>
 				<Tab value="settings-schedule">Schedule</Tab>
 				<Tab value="settings-same-worker">Shared Directory</Tab>
+				<Tab value="settings-worker-group">Worker Group</Tab>
 
 				<svelte:fragment slot="content">
 					<TabContent value="settings-metadata" class="p-4 h-full">
 						<div class="overflow-auto h-full">
-							<Path bind:path={$flowStore.path} {initialPath} namePlaceholder="flow" kind="flow" />
-
-							<label class="block my-4">
-								<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
+							<label class="block mb-10 mt-2">
+								<span class="text-secondary text-sm font-bold"
+									>Summary <Required required={false} /></span
+								>
 								<input
 									type="text"
+									autofocus
 									bind:value={$flowStore.summary}
 									placeholder="Short summary to be displayed when listed"
 									id="flow-summary"
 								/>
 							</label>
 
-							<label class="block my-4" for="inp">
-								<span class="text-gray-700 text-sm">
+							<span class="text-secondary text-sm font-bold"> Path </span>
+							<Path
+								autofocus={false}
+								bind:this={path}
+								bind:path={$flowStore.path}
+								{initialPath}
+								namePlaceholder="flow"
+								kind="flow"
+							/>
+
+							<label class="block mt-10 mb-6" for="inp">
+								<span class="text-secondary text-sm font-bold">
 									Description
 									<Required required={false} />
-									<textarea
-										use:autosize
-										type="text"
-										class="text-sm"
-										id="inp"
-										bind:value={$flowStore.description}
-										placeholder="What this flow does and how to use it."
-										rows="3"
-									/>
 								</span>
+
+								<textarea
+									use:autosize
+									type="text"
+									class="text-sm"
+									id="inp"
+									bind:value={$flowStore.description}
+									placeholder="What this flow does and how to use it."
+									rows="3"
+								/>
 							</label>
 							<Slider text="How to trigger flows?">
-								<div class="text-sm text-gray-600 border p-4 mb-20">
+								<div class="text-sm text-tertiary border p-4 mb-20">
 									On-demand:
 									<ul class="pt-4">
 										<li>
@@ -107,7 +141,7 @@ $: syncedUrl = `${hostname}/api/w/${$workspaceStore}/jobs/run_wait_result/f/${$f
 														class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
 													>
 														{url}
-														<span class="text-gray-700 ml-2">
+														<span class="text-secondary ml-2">
 															<Icon data={faClipboard} />
 														</span>
 													</a>
@@ -123,7 +157,7 @@ $: syncedUrl = `${hostname}/api/w/${$workspaceStore}/jobs/run_wait_result/f/${$f
 														class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
 													>
 														{syncedUrl}
-														<span class="text-gray-700 ml-2">
+														<span class="text-secondary ml-2">
 															<Icon data={faClipboard} />
 														</span>
 													</a>
@@ -158,9 +192,9 @@ $: syncedUrl = `${hostname}/api/w/${$workspaceStore}/jobs/run_wait_result/f/${$f
 							title="Primary Schedule"
 							documentationLink="https://www.windmill.dev/docs/core_concepts/scheduling"
 						>
-							Flows can be triggered by any schedules, their webhooks or their UI but they only have
-							only one primary schedules with which they share the same path. The primary schedule
-							can be set here.
+							Flows can be triggered by any schedules, their webhooks or their UI but they have only
+							one primary schedulfs with which they share the same path. The primary schedule can be
+							set here.
 						</Alert>
 						<div class="mt-4" />
 						<FlowSchedules />
@@ -170,9 +204,11 @@ $: syncedUrl = `${hostname}/api/w/${$workspaceStore}/jobs/run_wait_result/f/${$f
 						<Alert type="info" title="Shared Directory">
 							Steps will share a folder at `./shared` in which they can store heavier data and pass
 							them to the next step. <br /><br />Beware that the `./shared` folder is not preserved
-							across suspends and sleeps.
+							across suspends and sleeps. <br /><br />
+							Furthermore, steps' worker groups is not respected and only the flow's worker group will
+							be respected.
 						</Alert>
-						<span class="my-2 text-sm font-bold">Shared Directory</span>
+						<span class="my-4 text-lg font-bold">Shared Directory</span>
 						<Toggle
 							bind:checked={$flowStore.value.same_worker}
 							options={{
@@ -180,6 +216,48 @@ $: syncedUrl = `${hostname}/api/w/${$workspaceStore}/jobs/run_wait_result/f/${$f
 							}}
 						/>
 					</TabContent>
+					<TabContent value="settings-worker-group" class="p-4 flex flex-col">
+						<Alert type="info" title="Worker Group">
+							When a worker group is defined at the flow level, any steps inside the flow will run
+							on that worker group, regardless of the steps' worker group. If no worker group is
+							defined, the flow controls will be executed by the default worker group 'flow' and the
+							steps will be executed in their respective worker group.
+						</Alert>
+						<span class="my-4 text-lg font-bold">Worker Group</span>
+						{#if $workerTags}
+							{#if $workerTags?.length > 0}
+								<div class="w-40">
+									<select
+										placeholder="Worker group"
+										bind:value={$flowStore.tag}
+										on:change={(e) => {
+											if ($flowStore.tag == '') {
+												$flowStore.tag = undefined
+											}
+										}}
+									>
+										{#if $flowStore.tag}
+											<option value="">reset to default</option>
+										{:else}
+											<option value="" disabled selected>Worker Group</option>
+										{/if}
+										{#each $workerTags ?? [] as tag (tag)}
+											<option value={tag}>{tag}</option>
+										{/each}
+									</select>
+								</div>
+							{:else}
+								<div class="text-sm text-secondary italic mb-2">
+									No custom worker group defined on this instance. See <a
+										href="https://www.windmill.dev/docs/core_concepts/worker_groups"
+										target="_blank">documentation</a
+									>
+								</div>
+							{/if}
+						{:else}
+							<Loader2 class="animate-spin" />
+						{/if}
+					</TabContent>
 				</svelte:fragment>
 			</Tabs>
 		</div>

package/package/components/flows/content/ScriptEditorDrawer.svelte

@@ -79,7 +79,7 @@ async function saveScript() {
 		{:else}
 			<div
 				out:fade={{ duration: 200 }}
-				class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+				class="absolute inset-0 center-center flex-col bg-surface text-tertiary border"
 			>
 				<Loader2 class="animate-spin" size={16} />
 				<span class="text-xs mt-1">Loading</span>

package/package/components/flows/flowStateUtils.js

@@ -17,7 +17,7 @@ export async function loadFlowModuleState(flowModule) {
         return { schema, previewResult: NEVER_TESTED_THIS_FAR };
     }
     catch (e) {
-        console.error(e);
+        console.debug(e);
         return emptyFlowModuleState();
     }
 }

package/package/components/flows/header/FlowPreviewButtons.svelte

@@ -18,6 +18,7 @@ $: upToDisabled =
             'settings-retries',
             'settings-same-worker',
             'settings-graph',
+            'settings-worker-group',
             'inputs',
             'schedules',
             'failure',

package/package/components/flows/idUtils.js

@@ -1,5 +1,5 @@
 const aCharCode = 'a'.charCodeAt(0);
-export const forbiddenIds = ['do', 'bg', 'ctx', 'state'];
+export const forbiddenIds = ['do', 'bg', 'ctx', 'state', 'if', 'else', 'for'];
 export function numberToChars(n) {
     if (n < 0) {
         return '-' + numberToChars(-n);

package/package/components/flows/map/FlowConstantsItem.svelte

@@ -2,7 +2,7 @@
 import { classNames } from '../../../utils';
 import { DollarSign } from 'lucide-svelte';
 const { selectedId } = getContext('FlowEditorContext');
-$: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId == 'constants' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
+$: settingsClass = classNames('border w-full rounded-sm p-2 bg-surface  text-sm cursor-pointer flex items-center', $selectedId == 'constants' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
 </script>
 
 <button on:click={() => ($selectedId = 'constants')} class={settingsClass}>

package/package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -37,7 +37,7 @@ function onToggle() {
 		}
 	}}
 	class={classNames(
-		'border mx-auto rounded-sm px-2 py-1 bg-white text-sm border-gray-400 cursor-pointer flex justify-between items-center flex-row overflow-x-hidden ',
+		'border mx-auto rounded-sm px-2 py-1 bg-surface text-sm cursor-pointer flex justify-between items-center flex-row overflow-x-hidden ',
 		$selectedId?.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
 	)}
 	style="min-width: 275px"