windmill-components 1.35.42 → 1.36.0

package/components/Editor.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import * as monaco from 'monaco-editor';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        deno?: boolean | undefined;
-        lang?: string | undefined;
+        lang: 'typescript' | 'python' | 'go';
         code?: string | undefined;
         hash?: string | undefined;
         cmdEnterAction?: (() => void) | undefined;
@@ -21,6 +21,7 @@ declare const __propDef: {
         setCode?: ((ncode: string) => void) | undefined;
         clearContent?: (() => Promise<void>) | undefined;
         reloadWebsocket?: (() => Promise<void>) | undefined;
+        addAction?: ((id: string, label: string, callback: (editor: monaco.editor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -41,5 +42,6 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get setCode(): (ncode: string) => void;
     get clearContent(): () => Promise<void>;
     get reloadWebsocket(): () => Promise<void>;
+    get addAction(): (id: string, label: string, callback: (editor: monaco.editor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;
 }
 export {};

package/components/EditorBar.svelte

@@ -1,7 +1,6 @@
 <script>import { ResourceService, ScriptService, VariableService } from '../gen';
 import { getScriptByPath, loadHubScripts, sendUserToast } from '../utils';
-import { faCode, faCube, faFile, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
-import Icon from 'svelte-awesome';
+import { faCode, faCube, faDollarSign, faFile, faRotate, faRotateLeft, faWallet } from '@fortawesome/free-solid-svg-icons';
 import { hubScripts, workspaceStore } from '../stores';
 import { Highlight } from 'svelte-highlight';
 import { python, typescript } from 'svelte-highlight/languages';
@@ -9,9 +8,12 @@ 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';
 export let lang;
 export let editor;
 export let websocketAlive;
+export let iconOnly = false;
+let contextualVariablePicker;
 let variablePicker;
 let resourcePicker;
 let scriptPicker;
@@ -20,16 +22,24 @@ let resourceEditor;
 let codeViewer;
 let codeLang = 'deno';
 let codeContent = '';
+function addEditorActions() {
+    editor.addAction('insert-variable', 'Windmill: Insert variable', () => {
+        variablePicker.openModal();
+    });
+    editor.addAction('insert-resource', 'Windmill: Insert resource', () => {
+        resourcePicker.openModal();
+    });
+}
+$: editor && addEditorActions();
 async function loadVariables() {
-    let r = [];
-    const variables = (await VariableService.listVariable({ workspace: $workspaceStore ?? 'NO_W' })).map((x) => {
+    return (await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => {
         return { name: x.path, ...x };
     });
-    const rvariables = await VariableService.listContextualVariables({
+}
+async function loadContextualVariables() {
+    return await VariableService.listContextualVariables({
         workspace: $workspaceStore ?? 'NO_W'
     });
-    r = r.concat(variables).concat(rvariables);
-    return r;
 }
 async function loadScripts() {
     const workspaceScripts = await ScriptService.listScripts({
@@ -66,35 +76,41 @@ async function loadScripts() {
 	</div></Modal
 >
 
+<ItemPicker
+	bind:this={contextualVariablePicker}
+	pickCallback={(path, name) => {
+		if (lang == 'deno') {
+			editor.insertAtCursor(`Deno.env.get('${name}')`)
+		} else if (lang == 'python3') {
+			if (!editor.getCode().includes('import os')) {
+				editor.insertAtBeginning('import os\n')
+			}
+			editor.insertAtCursor(`os.environ.get("${name}")`)
+		}
+		sendUserToast(`${name} inserted at cursor`)
+	}}
+	itemName="Contextual Variable"
+	extraField="name"
+	loadItems={loadContextualVariables}
+/>
+
 <ItemPicker
 	bind:this={variablePicker}
 	pickCallback={(path, name) => {
-		if (!path) {
-			if (lang == 'deno') {
-				editor.insertAtCursor(`Deno.env.get('${name}')`)
-			} else {
-				if (!editor.getCode().includes('import os')) {
-					editor.insertAtBeginning('import os\n')
-				}
-				editor.insertAtCursor(`os.environ.get("${name}")`)
+		if (lang == 'deno') {
+			if (!editor.getCode().includes('import * as wmill from')) {
+				editor.insertAtBeginning(
+					`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/mod.ts'\n`
+				)
 			}
-			sendUserToast(`${name} inserted at cursor`)
-		} else {
-			if (lang == 'deno') {
-				if (!editor.getCode().includes('import * as wmill from')) {
-					editor.insertAtBeginning(
-						`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/mod.ts'\n`
-					)
-				}
-				editor.insertAtCursor(`(await wmill.getVariable('${path}'))`)
-			} else {
-				if (!editor.getCode().includes('import wmill')) {
-					editor.insertAtBeginning('import wmill\n')
-				}
-				editor.insertAtCursor(`wmill.get_variable("${path}")`)
+			editor.insertAtCursor(`(await wmill.getVariable('${path}'))`)
+		} else if (lang == 'python3') {
+			if (!editor.getCode().includes('import wmill')) {
+				editor.insertAtBeginning('import wmill\n')
 			}
-			sendUserToast(`${name} inserted at cursor`)
+			editor.insertAtCursor(`wmill.get_variable("${path}")`)
 		}
+		sendUserToast(`${name} inserted at cursor`)
 	}}
 	itemName="Variable"
 	extraField="name"
@@ -104,15 +120,16 @@ async function loadScripts() {
 		<div class="text-xs mr-2 align-middle">
 			The variable you were looking for does not exist yet?
 		</div>
-		<button
-			class="default-button-secondary"
-			type="button"
+		<Button
+			variant="border"
+			color="blue"
+			size="sm"
 			on:click={() => {
 				variableEditor.initNew()
 			}}
 		>
 			Create a new variable
-		</button>
+		</Button>
 	</div>
 </ItemPicker>
 
@@ -126,7 +143,7 @@ async function loadScripts() {
 				)
 			}
 			editor.insertAtCursor(`(await wmill.getResource('${path}'))`)
-		} else {
+		} else if (lang == 'python3') {
 			if (!editor.getCode().includes('import wmill')) {
 				editor.insertAtBeginning('import wmill\n')
 			}
@@ -143,92 +160,112 @@ async function loadScripts() {
 		<div class="text-xs mr-2 align-middle">
 			The resource you were looking for does not exist yet?
 		</div>
-		<button
-			class="default-button-secondary"
-			type="button"
+		<Button
+			variant="border"
+			color="blue"
+			size="sm"
 			on:click={() => {
 				resourceEditor.initNew()
 			}}
 		>
 			Create a new resource
-		</button>
+		</Button>
 	</div>
 </ItemPicker>
 
 <ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openModal} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openModal} />
 
-<div class="flex divide-x items-center">
-	<div>
-		<button
-			type="button"
-			class="mr-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
-			on:click={() => {
-				variablePicker.openModal()
-			}}
-		>
-			<Icon data={faFile} class="h-4 w-4 mr-2" />
-			Insert variable
-		</button>
-	</div>
-	<div>
-		<button
-			type="button"
-			class="mx-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
-			on:click={() => {
-				resourcePicker.openModal()
-			}}
-		>
-			<Icon data={faCube} class="h-4 w-4 mr-2" />
-			Insert resource
-		</button>
-	</div>
+<div class="flex flex-row justify-between items-center overflow-hidden w-full">
+	<div class="flex flex-row divide-x items-center">
+		<div>
+			<Button
+				color="light"
+				btnClasses="mr-1"
+				on:click={contextualVariablePicker.openModal}
+				size="xs"
+				spacingSize="md"
+				startIcon={{ icon: faDollarSign }}
+				{iconOnly}
+			>
+				+Contextual Variable
+			</Button>
+		</div>
+		<div>
+			<Button
+				color="light"
+				btnClasses="mr-1"
+				on:click={variablePicker.openModal}
+				size="xs"
+				spacingSize="md"
+				startIcon={{ icon: faWallet }}
+				{iconOnly}
+			>
+				+Variable
+			</Button>
+		</div>
+		<div>
+			<Button
+				btnClasses="mx-1"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={resourcePicker.openModal}
+				{iconOnly}
+				startIcon={{ icon: faCube }}
+			>
+				+Resource
+			</Button>
+		</div>
 
-	<div>
-		<button
-			type="button"
-			class="mx-1  bg-white rounded-md items-center flex hover:bg-gray-100 font-medium  text-xs p-2"
-			on:click={() => {
-				scriptPicker.openModal()
-			}}
-		>
-			<Icon data={faCode} class="h-4 w-4 mr-2" />
-			Search script
-		</button>
-	</div>
+		<div>
+			<Button
+				btnClasses="mx-1"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={scriptPicker.openModal}
+				{iconOnly}
+				startIcon={{ icon: faCode }}
+			>
+				View Script
+			</Button>
+		</div>
 
-	<div>
-		<button
-			type="button"
-			class="mx-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium  text-xs p-2"
-			on:click={() => {
-				editor.clearContent()
-			}}
-		>
-			<Icon data={faRotateLeft} class="h-4 w-4 mr-2" />
-			Reset content
-		</button>
+		<div>
+			<Button
+				btnClasses="mx-1"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={editor.clearContent}
+				{iconOnly}
+				startIcon={{ icon: faRotateLeft }}
+			>
+				Reset content
+			</Button>
+		</div>
 	</div>
 	<div>
-		<button
-			type="button"
-			class="ml-1 bg-white rounded-md items-center flex hover:bg-gray-100 font-medium text-xs p-2"
-			on:click={() => {
-				editor.reloadWebsocket()
-			}}
+		<Button
+			btnClasses="ml-1"
+			size="xs"
+			spacingSize="md"
+			color="light"
+			on:click={editor.reloadWebsocket}
+			startIcon={{ icon: faRotate }}
 		>
-			<Icon data={faRotate} class="h-4 w-4 mr-2" />
-
-			Reload assistants
+			{#if !iconOnly}
+				Reload assistants
+			{/if}
 			<span class="ml-1">
 				{#if lang == 'deno'}
 					(<span class={websocketAlive.deno ? 'text-green-600' : 'text-red-700'}>Deno</span>)
 				{:else if lang == 'python3'}
 					(<span class={websocketAlive.pyright ? 'text-green-600' : 'text-red-700'}>Pyright</span>
-					&nbsp;
 					<span class={websocketAlive.black ? 'text-green-600' : 'text-red-700'}>Black</span>)
 				{/if}
 			</span>
-		</button>
+		</Button>
 	</div>
 </div>

package/components/EditorBar.svelte.d.ts

@@ -2,13 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 import type Editor from './Editor.svelte';
 declare const __propDef: {
     props: {
-        lang: 'python3' | 'deno';
+        lang: 'python3' | 'deno' | 'go';
         editor: Editor;
         websocketAlive: {
             pyright: boolean;
             black: boolean;
             deno: boolean;
         };
+        iconOnly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowBuilder.svelte

@@ -2,43 +2,43 @@
 import { page } from '$app/stores';
 import { FlowService, ScheduleService } from '../gen';
 import { workspaceStore } from '../stores';
-import { encodeState, formatCron, loadHubScripts, pathIsEmpty, sendUserToast, setQueryWithoutLoad } from '../utils';
-import { faPlay } from '@fortawesome/free-solid-svg-icons';
-import { Breadcrumb, BreadcrumbItem, Button } from 'flowbite-svelte';
-import { onDestroy, onMount } from 'svelte';
+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 { writable } from 'svelte/store';
+import CenteredPage from './CenteredPage.svelte';
+import Button from './common/button/Button.svelte';
+import { dirtyStore } from './common/confirmationModal/dirtyStore';
+import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { OFFSET } from './CronInput.svelte';
-import Drawer from './common/drawer/Drawer.svelte';
-import FlowEditor from './FlowEditor.svelte';
-import FlowPreviewContent from './FlowPreviewContent.svelte';
-import { flowStateStore, flowStateToFlow } from './flows/flowState';
+import FlowEditor from './flows/FlowEditor.svelte';
+import { flowStateStore } from './flows/flowState';
 import { flowStore } from './flows/flowStore';
+import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
+import { loadFlowSchedule } from './flows/scheduleUtils';
 import { cleanInputs } from './flows/utils';
-import ScriptSchema from './ScriptSchema.svelte';
 export let initialPath = '';
 let pathError = '';
-let previewOpen = false;
-let scheduleArgs = {};
-let previewArgs = {};
-let scheduleEnabled = false;
-let scheduleCron = '';
-$: step = Number($page.url.searchParams.get('step')) || 1;
 async function createSchedule(path) {
+    const { cron, args, enabled } = $scheduleStore;
     await ScheduleService.createSchedule({
         workspace: $workspaceStore,
         requestBody: {
             path: path,
-            schedule: formatCron(scheduleCron),
+            schedule: formatCron(cron),
             offset: OFFSET,
             script_path: path,
             is_flow: true,
-            args: scheduleArgs,
-            enabled: scheduleEnabled
+            args,
+            enabled
         }
     });
 }
 async function saveFlow() {
-    const flow = cleanInputs(flowStateToFlow($flowStateStore, $flowStore));
+    const flow = cleanInputs($flowStore);
+    const { cron, args, enabled } = $scheduleStore;
+    $dirtyStore = false;
     if (initialPath === '') {
         await FlowService.createFlow({
             workspace: $workspaceStore,
@@ -50,7 +50,7 @@ async function saveFlow() {
                 schema: flow.schema
             }
         });
-        if (scheduleEnabled) {
+        if (enabled) {
             await createSchedule(flow.path);
         }
     }
@@ -76,24 +76,24 @@ async function saveFlow() {
                 path: initialPath
             });
             if (schedule.path != flow.path ||
-                JSON.stringify(schedule.args) != JSON.stringify(scheduleArgs) ||
-                schedule.schedule != scheduleCron) {
+                JSON.stringify(schedule.args) != JSON.stringify(args) ||
+                schedule.schedule != cron) {
                 await ScheduleService.updateSchedule({
                     workspace: $workspaceStore ?? '',
                     path: initialPath,
                     requestBody: {
-                        schedule: formatCron(scheduleCron),
+                        schedule: formatCron(cron),
                         script_path: flow.path,
                         is_flow: true,
-                        args: scheduleArgs
+                        args
                     }
                 });
             }
-            if (scheduleEnabled != schedule.enabled) {
+            if (enabled != schedule.enabled) {
                 await ScheduleService.setScheduleEnabled({
                     workspace: $workspaceStore ?? '',
                     path: flow.path,
-                    requestBody: { enabled: scheduleEnabled }
+                    requestBody: { enabled }
                 });
             }
         }
@@ -104,125 +104,106 @@ async function saveFlow() {
     sendUserToast(`Success! flow saved at ${$flowStore.path}`);
     goto(`/flows/get/${$flowStore.path}`);
 }
-async function changeStep(step) {
-    goto(`?step=${step}`);
-}
-flowStateStore.subscribe((flowState) => {
-    if (flowState) {
-        flowStore.update((flow) => {
-            if (flow) {
-                return flowStateToFlow(flowState, flow);
-            }
-            return flow;
-        });
-    }
-});
 flowStore.subscribe((flow) => {
     if (flow) {
         setQueryWithoutLoad($page.url, 'state', encodeState(flow));
     }
 });
-onMount(() => {
-    loadHubScripts();
-});
-onDestroy(() => {
-    //@ts-ignore
-    $flowStore = undefined;
-    //@ts-ignore
-    $flowStateStore = undefined;
+const selectedIdStore = writable('settings');
+const scheduleStore = writable({ args: {}, cron: '', enabled: false });
+const previewArgsStore = writable({});
+function select(selectedId) {
+    selectedIdStore.set(selectedId);
+}
+setContext('FlowEditorContext', {
+    selectedId: selectedIdStore,
+    schedule: scheduleStore,
+    select,
+    previewArgs: previewArgsStore
 });
+async function loadSchedule() {
+    loadFlowSchedule(initialPath, $workspaceStore)
+        .then((schedule) => {
+        scheduleStore.set(schedule);
+    })
+        .catch(() => {
+        scheduleStore.set({
+            cron: '0 */5 * * *',
+            args: {},
+            enabled: false
+        });
+    });
+}
+$: initialPath && $workspaceStore && loadSchedule();
+loadHubScripts();
 </script>
 
-<div class="flex flex-row w-full h-full justify-between ">
-	<div class={`flex flex-col mb-96 m-auto w-full`}>
-		<!-- Nav between steps-->
-		<div class="justify-between flex flex-row w-full my-4">
-			<Breadcrumb>
-				<BreadcrumbItem>
-					<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
-						Flow Editor
-					</button>
-				</BreadcrumbItem>
-				<BreadcrumbItem>
-					<button on:click={() => changeStep(2)} class={step === 2 ? 'font-bold' : null}>
-						UI customisation
-					</button>
-				</BreadcrumbItem>
-			</Breadcrumb>
-			<div class="flex flex-row-reverse ml-2">
-				{#if step == 1}
-					<button
-						disabled={pathError != ''}
-						class="default-button px-6 max-h-8"
-						on:click={() => changeStep(2)}
-					>
-						Next
-					</button>
-					<button
-						disabled={pathError != ''}
-						class="default-button-secondary px-6 max-h-8 mr-2"
-						on:click={saveFlow}
-					>
-						Save
-					</button>
-				{:else}
-					<button class="default-button px-6 self-end" on:click={saveFlow}>Save</button>
-					<button
-						class="default-button-secondary px-6 max-h-8 mr-2"
-						on:click={async () => {
-							changeStep(1)
-						}}>Back</button
-					>
-				{/if}
-			</div>
+<UnsavedConfirmationModal />
+
+<div class="flex flex-col flex-1 h-full">
+	<!-- 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>
-		<div class="flex flex-row-reverse">
-			<span class="my-1 text-sm text-gray-500 italic">
-				{#if initialPath && initialPath != $flowStore?.path} {initialPath} &rightarrow; {/if}
-				{$flowStore?.path}
-			</span>
+		<div class="shrink h-full">
+			<button
+				class="flex flex-row items-center w-full h-full"
+				on:click={() => {
+					select('settings')
+					document.getElementById('flow-summary')?.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 />
 
-		<!-- metadata -->
+			<Button
+				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()
+				}}
+			>
+				<Icon data={faGlobe} scale={0.8} class="inline mr-2" />
+				Publish to Hub
+			</Button>
+		</div>
+	</div>
 
-		{#if $flowStateStore}
-			{#if step === 1}
-				<FlowEditor
-					bind:pathError
-					bind:initialPath
-					bind:scheduleEnabled
-					bind:scheduleCron
-					bind:scheduleArgs
-					bind:previewArgs
-				/>
-				<Button
-					disabled={pathIsEmpty($flowStore.path)}
-					size="lg"
-					pill
-					on:click={() => (previewOpen = !previewOpen)}
-					class={`blue-button fixed bottom-10 right-10 ${previewOpen ? 'hidden' : ''}`}
-				>
-					Preview flow
-					{pathIsEmpty($flowStore.path) ? '(pick a name first!)' : ''}
+	<!-- metadata -->
 
-					<Icon data={faPlay} class="ml-2" />
-				</Button>
-			{:else if step === 2}
-				<ScriptSchema
-					synchronizedHeader={false}
-					bind:summary={$flowStore.summary}
-					bind:description={$flowStore.description}
-					bind:schema={$flowStore.schema}
-				/>
-			{/if}
-		{:else}
-			<p>Loading</p>
-		{/if}
-	</div>
+	{#if $flowStateStore}
+		<FlowEditor {initialPath} />
+	{:else}
+		<CenteredPage>Loading...</CenteredPage>
+	{/if}
 </div>
-
-{#if $flowStateStore && $flowStore}
-	<Drawer bind:open={previewOpen} size="800px">
-		<FlowPreviewContent bind:args={previewArgs} on:close={() => (previewOpen = !previewOpen)} />
-	</Drawer>
-{/if}