windmill-components 1.89.0 → 1.103.0

package/dist/components/FlowBuilder.svelte

@@ -1,360 +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, 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/FlowBuilder.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { type Flow } from '../gen';
-import { type Writable } from 'svelte/store';
-import type { FlowState } from './flows/flowState';
-declare const __propDef: {
-    props: {
-        initialPath?: string | undefined;
-        selectedId: string | undefined;
-        initialArgs?: Record<string, any> | undefined;
-        loading?: boolean | undefined;
-        flowStore: Writable<Flow>;
-        flowStateStore: Writable<FlowState>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FlowBuilderProps = typeof __propDef.props;
-export type FlowBuilderEvents = typeof __propDef.events;
-export type FlowBuilderSlots = typeof __propDef.slots;
-export default class FlowBuilder extends SvelteComponentTyped<FlowBuilderProps, FlowBuilderEvents, FlowBuilderSlots> {
-}
-export {};

package/dist/components/FlowGraphViewer.svelte

@@ -1,164 +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;
-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

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

package/dist/components/FlowJobResult.svelte

@@ -1,29 +0,0 @@
-<script>import { Loader2 } from 'lucide-svelte';
-import DisplayResult from './DisplayResult.svelte';
-import LogViewer from './LogViewer.svelte';
-export let result;
-export let logs;
-export let col = false;
-export let noBorder = false;
-export let loading;
-export let filename = undefined;
-</script>
-
-<div
-	class:border={!noBorder}
-	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow  border-gray-400 h-full max-h-screen"
->
-	<div class="bg-white {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
-		<span class="text-gray-500">Result</span>
-		{#if result}
-			<DisplayResult {filename} {result} />
-		{:else if loading}
-			<Loader2 class="animate-spin" />
-		{:else}
-			<div class="text-gray-400">No result (result is undefined)</div>
-		{/if}
-	</div>
-	<div class="overflow-auto {col ? '' : 'max-h-80'} h-full relative">
-		<LogViewer content={logs ?? ''} isLoading={false} />
-	</div>
-</div>

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

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        result: any;
-        logs: string;
-        col?: boolean | undefined;
-        noBorder?: boolean | undefined;
-        loading: any;
-        filename?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FlowJobResultProps = typeof __propDef.props;
-export type FlowJobResultEvents = typeof __propDef.events;
-export type FlowJobResultSlots = typeof __propDef.slots;
-export default class FlowJobResult extends SvelteComponentTyped<FlowJobResultProps, FlowJobResultEvents, FlowJobResultSlots> {
-}
-export {};