windmill-components 1.52.0 → 1.55.0

package/components/flows/map/InsertModuleButton.svelte

@@ -1,7 +1,8 @@
 <script>import { Menu } from '../../common';
-import { faCode, faCodeBranch, faPlus, faRepeat } from '@fortawesome/free-solid-svg-icons';
+import { faCode, faCodeBranch, faPlus, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
+import { Repeat } from 'lucide-svelte';
 const dispatch = createEventDispatcher();
 </script>
 
@@ -24,17 +25,20 @@ const dispatch = createEventDispatcher();
 			tabindex="-1"
 		>
 			<Icon data={faCode} scale={0.8} class="mr-1" />
-			Script or Module
+			Script
 		</button>
 		<button
-			class="w-full text-left p-2 hover:bg-gray-100"
+			class="w-full inline-flex gap-1 text-left p-2 hover:bg-gray-100"
 			on:click={() => {
 				close()
 				dispatch('new', 'forloop')
 			}}
 			role="menuitem"
 		>
-			<Icon data={faRepeat} scale={0.8} class="mr-1" />
+			<span>
+				<Repeat size={14} />
+			</span>
+
 			For Loop
 		</button>
 
@@ -61,5 +65,17 @@ const dispatch = createEventDispatcher();
 			<Icon data={faCodeBranch} scale={0.8} class="mr-1" />
 			Branch to all
 		</button>
+
+		<button
+			class="w-full text-left p-2 hover:bg-gray-100"
+			on:click={() => {
+				close()
+				dispatch('new', 'flow')
+			}}
+			role="menuitem"
+		>
+			<Icon data={faBarsStaggered} scale={0.8} class="mr-1" />
+			Flow
+		</button>
 	</div>
 </Menu>

package/components/flows/map/InsertModuleButton.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         new: CustomEvent<any>;
     } & {

package/components/flows/map/MapItem.svelte

@@ -4,10 +4,11 @@ import FlowModuleSchemaMap from './FlowModuleSchemaMap.svelte';
 import InsertModuleButton from './InsertModuleButton.svelte';
 import FlowBranchOneMap from './FlowBranchOneMap.svelte';
 import FlowBranchAllMap from './FlowBranchAllMap.svelte';
-import { faArrowRotateForward, faBuilding, faCode, faCodeBranch, faLongArrowDown, faRepeat } from '@fortawesome/free-solid-svg-icons';
+import { faCodeBranch, faLongArrowDown } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import IconedResourceType from '../../IconedResourceType.svelte';
 import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
+import { Building, Repeat } from 'lucide-svelte';
 export let mod;
 const { select, selectedId } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
@@ -36,7 +37,7 @@ function onDelete(event) {
 				{...itemProps}
 			>
 				<div slot="icon">
-					<Icon data={faArrowRotateForward} scale={1.1} />
+					<Repeat size={16} />
 				</div>
 			</FlowModuleSchemaItem>
 			<div class="flex flex-row w-full">
@@ -99,11 +100,16 @@ function onDelete(event) {
 						<Icon data={faLongArrowDown} scale={1.1} />
 					{:else if mod.value.type === 'script'}
 						{#if mod.value.path.startsWith('hub/')}
-							<div class="w-5">
-								<IconedResourceType name={mod.value.path.split('/')[2]} silent={true} />
+							<div>
+								<IconedResourceType
+									width="20px"
+									height="20px"
+									name={mod.value.path.split('/')[2]}
+									silent={true}
+								/>
 							</div>
 						{:else}
-							<Icon data={faBuilding} scale={1.1} />
+							<Building size={14} />
 						{/if}
 					{/if}
 				</div>

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

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         disabled?: boolean | undefined;
         label: string;
-        lang?: SupportedLanguage | 'pgsql' | undefined;
+        lang?: SupportedLanguage | 'pgsql' | 'mysql' | undefined;
         icon?: IconDefinition | undefined;
         iconColor?: string | undefined;
     };

package/components/flows/pickers/PickHubFlow.svelte

@@ -0,0 +1,72 @@
+<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 Scripts" 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}
+	{#each Array(10).fill(0) as _}
+		<Skeleton layout={[[4], 0.5]} />
+	{/each}
+{/if}

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/components/flows/pickers/PickHubScript.svelte

@@ -1,78 +1,87 @@
 <script>import { hubScripts } from '../../../stores';
 import { createEventDispatcher, onMount } from 'svelte';
-import IconedResourceType from '../../IconedResourceType.svelte';
 import { Badge, Skeleton } from '../../common';
 import SearchItems from '../../SearchItems.svelte';
-import { loadHubScripts } from '../../../utils';
+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 = '';
-$: items = ($hubScripts ?? []).filter((i) => i.kind === kind);
+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();
-const dispatch = createEventDispatcher();
 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 />
 
-<div class="flex flex-col min-h-0">
-	<div class="w-12/12 pb-2 flex flex-row my-1 gap-1">
-		<input type="text" placeholder="Search Hub Scripts" bind:value={filter} class="text-2xl grow" />
-	</div>
-
-	<div class="gap-2 w-full flex flex-wrap pb-2">
-		{#each apps as app}
-			<Badge
-				class="cursor-pointer hover:bg-gray-200"
-				on:click={() => {
-					appFilter = appFilter == app ? undefined : app
-				}}
-				capitalize
-				color={app === appFilter ? 'blue' : 'gray'}
-			>
-				{app}
-				{#if app === appFilter}&cross;{/if}
-			</Badge>
-		{/each}
-	</div>
-	<div class="overflow-auto">
-		<ul class="divide-y divide-gray-200">
-			{#if $hubScripts}
-				{#if filter.length > 0 && filteredItems.length == 0}
-					<p>No items found</p>
-				{/if}
-				{#each filteredItems as obj}
-					<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"
-							on:click={() => {
-								dispatch('pick', obj)
-							}}
-						>
-							<div class="mr-2 text-sm text-left truncate w-32 shrink-0">
-								<IconedResourceType after={true} silent={false} name={obj['app']} />
+{#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="mr-2 text-left">
-								{#if obj.marked}
-									{@html obj.marked ?? ''}
-								{:else}
-									{obj.summary ?? ''}
-								{/if}
+
+							<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>
-						</button>
-					</li>
-				{/each}
-			{:else}
-				{#each Array(10).fill(0) as sk}
-					<Skeleton layout={[[4], 0.5]} />
-				{/each}
-			{/if}
+						</div>
+						{#if kind !== 'script'}
+							<Badge color="gray" baseClass="border">{capitalize(kind)}</Badge>
+						{/if}
+					</button>
+				</li>
+			{/each}
 		</ul>
-	</div>
-</div>
+	{/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}
+	{#each Array(10).fill(0) as _}
+		<Skeleton layout={[[4], 0.5]} />
+	{/each}
+{/if}

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

@@ -9,7 +9,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type PickHubScriptProps = typeof __propDef.props;
 export type PickHubScriptEvents = typeof __propDef.events;

package/components/flows/pickers/PickScript.svelte

@@ -3,7 +3,7 @@ import { ScriptService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { createEventDispatcher } from 'svelte';
 import Button from '../../common/button/Button.svelte';
-import { Code } from 'svelte-lucide';
+import { Code } from 'lucide-svelte';
 export let kind;
 let itemPicker;
 const dispatch = createEventDispatcher();
@@ -31,7 +31,7 @@ async function loadItems() {
 	color="light"
 >
 	<div class="flex justify-center flex-col items-center gap-2">
-		<Code size="18px" />
+		<Code size={18} />
 
 		<span class="text-xs">Script</span>
 	</div>

package/components/flows/pickers/WorkspaceScriptPicker.svelte

@@ -1,53 +1,113 @@
 <script>import { workspaceStore } from '../../../stores';
 import { createEventDispatcher } from 'svelte';
-import Fuse from 'fuse.js';
 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';
-let items = [];
-let filteredItems = [];
+export let isTemplate = undefined;
+export let displayLock = false;
+let items = undefined;
+let filteredItems = undefined;
 export let filter = '';
-const fuseOptions = {
-    includeScore: false,
-    keys: ['path', 'summay']
-};
-const fuse = new Fuse(items, fuseOptions);
 $: $workspaceStore && kind && loadItems();
-$: filteredItems =
-    filter.length > 0 && items ? fuse.search(filter).map((value) => value.item) : items;
 async function loadItems() {
-    items = await ScriptService.listScripts({ workspace: $workspaceStore, kind });
-    fuse.setCollection(items);
+    items = await ScriptService.listScripts({ workspace: $workspaceStore, kind, isTemplate });
 }
+let 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 = displayLock;
 </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-12/12 pb-4 mt-1">
-		<input type="text" placeholder="Search script" bind:value={filter} class="text-2xl grow" />
+	<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">
+				<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 obj}
+			{#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', obj)
+							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">{obj['summary'] ?? ''}</span>
+								<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"
-									>{obj['path'] ?? ''}</span
+									>{path ?? ''}</span
 								>
 							</div>
-							<div class="text-xs font-light italic text-left">{obj['description'] ?? ''}</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/components/flows/pickers/WorkspaceScriptPicker.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         kind?: "script" | "failure" | "trigger" | "approval" | undefined;
+        isTemplate?: boolean | undefined;
+        displayLock?: boolean | undefined;
         filter?: string | undefined;
     };
     events: {
@@ -9,7 +11,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type WorkspaceScriptPickerProps = typeof __propDef.props;
 export type WorkspaceScriptPickerEvents = typeof __propDef.events;

package/components/flows/previousResults.d.ts

@@ -4,6 +4,7 @@ export type PickableProperties = {
     flow_input: Object;
     priorIds: Record<string, any>;
     previousId: string | undefined;
+    hasResume: boolean;
 };
 type StepPropPicker = {
     pickableProperties: PickableProperties;

package/components/flows/previousResults.js

@@ -76,7 +76,8 @@ export function getStepPropPicker(flowState, parentModule, previousModule, id, f
     const pickableProperties = {
         flow_input: flowInput,
         priorIds: priorIds,
-        previousId: previousIds[0]
+        previousId: previousIds[0],
+        hasResume: previousModule?.suspend != undefined,
     };
     if (approvers && ((previousModule?.suspend?.required_events ?? 0) > 0)) {
         pickableProperties["approvers"] = "The list of approvers";

package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -34,7 +34,15 @@ setContext('PropPickerWrapper', {
 	</Pane>
 	<Pane minSize={20} size={40} class="py-2 relative !transition-none">
 		{#if result}
-			<PropPickerResult {result} />
+			<PropPickerResult
+				{result}
+				on:select={({ detail }) => {
+					dispatch('select', detail)
+					if ($propPickerConfig?.onSelect(detail)) {
+						propPickerConfig.set(undefined)
+					}
+				}}
+			/>
 		{:else if pickableProperties}
 			<PropPicker
 				{displayContext}

package/components/flows/utils.d.ts

@@ -17,5 +17,4 @@ export declare const NEVER_TESTED_THIS_FAR = "never tested this far";
 export declare function emptyFlowModuleState(): FlowModuleState;
 export declare function numberToChars(n: number): any;
 export declare function charsToNumber(n: string): number;
-export declare function isEmptyFlowModule(flowModule: FlowModule): boolean;
 export declare function findNextAvailablePath(path: string): Promise<string>;

package/components/flows/utils.js

@@ -1,6 +1,6 @@
 import { JobService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
-import { loadSchema } from '../../scripts';
+import { loadSchema, loadSchemaFlow } from '../../scripts';
 import { workspaceStore } from '../../stores';
 import { emptySchema } from '../../utils';
 import { get } from 'svelte/store';
@@ -46,15 +46,18 @@ export function getTypeAsString(arg) {
 }
 export async function loadSchemaFromModule(module) {
     const mod = module.value;
-    if (mod.type == 'rawscript' || mod.type === 'script') {
+    if (mod.type == 'rawscript' || mod.type === 'script' || mod.type === 'flow') {
         let schema;
         if (mod.type === 'rawscript') {
             schema = emptySchema();
             await inferArgs(mod.language, mod.content ?? '', schema);
         }
-        else if (mod.path && mod.path != '') {
+        else if (mod.type == 'script' && mod.path && mod.path != '') {
             schema = await loadSchema(mod.path);
         }
+        else if (mod.type == 'flow' && mod.path && mod.path != '') {
+            schema = await loadSchemaFlow(mod.path);
+        }
         else {
             return {
                 input_transforms: {},
@@ -164,9 +167,6 @@ export function charsToNumber(n) {
     }
     return res - 1;
 }
-export function isEmptyFlowModule(flowModule) {
-    return flowModule.value.type === 'identity';
-}
 export async function findNextAvailablePath(path) {
     try {
         await ScriptService.getScriptByPath({