windmill-components 1.37.0 → 1.46.2

package/components/Dropdown.svelte.d.ts

@@ -6,13 +6,16 @@ declare const __propDef: {
         dropdownItems: DropdownItem[];
         name?: string | undefined;
         relative?: boolean | undefined;
+        left?: boolean | undefined;
     };
     events: {
         click: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type DropdownProps = typeof __propDef.props;
 export declare type DropdownEvents = typeof __propDef.events;

package/components/Editor.svelte

@@ -20,7 +20,7 @@ import { buildWorkerDefinition } from 'monaco-editor-workers';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import getMessageServiceOverride from 'vscode/service-override/messages';
 import { StandaloneServices } from 'vscode/services';
-import { DENO_INIT_CODE_CLEAR, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
+import { BASH_INIT_CODE, DENO_INIT_CODE_CLEAR, GO_INIT_CODE, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
 import { createHash as randomHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
 try {
@@ -81,6 +81,13 @@ export function insertAtBeginning(code) {
         editor.executeEdits('external', [op]);
     }
 }
+export function insertAtLine(code, line) {
+    if (editor) {
+        const range = { startLineNumber: line, startColumn: 1, endLineNumber: line, endColumn: 1 };
+        const op = { range: range, text: code, forceMoveMarkers: true };
+        editor.executeEdits('external', [op]);
+    }
+}
 export function setCode(ncode) {
     code = ncode;
     if (editor) {
@@ -104,8 +111,11 @@ export async function clearContent() {
         else if (lang == 'python') {
             setCode(PYTHON_INIT_CODE_CLEAR);
         }
-        else {
-            setCode('');
+        else if (lang == 'go') {
+            setCode(GO_INIT_CODE);
+        }
+        else if (lang == 'shell') {
+            setCode(BASH_INIT_CODE);
         }
     }
 }
@@ -166,6 +176,19 @@ export async function reloadWebsocket() {
                 const writer = new WebSocketMessageWriter(socket);
                 const languageClient = createLanguageClient({ reader, writer }, name, options);
                 websockets.push([languageClient, webSocket]);
+                // HACK ALERT: for some reasons, the client need to be restarted to take into account the 'go get <dep>' command
+                // the only way I could figure out to listen for this event is this. I'm sure there is a better way to do this
+                if (name == 'go') {
+                    const om = webSocket.onmessage;
+                    webSocket.onmessage = (e) => {
+                        om && om.apply(webSocket, [e]);
+                        const js = JSON.parse(e.data);
+                        if (js.method == 'window/showMessage' && js.params.message == 'completed') {
+                            console.log('reloading websocket after go get');
+                            reloadWebsocket();
+                        }
+                    };
+                }
                 reader.onClose(async () => {
                     try {
                         console.log('CLOSE');
@@ -355,6 +378,7 @@ async function loadMonaco() {
     return () => {
         try {
             closeWebsockets();
+            model.dispose();
             editor && editor.dispose();
         }
         catch (err) {

package/components/Editor.svelte.d.ts

@@ -3,7 +3,7 @@ import * as monaco from 'monaco-editor';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        lang: 'typescript' | 'python' | 'go';
+        lang: 'typescript' | 'python' | 'go' | 'shell';
         code?: string | undefined;
         hash?: string | undefined;
         cmdEnterAction?: (() => void) | undefined;
@@ -19,6 +19,7 @@ declare const __propDef: {
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         insertAtBeginning?: ((code: string) => void) | undefined;
+        insertAtLine?: ((code: string, line: number) => void) | undefined;
         setCode?: ((ncode: string) => void) | undefined;
         clearContent?: (() => Promise<void>) | undefined;
         reloadWebsocket?: (() => Promise<void>) | undefined;
@@ -40,6 +41,7 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get getCode(): () => string;
     get insertAtCursor(): (code: string) => void;
     get insertAtBeginning(): (code: string) => void;
+    get insertAtLine(): (code: string, line: number) => void;
     get setCode(): (ncode: string) => void;
     get clearContent(): () => Promise<void>;
     get reloadWebsocket(): () => Promise<void>;

package/components/EditorBar.svelte

@@ -1,17 +1,22 @@
+<script context="module">export const EDITOR_BAR_WIDTH_THRESHOLD = 1044;
+</script>
+
 <script>import { ResourceService, ScriptService, VariableService } from '../gen';
 import { getScriptByPath, loadHubScripts, sendUserToast } from '../utils';
 import { faCode, faCube, faDollarSign, faRotate, faRotateLeft, faWallet } from '@fortawesome/free-solid-svg-icons';
 import { hubScripts, workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
-import Modal from './Modal.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import Button from './common/button/Button.svelte';
 import HighlightCode from './HighlightCode.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import { Drawer } from './common';
 export let lang;
 export let editor;
 export let websocketAlive;
 export let iconOnly = false;
+export let validCode = true;
 let contextualVariablePicker;
 let variablePicker;
 let resourcePicker;
@@ -23,10 +28,10 @@ let codeLang = 'deno';
 let codeContent = '';
 function addEditorActions() {
     editor.addAction('insert-variable', 'Windmill: Insert variable', () => {
-        variablePicker.openModal();
+        variablePicker.openDrawer();
     });
     editor.addAction('insert-resource', 'Windmill: Insert resource', () => {
-        resourcePicker.openModal();
+        resourcePicker.openDrawer();
     });
 }
 $: editor && addEditorActions();
@@ -56,7 +61,7 @@ async function loadScripts() {
 		const { language, content } = await getScriptByPath(path ?? '')
 		codeContent = content
 		codeLang = language
-		codeViewer.openModal()
+		codeViewer.openDrawer()
 	}}
 	closeOnClick={false}
 	itemName="script"
@@ -64,12 +69,11 @@ async function loadScripts() {
 	loadItems={loadScripts}
 />
 
-<Modal bind:this={codeViewer}>
-	<div slot="title">Code</div>
-	<div slot="content">
+<Drawer bind:this={codeViewer} size="600px">
+	<DrawerContent title="Code" on:close={codeViewer.closeDrawer}>
 		<HighlightCode language={codeLang} code={codeContent} />
-	</div></Modal
->
+	</DrawerContent>
+</Drawer>
 
 <ItemPicker
 	bind:this={contextualVariablePicker}
@@ -81,6 +85,13 @@ async function loadScripts() {
 				editor.insertAtBeginning('import os\n')
 			}
 			editor.insertAtCursor(`os.environ.get("${name}")`)
+		} else if (lang == 'go') {
+			if (!editor.getCode().includes('"os"')) {
+				editor.insertAtLine('import "os"\n', 2)
+			}
+			editor.insertAtCursor(`os.Getenv("${name}")`)
+		} else if (lang == 'bash') {
+			editor.insertAtCursor(`$${name}`)
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
@@ -104,6 +115,13 @@ async function loadScripts() {
 				editor.insertAtBeginning('import wmill\n')
 			}
 			editor.insertAtCursor(`wmill.get_variable("${path}")`)
+		} else if (lang == 'go') {
+			if (!editor.getCode().includes('wmill "github.com/windmill-labs/windmill-go-client"')) {
+				editor.insertAtLine('import wmill "github.com/windmill-labs/windmill-go-client"\n\n', 3)
+			}
+			editor.insertAtCursor(`v, _ := wmill.GetVariable("${path}")`)
+		} else if (lang == 'bash') {
+			sendUserToast('Not supported yet', true)
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
@@ -143,6 +161,13 @@ async function loadScripts() {
 				editor.insertAtBeginning('import wmill\n')
 			}
 			editor.insertAtCursor(`wmill.get_resource("${path}")`)
+		} else if (lang == 'go') {
+			if (!editor.getCode().includes('wmill "github.com/windmill-labs/windmill-go-client"')) {
+				editor.insertAtLine('import wmill "github.com/windmill-labs/windmill-go-client"\n\n', 3)
+			}
+			editor.insertAtCursor(`r, _ := wmill.GetResource("${path}")`)
+		} else if (lang == 'bash') {
+			sendUserToast('Not supported yet', true)
 		}
 		sendUserToast(`${path} inserted at cursor`)
 	}}
@@ -151,10 +176,10 @@ async function loadScripts() {
 	loadItems={async () =>
 		await ResourceService.listResource({ workspace: $workspaceStore ?? 'NO_W' })}
 >
-	<div slot="submission" class="flex flex-row">
-		<div class="text-xs mr-2 align-middle">
-			The resource you were looking for does not exist yet?
-		</div>
+	<div slot="submission" class="flex flex-row gap-x-1">
+		<Button target="_blank" color="blue" size="sm" href="/resources?connect_app=undefined">
+			Connect an API
+		</Button>
 		<Button
 			variant="border"
 			color="blue"
@@ -163,21 +188,31 @@ async function loadScripts() {
 				resourceEditor.initNew()
 			}}
 		>
-			Create a new resource
+			New custom resource
 		</Button>
 	</div>
 </ItemPicker>
 
-<ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openModal} />
-<VariableEditor bind:this={variableEditor} on:create={variablePicker.openModal} />
+<ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
+<VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
 
 <div class="flex flex-row justify-between items-center overflow-hidden w-full">
 	<div class="flex flex-row divide-x items-center">
+		<div class="mx-2">
+			<span
+				title={validCode
+					? 'last signature parsing was sucessful'
+					: 'last signature parsing was succesful'}
+				class="relative inline-flex rounded-full h-2 w-2 {validCode
+					? 'bg-green-500/80'
+					: 'bg-red-500'}"
+			/>
+		</div>
 		<div>
 			<Button
 				color="light"
-				btnClasses="mr-1"
-				on:click={contextualVariablePicker.openModal}
+				btnClasses="mr-1 !font-medium"
+				on:click={contextualVariablePicker.openDrawer}
 				size="xs"
 				spacingSize="md"
 				startIcon={{ icon: faDollarSign }}
@@ -189,8 +224,8 @@ async function loadScripts() {
 		<div>
 			<Button
 				color="light"
-				btnClasses="mr-1"
-				on:click={variablePicker.openModal}
+				btnClasses="mx-1 !font-medium"
+				on:click={variablePicker.openDrawer}
 				size="xs"
 				spacingSize="md"
 				startIcon={{ icon: faWallet }}
@@ -201,11 +236,11 @@ async function loadScripts() {
 		</div>
 		<div>
 			<Button
-				btnClasses="mx-1"
+				btnClasses="mx-1 !font-medium"
 				size="xs"
 				spacingSize="md"
 				color="light"
-				on:click={resourcePicker.openModal}
+				on:click={resourcePicker.openDrawer}
 				{iconOnly}
 				startIcon={{ icon: faCube }}
 			>
@@ -215,11 +250,11 @@ async function loadScripts() {
 
 		<div>
 			<Button
-				btnClasses="mx-1"
+				btnClasses="mx-1 !font-medium"
 				size="xs"
 				spacingSize="md"
 				color="light"
-				on:click={scriptPicker.openModal}
+				on:click={scriptPicker.openDrawer}
 				{iconOnly}
 				startIcon={{ icon: faCode }}
 			>
@@ -229,7 +264,7 @@ async function loadScripts() {
 
 		<div>
 			<Button
-				btnClasses="mx-1"
+				btnClasses="mx-1 !font-medium"
 				size="xs"
 				spacingSize="md"
 				color="light"
@@ -243,7 +278,7 @@ async function loadScripts() {
 	</div>
 	<div>
 		<Button
-			btnClasses="ml-1"
+			btnClasses="ml-1 !font-medium"
 			size="xs"
 			spacingSize="md"
 			color="light"
@@ -255,14 +290,26 @@ async function loadScripts() {
 			{/if}
 			<span class="ml-1">
 				{#if lang == 'deno'}
-					(<span class={websocketAlive.deno ? 'text-green-600' : 'text-red-700'}>Deno</span>)
+					(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
 				{:else if lang == 'go'}
-					(<span class={websocketAlive.go ? 'text-green-600' : 'text-red-700'}>Go</span>)
+					(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
 				{:else if lang == 'python3'}
-					(<span class={websocketAlive.pyright ? 'text-green-600' : 'text-red-700'}>Pyright</span>
-					<span class={websocketAlive.black ? 'text-green-600' : 'text-red-700'}>Black</span>)
+					(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
+					<span class={websocketAlive.black ? 'green' : 'text-red-700'}>Black</span>)
 				{/if}
 			</span>
 		</Button>
 	</div>
 </div>
+
+<style>
+	@keyframes pulse {
+    50% {
+        opacity: .5
+    }
+}
+span.green {
+    animation: pulse 5s ease-in-out infinite;
+    --tw-text-opacity: 1;
+    color: rgb(22 163 74 / var(--tw-text-opacity))
+}</style>

package/components/EditorBar.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+export declare const EDITOR_BAR_WIDTH_THRESHOLD = 1044;
 import type Editor from './Editor.svelte';
 declare const __propDef: {
     props: {
-        lang: 'python3' | 'deno' | 'go';
+        lang: 'python3' | 'deno' | 'go' | 'bash';
         editor: Editor;
         websocketAlive: {
             pyright: boolean;
@@ -11,6 +12,7 @@ declare const __propDef: {
             go: boolean;
         };
         iconOnly?: boolean | undefined;
+        validCode?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FieldHeader.svelte

@@ -7,15 +7,16 @@ export let required = false;
 export let itemsType = undefined;
 </script>
 
-<h3>
+<div>
 	<span class="font-semibold">
-		{label}<Required {required} />
+		{label}
 	</span>
-	<span class="text-sm italic text-indigo-800"
-		>({type ?? 'any'}{contentEncoding && contentEncoding != ''
+	<span class="text-sm italic text-indigo-800">
+		({type ?? 'any'}{contentEncoding && contentEncoding != ''
 			? `, encoding: ${contentEncoding}`
 			: ''}{format && format != '' ? `, format: ${format}` : ''}{itemsType?.type
 			? ` of ${itemsType?.type}s`
 			: ''})</span
 	>
-</h3>
+	<Required {required} class="!ml-0" />
+</div>

package/components/FlowBuilder.svelte

@@ -4,11 +4,10 @@ import { FlowService, ScheduleService } from '../gen';
 import { workspaceStore } from '../stores';
 import { encodeState, formatCron, loadHubScripts, sendUserToast, setQueryWithoutLoad } from '../utils';
 import { faGlobe, faPen } from '@fortawesome/free-solid-svg-icons';
-import { setContext } from 'svelte';
-import Icon from 'svelte-awesome';
+import { onMount, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import CenteredPage from './CenteredPage.svelte';
-import Button from './common/button/Button.svelte';
+import { Button } from './common';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
 import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { OFFSET } from './CronInput.svelte';
@@ -16,9 +15,12 @@ import FlowEditor from './flows/FlowEditor.svelte';
 import { flowStateStore } from './flows/flowState';
 import { flowStore } from './flows/flowStore';
 import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
+import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
 import { loadFlowSchedule } from './flows/scheduleUtils';
 import { cleanInputs } from './flows/utils';
 export let initialPath = '';
+export let selectedId;
+export let initialArgs = {};
 let pathError = '';
 async function createSchedule(path) {
     const { cron, args, enabled } = $scheduleStore;
@@ -97,21 +99,29 @@ async function saveFlow() {
                 });
             }
         }
-        else {
+        else if (enabled) {
             await createSchedule(flow.path);
         }
     }
     sendUserToast(`Success! flow saved at ${$flowStore.path}`);
     goto(`/flows/get/${$flowStore.path}`);
 }
-flowStore.subscribe((flow) => {
-    if (flow) {
-        setQueryWithoutLoad($page.url, 'state', encodeState(flow));
+let timeout = undefined;
+$: {
+    if ($flowStore && $flowStateStore) {
+        setUrl();
     }
-});
+}
+function setUrl() {
+    timeout && clearTimeout(timeout);
+    timeout = setTimeout(() => setQueryWithoutLoad($page.url, 'state', encodeState({
+        flow: $flowStore,
+        selectedId: $selectedIdStore
+    })), 500);
+}
 const selectedIdStore = writable('settings');
 const scheduleStore = writable({ args: {}, cron: '', enabled: false });
-const previewArgsStore = writable({});
+const previewArgsStore = writable(initialArgs);
 function select(selectedId) {
     selectedIdStore.set(selectedId);
 }
@@ -134,69 +144,56 @@ async function loadSchedule() {
         });
     });
 }
+onMount(() => {
+    selectedId && select(selectedId);
+});
 $: initialPath && $workspaceStore && loadSchedule();
 loadHubScripts();
 </script>
 
 <UnsavedConfirmationModal />
 
-<div class="flex flex-col flex-1 h-full">
+<div class="flex flex-col flex-1 h-screen">
 	<!-- Nav between steps-->
-	<div class="justify-between flex flex-row w-full my-2 px-4 space-x-4 h-10">
-		<div id="flow_title" class="flex justify-between items-center">
-			<button class="flex flex-row items-center w-full h-full" on:click={() => select('settings')}>
-				<span class="font-mono text-sm"> {$flowStore.path}</span>
-				<Icon
-					data={faPen}
-					scale={0.8}
-					class="text-gray-500 ml-2 flex justify-center items-center mb-0.5"
-				/>
-			</button>
+	<div
+		class="justify-between flex flex-row w-full py-2 px-4 space-x-4 overflow-x-auto scrollbar-hidden"
+	>
+		<div class="flex flex-row space-x-2">
+			<FlowImportExportMenu />
 		</div>
-		<div class="shrink h-full">
-			<button
-				class="flex flex-row items-center w-full h-full"
-				on:click={() => {
+		<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
+			<Button
+				btnClasses="hidden lg:inline-flex"
+				startIcon={{ icon: faPen }}
+				variant="contained"
+				color="light"
+				size="xs"
+				on:click={async () => {
 					select('settings')
-					document.getElementById('flow-summary')?.focus()
+					document.getElementById('path')?.focus()
 				}}
 			>
-				<div class="overflow-x-auto flex items-center h-full text-sm text-left font-semibold">
-					<div
-						>{$flowStore.summary == '' || !$flowStore.summary
-							? 'No summary'
-							: $flowStore.summary}</div
-					>
-				</div>
-				<div>
-					<Icon data={faPen} scale={0.8} class="text-gray-500 ml-1" />
-				</div>
-			</button>
-		</div>
-		<div class="flex flex-row-reverse ml-2 space-x-reverse space-x-2">
-			<Button disabled={pathError != ''} color="blue" size="sm" on:click={saveFlow}>Save</Button>
-			<FlowImportExportMenu />
-
+				{$flowStore.path}
+			</Button>
 			<Button
+				startIcon={{ icon: faPen }}
+				variant="contained"
 				color="light"
-				size="sm"
-				variant="border"
-				on:click={() => {
-					const url = new URL('https://hub.windmill.dev/flows/add')
-					const openFlow = {
-						value: $flowStore.value,
-						summary: $flowStore.summary,
-						description: $flowStore.description,
-						schema: $flowStore.schema
-					}
-					url.searchParams.append('flow', btoa(JSON.stringify(openFlow)))
-					window.open(url, '_blank')?.focus()
+				size="xs"
+				on:click={async () => {
+					select('settings')
+					document.getElementById('flow-summary')?.focus()
 				}}
 			>
-				<Icon data={faGlobe} scale={0.8} class="inline mr-2" />
-				Publish to Hub
+				<div class="max-w-[10em] !truncate">
+					{$flowStore.summary == '' || !$flowStore.summary ? 'No summary' : $flowStore.summary}
+				</div>
 			</Button>
 		</div>
+		<div class="flex flex-row-reverse ml-2 space-x-reverse space-x-2">
+			<Button disabled={pathError != ''} size="sm" on:click={saveFlow}>Save</Button>
+			<FlowPreviewButtons />
+		</div>
 	</div>
 
 	<!-- metadata -->

package/components/FlowBuilder.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         initialPath?: string | undefined;
+        selectedId: string | undefined;
+        initialArgs?: Record<string, any> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowJobResult.svelte

@@ -1,22 +1,15 @@
 <script>import DisplayResult from './DisplayResult.svelte';
-import Tabs from './common/tabs/Tabs.svelte';
-import Tab from './common/tabs/Tab.svelte';
-import TabContent from './common/tabs/TabContent.svelte';
 import LogViewer from './LogViewer.svelte';
-export let job;
+export let result;
+export let logs;
 </script>
 
-{#if job}
-	<Tabs selected="results">
-		<Tab value="results">Results</Tab>
-		<Tab value="logs">Logs</Tab>
-		<svelte:fragment slot="content">
-			<TabContent value="results" class="border p-2 h-36 overflow-auto">
-				<DisplayResult result={job.result} />
-			</TabContent>
-			<TabContent value="logs" class="border h-36 overflow-auto">
-				<LogViewer content={job.logs ?? ''} isLoading={false} />
-			</TabContent>
-		</svelte:fragment>
-	</Tabs>
-{/if}
+<div class="grid grid-cols-2 shadow border border-gray-800 h-full">
+	<div class="bg-white max-h-80 h-full p-1 overflow-auto relative">
+		<span class="text-gray-500">Result</span>
+		<DisplayResult {result} />
+	</div>
+	<div class="overflow-auto max-h-80 h-full relative">
+		<LogViewer content={logs ?? ''} isLoading={false} />
+	</div>
+</div>

package/components/FlowJobResult.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { CompletedJob } from '../gen';
 declare const __propDef: {
     props: {
-        job: CompletedJob | undefined;
+        result: any;
+        logs: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;