windmill-components 1.379.4 → 1.382.3

package/package/components/details/DetailPageLayout.svelte.d.ts

@@ -16,6 +16,9 @@ declare const __propDef: {
         webhooks: {
             slot: string;
         };
+        email: {
+            slot: string;
+        };
         schedule: {
             slot: string;
         };

package/package/components/details/EmailTriggerPanel.svelte

@@ -0,0 +1,128 @@
+<script>import Tooltip from '../Tooltip.svelte';
+import { enterpriseLicense, userStore, workspaceStore } from '../../stores';
+import { Button } from '../common';
+import { SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON } from '../../consts';
+import UserSettings from '../UserSettings.svelte';
+import ClipboardPanel from './ClipboardPanel.svelte';
+import { generateRandomString } from '../../utils';
+import HighlightTheme from '../HighlightTheme.svelte';
+import Alert from '../common/alert/Alert.svelte';
+import { SettingService } from '../../gen';
+import { base32 } from 'rfc4648';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import { AlertTriangle } from 'lucide-svelte';
+import Skeleton from '../common/skeleton/Skeleton.svelte';
+let userSettings;
+export let token;
+export let scopes = [];
+export let isFlow = false;
+export let hash = undefined;
+export let path;
+let emailDomain = null;
+let loading = true;
+async function getEmailDomain() {
+    emailDomain =
+        (await SettingService.getGlobal({
+            key: 'email_domain'
+        })) ?? null;
+    loading = false;
+}
+getEmailDomain();
+let requestType = 'path';
+function emailAddress() {
+    const pathOrHash = requestType === 'hash' ? hash : path.replaceAll('/', '.');
+    const plainPrefix = `${$workspaceStore}+${(requestType === 'hash' ? 'hash.' : isFlow ? 'flow.' : '') + pathOrHash}+${token}`;
+    const encodedPrefix = base32
+        .stringify(new TextEncoder().encode(plainPrefix), {
+        pad: false
+    })
+        .toLowerCase();
+    return `${pathOrHash}+${encodedPrefix}@${emailDomain}`;
+}
+</script>
+
+<HighlightTheme />
+
+<UserSettings
+	bind:this={userSettings}
+	on:tokenCreated={(e) => {
+		token = e.detail
+	}}
+	newTokenLabel={`${$userStore?.username ?? 'superadmin'}-${generateRandomString(4)}`}
+	{scopes}
+/>
+
+<div class="p-2 flex flex-col w-full gap-4">
+	{#if loading}
+		<Skeleton layout={[[18]]} />
+	{:else}
+		{#if emailDomain}
+			{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
+				<div class="my-2">
+					<div class="flex flex-row justify-between gap-2">
+						<input
+							bind:value={token}
+							placeholder="paste your token here once created to alter examples below"
+							class="!text-xs"
+						/>
+						<Button size="xs" color="light" variant="border" on:click={userSettings.openDrawer}>
+							Create an Email-specific Token
+							<Tooltip light>
+								The token will have a scope such that it can only be used to trigger this script. It
+								is safe to share as it cannot be used to impersonate you.
+							</Tooltip>
+						</Button>
+					</div>
+					{#if token === 'TOKEN_TO_CREATE'}
+						<div class="flex flex-row gap-1 text-xs text-red-500 items-center mt-1">
+							<AlertTriangle size="12" />
+							Create/input a valid token before copying the email address below
+						</div>
+					{/if}
+				</div>
+			{/if}
+
+			{#if !isFlow}
+				<div class="flex flex-col gap-2">
+					<div class="flex flex-row justify-between">
+						<div class="text-xs font-semibold flex flex-row items-center">Call method</div>
+						<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
+							<ToggleButton label="By path" value="path" />
+							<ToggleButton label="By hash" value="hash" />
+						</ToggleButtonGroup>
+					</div>
+				</div>
+			{/if}
+			<div class="flex flex-col gap-4">
+				{#key requestType}
+					{#key token}
+						<div class="flex flex-col gap-2">
+							<ClipboardPanel title="Email address" content={emailAddress()} />
+						</div>
+					{/key}
+				{/key}
+				<Alert title="Email trigger" size="xs">
+					To trigger the job by email, send an email to the address above. The job will receive two
+					arguments: `raw_email` containing the raw email as string, and `parsed_email` containing
+					the parsed email as an object.
+				</Alert>
+			</div>
+		{:else}
+			<div>
+				<Alert title="Email triggers are disabled" size="xs" type="warning">
+					Ask an instance superadmin to setup the instance for email triggering (<a
+						target="_blank"
+						href="https://windmill.dev/docs/advanced/email_triggers">docs</a
+					>) and to set the email domain in the instance settings.
+				</Alert>
+			</div>
+		{/if}
+
+		{#if !$enterpriseLicense}
+			<Alert title="Community Edition limitations" type="warning" size="xs">
+				Email triggers on Windmill Community Edition are limited to 100 emails per day.
+			</Alert>
+		{/if}
+	{/if}
+</div>

package/package/components/details/EmailTriggerPanel.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        token: string;
+        scopes?: string[] | undefined;
+        isFlow?: boolean | undefined;
+        hash?: string | undefined;
+        path: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EmailTriggerPanelProps = typeof __propDef.props;
+export type EmailTriggerPanelEvents = typeof __propDef.events;
+export type EmailTriggerPanelSlots = typeof __propDef.slots;
+export default class EmailTriggerPanel extends SvelteComponent<EmailTriggerPanelProps, EmailTriggerPanelEvents, EmailTriggerPanelSlots> {
+}
+export {};

package/package/components/details/WebhooksPanel.svelte

@@ -13,10 +13,7 @@ import { typescript } from 'svelte-highlight/languages';
 import ClipboardPanel from './ClipboardPanel.svelte';
 import { copyToClipboard, generateRandomString } from '../../utils';
 import HighlightTheme from '../HighlightTheme.svelte';
-import Alert from '../common/alert/Alert.svelte';
-import { SettingService } from '../../gen';
 import { base } from '../../base';
-import { base32 } from 'rfc4648';
 let userSettings;
 export let token;
 export let args;
@@ -26,14 +23,6 @@ export let hash = undefined;
 export let path;
 let selectedTab = 'rest';
 let webhooks;
-let emailDomain = null;
-async function getEmailDomain() {
-    emailDomain =
-        (await SettingService.getGlobal({
-            key: 'email_domain'
-        })) ?? null;
-}
-getEmailDomain();
 $: webhooks = isFlow ? computeFlowWebhooks(path) : computeScriptWebhooks(hash, path);
 function computeScriptWebhooks(hash, path) {
     let webhookBase = `${$page.url.origin}${base}/api/w/${$workspaceStore}/jobs`;
@@ -50,9 +39,9 @@ function computeScriptWebhooks(hash, path) {
     };
 }
 function computeFlowWebhooks(path) {
-    let base = `${$page.url.origin}/api/w/${$workspaceStore}/jobs`;
-    let urlAsync = `${base}/run/f/${path}`;
-    let urlSync = `${base}/run_wait_result/f/${path}`;
+    let webhooksBase = `${$page.url.origin}${base}/api/w/${$workspaceStore}/jobs`;
+    let urlAsync = `${webhooksBase}/run/f/${path}`;
+    let urlSync = `${webhooksBase}/run_wait_result/f/${path}`;
     return {
         async: {
             path: urlAsync
@@ -70,9 +59,6 @@ $: if (webhookType === 'async' && requestType === 'get_path') {
     // Request type is not supported for async webhooks
     requestType = 'hash';
 }
-$: if (webhookType === 'sync' && selectedTab === 'email') {
-    webhookType = 'async';
-}
 $: url =
     webhooks[webhookType][requestType] +
         (tokenType === 'query'
@@ -92,16 +78,6 @@ function headers() {
     }
     return headers;
 }
-function emailAddress() {
-    const pathOrHash = requestType === 'hash' ? hash : path.replaceAll('/', '.');
-    const plainPrefix = `${$workspaceStore}+${(requestType === 'hash' ? 'hash.' : isFlow ? 'flow.' : '') + pathOrHash}+${token}`;
-    const encodedPrefix = base32
-        .stringify(new TextEncoder().encode(plainPrefix), {
-        pad: false
-    })
-        .toLowerCase();
-    return `${pathOrHash}+${encodedPrefix}@${emailDomain}`;
-}
 function fetchCode() {
     if (webhookType === 'sync') {
         return `
@@ -238,7 +214,6 @@ done`}`;
 					label="Sync"
 					value="sync"
 					tooltip="Triggers the execution, wait for the job to complete and return it as a response."
-					disabled={selectedTab === 'email'}
 				/>
 			</ToggleButtonGroup>
 		</div>
@@ -269,15 +244,13 @@ done`}`;
 				/>
 			</ToggleButtonGroup>
 		</div>
-		{#if selectedTab !== 'email'}
-			<div class="flex flex-row justify-between">
-				<div class="text-xs font-semibold flex flex-row items-center">Token configuration</div>
-				<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={tokenType}>
-					<ToggleButton label="Token in Headers" value="headers" />
-					<ToggleButton label="Token in Query" value="query" />
-				</ToggleButtonGroup>
-			</div>
-		{/if}
+		<div class="flex flex-row justify-between">
+			<div class="text-xs font-semibold flex flex-row items-center">Token configuration</div>
+			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={tokenType}>
+				<ToggleButton label="Token in Headers" value="headers" />
+				<ToggleButton label="Token in Query" value="query" />
+			</ToggleButtonGroup>
+		</div>
 	</div>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -287,7 +260,6 @@ done`}`;
 			<Tab value="curl" size="xs">Curl</Tab>
 		{/if}
 		<Tab value="fetch" size="xs">Fetch</Tab>
-		<Tab value="email" size="xs">Email</Tab>
 
 		<svelte:fragment slot="content">
 			{#key token}
@@ -346,39 +318,6 @@ done`}`;
 									{/key}{/key}{/key}{/key}
 					{/key}
 				</TabContent>
-				<TabContent value="email">
-					{#if emailDomain}
-						<div class="flex flex-col gap-4">
-							{#key args}
-								{#key requestType}
-									{#key webhookType}
-										{#key tokenType}
-											{#key token}
-												<div class="flex flex-col gap-2">
-													<ClipboardPanel title="Email address" content={emailAddress()} />
-												</div>
-											{/key}
-										{/key}
-									{/key}
-								{/key}
-							{/key}
-							<Alert title="Email triggers" size="xs">
-								To trigger the job by email, send an email to the address above. The job will
-								receive two arguments: `raw_email` containing the raw email as string, and
-								`parsed_email` containing the parsed email as an object.
-							</Alert>
-						</div>
-					{:else}
-						<div>
-							<Alert title="Email triggers are disabled" size="xs" kind="danger">
-								Ask an instance superadmin to setup the instance for email triggering (<a
-									target="_blank"
-									href="https://windmill.dev/docs/advanced/email_triggers">docs</a
-								>) and to set the email domain in the instance settings.
-							</Alert>
-						</div>
-					{/if}
-				</TabContent>
 			{/key}
 		</svelte:fragment>
 	</Tabs>

package/package/components/flows/FlowHistory.svelte

@@ -79,6 +79,7 @@ $: selectedVersion !== undefined && loadFlow(selectedVersion.id);
 		on:close={() => {
 			drawer?.closeDrawer()
 		}}
+		noPadding
 	>
 		<Splitpanes class="!overflow-visible">
 			<Pane size={20}>

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

@@ -209,7 +209,6 @@ let customUi = getContext('customUi');
 									return
 								}
 							}
-							console.log(lang, kind)
 							dispatch('new', {
 								language: lang == 'docker' ? 'bash' : lang,
 								kind,

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -41,7 +41,7 @@ import { loadSchemaFromModule } from '../flowInfers';
 import { computeFlowStepWarning, initFlowStepWarnings } from '../utils';
 import { debounce } from '../../../utils';
 import { dfs } from '../dfs';
-const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, saveDraft, flowInputsStore } = getContext('FlowEditorContext');
+const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, saveDraft, flowInputsStore, customUi } = getContext('FlowEditorContext');
 export let flowModule;
 export let failureModule = false;
 export let parentModule = undefined;
@@ -216,6 +216,7 @@ function setFlowInput(argName) {
 			{#if flowModule.value.type === 'rawscript' && !noEditor}
 				<div class="border-b-2 shadow-sm px-1">
 					<EditorBar
+						customUi={customUi?.editorBar}
 						{validCode}
 						{editor}
 						{diffEditor}
@@ -353,7 +354,12 @@ function setFlowInput(argName) {
 									{#if !$selectedId.includes('failure')}
 										<Tab value="runtime">Runtime</Tab>
 										<Tab value="cache" active={Boolean(flowModule.cache_ttl)}>Cache</Tab>
-										<Tab value="early-stop" active={Boolean(flowModule.stop_after_if)}>
+										<Tab
+											value="early-stop"
+											active={Boolean(
+												flowModule.stop_after_if || flowModule.stop_after_all_iters_if
+											)}
+										>
 											Early Stop
 										</Tab>
 										<Tab value="suspend" active={Boolean(flowModule.suspend)}>Suspend</Tab>

package/package/components/flows/content/FlowModuleEarlyStop.svelte

@@ -6,84 +6,211 @@ import { getContext } from 'svelte';
 import { NEVER_TESTED_THIS_FAR } from '../models';
 import Section from '../../Section.svelte';
 import { getStepPropPicker } from '../previousResults';
+import { dfs } from '../previousResults';
 const { flowStateStore, flowStore, previewArgs } = getContext('FlowEditorContext');
 export let flowModule;
 let editor = undefined;
 $: stepPropPicker = getStepPropPicker($flowStateStore, undefined, undefined, flowModule.id, $flowStore, $previewArgs, false);
+function checkIfParentLoop(flowStore) {
+    const flow = JSON.parse(JSON.stringify(flowStore));
+    const parents = dfs(flowModule.id, flow, true);
+    for (const parent of parents.slice(1)) {
+        if (parent.value.type === 'forloopflow' || parent.value.type === 'whileloopflow') {
+            return parent.id;
+        }
+    }
+    return null;
+}
+$: isLoop = flowModule.value.type === 'forloopflow' || flowModule.value.type === 'whileloopflow';
+$: isBranchAll = flowModule.value.type === 'branchall';
 $: isStopAfterIfEnabled = Boolean(flowModule.stop_after_if);
+$: isStopAfterAllIterationsEnabled = Boolean(flowModule.stop_after_all_iters_if);
 $: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_FAR;
+$: parentLoopId = checkIfParentLoop($flowStore);
 </script>
 
 <div class="flex flex-col items-start space-y-2 {$$props.class}">
-	<Section label="Early stop/Break" class="w-full">
-		<svelte:fragment slot="header">
-			<Tooltip documentationLink="https://www.windmill.dev/docs/flows/early_stop">
-				If defined, at the end of the step, the predicate expression will be evaluated to decide if
-				the flow should stop early.
-			</Tooltip>
-		</svelte:fragment>
+	{#if !isBranchAll}
+		<Section
+			label={(isLoop
+				? 'Break loop'
+				: parentLoopId
+				? 'Break parent loop module ' + parentLoopId
+				: 'Stop flow early') + (isLoop ? ' (evaluated after each iteration)' : '')}
+			class="w-full"
+		>
+			<svelte:fragment slot="header">
+				<Tooltip documentationLink="https://www.windmill.dev/docs/flows/early_stop">
+					If defined, at the end of the step, the predicate expression will be evaluated to decide
+					if the flow should stop early or break if inside a for/while loop.
+				</Tooltip>
+			</svelte:fragment>
 
-		<Toggle
-			checked={isStopAfterIfEnabled}
-			on:change={() => {
-				if (isStopAfterIfEnabled && flowModule.stop_after_if) {
-					flowModule.stop_after_if = undefined
-				} else {
-					flowModule.stop_after_if = {
-						expr: 'result == undefined',
-						skip_if_stopped: false
+			<Toggle
+				checked={isStopAfterIfEnabled}
+				on:change={() => {
+					if (isStopAfterIfEnabled && flowModule.stop_after_if) {
+						flowModule.stop_after_if = undefined
+					} else {
+						flowModule.stop_after_if = {
+							expr: 'result == undefined',
+							skip_if_stopped: false
+						}
 					}
-				}
-			}}
-			options={{
-				right: 'Early stop or Break if condition met'
-			}}
-		/>
+				}}
+				options={{
+					right: isLoop
+						? 'Break loop'
+						: parentLoopId
+						? 'Break parent loop module'
+						: 'Stop flow' + ' if condition met'
+				}}
+			/>
+
+			<div
+				class="w-full border p-2 flex flex-col {flowModule.stop_after_if
+					? ''
+					: 'bg-surface-secondary'}"
+			>
+				{#if flowModule.stop_after_if}
+					{@const earlyStopResult = isLoop
+						? Array.isArray(result) && result.length > 0
+							? result[result.length - 1]
+							: result === NEVER_TESTED_THIS_FAR
+							? result
+							: undefined
+						: result}
+					{#if !parentLoopId && !isLoop}
+						<Toggle
+							size="xs"
+							bind:checked={flowModule.stop_after_if.skip_if_stopped}
+							options={{
+								right: 'Label flow as "skipped" if stopped'
+							}}
+						/>
+					{/if}
+					<span class="mt-2 text-xs font-bold">Stop condition expression</span>
+					<div class="border w-full">
+						<PropPickerWrapper
+							notSelectable
+							flow_input={stepPropPicker.pickableProperties.flow_input}
+							pickableProperties={undefined}
+							result={earlyStopResult}
+							extraResults={isLoop ? { all_iters: result } : undefined}
+							on:select={({ detail }) => {
+								editor?.insertAtCursor(detail)
+								editor?.focus()
+							}}
+						>
+							<SimpleEditor
+								bind:this={editor}
+								lang="javascript"
+								bind:code={flowModule.stop_after_if.expr}
+								class="few-lines-editor"
+								extraLib={`declare const result = ${JSON.stringify(earlyStopResult)};` +
+									(isLoop ? `\ndeclare const all_iters = ${JSON.stringify(result)};` : '')}
+							/>
+						</PropPickerWrapper>
+					</div>
+				{:else}
+					{#if !parentLoopId && !isLoop}
+						<Toggle
+							disabled
+							size="xs"
+							options={{
+								right: 'Label flow as "skipped" if stopped'
+							}}
+						/>
+					{/if}
+					<span class="mt-2 text-xs font-bold">Stop condition expression</span>
+					<textarea disabled rows="3" class="min-h-[80px]" />
+				{/if}
+			</div>
+		</Section>
+	{/if}
 
-		<div
-			class="w-full border p-2 flex flex-col {flowModule.stop_after_if
-				? ''
-				: 'bg-surface-secondary'}"
+	{#if isLoop || isBranchAll}
+		<Section
+			label={(parentLoopId ? 'Break parent loop module ' + parentLoopId : 'Stop flow early') +
+				(isBranchAll
+					? ' (evaluated after all branches have been run)'
+					: ' (evaluated after all iterations)')}
+			class="w-full"
 		>
-			{#if flowModule.stop_after_if}
-				<Toggle
-					size="xs"
-					bind:checked={flowModule.stop_after_if.skip_if_stopped}
-					options={{
-						right: 'Label flow as "skipped" if stopped'
-					}}
-				/>
-				<span class="mt-2 text-xs font-bold">Stop condition expression</span>
-				<div class="border w-full">
-					<PropPickerWrapper
-						notSelectable
-						flow_input={stepPropPicker.pickableProperties.flow_input}
-						pickableProperties={undefined}
-						{result}
-						on:select={({ detail }) => {
-							editor?.insertAtCursor(detail)
-							editor?.focus()
-						}}
-					>
-						<SimpleEditor
-							bind:this={editor}
-							lang="javascript"
-							bind:code={flowModule.stop_after_if.expr}
-							class="few-lines-editor"
-							extraLib={`declare const result = ${JSON.stringify(result)};`}
+			<svelte:fragment slot="header">
+				<Tooltip documentationLink="https://www.windmill.dev/docs/flows/early_stop">
+					If defined, at the end of the step, the predicate expression will be evaluated to decide
+					if the flow should stop early or break if inside a for/while loop.
+				</Tooltip>
+			</svelte:fragment>
+
+			<Toggle
+				checked={isStopAfterAllIterationsEnabled}
+				on:change={() => {
+					if (isStopAfterAllIterationsEnabled && flowModule.stop_after_all_iters_if) {
+						flowModule.stop_after_all_iters_if = undefined
+					} else {
+						flowModule.stop_after_all_iters_if = {
+							expr: 'result == undefined',
+							skip_if_stopped: false
+						}
+					}
+				}}
+				options={{
+					right: (parentLoopId ? 'Break parent loop module' : 'Stop flow') + ' if condition met'
+				}}
+			/>
+
+			<div
+				class="w-full border p-2 flex flex-col {flowModule.stop_after_all_iters_if
+					? ''
+					: 'bg-surface-secondary'}"
+			>
+				{#if flowModule.stop_after_all_iters_if}
+					{#if !parentLoopId}
+						<Toggle
+							size="xs"
+							bind:checked={flowModule.stop_after_all_iters_if.skip_if_stopped}
+							options={{
+								right: 'Label flow as "skipped" if stopped'
+							}}
+						/>
+					{/if}
+					<span class="mt-2 text-xs font-bold">Stop condition expression</span>
+					<div class="border w-full">
+						<PropPickerWrapper
+							notSelectable
+							flow_input={stepPropPicker.pickableProperties.flow_input}
+							pickableProperties={undefined}
+							{result}
+							on:select={({ detail }) => {
+								editor?.insertAtCursor(detail)
+								editor?.focus()
+							}}
+						>
+							<SimpleEditor
+								bind:this={editor}
+								lang="javascript"
+								bind:code={flowModule.stop_after_all_iters_if.expr}
+								class="few-lines-editor"
+								extraLib={`declare const result = ${JSON.stringify(result)};`}
+							/>
+						</PropPickerWrapper>
+					</div>
+				{:else}
+					{#if !parentLoopId}
+						<Toggle
+							disabled
+							size="xs"
+							options={{
+								right: 'Label flow as "skipped" if stopped'
+							}}
 						/>
-					</PropPickerWrapper>
-				</div>
-			{:else}
-				<Toggle
-					disabled
-					size="xs"
-					options={{
-						right: 'Label flow as "skipped" if stopped'
-					}}
-				/> <span class="mt-2 text-xs font-bold">Stop condition expression</span>
-				<textarea disabled rows="3" class="min-h-[80px]" />
-			{/if}
-		</div>
-	</Section>
+					{/if}
+					<span class="mt-2 text-xs font-bold">Stop condition expression</span>
+					<textarea disabled rows="3" class="min-h-[80px]" />
+				{/if}
+			</div>
+		</Section>
+	{/if}
 </div>

package/package/components/flows/content/FlowModuleHeader.svelte

@@ -51,7 +51,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 				<svelte:fragment slot="text">Cache</svelte:fragment>
 			</Popover>
 		{/if}
-		{#if module.stop_after_if}
+		{#if module.stop_after_if || module.stop_after_all_iters_if}
 			<Popover
 				placement="bottom"
 				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"