windmill-components 1.394.7 → 1.405.0

package/package/components/flows/pickers/PickHubScriptQuick.svelte

@@ -0,0 +1,138 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { Skeleton } from '../../common';
+import { classNames } from '../../../utils';
+import { APP_TO_ICON_COMPONENT } from '../../icons';
+import { IntegrationService, ScriptService } from '../../../gen';
+import { Circle } from 'lucide-svelte';
+export let kind = 'script';
+export let filter = '';
+export let loading = false;
+export let selected = undefined;
+let hubNotAvailable = false;
+const dispatch = createEventDispatcher();
+export let appFilter = undefined;
+export let items = [];
+export let apps = [];
+let allApps = [];
+$: applyFilter(filter, kind, appFilter);
+$: getAllApps(kind);
+async function getAllApps(filterKind) {
+    try {
+        hubNotAvailable = false;
+        allApps = (await IntegrationService.listHubIntegrations({
+            kind: filterKind
+        })).map((x) => x.name);
+        apps = allApps;
+    }
+    catch (err) {
+        console.error('Hub is not available');
+        allApps = [];
+        apps = [];
+        hubNotAvailable = true;
+    }
+}
+let startTs = 0;
+async function applyFilter(filter, filterKind, appFilter) {
+    try {
+        loading = true;
+        hubNotAvailable = false;
+        const ts = Date.now();
+        startTs = ts;
+        await new Promise((resolved, rejected) => setTimeout(resolved, 200));
+        if (ts < startTs)
+            return;
+        const scripts = filter.length > 0
+            ? await ScriptService.queryHubScripts({
+                text: `${filter}`,
+                limit: 40,
+                kind: filterKind
+            })
+            : (await ScriptService.getTopHubScripts({
+                limit: 40,
+                kind: filterKind,
+                app: appFilter
+            })).asks ?? [];
+        const mappedItems = scripts.map((x) => ({
+            ...x,
+            path: `hub/${x.version_id}/${x.app}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
+            summary: `${x.summary} (${x.app})`
+        }));
+        if (filter.length > 0) {
+            apps = Array.from(new Set(mappedItems?.map((x) => x.app) ?? [])).sort();
+        }
+        else {
+            apps = allApps;
+        }
+        items = appFilter ? mappedItems.filter((x) => x.app === appFilter) : mappedItems;
+        if (ts === startTs) {
+            loading = false;
+        }
+        hubNotAvailable = false;
+    }
+    catch (err) {
+        hubNotAvailable = true;
+        console.error('Hub not available');
+        loading = false;
+    }
+}
+function onKeyDown(e) {
+    if (selected != undefined &&
+        items &&
+        selected >= 0 &&
+        selected < items?.length &&
+        e.key === 'Enter') {
+        e.preventDefault();
+        let item = items[selected];
+        dispatch('pickScript', item);
+    }
+}
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+{#if hubNotAvailable}
+	<div class="text-2xs text-red-400 ftext-2xs font-light text-center py-2 px-3 items-center">
+		Hub not available
+	</div>
+{:else if loading}
+	{#each Array(15).fill(0) as _}
+		<Skeleton layout={[0.1, [1.5]]} />
+	{/each}
+{:else if items.length > 0 && apps.length > 0}
+	<ul>
+		{#each items as item, index (item.path)}
+			<li class="w-full">
+				<button
+					class="px-3 py-2 gap-2 flex flex-row w-full hover:bg-surface-hover transition-all items-center rounded-md {index ===
+					selected
+						? 'bg-surface-hover'
+						: ''}"
+					on:click={() => dispatch('pickScript', item)}
+				>
+					<div class={classNames('flex justify-center items-center')}>
+						{#if item['app'] in APP_TO_ICON_COMPONENT}
+							<svelte:component this={APP_TO_ICON_COMPONENT[item['app']]} height={14} width={14} />
+						{:else}
+							<div
+								class="w-[14px] h-[14px] text-gray-400 flex flex-row items-center justify-center"
+							>
+								<Circle size="12" />
+							</div>
+						{/if}
+					</div>
+
+					<span class="grow truncate text-left text-2xs text-primary font-normal">
+						{item.summary ?? ''}
+					</span>
+					{#if index === selected}
+						<kbd class="!text-xs">&crarr;</kbd>
+					{/if}
+				</button>
+			</li>
+		{/each}
+	</ul>
+	{#if items.length == 40}
+		<div class="text-2xs text-tercary font-extralight text-center py-2 px-3 items-center">
+			There are more items than being displayed. Refine your search.
+		</div>
+	{/if}
+{/if}

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

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import { type HubScriptKind } from '../../../gen';
+declare const __propDef: {
+    props: {
+        kind?: string | undefined;
+        filter?: string | undefined;
+        loading?: boolean | undefined;
+        selected?: number | undefined;
+        appFilter?: string | undefined;
+        items?: {
+            path: string;
+            summary: string;
+            id: number;
+            version_id: number;
+            ask_id: number;
+            app: string;
+            kind: HubScriptKind;
+        }[] | undefined;
+        apps?: string[] | undefined;
+    };
+    events: {
+        pickScript: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PickHubScriptQuickProps = typeof __propDef.props;
+export type PickHubScriptQuickEvents = typeof __propDef.events;
+export type PickHubScriptQuickSlots = typeof __propDef.slots;
+export default class PickHubScriptQuick extends SvelteComponent<PickHubScriptQuickProps, PickHubScriptQuickEvents, PickHubScriptQuickSlots> {
+}
+export {};

package/package/components/flows/pickers/TopLevelNode.svelte

@@ -0,0 +1,58 @@
+<script>import BarsStaggered from '../../icons/BarsStaggered.svelte';
+import { CheckCircle2, ChevronRight, Code, GitBranch, Repeat, Square, Zap } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+export let label;
+export let selected = false;
+export let returnIcon = false;
+const dispatch = createEventDispatcher();
+</script>
+
+<button
+	class={twMerge(
+		'w-full text-left py-2 px-1.5 hover:bg-surface-hover text-xs font-medium transition-all whitespace-nowrap flex flex-row gap-2 items-center rounded-md',
+		selected ? 'bg-surface-hover' : '',
+		$$props.class
+	)}
+	on:pointerdown={() => dispatch('select', label)}
+	role="menuitem"
+	tabindex="-1"
+>
+	<span class="grow flex items-center gap-2">
+		{#if label === 'Action'}
+			<Code size={14} />
+			Action
+			<ChevronRight size={12} class="ml-auto" color="#4c566a" />
+		{:else if label === 'Trigger'}
+			<Zap size={14} />
+			Trigger
+			<ChevronRight size={12} class="ml-auto" color="#4c566a" />
+		{:else if label === 'Approval/Prompt'}
+			<CheckCircle2 size={14} />
+			Approval/Prompt
+			<ChevronRight size={12} class="ml-auto" color="#4c566a" />
+		{:else if label === 'Flow'}
+			<BarsStaggered size={14} />
+			Flow
+			<ChevronRight size={12} class="ml-auto" color="#4c566a" />
+		{:else if label === 'End Flow'}
+			<Square size={14} />
+			End Flow
+		{:else if label === 'For Loop'}
+			<Repeat size={14} />
+			For Loop
+		{:else if label === 'While Loop'}
+			<Repeat size={14} />
+			While Loop
+		{:else if label === 'Branch to one'}
+			<GitBranch size={14} />
+			Branch to one
+		{:else if label === 'Branch to all'}
+			<GitBranch size={14} />
+			Branch to all
+		{/if}
+	</span>
+	{#if returnIcon && selected}
+		<kbd class="!text-xs text-right">&crarr;</kbd>
+	{/if}
+</button>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        label: string;
+        selected?: boolean | undefined;
+        returnIcon?: boolean | undefined;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TopLevelNodeProps = typeof __propDef.props;
+export type TopLevelNodeEvents = typeof __propDef.events;
+export type TopLevelNodeSlots = typeof __propDef.slots;
+export default class TopLevelNode extends SvelteComponent<TopLevelNodeProps, TopLevelNodeEvents, TopLevelNodeSlots> {
+}
+export {};

package/package/components/flows/pickers/WorkspaceScriptPickerQuick.svelte

@@ -0,0 +1,120 @@
+<script>import { workspaceStore } from '../../../stores';
+import { createEventDispatcher } from 'svelte';
+import { FlowService, ScriptService } from '../../../gen';
+import SearchItems from '../../SearchItems.svelte';
+import { Skeleton } from '../../common';
+import { emptyString } from '../../../utils';
+import { Code2 } from 'lucide-svelte';
+import BarsStaggered from '../../icons/BarsStaggered.svelte';
+export let kind = 'script';
+export let isTemplate = undefined;
+export let selected = undefined;
+let items = undefined;
+let filteredItems = undefined;
+export let filteredWithOwner = undefined;
+export let filter = '';
+export let owners = [];
+$: $workspaceStore && kind && loadItems();
+async function loadItems() {
+    items =
+        kind == 'flow'
+            ? await FlowService.listFlows({ workspace: $workspaceStore })
+            : await ScriptService.listScripts({
+                workspace: $workspaceStore,
+                kinds: kind,
+                isTemplate
+            });
+}
+export let ownerFilter = undefined;
+$: if ($workspaceStore) {
+    ownerFilter = undefined;
+}
+$: owners = Array.from(new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])).sort((a, b) => {
+    if (a.startsWith('u/') && !b.startsWith('u/'))
+        return -1;
+    if (b.startsWith('u/') && !a.startsWith('u/'))
+        return 1;
+    if (a.startsWith('f/') && !b.startsWith('f/'))
+        return -1;
+    if (b.startsWith('f/') && !a.startsWith('f/'))
+        return 1;
+    return a.localeCompare(b);
+});
+const dispatch = createEventDispatcher();
+let lockHash = false;
+$: filteredWithOwner =
+    ownerFilter != undefined
+        ? filteredItems?.filter((x) => x.path.startsWith(ownerFilter?.name))
+        : filteredItems;
+function onKeyDown(e) {
+    if (selected != undefined &&
+        filteredWithOwner &&
+        selected >= 0 &&
+        selected < filteredWithOwner.length &&
+        e.key === 'Enter') {
+        e.preventDefault();
+        let item = filteredWithOwner[selected];
+        if (kind == 'flow') {
+            dispatch('pickFlow', { path: item.path });
+        }
+        else {
+            dispatch('pickScript', { path: item.path, hash: lockHash ? item.hash : undefined });
+        }
+    }
+}
+</script>
+
+<SearchItems
+	{filter}
+	{items}
+	bind:filteredItems
+	f={(x) => (emptyString(x.summary) ? x.path : x.summary + ' (' + x.path + ')')}
+/>
+
+<svelte:window on:keydown={onKeyDown} />
+{#if filteredItems}
+	{#if filteredItems.length == 0}
+		<div class="text-2xs text-tertiary font-light text-center py-2 px-3 items-center">
+			{kind == 'flow' ? 'No flows found.' : 'No scripts found.'}
+		</div>
+	{/if}
+	<ul>
+		{#each filteredWithOwner ?? [] as { path, hash, summary, marked }, index}
+			<li class="w-full">
+				<button
+					class="px-3 py-2 gap-2 flex flex-row w-full hover:bg-surface-hover transition-all items-center rounded-md {index ===
+					selected
+						? 'bg-surface-hover'
+						: ''}"
+					on:click={() => {
+						if (kind == 'flow') {
+							dispatch('pickFlow', { path: path })
+						} else {
+							dispatch('pickScript', { path: path, hash: lockHash ? hash : undefined })
+						}
+					}}
+				>
+					{#if kind == 'flow'}
+						<BarsStaggered size={14} />
+					{:else}
+						<Code2 size={14} />
+					{/if}
+					<span class="grow min-w-0 truncate text-left text-2xs text-primary font-normal">
+						{#if marked}
+							{@html marked}
+						{:else}
+							{!summary || summary.length == 0 ? path : summary}
+						{/if}</span
+					>
+					{#if index === selected}
+						<kbd class="!text-xs">&crarr;</kbd>
+					{/if}
+				</button>
+			</li>
+		{/each}
+	</ul>
+{:else}
+	{#each Array(10).fill(0) as _}
+		<Skeleton layout={[0.5, [1.5]]} />
+	{/each}
+{/if}

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

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        kind?: "script" | "failure" | "trigger" | "approval" | "flow" | "preprocessor" | undefined;
+        isTemplate?: boolean | undefined;
+        selected?: number | undefined;
+        filteredWithOwner?: ({
+            path: string;
+            summary?: string | undefined;
+            description?: string | undefined;
+            hash?: string | undefined;
+        } & {
+            marked?: string | undefined;
+        })[] | undefined;
+        filter?: string | undefined;
+        owners?: string[] | undefined;
+        ownerFilter?: {
+            kind: 'inline' | 'owner' | 'integrations';
+            name: string | undefined;
+        } | undefined;
+    };
+    events: {
+        pickFlow: CustomEvent<any>;
+        pickScript: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WorkspaceScriptPickerQuickProps = typeof __propDef.props;
+export type WorkspaceScriptPickerQuickEvents = typeof __propDef.events;
+export type WorkspaceScriptPickerQuickSlots = typeof __propDef.slots;
+export default class WorkspaceScriptPickerQuick extends SvelteComponent<WorkspaceScriptPickerQuickProps, WorkspaceScriptPickerQuickEvents, WorkspaceScriptPickerQuickSlots> {
+}
+export {};

package/package/components/flows/types.d.ts

@@ -36,4 +36,5 @@ export type FlowEditorContext = {
     initialPath: string;
     flowInputsStore: Writable<FlowInput>;
     customUi: FlowBuilderWhitelabelCustomUi;
+    insertButtonOpen: Writable<boolean>;
 };

package/package/components/graph/FlowGraphV2.svelte

@@ -21,17 +21,21 @@ import DataflowEdge from './renderers/edges/DataflowEdge.svelte';
 import { encodeState } from '../../utils';
 import BranchOneStart from './renderers/nodes/BranchOneStart.svelte';
 import NoBranchNode from './renderers/nodes/NoBranchNode.svelte';
+import { Alert, Drawer } from '../common';
+import Button from '../common/button/Button.svelte';
+import FlowYamlEditor from '../flows/header/FlowYamlEditor.svelte';
 export let success = undefined;
 export let modules = [];
 export let failureModule = undefined;
+export let preprocessorModule = undefined;
 export let minHeight = 0;
 export let maxHeight = undefined;
 export let notSelectable = false;
 export let flowModuleStates = undefined;
 export let selectedId = writable(undefined);
 export let insertable = false;
-export let moving = undefined;
 export let scroll = false;
+export let moving = undefined;
 // Download: display a top level button to open the graph in a new tab
 export let download = false;
 export let fullSize = false;
@@ -94,7 +98,7 @@ $: graph = graphBuilder(modules, {
     insertable,
     flowModuleStates,
     selectedId: $selectedId
-}, failureModule, {
+}, failureModule, preprocessorModule, {
     deleteBranch: (detail, label) => {
         $selectedId = label;
         dispatch('deleteBranch', detail);
@@ -131,6 +135,9 @@ const nodes = writable([]);
 const edges = writable([]);
 let height = 0;
 function updateStores() {
+    if (graph.error) {
+        return;
+    }
     $nodes = layoutNodes(graph?.nodes);
     $edges = graph.edges;
     height = Math.max(...$nodes.map((n) => n.position.y + NODE.height + 40), minHeight);
@@ -161,10 +168,11 @@ $: showDataflow =
         !$selectedId.startsWith('constants') &&
         !$selectedId.startsWith('settings') &&
         $selectedId !== 'failure' &&
+        $selectedId !== 'preprocessor' &&
         $selectedId !== 'Result';
 const viewport = writable({
     x: 0,
-    y: 5,
+    y: 35,
     zoom: 1
 });
 function centerViewport(width) {
@@ -178,66 +186,93 @@ $: width && centerViewport(width);
 onMount(() => {
     centerViewport(width);
 });
+let yamlEditorDrawer = undefined;
 </script>
 
+{#if insertable}
+	<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
+{/if}
+
 <div style={`height: ${height}px; max-height: ${maxHeight}px;`} bind:clientWidth={width}>
-	<SvelteFlow
-		{nodes}
-		{edges}
-		{edgeTypes}
-		{nodeTypes}
-		{viewport}
-		{height}
-		minZoom={0.5}
-		connectionLineType={ConnectionLineType.SmoothStep}
-		defaultEdgeOptions={{ type: 'smoothstep' }}
-		preventScrolling={scroll}
-		zoomOnDoubleClick={false}
-		elementsSelectable={false}
-		{proOptions}
-		nodesDraggable={false}
-	>
-		<div class="absolute inset-0 !bg-surface-secondary" />
-		<Controls position="top-right" orientation="horizontal" showLock={false}>
-			{#if download}
-				<ControlButton
-					on:click={() => {
-						try {
-							localStorage.setItem('svelvet', encodeState({ modules, failureModule }))
-						} catch (e) {
-							console.error('error interacting with local storage', e)
-						}
-						window.open('/view_graph', '_blank')
-					}}
-					class="!bg-surface"
-				>
-					<Expand size="14" />
-				</ControlButton>
-			{/if}
-		</Controls>
+	{#if graph?.error}
+		<div class="center-center">
+			<Alert title="Error parsing the flow" type="error" class="max-w-1/2">
+				{graph.error}
 
-		<Controls
-			position="top-left"
-			orientation="horizontal"
-			showLock={false}
-			showZoom={false}
-			showFitView={false}
-			class="!shadow-none"
-		>
-			{#if showDataflow}
-				<Toggle
-					value={$useDataflow}
-					on:change={() => {
-						$useDataflow = !$useDataflow
-					}}
+				<Button
+					color="red"
 					size="xs"
-					options={{
-						right: 'Dataflow'
-					}}
-				/>
-			{/if}
-		</Controls>
-	</SvelteFlow>
+					btnClasses="mt-2 w-min"
+					on:click={() => yamlEditorDrawer?.openDrawer()}>Open YAML editor</Button
+				>
+			</Alert>
+		</div>
+	{:else}
+		<SvelteFlow
+			on:paneclick={(e) => {
+				window.dispatchEvent(new Event('focus'))
+			}}
+			{nodes}
+			{edges}
+			{edgeTypes}
+			{nodeTypes}
+			{viewport}
+			{height}
+			minZoom={0.5}
+			connectionLineType={ConnectionLineType.SmoothStep}
+			defaultEdgeOptions={{ type: 'smoothstep' }}
+			preventScrolling={scroll}
+			zoomOnDoubleClick={false}
+			elementsSelectable={false}
+			{proOptions}
+			nodesDraggable={false}
+			--background-color={false}
+		>
+			<div class="absolute inset-0 !bg-surface-secondary" />
+			<Controls position="top-right" orientation="horizontal" showLock={false}>
+				{#if download}
+					<ControlButton
+						on:click={() => {
+							try {
+								localStorage.setItem(
+									'svelvet',
+									encodeState({ modules, failureModule, preprocessorModule })
+								)
+							} catch (e) {
+								console.error('error interacting with local storage', e)
+							}
+							window.open('/view_graph', '_blank')
+						}}
+						class="!bg-surface"
+					>
+						<Expand size="14" />
+					</ControlButton>
+				{/if}
+			</Controls>
+
+			<Controls
+				position="top-left"
+				orientation="horizontal"
+				showLock={false}
+				showZoom={false}
+				showFitView={false}
+				class="!shadow-none"
+			>
+				{#if showDataflow}
+					<Toggle
+						value={$useDataflow}
+						on:change={() => {
+							$useDataflow = !$useDataflow
+						}}
+						size="xs"
+						options={{
+							right: 'Dataflow'
+						}}
+					/>
+				{/if}
+			</Controls>
+		</SvelteFlow>
+	{/if}
 </div>
 
 <style>

package/package/components/graph/FlowGraphV2.svelte.d.ts

@@ -9,14 +9,15 @@ declare const __propDef: {
         success?: boolean | undefined;
         modules?: FlowModule[] | undefined;
         failureModule?: FlowModule | undefined;
+        preprocessorModule?: FlowModule | undefined;
         minHeight?: number | undefined;
         maxHeight?: number | undefined;
         notSelectable?: boolean | undefined;
         flowModuleStates?: Record<string, GraphModuleState> | undefined;
         selectedId?: Writable<string | undefined> | undefined;
         insertable?: boolean | undefined;
-        moving?: string | undefined;
         scroll?: boolean | undefined;
+        moving?: string | undefined;
         download?: boolean | undefined;
         fullSize?: boolean | undefined;
         disableAi?: boolean | undefined;

package/package/components/graph/graphBuilder.d.ts

@@ -10,7 +10,8 @@ export type GraphEventHandlers = {
     selectedIteration: (detail: any, moduleId: string) => void;
     changeId: (newId: string) => void;
 };
-export default function graphBuilder(modules: FlowModule[] | undefined, extra: Record<string, any>, failureModule: FlowModule | undefined, eventHandlers: GraphEventHandlers, success: boolean | undefined, useDataflow: boolean | undefined, selectedId: string | undefined, moving: string | undefined): {
+export default function graphBuilder(modules: FlowModule[] | undefined, extra: Record<string, any>, failureModule: FlowModule | undefined, preprocessorModule: FlowModule | undefined, eventHandlers: GraphEventHandlers, success: boolean | undefined, useDataflow: boolean | undefined, selectedId: string | undefined, moving: string | undefined): {
     nodes: Node[];
     edges: Edge[];
+    error?: string | undefined;
 };