windmill-components 1.504.5 → 1.510.1

package/package/components/LightweightResourcePicker.svelte

@@ -1,31 +1,17 @@
 <script lang="ts">import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
-import { createEventDispatcher, getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import DarkModeObserver from './DarkModeObserver.svelte';
 import { Button, Drawer, DrawerContent } from './common';
 import { Plus, Loader2, Link2Off } from 'lucide-svelte';
 import { sendUserToast } from '../toast';
-import { createDispatcherIfMounted } from '../createDispatcherIfMounted';
 import Select from './select/Select.svelte';
-const dispatch = createEventDispatcher();
-const dispatchIfMounted = createDispatcherIfMounted(dispatch);
-export let initialValue = undefined;
-export let value = initialValue;
-export let resourceType = undefined;
-export let disablePortal = false;
-export let expressOAuthSetup = false;
-export let disabled = false;
-let open = false;
-let refreshCount = 0;
+let { value = $bindable(), resourceType = undefined, disablePortal = false, expressOAuthSetup = false, disabled = false } = $props();
+let open = $state(false);
+let refreshCount = $state(0);
 const appViewerContext = getContext('AppViewerContext');
-let valueSelect = initialValue || value
-    ? {
-        value: value ?? initialValue,
-        label: value ?? initialValue
-    }
-    : undefined;
-let collection = valueSelect ? [valueSelect] : [];
-let loading = true;
+let collection = $state(value ? [{ value, label: value }] : []);
+let loading = $state(true);
 async function loadResources(resourceType) {
     loading = true;
     try {
@@ -37,23 +23,23 @@ async function loadResources(resourceType) {
             label: x.path
         }));
         // TODO check if this is needed
-        if (!nc.find((x) => x.value == value) && (initialValue || value)) {
-            nc.push({ value: value ?? initialValue, label: value ?? initialValue });
+        if (!nc.find((x) => x.value == value) && value) {
+            nc.push({ value: value, label: value });
         }
         collection = nc;
         if (expressOAuthSetup && nc.length > 0) {
             value = nc[0].value;
-            valueSelect = nc[0];
         }
     }
     finally {
         loading = false;
     }
 }
-$: $workspaceStore && loadResources(resourceType);
-$: dispatchIfMounted('change', value);
-let darkMode = false;
-let drawer = undefined;
+$effect(() => {
+    $workspaceStore && resourceType && untrack(() => loadResources(resourceType));
+});
+let darkMode = $state(false);
+let drawer = $state(undefined);
 export function askNewResource() {
     refreshCount += 1;
     open = true;
@@ -77,7 +63,6 @@ export function askNewResource() {
 					on:refresh={async (e) => {
 						await loadResources(resourceType)
 						value = e.detail
-						valueSelect = { value, label: value }
 						open = false
 					}}
 				/>
@@ -105,7 +90,6 @@ export function askNewResource() {
 					on:refresh={async (e) => {
 						await loadResources(resourceType)
 						value = e.detail
-						valueSelect = { value, label: value }
 						drawer?.closeDrawer?.()
 						open = false
 					}}
@@ -141,7 +125,6 @@ export function askNewResource() {
 						const item = collection[0]
 						if (item) {
 							value = item.value
-							valueSelect = item
 						}
 					}}>Use existing</Button
 				>
@@ -151,15 +134,13 @@ export function askNewResource() {
 				{disabled}
 				{disablePortal}
 				bind:value={
-					() => valueSelect?.value,
+					() => value,
 					(v) => {
 						value = v
-						valueSelect = collection.find((x) => x.value === v)
 					}
 				}
 				onClear={() => {
 					value = undefined
-					valueSelect = undefined
 				}}
 				clearable
 				items={collection}
@@ -168,7 +149,7 @@ export function askNewResource() {
 			/>
 		{/if}
 		<div class="flex gap-1 items-center">
-			{#if valueSelect && expressOAuthSetup}
+			{#if value && expressOAuthSetup}
 				<Button
 					{disabled}
 					color="light"
@@ -177,15 +158,13 @@ export function askNewResource() {
 					btnClasses="w-8 px-0.5 py-1.5"
 					iconOnly
 					on:click={async () => {
-						if (valueSelect && valueSelect.label) {
-							value = undefined
+						if (value) {
 							await ResourceService.deleteResource({
 								workspace: appViewerContext?.workspace ?? $workspaceStore,
-								path: valueSelect.label
+								path: value
 							})
-							await loadResources(resourceType)
 							value = undefined
-							valueSelect = undefined
+							await loadResources(resourceType)
 						}
 					}}
 					startIcon={{ icon: Link2Off }}

package/package/components/LightweightResourcePicker.svelte.d.ts

@@ -1,28 +1,12 @@
-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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const LightweightResourcePicker: $$__sveltets_2_IsomorphicComponent<{
-    initialValue?: string | undefined;
-    value?: string | undefined;
+interface Props {
+    value: string | undefined;
     resourceType?: string | undefined;
     disablePortal?: boolean;
     expressOAuthSetup?: boolean;
     disabled?: boolean;
-    askNewResource?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+}
+declare const LightweightResourcePicker: import("svelte").Component<Props, {
     askNewResource: () => void;
-}, string>;
-type LightweightResourcePicker = InstanceType<typeof LightweightResourcePicker>;
+}, "value">;
+type LightweightResourcePicker = ReturnType<typeof LightweightResourcePicker>;
 export default LightweightResourcePicker;

package/package/components/LogViewer.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">"use strict";
+<script lang="ts" module>"use strict";
 const s3LogPrefixes = [
     '\n[windmill] Previous logs have been saved to object storage at logs/',
     '\n[windmill] Previous logs have been saved to disk at logs/',
@@ -15,34 +15,17 @@ import AnsiUp from 'ansi_up';
 import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte';
 import { JobService } from '../gen';
 import Tooltip from './Tooltip.svelte';
-export let content;
-export let isLoading;
-export let duration = undefined;
-export let mem = undefined;
-export let wrapperClass = '';
-export let jobId = undefined;
-export let tag;
-export let small = false;
-export let drawerOpen = false;
-export let noMaxH = false;
-export let noAutoScroll = false;
-export let download = true;
-export let customEmptyMessage = 'No logs are available yet';
+let { content, isLoading, duration = undefined, mem = undefined, wrapperClass = '', jobId = undefined, tag, small = false, drawerOpen = $bindable(false), noMaxH = false, noAutoScroll = false, download = true, customEmptyMessage = 'No logs are available yet', tagLabel = undefined } = $props();
 // @ts-ignore
-const ansi_up = new AnsiUp();
+const ansi_up = $state(new AnsiUp());
 ansi_up.use_classes = true;
-let scroll = true;
-let div = null;
+let scroll = $state(true);
+let div = $state(null);
 // let downloadStartUrl: string | undefined = undefined
 let LOG_INC = 10000;
-let LOG_LIMIT = LOG_INC;
-let lastJobId = jobId;
-let loadedFromObjectStore = '';
-$: if (jobId !== lastJobId) {
-    lastJobId = jobId;
-    loadedFromObjectStore = '';
-    LOG_LIMIT = LOG_INC;
-}
+let LOG_LIMIT = $state(LOG_INC);
+let lastJobId = $state(jobId);
+let loadedFromObjectStore = $state('');
 function findPrefixIndex(truncateContent) {
     let index = s3LogPrefixes.findIndex((x) => truncateContent.startsWith(x));
     if (index == -1) {
@@ -73,9 +56,6 @@ function tooltipText(prefixIndex) {
         return 'Attempt to download the logs from disk. Assume there is a shared disk between the workers and the server at /tmp/windmill/logs. Since you are on EE, you can alternatively use an object store such as S3 configured in the instance settings instead of a shared volume..';
     }
 }
-$: truncatedContent = truncateContent(content, loadedFromObjectStore, LOG_LIMIT);
-$: prefixIndex = findPrefixIndex(truncatedContent);
-$: downloadStartUrl = findStartUrl(truncatedContent, prefixIndex);
 function truncateContent(jobContent, loadedFromObjectStore, limit) {
     let content = loadedFromObjectStore + (jobContent ?? '');
     if (content.length > limit) {
@@ -83,14 +63,11 @@ function truncateContent(jobContent, loadedFromObjectStore, limit) {
     }
     return content;
 }
-$: truncatedContent && scrollToBottom();
-$: html = ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != undefined
-    ? truncatedContent.substring(truncatedContent.substring(1).indexOf('\n') + 2, truncatedContent.length)
-    : truncatedContent);
 export function scrollToBottom() {
+    // console.log('scrollToBottom', scroll, div)
     scroll && setTimeout(() => div?.scroll({ top: div?.scrollHeight, behavior: 'smooth' }), 100);
 }
-let logViewer;
+let logViewer = $state();
 async function getStoreLogs() {
     if (downloadStartUrl) {
         scroll = false;
@@ -111,13 +88,28 @@ async function getStoreLogs() {
 function showMoreTruncate(len) {
     scroll = false;
     LOG_LIMIT += LOG_INC;
-    console.log(LOG_INC, len, LOG_LIMIT);
     let newC = truncateContent(content, loadedFromObjectStore, LOG_LIMIT);
     let newlineIndex = newC.indexOf('\n') + 1;
     if (newlineIndex < LOG_INC / 2) {
         LOG_LIMIT -= newlineIndex;
     }
 }
+$effect.pre(() => {
+    if (jobId !== lastJobId) {
+        lastJobId = jobId;
+        loadedFromObjectStore = '';
+        LOG_LIMIT = LOG_INC;
+    }
+});
+let truncatedContent = $derived(truncateContent(content, loadedFromObjectStore, LOG_LIMIT));
+let prefixIndex = $derived(findPrefixIndex(truncatedContent));
+let downloadStartUrl = $derived(findStartUrl(truncatedContent, prefixIndex));
+$effect.pre(() => {
+    truncatedContent && scrollToBottom();
+});
+let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != undefined
+    ? truncatedContent.substring(truncatedContent.substring(1).indexOf('\n') + 2, truncatedContent.length)
+    : truncatedContent));
 </script>
 
 <Drawer bind:this={logViewer} bind:open={drawerOpen} size="900px">
@@ -154,10 +146,10 @@ function showMoreTruncate(len) {
 				>{#if content}{@const len =
 						(content?.length ?? 0) +
 						(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button
-							on:click={getStoreLogs}
+							onclick={getStoreLogs}
 							>Show more... <Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
 						><br />{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)...<br
-						/><button on:click={() => showMoreTruncate(len)}>Show more..</button><br
+						/><button onclick={() => showMoreTruncate(len)}>Show more..</button><br
 						/>{/if}{@html html}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
 			>
 		</div>
@@ -182,7 +174,7 @@ function showMoreTruncate(len) {
 						</a>
 					</div>
 				{/if}
-				<button on:click={logViewer.openDrawer}><Expand size="12" /></button>
+				<button onclick={logViewer.openDrawer}><Expand size="12" /></button>
 				{#if !noAutoScroll}
 					<div
 						class="{small ? '' : 'py-2'} pr-2 {small
@@ -200,8 +192,10 @@ function showMoreTruncate(len) {
 				<Loader2 class="animate-spin" />
 				{#if tag}
 					<div class="flex flex-row items-center gap-1">
-						<div class="text-secondary {small ? '!text-2xs' : '!text-xs'}">tag: {tag}</div>
-						<NoWorkerWithTagWarning {tag} />
+						<div class="text-secondary {small ? '!text-2xs' : '!text-xs'}"
+							>{tagLabel ?? 'tag'}: {tag}</div
+						>
+						<NoWorkerWithTagWarning {tagLabel} {tag} />
 					</div>
 				{/if}
 			</div>
@@ -222,10 +216,10 @@ function showMoreTruncate(len) {
 		<pre class="whitespace-pre break-words {small ? '!text-2xs' : '!text-xs'} w-full p-2"
 			>{#if content}{@const len =
 					(content?.length ?? 0) +
-					(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button on:click={getStoreLogs}
+					(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button onclick={getStoreLogs}
 						>Show more... &nbsp;<Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
 					><br />{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)<br
-					/><button on:click={() => showMoreTruncate(len)}>Show more..</button><br />{/if}<span
+					/><button onclick={() => showMoreTruncate(len)}>Show more..</button><br />{/if}<span
 					>{@html html}</span
 				>{:else if !isLoading}<span>{customEmptyMessage}</span>{/if}</pre
 		>

package/package/components/LogViewer.svelte.d.ts

@@ -1,17 +1,4 @@
-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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const LogViewer: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     content: string | undefined;
     isLoading: boolean;
     duration?: number | undefined;
@@ -25,11 +12,10 @@ declare const LogViewer: $$__sveltets_2_IsomorphicComponent<{
     noAutoScroll?: boolean;
     download?: boolean;
     customEmptyMessage?: string;
-    scrollToBottom?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+    tagLabel?: string;
+}
+declare const LogViewer: import("svelte").Component<Props, {
     scrollToBottom: () => void;
-}, string>;
-type LogViewer = InstanceType<typeof LogViewer>;
+}, "drawerOpen">;
+type LogViewer = ReturnType<typeof LogViewer>;
 export default LogViewer;

package/package/components/ModulePreviewResultViewer.svelte

@@ -5,7 +5,7 @@ import OutputPickerInner from './flows/propPicker/OutputPickerInner.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { getContext } from 'svelte';
 import { getStringError } from './copilot/chat/utils';
-let { lang, editor, diffEditor, loopStatus = undefined, lastJob = undefined, scriptProgress = $bindable(undefined), testJob = undefined, mod, testIsLoading = false, disableMock = false, disableHistory = false, onUpdateMock, loadingJob = false } = $props();
+let { lang, editor, diffEditor, loopStatus = undefined, lastJob = undefined, scriptProgress = $bindable(undefined), testJob = undefined, mod, testIsLoading = false, disableMock = false, disableHistory = false, onUpdateMock, loadingJob = false, tagLabel = undefined } = $props();
 const { testSteps } = getContext('FlowEditorContext');
 let selectedJob = $state(undefined);
 let preview = $state(undefined);
@@ -58,6 +58,7 @@ const logJob = $derived(testJob ?? selectedJob);
 				isLoading={false}
 				tag={undefined}
 				customEmptyMessage="Using pinned data"
+				{tagLabel}
 			/>
 		{:else}
 			<LogViewer
@@ -68,6 +69,7 @@ const logJob = $derived(testJob ?? selectedJob);
 				content={logJob?.logs}
 				isLoading={(testIsLoading && logJob?.['running'] == false) || loadingJob}
 				tag={logJob?.tag}
+				{tagLabel}
 			/>
 		{/if}
 	</Pane>

package/package/components/ModulePreviewResultViewer.svelte.d.ts

@@ -21,6 +21,7 @@ interface Props {
         return_value?: unknown;
     }) => void;
     loadingJob?: boolean;
+    tagLabel?: string;
 }
 declare const ModulePreviewResultViewer: import("svelte").Component<Props, {}, "scriptProgress">;
 type ModulePreviewResultViewer = ReturnType<typeof ModulePreviewResultViewer>;

package/package/components/ModuleTest.svelte

@@ -2,11 +2,11 @@
 import { workspaceStore } from '../stores';
 import { getScriptByPath } from '../scripts';
 import { getContext } from 'svelte';
-import TestJobLoader from './TestJobLoader.svelte';
+import JobLoader, {} from './JobLoader.svelte';
 import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
 let { mod, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined) } = $props();
 const { flowStore, flowStateStore, pathStore, testSteps, previewArgs, modulesTestStates } = getContext('FlowEditorContext');
-let testJobLoader = $state(undefined);
+let jobLoader = $state(undefined);
 let jobProgressReset = () => { };
 let stepHistoryLoader = getStepHistoryLoaderContext();
 export function runTestWithStepArgs() {
@@ -22,31 +22,36 @@ export async function runTest(args) {
         jobProgressReset();
     if (modulesTestStates.states[mod.id]) {
         modulesTestStates.states[mod.id].cancel = async () => {
-            await testJobLoader?.cancelJob();
+            await jobLoader?.cancelJob();
             modulesTestStates.states[mod.id].testJob = undefined;
         };
         modulesTestStates.runTestCb?.(mod.id);
     }
     const val = mod.value;
     // let jobId: string | undefined = undefined
+    let callbacks = {
+        done: (x) => {
+            jobDone(x);
+        }
+    };
     if (val.type == 'rawscript') {
-        await testJobLoader?.runPreview(val.path ?? ($pathStore ?? '') + '/' + mod.id, val.content, val.language, mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args, flowStore?.val?.tag ?? val.tag);
+        await jobLoader?.runPreview(val.path ?? ($pathStore ?? '') + '/' + mod.id, val.content, val.language, mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args, flowStore?.val?.tag ?? val.tag, undefined, undefined, callbacks);
     }
     else if (val.type == 'script') {
         const script = val.hash
             ? await ScriptService.getScriptByHash({ workspace: $workspaceStore, hash: val.hash })
             : await getScriptByPath(val.path);
-        await testJobLoader?.runPreview(val.path, script.content, script.language, mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args, flowStore?.val?.tag ?? (val.tag_override ? val.tag_override : script.tag), script.lock, val.hash ?? script.hash);
+        await jobLoader?.runPreview(val.path, script.content, script.language, mod.id === 'preprocessor' ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...args } : args, flowStore?.val?.tag ?? (val.tag_override ? val.tag_override : script.tag), script.lock, val.hash ?? script.hash, callbacks);
     }
     else if (val.type == 'flow') {
-        await testJobLoader?.runFlowByPath(val.path, args);
+        await jobLoader?.runFlowByPath(val.path, args, callbacks);
     }
     else {
         throw Error('Not supported module type');
     }
 }
-function jobDone() {
-    if (testJob && !testJob.canceled && testJob.type == 'CompletedJob' && `result` in testJob) {
+function jobDone(testJob) {
+    if (testJob && !testJob.canceled && testJob.type == 'CompletedJob') {
         if ($flowStateStore[mod.id]) {
             $flowStateStore[mod.id].previewResult = testJob.result;
             $flowStateStore[mod.id].previewSuccess = testJob.success;
@@ -76,11 +81,11 @@ modulesTestStates.states[mod.id] = {
 };
 </script>
 
-<TestJobLoader
+<JobLoader
+	noCode={true}
 	toastError={noEditor}
-	on:done={() => jobDone()}
 	bind:scriptProgress
-	bind:this={testJobLoader}
+	bind:this={jobLoader}
 	bind:isLoading={
 		() => modulesTestStates.states[mod.id]?.loading ?? false,
 		(v) => {