windmill-components 1.596.1 → 1.613.0

package/package/components/Section.svelte

@@ -42,7 +42,9 @@ let { label = undefined, tooltip = undefined, documentationLink = undefined, eeO
 					{/if}
 				{/if}
 			</h2>
-			{@render action?.()}
+			{#if !(collapsable && collapsed)}
+				{@render action?.()}
+			{/if}
 			{#if collapsable && collapsed}
 				{@render badge?.()}
 			{/if}

package/package/components/ServiceLogsInner.svelte

@@ -112,8 +112,8 @@ function getAllLogs(queryMinTs, queryMaxTs) {
                     return;
                 let minMax = manualPicker?.computeMinMax();
                 if (minMax) {
-                    maxTsManual = minMax?.maxTs;
-                    minTsManual = minMax?.minTs;
+                    maxTsManual = minMax?.maxTs ?? undefined;
+                    minTsManual = minMax?.minTs ?? undefined;
                 }
                 let maxTsPlus1 = maxTs ? new Date(new Date(maxTs).getTime() + 1000) : undefined;
                 getAllLogs(maxTsPlus1?.toISOString(), undefined);
@@ -420,8 +420,8 @@ $effect(() => {
 					/>
 				</div>
 				<ManuelDatePicker
-					bind:minTs={minTsManual}
-					bind:maxTs={maxTsManual}
+					bind:minTs={() => minTsManual ?? null, (v) => (minTsManual = v ?? undefined)}
+					bind:maxTs={() => maxTsManual ?? null, (v) => (maxTsManual = v ?? undefined)}
 					bind:this={manualPicker}
 					{loading}
 					on:loadJobs={() => {

package/package/components/SimpleEditor.svelte

@@ -7,6 +7,7 @@
 	import '@codingame/monaco-vscode-standalone-css-language-features'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
 	import '@codingame/monaco-vscode-standalone-html-language-features'
+	import { javascriptDefaults } from '@codingame/monaco-vscode-standalone-typescript-language-features'
 </script>
 
 <script lang="ts">import { BROWSER } from 'esm-env';
@@ -196,7 +197,7 @@ $effect(() => {
         untrack(() => updateModelAndOptions());
     }
 });
-let fontSize = $derived(small ? 12 : 14);
+let fontSize = $derived(small ? 12 : 13.5);
 async function loadMonaco() {
     setMonacoJsonOptions();
     setMonacoJavascriptOptions();
@@ -252,6 +253,20 @@ async function loadMonaco() {
         return;
     }
     keepModelAroundToAvoidDisposalOfWorkers();
+    // In VSCode webview (iframe), clipboard operations need special handling
+    // because the webview has restricted clipboard API access
+    if (window.parent !== window) {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
+            document.execCommand('copy');
+        });
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyX, function () {
+            document.execCommand('cut');
+        });
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyV, async function () {
+            inputEl?.focus();
+            document.execCommand('paste');
+        });
+    }
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         timeoutModel && clearTimeout(timeoutModel);
@@ -413,7 +428,7 @@ function loadExtraLib() {
             }
             previousExtraLib = extraLib;
         }
-        languages.typescript.javascriptDefaults.setExtraLibs(libs);
+        javascriptDefaults.setExtraLibs(libs);
     }
 }
 onMount(async () => {
@@ -457,8 +472,37 @@ export function setCursorToEnd() {
     }
 }
 updatePlaceholderVisibility(code ?? '');
+let inputEl = $state(null);
+let pasteValue = $state('');
+$effect(() => {
+    if (inputEl && pasteValue) {
+        untrack(() => {
+            editor?.executeEdits('paste', [
+                {
+                    range: editor?.getSelection() ?? {
+                        startLineNumber: 1,
+                        startColumn: 1,
+                        endLineNumber: 1,
+                        endColumn: 1
+                    },
+                    text: pasteValue,
+                    forceMoveMarkers: true
+                }
+            ]);
+            pasteValue = '';
+        });
+    }
+});
 </script>
 
+{#if parent.window !== window}
+	<input
+		style="height: 0; width: 0; opacity: 0; position: absolute; top: 0; left: 0; z-index: -1;"
+		type="text"
+		bind:this={inputEl}
+		bind:value={pasteValue}
+	/>
+{/if}
 <EditorTheme />
 {#if !editor || suggestion}
 	<FakeMonacoPlaceHolder

package/package/components/SuperadminSettingsInner.svelte

@@ -368,7 +368,7 @@ async function updateName(name, email) {
 	</div>
 </div>
 {#if tab != 'users'}
-	<div class="absolute bottom-2 w-[95%]">
+	<div class="absolute bottom-2 w-[95%] z-10">
 		<Button
 			variant="accent"
 			on:click={() => {

package/package/components/TemplateEditor.svelte

@@ -1,5 +1,9 @@
 <script module>
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
+	import {
+		javascriptDefaults,
+		getJavaScriptWorker
+	} from '@codingame/monaco-vscode-standalone-typescript-language-features'
 </script>
 
 <script lang="ts">import { BROWSER } from 'esm-env';
@@ -7,7 +11,7 @@ import { convertKind, createDocumentationString, displayPartsToString, editorCon
 import { createHash } from '../editorLangUtils';
 import libStdContent from '../es6.d.ts.txt?raw';
 import { editor as meditor, Uri as mUri, languages, Range, KeyMod, KeyCode } from 'monaco-editor';
-import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte';
+import { createEventDispatcher, getContext, onDestroy, onMount, untrack } from 'svelte';
 import { writable } from 'svelte/store';
 // import '@codingame/monaco-vscode-standalone-languages'
 // import '@codingame/monaco-vscode-standalone-typescript-language-features'
@@ -318,8 +322,8 @@ export const language = {
         ]
     }
 };
-let divEl = null;
-let editor;
+let divEl = $state(null);
+let editor = $state(undefined);
 let model;
 const { componentControl, selectedComponent } = getContext('AppViewerContext') || { componentControl: writable({}), selectedComponent: writable([]) };
 if ($selectedComponent) {
@@ -330,14 +334,7 @@ if ($selectedComponent) {
         }
     };
 }
-export let code = '';
-export let hash = createHash();
-export let automaticLayout = true;
-export let extraLib = '';
-export let autoHeight = true;
-export let fixedOverflowWidgets = true;
-export let fontSize = 12;
-export let loadAsync = false;
+let { code = $bindable(), hash = createHash(), automaticLayout = true, extraLib = '', autoHeight = true, fixedOverflowWidgets = true, fontSize = 12, loadAsync = false, class: clazz = '' } = $props();
 let yPadding = MONACO_Y_PADDING;
 if (typeof code != 'string') {
     code = '';
@@ -365,9 +362,9 @@ export function getCode() {
 }
 let cip;
 let extraModel;
-let width = 0;
+let width = $state(0);
 // let widgets: HTMLElement | undefined = document.getElementById('monaco-widgets-root') ?? undefined
-let initialized = false;
+let initialized = $state(false);
 let jsLoader = undefined;
 let timeoutModel = undefined;
 async function loadMonaco() {
@@ -380,11 +377,11 @@ async function loadMonaco() {
         create: () => language
     });
     languages.setLanguageConfiguration('template', conf);
-    model = meditor.createModel(code, lang, mUri.parse(uri));
+    model = meditor.createModel(code ?? '', lang, mUri.parse(uri));
     model.updateOptions(updateOptions);
     try {
         editor = meditor.create(divEl, {
-            ...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets, false),
+            ...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets, false),
             model,
             // overflowWidgetsDomNode: widgets,
             // lineNumbers: 'on',
@@ -401,10 +398,40 @@ async function loadMonaco() {
         console.error('Error loading monaco:', e);
         return;
     }
+    // In VSCode webview (iframe), clipboard operations need special handling
+    // because the webview has restricted clipboard API access
+    if (window.parent !== window) {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
+            document.execCommand('copy');
+        });
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyX, function () {
+            document.execCommand('cut');
+        });
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyV, async function () {
+            try {
+                const text = await navigator.clipboard.readText();
+                if (text && editor) {
+                    const selection = editor.getSelection();
+                    if (selection) {
+                        editor.executeEdits('paste', [
+                            {
+                                range: selection,
+                                text: text,
+                                forceMoveMarkers: true
+                            }
+                        ]);
+                    }
+                }
+            }
+            catch (e) {
+                document.execCommand('paste');
+            }
+        });
+    }
     editor.onDidFocusEditorText(() => {
         dispatch('focus');
-        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () { });
-        editor.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () { });
+        editor?.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () { });
+        editor?.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () { });
     });
     function updateCode() {
         const ncode = getCode();
@@ -423,12 +450,12 @@ async function loadMonaco() {
     extraModel = meditor.createModel('`' + model.getValue() + '`', 'javascript');
     if (autoHeight) {
         const updateHeight = () => {
-            const contentHeight = Math.min(1000, editor.getContentHeight());
+            const contentHeight = Math.min(1000, editor?.getContentHeight() ?? 0);
             if (divEl) {
                 divEl.style.height = `${contentHeight}px`;
             }
             try {
-                editor.layout({ width, height: contentHeight });
+                editor?.layout({ width, height: contentHeight });
             }
             catch { }
         };
@@ -447,7 +474,7 @@ async function loadMonaco() {
     jsLoader = setTimeout(async () => {
         jsLoader = undefined;
         try {
-            const worker = await languages.typescript.getJavaScriptWorker();
+            const worker = await getJavaScriptWorker();
             const client = await worker(extraModel.uri);
             cip = languages.registerCompletionItemProvider('template', {
                 triggerCharacters: ['.'],
@@ -517,8 +544,8 @@ async function loadMonaco() {
 export function focus() {
     editor?.focus();
 }
-let isFocus = false;
-let mounted = false;
+let isFocus = $state(false);
+let mounted = $state(false);
 let loadTimeout = undefined;
 onMount(async () => {
     try {
@@ -539,7 +566,6 @@ onMount(async () => {
         console.error('Error loading monaco:', e);
     }
 });
-$: mounted && extraLib && initialized && loadExtraLib();
 function loadExtraLib() {
     const stdLib = { content: libStdContent, filePath: 'es6.d.ts' };
     const libs = [stdLib];
@@ -549,7 +575,7 @@ function loadExtraLib() {
             filePath: 'windmill.d.ts'
         });
     }
-    languages.typescript.javascriptDefaults.setExtraLibs(libs);
+    javascriptDefaults.setExtraLibs(libs);
 }
 onDestroy(() => {
     try {
@@ -564,16 +590,15 @@ onDestroy(() => {
     }
     catch (err) { }
 });
+$effect(() => {
+    mounted && extraLib && initialized && untrack(() => loadExtraLib());
+});
 </script>
 
 <EditorTheme />
 
 <div
-	class={twMerge(
-		inputBorderClass({ forceFocus: isFocus }),
-		'rounded-md overflow-auto pl-2',
-		$$props.class
-	)}
+	class={twMerge(inputBorderClass({ forceFocus: isFocus }), 'rounded-md overflow-auto pl-2', clazz)}
 >
 	{#if !editor}
 		<FakeMonacoPlaceHolder autoheight showNumbers={false} {code} {fontSize} />

package/package/components/TemplateEditor.svelte.d.ts

@@ -1,4 +1,15 @@
 import '@codingame/monaco-vscode-standalone-typescript-language-features';
+interface Props {
+    code?: string;
+    hash?: string;
+    automaticLayout?: boolean;
+    extraLib?: string;
+    autoHeight?: boolean;
+    fixedOverflowWidgets?: boolean;
+    fontSize?: number;
+    loadAsync?: boolean;
+    class?: string | undefined;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,107 +23,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TemplateEditor: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    conf?: {
-        wordPattern: RegExp;
-        comments: {
-            lineComment: string;
-            blockComment: [string, string];
-        };
-        brackets: [string, string][];
-        onEnterRules: never[];
-        autoClosingPairs: ({
-            open: string;
-            close: string;
-            notIn?: undefined;
-        } | {
-            open: string;
-            close: string;
-            notIn: string[];
-        })[];
-        folding: {
-            markers: {
-                start: RegExp;
-                end: RegExp;
-            };
-        };
-    } | undefined;
-    language?: {
-        defaultToken: string;
-        tokenPostfix: string;
-        keywords: string[];
-        operators: string[];
-        symbols: RegExp;
-        escapes: RegExp;
-        digits: RegExp;
-        octaldigits: RegExp;
-        binarydigits: RegExp;
-        hexdigits: RegExp;
-        regexpctl: RegExp;
-        regexpesc: RegExp;
-        tokenizer: {
-            root: ((string | RegExp)[] | (RegExp | {
-                token: string;
-                next: string;
-            })[])[];
-            common: ((string | RegExp)[] | (RegExp | {
-                cases: {
-                    '@keywords': string;
-                    '@default': string;
-                };
-            })[] | {
-                include: string;
-            } | (RegExp | {
-                token: string;
-                bracket: string;
-                next: string;
-            })[] | (RegExp | {
-                cases: {
-                    '@operators': string;
-                    '@default': string;
-                };
-            })[])[];
-            whitespace: (string | RegExp)[][];
-            comment: (string | RegExp)[][];
-            jsdoc: (string | RegExp)[][];
-            regexp: ((string | RegExp)[] | (RegExp | (string | {
-                token: string;
-                next: string;
-            })[])[] | (RegExp | (string | {
-                token: string;
-                bracket: string;
-                next: string;
-            })[])[])[];
-            regexrange: ((string | RegExp)[] | (RegExp | {
-                token: string;
-                next: string;
-                bracket: string;
-            })[])[];
-            string_double: (string | RegExp)[][];
-            string_single: (string | RegExp)[][];
-            string_backtick: ((string | RegExp)[] | (RegExp | {
-                token: string;
-                next: string;
-            })[])[];
-            bracketCounting: ((string | RegExp)[] | {
-                include: string;
-            })[];
-        };
-    } | undefined;
-    code?: string | undefined;
-    hash?: string | undefined;
-    automaticLayout?: boolean | undefined;
-    extraLib?: string | undefined;
-    autoHeight?: boolean | undefined;
-    fixedOverflowWidgets?: boolean | undefined;
-    fontSize?: number | undefined;
-    loadAsync?: boolean | undefined;
-    insertAtCursor?: ((code: string) => void) | undefined;
-    setCode?: ((ncode: string) => void) | undefined;
-    getCode?: (() => string) | undefined;
-    focus?: (() => void) | undefined;
-}, {
+declare const TemplateEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     focus: CustomEvent<any>;
     change: CustomEvent<any>;
     blur: CustomEvent<any>;
@@ -209,6 +120,6 @@ declare const TemplateEditor: $$__sveltets_2_IsomorphicComponent<{
     setCode: (ncode: string) => void;
     getCode: () => string;
     focus: () => void;
-}, string>;
+}, "code">;
 type TemplateEditor = InstanceType<typeof TemplateEditor>;
 export default TemplateEditor;

package/package/components/UserSettings.svelte

@@ -28,7 +28,7 @@ function handleTokenCreated(token) {
 </script>
 
 <Drawer bind:this={drawer} size="900px" on:close={removeHash}>
-	<DrawerContent title="User Settings" on:close={closeDrawer}>
+	<DrawerContent title="User settings" on:close={closeDrawer}>
 		<div class="flex flex-col gap-6 pb-8">
 			{#if scopes == undefined}
 				<div

package/package/components/WorkerTagPicker.svelte

@@ -8,7 +8,7 @@ let { tag = $bindable(), popupPlacement = 'bottom-end', disabled = false, placeh
 loadWorkerTags();
 async function loadWorkerTags(force = false) {
     if (!$workerTags || force) {
-        $workerTags = await WorkerService.getCustomTags({ workspace: $workspaceStore });
+        $workerTags = await WorkerService.getCustomTagsForWorkspace({ workspace: $workspaceStore });
     }
 }
 </script>

package/package/components/WorkerTagSelect.svelte

@@ -27,7 +27,7 @@ async function loadWorkerGroups(force = false) {
     loading = true;
     try {
         if (!$workerTags || force) {
-            $workerTags = await WorkerService.getCustomTags({ workspace: $workspaceStore });
+            $workerTags = await WorkerService.getCustomTagsForWorkspace({ workspace: $workspaceStore });
         }
     }
     catch (e) {
@@ -50,7 +50,10 @@ async function loadTagsToWorkerExists(tags) {
         clearTimeout(timeout);
     }
     if (open) {
-        tagsToWorkerExists = await WorkerService.existsWorkersWithTags({ tags: tags.join(',') });
+        tagsToWorkerExists = await WorkerService.existsWorkersWithTags({
+            tags: tags.join(','),
+            workspace: $workspaceStore
+        });
         lastCheck = Date.now();
         if (visible) {
             timeout = setTimeout(() => {

package/package/components/WorkspaceTutorials.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import TutorialRouter from './tutorials/TutorialRouter.svelte';
 import WorkspaceOnboardingTutorial from './tutorials/workspace/WorkspaceOnboardingTutorial.svelte';
+import WorkspaceOnboardingOperatorTutorial from './tutorials/workspace/WorkspaceOnboardingOperatorTutorial.svelte';
 let tutorialRouter = $state(undefined);
 export function runTutorialById(id) {
     tutorialRouter?.runTutorialById(id);
@@ -12,6 +13,10 @@ export function runTutorialById(id) {
 		{
 			id: 'workspace-onboarding',
 			component: WorkspaceOnboardingTutorial
+		},
+		{
+			id: 'workspace-onboarding-operator',
+			component: WorkspaceOnboardingOperatorTutorial
 		}
 	]}
 />

package/package/components/apps/components/buttons/AppButton.svelte

@@ -85,14 +85,29 @@ async function handleClick(event) {
         if (iterContext && listInputs) {
             listInputs.set(id, inputOutput);
         }
-        if (preclickAction) {
-            await preclickAction();
+        // Set loading state immediately for immediate visual feedback
+        // This ensures the spinner appears right away, even before the API request completes
+        if (runnableComponent) {
+            loading = true;
         }
-        if (!runnableComponent) {
-            runnableWrapper?.handleSideEffect(true);
+        try {
+            if (preclickAction) {
+                await preclickAction();
+            }
+            if (!runnableComponent) {
+                runnableWrapper?.handleSideEffect(true);
+            }
+            else {
+                await runnableComponent?.runComponent();
+            }
         }
-        else {
-            await runnableComponent?.runComponent();
+        catch (error) {
+            // If an error occurs before the job starts, reset loading state
+            // (If the job started, RunnableComponent will handle resetting loading)
+            if (runnableComponent) {
+                loading = false;
+            }
+            throw error;
         }
     };
     if (resolvedConfig?.confirmationModal?.selected === 'confirmationModal') {

package/package/components/apps/components/buttons/AppForm.svelte

@@ -43,10 +43,11 @@ let noInputs = $derived($stateId != undefined &&
     (componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0));
 </script>
 
-{#each Object.keys(components['formcomponent'].initialData.configuration) as key (key)}
+{#each Object.entries(components['formcomponent'].initialData.configuration) as [key, initialConfig] (key)}
 	<ResolveConfig
 		{id}
 		{key}
+		{initialConfig}
 		bind:resolvedConfig={resolvedConfig[key]}
 		configuration={configuration[key]}
 	/>

package/package/components/apps/components/buttons/AppFormButton.svelte

@@ -56,10 +56,11 @@ let noInputs = $derived(componentInput?.type != 'runnable' || Object.keys(compon
 	/>
 {/each}
 
-{#each Object.keys(components['formbuttoncomponent'].initialData.configuration) as key (key)}
+{#each Object.entries(components['formbuttoncomponent'].initialData.configuration) as [key, initialConfig] (key)}
 	<ResolveConfig
 		{id}
 		{key}
+		{initialConfig}
 		bind:resolvedConfig={resolvedConfig[key]}
 		configuration={configuration[key]}
 	/>

package/package/components/apps/components/display/dbtable/AppDbExplorer.svelte

@@ -174,10 +174,6 @@ let datasource = $state({
                     lastRow = datasource.rowCount;
                 }
                 if (items && Array.isArray(items)) {
-                    // MsSql response have an outer array, we need to flatten it
-                    if (resolvedConfig.type.selected === 'ms_sql_server') {
-                        items = items?.[0];
-                    }
                     let processedData = items.map((item) => {
                         let primaryKeys = getPrimaryKeys(resolvedConfig.columnDefs);
                         let o = {};