windmill-components 1.35.1 → 1.35.43

package/components/ScriptEditor.svelte

@@ -1,8 +1,7 @@
 <script>import { CompletedJob, Job, JobService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
-import { classNames, emptySchema } from '../utils';
+import { emptySchema, scriptLangToEditorLang } from '../utils';
 import { faCheck, faExclamationTriangle, faPlay, faRotateRight } from '@fortawesome/free-solid-svg-icons';
-import { onDestroy, onMount } from 'svelte';
 import Icon from 'svelte-awesome';
 import Editor from './Editor.svelte';
 import { inferArgs } from '../infer';
@@ -11,6 +10,9 @@ import LogPanel from './script_editor/LogPanel.svelte';
 import { HSplitPane, VSplitPane } from 'svelte-split-pane';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import EditorBar from './EditorBar.svelte';
+import Button from './common/button/Button.svelte';
+import TestJobLoader from './TestJobLoader.svelte';
+import { onMount } from 'svelte';
 // Exported
 export let schema = emptySchema();
 export let code;
@@ -19,58 +21,26 @@ export let lang;
 let websocketAlive = { pyright: false, black: false, deno: false };
 // Internal state
 let editor;
-// Preview args input
+let testJobLoader;
+// Test args input
 let args = {};
 let isValid = true;
-// Preview
-let previewIsLoading = false;
-let previewIntervalId;
-let previewJob;
+// Test
+let testIsLoading = false;
+let testJob;
 let pastPreviews = [];
 let lastSave;
-let syncIteration = 0;
-let ITERATIONS_BEFORE_SLOW_REFRESH = 100;
 $: lastSave = localStorage.getItem(path ?? 'last_save');
-export function getEditor() {
-    return editor;
-}
-let div = null;
-export async function runPreview() {
-    try {
-        if (previewIntervalId) {
-            clearInterval(previewIntervalId);
-        }
-        if (previewIsLoading && previewJob) {
-            JobService.cancelQueuedJob({
-                workspace: $workspaceStore,
-                id: previewJob.id,
-                requestBody: {}
-            });
-        }
-        previewIsLoading = true;
-        const previewId = await JobService.runScriptPreview({
-            workspace: $workspaceStore,
-            requestBody: {
-                path,
-                content: editor.getCode(),
-                args: args,
-                language: lang
-            }
-        });
-        previewJob = undefined;
-        loadPreviewJob(previewId);
-        syncIteration = 0;
-        previewIntervalId = setInterval(() => {
-            syncer(previewId);
-        }, 500);
-        //TODO fetch preview, every x time, until it's completed
-    }
-    catch (err) {
-        previewIsLoading = false;
-        throw err;
+function onKeyDown(event) {
+    if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
+        event.preventDefault();
+        runTest();
     }
 }
-async function loadPastPreviews() {
+function runTest() {
+    testJobLoader.runPreview(path, code, lang, args);
+}
+async function loadPastTests() {
     pastPreviews = await JobService.listCompletedJobs({
         workspace: $workspaceStore,
         jobKinds: 'preview',
@@ -78,37 +48,6 @@ async function loadPastPreviews() {
         scriptPathExact: path
     });
 }
-async function loadPreviewJob(id) {
-    try {
-        if (previewJob && `running` in previewJob) {
-            let previewJobUpdates = await JobService.getJobUpdates({
-                workspace: $workspaceStore,
-                id,
-                running: previewJob.running,
-                logOffset: previewJob.logs?.length ?? 0
-            });
-            if (previewJobUpdates.new_logs) {
-                previewJob.logs = (previewJob.logs ?? '').concat(previewJobUpdates.new_logs);
-            }
-            if ((previewJobUpdates.running ?? false) || (previewJobUpdates.completed ?? false)) {
-                previewJob = await JobService.getJob({ workspace: $workspaceStore, id });
-            }
-        }
-        else {
-            previewJob = await JobService.getJob({ workspace: $workspaceStore, id });
-        }
-        if (previewJob?.type === 'CompletedJob') {
-            //only CompletedJob has success property
-            clearInterval(previewIntervalId);
-            previewIsLoading = false;
-            loadPastPreviews();
-        }
-        div?.scroll({ top: div?.scrollHeight, behavior: 'smooth' });
-    }
-    catch (err) {
-        console.error(err);
-    }
-}
 async function inferSchema() {
     let isDefault = [];
     Object.entries(args).forEach(([k, v]) => {
@@ -116,7 +55,7 @@ async function inferSchema() {
             isDefault.push(k);
         }
     });
-    await inferArgs(lang, editor.getCode(), schema);
+    await inferArgs(lang, code, schema);
     schema = schema;
     isDefault
         .filter((key) => schema.properties[key] != undefined)
@@ -127,72 +66,38 @@ async function inferSchema() {
         }
     }
 }
-function syncer(id) {
-    if (syncIteration > ITERATIONS_BEFORE_SLOW_REFRESH) {
-        loadPreviewJob(id);
-        if (previewIntervalId) {
-            clearInterval(previewIntervalId);
-            previewIntervalId = setInterval(() => loadPreviewJob(id), 5000);
-        }
-    }
-    else {
-        syncIteration++;
-        loadPreviewJob(id);
-    }
-}
-let syncCode;
 onMount(() => {
     inferSchema();
-    syncCode = setInterval(() => {
-        const newCode = editor?.getCode();
-        if (newCode && code != newCode) {
-            code = editor.getCode();
-        }
-    }, 3000);
-});
-onDestroy(() => {
-    if (editor) {
-        code = editor.getCode();
-    }
-    if (previewIntervalId) {
-        clearInterval(previewIntervalId);
-    }
-    if (syncCode) {
-        clearInterval(syncCode);
-    }
 });
 </script>
 
+<TestJobLoader
+	on:done={loadPastTests}
+	bind:this={testJobLoader}
+	bind:isLoading={testIsLoading}
+	bind:job={testJob}
+/>
+
+<svelte:window on:keydown={onKeyDown} />
+
 <div class="border-b shadow-sm p-1 pr-4">
 	<div class="flex justify-between">
 		<EditorBar {editor} {lang} {websocketAlive} />
 
 		<div class="flex divide-x">
 			<div>
-				<a
+				<Button
 					target="_blank"
 					href="https://github.com/windmill-labs/windmill-gh-action-deploy"
-					class="text-gray-800 mx-1 bg-white rounded-md items-center flex border-gray-300  hover:bg-gray-100 font-medium text-xs p-2"
+					color="light"
+					size="xs"
+					btnClasses="mr-1"
+					startIcon={{
+						icon: faGithub
+					}}
 				>
-					<Icon data={faGithub} class="h-4 w-4 mr-2" />
 					Sync from Github
-				</a>
-			</div>
-
-			<div>
-				<button
-					type="button"
-					on:click|stopPropagation={() => runPreview()}
-					disabled={previewIsLoading}
-					class="text-white ml-1 w-28 bg-blue-500 hover:bg-blue-700 rounded-md flex justify-center items-center  focus:outline-none font-medium text-xs p-2"
-				>
-					<Icon
-						data={previewIsLoading ? faRotateRight : faPlay}
-						class={classNames('h-4 w-4 mr-2', previewIsLoading ? 'animate-spin' : 'animate-none')}
-					/>
-
-					{previewIsLoading ? 'Running' : 'Run preview'}
-				</button>
+				</Button>
 			</div>
 		</div>
 	</div>
@@ -204,29 +109,23 @@ onDestroy(() => {
 				<div
 					class="p-2 h-full"
 					on:mouseleave={() => {
-						code = getEditor().getCode()
 						inferSchema()
 					}}
 				>
 					<Editor
-						{code}
+						bind:code
 						bind:websocketAlive
 						bind:this={editor}
 						cmdEnterAction={() => {
-							runPreview()
+							runTest()
 						}}
 						formatAction={async () => {
-							code = getEditor().getCode()
 							await inferSchema()
 							localStorage.setItem(path ?? 'last_save', code)
 							lastSave = code
 						}}
-						on:blur={() => {
-							code = getEditor().getCode()
-							inferSchema()
-						}}
 						class="flex flex-1 h-full"
-						deno={lang == 'deno'}
+						lang={scriptLangToEditorLang(lang)}
 						automaticLayout={true}
 					/>
 				</div>
@@ -264,13 +163,41 @@ onDestroy(() => {
 						</div>
 					</top>
 					<down slot="down">
-						<div class="pt-1 h-full overflow-auto">
+						<div class="h-full overflow-hidden">
+							<div class="px-2 py-1">
+								{#if testIsLoading}
+									<Button
+										on:click={testJobLoader?.cancelJob}
+										btnClasses="w-full"
+										color="red"
+										size="xs"
+										startIcon={{
+											icon: faRotateRight,
+											classes: 'animate-spin'
+										}}
+									>
+										'Cancel'
+									</Button>
+								{:else}
+									<Button
+										on:click={runTest}
+										btnClasses="w-full"
+										size="xs"
+										startIcon={{
+											icon: faPlay,
+											classes: 'animate-none'
+										}}
+									>
+										{testIsLoading ? 'Running' : 'Test (Ctrl+Enter)'}
+									</Button>
+								{/if}
+							</div>
 							<LogPanel
 								{path}
 								{lang}
-								{previewJob}
+								previewJob={testJob}
 								{pastPreviews}
-								{previewIsLoading}
+								previewIsLoading={testIsLoading}
 								bind:lastSave
 							/>
 						</div>

package/components/ScriptEditor.svelte.d.ts

@@ -1,6 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
-import Editor from './Editor.svelte';
 import type { Preview } from '../gen/models/Preview';
 declare const __propDef: {
     props: {
@@ -8,8 +7,6 @@ declare const __propDef: {
         code: string;
         path: string | undefined;
         lang: Preview.language;
-        getEditor?: (() => Editor) | undefined;
-        runPreview?: (() => Promise<void>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,7 +17,5 @@ export declare type ScriptEditorProps = typeof __propDef.props;
 export declare type ScriptEditorEvents = typeof __propDef.events;
 export declare type ScriptEditorSlots = typeof __propDef.slots;
 export default class ScriptEditor extends SvelteComponentTyped<ScriptEditorProps, ScriptEditorEvents, ScriptEditorSlots> {
-    get getEditor(): () => Editor;
-    get runPreview(): () => Promise<void>;
 }
 export {};

package/components/ScriptPicker.svelte

@@ -1,4 +1,4 @@
-<script>import { ScriptService, FlowService } from '../gen';
+<script>import { ScriptService, FlowService, Script } from '../gen';
 import Icon from 'svelte-awesome';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { hubScripts, workspaceStore } from '../stores';
@@ -14,7 +14,7 @@ export let scriptPath = undefined;
 export let allowFlow = false;
 export let allowHub = false;
 export let itemKind = allowHub ? 'hub' : 'script';
-export let isTrigger = undefined;
+export let kind = Script.kind.SCRIPT;
 let items = [];
 let itemPicker;
 let modalViewer;
@@ -29,7 +29,7 @@ async function loadItems() {
         items = await FlowService.listFlows({ workspace: $workspaceStore });
     }
     else if (itemKind == 'script') {
-        items = await ScriptService.listScripts({ workspace: $workspaceStore, isTrigger });
+        items = await ScriptService.listScripts({ workspace: $workspaceStore, kind });
     }
     else {
         items = $hubScripts ?? [];

package/components/ScriptPicker.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import { Script } from '../gen';
 declare const __propDef: {
     props: {
         scriptPath?: string | undefined;
         allowFlow?: boolean | undefined;
         allowHub?: boolean | undefined;
         itemKind?: "flow" | "script" | "hub" | undefined;
-        isTrigger?: boolean | undefined;
+        kind?: Script.kind | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/components/SharedBadge.svelte

@@ -1,7 +1,6 @@
 <script>import { userStore } from '../stores';
 import { faPeopleGroup } from '@fortawesome/free-solid-svg-icons';
-import Icon from 'svelte-awesome';
-import Badge from './Badge.svelte';
+import Badge from './common/badge/Badge.svelte';
 export let extraPerms = {};
 export let canWrite;
 let kind = undefined;
@@ -47,15 +46,8 @@ $: {
 }
 </script>
 
-{#if kind == 'read' || kind == 'write'}
-	<span class="mr-1 align-center">
-		{#if kind == 'read'}
-			<Badge tooltip={reason}>
-				<Icon data={faPeopleGroup} scale={0.7} />
-				read</Badge
-			>
-		{:else if kind == 'write'}
-			<Badge tooltip={reason}><Icon data={faPeopleGroup} scale={0.7} /></Badge>
-		{/if}
-	</span>
+{#if kind === 'read' || kind === 'write'}
+	<Badge icon={{ data: faPeopleGroup }} capitalize color="blue">
+		{kind}
+	</Badge>
 {/if}

package/components/SimpleEditor.svelte

@@ -0,0 +1,147 @@
+<script context="module">import * as monaco from 'monaco-editor';
+monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.Latest,
+    allowNonTsExtensions: true,
+    noLib: true
+});
+monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+    validate: true,
+    allowComments: false,
+    schemas: [],
+    enableSchemaRequest: true
+});
+</script>
+
+<script>import { browser, dev } from '$app/env';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import { buildWorkerDefinition } from 'monaco-editor-workers';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
+let divEl = null;
+let editor;
+export let lang;
+export let code = '';
+export let hash = createHash();
+export let cmdEnterAction = undefined;
+export let formatAction = undefined;
+export let automaticLayout = true;
+export let extraLib = '';
+export let extraLibPath = '';
+export let shouldBindKey = true;
+const dispatch = createEventDispatcher();
+const uri = `file:///${hash}.${langToExt(lang)}`;
+if (browser) {
+    if (dev) {
+        buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);
+    }
+    else {
+        // @ts-ignore
+        self.MonacoEnvironment = {
+            getWorker: function (_moduleId, label) {
+                if (label === 'json') {
+                    return new jsonWorker();
+                }
+                else if (label === 'typescript' || label === 'javascript') {
+                    return new tsWorker();
+                }
+                else {
+                    return new editorWorker();
+                }
+            }
+        };
+    }
+}
+export function getCode() {
+    return editor?.getValue() ?? '';
+}
+export function insertAtCursor(code) {
+    if (editor) {
+        editor.trigger('keyboard', 'type', { text: code });
+    }
+}
+export function setCode(ncode) {
+    code = ncode;
+    if (editor) {
+        editor.setValue(ncode);
+    }
+}
+function format() {
+    if (editor) {
+        code = getCode();
+        editor.getAction('editor.action.formatDocument').run();
+        if (formatAction) {
+            formatAction();
+        }
+    }
+}
+async function loadMonaco() {
+    const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
+    model.updateOptions(updateOptions);
+    editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout));
+    if (shouldBindKey) {
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+            format();
+        });
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
+            if (cmdEnterAction) {
+                cmdEnterAction();
+            }
+        });
+    }
+    let timeoutModel = undefined;
+    editor.onDidChangeModelContent((event) => {
+        timeoutModel && clearTimeout(timeoutModel);
+        timeoutModel = setTimeout(() => {
+            code = getCode();
+        }, 500);
+        dispatch('change');
+    });
+    editor.onDidFocusEditorText(() => {
+        dispatch('focus');
+    });
+    editor.onDidBlurEditorText(() => {
+        dispatch('blur');
+    });
+    if (lang == 'javascript' && extraLib != '' && extraLibPath != '') {
+        monaco.languages.typescript.javascriptDefaults.setExtraLibs([
+            {
+                content: extraLib,
+                filePath: extraLibPath
+            }
+        ]);
+    }
+}
+onMount(() => {
+    if (browser) {
+        loadMonaco();
+    }
+});
+onDestroy(() => {
+    try {
+        editor && editor.dispose();
+    }
+    catch (err) { }
+});
+</script>
+
+<div bind:this={divEl} class={$$props.class} />
+
+<style>
+	.editor {
+		padding-left: 0px;
+		padding-right: 0px;
+		/* stylelint-disable-next-line unit-allowed-list */
+		height: 80vh;
+}
+
+	.small-editor {
+		/* stylelint-disable-next-line unit-allowed-list */
+		height: 26vh;
+	}
+
+	.few-lines-editor {
+		/* stylelint-disable-next-line unit-allowed-list */
+		height: 80px;
+	}</style>

package/components/SimpleEditor.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        lang: string;
+        code?: string | undefined;
+        hash?: string | undefined;
+        cmdEnterAction?: (() => void) | undefined;
+        formatAction?: (() => void) | undefined;
+        automaticLayout?: boolean | undefined;
+        extraLib?: string | undefined;
+        extraLibPath?: string | undefined;
+        shouldBindKey?: boolean | undefined;
+        getCode?: (() => string) | undefined;
+        insertAtCursor?: ((code: string) => void) | undefined;
+        setCode?: ((ncode: string) => void) | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SimpleEditorProps = typeof __propDef.props;
+export declare type SimpleEditorEvents = typeof __propDef.events;
+export declare type SimpleEditorSlots = typeof __propDef.slots;
+export default class SimpleEditor extends SvelteComponentTyped<SimpleEditorProps, SimpleEditorEvents, SimpleEditorSlots> {
+    get getCode(): () => string;
+    get insertAtCursor(): (code: string) => void;
+    get setCode(): (ncode: string) => void;
+}
+export {};

package/components/TestJobLoader.svelte

@@ -0,0 +1,98 @@
+<script>import { Job, JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import { onDestroy } from 'svelte';
+import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+export let isLoading = false;
+export let job = undefined;
+let intervalId;
+let syncIteration = 0;
+let ITERATIONS_BEFORE_SLOW_REFRESH = 100;
+export async function runPreview(path, code, lang, args) {
+    try {
+        if (intervalId) {
+            clearInterval(intervalId);
+        }
+        if (isLoading && job) {
+            JobService.cancelQueuedJob({
+                workspace: $workspaceStore,
+                id: job.id,
+                requestBody: {}
+            });
+        }
+        isLoading = true;
+        const testId = await JobService.runScriptPreview({
+            workspace: $workspaceStore,
+            requestBody: {
+                path,
+                content: code,
+                args,
+                language: lang
+            }
+        });
+        await watchJob(testId);
+    }
+    catch (err) {
+        isLoading = false;
+        throw err;
+    }
+}
+export async function cancelJob() {
+    await JobService.cancelQueuedJob({
+        workspace: $workspaceStore ?? '',
+        id: job?.id ?? '',
+        requestBody: {}
+    });
+    console.log('cancelled');
+}
+export async function watchJob(testId) {
+    console.log('watch jobs');
+    job = undefined;
+    await loadTestJob(testId);
+    syncIteration = 0;
+    intervalId = setInterval(() => {
+        syncer(testId);
+    }, 500);
+}
+async function loadTestJob(id) {
+    try {
+        if (job && `running` in job) {
+            let previewJobUpdates = await JobService.getJobUpdates({
+                workspace: $workspaceStore,
+                id,
+                running: job.running,
+                logOffset: job.logs?.length ?? 0
+            });
+            if (previewJobUpdates.new_logs) {
+                job.logs = (job.logs ?? '').concat(previewJobUpdates.new_logs);
+            }
+            if ((previewJobUpdates.running ?? false) || (previewJobUpdates.completed ?? false)) {
+                job = await JobService.getJob({ workspace: $workspaceStore, id });
+            }
+        }
+        else {
+            job = await JobService.getJob({ workspace: $workspaceStore, id });
+        }
+        if (job?.type === 'CompletedJob' && isLoading) {
+            //only CompletedJob has success property
+            dispatch('done', job);
+            clearInterval(intervalId);
+            isLoading = false;
+        }
+    }
+    catch (err) {
+        console.error(err);
+    }
+}
+function syncer(id) {
+    if (syncIteration == ITERATIONS_BEFORE_SLOW_REFRESH) {
+        intervalId && clearInterval(intervalId);
+        intervalId = setInterval(() => syncer(id), 2000);
+    }
+    syncIteration++;
+    loadTestJob(id);
+}
+onDestroy(() => {
+    intervalId && clearInterval(intervalId);
+});
+</script>