windmill-components 1.35.1 → 1.35.43

package/components/LogViewer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        content: string | undefined;
+        isLoading: boolean;
+        scrollToBottom?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type LogViewerProps = typeof __propDef.props;
+export declare type LogViewerEvents = typeof __propDef.events;
+export declare type LogViewerSlots = typeof __propDef.slots;
+export default class LogViewer extends SvelteComponentTyped<LogViewerProps, LogViewerEvents, LogViewerSlots> {
+    get scrollToBottom(): () => void;
+}
+export {};

package/components/ModulePreview.svelte

@@ -0,0 +1,108 @@
+<script>import { getScriptByPath, sendUserToast, truncateRev } from '../utils';
+import { HSplitPane, VSplitPane } from 'svelte-split-pane';
+import RunForm from './RunForm.svelte';
+import TestJobLoader from './TestJobLoader.svelte';
+import LogViewer from './LogViewer.svelte';
+import DisplayResult from './DisplayResult.svelte';
+import Button from './common/button/Button.svelte';
+import { faRotateRight } from '@fortawesome/free-solid-svg-icons';
+import { flowStateStore } from './flows/flowState';
+let testJobLoader;
+// Test
+let testIsLoading = false;
+let testJob;
+export let mod;
+export let schema;
+export let indices;
+let stepArgs = {};
+export function runTestWithStepArgs() {
+    runTest(stepArgs);
+}
+export async function runTest(args) {
+    const val = mod.value;
+    if (val.type == 'rawscript') {
+        await testJobLoader?.runPreview(val.path, val.content, val.language, args);
+    }
+    else if (val.type == 'script') {
+        const script = await getScriptByPath(val.path);
+        await testJobLoader?.runPreview(val.path, script.content, script.language, args);
+    }
+    else {
+        throw Error('not testable module type');
+    }
+    sendUserToast(`started test ${truncateRev(testJob?.id ?? '', 10)}`);
+}
+function jobDone() {
+    if (testJob && !testJob.canceled && testJob.type == 'CompletedJob' && `result` in testJob) {
+        const result = testJob.result;
+        const pMod = $flowStateStore.modules[indices[0]];
+        if (pMod) {
+            if (indices[1] != undefined && pMod.childFlowModules) {
+                const cMod = pMod.childFlowModules[indices[1]];
+                if (cMod) {
+                    cMod.previewResult = result;
+                }
+            }
+            else {
+                pMod.previewResult = result;
+            }
+            $flowStateStore.modules[indices[0]] = pMod;
+        }
+    }
+}
+</script>
+
+<TestJobLoader
+	on:done={jobDone}
+	bind:this={testJobLoader}
+	bind:isLoading={testIsLoading}
+	bind:job={testJob}
+/>
+<HSplitPane leftPaneSize="50%" rightPaneSize="50%" minLeftPaneSize="20%" minRightPaneSize="20%">
+	<left slot="left" class="relative">
+		<div class="overflow-auto h-full p-4">
+			<RunForm
+				runnable={{ summary: mod.summary ?? '', schema, description: '' }}
+				runAction={(_, args) => runTest(args)}
+				schedulable={false}
+				buttonText="Test just this step (Ctrl+Enter)"
+				detailed={false}
+				bind:args={stepArgs}
+			/>
+			{#if testIsLoading}
+				<Button
+					on:click={testJobLoader?.cancelJob}
+					btnClasses="w-full"
+					color="red"
+					size="sm"
+					startIcon={{
+						icon: faRotateRight,
+						classes: 'animate-spin'
+					}}
+				>
+					Cancel
+				</Button>
+			{/if}
+		</div>
+	</left>
+	<right slot="right">
+		<div class="overflow-auto h-full">
+			<VSplitPane topPanelSize="50%" downPanelSize="50%">
+				<top slot="top">
+					<LogViewer content={testJob?.logs} isLoading={testIsLoading} />
+				</top>
+				<down slot="down">
+					<pre class="overflow-x-auto break-all relative h-full p-2 text-sm">
+						{#if testJob && 'result' in testJob && testJob.result}
+							<DisplayResult result={testJob.result} />
+						{:else if testIsLoading}
+							Waiting for Result...
+						{:else}
+							Test to see result here
+						{/if}
+        	</pre>
+				</down>
+			</VSplitPane>
+		</div>
+	</right>
+</HSplitPane>

package/components/ModulePreview.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+import type { FlowModule } from '../gen';
+declare const __propDef: {
+    props: {
+        mod: FlowModule;
+        schema: Schema;
+        indices: [number, number | undefined];
+        runTestWithStepArgs?: (() => void) | undefined;
+        runTest?: ((args: any) => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ModulePreviewProps = typeof __propDef.props;
+export declare type ModulePreviewEvents = typeof __propDef.events;
+export declare type ModulePreviewSlots = typeof __propDef.slots;
+export default class ModulePreview extends SvelteComponentTyped<ModulePreviewProps, ModulePreviewEvents, ModulePreviewSlots> {
+    get runTestWithStepArgs(): () => void;
+    get runTest(): (args: any) => Promise<void>;
+}
+export {};

package/components/RunForm.svelte

@@ -61,9 +61,7 @@ let scheduledForStr;
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
 			<div class="text-sm p-4">No arguments</div>
 		{:else}
-			<div class="bg-gray-50 border  shadow-blue-100 shadow-inner rounded border-gray-300 p-6">
-				<SchemaForm schema={runnable.schema} bind:isValid bind:args />
-			</div>
+			<SchemaForm schema={runnable.schema} bind:isValid bind:args />
 		{/if}
 	{:else}
 		<div class="text-sm">No schema</div>
@@ -96,30 +94,43 @@ let scheduledForStr;
 			</div>
 		</div>
 	{/if}
-	<div class="flex justify-between mt-2 md:mt-6 mb-6">
-		<button
-			type="submit"
-			class="mr-6 text-sm underline text-gray-700 inline-flex  items-center"
-			on:click={() => {
-				viewOptions = !viewOptions
-			}}
-		>
-			{#if schedulable}
+	{#if schedulable}
+		<div class="flex justify-between mt-2 md:mt-6 mb-6">
+			<button
+				type="submit"
+				class="mr-6 text-sm underline text-gray-700 inline-flex  items-center"
+				on:click={() => {
+					viewOptions = !viewOptions
+				}}
+			>
 				<div>
 					Schedule to run later
 					<Icon data={viewOptions ? faChevronUp : faChevronDown} scale={0.5} />
 				</div>
-			{/if}
-		</button>
+			</button>
+			<button
+				type="submit"
+				disabled={!isValid}
+				class="{isValid ? 'default-button' : 'default-button-disabled'} w-min px-6"
+				on:click={() => {
+					runAction(scheduledForStr, args)
+				}}
+			>
+				{scheduledForStr ? 'Schedule run to a later time' : buttonText}
+			</button>
+		</div>
+	{:else}
 		<button
 			type="submit"
 			disabled={!isValid}
-			class="{isValid ? 'default-button' : 'default-button-disabled'} w-min px-6"
+			class="{isValid
+				? 'default-button'
+				: 'default-button-disabled'} w-full rounded rounded-md px-6 mb-4"
 			on:click={() => {
-				runAction(scheduledForStr, args)
+				runAction(undefined, args)
 			}}
 		>
-			{scheduledForStr ? 'Schedule run to a later time' : buttonText}
+			{buttonText}
 		</button>
-	</div>
+	{/if}
 </div>

package/components/RunForm.svelte.d.ts

@@ -1,8 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Flow, Script } from '../gen';
+import type { Schema } from '../common';
 declare const __propDef: {
     props: {
-        runnable: Script | Flow | undefined;
+        runnable: {
+            summary?: string;
+            schema?: Schema;
+            description?: string;
+        } | undefined;
         runAction: (scheduledForStr: string | undefined, args: Record<string, any>) => void;
         buttonText?: string | undefined;
         schedulable?: boolean | undefined;

package/components/SchemaEditor.svelte

@@ -3,9 +3,9 @@ import { faPen, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Button } from 'flowbite-svelte';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import Editor from './Editor.svelte';
 import SchemaEditorProperty from './SchemaEditorProperty.svelte';
 import SchemaModal, { DEFAULT_PROPERTY, schemaToModal } from './SchemaModal.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 import TableCustom from './TableCustom.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
@@ -59,7 +59,9 @@ function handleAddOrEditArgument() {
     else {
         schema.properties[modalProperty.name] = modalToSchema(modalProperty);
         if (modalProperty.required) {
-            schema.required = [...schema.required, modalProperty.name];
+            if (!schema.required.includes(modalProperty.name)) {
+                schema.required.push(modalProperty.name);
+            }
         }
         else if (schema.required.includes(modalProperty.name)) {
             const index = schema.required.indexOf(modalProperty.name, 0);
@@ -208,7 +210,7 @@ function switchTab() {
 			</div>
 		{:else}
 			<div class="border rounded mt-4 p-2">
-				<Editor
+				<SimpleEditor
 					on:change={() => {
 						try {
 							schema = JSON.parse(schemaString)

package/components/SchemaForm.svelte

@@ -6,7 +6,6 @@ export let schema;
 export let args = {};
 export let editableSchema = false;
 export let isValid = true;
-export let pickableProperties = undefined;
 export let extraLib = 'missing extraLib';
 export let importPath = undefined;
 let inputCheck = {};
@@ -34,7 +33,6 @@ $: schema?.properties && removeExtraKey();
 					bind:schema
 					bind:argName
 					bind:inputCheck
-					bind:pickableProperties
 					bind:extraLib
 					bind:importPath
 				/>

package/components/SchemaForm.svelte.d.ts

@@ -7,7 +7,6 @@ declare const __propDef: {
         args?: Record<string, any> | undefined;
         editableSchema?: boolean | undefined;
         isValid?: boolean | undefined;
-        pickableProperties?: Object | undefined;
         extraLib?: string | undefined;
         importPath?: string | undefined;
     };

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,24 @@ 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';
 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 {
+        if (!script.schema) {
+            await inferArgs(script.language, script.content, script.schema);
+        }
         const newHash = await ScriptService.createScript({
             workspace: $workspaceStore,
             requestBody: {
@@ -46,7 +42,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,31 +52,12 @@ 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>
 
 <div class="flex flex-col h-screen">
@@ -142,7 +119,6 @@ onDestroy(() => {
 					<button
 						class="default-button-secondary px-6 max-h-8 mr-2"
 						on:click={async () => {
-							await inferSchema()
 							editScript()
 						}}
 					>
@@ -178,30 +154,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 +267,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 +288,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 {};