windmill-components 1.655.2 → 1.665.1

package/package/components/ScriptBuilder.svelte

@@ -46,6 +46,20 @@ import DebounceLimit from './flows/DebounceLimit.svelte';
 import { isRuleActive } from '../workspaceProtectionRules.svelte';
 import { buildForkEditUrl } from '../utils/editInFork';
 import OnBehalfOfSelector, {} from './OnBehalfOfSelector.svelte';
+import WacExportDrawer from './scripts/WacExportDrawer.svelte';
+import Modal from './common/modal/Modal.svelte';
+const WAC_ALPHA_ACK_KEY = 'windmill_wac_alpha_ack';
+let wacAlphaModalOpen = $state(false);
+function showWacAlphaModalIfNeeded() {
+    if (typeof sessionStorage !== 'undefined' &&
+        sessionStorage.getItem(WAC_ALPHA_ACK_KEY) !== 'true') {
+        wacAlphaModalOpen = true;
+    }
+}
+function acknowledgeWacAlpha() {
+    sessionStorage.setItem(WAC_ALPHA_ACK_KEY, 'true');
+    wacAlphaModalOpen = false;
+}
 let { script = $bindable(), fullyLoaded = true, initialPath = $bindable(''), template = $bindable('script'), initialArgs = {}, lockedLanguage = false, showMeta = false, neverShowMeta = false, diffDrawer = undefined, savedScript = $bindable(undefined), searchParams = new URLSearchParams(), disableHistoryChange = false, replaceStateFn = (url) => window.history.replaceState(null, '', url), customUi = {}, savedPrimarySchedule = undefined, functionExports = undefined, children, onDeploy, onDeployError, onSaveInitial, onSeeDetails, onSaveDraftError, onSaveDraft, disableAi } = $props();
 export function getInitialAndModifiedValues() {
     return {
@@ -86,6 +100,7 @@ let metadataOpen = $state(!untrack(() => neverShowMeta) &&
 let editor = $state(undefined);
 let scriptEditor = $state(undefined);
 let captureTable = $state(undefined);
+let wacExportDrawer = $state(undefined);
 // Draft triggers confirmation modal
 let draftTriggersModalOpen = $state(false);
 let confirmDeploymentCallback = () => { };
@@ -220,6 +235,24 @@ function saveSessionDraft() {
     }, 500);
 }
 if (script.content == '') {
+    if (template === 'wac_python') {
+        script.modules = {
+            'helper.py': {
+                content: 'def main(a: str) -> str:\n    return f"hello {a}"\n',
+                language: 'python3'
+            }
+        };
+        showWacAlphaModalIfNeeded();
+    }
+    else if (template === 'wac_typescript') {
+        script.modules = {
+            'helper.ts': {
+                content: 'export function main(a: string): string {\n  return `hello ${a}`\n}\n',
+                language: 'bun'
+            }
+        };
+        showWacAlphaModalIfNeeded();
+    }
     initContent(script.language, script.kind, template);
 }
 async function isTemplateScript() {
@@ -252,6 +285,7 @@ async function initContent(language, kind, template) {
     }
 }
 async function handleEditScript(stay, deployMsg) {
+    scriptEditor?.flushModuleState();
     // Fetch latest version and fetch entire script after if needed
     let actual_parent_hash = undefined;
     try {
@@ -340,11 +374,11 @@ async function editScript(stay, parentHash, deploymentMsg, triggersToDeploy) {
         try {
             const result = await inferArgs(script.language, script.content, script.schema, script.kind === 'preprocessor' ? 'preprocessor' : undefined);
             if (script.kind === 'preprocessor') {
-                script.no_main_func = undefined;
+                script.auto_kind = undefined;
                 script.has_preprocessor = undefined;
             }
             else {
-                script.no_main_func = result?.no_main_func || undefined;
+                script.auto_kind = result?.auto_kind || undefined;
                 script.has_preprocessor = result?.has_preprocessor || undefined;
             }
         }
@@ -384,12 +418,13 @@ async function editScript(stay, parentHash, deploymentMsg, triggersToDeploy) {
                 timeout: script.timeout,
                 concurrency_key: emptyString(script.concurrency_key) ? undefined : script.concurrency_key,
                 visible_to_runner_only: script.visible_to_runner_only,
-                no_main_func: script.no_main_func,
+                auto_kind: script.auto_kind,
                 has_preprocessor: script.has_preprocessor,
                 deployment_message: deploymentMsg || undefined,
                 on_behalf_of_email: script.on_behalf_of_email,
                 preserve_on_behalf_of: preserveOnBehalfOf || undefined,
-                assets: script.assets
+                assets: script.assets,
+                modules: script.modules
             }
         });
         if (!initialPath) {
@@ -411,7 +446,10 @@ async function editScript(stay, parentHash, deploymentMsg, triggersToDeploy) {
         if (!disableHistoryChange) {
             history.replaceState(history.state, '', `/scripts/edit/${script.path}`);
         }
-        if (stay || (script.no_main_func && script.kind !== 'preprocessor' && !isWorkflowAsCode(script.content, script.language))) {
+        if (stay ||
+            (script.auto_kind === 'lib' &&
+                script.kind !== 'preprocessor' &&
+                !isWorkflowAsCode(script.content, script.language))) {
             script.parent_hash = newHash;
             sendUserToast('Deployed');
         }
@@ -426,6 +464,7 @@ async function editScript(stay, parentHash, deploymentMsg, triggersToDeploy) {
     loadingSave = false;
 }
 async function saveDraft(forceSave = false) {
+    scriptEditor?.flushModuleState();
     if (initialPath != '' && !savedScript) {
         return;
     }
@@ -457,11 +496,11 @@ async function saveDraft(forceSave = false) {
         try {
             const result = await inferArgs(script.language, script.content, script.schema, script.kind === 'preprocessor' ? 'preprocessor' : undefined);
             if (script.kind === 'preprocessor') {
-                script.no_main_func = undefined;
+                script.auto_kind = undefined;
                 script.has_preprocessor = undefined;
             }
             else {
-                script.no_main_func = result?.no_main_func || undefined;
+                script.auto_kind = result?.auto_kind || undefined;
                 script.has_preprocessor = result?.has_preprocessor || undefined;
             }
         }
@@ -522,10 +561,11 @@ async function saveDraft(forceSave = false) {
                         ? undefined
                         : script.concurrency_key,
                     visible_to_runner_only: script.visible_to_runner_only,
-                    no_main_func: script.no_main_func,
+                    auto_kind: script.auto_kind,
                     has_preprocessor: script.has_preprocessor,
                     on_behalf_of_email: script.on_behalf_of_email,
-                    assets: script.assets
+                    assets: script.assets,
+                    modules: script.modules
                 }
             });
         }
@@ -616,7 +656,7 @@ function computeDropdownItems(initialPath, savedScript, diffDrawer) {
                     }
                 ]
                 : []),
-            ...(!script.draft_only && script.kind === 'script' && !script.no_main_func
+            ...(!script.draft_only && script.kind === 'script' && !script.auto_kind
                 ? [
                     {
                         label: 'Exit & See details',
@@ -625,9 +665,29 @@ function computeDropdownItems(initialPath, savedScript, diffDrawer) {
                         }
                     }
                 ]
+                : []),
+            ...(isWorkflowAsCode(script.content, script.language)
+                ? [
+                    {
+                        label: 'Export as YAML/JSON',
+                        onClick: () => {
+                            wacExportDrawer?.open(script);
+                        }
+                    }
+                ]
                 : [])
         ]
         : [];
+    if (dropdownItems.length === 0 && isWorkflowAsCode(script.content, script.language)) {
+        dropdownItems = [
+            {
+                label: 'Export as YAML/JSON',
+                onClick: () => {
+                    wacExportDrawer?.open(script);
+                }
+            }
+        ];
+    }
     return dropdownItems.length > 0 ? dropdownItems : undefined;
 }
 function onKeyDown(event) {
@@ -940,7 +1000,10 @@ async function loadWorkerTags() {
 											<div class=" grid grid-cols-3 gap-2">
 												{#each langs as [label, lang] (lang)}
 													{@const isPicked =
-														(lang == script.language && template != 'bunnative' && template != 'docker' && template != 'claudesandbox') ||
+														(lang == script.language &&
+															template != 'bunnative' &&
+															template != 'docker' &&
+															template != 'claudesandbox') ||
 														(template == 'bunnative' && lang == 'bunnative') ||
 														(template == 'docker' && lang == 'docker') ||
 														(template == 'claudesandbox' && lang == 'bun')}
@@ -976,7 +1039,7 @@ async function loadWorkerTags() {
 											</div>
 										</Section>
 									{/if}
-									<div class="flex items-center gap-2 mt-2">
+									<div class="flex items-center gap-2 mt-2 flex-wrap">
 										<span class="text-2xs text-secondary">Template</span>
 										<Button
 											size="xs2"
@@ -994,6 +1057,57 @@ async function loadWorkerTags() {
 										>
 											Claude Sandbox
 										</Button>
+										<span title="Workflow-as-Code">
+											<Button
+												size="xs2"
+												variant="border"
+												color="light"
+												startIcon={{
+													icon: LanguageIcon,
+													props: { lang: 'bun', width: 16, height: 16 }
+												} as ButtonType.Icon}
+												on:click={() => {
+													template = 'wac_typescript'
+													script.language = 'bun'
+													script.modules = {
+														'helper.ts': {
+															content:
+																'export function main(a: string): string {\n  return `hello ${a}`\n}\n',
+															language: 'bun'
+														}
+													}
+													initContent('bun', script.kind, template)
+													showWacAlphaModalIfNeeded()
+												}}
+											>
+												WAC TypeScript
+											</Button>
+										</span>
+										<span title="Workflow-as-Code">
+											<Button
+												size="xs2"
+												variant="border"
+												color="light"
+												startIcon={{
+													icon: LanguageIcon,
+													props: { lang: 'python3', width: 16, height: 16 }
+												} as ButtonType.Icon}
+												on:click={() => {
+													template = 'wac_python'
+													script.language = 'python3'
+													script.modules = {
+														'helper.py': {
+															content: 'def main(a: str) -> str:\n    return f"hello {a}"\n',
+															language: 'python3'
+														}
+													}
+													initContent('python3', script.kind, template)
+													showWacAlphaModalIfNeeded()
+												}}
+											>
+												WAC Python
+											</Button>
+										</span>
 									</div>
 									{#if customUi?.settingsPanel?.metadata?.disableScriptKind !== true}
 										<Section label="Script kind">
@@ -1428,9 +1542,9 @@ async function loadWorkerTags() {
 												{#if script.on_behalf_of_email && canPreserve}
 													&rarr; <OnBehalfOfSelector
 														targetWorkspace={$workspaceStore ?? ''}
-														targetEmail={originalOnBehalfOfEmail}
+														targetValue={originalOnBehalfOfEmail}
 														selected={onBehalfOfChoice}
-														onSelect={(choice, email) => {
+														onSelect={(choice, details) => {
 															onBehalfOfChoice = choice
 															if (choice === 'me') {
 																script.on_behalf_of_email = $userStore?.email
@@ -1440,15 +1554,15 @@ async function loadWorkerTags() {
 																script.on_behalf_of_email = originalOnBehalfOfEmail
 																customOnBehalfOfEmail = ''
 																preserveOnBehalfOf = true
-															} else if (choice === 'custom' && email) {
-																script.on_behalf_of_email = email
-																customOnBehalfOfEmail = email
+															} else if (choice === 'custom' && details) {
+																script.on_behalf_of_email = details.email
+																customOnBehalfOfEmail = details.email
 																preserveOnBehalfOf = true
 															}
 														}}
 														kind="script"
 														{canPreserve}
-														customEmail={customOnBehalfOfEmail}
+														customValue={customOnBehalfOfEmail}
 														isDeployment={false}
 													/>
 												{:else if script.on_behalf_of_email && !canPreserve}
@@ -1723,9 +1837,35 @@ async function loadWorkerTags() {
 			bind:hasPreprocessor
 			bind:captureTable
 			bind:assets={script.assets}
+			bind:modules={script.modules}
 			enablePreprocessorSnippet
 		/>
 	</div>
 {:else}
 	Script Builder not available to operators
 {/if}
+
+<WacExportDrawer bind:this={wacExportDrawer} />
+
+<Modal bind:open={wacAlphaModalOpen} title="Workflow-as-Code (Alpha)" kind="X">
+	<div class="flex flex-col gap-4 pr-4">
+		<p class="text-sm text-secondary">
+			Workflow-as-Code is in <strong>alpha</strong> — use in production at your own risk. It is an
+			alternative to the Flow editor for advanced users. Feedback welcome on
+			<a
+				href="https://github.com/windmill-labs/windmill/issues"
+				target="_blank"
+				class="text-blue-600 dark:text-blue-400 hover:underline">GitHub</a
+			>
+			or
+			<a
+				href="https://discord.com/invite/V7PM2YHsPB"
+				target="_blank"
+				class="text-blue-600 dark:text-blue-400 hover:underline">Discord</a
+			>.
+		</p>
+		<div class="flex justify-end">
+			<Button size="sm" on:click={acknowledgeWacAlpha}>Acknowledge</Button>
+		</div>
+	</div>
+</Modal>