windmill-components 1.36.2 → 1.46.1

package/components/progressBar/ProgressBarGeneralPart.svelte

@@ -0,0 +1,22 @@
+<script>import { getContext } from 'svelte';
+import { getTween } from './model';
+export let step;
+export let index;
+export let duration = 200;
+const state = getContext('state');
+let progress = getTween(0, duration);
+$: finishedAndNotLast = $state.finished && $state.length - 1 !== index;
+$: if (finishedAndNotLast || $state.index > index)
+    progress = getTween(100, duration);
+$: if ($state.finished || step.isDone) {
+    if (index > $state.index) {
+        state.update((prev) => ({ ...prev, index }));
+    }
+    progress.set(100);
+}
+</script>
+
+<div
+	class="absolute left-0 bottom-0 h-full {$state.error ? 'bg-red-400' : 'bg-blue-400'}"
+	style="width: {$progress}%"
+/>

package/components/progressBar/ProgressBarGeneralPart.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import { type GeneralState } from './model';
+declare const __propDef: {
+    props: {
+        step: GeneralState;
+        index: number;
+        duration?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ProgressBarGeneralPartProps = typeof __propDef.props;
+export declare type ProgressBarGeneralPartEvents = typeof __propDef.events;
+export declare type ProgressBarGeneralPartSlots = typeof __propDef.slots;
+export default class ProgressBarGeneralPart extends SvelteComponentTyped<ProgressBarGeneralPartProps, ProgressBarGeneralPartEvents, ProgressBarGeneralPartSlots> {
+}
+export {};

package/components/progressBar/ProgressBarLoopAccessor.svelte

@@ -0,0 +1,14 @@
+<script>import { getContext } from 'svelte';
+export let progress;
+export let index;
+export let length;
+const state = getContext('state');
+$: isLast = index === length - 1;
+</script>
+
+<div
+	class="h-full absolute left-0 bottom-0 overflow-hidden {$state.error
+		? 'bg-red-400'
+		: 'bg-blue-400'}"
+	style="width: {$progress}%; opacity: {isLast ? 100 : 100 / length}%"
+/>

package/components/progressBar/ProgressBarLoopAccessor.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Tweened } from 'svelte/motion';
+declare const __propDef: {
+    props: {
+        progress: Tweened<number>;
+        index: number;
+        length: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ProgressBarLoopAccessorProps = typeof __propDef.props;
+export declare type ProgressBarLoopAccessorEvents = typeof __propDef.events;
+export declare type ProgressBarLoopAccessorSlots = typeof __propDef.slots;
+export default class ProgressBarLoopAccessor extends SvelteComponentTyped<ProgressBarLoopAccessorProps, ProgressBarLoopAccessorEvents, ProgressBarLoopAccessorSlots> {
+}
+export {};

package/components/progressBar/ProgressBarLoopPart.svelte

@@ -0,0 +1,34 @@
+<script>import { getContext } from 'svelte';
+import { get } from 'svelte/store';
+import ProgressBarLoopAccessor from './ProgressBarLoopAccessor.svelte';
+import { getTween } from './model';
+export let step;
+export let index;
+export let duration = 200;
+const state = getContext('state');
+let progresses = getTweenArray();
+$: finishedAndNotLast = $state.finished && $state.length - 1 !== index;
+$: if (!$state.error && ($state.index > index || finishedAndNotLast)) {
+    progresses = getTweenArray(100);
+}
+$: if (!$state.error && step.indexChanged) {
+    progresses.filter((p, i) => get(p) === 0 && i < step.index).forEach((p) => p.set(100));
+    progresses.forEach((p, i) => {
+        if (get(p) === 0 && i < step.index) {
+            p.set(100);
+            if (index > $state.index) {
+                state.update((prev) => ({ ...prev, index }));
+            }
+        }
+    });
+}
+$: if (!$state.error && $state.finished)
+    progresses.forEach((p) => p.set(100));
+function getTweenArray(initial = 0) {
+    return Array.from({ length: step.length }, () => getTween(initial, duration));
+}
+</script>
+
+{#each progresses as progress, i}
+	<ProgressBarLoopAccessor {progress} index={i} length={step.length} />
+{/each}

package/components/progressBar/ProgressBarLoopPart.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import { type LoopState } from './model';
+declare const __propDef: {
+    props: {
+        step: LoopState;
+        index: number;
+        duration?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ProgressBarLoopPartProps = typeof __propDef.props;
+export declare type ProgressBarLoopPartEvents = typeof __propDef.events;
+export declare type ProgressBarLoopPartSlots = typeof __propDef.slots;
+export default class ProgressBarLoopPart extends SvelteComponentTyped<ProgressBarLoopPartProps, ProgressBarLoopPartEvents, ProgressBarLoopPartSlots> {
+}
+export {};

package/components/progressBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ProgressBar } from './ProgressBar.svelte';
+export * from './model';

package/components/progressBar/index.js

@@ -0,0 +1,2 @@
+export { default as ProgressBar } from './ProgressBar.svelte';
+export * from './model';

package/components/progressBar/model.d.ts

@@ -0,0 +1,32 @@
+export interface ProgressStateStoreValue {
+    length: number;
+    index: number;
+    finished: boolean;
+    error: boolean;
+}
+export declare type StepKind = 'general' | 'loop';
+declare type Step<T extends StepKind> = {
+    type: T;
+    isDone: boolean;
+};
+export declare type GeneralStep = Step<'general'>;
+export declare type LoopStep = Step<'loop'> & {
+    index: number;
+    length: number;
+};
+export declare type ProgressStep = GeneralStep | LoopStep;
+export declare function isLoopStep(step: ProgressStep | undefined): step is LoopStep;
+declare type State<T extends StepKind> = {
+    type: T;
+    isDone: boolean;
+    isDoneChanged: boolean;
+};
+export declare type GeneralState = State<'general'>;
+export declare type LoopState = LoopStep & {
+    index: number;
+    indexChanged: boolean;
+};
+export declare type ProgressState = GeneralState | LoopState;
+export declare function isLoopState(state: ProgressState | undefined): state is LoopState;
+export declare function getTween(initialValue?: number, duration?: number): import("svelte/motion").Tweened<number>;
+export {};

package/components/progressBar/model.js

@@ -0,0 +1,14 @@
+import { tweened } from 'svelte/motion';
+import { cubicOut } from 'svelte/easing';
+export function isLoopStep(step) {
+    return step?.type === 'loop';
+}
+export function isLoopState(state) {
+    return state?.type === 'loop';
+}
+export function getTween(initialValue = 0, duration = 200) {
+    return tweened(initialValue, {
+        duration,
+        easing: cubicOut
+    });
+}

package/components/propertyPicker/ObjectViewer.svelte

@@ -1,6 +1,6 @@
 <script>import { truncate } from '../../utils';
 import { createEventDispatcher } from 'svelte';
-import { NEVER_TESTED_THIS_FAR } from '../flows/flowStateUtils';
+import { NEVER_TESTED_THIS_FAR } from '../flows/utils';
 import { getTypeAsString } from '../flows/utils';
 import { computeKey } from './utils';
 import WarningMessage from './WarningMessage.svelte';
@@ -11,6 +11,7 @@ export let currentPath = '';
 export let pureViewer = false;
 export let collapsed = level == 3 || Array.isArray(json);
 export let rawKey = false;
+export let topBrackets = false;
 const collapsedSymbol = '...';
 let keys;
 let isArray;
@@ -36,10 +37,14 @@ function selectProp(key) {
 		{#if level != 0}
 			<span class="cursor-pointer hover:bg-gray-200 px-1 rounded" on:click={collapse}> (-) </span>
 		{/if}
+		{#if level == 0 && topBrackets}<span class="h-0">{openBracket}</span>{/if}
 		<ul class="w-full">
 			{#each keys as key, index}
 				<li class="pt-1">
-					<button on:click={() => selectProp(key)} class="key rounded px-1 hover:bg-blue-100">
+					<button
+						on:click={() => selectProp(key)}
+						class="key {pureViewer ? 'cursor-auto' : ''} font-normal rounded px-1 hover:bg-blue-100"
+					>
 						{!isArray ? key : index}:
 					</button>
 
@@ -54,7 +59,9 @@ function selectProp(key) {
 						/>
 					{:else}
 						<button
-							class="val rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
+							class="val {pureViewer
+								? 'cursor-auto'
+								: ''} rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
 							on:click={() => selectProp(key)}
 						>
 							{#if json[key] === NEVER_TESTED_THIS_FAR}
@@ -69,6 +76,7 @@ function selectProp(key) {
 				</li>
 			{/each}
 		</ul>
+		{#if level == 0 && topBrackets}<span class="h-0">{closeBracket}</span>{/if}
 	</span>
 	<span class="cursor-pointer hover:bg-gray-200" class:hidden={!collapsed} on:click={collapse}>
 		{openBracket}{collapsedSymbol}{closeBracket}
@@ -85,33 +93,30 @@ function selectProp(key) {
 		list-style: none;
 		padding-left: 1rem;
 		border-left: 1px dotted lightgray;
-		--tw-text-opacity: 1;
-		color: rgb(0 0 0 / var(--tw-text-opacity));
 		font-size: 0.875rem;
 		line-height: 1.25rem;
 	}
 
 	.val {
-		--tw-text-opacity: 1;
-		color: rgb(0 0 0 / var(--tw-text-opacity));
-}
+		/* @apply font-black; */
+	}
 	.val.undefined {
 		--tw-text-opacity: 1;
-		color: rgb(240 82 82 / var(--tw-text-opacity));
+		color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 	.val.null {
 		--tw-text-opacity: 1;
-		color: rgb(240 82 82 / var(--tw-text-opacity));
+		color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 	.val.string {
 		--tw-text-opacity: 1;
-		color: rgb(5 122 85 / var(--tw-text-opacity));
+		color: rgb(22 163 74 / var(--tw-text-opacity));
 }
 	.val.number {
 		--tw-text-opacity: 1;
-		color: rgb(208 56 1 / var(--tw-text-opacity));
+		color: rgb(234 88 12 / var(--tw-text-opacity));
 }
 	.val.boolean {
 		--tw-text-opacity: 1;
-		color: rgb(28 100 242 / var(--tw-text-opacity));
+		color: rgb(37 99 235 / var(--tw-text-opacity));
 }</style>

package/components/propertyPicker/ObjectViewer.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         pureViewer?: boolean | undefined;
         collapsed?: boolean | undefined;
         rawKey?: boolean | undefined;
+        topBrackets?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/components/propertyPicker/PropPicker.svelte

@@ -1,13 +1,15 @@
 <script>import { ResourceService, VariableService } from '../../gen';
 import { workspaceStore } from '../../stores';
-import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
-import Icon from 'svelte-awesome';
-import { Button } from '../common';
+import { Badge, Button } from '../common';
 import { createEventDispatcher } from 'svelte';
 import ObjectViewer from './ObjectViewer.svelte';
 import { keepByKey } from './utils';
-export let pickableProperties = {};
+export let pickableProperties;
+export let displayContext = true;
+export let notSelectable;
+export let error = false;
+$: previousId = pickableProperties?.previousId;
 let variables = {};
 let resources = {};
 let displayVariable = false;
@@ -16,8 +18,14 @@ const dispatch = createEventDispatcher();
 const EMPTY_STRING = '';
 let search = '';
 const { propPickerConfig, clearFocus } = getContext('PropPickerWrapper');
-$: propsFiltered =
-    search === EMPTY_STRING ? pickableProperties : keepByKey(pickableProperties, search);
+$: flowInputsFiltered =
+    search === EMPTY_STRING
+        ? pickableProperties.flow_input
+        : keepByKey(pickableProperties.flow_input, search);
+$: resultByIdFiltered =
+    search === EMPTY_STRING
+        ? pickableProperties.priorIds
+        : keepByKey(pickableProperties.priorIds, search);
 async function loadVariables() {
     variables = Object.fromEntries((await VariableService.listVariable({
         workspace: $workspaceStore ?? ''
@@ -30,90 +38,131 @@ async function loadResources() {
 }
 </script>
 
-<div class="px-2 pt-2">
-	<input
-		type="text"
-		bind:value={search}
-		class="bg-gray-50 mt-1 border border-gray-300 text-gray-900 text-sm rounded-lg block px-2 mb-2 w-full"
-		placeholder="Search prop..."
-	/>
+{#if !notSelectable}
+	<div class="flex flex-row space-x-1">
+		{#if $propPickerConfig}
+			<Badge color="blue">
+				{`Selected: ${$propPickerConfig?.propName}`}
+			</Badge>
+			<Badge color="blue">
+				{`Mode: ${$propPickerConfig?.insertionMode}`}
+			</Badge>
+		{:else}
+			<Badge>&leftarrow; Select a step input</Badge>
+		{/if}
+	</div>
+{/if}
+<input
+	type="text"
+	bind:value={search}
+	class="bg-gray-50 mt-1 border border-gray-300 text-gray-900 text-sm rounded-lg block px-2 mb-2 w-full"
+	placeholder="Search prop..."
+/>
+<div class:bg-gray-100={!$propPickerConfig && !notSelectable}>
 	<div class="flex justify-between items-center space-x-1">
-		<span class="font-bold text-sm">Step Context</span>
-		<div class="flex space-x-2 items-center">
-			{#if $propPickerConfig}
-				<span
-					class="flex items-center bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded dark:bg-green-200 dark:text-green-900"
-				>
-					{`Selected: ${$propPickerConfig?.propName}`}
-				</span>
-				<span
-					class="flex items-center bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded dark:bg-green-200 dark:text-green-900"
-				>
-					{`Mode: ${$propPickerConfig?.insertionMode}`}
-				</span>
-				<button
-					class="border px-2 py-1 text-xs rounded-md flex items-center hover:bg-gray-50 hover:text-gray-900"
-					on:click={() => clearFocus()}
-				>
-					<Icon data={faClose} class="mr-2" scale={0.8} />
-					Deselect
-				</button>
-			{/if}
-		</div>
+		<span class="font-bold text-sm">Flow Input</span>
+		<div class="flex space-x-2 items-center" />
 	</div>
 	<div class="overflow-y-auto mb-2">
-		<ObjectViewer json={propsFiltered} on:select />
+		<ObjectViewer
+			pureViewer={!$propPickerConfig}
+			json={flowInputsFiltered}
+			on:select={(e) => {
+				dispatch('select', `flow_input.${e.detail}`)
+			}}
+		/>
 	</div>
-	<span class="font-bold text-sm">Variables </span>
-	<div class="overflow-y-auto mb-2">
-		{#if displayVariable}
-			<Button
-				color="light"
-				size="xs"
-				on:click={() => {
-					displayVariable = false
-				}}>(-)</Button
-			>
+	{#if error}
+		<span class="font-bold text-sm">Error</span>
+		<div class="overflow-y-auto mb-2">
 			<ObjectViewer
-				rawKey={true}
-				json={variables}
-				on:select={(e) => dispatch('select', `variable('${e.detail}')`)}
+				pureViewer={!$propPickerConfig}
+				json={{ previous_result: { error: 'The error to handle' } }}
+				on:select
 			/>
-		{:else}
-			<Button
-				color="light"
-				size="xs"
-				on:click={async () => {
-					await loadVariables()
-					displayVariable = true
-				}}>{'{...}'}</Button
-			>
+		</div>
+	{:else}
+		{#if previousId}
+			<span class="font-bold text-sm">Previous Result</span>
+			<div class="overflow-y-auto mb-2">
+				<ObjectViewer
+					pureViewer={!$propPickerConfig}
+					json={Object.fromEntries(
+						Object.entries(resultByIdFiltered).filter(([k, v]) => k == previousId)
+					)}
+					on:select={(e) => {
+						dispatch('select', `results.${e.detail}`)
+					}}
+				/>
+			</div>
 		{/if}
-	</div>
-	<span class="font-bold text-sm">Resources</span>
-	<div class="overflow-y-auto mb-2">
-		{#if displayResources}
-			<Button
-				color="light"
-				size="xs"
-				on:click={() => {
-					displayResources = false
-				}}>(-)</Button
-			>
-			<ObjectViewer
-				rawKey={true}
-				json={resources}
-				on:select={(e) => dispatch('select', `resource('${e.detail}')`)}
-			/>
-		{:else}
-			<Button
-				color="light"
-				size="xs"
-				on:click={async () => {
-					await loadResources()
-					displayResources = true
-				}}>{'{...}'}</Button
-			>
+		{#if Object.keys(pickableProperties.priorIds).length > 0}
+			<span class="font-bold text-sm">All Results</span>
+			<div class="overflow-y-auto mb-2">
+				<ObjectViewer
+					pureViewer={!$propPickerConfig}
+					collapsed={true}
+					json={resultByIdFiltered}
+					on:select={(e) => {
+						dispatch('select', `results.${e.detail}`)
+					}}
+				/>
+			</div>
 		{/if}
-	</div>
+	{/if}
+
+	{#if displayContext}
+		<span class="font-bold text-sm">Variables </span>
+		<div class="overflow-y-auto mb-2">
+			{#if displayVariable}
+				<Button
+					color="light"
+					size="xs"
+					on:click={() => {
+						displayVariable = false
+					}}>(-)</Button
+				>
+				<ObjectViewer
+					pureViewer={!$propPickerConfig}
+					rawKey={true}
+					json={variables}
+					on:select={(e) => dispatch('select', `variable('${e.detail}')`)}
+				/>
+			{:else}
+				<button
+					class="key font-normal rounded px-1 hover:bg-blue-100 !p-0"
+					on:click={async () => {
+						await loadVariables()
+						displayVariable = true
+					}}>{'{...}'}</button
+				>
+			{/if}
+		</div>
+		<span class="font-bold text-sm">Resources</span>
+		<div class="overflow-y-auto mb-2">
+			{#if displayResources}
+				<Button
+					color="light"
+					size="xs"
+					on:click={() => {
+						displayResources = false
+					}}>(-)</Button
+				>
+				<ObjectViewer
+					pureViewer={!$propPickerConfig}
+					rawKey={true}
+					json={resources}
+					on:select={(e) => dispatch('select', `resource('${e.detail}')`)}
+				/>
+			{:else}
+				<button
+					class="key font-normal rounded px-1 hover:bg-blue-100 !p-0"
+					on:click={async () => {
+						await loadResources()
+						displayResources = true
+					}}>{'{...}'}</button
+				>
+			{/if}
+		</div>
+	{/if}
 </div>

package/components/propertyPicker/PropPicker.svelte.d.ts

@@ -1,7 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import type { PickableProperties } from '../flows/previousResults';
 declare const __propDef: {
     props: {
-        pickableProperties?: Object | undefined;
+        pickableProperties: PickableProperties;
+        displayContext?: boolean | undefined;
+        notSelectable: boolean;
+        error?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/components/propertyPicker/PropPickerResult.svelte

@@ -0,0 +1,12 @@
+<script>import { createEventDispatcher } from 'svelte';
+import ObjectViewer from './ObjectViewer.svelte';
+export let result;
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="w-full">
+	<span class="font-bold text-sm">Result</span>
+	<div class="overflow-y-auto mb-2 w-full">
+		<ObjectViewer json={{ result }} on:select />
+	</div>
+</div>

package/components/propertyPicker/PropPickerResult.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        result: any;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PropPickerResultProps = typeof __propDef.props;
+export declare type PropPickerResultEvents = typeof __propDef.events;
+export declare type PropPickerResultSlots = typeof __propDef.slots;
+export default class PropPickerResult extends SvelteComponentTyped<PropPickerResultProps, PropPickerResultEvents, PropPickerResultSlots> {
+}
+export {};

package/components/propertyPicker/utils.d.ts

@@ -1,3 +1,3 @@
-export declare function keepByKey(json: Object, key: string): Object;
+export declare function keepByKey(json: Object | undefined, key: string): Object;
 export declare function getTypeAsString(arg: any): string;
 export declare function computeKey(key: string, isArray: boolean, currentPath?: string): string;

package/components/propertyPicker/utils.js

@@ -16,7 +16,7 @@ function diff(target, source) {
         return target;
     }
     const result = {};
-    Object.keys(target).forEach((key) => {
+    Object.keys(target ?? {}).forEach((key) => {
         if (typeof source[key] === 'object') {
             const difference = diff(target[key], source[key]);
             if (Object.keys(difference).length > 0) {
@@ -30,6 +30,9 @@ function diff(target, source) {
     return result;
 }
 export function keepByKey(json, key) {
+    if (!json) {
+        return {};
+    }
     return diff(json, filterByKey(json, key));
 }
 export function getTypeAsString(arg) {