windmill-components 1.60.4 → 1.75.0

package/components/flows/content/FlowSettings.svelte

@@ -1,19 +1,23 @@
 <script>import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TabContent from '../../common/tabs/TabContent.svelte';
-import { flowStore } from '../flowStore';
 import Path from '../../Path.svelte';
 import Required from '../../Required.svelte';
 import FlowCard from '../common/FlowCard.svelte';
 import FlowSchedules from './FlowSchedules.svelte';
 import Toggle from '../../Toggle.svelte';
 import { Alert } from '../../common';
-import { FlowGraph } from '../../graph';
 import { getContext } from 'svelte';
 import autosize from 'svelte-autosize';
-const { selectedId } = getContext('FlowEditorContext');
+import Slider from '../../Slider.svelte';
+import { page } from '$app/stores';
+import { workspaceStore } from '../../../stores';
+import { copyToClipboard } from '../../../utils';
+import { Icon } from 'svelte-awesome';
+import { faClipboard } from '@fortawesome/free-solid-svg-icons';
+const { selectedId, flowStore } = getContext('FlowEditorContext');
 export let initialPath;
-let topHeight = 0;
+$: url = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore?.path}`;
 </script>
 
 <div class="h-full overflow-hidden">
@@ -23,37 +27,79 @@ let topHeight = 0;
 				<Tab value="settings-metadata">Metadata</Tab>
 				<Tab value="settings-schedule">Schedule</Tab>
 				<Tab value="settings-same-worker">Shared Directory</Tab>
-				<Tab value="settings-graph">Graph</Tab>
 
 				<svelte:fragment slot="content">
-					<TabContent value="settings-metadata" class="p-4">
-						<Path bind:path={$flowStore.path} {initialPath} namePlaceholder="my_flow" kind="flow" />
+					<TabContent value="settings-metadata" class="p-4 h-full">
+						<div class="overflow-auto h-full">
+							<Path bind:path={$flowStore.path} {initialPath} namePlaceholder="flow" kind="flow" />
 
-						<label class="block my-4">
-							<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
-							<input
-								type="text"
-								bind:value={$flowStore.summary}
-								placeholder="A short summary of the flow displayed when the flow is listed"
-								id="flow-summary"
-							/>
-						</label>
-
-						<label class="block my-4" for="inp">
-							<span class="text-gray-700 text-sm">
-								Description
-								<Required required={false} />
-								<textarea
-									use:autosize
+							<label class="block my-4">
+								<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
+								<input
 									type="text"
-									class="text-sm"
-									id="inp"
-									bind:value={$flowStore.description}
-									placeholder="A description to help users understand what this flow does and how to use it."
-									rows="3"
+									bind:value={$flowStore.summary}
+									placeholder="Short summary to be displayed when listed"
+									id="flow-summary"
 								/>
-							</span>
-						</label>
+							</label>
+
+							<label class="block my-4" for="inp">
+								<span class="text-gray-700 text-sm">
+									Description
+									<Required required={false} />
+									<textarea
+										use:autosize
+										type="text"
+										class="text-sm"
+										id="inp"
+										bind:value={$flowStore.description}
+										placeholder="What this flow does and how to use it."
+										rows="3"
+									/>
+								</span>
+							</label>
+							<Slider text="How to trigger from external events?">
+								<div class="text-sm text-gray-600 border p-4">
+									There are 2 ways to trigger a flow based on external events:
+									<ul class="pt-4">
+										<li
+											>1. Send a webhook after each event: <a
+												on:click={(e) => {
+													e.preventDefault()
+													copyToClipboard(url)
+												}}
+												href={$page.url.protocol + '//' + url}
+												class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+											>
+												{url}
+												<span class="text-gray-700 ml-2">
+													<Icon data={faClipboard} />
+												</span>
+											</a>
+										</li>
+										<li class="mt-2">
+											<div class="flex flex-col gap-2">
+												<p>
+													2. Use a trigger script and schedule this flow to run as frequently as
+													needed and compare a state persisted in Windmill to the state of the
+													external system. If a difference is detected, then the rest of the flow is
+													triggered. Oftentimes, the second step of a flow is a for-loop that will
+													iterate over every elements. When using a trigger, a default schedule will
+													be created.
+												</p>
+												<div>
+													<img
+														class="shadow-lg border rounded"
+														alt="static button"
+														src="/trigger_button.png"
+													/>
+												</div>
+											</div>
+										</li></ul
+									>
+								</div>
+							</Slider>
+						</div>
 					</TabContent>
 					<TabContent value="settings-schedule" class="p-4">
 						<Alert type="info" title="Primary Schedule">
@@ -71,7 +117,7 @@ let topHeight = 0;
 							them to the next step. <br /><br />Beware that the `./shared` folder is not preserved
 							across suspends and sleeps.
 						</Alert>
-						<span class="my-2 text-sm font-bold">Shared Directoryr</span>
+						<span class="my-2 text-sm font-bold">Shared Directory</span>
 						<Toggle
 							bind:checked={$flowStore.value.same_worker}
 							options={{
@@ -79,26 +125,6 @@ let topHeight = 0;
 							}}
 						/>
 					</TabContent>
-					<TabContent value="settings-graph">
-						<div
-							bind:clientHeight={topHeight}
-							class="max-w-full w-full overflow-hidden h-screen bg-gray-50"
-						>
-							{#if $flowStore.value.modules}
-								<FlowGraph
-									on:click={(e) => {
-										if (e.detail.id) {
-											$selectedId = e.detail.id
-										}
-									}}
-									minHeight={topHeight}
-									modules={$flowStore.value.modules}
-									failureModule={$flowStore.value.failure_module}
-									notSelectable
-								/>
-							{/if}
-						</div>
-					</TabContent>
 				</svelte:fragment>
 			</Tabs>
 		</div>

package/components/flows/content/ScriptEditorDrawer.svelte

@@ -0,0 +1,98 @@
+<script>import { Button, Drawer, DrawerContent } from '../../common';
+import ScriptEditor from '../../ScriptEditor.svelte';
+import { ScriptService } from '../../../gen';
+import { inferArgs } from '../../../infer';
+import { workspaceStore } from '../../../stores';
+import { emptySchema, getScriptByPath, sendUserToast } from '../../../utils';
+import { faSave } from '@fortawesome/free-solid-svg-icons';
+import { Loader2 } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
+let scriptEditorDrawer;
+const dispatch = createEventDispatcher();
+export async function openDrawer(hash, cb) {
+    script = undefined;
+    scriptEditorDrawer.openDrawer?.();
+    script = await ScriptService.getScriptByHash({
+        workspace: $workspaceStore,
+        hash
+    });
+    callback = cb;
+}
+let callback = undefined;
+let script = undefined;
+async function saveScript() {
+    if (script) {
+        try {
+            script.schema = script.schema ?? emptySchema();
+            try {
+                await inferArgs(script.language, script.content, script.schema);
+            }
+            catch (error) {
+                sendUserToast(`Impossible to infer the schema. Assuming this is a script without main function`, true);
+            }
+            await ScriptService.createScript({
+                workspace: $workspaceStore,
+                requestBody: {
+                    path: script.path,
+                    summary: script.summary,
+                    description: script.description ?? '',
+                    content: script.content,
+                    parent_hash: script.hash != '' ? script.hash : undefined,
+                    schema: script.schema,
+                    is_template: false,
+                    language: script.language,
+                    kind: script.kind
+                }
+            });
+            callback?.();
+        }
+        catch (error) {
+            sendUserToast(`Impossible to save the script: ${error.body}`, true);
+        }
+    }
+}
+</script>
+
+<Drawer bind:this={scriptEditorDrawer} size="1200px">
+	<DrawerContent
+		title="Script Editor"
+		noPadding
+		forceOverflowVisible
+		on:close={() => {
+			scriptEditorDrawer.closeDrawer()
+		}}
+	>
+		{#if script}
+			{#key script.hash}
+				<ScriptEditor
+					noSyncFromGithub
+					lang={script.language}
+					path={script.path}
+					fixedOverflowWidgets={false}
+					bind:code={script.content}
+					bind:schema={script.schema}
+				/>
+			{/key}
+		{:else}
+			<div
+				out:fade={{ duration: 200 }}
+				class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+			>
+				<Loader2 class="animate-spin" size={16} />
+				<span class="text-xs mt-1">Loading</span>
+			</div>
+		{/if}
+		<svelte:fragment slot="actions">
+			<Button
+				on:click={async () => {
+					await saveScript()
+					dispatch('save')
+					scriptEditorDrawer.closeDrawer()
+				}}
+				disabled={!script}
+				startIcon={{ icon: faSave }}>Save</Button
+			>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>

package/components/flows/content/ScriptEditorDrawer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        openDrawer?: ((hash: string, cb: () => void) => Promise<void>) | undefined;
+    };
+    events: {
+        save: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptEditorDrawerProps = typeof __propDef.props;
+export type ScriptEditorDrawerEvents = typeof __propDef.events;
+export type ScriptEditorDrawerSlots = typeof __propDef.slots;
+export default class ScriptEditorDrawer extends SvelteComponentTyped<ScriptEditorDrawerProps, ScriptEditorDrawerEvents, ScriptEditorDrawerSlots> {
+    get openDrawer(): (hash: string, cb: () => void) => Promise<void>;
+}
+export {};

package/components/flows/flowState.d.ts

@@ -1,5 +1,6 @@
 import type { Schema } from '../../common';
 import type { Flow } from '../../gen';
+import type { Writable } from 'svelte/store';
 export type FlowModuleState = {
     schema: Schema;
     previewResult?: any;
@@ -11,5 +12,4 @@ export type FlowState = Record<string, FlowModuleState>;
  * It contains data loaded that are not contained in a Flow object i.e. schemas.
  * We also hold the data of the results of a test job, ran by the user.
  */
-export declare const flowStateStore: import("svelte/store").Writable<FlowState>;
-export declare function initFlowState(flow: Flow): Promise<void>;
+export declare function initFlowState(flow: Flow, flowStateStore: Writable<FlowState>): Promise<void>;

package/components/flows/flowState.js

@@ -1,4 +1,3 @@
-import { writable } from 'svelte/store';
 import { loadFlowModuleState } from './flowStateUtils';
 import { emptyFlowModuleState } from './utils';
 /**
@@ -6,8 +5,7 @@ import { emptyFlowModuleState } from './utils';
  * It contains data loaded that are not contained in a Flow object i.e. schemas.
  * We also hold the data of the results of a test job, ran by the user.
  */
-export const flowStateStore = writable({});
-export async function initFlowState(flow) {
+export async function initFlowState(flow, flowStateStore) {
     const modulesState = {};
     await mapFlowModules(flow.value.modules, modulesState);
     const failureModule = flow.value.failure_module

package/components/flows/flowStateUtils.d.ts

@@ -1,11 +1,12 @@
 import type { Schema } from '../../common';
-import { Script, type FlowModule, type PathFlow, type PathScript, type RawScript } from '../../gen';
-import { type FlowModuleState } from './flowState';
+import { Script, type Flow, type FlowModule, type PathFlow, type PathScript, type RawScript } from '../../gen';
+import { type Writable } from 'svelte/store';
+import type { FlowModuleState, FlowState } from './flowState';
 import { Mutex } from 'async-mutex';
 export declare function loadFlowModuleState(flowModule: FlowModule): Promise<FlowModuleState>;
 export declare const idMutex: Mutex;
 export declare function getNextId(currentKeys: string[]): string;
-export declare function nextId(): string;
+export declare function nextId(flowState: FlowState): string;
 export declare function pickScript(path: string, summary: string, id: string, hash?: string): Promise<[FlowModule & {
     value: PathScript;
 }, FlowModuleState]>;
@@ -20,8 +21,8 @@ export declare function createFlow(id: string): Promise<[FlowModule, FlowModuleS
 export declare function fork(flowModule: FlowModule): Promise<[FlowModule & {
     value: RawScript;
 }, FlowModuleState]>;
-export declare function emptyModule(flow?: boolean): FlowModule;
-export declare function createScriptFromInlineScript(flowModule: FlowModule, suffix: string, schema: Schema): Promise<[FlowModule & {
+export declare function emptyModule(flowState: FlowState, flow?: boolean): FlowModule;
+export declare function createScriptFromInlineScript(flowModule: FlowModule, suffix: string, schema: Schema, flow: Flow): Promise<[FlowModule & {
     value: PathScript;
 }, FlowModuleState]>;
-export declare function deleteFlowStateById(id: string): void;
+export declare function deleteFlowStateById(id: string, flowStateStore: Writable<FlowState>): void;

package/components/flows/flowStateUtils.js

@@ -3,14 +3,14 @@ import { initialCode } from '../../script_helpers';
 import { userStore, workspaceStore } from '../../stores';
 import { getScriptByPath } from '../../utils';
 import { get } from 'svelte/store';
-import { flowStateStore } from './flowState';
-import { flowStore } from './flowStore';
 import { charsToNumber, emptyFlowModuleState, findNextAvailablePath, loadSchemaFromModule, NEVER_TESTED_THIS_FAR, numberToChars } from './utils';
 import { Mutex } from 'async-mutex';
 export async function loadFlowModuleState(flowModule) {
     try {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
-        if (flowModule.value.type == 'script' || flowModule.value.type == 'rawscript' || flowModule.value.type == 'flow') {
+        if (flowModule.value.type == 'script' ||
+            flowModule.value.type == 'rawscript' ||
+            flowModule.value.type == 'flow') {
             flowModule.value.input_transforms = input_transforms;
         }
         return { schema, previewResult: NEVER_TESTED_THIS_FAR };
@@ -34,8 +34,7 @@ export function getNextId(currentKeys) {
     return numberToChars(max);
 }
 // Computes the next available id
-export function nextId() {
-    const flowState = get(flowStateStore);
+export function nextId(flowState) {
     const max = Object.keys(flowState).reduce((acc, key) => {
         if (key === 'failure' || key.includes('branch') || key.includes('loop')) {
             return acc;
@@ -115,7 +114,7 @@ export async function createFlow(id) {
         value: {
             type: 'flow',
             path: '',
-            input_transforms: {},
+            input_transforms: {}
         },
         summary: ''
     };
@@ -143,14 +142,13 @@ async function createInlineScriptModuleFromPath(path, id) {
         }
     };
 }
-export function emptyModule(flow) {
+export function emptyModule(flowState, flow) {
     return {
-        id: nextId(),
+        id: nextId(flowState),
         value: { type: 'identity', flow }
     };
 }
-export async function createScriptFromInlineScript(flowModule, suffix, schema) {
-    const flow = get(flowStore);
+export async function createScriptFromInlineScript(flowModule, suffix, schema, flow) {
     const user = get(userStore);
     if (flowModule.value.type != 'rawscript') {
         throw new Error("Can't create script from non-inline script");
@@ -180,7 +178,7 @@ export async function createScriptFromInlineScript(flowModule, suffix, schema) {
     });
     return pickScript(availablePath, flowModule.summary ?? '', flowModule.id, hash);
 }
-export function deleteFlowStateById(id) {
+export function deleteFlowStateById(id, flowStateStore) {
     flowStateStore.update((fss) => {
         delete fss[id];
         return fss;

package/components/flows/flowStore.d.ts

@@ -1,6 +1,8 @@
 import type { Flow, FlowModule } from '../../gen';
+import { type Writable } from 'svelte/store';
+import { type FlowState } from './flowState';
 export type FlowMode = 'push' | 'pull';
-export declare const flowStore: import("svelte/store").Writable<Flow>;
+export declare const importFlowStore: Writable<Flow | undefined>;
 export declare function dfs<T>(modules: FlowModule[], f: (x: FlowModule) => T): T[];
-export declare function initFlow(flow: Flow): Promise<void>;
-export declare function copyFirstStepSchema(): Promise<void>;
+export declare function initFlow(flow: Flow, flowStore: Writable<Flow>, flowStateStore: Writable<FlowState>): Promise<void>;
+export declare function copyFirstStepSchema(flowState: FlowState, flowStore: Writable<Flow>): Promise<void>;

package/components/flows/flowStore.js

@@ -1,16 +1,7 @@
-import { sendUserToast } from '../../utils';
-import { get, writable, derived } from 'svelte/store';
-import { flowStateStore, initFlowState } from './flowState';
+import { get, writable } from 'svelte/store';
+import { initFlowState } from './flowState';
 import { numberToChars } from './utils';
-export const flowStore = writable({
-    summary: '',
-    value: { modules: [] },
-    path: '',
-    edited_at: '',
-    edited_by: '',
-    archived: false,
-    extra_perms: {}
-});
+export const importFlowStore = writable(undefined);
 export function dfs(modules, f) {
     let result = [];
     for (const module of modules) {
@@ -32,7 +23,7 @@ export function dfs(modules, f) {
     }
     return result;
 }
-export async function initFlow(flow) {
+export async function initFlow(flow, flowStore, flowStateStore) {
     let counter = 0;
     for (const mod of flow.value.modules) {
         migrateFlowModule(mod);
@@ -46,7 +37,7 @@ export async function initFlow(flow) {
             flowVal.modules.forEach(migrateFlowModule);
         }
     }
-    await initFlowState(flow);
+    await initFlowState(flow, flowStateStore);
     flowStore.set(flow);
     function migrateFlowModule(mod) {
         if (mod.id == undefined) {
@@ -74,8 +65,7 @@ export async function initFlow(flow) {
         }
     }
 }
-export async function copyFirstStepSchema() {
-    const flowState = get(flowStateStore);
+export async function copyFirstStepSchema(flowState, flowStore) {
     flowStore.update((flow) => {
         const firstModuleId = flow.value.modules[0]?.id;
         if (flowState[firstModuleId] && firstModuleId) {
@@ -92,5 +82,4 @@ export async function copyFirstStepSchema() {
         }
         return flow;
     });
-    sendUserToast('Copied first step schema as flow input schema');
 }

package/components/flows/header/FlowImportExportMenu.svelte

@@ -2,10 +2,11 @@
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import FlowViewer from '../../FlowViewer.svelte';
 import { faFileExport } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
 import Icon from 'svelte-awesome';
 import { Button } from '../../common';
-import { flowStore } from '../flowStore';
 import { cleanInputs } from '../utils';
+const { flowStore } = getContext('FlowEditorContext');
 let jsonViewerDrawer;
 </script>
 

package/components/flows/map/FlowConstantsItem.svelte

@@ -1,11 +1,11 @@
 <script>import { getContext } from 'svelte';
 import { classNames } from '../../../utils';
 import { DollarSign } from 'lucide-svelte';
-const { select, selectedId } = getContext('FlowEditorContext');
+const { selectedId } = getContext('FlowEditorContext');
 $: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId == 'constants' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
 </script>
 
-<button on:click={() => select('constants')} class={settingsClass}>
+<button on:click={() => ($selectedId = 'constants')} class={settingsClass}>
 	<DollarSign size={16} />
 	<span class="text-xs flex flex-row justify-between w-full gap-2 items-center truncate ml-1">
 		All Static Inputs

package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -2,16 +2,14 @@
 import Icon from 'svelte-awesome';
 import { faBug } from '@fortawesome/free-solid-svg-icons';
 import { classNames, emptySchema } from '../../../utils';
-import { flowStateStore } from '../flowState';
 import Toggle from '../../Toggle.svelte';
-import { flowStore } from '../flowStore';
 import { NEVER_TESTED_THIS_FAR } from '../utils';
-const { select, selectedId } = getContext('FlowEditorContext');
+const { selectedId, flowStateStore, flowStore } = getContext('FlowEditorContext');
 function onToggle() {
     if ($flowStore?.value?.failure_module) {
         $flowStore.value.failure_module = undefined;
         // By default, we return to settings when disabling the failure module
-        select('settings-metadata');
+        $selectedId = 'settings-metadata';
     }
     else {
         const failureModule = {
@@ -23,7 +21,7 @@ function onToggle() {
             id: 'failure',
             value: { type: 'identity' }
         };
-        select('failure');
+        $selectedId = 'failure';
     }
 }
 </script>
@@ -32,34 +30,35 @@ function onToggle() {
 <div
 	on:click={() => {
 		if ($flowStore?.value?.failure_module) {
-			select('failure')
+			$selectedId = 'failure'
 		} else {
 			onToggle()
 		}
 	}}
 	class={classNames(
-		'border rounded-sm px-2 py-1 bg-white text-sm border-gray-400 cursor-pointer flex flex-col overflow-x-hidden ',
+		'border mx-auto rounded-sm px-2 py-1 bg-white text-sm border-gray-400 cursor-pointer flex justify-between items-center flex-row overflow-x-hidden ',
 		$selectedId?.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
 	)}
+	style="min-width: 275px"
 >
 	<div class=" flex justify-between items-center flex-wrap">
 		<div>
 			<Icon data={faBug} class="mr-2" />
 			<span class="font-bold text-xs">Error handler</span>
 		</div>
-		<div class="-my-1">
-			<Toggle checked={Boolean($flowStore?.value?.failure_module)} on:change={onToggle} />
-		</div>
 	</div>
 
-	<div class="w-full truncate block">
+	<div class=" items-center truncate flex text-xs">
 		{#if Boolean($flowStore?.value?.failure_module)}
 			<span>
 				{$flowStore.value.failure_module?.summary ||
 					($flowStore.value.failure_module?.value.type === 'rawscript'
-						? `Inline ${$flowStore.value.failure_module?.value.language}`
-						: 'Select a script')}
+						? `${$flowStore.value.failure_module?.value.language}`
+						: 'TBD')}
 			</span>
 		{/if}
 	</div>
+	<div class="-my-1">
+		<Toggle checked={Boolean($flowStore?.value?.failure_module)} on:change={onToggle} />
+	</div>
 </div>

package/components/flows/map/FlowInputsItem.svelte

@@ -2,12 +2,11 @@
 import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
 import Icon from 'svelte-awesome';
 import { faFlagCheckered } from '@fortawesome/free-solid-svg-icons';
-const { select, selectedId } = getContext('FlowEditorContext');
+const { selectedId } = getContext('FlowEditorContext');
 </script>
 
 <FlowModuleSchemaItem
-	on:click={() => select('inputs')}
-	hasLine
+	on:click={() => ($selectedId = 'inputs')}
 	selected={$selectedId === 'inputs'}
 	bold
 	label="Flow Input"