windmill-components 1.35.42 → 1.36.0

package/components/ScriptBuilder.svelte

@@ -1,12 +1,11 @@
-<script>import { ScriptService } from '../gen';
+<script>import { Script, ScriptService } from '../gen';
 import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { inferArgs } from '../infer';
-import { DENO_INIT_CODE, DENO_INIT_CODE_TRIGGER, initialCode, POSTGRES_INIT_CODE } from '../script_helpers';
+import { initialCode, isInitialCode } from '../script_helpers';
 import { workspaceStore } from '../stores';
-import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
+import { encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
 import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
-import { onDestroy } from 'svelte';
 import SvelteMarkdown from 'svelte-markdown';
 import Path from './Path.svelte';
 import RadioButton from './RadioButton.svelte';
@@ -14,27 +13,28 @@ import Required from './Required.svelte';
 import ScriptEditor from './ScriptEditor.svelte';
 import ScriptSchema from './ScriptSchema.svelte';
 import CenteredPage from './CenteredPage.svelte';
-let editor;
-let scriptSchema;
+import Tooltip from './Tooltip.svelte';
+import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
+import { dirtyStore } from './common/confirmationModal/dirtyStore';
+import { Button } from './common';
 export let script;
 export let initialPath = '';
-export let template = undefined;
+export let template = 'script';
 let pathError = '';
 $: setQueryWithoutLoad($page.url, 'state', encodeState(script));
 $: step = Number($page.url.searchParams.get('step')) || 1;
-$: {
-    if (script.language == 'python3') {
-        script.is_trigger = false;
-    }
-}
 if (script.content == '') {
-    initContent(script.language, template);
+    initContent(script.language, script.kind, template);
 }
-function initContent(language, template) {
-    script.content = initialCode(language, template == 'pgsql' ? 'pgsql' : script.is_trigger ? 'trigger' : undefined);
+function initContent(language, kind, template) {
+    script.content = initialCode(language, kind, template);
 }
 async function editScript() {
     try {
+        $dirtyStore = false;
+        if (!script.schema) {
+            await inferArgs(script.language, script.content, script.schema);
+        }
         const newHash = await ScriptService.createScript({
             workspace: $workspaceStore,
             requestBody: {
@@ -46,7 +46,7 @@ async function editScript() {
                 schema: script.schema,
                 is_template: script.is_template,
                 language: script.language,
-                is_trigger: script.is_trigger
+                kind: script.kind
             }
         });
         sendUserToast(`Success! New script version created with hash ${newHash}`);
@@ -56,33 +56,15 @@ async function editScript() {
         sendUserToast(`Impossible to save the script: ${error.body}`, true);
     }
 }
-export function setCode(script) {
-    editor?.getEditor().setCode(script.content);
-    if (scriptSchema) {
-        if (script.schema) {
-            scriptSchema.setSchema(script.schema);
-        }
-        else {
-            scriptSchema.setSchema(emptySchema());
-        }
-    }
-}
-async function inferSchema() {
-    await inferArgs(script.language, script.content, script.schema);
-}
 async function changeStep(step) {
-    if (step == 3) {
-        script.content = editor?.getEditor().getCode() ?? script.content;
-        await inferSchema();
-        script.schema = script.schema;
+    if (step > 1) {
+        await inferArgs(script.language, script.content, script.schema);
     }
     goto(`?step=${step}`);
 }
-onDestroy(() => {
-    editor?.$destroy();
-});
 </script>
 
+<UnsavedConfirmationModal />
 <div class="flex flex-col h-screen">
 	<!-- Nav between steps-->
 	<div class="flex flex-col w-full px-4 py-2 border-b shadow-sm">
@@ -116,38 +98,37 @@ onDestroy(() => {
 			</div>
 			<div class="flex flex-row-reverse ml-2">
 				{#if step != 3}
-					<button
-						disabled={step == 1 && pathError != ''}
-						class="default-button px-6 max-h-8"
-						on:click={() => {
-							changeStep(step + 1)
-						}}
+					<Button
+						size="sm"
+						disabled={step === 1 && pathError !== ''}
+						on:click={() => changeStep(step + 1)}
 					>
 						Next
-					</button>
+					</Button>
 				{:else}
-					<button class="default-button px-6 self-end" on:click={editScript}>Save</button>
+					<Button size="sm" on:click={editScript}>Save</Button>
 				{/if}
 				{#if step > 1}
-					<button
-						class="default-button-secondary px-6 max-h-8 mr-2"
-						on:click={async () => {
-							changeStep(step - 1)
-						}}
+					<Button
+						variant="border"
+						size="sm"
+						btnClasses="mr-2"
+						on:click={() => changeStep(step - 1)}
 					>
 						Back
-					</button>
+					</Button>
 				{/if}
 				{#if step == 2}
-					<button
-						class="default-button-secondary px-6 max-h-8 mr-2"
+					<Button
+						variant="border"
+						size="sm"
+						btnClasses="mr-2"
 						on:click={async () => {
-							await inferSchema()
 							editScript()
 						}}
 					>
 						Save (commit)
-					</button>
+					</Button>
 				{/if}
 			</div>
 		</div>
@@ -178,30 +159,80 @@ onDestroy(() => {
 						label="Language"
 						options={[
 							['Typescript (Deno)', 'deno'],
-							['Python 3.10', 'python3']
+							['Python 3.10', 'python3'],
+							['Go', 'go']
 						]}
-						on:change={(e) => initContent(e.detail, template)}
+						on:change={(e) => initContent(e.detail, script.kind, template)}
 						bind:value={script.language}
 					/>
 				</div>
+				<h4 class="text-gray-700  border-b">
+					Script Kind <Tooltip
+						>In most cases, you will want the General Script. <br />
+						Trigger are meant to be used as the first module of flows to trigger them based on watching
+						new events externally. <br />
+						Failure scripts are used to handle unrecoverable errors of flows and for handling errors
+						at the workspace level. <br />
+						Command scripts are used when the workspace is associated with a slack workspace to be triggered
+						on command.</Tooltip
+					>
+				</h4>
+
 				{#if script.language == 'deno'}
-					<h4 class="text-gray-700  border-b">Template</h4>
+					<div class="max-w-lg">
+						<RadioButton
+							label="Script Type"
+							options={[
+								['General Script', Script.kind.SCRIPT],
+								['Trigger Script', Script.kind.TRIGGER]
+								// ['Failure Handler', Script.kind.FAILURE],
+								// ['Command Handler', Script.kind.COMMAND]
+							]}
+							on:change={(e) => {
+								if (isInitialCode(script.content)) {
+									template = 'script'
+									initContent(script.language, e.detail, template)
+								}
+							}}
+							bind:value={script.kind}
+						/>
+					</div>
+				{:else}
+					<div class="max-w-lg">
+						<RadioButton
+							label="Script Type"
+							options={[['General Script', Script.kind.SCRIPT]]}
+							on:change={(e) => {
+								if (isInitialCode(script.content)) {
+									template = 'script'
+									initContent(script.language, e.detail, template)
+								}
+							}}
+							bind:value={script.kind}
+						/>
+					</div>
+				{/if}
+
+				{#if script.language == 'deno' && script.kind == Script.kind.SCRIPT}
+					<h4 class="text-gray-700  border-b">
+						Script Template <Tooltip
+							>A template is a pre-filled script corresponding to a more specialized use-case</Tooltip
+						>
+					</h4>
 
 					<div class="max-w-md">
 						<RadioButton
 							label="Template"
 							options={[
-								['None', undefined],
-								['PostgreSQL', 'pgsql']
+								['Standard', 'script'],
+								['PostgreSQL Prepared Statement', 'pgsql']
 							]}
-							on:change={(e) => initContent(script.language, e.detail)}
+							on:change={(e) => initContent(script.language, script.kind, e.detail)}
 							bind:value={template}
 						/>
 					</div>
 				{/if}
 
-				<h3 class="text-gray-700 pb-1 border-b">Metadata</h3>
-
 				<label class="block ">
 					<span class="text-gray-700">Summary <Required required={false} /></span>
 					<textarea
@@ -241,28 +272,14 @@ onDestroy(() => {
 				</label>
 
 				<label class="block">
-					<span class="text-gray-700 mr-2">Save as template</span>
+					<span class="text-gray-700 mr-2"
+						>Save as workspace template <Tooltip
+							>Enable your teammates to use this script as a template to write new scripts.</Tooltip
+						>
+					</span>
 					<input type="checkbox" bind:checked={script.is_template} />
 				</label>
 
-				<label class="block">
-					<span class="text-gray-700 mr-2">Save as trigger script</span>
-					<input
-						disabled={script.language == 'python3'}
-						type="checkbox"
-						bind:checked={script.is_trigger}
-						on:change={() => {
-							if (
-								script.content == DENO_INIT_CODE ||
-								script.content == DENO_INIT_CODE_TRIGGER ||
-								script.content == POSTGRES_INIT_CODE
-							) {
-								initContent(script.language, template)
-							}
-						}}
-					/>
-				</label>
-
 				<div>
 					<h3 class="text-gray-700 ">Description rendered</h3>
 					<div
@@ -276,7 +293,6 @@ onDestroy(() => {
 		</CenteredPage>
 	{:else if step === 2}
 		<ScriptEditor
-			bind:this={editor}
 			bind:schema={script.schema}
 			path={script.path}
 			bind:code={script.content}

package/components/ScriptBuilder.svelte.d.ts

@@ -1,11 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import { type Script } from '../gen';
+import { Script } from '../gen';
 declare const __propDef: {
     props: {
         script: Script;
         initialPath?: string | undefined;
-        template?: 'pgsql' | undefined;
-        setCode?: ((script: Script) => void) | undefined;
+        template?: "script" | "pgsql" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -16,6 +15,5 @@ export declare type ScriptBuilderProps = typeof __propDef.props;
 export declare type ScriptBuilderEvents = typeof __propDef.events;
 export declare type ScriptBuilderSlots = typeof __propDef.slots;
 export default class ScriptBuilder extends SvelteComponentTyped<ScriptBuilderProps, ScriptBuilderEvents, ScriptBuilderSlots> {
-    get setCode(): (script: Script) => void;
 }
 export {};

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,10 @@ 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';
+import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 // Exported
 export let schema = emptySchema();
 export let code;
@@ -19,58 +22,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 +49,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 +56,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 +67,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 +110,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>
@@ -234,7 +134,7 @@ onDestroy(() => {
 		</left>
 		<right slot="right">
 			<div class="h-full">
-				<VSplitPane topPanelSize="50%" downPanelSize="50%">
+				<VSplitPane topPanelSize="30%" downPanelSize="70%">
 					<top slot="top">
 						<div class="h-full overflow-auto">
 							<div class="p-4">
@@ -264,13 +164,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 {};