windmill-components 1.86.0 → 1.89.0

package/package/components/ModulePreview.svelte

@@ -0,0 +1,113 @@
+<script>import { ScriptService } from '../gen';
+import { workspaceStore } from '../stores';
+import { getModifierKey, getScriptByPath } from '../utils';
+import { Loader2 } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import Button from './common/button/Button.svelte';
+import DisplayResult from './DisplayResult.svelte';
+import LogViewer from './LogViewer.svelte';
+import RunForm from './RunForm.svelte';
+import TestJobLoader from './TestJobLoader.svelte';
+export let mod;
+export let schema;
+const { flowStore, flowStateStore, testStepStore } = getContext('FlowEditorContext');
+// Test
+let testJobLoader;
+let testIsLoading = false;
+let testJob = undefined;
+let stepArgs = $testStepStore[mod.id] ??
+    Object.entries(mod.value['input_transforms'] ?? {}).reduce((acc, [k, v]) => {
+        let t = v;
+        if (t.type == 'static') {
+            acc[k] = t.value;
+            return acc;
+        }
+        return acc;
+    }, {});
+$: $testStepStore[mod.id] = stepArgs;
+export function runTestWithStepArgs() {
+    runTest(stepArgs);
+}
+export async function runTest(args) {
+    const val = mod.value;
+    // let jobId: string | undefined = undefined
+    if (val.type == 'rawscript') {
+        await testJobLoader?.runPreview(val.path, val.content, val.language, args, val.tag);
+    }
+    else if (val.type == 'script') {
+        const script = val.hash
+            ? await ScriptService.getScriptByHash({ workspace: $workspaceStore, hash: val.hash })
+            : await getScriptByPath(val.path);
+        await testJobLoader?.runPreview(val.path, script.content, script.language, args, script.tag);
+    }
+    else {
+        throw Error('not testable module type');
+    }
+}
+function jobDone() {
+    if (testJob && !testJob.canceled && testJob.type == 'CompletedJob' && `result` in testJob) {
+        if ($flowStateStore[mod.id]?.previewResult) {
+            $flowStateStore[mod.id].previewResult = testJob.result;
+            $flowStateStore = $flowStateStore;
+        }
+    }
+}
+</script>
+
+<TestJobLoader
+	on:done={() => jobDone()}
+	bind:this={testJobLoader}
+	bind:isLoading={testIsLoading}
+	bind:job={testJob}
+/>
+<Splitpanes>
+	<Pane size={50} minSize={20} class="p-4">
+		{#if $flowStore.value.same_worker}
+			<div class="mb-1 bg-yellow-100 text-yellow-700 p-1 text-xs"
+				>The `./shared` folder is not passed across individual "Test this step"</div
+			>
+		{/if}
+
+		<RunForm
+			noVariablePicker
+			loading={testIsLoading}
+			runnable={{ summary: mod.summary ?? '', schema, description: '' }}
+			runAction={(_, args) => runTest(args)}
+			schedulable={false}
+			buttonText={`Test (${getModifierKey()}+Enter)`}
+			detailed={false}
+			topButton
+			bind:args={stepArgs}
+			isFlow={false}
+		/>
+		{#if testIsLoading}
+			<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full mt-4" color="red" size="sm">
+				<Loader2 class="animate-spin mr-1" />
+				Cancel
+			</Button>
+		{/if}
+	</Pane>
+	<Pane size={50} minSize={20}>
+		<Splitpanes horizontal>
+			<Pane size={50} minSize={10}>
+				<LogViewer content={testJob?.logs} isLoading={testIsLoading} />
+			</Pane>
+			<Pane size={50} minSize={10} class="text-sm text-gray-600">
+				{#if testJob != undefined && 'result' in testJob && testJob.result != undefined}
+					<pre class="overflow-x-auto break-words relative h-full px-2">
+						<DisplayResult result={testJob.result} />
+					</pre>
+				{:else}
+					<div class="p-2">
+						{#if testIsLoading}
+							<Loader2 class="animate-spin" />
+						{:else}
+							Test to see the result here
+						{/if}
+					</div>
+				{/if}
+			</Pane>
+		</Splitpanes>
+	</Pane>
+</Splitpanes>

package/package/components/ModulePreview.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+import { type FlowModule } from '../gen';
+declare const __propDef: {
+    props: {
+        mod: FlowModule;
+        schema: Schema;
+        runTestWithStepArgs?: (() => void) | undefined;
+        runTest?: ((args: any) => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ModulePreviewProps = typeof __propDef.props;
+export type ModulePreviewEvents = typeof __propDef.events;
+export type ModulePreviewSlots = typeof __propDef.slots;
+export default class ModulePreview extends SvelteComponentTyped<ModulePreviewProps, ModulePreviewEvents, ModulePreviewSlots> {
+    get runTestWithStepArgs(): () => void;
+    get runTest(): (args: any) => Promise<void>;
+}
+export {};

package/package/components/ModuleStatus.svelte

@@ -0,0 +1,37 @@
+<script>import { FlowStatusModule } from '../gen';
+import { faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
+import { Icon } from 'svelte-awesome';
+import { Badge } from './common';
+export let type;
+export let scheduled_for;
+</script>
+
+{#if type == FlowStatusModule.type.WAITING_FOR_EVENTS}
+	<span class="italic text-waiting">
+		<Icon class=" mr-2" data={faHourglassHalf} />
+		Waiting to be resumed by resume events such as approvals
+	</span>
+{:else if type == FlowStatusModule.type.WAITING_FOR_PRIOR_STEPS}
+	<span class="italic text-gray-600">
+		<Icon data={faHourglassHalf} class="mr-2" />
+		Waiting for prior steps to complete
+	</span>
+{:else if type == FlowStatusModule.type.WAITING_FOR_EXECUTOR}
+	<span class="italic text-gray-600">
+		<Icon data={faHourglassHalf} class="mr-2" />
+		{#if scheduled_for}
+			Job has been {scheduled_for} and will be executed after that time
+		{:else}
+			Job is waiting to be executed
+		{/if}
+	</span>
+{:else if type == FlowStatusModule.type.SUCCESS}
+	<Badge color="green">Success</Badge>
+{:else if type == FlowStatusModule.type.FAILURE}
+	<Badge color="red">Failure</Badge>
+{/if}
+
+<style>
+	.text-waiting {
+		color: #c76bf2;
+	}</style>

package/package/components/ModuleStatus.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import { FlowStatusModule } from '../gen';
+declare const __propDef: {
+    props: {
+        type: FlowStatusModule.type;
+        scheduled_for: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ModuleStatusProps = typeof __propDef.props;
+export type ModuleStatusEvents = typeof __propDef.events;
+export type ModuleStatusSlots = typeof __propDef.slots;
+export default class ModuleStatus extends SvelteComponentTyped<ModuleStatusProps, ModuleStatusEvents, ModuleStatusSlots> {
+}
+export {};

package/package/components/MoveDrawer.svelte

@@ -0,0 +1,98 @@
+<script>import { isOwner } from '../utils';
+import { createEventDispatcher } from 'svelte';
+import { userStore, workspaceStore } from '../stores';
+import { Alert, Button, Drawer } from './common';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import Path from './Path.svelte';
+import { AppService, FlowService, ScriptService } from '../gen';
+const dispatch = createEventDispatcher();
+let kind;
+let initialPath = '';
+let path = undefined;
+let summary = undefined;
+let drawer;
+let own = false;
+export async function openDrawer(initialPath_l, summary_l, kind_l) {
+    kind = kind_l;
+    initialPath = initialPath_l;
+    summary = summary_l;
+    loadOwner();
+    drawer.openDrawer();
+}
+function loadOwner() {
+    own = isOwner(initialPath, $userStore, $workspaceStore);
+}
+async function updatePath() {
+    if (kind == 'flow') {
+        const flow = await FlowService.getFlowByPath({
+            workspace: $workspaceStore,
+            path: initialPath
+        });
+        await FlowService.updateFlow({
+            workspace: $workspaceStore,
+            path: initialPath,
+            requestBody: {
+                path: path ?? '',
+                summary: summary ?? '',
+                description: flow.description,
+                value: flow.value,
+                schema: flow.schema
+            }
+        });
+    }
+    else if (kind == 'script') {
+        const script = await ScriptService.getScriptByPath({
+            workspace: $workspaceStore,
+            path: initialPath
+        });
+        script.summary = summary ?? '';
+        await ScriptService.createScript({
+            workspace: $workspaceStore,
+            requestBody: {
+                ...script,
+                description: script.description ?? '',
+                lock: script.lock?.split('\n'),
+                parent_hash: script.hash,
+                path: path ?? ''
+            }
+        });
+    }
+    else if (kind == 'app') {
+        await AppService.updateApp({
+            workspace: $workspaceStore,
+            path: initialPath,
+            requestBody: {
+                path: path != initialPath ? path : undefined,
+                summary
+            }
+        });
+    }
+    dispatch('update', path);
+    drawer.closeDrawer();
+}
+</script>
+
+<Drawer bind:this={drawer}>
+	<DrawerContent title="Move/Rename {initialPath}" on:close={drawer.closeDrawer}>
+		{#if !own}
+			<Alert type="warning" title="Not owner"
+				>Since you do not own this item, you cannot move this item (you can however fork it)</Alert
+			>
+		{/if}
+		<h2 class="border-b pb-1 mt-2 mb-4">Summary</h2>
+		<input
+			type="text"
+			bind:value={summary}
+			placeholder="Short summary to be displayed when listed"
+			disabled={!own}
+		/>
+
+		<h2 class="border-b pb-1 mt-10 mb-4">Path</h2>
+		<div class="flex flex-col mb-2 gap-6">
+			<Path disabled={!own} {kind} {initialPath} bind:path />
+			<div class="mt-4" />
+			<Button disabled={!own} on:click={updatePath}>Move/Rename</Button>
+			<div />
+		</div>
+	</DrawerContent>
+</Drawer>

package/package/components/MoveDrawer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        openDrawer?: ((initialPath_l: string, summary_l: string | undefined, kind_l: "flow" | "script" | "resource" | "app" | "schedule" | "variable") => Promise<void>) | undefined;
+    };
+    events: {
+        update: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MoveDrawerProps = typeof __propDef.props;
+export type MoveDrawerEvents = typeof __propDef.events;
+export type MoveDrawerSlots = typeof __propDef.slots;
+export default class MoveDrawer extends SvelteComponentTyped<MoveDrawerProps, MoveDrawerEvents, MoveDrawerSlots> {
+    get openDrawer(): (initialPath_l: string, summary_l: string | undefined, kind_l: "flow" | "script" | "resource" | "app" | "schedule" | "variable") => Promise<void>;
+}
+export {};

package/package/components/Multiselect.svelte

@@ -0,0 +1,328 @@
+<script>
+	// @ts-nocheck
+	import { onMount } from 'svelte'
+	import { fly } from 'svelte/transition'
+	export let id = ''
+	export let value = []
+	export let readonly = false
+	export let placeholder = ''
+
+	let input,
+		inputValue,
+		options = [],
+		activeOption,
+		showOptions = false,
+		selected = {},
+		first = true,
+		slot
+	const iconClearPath =
+		'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'
+
+	onMount(() => {
+		slot.querySelectorAll('option').forEach((o) => {
+			o.selected && !value.includes(o.value) && (value = [...value, o.value])
+			options = [...options, { value: o.value, name: o.textContent }]
+		})
+		value &&
+			(selected = options.reduce(
+				(obj, op) => (value.includes(op.value) ? { ...obj, [op.value]: op } : obj),
+				{}
+			))
+		first = false
+	})
+
+	$: if (!first) value = Object.values(selected).map((o) => o.value)
+	$: filtered = options.filter((o) =>
+		inputValue ? o.name.toLowerCase().includes(inputValue.toLowerCase()) : o
+	)
+	$: if ((activeOption && !filtered.includes(activeOption)) || (!activeOption && inputValue))
+		activeOption = filtered[0]
+
+	function add(token) {
+		if (!readonly) selected[token.value] = token
+	}
+
+	function remove(value) {
+		if (!readonly) {
+			const { [value]: val, ...rest } = selected
+			selected = rest
+		}
+	}
+
+	function optionsVisibility(show) {
+		if (readonly) return
+		if (typeof show === 'boolean') {
+			showOptions = show
+			show && input.focus()
+		} else {
+			showOptions = !showOptions
+		}
+		if (!showOptions) {
+			activeOption = undefined
+		}
+	}
+
+	function handleKeyup(e) {
+		if (e.keyCode === 13) {
+			Object.keys(selected).includes(activeOption.value)
+				? remove(activeOption.value)
+				: add(activeOption)
+			inputValue = ''
+		}
+		if ([38, 40].includes(e.keyCode)) {
+			// up and down arrows
+			const increment = e.keyCode === 38 ? -1 : 1
+			const calcIndex = filtered.indexOf(activeOption) + increment
+			activeOption =
+				calcIndex < 0
+					? filtered[filtered.length - 1]
+					: calcIndex === filtered.length
+					? filtered[0]
+					: filtered[calcIndex]
+		}
+	}
+
+	function handleBlur() {
+		optionsVisibility(false)
+	}
+
+	function handleTokenClick(e) {
+		if (e.target.closest('.token-remove')) {
+			e.stopPropagation()
+			remove(e.target.closest('.token').dataset.id)
+		} else if (e.target.closest('.remove-all')) {
+			selected = []
+			inputValue = ''
+		} else {
+			optionsVisibility(true)
+		}
+	}
+
+	function handleOptionMousedown(e) {
+		const value = e.target.dataset.value
+		if (selected[value]) {
+			remove(value)
+		} else {
+			add(options.filter((o) => o.value === value)[0])
+			input.focus()
+		}
+	}
+</script>
+
+<div class="multiselect" class:readonly>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div class="tokens" class:showOptions on:click={handleTokenClick}>
+		{#each Object.values(selected) as s}
+			<div class="token" data-id={s.value}>
+				<span>{s.name}</span>
+				{#if !readonly}
+					<div class="token-remove" title="Remove {s.name}">
+						<svg
+							class="icon-clear"
+							xmlns="http://www.w3.org/2000/svg"
+							width="18"
+							height="18"
+							viewBox="0 0 24 24"
+						>
+							<path d={iconClearPath} />
+						</svg>
+					</div>
+				{/if}
+			</div>
+		{/each}
+		<div class="actions">
+			{#if !readonly}
+				<input
+					{id}
+					autocomplete="off"
+					bind:value={inputValue}
+					bind:this={input}
+					on:keyup={handleKeyup}
+					on:blur={handleBlur}
+					{placeholder}
+				/>
+				<div class="remove-all" title="Remove All" class:hidden={!Object.keys(selected).length}>
+					<svg
+						class="icon-clear"
+						xmlns="http://www.w3.org/2000/svg"
+						width="18"
+						height="18"
+						viewBox="0 0 24 24"
+					>
+						<path d={iconClearPath} />
+					</svg>
+				</div>
+				<svg
+					class="dropdown-arrow"
+					xmlns="http://www.w3.org/2000/svg"
+					width="18"
+					height="18"
+					viewBox="0 0 18 18"><path d="M5 8l4 4 4-4z" /></svg
+				>
+			{/if}
+		</div>
+	</div>
+
+	<select bind:this={slot} type="multiple" class="hidden"><slot /></select>
+
+	{#if showOptions}
+		<ul
+			class="options"
+			transition:fly|local={{ duration: 200, y: 5 }}
+			on:mousedown|preventDefault={handleOptionMousedown}
+		>
+			{#each filtered as option}
+				<li
+					class:selected={selected[option.value]}
+					class:active={activeOption === option}
+					data-value={option.value}
+				>
+					{option.name}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>
+
+<style>
+	.multiselect {
+		background-color: white;
+		border-bottom: 1px solid hsl(0, 0%, 70%);
+		position: relative;
+	}
+	.multiselect:not(.readonly):hover {
+		border-bottom-color: hsl(0, 0%, 50%);
+	}
+
+	.tokens {
+		align-items: center;
+		display: flex;
+		flex-wrap: wrap;
+		position: relative;
+	}
+	.tokens::after {
+		background: none repeat scroll 0 0 transparent;
+		bottom: -1px;
+		content: '';
+		display: block;
+		height: 2px;
+		left: 50%;
+		position: absolute;
+		background: hsl(45, 100%, 51%);
+		transition: width 0.3s ease 0s, left 0.3s ease 0s;
+		width: 0;
+	}
+	.tokens.showOptions::after {
+		width: 100%;
+		left: 0;
+	}
+	.token {
+		align-items: center;
+		background-color: hsl(214, 17%, 92%);
+		border-radius: 1.25rem;
+		display: flex;
+		margin: 0.25rem 0.5rem 0.25rem 0;
+		max-height: 1.3rem;
+		padding: 0.25rem 0.5rem 0.25rem 0.5rem;
+		transition: background-color 0.3s;
+		white-space: nowrap;
+	}
+	.token:hover {
+		background-color: hsl(214, 15%, 88%);
+	}
+	.readonly .token {
+		color: hsl(0, 0%, 40%);
+	}
+	.token-remove,
+	.remove-all {
+		align-items: center;
+		background-color: hsl(214, 15%, 55%);
+		border-radius: 50%;
+		color: hsl(214, 17%, 92%);
+		display: flex;
+		justify-content: center;
+		height: 1.25rem;
+		margin-left: 0.25rem;
+		min-width: 1.25rem;
+	}
+	.token-remove:hover,
+	.remove-all:hover {
+		background-color: hsl(215, 21%, 43%);
+		cursor: pointer;
+	}
+
+	.actions {
+		align-items: center;
+		display: flex;
+		flex: 1;
+		min-width: 15rem;
+	}
+
+	input {
+		border: none;
+		font-size: 1.5rem;
+		line-height: 1.5rem;
+		margin: 0;
+		outline: none;
+		padding: 0;
+		width: 100%;
+	}
+
+	.dropdown-arrow path {
+		fill: hsl(0, 0%, 70%);
+	}
+	.multiselect:hover .dropdown-arrow path {
+		fill: hsl(0, 0%, 50%);
+	}
+
+	.icon-clear path {
+		fill: white;
+	}
+
+	.options {
+		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px -2px 4px rgba(0, 0, 0, 0.1);
+		left: 0;
+		list-style: none;
+		-webkit-margin-after: 0;
+		        margin-block-end: 0;
+		-webkit-margin-before: 0;
+		        margin-block-start: 0;
+		max-height: 70vh;
+		overflow: auto;
+		-webkit-padding-start: 0;
+		        padding-inline-start: 0;
+		position: absolute;
+		top: calc(100% + 1px);
+		width: 100%;
+	}
+	li {
+		background-color: white;
+		cursor: pointer;
+		padding: 0.5rem;
+	}
+	li:last-child {
+		border-bottom-left-radius: 0.2rem;
+		border-bottom-right-radius: 0.2rem;
+	}
+	li:not(.selected):hover {
+		background-color: hsl(214, 17%, 92%);
+	}
+	li.selected {
+		background-color: hsl(232, 54%, 41%);
+		color: white;
+	}
+	li.selected:nth-child(even) {
+		background-color: hsl(232, 50%, 45%);
+		color: white;
+	}
+	li.active {
+		background-color: hsl(214, 17%, 88%);
+	}
+	li.selected.active,
+	li.selected:hover {
+		background-color: hsl(232, 48%, 50%);
+	}
+
+	.hidden {
+		display: none;
+	}</style>

package/package/components/Multiselect.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  MultiselectProps */
+/** @typedef {typeof __propDef.events}  MultiselectEvents */
+/** @typedef {typeof __propDef.slots}  MultiselectSlots */
+export default class Multiselect extends SvelteComponentTyped<{
+    value?: any[] | undefined;
+    id?: string | undefined;
+    placeholder?: string | undefined;
+    readonly?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type MultiselectProps = typeof __propDef.props;
+export type MultiselectEvents = typeof __propDef.events;
+export type MultiselectSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: any[] | undefined;
+        id?: string | undefined;
+        placeholder?: string | undefined;
+        readonly?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/NumberTypeNarrowing.svelte

@@ -0,0 +1,19 @@
+<script>import Toggle from './Toggle.svelte';
+export let min;
+export let max;
+let minChecked = min != undefined;
+let maxChecked = max != undefined;
+</script>
+
+<div class="my-2" />
+
+<div class="flex flex-col gap-2">
+	<div class="flex gap-2">
+		<Toggle bind:checked={minChecked} options={{ right: 'min' }} />
+		<input type="number" bind:value={min} disabled={!minChecked} />
+	</div>
+	<div class="flex gap-2">
+		<Toggle bind:checked={maxChecked} options={{ right: 'max' }} />
+		<input type="number" bind:value={max} disabled={!maxChecked} />
+	</div>
+</div>