windmill-components 1.46.3 → 1.55.0

package/components/flows/content/FlowInputs.svelte

@@ -1,160 +1,141 @@
-<script>import Tooltip from '../../Tooltip.svelte';
+<script>import { ToggleButton, ToggleButtonGroup } from '../../common';
+import ToggleHubWorkspace from '../../ToggleHubWorkspace.svelte';
+import Tooltip from '../../Tooltip.svelte';
 import { RawScript, Script } from '../../../gen';
-import { faCode, faCodeBranch, faRepeat } from '@fortawesome/free-solid-svg-icons';
+import { faBolt, faCheck, faCode } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import FlowScriptPicker from '../pickers/FlowScriptPicker.svelte';
 import PickHubScript from '../pickers/PickHubScript.svelte';
-import PickScript from '../pickers/PickScript.svelte';
+import WorkspaceScriptPicker from '../pickers/WorkspaceScriptPicker.svelte';
 export let failureModule;
 export let shouldDisableTriggerScripts = false;
 const dispatch = createEventDispatcher();
+let kind = failureModule ? 'failure' : 'script';
+let pick_existing = 'hub';
+let filter = '';
 </script>
 
-<div class="space-y-4 p-4">
-	<div class="text-sm font-bold">{failureModule ? 'Error handler' : 'Common script'}</div>
-	<div class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-		<FlowScriptPicker
-			label="Inline Python (3.10)"
-			icon={faCode}
-			iconColor="text-green-500"
-			on:click={() => {
-				dispatch('new', {
-					language: RawScript.language.PYTHON3,
-					kind: failureModule ? 'failure' : 'script',
-					subkind: 'flow'
-				})
-			}}
-		/>
-
-		<FlowScriptPicker
-			label="Inline Typescript (Deno)"
-			icon={faCode}
-			iconColor="text-blue-800"
-			on:click={() => {
-				dispatch('new', {
-					language: RawScript.language.DENO,
-					kind: failureModule ? 'failure' : 'script',
-					subkind: 'flow'
-				})
-			}}
-		/>
-
-		<FlowScriptPicker
-			label="Inline Go"
-			icon={faCode}
-			iconColor="text-blue-700"
-			on:click={() => {
-				dispatch('new', {
-					language: RawScript.language.GO,
-					kind: failureModule ? 'failure' : 'script',
-					subkind: 'flow'
-				})
-			}}
-		/>
-
-		<FlowScriptPicker
-			label="Inline Bash"
-			icon={faCode}
-			iconColor="text-green-700"
-			on:click={() => {
-				dispatch('new', {
-					language: RawScript.language.BASH,
-					kind: failureModule ? 'failure' : 'script',
-					subkind: 'flow'
-				})
-			}}
-		/>
-
-		{#if !failureModule}
-			<FlowScriptPicker
-				label={`Inline PostgreSQL`}
-				icon={faCode}
-				iconColor="text-blue-800"
-				on:click={() =>
-					dispatch('new', { language: RawScript.language.DENO, kind: 'script', subkind: 'pgsql' })}
-			/>
-		{/if}
-
-		<PickScript
-			customText={failureModule ? 'Error Handler from workspace' : undefined}
-			kind={failureModule ? Script.kind.FAILURE : Script.kind.SCRIPT}
-			on:pick
-		/>
-		<PickHubScript
-			customText={failureModule ? 'Error Handler from Hub' : undefined}
-			kind={failureModule ? Script.kind.FAILURE : Script.kind.SCRIPT}
-			on:pick
-		/>
-	</div>
-
-	{#if !shouldDisableTriggerScripts}
-		<div class="text-sm font-bold pt-8">
-			Trigger script
-			<Tooltip>
-				Used as a first step most commonly with an internal state and a schedule to watch for
-				changes on an external system, compute the diff since last time, set the new state. The
-				diffs are then treated one by one with a for-loop.
-			</Tooltip>
-		</div>
-
-		<div class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-			<PickScript customText="Trigger script from workspace" kind={Script.kind.TRIGGER} on:pick />
-			<PickHubScript customText="Trigger script from Hub" kind={Script.kind.TRIGGER} on:pick />
-			<FlowScriptPicker
-				label="Inline Typescript (Deno)"
-				icon={faCode}
-				iconColor="text-blue-800"
-				on:click={() => dispatch('new', { language: RawScript.language.DENO, kind: 'trigger' })}
-			/>
-		</div>
-	{/if}
+<div class="p-4 h-full flex flex-col">
 	{#if !failureModule}
-		<div class="text-sm font-bold pt-8">
-			Approval step
-			<Tooltip>
-				Inlined common scripts can be turned into approval step by changing their suspend settings.
-				An approval step will suspend the execution of a flow until it has been approved through the
-				resume endpoints or the approval page by and solely by the recipients of those secret urls.
-				Use getResumeEndpoints from the wmill client to generate those URLs.
-			</Tooltip>
+		<div class="center-center">
+			<div class="max-w-min">
+				<ToggleButtonGroup bind:selected={kind}>
+					<ToggleButton position="left" value="script" size="sm" startIcon={{ icon: faCode }}>
+						Common &nbsp;<Tooltip>
+							A common script is simply a script that is neither a trigger nor an approval script.
+							Those are the majority of the scripts.
+						</Tooltip>
+					</ToggleButton>
+					{#if !shouldDisableTriggerScripts}
+						<ToggleButton position="center" value="trigger" size="sm" startIcon={{ icon: faBolt }}>
+							Trigger &nbsp;<Tooltip>
+								Used as a first step most commonly with a state and a schedule to watch for changes
+								on an external system, compute the diff since last time, set the new state. The
+								diffs are then treated one by one with a for-loop.
+							</Tooltip>
+						</ToggleButton>
+					{/if}
+					<ToggleButton position="right" value="approval" size="sm" startIcon={{ icon: faCheck }}>
+						Approval &nbsp;<Tooltip>
+							An approval step will suspend the execution of a flow until it has been approved
+							through the resume endpoints or the approval page by and solely by the recipients of
+							those secret urls. Use `wmill.getResumeUrls()` in Typescript or
+							`wmill.get_resume_urls()` in Python from the wmill client to generate those URLs.
+						</Tooltip>
+					</ToggleButton>
+				</ToggleButtonGroup>
+			</div>
 		</div>
-		<div class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-			<PickScript customText="Approval step from workspace" kind={Script.kind.APPROVAL} on:pick />
-			<PickHubScript
-				customText={'Approval step from the Hub'}
-				kind={Script.kind.APPROVAL}
-				on:pick
-			/>
+	{/if}
+	<h3 class="pb-2 pt-4">
+		Inline new <span class="text-blue-500">{kind == 'script' ? 'common' : kind}</span> script
+		<Tooltip>
+			Embed a script directly inside a flow instead of saving the script into your workspace for
+			reuse. You can always save an inline script to your workspace later.
+		</Tooltip>
+	</h3>
+	<div class="flex flex-row">
+		<div class="flex flex-row flex-wrap gap-2">
 			<FlowScriptPicker
-				label="Inline Typescript (Deno)"
-				icon={faCode}
-				iconColor="text-blue-800"
-				on:click={() => dispatch('new', { language: RawScript.language.DENO, kind: 'approval' })}
+				label="Typescript"
+				lang={Script.language.DENO}
+				on:click={() => {
+					dispatch('new', {
+						language: RawScript.language.DENO,
+						kind,
+						subkind: 'flow'
+					})
+				}}
 			/>
-		</div>
 
-		<div class="text-sm font-bold pt-8">Flow primitive</div>
-
-		<div class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-			<FlowScriptPicker
-				label={`Branches and switch to one`}
-				icon={faCodeBranch}
-				iconColor="text-blue-500"
-				on:click={() => dispatch('branchone')}
-			/>
 			<FlowScriptPicker
-				label={`Branches and run them all`}
-				icon={faCodeBranch}
-				iconColor="text-blue-500"
-				on:click={() => dispatch('branchall')}
+				label="Python"
+				lang={Script.language.PYTHON3}
+				on:click={() => {
+					dispatch('new', {
+						language: RawScript.language.PYTHON3,
+						kind,
+						subkind: 'flow'
+					})
+				}}
 			/>
 
-			<FlowScriptPicker
-				label={`For loop`}
-				icon={faRepeat}
-				iconColor="text-blue-500"
-				on:click={() => dispatch('loop')}
-			/>
+			{#if kind != 'approval'}
+				<FlowScriptPicker
+					label="Go"
+					lang={Script.language.GO}
+					on:click={() => {
+						dispatch('new', {
+							language: RawScript.language.GO,
+							kind,
+							subkind: 'flow'
+						})
+					}}
+				/>
+			{/if}
+
+			{#if kind == 'script'}
+				<FlowScriptPicker
+					label="Bash"
+					lang={Script.language.BASH}
+					on:click={() => {
+						dispatch('new', {
+							language: RawScript.language.BASH,
+							kind,
+							subkind: 'flow'
+						})
+					}}
+				/>
+
+				{#if !failureModule}
+					<FlowScriptPicker
+						label={`PostgreSQL`}
+						lang="pgsql"
+						on:click={() =>
+							dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
+					/>
+
+					<FlowScriptPicker
+						label={`MySQL`}
+						lang="mysql"
+						on:click={() =>
+							dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'mysql' })}
+					/>
+				{/if}
+			{/if}
 		</div>
+	</div>
+
+	<h3 class="mb-2 mt-6"
+		>Use pre-made <span class="text-blue-500">{kind == 'script' ? 'common' : kind}</span> script</h3
+	>
+	{#if pick_existing == 'hub'}
+		<PickHubScript bind:filter {kind} on:pick>
+			<ToggleHubWorkspace bind:selected={pick_existing} />
+		</PickHubScript>
+	{:else}
+		<WorkspaceScriptPicker displayLock bind:filter {kind} on:pick>
+			<ToggleHubWorkspace bind:selected={pick_existing} />
+		</WorkspaceScriptPicker>
 	{/if}
 </div>

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

@@ -5,19 +5,16 @@ declare const __propDef: {
         shouldDisableTriggerScripts?: boolean | undefined;
     };
     events: {
-        pick: any;
+        pick: CustomEvent<any>;
         new: CustomEvent<any>;
-        branchone: CustomEvent<any>;
-        branchall: CustomEvent<any>;
-        loop: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FlowInputsProps = typeof __propDef.props;
-export declare type FlowInputsEvents = typeof __propDef.events;
-export declare type FlowInputsSlots = typeof __propDef.slots;
+export type FlowInputsProps = typeof __propDef.props;
+export type FlowInputsEvents = typeof __propDef.events;
+export type FlowInputsSlots = typeof __propDef.slots;
 export default class FlowInputs extends SvelteComponentTyped<FlowInputsProps, FlowInputsEvents, FlowInputsSlots> {
 }
 export {};

package/components/flows/content/FlowInputsFlow.svelte

@@ -0,0 +1,101 @@
+<script>import { Badge, Skeleton } from '../../common';
+import NoItemFound from '../../home/NoItemFound.svelte';
+import SearchItems from '../../SearchItems.svelte';
+import { FlowService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import { emptyString } from '../../../utils';
+import { createEventDispatcher } from 'svelte';
+import { flip } from 'svelte/animate';
+import { fade } from 'svelte/transition';
+export let failureModule;
+const dispatch = createEventDispatcher();
+let items = undefined;
+let filteredItems = undefined;
+let filter = '';
+$: $workspaceStore && loadFlows();
+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();
+async function loadFlows() {
+    items = await FlowService.listFlows({ workspace: $workspaceStore });
+}
+</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 p-4">
+	<h3 class="mb-4">Pick a Workspace Flow</h3>
+	<div class="w-full flex mt-1 items-center gap-2 mb-3">
+		<slot />
+
+		<input
+			type="text"
+			placeholder="Search Workspace Flow"
+			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 filter.length > 0 && filteredItems.length == 0}
+			<NoItemFound />
+		{/if}
+		<ul class="divide-y divide-gray-200 overflow-auto">
+			{#each filteredItems as { path, 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 })
+						}}
+					>
+						<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>
+					</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/content/FlowInputsFlow.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        failureModule: boolean;
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FlowInputsFlowProps = typeof __propDef.props;
+export type FlowInputsFlowEvents = typeof __propDef.events;
+export type FlowInputsFlowSlots = typeof __propDef.slots;
+export default class FlowInputsFlow extends SvelteComponentTyped<FlowInputsFlowProps, FlowInputsFlowEvents, FlowInputsFlowSlots> {
+}
+export {};

package/components/flows/content/FlowLoop.svelte

@@ -12,13 +12,14 @@ import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { getStepPropPicker } from '../previousResults';
 import { flowStateStore } from '../flowState';
 import { flowStore } from '../flowStore';
+import FlowModuleSleep from './FlowModuleSleep.svelte';
 const { previewArgs } = getContext('FlowEditorContext');
 export let mod;
 export let parentModule;
 export let previousModule;
 let editor = undefined;
 let selected = 'early-stop';
-$: pickableProperties = getStepPropPicker($flowStateStore, parentModule, previousModule, mod.id, $flowStore, previewArgs, false, true).pickableProperties;
+$: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, mod.id, $flowStore, $previewArgs, false, true);
 </script>
 
 <div class="h-full flex flex-col">
@@ -40,7 +41,7 @@ $: pickableProperties = getStepPropPicker($flowStateStore, parentModule, previou
 						<div class="border w-full">
 							<PropPickerWrapper
 								notSelectable
-								{pickableProperties}
+								pickableProperties={stepPropPicker.pickableProperties}
 								on:select={({ detail }) => {
 									editor?.insertAtCursor(detail)
 								}}
@@ -51,6 +52,7 @@ $: pickableProperties = getStepPropPicker($flowStateStore, parentModule, previou
 									bind:code={mod.value.iterator.expr}
 									class="small-editor"
 									shouldBindKey={false}
+									extraLib={stepPropPicker.extraLib}
 								/>
 							</PropPickerWrapper>
 						</div>
@@ -80,8 +82,9 @@ $: pickableProperties = getStepPropPicker($flowStateStore, parentModule, previou
 			<Pane size={40} minSize={20} class="flex flex-col flex-1">
 				<Tabs bind:selected>
 					<!-- <Tab value="retries">Retries</Tab> -->
-					<Tab value="early-stop">Early Stop</Tab>
-					<Tab value="suspend">Sleep/Suspend</Tab>
+					<Tab value="early-stop">Early Stop/Break</Tab>
+					<Tab value="suspend">Suspend</Tab>
+					<Tab value="sleep">Sleep</Tab>
 
 					<svelte:fragment slot="content">
 						<div class="overflow-hidden bg-white" style="height:calc(100% - 32px);">
@@ -99,7 +102,12 @@ $: pickableProperties = getStepPropPicker($flowStateStore, parentModule, previou
 
 							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
 								<div class="p-4 overflow-y-auto">
-									<FlowModuleSuspend previousModuleId={previousModule?.id} bind:flowModule={mod} />
+									<FlowModuleSuspend bind:flowModule={mod} />
+								</div>
+							</TabContent>
+							<TabContent value="sleep" class="flex flex-col flex-1 h-full">
+								<div class="p-4 overflow-y-auto">
+									<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule={mod} />
 								</div>
 							</TabContent>
 						</div>

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

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowLoopProps = typeof __propDef.props;
-export declare type FlowLoopEvents = typeof __propDef.events;
-export declare type FlowLoopSlots = typeof __propDef.slots;
+export type FlowLoopProps = typeof __propDef.props;
+export type FlowLoopEvents = typeof __propDef.events;
+export type FlowLoopSlots = typeof __propDef.slots;
 export default class FlowLoop extends SvelteComponentTyped<FlowLoopProps, FlowLoopEvents, FlowLoopSlots> {
 }
 export {};