windmill-components 1.87.0 → 1.89.0

package/package/components/flows/pickers/PickHubApp.svelte

@@ -0,0 +1,73 @@
+<script>import { createEventDispatcher, onMount } from 'svelte';
+import { Badge, Skeleton } from '../../common';
+import SearchItems from '../../SearchItems.svelte';
+import { loadHubApps } from '../../../utils';
+import ListFilters from '../../home/ListFilters.svelte';
+import NoItemFound from '../../home/NoItemFound.svelte';
+import RowIcon from '../../common/table/RowIcon.svelte';
+export let filter = '';
+let hubApps = undefined;
+let filteredItems = [];
+let appFilter = undefined;
+$: prefilteredItems = appFilter
+    ? (hubApps ?? []).filter((i) => i.apps.includes(appFilter))
+    : hubApps ?? [];
+$: apps = Array.from(new Set(filteredItems?.flatMap((x) => x.apps) ?? [])).sort();
+const dispatch = createEventDispatcher();
+onMount(async () => {
+    hubApps = await loadHubApps();
+});
+</script>
+
+<SearchItems
+	{filter}
+	items={prefilteredItems}
+	bind:filteredItems
+	f={(x) => x.summary + ' (' + x.apps.join(', ') + ')'}
+/>
+<div class="w-full flex mt-1 items-center gap-2">
+	<slot />
+	<input type="text" placeholder="Search Hub Apps" bind:value={filter} class="text-2xl grow" />
+</div>
+<ListFilters filters={apps} bind:selectedFilter={appFilter} resourceType />
+
+{#if hubApps}
+	{#if filteredItems.length == 0}
+		<NoItemFound />
+	{:else}
+		<ul class="divide-y divide-gray-200 border rounded-md">
+			{#each filteredItems as item (item)}
+				<li class="flex flex-row w-full">
+					<button
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						on:click={() => dispatch('pick', item)}
+					>
+						<div class="flex items-center gap-4">
+							<RowIcon kind="app" />
+
+							<div class="w-full text-left font-normal ">
+								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+									{#if item.marked}
+										{@html item.marked ?? ''}
+									{:else}
+										{item.summary ?? ''}
+									{/if}
+								</div>
+							</div>
+						</div>
+						<div class="min-w-1/3 gap-2 flex flex-wrap justify-end">
+							{#each item.apps as app}
+								<Badge color="gray" baseClass="border">{app}</Badge>
+							{/each}
+						</div>
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+{:else}
+	<div class="my-2" />
+	{#each Array(10).fill(0) as _}
+		<Skeleton layout={[[4], 0.5]} />
+	{/each}
+{/if}

package/package/components/flows/pickers/PickHubApp.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        filter?: string | undefined;
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PickHubAppProps = typeof __propDef.props;
+export type PickHubAppEvents = typeof __propDef.events;
+export type PickHubAppSlots = typeof __propDef.slots;
+export default class PickHubApp extends SvelteComponentTyped<PickHubAppProps, PickHubAppEvents, PickHubAppSlots> {
+}
+export {};

package/package/components/flows/pickers/PickHubFlow.svelte

@@ -0,0 +1,74 @@
+<script>import { createEventDispatcher, onMount } from 'svelte';
+import { Badge, Skeleton } from '../../common';
+import SearchItems from '../../SearchItems.svelte';
+import { loadHubFlows } from '../../../utils';
+import ListFilters from '../../home/ListFilters.svelte';
+import NoItemFound from '../../home/NoItemFound.svelte';
+import RowIcon from '../../common/table/RowIcon.svelte';
+export let filter = '';
+let hubFlows = undefined;
+let filteredItems = [];
+let appFilter = undefined;
+$: prefilteredItems = appFilter
+    ? (hubFlows ?? []).filter((i) => i.apps.includes(appFilter))
+    : hubFlows ?? [];
+$: apps = Array.from(new Set(filteredItems?.flatMap((x) => x.apps) ?? [])).sort();
+const dispatch = createEventDispatcher();
+onMount(async () => {
+    hubFlows = await loadHubFlows();
+});
+</script>
+
+<SearchItems
+	{filter}
+	items={prefilteredItems}
+	bind:filteredItems
+	f={(x) => x.summary + ' (' + x.apps.join(', ') + ')'}
+/>
+<div class="w-full flex mt-1 items-center gap-2">
+	<slot />
+	<input type="text" placeholder="Search Hub Flows" bind:value={filter} class="text-2xl grow" />
+</div>
+<ListFilters filters={apps} bind:selectedFilter={appFilter} resourceType />
+
+{#if hubFlows}
+	{#if filteredItems.length == 0}
+		<NoItemFound />
+	{:else}
+		<ul class="divide-y divide-gray-200 border rounded-md">
+			{#each filteredItems as item (item)}
+				<li class="flex flex-row w-full">
+					<button
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						on:click={() => dispatch('pick', item)}
+					>
+						<div class="flex items-center gap-4">
+							<RowIcon kind="flow" />
+
+							<div class="w-full text-left font-normal ">
+								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+									{#if item.marked}
+										{@html item.marked ?? ''}
+									{:else}
+										{item.summary ?? ''}
+									{/if}
+								</div>
+							</div>
+						</div>
+						<div class="min-w-1/3 gap-2 flex flex-wrap justify-end">
+							{#each item.apps as app}
+								<Badge color="gray" baseClass="border">{app}</Badge>
+							{/each}
+						</div>
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+{:else}
+	<div class="my-2" />
+
+	{#each Array(10).fill(0) as _}
+		<Skeleton layout={[[4], 0.5]} />
+	{/each}
+{/if}

package/package/components/flows/pickers/PickHubFlow.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        filter?: string | undefined;
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PickHubFlowProps = typeof __propDef.props;
+export type PickHubFlowEvents = typeof __propDef.events;
+export type PickHubFlowSlots = typeof __propDef.slots;
+export default class PickHubFlow extends SvelteComponentTyped<PickHubFlowProps, PickHubFlowEvents, PickHubFlowSlots> {
+}
+export {};

package/package/components/flows/pickers/PickHubScript.svelte

@@ -0,0 +1,88 @@
+<script>import { hubScripts } from '../../../stores';
+import { createEventDispatcher, onMount } from 'svelte';
+import { Badge, Skeleton } from '../../common';
+import SearchItems from '../../SearchItems.svelte';
+import { capitalize, classNames, loadHubScripts } from '../../../utils';
+import NoItemFound from '../../home/NoItemFound.svelte';
+import { APP_TO_ICON_COMPONENT } from '../../icons';
+import ListFilters from '../../home/ListFilters.svelte';
+export let kind = 'script';
+export let filter = '';
+const dispatch = createEventDispatcher();
+let filteredItems = [];
+let appFilter = undefined;
+$: items = ($hubScripts ?? []).filter((i) => i.kind === kind);
+$: prefilteredItems = appFilter ? (items ?? []).filter((i) => i.app == appFilter) : items ?? [];
+$: apps = Array.from(new Set(filteredItems?.map((x) => x.app) ?? [])).sort();
+onMount(() => {
+    if (!$hubScripts) {
+        loadHubScripts();
+    }
+});
+const maxItems = 40;
+</script>
+
+<SearchItems {filter} items={prefilteredItems} bind:filteredItems f={(x) => x.summary} />
+<div class="w-full flex mt-1 items-center gap-2">
+	<slot />
+	<input type="text" placeholder="Search Hub Scripts" bind:value={filter} class="text-2xl grow" />
+</div>
+<ListFilters filters={apps} bind:selectedFilter={appFilter} resourceType />
+
+{#if $hubScripts}
+	{#if filteredItems.length == 0}
+		<NoItemFound />
+	{:else}
+		<ul class="divide-y divide-gray-200 border rounded-md">
+			{#each filteredItems.slice(0, maxItems) as item (item.path)}
+				<li class="flex flex-row w-full">
+					<button
+						class="p-4 gap-4 flex flex-row grow hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						on:click={() => dispatch('pick', item)}
+					>
+						<div class="flex items-center gap-4">
+							<div
+								class={classNames(
+									'rounded-md p-1 flex justify-center items-center border',
+									'bg-gray-50 border-gray-200'
+								)}
+							>
+								<svelte:component
+									this={APP_TO_ICON_COMPONENT[item['app']]}
+									height={18}
+									width={18}
+								/>
+							</div>
+
+							<div class="w-full text-left font-normal ">
+								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+									{#if item.marked}
+										{@html item.marked ?? ''}
+									{:else}
+										{item.summary ?? ''}
+									{/if}
+								</div>
+								<div class="text-gray-600 text-xs ">
+									{item.path}
+								</div>
+							</div>
+						</div>
+						{#if kind !== 'script'}
+							<Badge color="gray" baseClass="border">{capitalize(kind)}</Badge>
+						{/if}
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+	{#if filteredItems.length > maxItems}
+		<div class="text-gray-500 text-sm py-4">
+			There are more items ({filteredItems.length}) than being displayed. Refine your search.
+		</div>
+	{/if}
+{:else}
+	<div class="my-2" />
+	{#each Array(10).fill(0) as _}
+		<Skeleton layout={[0.5, [4]]} />
+	{/each}
+{/if}

package/package/components/flows/pickers/PickHubScript.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        kind?: "script" | "failure" | "trigger" | "approval" | undefined;
+        filter?: string | undefined;
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PickHubScriptProps = typeof __propDef.props;
+export type PickHubScriptEvents = typeof __propDef.events;
+export type PickHubScriptSlots = typeof __propDef.slots;
+export default class PickHubScript extends SvelteComponentTyped<PickHubScriptProps, PickHubScriptEvents, PickHubScriptSlots> {
+}
+export {};

package/package/components/flows/pickers/PickScript.svelte

@@ -0,0 +1,38 @@
+<script>import ItemPicker from '../../ItemPicker.svelte';
+import { ScriptService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import { createEventDispatcher } from 'svelte';
+import Button from '../../common/button/Button.svelte';
+import { Code } from 'lucide-svelte';
+export let kind;
+let itemPicker;
+const dispatch = createEventDispatcher();
+async function loadItems() {
+    return await ScriptService.listScripts({ workspace: $workspaceStore, kind });
+}
+</script>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, summary) => {
+		dispatch('pick', { path, summary, kind })
+	}}
+	itemName={'Script'}
+	extraField="summary"
+	{loadItems}
+/>
+
+<Button
+	on:click={() => itemPicker.openDrawer()}
+	btnClasses="w-24 truncate"
+	size="sm"
+	spacingSize="md"
+	variant="border"
+	color="light"
+>
+	<div class="flex justify-center flex-col items-center gap-2">
+		<Code size={18} />
+
+		<span class="text-xs">Script</span>
+	</div>
+</Button>

package/package/components/flows/pickers/PickScript.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        kind: string;
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PickScriptProps = typeof __propDef.props;
+export type PickScriptEvents = typeof __propDef.events;
+export type PickScriptSlots = typeof __propDef.slots;
+export default class PickScript extends SvelteComponentTyped<PickScriptProps, PickScriptEvents, PickScriptSlots> {
+}
+export {};

package/package/components/flows/pickers/WorkspaceScriptPicker.svelte

@@ -0,0 +1,116 @@
+<script>import { workspaceStore } from '../../../stores';
+import { createEventDispatcher } from 'svelte';
+import { ScriptService } from '../../../gen';
+import SearchItems from '../../SearchItems.svelte';
+import { Badge, Skeleton } from '../../common';
+import { fade } from 'svelte/transition';
+import { flip } from 'svelte/animate';
+import { emptyString, truncateHash } from '../../../utils';
+import Toggle from '../../Toggle.svelte';
+import NoItemFound from '../../home/NoItemFound.svelte';
+export let kind = 'script';
+export let isTemplate = undefined;
+export let displayLock = false;
+let items = undefined;
+let filteredItems = undefined;
+export let filter = '';
+$: $workspaceStore && kind && loadItems();
+async function loadItems() {
+    items = await ScriptService.listScripts({ workspace: $workspaceStore, kind, isTemplate });
+}
+let ownerFilter = undefined;
+$: if ($workspaceStore) {
+    ownerFilter = undefined;
+}
+$: prefilteredItems = ownerFilter ? items?.filter((x) => x.path.startsWith(ownerFilter)) : items;
+$: owners = Array.from(new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])).sort();
+const dispatch = createEventDispatcher();
+let lockHash = false;
+</script>
+
+<SearchItems
+	{filter}
+	items={prefilteredItems}
+	bind:filteredItems
+	f={(x) => (emptyString(x.summary) ? x.path : x.summary + ' (' + x.path + ')')}
+/>
+<div class="flex flex-col min-h-0">
+	<div class="w-full flex mt-1 items-center gap-2 mb-3">
+		<slot />
+
+		<input
+			type="text"
+			placeholder="Search Workspace Scripts"
+			bind:value={filter}
+			class="text-2xl grow"
+		/>
+	</div>
+
+	{#if filteredItems}
+		{#if owners.length > 0}
+			<div class="gap-2 w-full flex flex-wrap my-2">
+				{#each owners as owner (owner)}
+					<div in:fade={{ duration: 50 }} animate:flip={{ duration: 100 }}>
+						<Badge
+							class="cursor-pointer hover:bg-gray-200"
+							on:click={() => {
+								ownerFilter = ownerFilter == owner ? undefined : owner
+							}}
+							color={owner === ownerFilter ? 'blue' : 'gray'}
+							baseClass={owner === ownerFilter ? 'border border-blue-500' : 'border'}
+						>
+							{owner}
+							{#if owner === ownerFilter}&cross;{/if}
+						</Badge>
+					</div>
+				{/each}
+			</div>
+		{/if}
+		{#if displayLock}
+			<div class="flex flex-row-reverse mb-1">
+				<Toggle
+					bind:checked={lockHash}
+					options={{ left: 'Latest version', right: 'Lock current hash permanently' }}
+				/>
+			</div>
+		{/if}
+		{#if filter.length > 0 && filteredItems.length == 0}
+			<NoItemFound />
+		{/if}
+		<ul class="divide-y divide-gray-200 overflow-auto">
+			{#each filteredItems as { path, hash, summary, description, marked }}
+				<li class="flex flex-row w-full">
+					<button
+						class="py-4 px-1 gap-1 flex flex-row grow hover:bg-blue-50 bg-white transition-all text-black"
+						on:click={() => {
+							dispatch('pick', { path, hash: lockHash ? hash : undefined })
+						}}
+					>
+						<div class="flex flex-col">
+							<div class="text-sm font-semibold flex flex-col">
+								<span class="mr-2 text-left">
+									{#if marked}
+										{@html marked}
+									{:else}
+										{!summary || summary.length == 0 ? path : summary}
+									{/if}</span
+								>
+								<span class="font-normal text-xs text-left italic overflow-hidden"
+									>{path ?? ''}</span
+								>
+							</div>
+							<div class="text-xs font-light italic text-left">{description ?? ''}</div>
+						</div>
+						{#if lockHash}<Badge large baseClass="ml-4">{truncateHash(hash ?? '')}</Badge>{/if}
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{:else}
+		<div class="mt-6" />
+
+		{#each new Array(6) as _}
+			<Skeleton layout={[[4], 0.7]} />
+		{/each}
+	{/if}
+</div>

package/package/components/flows/pickers/WorkspaceScriptPicker.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        kind?: "script" | "failure" | "trigger" | "approval" | undefined;
+        isTemplate?: boolean | undefined;
+        displayLock?: boolean | undefined;
+        filter?: string | undefined;
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type WorkspaceScriptPickerProps = typeof __propDef.props;
+export type WorkspaceScriptPickerEvents = typeof __propDef.events;
+export type WorkspaceScriptPickerSlots = typeof __propDef.slots;
+export default class WorkspaceScriptPicker extends SvelteComponentTyped<WorkspaceScriptPickerProps, WorkspaceScriptPickerEvents, WorkspaceScriptPickerSlots> {
+}
+export {};

package/package/components/flows/pickers/model.d.ts

@@ -0,0 +1,7 @@
+export interface HubItem {
+    app: string;
+    summary: string;
+    path: string;
+    version?: string;
+    ask_id: number;
+}

package/package/components/flows/pickers/model.js

@@ -0,0 +1 @@
+export {};

package/package/components/flows/previousResults.d.ts

@@ -0,0 +1,15 @@
+import type { Flow, FlowModule } from '../../gen';
+import type { FlowState } from './flowState';
+export type PickableProperties = {
+    flow_input: Object;
+    priorIds: Record<string, any>;
+    previousId: string | undefined;
+    hasResume: boolean;
+};
+type StepPropPicker = {
+    pickableProperties: PickableProperties;
+    extraLib: string;
+};
+export declare function getStepPropPicker(flowState: FlowState, parentModule: FlowModule | undefined, previousModule: FlowModule | undefined, id: string, flow: Flow, args: any, include_node: boolean): StepPropPicker;
+export declare function buildExtraLib(flowInput: Record<string, any>, results: Record<string, any>, resume: boolean): string;
+export {};

package/package/components/flows/previousResults.js

@@ -0,0 +1,146 @@
+import { schemaToObject } from '../../utils';
+function getSubModules(flowModule) {
+    if (flowModule.value.type === 'forloopflow') {
+        return [flowModule.value.modules];
+    }
+    else if (flowModule.value.type === 'branchall') {
+        return flowModule.value.branches.map((branch) => branch.modules);
+    }
+    else if (flowModule.value.type == 'branchone') {
+        return [
+            ...flowModule.value.branches.map((branch) => branch.modules),
+            flowModule.value.default
+        ];
+    }
+    return [];
+}
+function getAllSubmodules(flowModule) {
+    return getSubModules(flowModule).map((modules) => {
+        return modules.map((module) => {
+            return [module, ...getAllSubmodules(module).flat()];
+        }).flat();
+    });
+}
+function dfs(id, flow, getParents = true) {
+    if (id === undefined) {
+        return [];
+    }
+    function rec(id, moduleBranches) {
+        for (let modules of moduleBranches) {
+            for (const [i, module] of modules.entries()) {
+                if (module.id === id) {
+                    return getParents ? [module] : modules.slice(0, i + 1).reverse();
+                }
+                else {
+                    const submodules = getSubModules(module);
+                    if (submodules) {
+                        let found = rec(id, submodules);
+                        if (found) {
+                            return getParents ? [...found, module] : [...found, ...modules.slice(0, i).reverse()];
+                        }
+                    }
+                }
+            }
+        }
+        return undefined;
+    }
+    return rec(id, [flow.value.modules]) ?? [];
+}
+function getFlowInput(parentModules, flowState, args, schema) {
+    const parentModule = parentModules.shift();
+    const parentState = parentModule ? flowState[parentModule.id] : undefined;
+    if (parentState && parentModule) {
+        if (parentState.previewArgs) {
+            return parentState.previewArgs;
+        }
+        else {
+            const parentFlowInput = getFlowInput(parentModules, flowState, args, schema);
+            if (parentModule.value.type === 'forloopflow') {
+                return {
+                    iter: {
+                        value: "Iteration's value",
+                        index: "Iteration's index"
+                    },
+                    ...parentFlowInput,
+                };
+            }
+            else {
+                return parentFlowInput;
+            }
+        }
+    }
+    else {
+        return schemaToObject(schema, args);
+    }
+}
+export function getStepPropPicker(flowState, parentModule, previousModule, id, flow, args, include_node) {
+    const flowInput = getFlowInput(dfs(parentModule?.id, flow), flowState, args, flow.schema);
+    const previousIds = dfs(id, flow, false).map((x) => {
+        let submodules = getAllSubmodules(x).flat().map((x) => x.id);
+        if (submodules.includes(id)) {
+            return [x.id];
+        }
+        else {
+            return [x.id, ...submodules];
+        }
+    }).flat();
+    if (!include_node) {
+        previousIds.shift();
+    }
+    let priorIds = Object.fromEntries(previousIds.map((id) => [id, flowState[id]?.previewResult ?? {}]).reverse());
+    const pickableProperties = {
+        flow_input: flowInput,
+        priorIds: priorIds,
+        previousId: previousIds[0],
+        hasResume: previousModule?.suspend != undefined,
+    };
+    if (pickableProperties.hasResume) {
+        pickableProperties["approvers"] = "The list of approvers";
+    }
+    return {
+        extraLib: buildExtraLib(flowInput, priorIds, previousModule?.suspend != undefined),
+        pickableProperties
+    };
+}
+export function buildExtraLib(flowInput, results, resume) {
+    return `
+/**
+* get variable (including secret) at path
+* @param {string} path - path of the variable (e.g: f/examples/secret)
+*/
+declare function variable(path: string): string;
+
+/**
+* get resource at path
+* @param {string} path - path of the resource (e.g: g/all/my_resource)
+*/
+declare function resource(path: string): any;
+
+/**
+* flow input as an object
+*/
+declare const flow_input = ${JSON.stringify(flowInput)};
+
+/**
+* static params of this same step
+*/
+declare const params: any;
+
+/**
+ * result by id
+ */
+declare const results = ${JSON.stringify(results)};
+
+${resume ? `
+/**
+ * resume payload
+ */
+declare const resume: any
+
+/**
+ * The list of approvers separated by ,
+ */
+declare const approvers: string
+` : ''}
+`;
+}