windmill-components 1.86.0 → 1.89.0

package/package/components/flows/content/FlowLoop.svelte

@@ -0,0 +1,130 @@
+<script>import { getContext } from 'svelte';
+import FlowCard from '../common/FlowCard.svelte';
+import Toggle from '../../Toggle.svelte';
+import SimpleEditor from '../../SimpleEditor.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
+import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
+import FlowModuleSuspend from './FlowModuleSuspend.svelte';
+// import FlowRetries from './FlowRetries.svelte'
+import { Button, Tab, TabContent, Tabs } from '../../common';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import { getStepPropPicker } from '../previousResults';
+import FlowModuleSleep from './FlowModuleSleep.svelte';
+const { previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
+export let mod;
+export let parentModule;
+export let previousModule;
+let editor = undefined;
+let selected = 'early-stop';
+$: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, mod.id, $flowStore, $previewArgs, false);
+</script>
+
+<div class="h-full flex flex-col">
+	<FlowCard title="For loop">
+		<div slot="header" class="grow">
+			<input bind:value={mod.summary} placeholder={'Summary'} />
+		</div>
+		<Splitpanes horizontal class="!max-h-[calc(100%-48px)]">
+			<Pane size={60} minSize={20} class="p-4">
+				{#if mod.value.type === 'forloopflow'}
+					<div class="mb-2 text-sm font-bold">
+						Iterator expression
+						<Tooltip>
+							List to iterate over. For more information see the
+							<a href="https://docs.windmill.dev/docs/getting_started/flows_quickstart">docs.</a>
+						</Tooltip>
+					</div>
+					{#if mod.value.iterator.type == 'javascript'}
+						<div class="border w-full">
+							<PropPickerWrapper
+								notSelectable
+								pickableProperties={stepPropPicker.pickableProperties}
+								on:select={({ detail }) => {
+									editor?.insertAtCursor(detail)
+									editor?.focus()
+								}}
+							>
+								<SimpleEditor
+									bind:this={editor}
+									lang="javascript"
+									bind:code={mod.value.iterator.expr}
+									class="small-editor"
+									shouldBindKey={false}
+									extraLib={stepPropPicker.extraLib}
+								/>
+							</PropPickerWrapper>
+						</div>
+					{:else}
+						<Button
+							on:click={() => {
+								if (mod.value.type === 'forloopflow') mod.value.iterator.type = 'javascript'
+							}}
+						/>
+					{/if}
+					<div class="flex flex-row gap-8">
+						<div>
+							<div class="mt-6 mb-2 text-sm font-bold"
+								>Skip failures <Tooltip
+									>If disabled, the flow will fail as soon as one of the iteration fail. Otherwise,
+									the error will be collected as the result of the iteration. Regardless of this
+									setting, if an error handler is defined, it will process the error.</Tooltip
+								></div
+							>
+							<Toggle
+								bind:checked={mod.value.skip_failures}
+								options={{
+									right: 'Skip failures'
+								}}
+							/>
+						</div>
+						<div>
+							<div class="mt-6 mb-2 text-sm font-bold">Run in parallel</div>
+							<Toggle
+								bind:checked={mod.value.parallel}
+								options={{
+									right: 'All iterations run in parallel'
+								}}
+							/>
+						</div>
+					</div>
+				{/if}
+			</Pane>
+			<Pane size={40} minSize={20} class="flex flex-col flex-1">
+				<Tabs bind:selected>
+					<!-- <Tab value="retries">Retries</Tab> -->
+					<Tab value="early-stop">Early Stop/Break</Tab>
+					<Tab value="suspend">Suspend</Tab>
+					<Tab value="sleep">Sleep</Tab>
+
+					<svelte:fragment slot="content">
+						<div class="overflow-hidden bg-white" style="height:calc(100% - 32px);">
+							<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowRetries bind:flowModule={mod} />
+								</div>
+							</TabContent> -->
+
+							<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleEarlyStop bind:flowModule={mod} />
+								</div>
+							</TabContent>
+
+							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSuspend bind:flowModule={mod} />
+								</div>
+							</TabContent>
+							<TabContent value="sleep" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule={mod} />
+								</div>
+							</TabContent>
+						</div>
+					</svelte:fragment>
+				</Tabs>
+			</Pane>
+		</Splitpanes>
+	</FlowCard>
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen/models/FlowModule';
+declare const __propDef: {
+    props: {
+        mod: FlowModule;
+        parentModule: FlowModule | undefined;
+        previousModule: FlowModule | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowLoopProps = typeof __propDef.props;
+export type FlowLoopEvents = typeof __propDef.events;
+export type FlowLoopSlots = typeof __propDef.slots;
+export default class FlowLoop extends SvelteComponentTyped<FlowLoopProps, FlowLoopEvents, FlowLoopSlots> {
+}
+export {};

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -0,0 +1,270 @@
+<script>import { Pane, Splitpanes } from 'svelte-splitpanes';
+import Tab from '../../common/tabs/Tab.svelte';
+import Tabs from '../../common/tabs/Tabs.svelte';
+import Editor from '../../Editor.svelte';
+import EditorBar from '../../EditorBar.svelte';
+import ModulePreview from '../../ModulePreview.svelte';
+import { createScriptFromInlineScript, fork } from '../flowStateUtils';
+import { RawScript } from '../../../gen';
+import FlowCard from '../common/FlowCard.svelte';
+import FlowModuleHeader from './FlowModuleHeader.svelte';
+import { getLatestHashForScript, schemaToObject, scriptLangToEditorLang } from '../../../utils';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
+import { afterUpdate, getContext } from 'svelte';
+import { loadSchemaFromModule } from '../utils';
+import FlowModuleScript from './FlowModuleScript.svelte';
+import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
+import FlowModuleSuspend from './FlowModuleSuspend.svelte';
+import FlowRetries from './FlowRetries.svelte';
+import { getStepPropPicker } from '../previousResults';
+import { deepEqual } from 'fast-equals';
+import Button from '../../common/button/Button.svelte';
+import Alert from '../../common/alert/Alert.svelte';
+import FlowModuleSleep from './FlowModuleSleep.svelte';
+import FlowPathViewer from './FlowPathViewer.svelte';
+import InputTransformSchemaForm from '../../InputTransformSchemaForm.svelte';
+const { selectedId, previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
+export let flowModule;
+export let failureModule = false;
+export let parentModule = undefined;
+export let previousModule;
+let value = flowModule.value;
+$: value = flowModule.value;
+let editor;
+let modulePreview;
+let websocketAlive = { pyright: false, black: false, deno: false, go: false };
+let selected = 'inputs';
+let advancedSelected = 'retries';
+let wrapper;
+let panes;
+let totalTopGap = 0;
+let validCode = true;
+let width = 1200;
+let inputTransforms = value.input_transforms;
+$: value.input_transforms = inputTransforms;
+$: stepPropPicker = failureModule
+    ? {
+        pickableProperties: {
+            flow_input: schemaToObject($flowStore.schema, $previewArgs),
+            priorIds: {},
+            previousId: undefined,
+            hasResume: false
+        },
+        extraLib: ''
+    }
+    : getStepPropPicker($flowStateStore, parentModule, previousModule, flowModule.id, $flowStore, $previewArgs, false);
+function onKeyDown(event) {
+    if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
+        event.preventDefault();
+        selected = 'test';
+        modulePreview?.runTestWithStepArgs();
+    }
+}
+async function reload(flowModule) {
+    try {
+        const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
+        validCode = true;
+        setTimeout(() => {
+            if (!deepEqual(value.input_transforms, input_transforms)) {
+                inputTransforms = input_transforms;
+            }
+        });
+        if (!deepEqual(schema, $flowStateStore[flowModule.id]?.schema)) {
+            if (!$flowStateStore[flowModule.id]) {
+                $flowStateStore[flowModule.id] = { schema };
+            }
+            else {
+                $flowStateStore[flowModule.id].schema = schema;
+            }
+        }
+    }
+    catch (e) {
+        validCode = false;
+    }
+}
+function selectAdvanced(subtab) {
+    selected = 'advanced';
+    advancedSelected = subtab;
+}
+afterUpdate(() => {
+    totalTopGap = 0;
+    if (!(wrapper && panes))
+        return;
+    const wrapperTop = wrapper.getBoundingClientRect().top;
+    const panesTop = panes.getBoundingClientRect().top;
+    totalTopGap = panesTop - wrapperTop;
+});
+let isScript = true;
+$: isScript != (value.type === 'script') && (isScript = value.type === 'script');
+let forceReload = 0;
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+{#if value}
+	<div class="h-full" bind:this={wrapper} bind:clientWidth={width}>
+		<FlowCard bind:flowModule>
+			<svelte:fragment slot="header">
+				<FlowModuleHeader
+					bind:module={flowModule}
+					on:toggleSuspend={() => selectAdvanced('suspend')}
+					on:toggleSleep={() => selectAdvanced('sleep')}
+					on:toggleRetry={() => selectAdvanced('retries')}
+					on:toggleStopAfterIf={() => selectAdvanced('early-stop')}
+					on:fork={async () => {
+						const [module, state] = await fork(flowModule)
+						flowModule = module
+						$flowStateStore[module.id] = state
+					}}
+					on:reload={async () => {
+						if (flowModule.value.type == 'script') {
+							console.log('reload')
+							if (flowModule.value.hash != undefined) {
+								flowModule.value.hash = await getLatestHashForScript(flowModule.value.path)
+							}
+							forceReload++
+							await reload(flowModule)
+						}
+					}}
+					on:createScriptFromInlineScript={async () => {
+						const [module, state] = await createScriptFromInlineScript(
+							flowModule,
+							$selectedId,
+							$flowStateStore[flowModule.id].schema,
+							$flowStore
+						)
+						flowModule = module
+						$flowStateStore[module.id] = state
+					}}
+				/>
+			</svelte:fragment>
+
+			{#if value.type === 'rawscript'}
+				<div class="border-b-2 shadow-sm px-1">
+					<EditorBar
+						{validCode}
+						{editor}
+						lang={value['language'] ?? 'deno'}
+						{websocketAlive}
+						iconOnly={width < 850}
+					/>
+				</div>
+			{/if}
+
+			<div
+				bind:this={panes}
+				class="h-full"
+				style="max-height: calc(100% - {totalTopGap}px) !important;"
+			>
+				<Splitpanes horizontal>
+					<Pane size={isScript ? 30 : 50} minSize={20}>
+						{#if value.type === 'rawscript'}
+							<Editor
+								path={value['path']}
+								bind:websocketAlive
+								bind:this={editor}
+								class="h-full relative"
+								bind:code={value.content}
+								deno={value.language === RawScript.language.DENO}
+								lang={scriptLangToEditorLang(value.language)}
+								automaticLayout={true}
+								cmdEnterAction={async () => {
+									selected = 'test'
+									if (value.type === 'rawscript') {
+										value.content = editor.getCode()
+									}
+									await reload(flowModule)
+									modulePreview?.runTestWithStepArgs()
+								}}
+								on:change={async (event) => {
+									if (flowModule.value.type === 'rawscript') {
+										flowModule.value.content = event.detail
+									}
+									await reload(flowModule)
+								}}
+								formatAction={() => reload(flowModule)}
+								fixedOverflowWidgets={true}
+							/>
+						{:else if value.type === 'script'}
+							{#key forceReload}
+								<FlowModuleScript path={value.path} hash={value.hash} />
+							{/key}
+						{:else if value.type === 'flow'}
+							<FlowPathViewer path={value.path} />
+						{/if}
+					</Pane>
+					<Pane size={isScript ? 70 : 50} minSize={20}>
+						<Tabs bind:selected>
+							<Tab value="inputs"><span class="font-semibold">Step Input</span></Tab>
+							<Tab value="test"><span class="font-semibold text-md">Test this step</span></Tab>
+							<Tab value="advanced">Advanced</Tab>
+						</Tabs>
+						<div class="h-[calc(100%-32px)]">
+							{#if selected === 'inputs'}
+								<div class="h-full overflow-auto">
+									<PropPickerWrapper
+										pickableProperties={stepPropPicker.pickableProperties}
+										error={failureModule}
+									>
+										<InputTransformSchemaForm
+											schema={$flowStateStore[$selectedId]?.schema ?? {}}
+											previousModuleId={previousModule?.id}
+											bind:args={value.input_transforms}
+											bind:extraLib={stepPropPicker.extraLib}
+										/>
+									</PropPickerWrapper>
+								</div>
+							{:else if selected === 'test'}
+								<ModulePreview
+									bind:this={modulePreview}
+									mod={flowModule}
+									schema={$flowStateStore[$selectedId]?.schema ?? {}}
+								/>
+							{:else if selected === 'advanced'}
+								<Tabs bind:selected={advancedSelected}>
+									<Tab value="retries">Retries</Tab>
+									{#if !$selectedId.includes('failure')}
+										<Tab value="early-stop">Early Stop/Break</Tab>
+										<Tab value="suspend">Suspend</Tab>
+										<Tab value="sleep">Sleep</Tab>
+										<Tab value="same_worker">Shared Directory</Tab>
+									{/if}
+								</Tabs>
+								<div class="h-[calc(100%-32px)] overflow-auto p-4">
+									{#if advancedSelected === 'retries'}
+										<FlowRetries bind:flowModule />
+									{:else if advancedSelected === 'early-stop'}
+										<FlowModuleEarlyStop bind:flowModule />
+									{:else if advancedSelected === 'suspend'}
+										<div>
+											<FlowModuleSuspend bind:flowModule />
+										</div>
+									{:else if advancedSelected === 'sleep'}
+										<div>
+											<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
+										</div>
+									{:else if advancedSelected === 'same_worker'}
+										<div>
+											<Alert type="info" title="Share a directory between steps">
+												If shared directory is set, will share a folder that will be mounted on
+												`./shared` for each of them to pass data between each other.
+											</Alert>
+											<Button
+												btnClasses="mt-4"
+												on:click={() => {
+													$selectedId = 'settings-same-worker'
+												}}>Set shared directory in the flow settings</Button
+											>
+										</div>
+									{/if}
+								</div>
+							{/if}
+						</div>
+					</Pane>
+				</Splitpanes>
+			</div>
+		</FlowCard>
+	</div>
+{:else}
+	Incorrect flow module type
+{/if}

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import { type FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flowModule: FlowModule;
+        failureModule?: boolean | undefined;
+        parentModule?: FlowModule | undefined;
+        previousModule: FlowModule | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowModuleComponentProps = typeof __propDef.props;
+export type FlowModuleComponentEvents = typeof __propDef.events;
+export type FlowModuleComponentSlots = typeof __propDef.slots;
+export default class FlowModuleComponent extends SvelteComponentTyped<FlowModuleComponentProps, FlowModuleComponentEvents, FlowModuleComponentSlots> {
+}
+export {};

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

@@ -0,0 +1,78 @@
+<script>import SimpleEditor from '../../SimpleEditor.svelte';
+import Toggle from '../../Toggle.svelte';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import { NEVER_TESTED_THIS_FAR } from '../utils';
+import { getContext } from 'svelte';
+const { flowStateStore } = getContext('FlowEditorContext');
+export let flowModule;
+let editor = undefined;
+$: isStopAfterIfEnabled = Boolean(flowModule.stop_after_if);
+$: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_FAR;
+</script>
+
+<div class="flex flex-col items-start space-y-2 {$$props.class}">
+	<h2>
+		Early stop/Break
+		<Tooltip>
+			If defined, at the end of the step, the predicate expression will be evaluated to decide if
+			the flow should stop early. Skipped flows are just a label useful to not see them in the runs
+			page. If stop early is run within a forloop, it will just break the for-loop and have it stop
+			at that iteration instead of stopping the whole flow.
+		</Tooltip>
+	</h2>
+	<Toggle
+		checked={isStopAfterIfEnabled}
+		on:change={() => {
+			if (isStopAfterIfEnabled && flowModule.stop_after_if) {
+				flowModule.stop_after_if = undefined
+			} else {
+				flowModule.stop_after_if = {
+					expr: 'result == undefined',
+					skip_if_stopped: false
+				}
+			}
+		}}
+		options={{
+			right: 'Early stop or Break if condition met'
+		}}
+	/>
+
+	<div class="w-full border p-2 flex flex-col {flowModule.stop_after_if ? '' : 'bg-gray-50'}">
+		{#if flowModule.stop_after_if}
+			<Toggle
+				bind:checked={flowModule.stop_after_if.skip_if_stopped}
+				options={{
+					right: 'Label flow as "skipped" if stopped'
+				}}
+			/>
+			<span class="text-xs font-bold">Stop condition expression</span>
+			<div class="border w-full">
+				<PropPickerWrapper
+					{result}
+					pickableProperties={undefined}
+					on:select={({ detail }) => {
+						editor?.insertAtCursor(detail)
+						editor?.focus()
+					}}
+				>
+					<SimpleEditor
+						bind:this={editor}
+						lang="javascript"
+						bind:code={flowModule.stop_after_if.expr}
+						class="small-editor"
+						extraLib={`declare const result = ${JSON.stringify(result)};`}
+					/>
+				</PropPickerWrapper>
+			</div>
+		{:else}
+			<Toggle
+				disabled
+				options={{
+					right: 'Label flow as "skipped" if stopped'
+				}}
+			/> <span class="text-xs font-bold">Stop condition expression</span>
+			<textarea disabled rows="3" class="min-h-[80px]" />
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        flowModule: FlowModule;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowModuleEarlyStopProps = typeof __propDef.props;
+export type FlowModuleEarlyStopEvents = typeof __propDef.events;
+export type FlowModuleEarlyStopSlots = typeof __propDef.slots;
+export default class FlowModuleEarlyStop extends SvelteComponentTyped<FlowModuleEarlyStopProps, FlowModuleEarlyStopEvents, FlowModuleEarlyStopSlots> {
+}
+export {};

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

@@ -0,0 +1,141 @@
+<script>import Button from '../../common/button/Button.svelte';
+import { WorkerService } from '../../../gen';
+import { faCodeBranch, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher, getContext } from 'svelte';
+import { Bed, PhoneIncoming, Repeat, Square } from 'lucide-svelte';
+import Popover from '../../Popover.svelte';
+import { getLatestHashForScript, sendUserToast } from '../../../utils';
+import { workerTags } from '../../../stores';
+export let module;
+const { scriptEditorDrawer } = getContext('FlowEditorContext');
+const dispatch = createEventDispatcher();
+loadWorkerGroups();
+async function loadWorkerGroups() {
+    if (!$workerTags) {
+        $workerTags = await WorkerService.getCustomTags();
+    }
+}
+$: moduleRetry = module.retry?.constant || module.retry?.exponential;
+</script>
+
+<div class="flex flex-row space-x-2">
+	{#if module.value.type === 'script' || module.value.type === 'rawscript' || module.value.type == 'flow'}
+		<Popover
+			placement="bottom"
+			class="center-center rounded border p-2 
+			{moduleRetry
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
+			on:click={() => dispatch('toggleRetry')}
+		>
+			<Repeat size={14} />
+			<svelte:fragment slot="text">Retries</svelte:fragment>
+		</Popover>
+		<Popover
+			placement="bottom"
+			class="center-center rounded border p-2
+			{module.stop_after_if
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
+			on:click={() => dispatch('toggleStopAfterIf')}
+		>
+			<Square size={14} />
+			<svelte:fragment slot="text">Early stop/break</svelte:fragment>
+		</Popover>
+		<Popover
+			placement="bottom"
+			class="center-center rounded border p-2 
+			{module.suspend
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
+			on:click={() => dispatch('toggleSuspend')}
+		>
+			<PhoneIncoming size={14} />
+			<svelte:fragment slot="text">Suspend</svelte:fragment>
+		</Popover>
+		<Popover
+			placement="bottom"
+			class="center-center rounded border p-2
+			{module.sleep
+				? 'bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-200'
+				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
+			on:click={() => dispatch('toggleSleep')}
+		>
+			<Bed size={14} />
+			<svelte:fragment slot="text">Sleep</svelte:fragment>
+		</Popover>
+	{/if}
+	{#if module.value.type === 'script'}
+		<div class="w-2" />
+		{#if !module.value.path.startsWith('hub/')}
+			<Button
+				size="xs"
+				color="light"
+				variant="border"
+				on:click={async () => {
+					if (module.value.type == 'script') {
+						const hash = module.value.hash ?? (await getLatestHashForScript(module.value.path))
+						$scriptEditorDrawer?.openDrawer(hash, () => {
+							dispatch('reload')
+							sendUserToast('Script has been updated')
+						})
+					}
+				}}
+				startIcon={{ icon: faPen }}
+				iconOnly={false}
+				disabled={module.value.hash != undefined}
+			>
+				Edit {#if module.value.hash != undefined} (locked hash){/if}
+			</Button>
+		{/if}
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			on:click={() => dispatch('fork')}
+			startIcon={{ icon: faCodeBranch }}
+			iconOnly={false}
+		>
+			Fork
+		</Button>
+	{/if}
+
+	{#if module.value.type === 'rawscript'}
+		{#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 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>
+				</div>
+			{/if}
+		{/if}
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faSave }}
+			on:click={() => dispatch('createScriptFromInlineScript')}
+			iconOnly={false}
+		>
+			Save to workspace
+		</Button>
+	{/if}
+</div>