windmill-components 1.379.3 → 1.382.1

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`;
@@ -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/FlowModuleScript.svelte

@@ -1,13 +1,16 @@
-<script>import HighlightCode from '../../HighlightCode.svelte';
+<script>import DiffEditor from '../../DiffEditor.svelte';
+import HighlightCode from '../../HighlightCode.svelte';
 import TimeAgo from '../../TimeAgo.svelte';
 import { ScriptService } from '../../../gen';
-import { getScriptByPath } from '../../../scripts';
+import { getScriptByPath, scriptLangToEditorLang } from '../../../scripts';
 import { workspaceStore } from '../../../stores';
 export let path;
 export let hash = undefined;
+export let previousHash = undefined;
 export let showDate = false;
 export let showAllCode = true;
 let code;
+let previousCode;
 let language;
 let lock = undefined;
 let date = undefined;
@@ -28,10 +31,24 @@ async function loadCode(path, hash) {
         console.error(e);
     }
 }
+async function loadPreviousCode(previousHash) {
+    try {
+        const previousScript = await ScriptService.getScriptByHash({
+            workspace: $workspaceStore,
+            hash: previousHash
+        });
+        previousCode = previousScript.content;
+    }
+    catch (e) {
+        console.error(e);
+    }
+}
 $: path && loadCode(path, hash);
+$: path && previousHash && loadPreviousCode(previousHash);
 function toggleShowAll() {
     showAllCode = !showAllCode;
 }
+export let showDiff = false;
 </script>
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
@@ -41,7 +58,20 @@ function toggleShowAll() {
 	{#if notFound}
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>
 	{:else if showAllCode}
-		<HighlightCode {language} {code} />
+		{#if showDiff}
+			{#key previousCode + code}
+				<DiffEditor
+					class="h-screen"
+					readOnly
+					automaticLayout
+					defaultLang={scriptLangToEditorLang(language)}
+					defaultOriginal={previousCode}
+					defaultModified={code}
+				/>
+			{/key}
+		{:else}
+			<HighlightCode {language} {code} />
+		{/if}
 	{:else}
 		<div class="code-container h-full">
 			<HighlightCode {language} code={code?.split('\n').slice(0, 10).join('\n')} />

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

@@ -3,8 +3,10 @@ declare const __propDef: {
     props: {
         path: string;
         hash?: string | undefined;
+        previousHash?: string | undefined;
         showDate?: boolean | undefined;
         showAllCode?: boolean | undefined;
+        showDiff?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/flows/content/FlowModuleSuspend.svelte

@@ -106,6 +106,21 @@ let jsonView = false;
 					<SecondsInput disabled />
 				{/if}
 			</Label>
+
+			<Toggle
+				options={{
+					right: 'Continue on disapproval/timeout',
+					rightTooltip:
+						'Instead of failing the flow and bubbling up the error, continue to the next step which would allow to put a branchone right after to handle both cases separately. If any disapproval/timeout event is received, the resume payload will be similar to every error result in Winmdill, an object containing an `error` field which you can use to distinguish between approvals and disapproval/timeouts'
+				}}
+				checked={Boolean(flowModule.suspend?.continue_on_disapprove_timeout)}
+				disabled={!Boolean(flowModule.suspend)}
+				on:change={(e) => {
+					if (flowModule.suspend) {
+						flowModule.suspend.continue_on_disapprove_timeout = e.detail
+					}
+				}}
+			/>
 		</div>
 	{:else if suspendTabSelected === 'permissions'}
 		<div class="flex flex-col mt-4 gap-4">

package/package/components/flows/flowInfers.js

@@ -26,7 +26,7 @@ export async function loadSchemaFromModule(module) {
         if (JSON.stringify(keys.sort()) !== JSON.stringify(Object.keys(input_transforms).sort())) {
             input_transforms = keys.reduce((accu, key) => {
                 let nv = input_transforms[key] ??
-                    (module.id == 'failure' && ['message', 'name'].includes(key)
+                    (module.id == 'failure' && ['message', 'name', 'step_id'].includes(key)
                         ? { type: 'javascript', expr: `error.${key}` }
                         : {
                             type: 'static',

package/package/components/flows/map/FlowJobsMenu.svelte

@@ -1,6 +1,7 @@
-<script>import { Menu } from '../../common';
+<script>import Menu from '../../common/menu/MenuV2.svelte';
 import { createEventDispatcher } from 'svelte';
 import { ListFilter } from 'lucide-svelte';
+import { MenuItem } from '@rgossiaux/svelte-headlessui';
 const dispatch = createEventDispatcher();
 export let open = undefined;
 export let index;
@@ -20,50 +21,44 @@ function onKeydown(event) {
 }
 </script>
 
-<Menu
-	transitionDuration={0}
-	pointerDown
-	bind:show={open}
-	noMinW
-	placement="bottom-center"
-	let:close
->
-	<button
-		title="Pick an iteration"
-		slot="trigger"
-		id={`flow-editor-iteration picker-${index}`}
-		type="button"
-		class=" text-xs bg-surface border-[1px] border-gray-300 dark:border-gray-500 focus:outline-none
+<Menu>
+	<div slot="trigger">
+		<button
+			title="Pick an iteration"
+			id={`flow-editor-iteration picker-${index}`}
+			type="button"
+			class=" text-xs bg-surface border-[1px] border-gray-300 dark:border-gray-500 focus:outline-none
 		hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-sm w-[40px] gap-1 h-[20px]
 		flex items-center justify-center {flowJobsSuccess?.[selected] == false
-			? 'text-red-400'
-			: 'text-secondary'}"
-	>
-		#{selected == -1 ? '?' : selected + 1}
-		<ListFilter size={15} />
-	</button>
-	<div id="flow-editor-insert-module">
-		<div class="font-mono divide-y text-xs w-full text-secondary max-h-[200px] overflow-auto">
-			<input autofocus type="number" bind:value={filter} on:keydown={onKeydown} />
-			{#each flowJobs ?? [] as id, idx (id)}
-				{#if filter == undefined || (idx + 1).toString().includes(filter.toString())}
-					<button
-						class="w-full text-left py-1 pl-2 min-w-20 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center {flowJobsSuccess?.[
-							idx
-						] == false
-							? 'text-red-400'
-							: ''}"
-						on:pointerdown={() => {
-							close()
-							dispatch('selectedIteration', { index: idx, id })
-						}}
-						role="menuitem"
-						tabindex="-1"
-					>
-						#{idx + 1}
-					</button>
-				{/if}
-			{/each}
-		</div>
+				? 'text-red-400'
+				: 'text-secondary'}"
+		>
+			#{selected == -1 ? '?' : selected + 1}
+			<ListFilter size={15} />
+		</button>
 	</div>
+	<MenuItem disabled>
+		<input type="number" bind:value={filter} on:keydown={onKeydown} />
+	</MenuItem>
+	{#each flowJobs ?? [] as id, idx (id)}
+		{#if filter == undefined || (idx + 1).toString().includes(filter.toString())}
+			<MenuItem>
+				<button
+					class="text-primary text-xs w-full text-left py-1 pl-2 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center {flowJobsSuccess?.[
+						idx
+					] == false
+						? 'text-red-400'
+						: ''}"
+					on:pointerdown={() => {
+						//close()
+						dispatch('selectedIteration', { index: idx, id })
+					}}
+					role="menuitem"
+					tabindex="-1"
+				>
+					#{idx + 1}
+				</button>
+			</MenuItem>
+		{/if}
+	{/each}
 </Menu>

package/package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -126,9 +126,8 @@ const { currentStepStore: copilotCurrentStepStore } = getContext('FlowCopilotCon
 	>
 		{#if $$slots.icon}
 			<slot name="icon" />
-			<span class="mr-2" />
 		{/if}
-		<div class="flex-1 truncate" class:font-bold={bold}>{label}</div>
+		<div class="truncate" class:font-bold={bold}>{label}</div>
 		<div class="flex items-center space-x-2">
 			{#if id}
 				<Badge color="indigo">{id}</Badge>

package/package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -4,7 +4,6 @@ import { emptyFlowModuleState, initFlowStepWarnings } from '../utils';
 import FlowSettingsItem from './FlowSettingsItem.svelte';
 import FlowConstantsItem from './FlowConstantsItem.svelte';
 import { dfs } from '../dfs';
-import { FlowGraph } from '../../graph';
 import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte';
 import { push } from '../../../history';
 import ConfirmationModal from '../../common/confirmationModal/ConfirmationModal.svelte';
@@ -15,6 +14,7 @@ import { copilotInfo, tutorialsToDo } from '../../../stores';
 import FlowTutorials from '../../FlowTutorials.svelte';
 import { ignoredTutorials } from '../../tutorials/ignoredTutorials';
 import { tutorialInProgress } from '../../../tutorialUtils';
+import FlowGraphV2 from '../../graph/FlowGraphV2.svelte';
 export let modules;
 export let sidebarSize = undefined;
 export let disableStaticInputs = false;
@@ -203,13 +203,12 @@ async function updateFlowInputsStore() {
 	</div>
 
 	<div class="z-10 flex-auto grow" bind:clientHeight={minHeight}>
-		<FlowGraph
+		<FlowGraphV2
 			{disableAi}
 			insertable
 			scroll
 			{minHeight}
 			moving={$moving?.module.id}
-			rebuildOnChange={$flowStore}
 			maxHeight={minHeight}
 			modules={$flowStore.value?.modules}
 			{selectedId}
@@ -219,7 +218,9 @@ async function updateFlowInputsStore() {
 				dependents = getDependentComponents(e.id, $flowStore)
 				const cb = () => {
 					push(history, $flowStore)
+
 					selectNextId(e.id)
+
 					removeAtId($flowStore.value.modules, e.id)
 
 					if ($flowInputsStore) {

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

@@ -3,6 +3,7 @@ import { createEventDispatcher, getContext } from 'svelte';
 import { CheckCircle2, Code, Cross, GitBranch, Repeat, Square, Zap } from 'lucide-svelte';
 import StepGen from '../../copilot/StepGen.svelte';
 import BarsStaggered from '../../icons/BarsStaggered.svelte';
+import { twMerge } from 'tailwind-merge';
 const dispatch = createEventDispatcher();
 export let trigger = false;
 export let stop = false;
@@ -23,15 +24,21 @@ let customUi = getContext('customUi');
 	placement="bottom-center"
 	let:close
 >
-	<button
-		title="Add step"
-		slot="trigger"
-		id={`flow-editor-add-step-${index}`}
-		type="button"
-		class="text-primary bg-surface border-[1px] mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
-	>
-		<Cross class="mx-[5px]" size={15} />
-	</button>
+	<svelte:fragment slot="trigger">
+		<button
+			title="Add step"
+			id={`flow-editor-add-step-${index}`}
+			type="button"
+			class={twMerge(
+				'w-6 h-6 flex items-center justify-center',
+				'border border-gray-300 dark:border-gray-500',
+				'text-primary text-sm',
+				'bg-surface focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected rounded-full '
+			)}
+		>
+			<Cross size={14} />
+		</button>
+	</svelte:fragment>
 	<div id="flow-editor-insert-module">
 		<StepGen on:insert {index} bind:funcDesc bind:open {close} {modules} {disableAi} />