windmill-components 1.85.0 → 1.87.0

package/components/FlowBuilder.svelte

@@ -1,339 +0,0 @@
-<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, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
-import { setContext } from 'svelte';
-import { writable } from 'svelte/store';
-import CenteredPage from './CenteredPage.svelte';
-import { Button, ButtonPopup, ButtonPopupItem, UndoRedo } from './common';
-import { dirtyStore } from './common/confirmationModal/dirtyStore';
-import { OFFSET } from './CronInput.svelte';
-import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte';
-import FlowEditor from './flows/FlowEditor.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';
-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, args, enabled } = $scheduleStore;
-    try {
-        await ScheduleService.createSchedule({
-            workspace: $workspaceStore,
-            requestBody: {
-                path: path,
-                schedule: formatCron(cron),
-                offset: OFFSET,
-                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, 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),
-                            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_id=${$workspaceStore}`);
-        }
-        else if (initialPath !== $flowStore.path) {
-            initialPath = $flowStore.path;
-            goto(`/flows/edit/${$flowStore.path}?workspace_id=${$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: '', 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 * * *',
-            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) {
-                $flowStore = redo(history);
-                event.preventDefault();
-            }
-            break;
-        case 'z':
-            if (event.ctrlKey) {
-                $flowStore = undo(history, $flowStore);
-                $selectedIdStore = 'Input';
-                event.preventDefault();
-            }
-            break;
-        case 's':
-            if (event.ctrlKey) {
-                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)
-    ];
-}
-</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 w-full items-center pl-2.5 pr-6 space-x-4 overflow-x-auto scrollbar-hidden max-h-12 h-full"
-		>
-			<div class="flex flex-row gap-4 items-center">
-				<FlowImportExportMenu />
-				<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-1 flex-row hidden md:flex shrink overflow-hidden">
-				{#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}
-				<Button
-					btnClasses="hidden lg:inline-flex"
-					startIcon={{ icon: faPen }}
-					variant="contained"
-					color="light"
-					size="xs"
-					on:click={async () => {
-						select('settings-metadata')
-						document.getElementById('path')?.focus()
-					}}
-				>
-					{$flowStore.path && $flowStore.path != '' ? $flowStore.path : 'Choose a path'}
-				</Button>
-				<Button
-					startIcon={{ icon: faPen }}
-					variant="contained"
-					color="light"
-					size="xs"
-					on:click={async () => {
-						select('settings-metadata')
-						document.getElementById('flow-summary')?.focus()
-					}}
-				>
-					<div class="max-w-[10em] !truncate">
-						{$flowStore.summary == '' || !$flowStore.summary ? 'No summary' : $flowStore.summary}
-					</div>
-				</Button>
-			</div>
-			<div class="flex flex-row space-x-2">
-				<FlowPreviewButtons />
-				<div class="center-center">
-					<ButtonPopup
-						loading={loadingSave}
-						size="sm"
-						startIcon={{ icon: faSave }}
-						on:click={() => saveFlow(false)}
-					>
-						<svelte:fragment slot="main">Save</svelte:fragment>
-						<ButtonPopupItem on:click={() => saveFlow(true)}>Save and exit</ButtonPopupItem>
-						{#if initialPath != ''}
-							<ButtonPopupItem
-								on:click={() => {
-									window.open(`/flows/add?template=${initialPath}`)
-								}}>Fork</ButtonPopupItem
-							>
-						{/if}
-					</ButtonPopup>
-				</div>
-			</div>
-		</div>
-
-		<!-- metadata -->
-		{#if $flowStateStore}
-			<FlowEditor {initialPath} {loading} />
-		{:else}
-			<CenteredPage>Loading...</CenteredPage>
-		{/if}
-	</div>
-{:else}
-	Flow Builder not available to operators
-{/if}

package/components/FlowGraphViewer.svelte

@@ -1,162 +0,0 @@
-<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;
-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
-			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/components/FlowGraphViewer.svelte.d.ts

@@ -1,24 +0,0 @@
-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;
-    };
-    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 {};

package/components/FlowPreviewContent.svelte

@@ -1,160 +0,0 @@
-<script>import { Job, JobService } from '../gen';
-import { workspaceStore } from '../stores';
-import { faClose, faPlay, faRefresh } from '@fortawesome/free-solid-svg-icons';
-import { Button, Kbd } from './common';
-import { createEventDispatcher, getContext } from 'svelte';
-import Icon from 'svelte-awesome';
-import { dfs } from './flows/flowStore';
-import { runFlowPreview } from './flows/utils';
-import SchemaForm from './SchemaForm.svelte';
-import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
-import FlowProgressBar from './flows/FlowProgressBar.svelte';
-import CapturePayload from './flows/content/CapturePayload.svelte';
-import { Loader2 } from 'lucide-svelte';
-let capturePayload;
-export let previewMode;
-export let open;
-export let jobId = undefined;
-export let job = undefined;
-let isRunning = false;
-let jobProgressReset;
-const { selectedId, previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
-const dispatch = createEventDispatcher();
-function sliceModules(modules, upTo, idOrders) {
-    return modules
-        .filter((x) => idOrders.indexOf(x.id) <= upTo)
-        .map((m) => {
-        if (m.value.type === 'forloopflow') {
-            m.value.modules = sliceModules(m.value.modules, upTo, idOrders);
-        }
-        else if (m.value.type === 'branchone') {
-            m.value.branches = m.value.branches.map((b) => {
-                b.modules = sliceModules(b.modules, upTo, idOrders);
-                return b;
-            });
-            m.value.default = sliceModules(m.value.default, upTo, idOrders);
-        }
-        else if (m.value.type === 'branchall') {
-            m.value.branches = m.value.branches.map((b) => {
-                b.modules = sliceModules(b.modules, upTo, idOrders);
-                return b;
-            });
-        }
-        return m;
-    });
-}
-function extractFlow(previewMode) {
-    if (previewMode === 'whole') {
-        return $flowStore;
-    }
-    else {
-        const flow = JSON.parse(JSON.stringify($flowStore));
-        const idOrders = dfs(flow.value.modules, (x) => x.id);
-        let upToIndex = idOrders.indexOf($selectedId);
-        if (upToIndex != -1) {
-            flow.value.modules = sliceModules(flow.value.modules, upToIndex, idOrders);
-        }
-        return flow;
-    }
-}
-export async function runPreview(args) {
-    jobProgressReset();
-    const newFlow = extractFlow(previewMode);
-    jobId = await runFlowPreview(args, newFlow);
-    isRunning = true;
-}
-function onKeyDown(event) {
-    if (open) {
-        switch (event.key) {
-            case 'Enter':
-                if (event.ctrlKey) {
-                    event.preventDefault();
-                    runPreview($previewArgs);
-                }
-                break;
-        }
-    }
-}
-$: if (job?.type === 'CompletedJob') {
-    isRunning = false;
-}
-</script>
-
-<CapturePayload bind:this={capturePayload} />
-
-<svelte:window on:keydown={onKeyDown} />
-
-<div class="flex divide-y flex-col space-y-2 h-screen bg-white px-6 py-2 w-full">
-	<div class="flex flex-row justify-between w-full items-center gap-x-2">
-		<div class="w-8">
-			<button
-				on:click={() => dispatch('close')}
-				class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
-			>
-				<Icon data={faClose} class="text-gray-500" />
-			</button>
-		</div>
-
-		{#if isRunning}
-			<Button
-				color="red"
-				on:click={async () => {
-					isRunning = false
-					try {
-						jobId &&
-							(await JobService.cancelQueuedJob({
-								workspace: $workspaceStore ?? '',
-								id: jobId,
-								requestBody: {}
-							}))
-					} catch {}
-					jobId = undefined
-				}}
-				size="md"
-				btnClasses="w-full max-w-lg"
-			>
-				<Loader2 class="animate-spin mr-2" />
-				Cancel
-			</Button>
-		{:else}
-			<Button
-				variant="contained"
-				startIcon={{ icon: isRunning ? faRefresh : faPlay }}
-				color="blue"
-				size="sm"
-				btnClasses="w-full max-w-lg"
-				on:click={() => runPreview($previewArgs)}
-			>
-				Test flow <Kbd class="ml-2">Ctrl+Enter</Kbd>
-			</Button>
-		{/if}
-		<Button
-			btnClasses="h-full truncate"
-			size="sm"
-			variant="border"
-			on:click={() => {
-				capturePayload.openDrawer()
-			}}>Fill args from a request</Button
-		>
-	</div>
-	<FlowProgressBar {job} bind:reset={jobProgressReset} />
-
-	<div class="overflow-y-auto grow divide-y divide-gray-600 pr-4">
-		<div class="max-h-1/2 overflow-auto border-b border-gray-700">
-			<SchemaForm
-				noVariablePicker
-				compact
-				class="py-4 max-w-3xl"
-				schema={$flowStore.schema}
-				bind:args={$previewArgs}
-			/>
-		</div>
-		<div class="pt-4 grow">
-			{#if jobId}
-				<FlowStatusViewer bind:flowState={$flowStateStore} {jobId} bind:job />
-			{:else}
-				<div class="italic text-gray-500 h-full grow"> Flow status will be displayed here </div>
-			{/if}
-		</div>
-	</div>
-</div>