windmill-components 1.37.0 → 1.46.1

package/components/common/menu/Menu.svelte

@@ -34,24 +34,20 @@ const placementsClasses = {
 </script>
 
 <div class="relative" bind:this={menu}>
-	<div>
-		<div on:click={() => (show = !show)} on:click>
-			<slot name="trigger" />
-		</div>
-
-		{#if show}
-			<div
-				in:scale={{ duration: 100, start: 0.95 }}
-				out:scale={{ duration: 75, start: 0.95 }}
-				class={classNames(
-					'z-50 absolute mt-2 w-60 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
-					placementsClasses[placement]
-				)}
-				role="menu"
-				tabindex="-1"
-			>
-				<slot {close} />
-			</div>
-		{/if}
+	<div on:click={() => (show = !show)} on:click>
+		<slot name="trigger" />
 	</div>
+
+	{#if show}
+		<div
+			class={classNames(
+				'z-50 absolute mt-2 w-60 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
+				placementsClasses[placement]
+			)}
+			role="menu"
+			tabindex="-1"
+		>
+			<slot {close} />
+		</div>
+	{/if}
 </div>

package/components/common/skeleton/Skeleton.svelte

@@ -4,13 +4,12 @@ import SkeletonElement from './SkeletonElement.svelte';
 export let layout;
 export let loading = true;
 export let overlay = false;
-export let delay = 200;
 </script>
 
 {#if loading}
 	<div class="relative flex justify-center">
 		<div
-			in:fade={{ duration: 1000, delay }}
+			in:fade={{ duration: 1000 }}
 			class="flex grow flex-col overflow-hidden {overlay
 				? 'absolute w-full h-full z-[1000]'
 				: ''} {$$props.class}"

package/components/common/skeleton/Skeleton.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         layout: SkeletonLayout;
         loading?: boolean | undefined;
         overlay?: boolean | undefined;
-        delay?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/common/skeleton/SkeletonElement.svelte

@@ -3,6 +3,6 @@ export let element;
 </script>
 
 <div
-	class="animate-skeleton"
+	class="animate-skeleton [animation-delay:1000ms]"
 	style="height: {element.h * HEIGHT_UNIT}px; width: {element.w}%; min-width: {element.minW}px;"
 />

package/components/common/tabs/TabContent.svelte

@@ -1,13 +1,14 @@
 <script>import { getContext } from 'svelte';
 export let value;
 export let alwaysMounted = false;
+export let style = '';
 let clazz = '';
 export { clazz as class };
 const { selected } = getContext('Tabs');
 </script>
 
 {#if value === $selected || alwaysMounted}
-	<div class={`${clazz} ${value === $selected ? 'visible' : 'hidden'}`}>
+	<div class={`${clazz} ${value === $selected ? 'visible' : 'hidden'}`} {style}>
 		<slot />
 	</div>
 {/if}

package/components/common/tabs/TabContent.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         value: string;
         alwaysMounted?: boolean | undefined;
+        style?: string | undefined;
         class?: string | undefined;
     };
     events: {

package/components/common/tabs/Tabs.svelte

@@ -7,21 +7,23 @@ import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 export let selected;
 $: selected && updateSelected();
-const selectedContent = writable(selected);
-$: $selectedContent && dispatch('selected', $selectedContent);
+const selectedStore = writable(selected);
+$: $selectedStore && dispatch('selected', $selectedStore);
 setContext('Tabs', {
-    selected: selectedContent,
+    selected: selectedStore,
     update: (value) => {
-        selectedContent.set(value);
+        selectedStore.set(value);
         selected = value;
     }
 });
 function updateSelected() {
-    selectedContent.set(selected);
+    selectedStore.set(selected);
 }
 </script>
 
-<div class="border-b border-gray-200 flex flex-row">
+<div
+	class="border-b border-gray-200 flex flex-row whitespace-nowrap overflow-y-auto scrollbar-hidden {$$props.class}"
+>
 	<slot />
 </div>
 <slot name="content" />

package/components/common/tabs/Tabs.svelte.d.ts

@@ -6,6 +6,7 @@ export declare type TabsContext = {
 import { type Writable } from 'svelte/store';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         selected: string;
     };
     events: {

package/components/flows/FlowEditor.svelte

@@ -1,30 +1,21 @@
-<!-- Flow Editor: Top level component -->
-<script>import { HSplitPane } from 'svelte-split-pane';
+<script>import { Pane, Splitpanes } from 'svelte-splitpanes';
 import FlowEditorPanel from './content/FlowEditorPanel.svelte';
 import FlowModuleSchemaMap from './map/FlowModuleSchemaMap.svelte';
 import { flowStore } from './flowStore';
-import { flowStateStore } from './flowState';
-import FlowPreviewButtons from './header/FlowPreviewButtons.svelte';
 export let initialPath;
 </script>
 
 <div class="h-full overflow-hidden border-t">
-	<HSplitPane leftPaneSize="25%" rightPaneSize="75%" minLeftPaneSize="20%" minRightPaneSize="40%">
-		<left slot="left" class="h-full flex flex-col ">
-			<FlowPreviewButtons />
-			<div class="grow overflow-auto p-4 bg-gray-50">
-				{#if $flowStore.value.modules && $flowStateStore.modules}
-					<FlowModuleSchemaMap
-						bind:modules={$flowStore.value.modules}
-						bind:moduleStates={$flowStateStore.modules}
-					/>
+	<Splitpanes>
+		<Pane size={25} minSize={20} class="h-full">
+			<div class="grow overflow-auto p-4 bg-gray h-full bg-gray-50 relative">
+				{#if $flowStore.value.modules}
+					<FlowModuleSchemaMap bind:modules={$flowStore.value.modules} root />
 				{/if}
 			</div>
-		</left>
-		<right slot="right" class="h-full">
-			<div class="h-full overflow-auto bg-white ">
-				<FlowEditorPanel {initialPath} />
-			</div>
-		</right>
-	</HSplitPane>
+		</Pane>
+		<Pane size={75} minSize={40}>
+			<FlowEditorPanel {initialPath} />
+		</Pane>
+	</Splitpanes>
 </div>

package/components/flows/FlowProgressBar.svelte

@@ -0,0 +1,55 @@
+<script>import { FlowStatusModule, Job } from '../../gen';
+import { ProgressBar } from '../progressBar';
+export let job = undefined;
+export let duration = 200;
+let jobProgress = { steps: [], error: false };
+$: if (job)
+    updateJobProgress(job);
+function updateJobProgress(job) {
+    const modules = job?.flow_status?.modules;
+    if (!modules?.length) {
+        return;
+    }
+    jobProgress.steps = modules.map((module) => {
+        if (module.type === FlowStatusModule.type.FAILURE ||
+            (module.type === FlowStatusModule.type.SUCCESS && job['success'] === false)) {
+            jobProgress.error = true;
+        }
+        // Loop is still iterating
+        if (module.iterator) {
+            return {
+                type: 'loop',
+                isDone: isJobStepDone(module.type),
+                index: module.iterator.index || 0,
+                length: module.iterator.itered?.length || 0
+            };
+        }
+        // Loop is finished
+        else if (module['flow_jobs']) {
+            return {
+                type: 'loop',
+                isDone: isJobStepDone(module.type),
+                index: module['flow_jobs'].length,
+                length: module['flow_jobs'].length
+            };
+        }
+        // Not a loop
+        return {
+            type: 'general',
+            isDone: isJobStepDone(module.type)
+        };
+    });
+}
+function isJobStepDone(type) {
+    if (!type) {
+        return false;
+    }
+    return type === FlowStatusModule.type.SUCCESS || type === FlowStatusModule.type.FAILURE;
+}
+export function reset() {
+    jobProgress.error = false;
+    jobProgress.steps = [];
+}
+</script>
+
+<ProgressBar {...jobProgress} {duration} class={$$props.class} />

package/components/flows/FlowProgressBar.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import { Job } from '../../gen';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        job?: Job | undefined;
+        duration?: number | undefined;
+        reset?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowProgressBarProps = typeof __propDef.props;
+export declare type FlowProgressBarEvents = typeof __propDef.events;
+export declare type FlowProgressBarSlots = typeof __propDef.slots;
+export default class FlowProgressBar extends SvelteComponentTyped<FlowProgressBarProps, FlowProgressBarEvents, FlowProgressBarSlots> {
+    get reset(): () => void;
+}
+export {};

package/components/flows/common/FlowCardHeader.svelte

@@ -1,25 +1,24 @@
 <script>import Badge from '../../common/badge/Badge.svelte';
 import IconedPath from '../../IconedPath.svelte';
 import { RawScript } from '../../../gen';
-import { isEmptyFlowModule } from '../flowStateUtils';
+import { isEmptyFlowModule } from '../utils';
 export let flowModule = undefined;
 export let title = undefined;
 $: shouldPick = flowModule && isEmptyFlowModule(flowModule);
 const languageColors = {
     [RawScript.language.GO]: 'dark-indigo',
     [RawScript.language.DENO]: 'dark-blue',
-    [RawScript.language.PYTHON3]: 'dark-green'
+    [RawScript.language.PYTHON3]: 'dark-green',
+    [RawScript.language.BASH]: 'dark-yellow'
 };
 </script>
 
-<div
-	class="flex items-center justify-between py-2 px-4 border-b bg-gray-50 shadow-sm space-x-2 h-12 flex-nowrap"
->
+<div class="flex items-center justify-between py-2 px-4 border-b space-x-2 h-12 flex-nowrap">
 	{#if flowModule}
 		<span class="text-sm w-full">
 			<div class="flex items-center space-x-2">
 				{#if shouldPick}
-					<span class="font-bold text-xs">Select a script</span>
+					<span class="font-bold text-xs">Select a step kind</span>
 				{:else if flowModule?.value.type === 'rawscript'}
 					<Badge color={languageColors[flowModule?.value.language] ?? 'gray'} capitalize>
 						{flowModule?.value.language}

package/components/flows/content/CapturePayload.svelte

@@ -0,0 +1,112 @@
+<script>import { page } from '$app/stores';
+import { Button } from '../../common';
+import Drawer from '../../common/drawer/Drawer.svelte';
+import DrawerContent from '../../common/drawer/DrawerContent.svelte';
+import WindmillIcon from '../../icons/WindmillIcon.svelte';
+import ObjectViewer from '../../propertyPicker/ObjectViewer.svelte';
+import { CaptureService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import { flowStore } from '../flowStore';
+import { convert } from '@redocly/json-to-json-schema';
+import SchemaViewer from '../../SchemaViewer.svelte';
+import { getContext } from 'svelte';
+import { copyToClipboard, sendUserToast } from '../../../utils';
+import Icon from 'svelte-awesome';
+import { faClipboard } from '@fortawesome/free-solid-svg-icons';
+import SchemaForm from '../../SchemaForm.svelte';
+const { previewArgs } = getContext('FlowEditorContext');
+let drawer;
+let interval = undefined;
+let captureInput = undefined;
+let jsonSchema = undefined;
+export function openDrawer() {
+    drawer.openDrawer();
+}
+async function startCapturePoint() {
+    await CaptureService.createCapture({
+        workspace: $workspaceStore,
+        path: $flowStore.path
+    });
+}
+async function getCaptureInput() {
+    const capture = await CaptureService.getCapture({
+        workspace: $workspaceStore,
+        path: $flowStore.path
+    });
+    captureInput = capture;
+    jsonSchema = { required: [], properties: {}, ...convert(capture) };
+}
+</script>
+
+<Drawer
+	bind:this={drawer}
+	size="900px"
+	on:open={() => {
+		startCapturePoint()
+		interval = setInterval(() => {
+			getCaptureInput()
+		}, 1000)
+	}}
+	on:close={() => interval && clearInterval(interval)}
+>
+	<DrawerContent title="Capture request" on:close={drawer.closeDrawer}>
+		Send a payload at: <div>
+			<a
+				class="text-2xl"
+				on:click={(e) => {
+					e.preventDefault()
+					copyToClipboard(
+						`${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/capture/${$flowStore.path}`
+					)
+				}}
+				href="{$page.url.protocol}//{$page.url
+					.hostname}/api/w/{$workspaceStore}/capture/{$flowStore.path}"
+				>{$page.url.protocol}//{$page.url
+					.hostname}/api/w/{$workspaceStore}/capture/{$flowStore.path}
+				<Icon data={faClipboard} /></a
+			>
+		</div>
+		<p class="text-gray-600 mt-4 text-xs">CURL example</p>
+
+		<div class="text-xs box mb-4 b">
+			<pre class="overflow-auto"
+				>{`curl -X POST ${$page.url.protocol}//${$page.url.hostname}/api/w/${$workspaceStore}/capture/${$flowStore.path} \\
+   -H 'Content-Type: application/json' \\
+   -d '{"foo": 42}'`}</pre
+			>
+		</div>
+		<div class="items-center flex flex-row gap-x-2 text-xs text-gray-600">
+			Listening for new requests
+			<WindmillIcon
+				class="animate-[pulse_5s_linear_infinite] animate-[spin_5s_linear_infinite]"
+			/></div
+		>
+		<div class="box p-2 my-2  mb-4">
+			<ObjectViewer topBrackets={true} json={captureInput} />
+		</div>
+		<div class="flex flex-row-reverse gap-2" slot="submission">
+			<Button
+				size="sm"
+				on:click={() => {
+					$previewArgs = captureInput
+					$flowStore.schema = jsonSchema
+					sendUserToast('Copied as flow inputs and test args')
+				}}>Copy as flow inputs and test args</Button
+			>
+			<Button
+				size="sm"
+				variant="border"
+				on:click={() => {
+					$previewArgs = captureInput
+					sendUserToast('Copied as test args')
+				}}>Copy only as test args</Button
+			>
+		</div>
+		<h3 class="mt-2">Derived inputs schema</h3>
+		<div class="box p-2">
+			<SchemaViewer schema={jsonSchema} />
+		</div>
+		<h3 class="mt-2">Test args</h3>
+		<SchemaForm class="h-full pt-4" schema={$flowStore.schema} args={$previewArgs} />
+	</DrawerContent>
+</Drawer>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        openDrawer?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CapturePayloadProps = typeof __propDef.props;
+export declare type CapturePayloadEvents = typeof __propDef.events;
+export declare type CapturePayloadSlots = typeof __propDef.slots;
+export default class CapturePayload extends SvelteComponentTyped<CapturePayloadProps, CapturePayloadEvents, CapturePayloadSlots> {
+    get openDrawer(): () => void;
+}
+export {};

package/components/flows/content/DynamicInputHelpBox.svelte

@@ -32,10 +32,12 @@ $: opened = false;
 		That snippet can be a single line:
 		<pre><code>last_result.myarg</code></pre>
 		or a multiline:
-		<pre><code
+		<pre
+			><code
 				>let x = 5;
 x + 2</code
-			></pre>
+			></pre
+		>
 		<p>
 			If it is multiline, the statement before the final expression <b
 				>MUST END WITH ; and a newline</b
@@ -52,15 +54,9 @@ x + 2</code
 			functions:
 		</p>
 		<ul class="ml-4">
-			<li>
-				<b>previous_result</b>: the object containing the result of the previous step
-			</li>
+			<li><b>result.id</b>: the result of step at id 'id'</li>
 			<li><b>flow_input</b>: the object containing the flow input arguments</li>
 			<li><b>params</b>: the object containing the current step static values</li>
-			<li>
-				<b>step(n)</b>: the function returning the result of step number n. One can also use a
-				negative n. step(0) == result of the first step , step(-1) == previous_result
-			</li>
 			<li>
 				<b>variable(path)</b>: the function returning the variable (including secrets) at given path
 				as a string
@@ -71,7 +67,7 @@ x + 2</code
 		</ul>
 		<p>To re-enable editor assistance, import the helper functions types using:</p>
 		<code>
-			{`import { previous_result, flow_input, step, variable, resource, params } from 'windmill${
+			{`import { results, flow_input, variable, resource, params } from 'windmill${
 				importPath ? `@${importPath}` : ''
 			}'`}
 		</code>

package/components/flows/content/FlowBranchAllWrapper.svelte

@@ -0,0 +1,21 @@
+<script>import Toggle from '../../Toggle.svelte';
+import FlowCard from '../common/FlowCard.svelte';
+export let branch;
+</script>
+
+<div class="h-full flex flex-col">
+	<FlowCard title="Branch">
+		<div slot="header" class="grow">
+			<input bind:value={branch.summary} placeholder={'Summary'} />
+		</div>
+		<div class="p-4">
+			<div class="mt-6 mb-2 text-sm font-bold">Skip failures</div>
+			<Toggle
+				bind:checked={branch.skip_failure}
+				options={{
+					right: 'Skip failure'
+				}}
+			/>
+		</div>
+	</FlowCard>
+</div>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        branch: {
+            summary?: string;
+            skip_failure?: boolean;
+            modules: Array<FlowModule>;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowBranchAllWrapperProps = typeof __propDef.props;
+export declare type FlowBranchAllWrapperEvents = typeof __propDef.events;
+export declare type FlowBranchAllWrapperSlots = typeof __propDef.slots;
+export default class FlowBranchAllWrapper extends SvelteComponentTyped<FlowBranchAllWrapperProps, FlowBranchAllWrapperEvents, FlowBranchAllWrapperSlots> {
+}
+export {};

package/components/flows/content/FlowBranchOneWrapper.svelte

@@ -0,0 +1,49 @@
+<script>import { getContext } from 'svelte';
+import FlowCard from '../common/FlowCard.svelte';
+import { flowStore } from '../flowStore';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
+import SimpleEditor from '../../SimpleEditor.svelte';
+import { flowStateStore } from '../flowState';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import { getStepPropPicker } from '../previousResults';
+export let branch;
+export let parentModule;
+export let previousModule;
+const { previewArgs } = getContext('FlowEditorContext');
+let editor = undefined;
+$: pickableProperties = getStepPropPicker($flowStateStore, parentModule, previousModule, parentModule.id, $flowStore, previewArgs, false, true).pickableProperties;
+</script>
+
+<div class="h-full flex flex-col">
+	<FlowCard title="Branch">
+		<div slot="header" class="grow">
+			<input bind:value={branch.summary} placeholder={'Summary'} />
+		</div>
+		<div class="overflow-hidden flex-grow">
+			<Splitpanes>
+				<Pane>
+					<div class="p-6 flex flex-col h-full overflow-clip">
+						<span class="mb-2 text-sm font-bold">Branch predicate</span>
+						<div class="border w-full">
+							<PropPickerWrapper
+								notSelectable
+								{pickableProperties}
+								on:select={({ detail }) => {
+									editor?.insertAtCursor(detail)
+								}}
+							>
+								<SimpleEditor
+									bind:this={editor}
+									lang="javascript"
+									bind:code={branch.expr}
+									class="small-editor"
+									shouldBindKey={false}
+								/>
+							</PropPickerWrapper>
+						</div>
+					</div>
+				</Pane>
+			</Splitpanes>
+		</div>
+	</FlowCard>
+</div>

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        branch: {
+            summary?: string;
+            expr: string;
+            modules: Array<FlowModule>;
+        };
+        parentModule: FlowModule;
+        previousModule: FlowModule | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowBranchOneWrapperProps = typeof __propDef.props;
+export declare type FlowBranchOneWrapperEvents = typeof __propDef.events;
+export declare type FlowBranchOneWrapperSlots = typeof __propDef.slots;
+export default class FlowBranchOneWrapper extends SvelteComponentTyped<FlowBranchOneWrapperProps, FlowBranchOneWrapperEvents, FlowBranchOneWrapperSlots> {
+}
+export {};