windmill-components 1.21.0 → 1.28.1

package/components/EditorBar.svelte

@@ -0,0 +1,215 @@
+<script>import { ResourceService, ScriptService, VariableService } from '../gen';
+import { getScriptByPath, loadHubScripts, sendUserToast } from '../utils';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import { hubScripts, workspaceStore } from '../stores';
+import { Button } from 'flowbite-svelte';
+import { Highlight } from 'svelte-highlight';
+import { python, typescript } from 'svelte-highlight/languages';
+import ItemPicker from './ItemPicker.svelte';
+import Modal from './Modal.svelte';
+import ResourceEditor from './ResourceEditor.svelte';
+import VariableEditor from './VariableEditor.svelte';
+export let lang;
+export let editor;
+export let websocketAlive;
+let variablePicker;
+let resourcePicker;
+let scriptPicker;
+let variableEditor;
+let resourceEditor;
+let codeViewer;
+let codeLang = 'deno';
+let codeContent = '';
+async function loadVariables() {
+    let r = [];
+    const variables = (await VariableService.listVariable({ workspace: $workspaceStore ?? 'NO_W' })).map((x) => {
+        return { name: x.path, ...x };
+    });
+    const rvariables = await VariableService.listContextualVariables({
+        workspace: $workspaceStore ?? 'NO_W'
+    });
+    r = r.concat(variables).concat(rvariables);
+    return r;
+}
+async function loadScripts() {
+    const workspaceScripts = await ScriptService.listScripts({
+        workspace: $workspaceStore ?? 'NO_W'
+    });
+    await loadHubScripts();
+    const hubScripts_ = $hubScripts ?? [];
+    return workspaceScripts.concat(hubScripts_);
+}
+</script>
+
+<ItemPicker
+	bind:this={scriptPicker}
+	pickCallback={async (path, _) => {
+		const { language, content } = await getScriptByPath(path ?? '')
+		codeContent = content
+		codeLang = language
+		codeViewer.openModal()
+	}}
+	closeOnClick={false}
+	itemName="script"
+	extraField="summary"
+	loadItems={loadScripts}
+/>
+
+<Modal bind:this={codeViewer}>
+	<div slot="title">Code</div>
+	<div slot="content">
+		{#if codeLang == 'python3'}
+			<Highlight language={python} code={codeContent} />
+		{:else if codeLang == 'deno'}
+			<Highlight language={typescript} code={codeContent} />
+		{/if}
+	</div></Modal
+>
+
+<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}")`)
+			}
+			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}/index.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}")`)
+			}
+			sendUserToast(`${name} inserted at cursor`)
+		}
+	}}
+	itemName="Variable"
+	extraField="name"
+	loadItems={loadVariables}
+>
+	<div slot="submission" class="flex flex-row">
+		<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"
+			on:click={() => {
+				variableEditor.initNew()
+			}}
+		>
+			Create a new variable
+		</button>
+	</div>
+</ItemPicker>
+
+<ItemPicker
+	bind:this={resourcePicker}
+	pickCallback={(path, _) => {
+		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}/index.ts'\n`
+				)
+			}
+			editor.insertAtCursor(`(await wmill.getResource('${path}'))`)
+		} else {
+			if (!editor.getCode().includes('import wmill')) {
+				editor.insertAtBeginning('import wmill\n')
+			}
+			editor.insertAtCursor(`wmill.get_resource("${path}")`)
+		}
+		sendUserToast(`${path} inserted at cursor`)
+	}}
+	itemName="Resource"
+	extraField="resource_type"
+	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>
+		<button
+			class="default-button-secondary"
+			type="button"
+			on:click={() => {
+				resourceEditor.initNew()
+			}}
+		>
+			Create a new resource
+		</button>
+	</div>
+</ItemPicker>
+
+<ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openModal} />
+
+<VariableEditor bind:this={variableEditor} on:create={variablePicker.openModal} />
+
+<div class="flex flex-row w-full">
+	<div class="flex flex-row w-full space-x-2 whitespace-nowrap">
+		<Button
+			size="xs"
+			color="alternative"
+			on:click={() => {
+				variablePicker.openModal()
+			}}
+		>
+			<Icon data={faSearch} scale={0.7} class="mr-2" />
+			Variable picker
+		</Button>
+
+		<Button
+			size="xs"
+			color="alternative"
+			on:click={() => {
+				resourcePicker.openModal()
+			}}
+		>
+			<Icon data={faSearch} scale={0.7} class="mr-2" />
+			Resource picker
+		</Button>
+
+		<Button
+			size="xs"
+			color="alternative"
+			on:click={() => {
+				scriptPicker.openModal()
+			}}
+		>
+			<Icon data={faSearch} scale={0.7} class="mr-2" />
+			Script explorer
+		</Button>
+	</div>
+	<div class="flex flex-row-reverse w-full">
+		<Button
+			size="xs"
+			color="alternative"
+			on:click={() => {
+				editor.reloadWebsocket()
+			}}
+		>
+			Reload assistants (status:&nbsp;
+			{#if lang == 'deno'}
+				<span class={websocketAlive.deno ? 'text-green-600' : 'text-red-600'}>Deno</span>
+			{:else if lang == 'python3'}
+				<span class={websocketAlive.pyright ? 'text-green-600' : 'text-red-600'}>Pyright</span>
+				<span class={websocketAlive.black ? 'text-green-600' : 'text-red-600'}>Black</span>
+			{/if})
+		</Button>
+	</div>
+</div>

package/components/EditorBar.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type Editor from './Editor.svelte';
+declare const __propDef: {
+    props: {
+        lang: 'python3' | 'deno';
+        editor: Editor;
+        websocketAlive: {
+            pyright: boolean;
+            black: boolean;
+            deno: boolean;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type EditorBarProps = typeof __propDef.props;
+export declare type EditorBarEvents = typeof __propDef.events;
+export declare type EditorBarSlots = typeof __propDef.slots;
+export default class EditorBar extends SvelteComponentTyped<EditorBarProps, EditorBarEvents, EditorBarSlots> {
+}
+export {};

package/components/FlowBuilder.svelte

@@ -1,52 +1,102 @@
 <script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
-import { FlowService, ScriptService } from '../gen';
-import { clearPreviewResults, hubScripts, workspaceStore } from '../stores';
-import { sendUserToast, setQueryWithoutLoad } from '../utils';
-import { onMount } from 'svelte';
+import { FlowService, ScheduleService } from '../gen';
+import { clearPreviewResults, previewResults, 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 Icon from 'svelte-awesome';
+import { OFFSET } from './CronInput.svelte';
 import FlowEditor from './FlowEditor.svelte';
-import { flowStore } from './flows/flowStore';
-import { flowToMode } from './flows/utils';
+import FlowPreviewContent from './FlowPreviewContent.svelte';
+import { flowStore, mode } from './flows/flowStore';
+import { flowToMode, jobsToResults } from './flows/utils';
 import ScriptSchema from './ScriptSchema.svelte';
 export let initialPath = '';
 let pathError = '';
-let mode;
+let scheduleArgs;
+let scheduleEnabled;
+let scheduleCron;
+let previewOpen = false;
 $: step = Number($page.url.searchParams.get('step')) || 1;
-async function loadSearchData() {
-    const scripts = await ScriptService.listHubScripts();
-    $hubScripts = scripts.map((x) => ({
-        path: `hub/${x.id}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
-        summary: `${x.summary} (${x.app})`,
-        approved: x.approved,
-        is_trigger: x.is_trigger
-    }));
+async function createSchedule(path) {
+    await ScheduleService.createSchedule({
+        workspace: $workspaceStore,
+        requestBody: {
+            path: path,
+            schedule: formatCron(scheduleCron),
+            offset: OFFSET,
+            script_path: path,
+            is_flow: true,
+            args: scheduleArgs,
+            enabled: scheduleEnabled
+        }
+    });
 }
 async function saveFlow() {
-    const newFlow = flowToMode($flowStore, mode);
+    const flow = flowToMode($flowStore, $mode);
     if (initialPath === '') {
         await FlowService.createFlow({
             workspace: $workspaceStore,
             requestBody: {
-                path: newFlow.path,
-                summary: newFlow.summary,
-                description: newFlow.description ?? '',
-                value: newFlow.value,
-                schema: newFlow.schema
+                path: flow.path,
+                summary: flow.summary,
+                description: flow.description ?? '',
+                value: flow.value,
+                schema: flow.schema
             }
         });
+        if ($mode == 'pull') {
+            await createSchedule(flow.path);
+        }
     }
     else {
         await FlowService.updateFlow({
             workspace: $workspaceStore,
-            path: newFlow.path,
+            path: initialPath,
             requestBody: {
-                path: newFlow.path,
-                summary: newFlow.summary,
-                description: newFlow.description ?? '',
-                value: newFlow.value,
-                schema: newFlow.schema
+                path: flow.path,
+                summary: flow.summary,
+                description: flow.description ?? '',
+                value: flow.value,
+                schema: flow.schema
             }
         });
+        const scheduleExists = await ScheduleService.existsSchedule({
+            workspace: $workspaceStore ?? '',
+            path: initialPath
+        });
+        if (scheduleExists) {
+            const schedule = await ScheduleService.getSchedule({
+                workspace: $workspaceStore ?? '',
+                path: initialPath
+            });
+            if (schedule.path != flow.path ||
+                JSON.stringify(schedule.args) != JSON.stringify(scheduleArgs) ||
+                schedule.schedule != scheduleCron) {
+                await ScheduleService.updateSchedule({
+                    workspace: $workspaceStore ?? '',
+                    path: initialPath,
+                    requestBody: {
+                        schedule: formatCron(scheduleCron),
+                        script_path: flow.path,
+                        is_flow: true,
+                        args: scheduleArgs
+                    }
+                });
+            }
+            if (scheduleEnabled != schedule.enabled) {
+                await ScheduleService.setScheduleEnabled({
+                    workspace: $workspaceStore ?? '',
+                    path: flow.path,
+                    requestBody: { enabled: scheduleEnabled }
+                });
+            }
+        }
+        else {
+            await createSchedule(flow.path);
+        }
     }
     sendUserToast(`Success! flow saved at ${$flowStore.path}`);
     goto(`/flows/get/${$flowStore.path}`);
@@ -55,46 +105,42 @@ async function changeStep(step) {
     goto(`?step=${step}`);
 }
 flowStore.subscribe((flow) => {
-    setQueryWithoutLoad($page.url, 'state', btoa(JSON.stringify(flowToMode(flow, mode))));
+    if (flow) {
+        setQueryWithoutLoad($page.url, 'state', encodeState(flowToMode(flow, $mode)));
+    }
 });
 onMount(() => {
-    loadSearchData();
+    loadHubScripts();
     clearPreviewResults();
 });
+onDestroy(() => {
+    //@ts-ignore
+    $flowStore = undefined;
+});
 </script>
 
-<div class="flex flex-col h-screen max-w-screen-lg xl:-ml-20 xl:pl-4 w-full -mt-4 pt-4 md:mx-10 ">
-	<!-- Nav between steps-->
-	<div class="flex flex-col w-full">
-		<div class="justify-between flex flex-row drop-shadow-sm w-full">
-			<div class="wizard-nav flex flex-row w-full">
-				<button
-					disabled={pathError != ''}
-					class="{step === 1
-						? 'default-button-disabled text-gray-700'
-						: 'default-button-secondary'} min-w-max ml-2"
-					on:click={() => {
-						changeStep(1)
-					}}>Step 1: Flow</button
-				>
-				<button
-					disabled={pathError != ''}
-					class="{step === 2
-						? 'default-button-disabled text-gray-700'
-						: 'default-button-secondary'} min-w-max ml-2"
-					on:click={() => {
-						changeStep(2)
-					}}>Step 2: UI customisation</button
-				>
-			</div>
+<div class="flex flex-row w-full h-full justify-between">
+	<div class="flex flex-col max-w-screen-md mb-96 m-auto">
+		<!-- 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(step + 1)
-						}}
+						on:click={() => changeStep(2)}
 					>
 						Next
 					</button>
@@ -112,31 +158,57 @@ onMount(() => {
 		</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}
+				{#if initialPath && initialPath != $flowStore?.path} {initialPath} &rightarrow; {/if}
+				{$flowStore?.path}
 			</span>
 		</div>
-	</div>
-
-	<!-- metadata -->
 
-	{#if step === 1}
-		<FlowEditor bind:mode bind:pathError bind:initialPath />
-	{:else if step === 2}
-		<ScriptSchema
-			synchronizedHeader={false}
-			bind:summary={$flowStore.summary}
-			bind:description={$flowStore.description}
-			bind:schema={$flowStore.schema}
-		/>
-	{/if}
-</div>
+		<!-- metadata -->
 
-<style>
-	/* .wizard-nav {
-		@apply w-1/2 sm:w-1/4;
-	} */
+		{#if $flowStore}
+			{#if step === 1}
+				<FlowEditor
+					bind:pathError
+					bind:initialPath
+					bind:scheduleEnabled
+					bind:scheduleCron
+					bind:scheduleArgs
+				/>
+				<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!)' : ''}
 
-	.wizard-nav button {
-		max-height: 30px;
-	}</style>
+					<Icon data={faPlay} class="ml-2" />
+				</Button>
+				<div class={`relative h-screen w-1/3 ${previewOpen ? '' : 'hidden'}`}>
+					<div class="absolute top-0 h-full">
+						<div class="fixed border-l-2 right-0 h-screen w-1/3">
+							<FlowPreviewContent
+								bind:args={scheduleArgs}
+								on:close={() => (previewOpen = !previewOpen)}
+								on:change={(e) => {
+									previewResults.set(jobsToResults(e.detail))
+								}}
+							/>
+						</div>
+					</div>
+				</div>
+			{: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>
+</div>