windmill-components 1.85.0 → 1.87.0

package/dist/components/FlowBuilder.svelte

@@ -0,0 +1,360 @@
+<script>import { goto } from '$app/navigation';
+import { FlowService, ScheduleService } from '../gen';
+import { initHistory, redo, undo } from '../history';
+import { userStore, workspaceStore } from '../stores';
+import { encodeState, formatCron, loadHubScripts, sendUserToast } from '../utils';
+import { faCalendarAlt, faSave } from '@fortawesome/free-solid-svg-icons';
+import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import CenteredPage from './CenteredPage.svelte';
+import { Badge, Button, UndoRedo } from './common';
+import { dirtyStore } from './common/confirmationModal/dirtyStore';
+import FlowEditor from './flows/FlowEditor.svelte';
+import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte';
+import { dfs } 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';
+import { Pen } from 'lucide-svelte';
+export let initialPath = '';
+export let selectedId;
+export let initialArgs = {};
+export let loading = false;
+export let flowStore;
+export let flowStateStore;
+async function createSchedule(path) {
+    const { cron, timezone, args, enabled } = $scheduleStore;
+    try {
+        await ScheduleService.createSchedule({
+            workspace: $workspaceStore,
+            requestBody: {
+                path: path,
+                schedule: formatCron(cron),
+                timezone,
+                script_path: path,
+                is_flow: true,
+                args,
+                enabled
+            }
+        });
+    }
+    catch (err) {
+        sendUserToast(`The primary schedule could not be created: ${err}`, true);
+    }
+}
+let loadingSave = false;
+async function saveFlow(leave) {
+    loadingSave = true;
+    try {
+        const flow = cleanInputs($flowStore);
+        const { cron, timezone, args, enabled } = $scheduleStore;
+        $dirtyStore = false;
+        if (initialPath === '') {
+            localStorage.removeItem('flow');
+            await FlowService.createFlow({
+                workspace: $workspaceStore,
+                requestBody: {
+                    path: flow.path,
+                    summary: flow.summary,
+                    description: flow.description ?? '',
+                    value: flow.value,
+                    schema: flow.schema
+                }
+            });
+            if (enabled) {
+                await createSchedule(flow.path);
+            }
+        }
+        else {
+            localStorage.removeItem(`flow-${initialPath}`);
+            await FlowService.updateFlow({
+                workspace: $workspaceStore,
+                path: initialPath,
+                requestBody: {
+                    path: flow.path,
+                    summary: flow.summary,
+                    description: flow.description ?? '',
+                    value: flow.value,
+                    schema: flow.schema
+                }
+            });
+            const scheduleExists = await ScheduleService.existsSchedule({
+                workspace: $workspaceStore ?? '',
+                path: flow.path
+            });
+            if (scheduleExists) {
+                const schedule = await ScheduleService.getSchedule({
+                    workspace: $workspaceStore ?? '',
+                    path: flow.path
+                });
+                if (JSON.stringify(schedule.args) != JSON.stringify(args) || schedule.schedule != cron) {
+                    await ScheduleService.updateSchedule({
+                        workspace: $workspaceStore ?? '',
+                        path: flow.path,
+                        requestBody: {
+                            schedule: formatCron(cron),
+                            timezone,
+                            args
+                        }
+                    });
+                }
+                if (enabled != schedule.enabled) {
+                    await ScheduleService.setScheduleEnabled({
+                        workspace: $workspaceStore ?? '',
+                        path: flow.path,
+                        requestBody: { enabled }
+                    });
+                }
+            }
+            else if (enabled) {
+                await createSchedule(flow.path);
+            }
+        }
+        loadingSave = false;
+        if (leave) {
+            goto(`/flows/get/${$flowStore.path}?workspace=${$workspaceStore}`);
+        }
+        else if (initialPath !== $flowStore.path) {
+            initialPath = $flowStore.path;
+            goto(`/flows/edit/${$flowStore.path}?workspace=${$workspaceStore}`);
+        }
+    }
+    catch (err) {
+        sendUserToast(`The flow could not be saved: ${err.body}`, true);
+        loadingSave = false;
+    }
+}
+let timeout = undefined;
+$: {
+    if ($flowStore || $selectedIdStore) {
+        saveDraft();
+    }
+}
+function saveDraft() {
+    timeout && clearTimeout(timeout);
+    timeout = setTimeout(() => {
+        try {
+            localStorage.setItem(initialPath ? `flow-${initialPath}` : 'flow', encodeState({
+                flow: $flowStore,
+                selectedId: $selectedIdStore
+            }));
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }, 500);
+}
+const selectedIdStore = writable(selectedId ?? 'settings-metadata');
+const scheduleStore = writable({
+    args: {},
+    cron: '',
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    enabled: false
+});
+const previewArgsStore = writable(initialArgs);
+const scriptEditorDrawer = writable(undefined);
+const moving = writable(undefined);
+const history = initHistory($flowStore);
+const testStepStore = writable({});
+function select(selectedId) {
+    selectedIdStore.set(selectedId);
+}
+setContext('FlowEditorContext', {
+    selectedId: selectedIdStore,
+    schedule: scheduleStore,
+    previewArgs: previewArgsStore,
+    scriptEditorDrawer,
+    moving,
+    history,
+    flowStateStore,
+    flowStore,
+    testStepStore
+});
+async function loadSchedule() {
+    loadFlowSchedule(initialPath, $workspaceStore)
+        .then((schedule) => {
+        scheduleStore.set(schedule);
+    })
+        .catch(() => {
+        scheduleStore.set({
+            cron: '0 */5 * * *',
+            timezone: 'UTC',
+            args: {},
+            enabled: false
+        });
+    });
+}
+$: selectedId && select(selectedId);
+$: initialPath && $workspaceStore && loadSchedule();
+loadHubScripts();
+function onKeyDown(event) {
+    let classes = event.target?.['className'];
+    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        return;
+    }
+    switch (event.key) {
+        case 'Z':
+            if (event.ctrlKey || event.metaKey) {
+                $flowStore = redo(history);
+                event.preventDefault();
+            }
+            break;
+        case 'z':
+            if (event.ctrlKey || event.metaKey) {
+                $flowStore = undo(history, $flowStore);
+                $selectedIdStore = 'Input';
+                event.preventDefault();
+            }
+            break;
+        case 's':
+            if (event.ctrlKey || event.metaKey) {
+                saveFlow(false);
+                event.preventDefault();
+            }
+            break;
+        case 'ArrowDown': {
+            let ids = generateIds();
+            let idx = ids.indexOf($selectedIdStore);
+            if (idx > -1 && idx < ids.length - 1) {
+                $selectedIdStore = ids[idx + 1];
+                event.preventDefault();
+            }
+            break;
+        }
+        case 'ArrowUp': {
+            let ids = generateIds();
+            let idx = ids.indexOf($selectedIdStore);
+            if (idx > 0 && idx < ids.length) {
+                $selectedIdStore = ids[idx - 1];
+                event.preventDefault();
+            }
+            break;
+        }
+    }
+}
+function generateIds() {
+    return [
+        'settings-metadata',
+        'constants',
+        ...dfs($flowStore.value.modules, (module) => module.id)
+    ];
+}
+const dropdownItems = [
+    {
+        label: 'Save and exit',
+        onClick: () => saveFlow(true)
+    }
+];
+if (initialPath != '') {
+    dropdownItems.push({
+        label: 'Fork',
+        onClick: () => window.open(`/flows/add?template=${initialPath}`)
+    });
+}
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+{#if !$userStore?.operator}
+	<ScriptEditorDrawer bind:this={$scriptEditorDrawer} />
+
+	<div class="flex flex-col flex-1 h-screen">
+		<!-- Nav between steps-->
+		<div
+			class="justify-between flex flex-row items-center pl-2.5 pr-6 space-x-4 scrollbar-hidden max-h-12 h-full"
+		>
+			<div class="flex w-full max-w-md gap-4 items-center">
+				<div class="min-w-64 w-full">
+					<input
+						type="text"
+						placeholder="Flow summary"
+						class="text-sm w-full font-semibold"
+						bind:value={$flowStore.summary}
+					/>
+				</div>
+				<UndoRedo
+					undoProps={{ disabled: $history.index === 0 }}
+					redoProps={{ disabled: $history.index === $history.history.length - 1 }}
+					on:undo={() => {
+						$flowStore = undo(history, $flowStore)
+						$selectedIdStore = 'Input'
+					}}
+					on:redo={() => {
+						$flowStore = redo(history)
+					}}
+				/>
+			</div>
+
+			<div class="gap-4 flex-row hidden md:flex w-full max-w-md">
+				{#if $scheduleStore.enabled}
+					<Button
+						btnClasses="hidden lg:inline-flex"
+						startIcon={{ icon: faCalendarAlt }}
+						variant="contained"
+						color="light"
+						size="xs"
+						on:click={async () => {
+							select('settings-schedule')
+						}}
+					>
+						{$scheduleStore.cron ?? ''}
+					</Button>
+				{/if}
+				<div class="flex justify-start w-full">
+					<div>
+						<button
+							on:click={async () => {
+								select('settings-metadata')
+								document.getElementById('path')?.focus()
+							}}
+						>
+							<Badge
+								color="gray"
+								class="center-center !bg-gray-300 !text-gray-600 !h-[28px]  !w-[70px] rounded-r-none"
+							>
+								<Pen size={12} class="mr-2" /> Path
+							</Badge>
+						</button>
+					</div>
+					<input
+						type="text"
+						readonly
+						value={$flowStore.path && $flowStore.path != '' ? $flowStore.path : 'Choose a path'}
+						class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none"
+						on:focus={({ currentTarget }) => {
+							currentTarget.select()
+						}}
+					/>
+				</div>
+			</div>
+			<div class="flex flex-row space-x-2">
+				<FlowImportExportMenu />
+
+				<FlowPreviewButtons />
+				<div class="center-center">
+					<Button
+						title="Ctrl/Cmd + S"
+						loading={loadingSave}
+						size="xs"
+						startIcon={{ icon: faSave }}
+						on:click={() => saveFlow(false)}
+						{dropdownItems}
+					>
+						Save
+					</Button>
+				</div>
+			</div>
+		</div>
+
+		<!-- metadata -->
+		{#if $flowStateStore}
+			<FlowEditor {initialPath} {loading} />
+		{:else}
+			<CenteredPage>Loading...</CenteredPage>
+		{/if}
+	</div>
+{:else}
+	Flow Builder not available to operators
+{/if}

package/dist/components/FlowGraphViewer.svelte

@@ -0,0 +1,164 @@
+<script>import { FlowGraph } from './graph';
+import HighlightCode from './HighlightCode.svelte';
+import InputTransformsViewer from './InputTransformsViewer.svelte';
+import IconedPath from './IconedPath.svelte';
+import { scriptPathToHref } from '../utils';
+import { Drawer, DrawerContent } from './common';
+import { Highlight } from 'svelte-highlight';
+import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
+import typescript from 'svelte-highlight/languages/typescript';
+import { cleanExpr } from './flows/utils';
+import FlowPathViewer from './flows/content/FlowPathViewer.svelte';
+import SchemaViewer from './SchemaViewer.svelte';
+export let flow;
+export let overflowAuto = false;
+export let noSide = false;
+export let download = false;
+let stepDetail = undefined;
+let codeViewer;
+</script>
+
+<Drawer bind:this={codeViewer} size="900px">
+	<DrawerContent title={'Expanded Code'} on:close={codeViewer.closeDrawer}>
+		{#if stepDetail && typeof stepDetail != 'string'}
+			{#if stepDetail.value.type == 'script'}
+				<div class="mb-4">
+					<a
+						rel="noreferrer"
+						target="_blank"
+						href={scriptPathToHref(stepDetail?.value?.path ?? '')}
+						class=""
+					>
+						<IconedPath path={stepDetail?.value?.path ?? ''} />
+					</a>
+				</div>
+				<div class="text-2xs mb-4">
+					<h3 class="mb-2">Step Inputs</h3>
+					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
+				</div>
+				{#if stepDetail.value.path.startsWith('hub/')}
+					<div class="mt-6">
+						<h3>Code</h3>
+						<iframe
+							class="w-full h-full text-sm"
+							title="embedded script from hub"
+							frameborder="0"
+							src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"
+						/>
+					</div>
+				{/if}
+			{:else if stepDetail.value.type == 'rawscript'}
+				<div class="text-2xs mb-4">
+					<h3 class="mb-2">Step Inputs</h3>
+					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
+				</div>
+
+				<h3 class="mb-2">Code</h3>
+				<span class="!text-xs">
+					<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
+				</span>
+			{/if}
+		{/if}
+	</DrawerContent>
+</Drawer>
+<div class="grid grid-cols-3 w-full">
+	<div
+		class="{noSide
+			? 'col-span-3'
+			: 'sm:col-span-2 col-span-3'} w-full border border-gray-400 max-h-screen"
+		class:overflow-auto={overflowAuto}
+	>
+		<FlowGraph
+			{download}
+			minHeight={400}
+			modules={flow?.value?.modules}
+			failureModule={flow?.value?.failure_module}
+			on:select={(e) => (stepDetail = e.detail)}
+		/>
+	</div>
+	{#if !noSide}
+		<div
+			class="w-full border-r border-b border-t border-gray-400 min-h-[150px] p-2 overflow-auto hidden sm:block"
+		>
+			{#if stepDetail == undefined}
+				<SchemaViewer schema={flow?.schema} />
+
+				<span class="font-black text-lg w-full my-4 mt-14">
+					<span>Click on a step to see its details</span>
+				</span>
+			{:else if stepDetail == 'Input'}
+				<SchemaViewer schema={flow?.schema} />
+			{:else if stepDetail == 'Result'}
+				End of the flow
+			{:else if typeof stepDetail != 'string' && stepDetail.value}
+				<div class="font-black text-lg w-full mb-6"
+					>Step {stepDetail.id ?? ''}<span class="ml-2 font-normal">{stepDetail.summary || ''}</span
+					></div
+				>
+				{#if stepDetail.value.type == 'identity'}
+					<div> An identity step return as output its input </div>
+				{:else if stepDetail.value.type == 'rawscript'}
+					<div class="text-2xs mb-4">
+						<h3 class="mb-2">Step Inputs</h3>
+						<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
+					</div>
+
+					<h3 class="mb-2"
+						>Code &nbsp; <button class="text-gray-600 text-xs" on:click={codeViewer.openDrawer}
+							>Expand</button
+						>
+					</h3>
+					<span class="!text-xs">
+						<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
+					</span>
+				{:else if stepDetail.value.type == 'script'}
+					<div class="mb-4">
+						<a
+							rel="noreferrer"
+							target="_blank"
+							href={scriptPathToHref(stepDetail?.value?.path ?? '')}
+							class=""
+						>
+							<IconedPath path={stepDetail?.value?.path ?? ''} />
+						</a>
+					</div>
+					<div class="text-2xs mb-4">
+						<h3 class="mb-2">Step Inputs</h3>
+						<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
+					</div>
+					{#if stepDetail.value.path.startsWith('hub/')}
+						<div class="mt-6">
+							<h3
+								>Code&nbsp; <button class="text-gray-600 text-xs" on:click={codeViewer.openDrawer}
+									>Expand</button
+								>
+							</h3>
+							<iframe
+								class="w-full h-full text-sm"
+								title="embedded script from hub"
+								frameborder="0"
+								src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"
+							/>
+						</div>
+					{/if}
+				{:else if stepDetail.value.type == 'forloopflow'}
+					<p
+						>For loop with iterator: {#if stepDetail.value.iterator.type == 'static'}<ObjectViewer
+								json={stepDetail.value.iterator.value}
+							/>{:else}
+							<span class="text-xs">
+								<Highlight language={typescript} code={cleanExpr(stepDetail.value.iterator.expr)} />
+							</span>
+						{/if}</p
+					>
+				{:else if stepDetail.value.type == 'branchall'}
+					<p>Run all branches</p>
+				{:else if stepDetail.value.type == 'branchone'}
+					<p>Run one branch based on a predicate</p>
+				{:else if stepDetail.value.type == 'flow'}
+					<FlowPathViewer noSide path={stepDetail.value.path} />
+				{/if}
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/components/FlowGraphViewer.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowValue } from '../gen';
+declare const __propDef: {
+    props: {
+        flow: {
+            summary: string;
+            description?: string;
+            value: FlowValue;
+            schema?: any;
+        };
+        overflowAuto?: boolean | undefined;
+        noSide?: boolean | undefined;
+        download?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowGraphViewerProps = typeof __propDef.props;
+export type FlowGraphViewerEvents = typeof __propDef.events;
+export type FlowGraphViewerSlots = typeof __propDef.slots;
+export default class FlowGraphViewer extends SvelteComponentTyped<FlowGraphViewerProps, FlowGraphViewerEvents, FlowGraphViewerSlots> {
+}
+export {};