windmill-components 1.532.0 → 1.542.4

package/package/components/LogViewer.svelte

@@ -11,12 +11,13 @@ import { Button, Drawer, DrawerContent } from './common';
 import { copyToClipboard } from '../utils';
 import { base } from '../base';
 import { workspaceStore } from '../stores';
-import AnsiUp from 'ansi_up';
+import { AnsiUp } from 'ansi_up';
 import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte';
 import { JobService } from '../gen';
 import Tooltip from './Tooltip.svelte';
 import { twMerge } from 'tailwind-merge';
-let { content, isLoading, duration = undefined, mem = undefined, wrapperClass = '', jobId = undefined, tag, small = false, drawerOpen = $bindable(false), noMaxH = false, noAutoScroll = false, download = true, customEmptyMessage = 'No logs are available yet', tagLabel = undefined, noPadding = false } = $props();
+import QueuePosition from './QueuePosition.svelte';
+let { content, isLoading, duration = undefined, mem = undefined, wrapperClass = '', jobId = undefined, tag, small = false, drawerOpen = $bindable(false), noMaxH = false, noAutoScroll = false, download = true, customEmptyMessage = 'No logs are available yet', tagLabel = undefined, noPadding = false, navigationId = undefined } = $props();
 // @ts-ignore
 const ansi_up = $state(new AnsiUp());
 ansi_up.use_classes = true;
@@ -157,78 +158,88 @@ let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != unde
 	</DrawerContent>
 </Drawer>
 
-<div class="relative w-full h-full {wrapperClass}">
-	<div
-		bind:this={div}
-		class="w-full h-full overflow-auto relative bg-surface-secondary {noMaxH ? '' : 'max-h-screen'}"
-	>
-		<div class="sticky z-10 top-0 right-0 w-full flex flex-row-reverse justify-between text-sm">
-			<div class="flex gap-2 pl-0.5 bg-surface-secondary">
-				{#if jobId && download}
-					<div class="flex items-center">
-						<a
-							class="text-primary pb-0.5"
-							target="_blank"
-							href="{base}/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}"
-							download="windmill_logs_{jobId}.txt"
-							><Download size="14" />
-						</a>
-					</div>
-				{/if}
-				<button onclick={logViewer.openDrawer}><Expand size="12" /></button>
-				{#if !noAutoScroll}
-					<div
-						class="{small ? '' : 'py-2'} pr-2 {small
-							? '!text-2xs'
-							: '!text-xs'} flex gap-2 text-tertiary items-center"
-					>
-						Auto scroll
-						<input class="windmillapp" type="checkbox" bind:checked={scroll} />
-					</div>
-				{/if}
-			</div>
-		</div>
-		{#if isLoading}
-			<div class="flex gap-2 absolute top-2 left-2 items-center z-10">
-				<Loader2 class="animate-spin" />
-				{#if tag}
-					<div class="flex flex-row items-center gap-1">
-						<div class="text-secondary {small ? '!text-2xs' : '!text-xs'}"
-							>{tagLabel ?? 'tag'}: {tag}</div
+<div class="w-full h-full {wrapperClass}">
+	<div class="w-full h-full relative">
+		<div
+			bind:this={div}
+			class="w-full h-full overflow-auto bg-surface-secondary pt-4 {noMaxH ? '' : 'max-h-screen'}"
+			data-nav-id={navigationId}
+		>
+			<div class="absolute z-10 top-0 right-0 flex flex-row-reverse justify-between text-sm">
+				<div class="flex gap-2">
+					{#if jobId && download}
+						<div class="flex items-center">
+							<a
+								class="text-primary pb-0.5"
+								target="_blank"
+								href="{base}/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}"
+								download="windmill_logs_{jobId}.txt"
+								><Download size="14" />
+							</a>
+						</div>
+					{/if}
+					<button onclick={logViewer.openDrawer}><Expand size="12" /></button>
+					{#if !noAutoScroll}
+						<div
+							class="{small ? '' : 'py-2'} pr-2 {small
+								? '!text-2xs'
+								: '!text-xs'} flex gap-2 text-tertiary items-center"
 						>
-						<NoWorkerWithTagWarning {tagLabel} {tag} />
-					</div>
-				{/if}
+							Auto scroll
+							<input class="windmillapp" type="checkbox" bind:checked={scroll} />
+						</div>
+					{/if}
+				</div>
 			</div>
-		{:else if duration}
-			<span
-				class="absolute {small ? '!text-2xs' : '!text-xs'} text-tertiary dark:text-gray-400 {small
-					? 'top-0'
-					: 'top-2'} left-2">took {duration}ms</span
-			>
-		{/if}
-		{#if mem}
-			<span
-				class="absolute {small ? '!text-2xs' : '!text-xs'} text-tertiary dark:text-gray-400 {small
-					? 'top-0'
-					: 'top-2'}  left-36">mem peak: {(mem / 1024).toPrecision(4)}MB</span
+			{#if isLoading}
+				<div class="flex gap-2 absolute top-2 left-2 items-center z-10">
+					<Loader2 class="animate-spin" />
+					{#if tag}
+						<div class="flex flex-row items-center gap-1">
+							<div class="text-secondary {small ? '!text-2xs' : '!text-xs'}"
+								>{tagLabel ?? 'tag'}: {tag}</div
+							>
+							<NoWorkerWithTagWarning {tagLabel} {tag} />
+						</div>
+					{/if}
+					{#if jobId}
+						<QueuePosition {jobId} />
+					{/if}
+				</div>
+			{:else if duration}
+				<span
+					class={twMerge(
+						'absolute  text-tertiary dark:text-gray-400',
+						small ? '!text-2xs' : '!text-xs',
+						small ? 'top-0' : 'top-2',
+						noPadding ? '' : 'left-2'
+					)}>took {duration}ms</span
+				>
+			{/if}
+			{#if mem}
+				<span
+					class="absolute {small ? '!text-2xs' : '!text-xs'} text-tertiary dark:text-gray-400 {small
+						? 'top-0'
+						: 'top-2'}  left-36">mem peak: {(mem / 1024).toPrecision(4)}MB</span
+				>
+			{/if}
+			<pre
+				class={twMerge(
+					'whitespace-pre break-words w-full',
+					small ? '!text-2xs' : '!text-xs',
+					noPadding ? '' : 'p-2'
+				)}
+				>{#if content}{@const len =
+						(content?.length ?? 0) +
+						(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button
+							onclick={getStoreLogs}
+							>Show more... &nbsp;<Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
+						><br />{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)<br
+						/><button onclick={() => showMoreTruncate(len)}>Show more..</button><br />{/if}<span
+						>{@html html}</span
+					>{:else if !isLoading}<span>{customEmptyMessage}</span>{/if}</pre
 			>
-		{/if}
-		<pre
-			class={twMerge(
-				'whitespace-pre break-words w-full',
-				small ? '!text-2xs' : '!text-xs',
-				noPadding ? '' : 'p-2'
-			)}
-			>{#if content}{@const len =
-					(content?.length ?? 0) +
-					(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button onclick={getStoreLogs}
-						>Show more... &nbsp;<Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
-					><br />{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)<br
-					/><button onclick={() => showMoreTruncate(len)}>Show more..</button><br />{/if}<span
-					>{@html html}</span
-				>{:else if !isLoading}<span>{customEmptyMessage}</span>{/if}</pre
-		>
+		</div>
 	</div>
 </div>
 
@@ -435,4 +446,9 @@ let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != unde
 	}
 	:global(.dark) :global(.ansi-bright-white-bg) {
 		background-color: rgb(229, 233, 240);
+	}
+
+	:global([data-nav-id]:focus-visible) {
+		outline: none;
+		outline-offset: 0;
 	}</style>

package/package/components/LogViewer.svelte.d.ts

@@ -14,6 +14,7 @@ interface Props {
     customEmptyMessage?: string;
     tagLabel?: string;
     noPadding?: boolean;
+    navigationId?: string;
 }
 declare const LogViewer: import("svelte").Component<Props, {
     scrollToBottom: () => void;

package/package/components/ModulePreview.svelte

@@ -4,7 +4,7 @@ import Button from './common/button/Button.svelte';
 import ModulePreviewForm from './ModulePreviewForm.svelte';
 import ModuleTest from './ModuleTest.svelte';
 import { getContext } from 'svelte';
-let { mod, schema, pickableProperties, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined), focusArg = undefined } = $props();
+let { mod, schema, pickableProperties, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined), focusArg = undefined, onJobDone } = $props();
 const { flowStore } = getContext('FlowEditorContext');
 let moduleTest = $state();
 export function runTestWithStepArgs() {
@@ -19,6 +19,7 @@ export function runTestWithStepArgs() {
 	bind:testIsLoading
 	bind:scriptProgress
 	bind:this={moduleTest}
+	{onJobDone}
 />
 
 <div class="p-4">

package/package/components/ModulePreview.svelte.d.ts

@@ -12,6 +12,7 @@ interface Props {
     noEditor?: boolean;
     scriptProgress?: any;
     focusArg?: string;
+    onJobDone?: () => void;
 }
 declare const ModulePreview: import("svelte").Component<Props, {
     runTestWithStepArgs: () => void;

package/package/components/ModulePreviewForm.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">import { allTrue, sendUserToast } from '../utils';
+<script lang="ts">import { allTrue } from '../utils';
 import { RefreshCw } from 'lucide-svelte';
 import ArgInput from './ArgInput.svelte';
 import { Button } from './common';
-import { getContext, onMount, untrack } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { evalValue } from './flows/utils';
 import { getResourceTypes } from './resourceTypesStore';
 import { twMerge } from 'tailwind-merge';
 let { schema, mod, pickableProperties, isValid = $bindable(true), autofocus = false, focusArg = undefined } = $props();
-const { testSteps, flowStateStore, flowStore, previewArgs } = getContext('FlowEditorContext');
+const { stepsInputArgs, flowStateStore, flowStore, previewArgs } = getContext('FlowEditorContext');
 let inputCheck = $state({});
 $effect(() => {
     isValid = allTrue(inputCheck) ?? false;
@@ -17,11 +17,11 @@ $effect(() => {
     let lkeys = Object.keys(schema?.properties ?? {});
     if (schema?.properties && JSON.stringify(lkeys) != JSON.stringify(keys)) {
         keys = lkeys;
-        untrack(() => testSteps?.removeExtraKey(mod.id, keys));
+        untrack(() => stepsInputArgs?.removeExtraKey(mod.id, keys));
     }
 });
 function plugIt(argName) {
-    testSteps?.setEvaluatedStepArg(mod.id, argName, $state.snapshot(evalValue(argName, mod, pickableProperties, true)));
+    stepsInputArgs?.setEvaluatedStepArg(mod.id, argName, $state.snapshot(evalValue(argName, mod, pickableProperties, true)));
 }
 let editor = $state({});
 // Animation and highlighting for focusArg
@@ -53,70 +53,77 @@ async function loadResourceTypes() {
     resourceTypes = await getResourceTypes();
 }
 loadResourceTypes();
-onMount(() => {
-    if (!testSteps) {
-        sendUserToast('testSteps module not initialized. Preview will not work.', true);
+let initialized = $state(false);
+$effect.pre(() => {
+    if (!initialized) {
+        if (stepsInputArgs) {
+            stepsInputArgs?.updateStepArgs(mod.id, flowStateStore.val, flowStore?.val, previewArgs?.val);
+            initialized = true;
+        }
     }
-    testSteps?.updateStepArgs(mod.id, flowStateStore.val, flowStore?.val, previewArgs?.val);
 });
 </script>
 
 <div class="w-full pt-2" data-popover>
-	{#if keys.length > 0}
-		{#each keys as argName, i (argName)}
-			{#if Object.keys(schema.properties ?? {}).includes(argName)}
-				<div
-					class={twMerge(
-						'flex gap-2',
-						animateArg === argName && 'animate-pulse ring-2 ring-offset-2 ring-blue-500 rounded'
-					)}
-					data-arg={argName}
-				>
-					{#if schema?.properties?.[argName]}
-						<ArgInput
-							{resourceTypes}
-							minW={false}
-							autofocus={autofocus && !focusArg && i == 0}
-							label={argName}
-							description={schema.properties[argName].description}
-							bind:value={
-								() => testSteps?.getStepInputArgs(mod.id, argName),
-								(v) => testSteps?.setStepInputArgs(mod.id, argName, v)
-							}
-							type={schema.properties[argName].type}
-							oneOf={schema.properties[argName].oneOf}
-							required={schema?.required?.includes(argName)}
-							pattern={schema.properties[argName].pattern}
-							bind:editor={editor[argName]}
-							bind:valid={inputCheck[argName]}
-							defaultValue={schema.properties[argName].default}
-							enum_={schema.properties[argName].enum}
-							format={schema.properties[argName].format}
-							contentEncoding={schema.properties[argName].contentEncoding}
-							properties={schema.properties[argName].properties}
-							nestedRequired={schema.properties[argName].required}
-							itemsType={schema.properties[argName].items}
-							extra={schema.properties[argName]}
-							nullable={schema.properties[argName].nullable}
-							title={schema.properties[argName].title}
-							placeholder={schema.properties[argName].placeholder}
-						/>
-					{/if}
-					{#if testSteps?.isArgManuallySet(mod.id, argName)}
-						<div class="pt-6 mt-0.5">
-							<Button
-								on:click={() => {
-									plugIt(argName)
-								}}
-								size="sm"
-								variant="border"
-								color="light"
-								title="Re-evaluate input step"><RefreshCw size={14} /></Button
-							>
-						</div>
-					{/if}
-				</div>
-			{/if}
-		{/each}
+	{#if initialized}
+		{#if keys.length > 0}
+			{#each keys as argName, i (argName)}
+				{#if Object.keys(schema.properties ?? {}).includes(argName)}
+					<div
+						class={twMerge(
+							'flex gap-2',
+							animateArg === argName && 'animate-pulse ring-2 ring-offset-2 ring-blue-500 rounded'
+						)}
+						data-arg={argName}
+					>
+						{#if schema?.properties?.[argName]}
+							<ArgInput
+								{resourceTypes}
+								minW={false}
+								autofocus={autofocus && !focusArg && i == 0}
+								label={argName}
+								description={schema.properties[argName].description}
+								bind:value={
+									() => stepsInputArgs?.getStepInputArgs(mod.id, argName),
+									(v) => stepsInputArgs?.setStepInputArgs(mod.id, argName, v)
+								}
+								type={schema.properties[argName].type}
+								oneOf={schema.properties[argName].oneOf}
+								required={schema?.required?.includes(argName)}
+								pattern={schema.properties[argName].pattern}
+								bind:editor={editor[argName]}
+								bind:valid={inputCheck[argName]}
+								defaultValue={schema.properties[argName].default}
+								enum_={schema.properties[argName].enum}
+								format={schema.properties[argName].format}
+								contentEncoding={schema.properties[argName].contentEncoding}
+								properties={schema.properties[argName].properties}
+								nestedRequired={schema.properties[argName].required}
+								itemsType={schema.properties[argName].items}
+								extra={schema.properties[argName]}
+								nullable={schema.properties[argName].nullable}
+								title={schema.properties[argName].title}
+								placeholder={schema.properties[argName].placeholder}
+							/>
+						{/if}
+						{#if stepsInputArgs?.isArgManuallySet(mod.id, argName)}
+							<div class="pt-6 mt-0.5">
+								<Button
+									on:click={() => {
+										plugIt(argName)
+									}}
+									size="sm"
+									variant="border"
+									color="light"
+									title="Re-evaluate input step"><RefreshCw size={14} /></Button
+								>
+							</div>
+						{/if}
+					</div>
+				{/if}
+			{/each}
+		{/if}
+	{:else}
+		<div class="text-center text-sm text-tertiary"> Loading test step arguments... </div>
 	{/if}
 </div>

package/package/components/ModulePreviewResultViewer.svelte

@@ -7,18 +7,16 @@ import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { getContext } from 'svelte';
 import { getStringError } from './copilot/chat/utils';
 import AiAgentLogViewer from './AIAgentLogViewer.svelte';
-let { lang, editor, diffEditor, loopStatus = undefined, lastJob = undefined, scriptProgress = $bindable(undefined), testJob = undefined, mod, testIsLoading = false, disableMock = false, disableHistory = false, onUpdateMock, loadingJob = false, tagLabel = undefined } = $props();
-const { testSteps } = getContext('FlowEditorContext');
-let selectedJob = $state(undefined);
-let preview = $state(undefined);
+let { lang, editor, diffEditor, loopStatus = undefined, scriptProgress = $bindable(undefined), testJob = undefined, mod, testIsLoading = false, disableMock = false, disableHistory = false, onUpdateMock, loadingJob = false, tagLabel = undefined } = $props();
+const { stepsInputArgs } = getContext('FlowEditorContext');
 let jobProgressReset = $state(() => { });
-$effect(() => {
-    if (preview != undefined && testJob) {
-        preview = undefined;
-    }
-});
-let forceJson = $state(false);
+let outputPickerInner = $state(undefined);
+export function getOutputPickerInner() {
+    return outputPickerInner;
+}
+const selectedJob = $derived.by(() => outputPickerInner?.getSelectedJob?.() ?? undefined);
 const logJob = $derived(testJob ?? selectedJob);
+const preview = $derived.by(() => outputPickerInner?.getPreview?.());
 </script>
 
 <Splitpanes horizontal>
@@ -33,7 +31,6 @@ const logJob = $derived(testJob ?? selectedJob);
 		{/if}
 
 		<OutputPickerInner
-			{lastJob}
 			{testJob}
 			fullResult
 			moduleId={mod.id}
@@ -41,24 +38,22 @@ const logJob = $derived(testJob ?? selectedJob);
 			getLogs
 			{onUpdateMock}
 			mock={mod.mock}
-			bind:forceJson
-			bind:selectedJob
 			isLoading={testIsLoading || loadingJob}
-			bind:preview
 			path={`path` in mod.value ? mod.value.path : ''}
 			{loopStatus}
 			{disableMock}
 			{disableHistory}
+			bind:this={outputPickerInner}
 		>
 			{#snippet copilot_fix()}
-				{#if lang && editor && diffEditor && testSteps.getStepArgs(mod.id) && selectedJob?.type === 'CompletedJob' && !selectedJob.success && getStringError(selectedJob.result)}
+				{#if lang && editor && diffEditor && stepsInputArgs.getStepArgs(mod.id) && selectedJob?.type === 'CompletedJob' && !selectedJob.success && getStringError(selectedJob.result)}
 					<ScriptFix {lang} />
 				{/if}
 			{/snippet}
 		</OutputPickerInner>
 	</Pane>
 	<Pane size={35} minSize={10}>
-		{#if (mod.mock?.enabled && preview != 'job') || preview == 'mock'}
+		{#if (mod.mock?.enabled && preview !== 'job' && testJob?.type !== 'QueuedJob') || preview === 'mock'}
 			<LogViewer
 				small
 				content={undefined}
@@ -82,9 +77,9 @@ const logJob = $derived(testJob ?? selectedJob);
 				jobId={logJob?.id}
 				duration={logJob?.['duration_ms']}
 				mem={logJob?.['mem_peak']}
-				content={logJob?.logs}
+				content={logJob?.['logs']}
 				isLoading={(testIsLoading && logJob?.['running'] == false) || loadingJob}
-				tag={logJob?.tag}
+				tag={logJob?.['tag']}
 				{tagLabel}
 			/>
 		{/if}

package/package/components/ModuleTest.svelte

@@ -5,17 +5,17 @@ import { getContext } from 'svelte';
 import JobLoader, {} from './JobLoader.svelte';
 import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
 import { loadSchemaFromModule } from './flows/flowInfers';
-let { mod, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined) } = $props();
-const { flowStore, flowStateStore, pathStore, testSteps, previewArgs, modulesTestStates } = getContext('FlowEditorContext');
+let { mod, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined), onJobDone } = $props();
+const { flowStore, flowStateStore, pathStore, stepsInputArgs, previewArgs, modulesTestStates } = getContext('FlowEditorContext');
 let jobLoader = $state(undefined);
 let jobProgressReset = () => { };
 let stepHistoryLoader = getStepHistoryLoaderContext();
 export function runTestWithStepArgs() {
-    runTest(testSteps.getStepArgs(mod.id));
+    runTest(stepsInputArgs.getStepArgs(mod.id));
 }
 export function loadArgsAndRunTest() {
-    testSteps?.updateStepArgs(mod.id, flowStateStore.val, flowStore?.val, previewArgs?.val);
-    runTest(testSteps.getStepArgs(mod.id));
+    stepsInputArgs?.updateStepArgs(mod.id, flowStateStore.val, flowStore?.val, previewArgs?.val);
+    runTest(stepsInputArgs.getStepArgs(mod.id));
 }
 export async function runTest(args) {
     // Not defined if JobProgressBar not loaded
@@ -92,6 +92,7 @@ function jobDone(testJob) {
     if (modulesTestStates.states[mod.id]) {
         modulesTestStates.states[mod.id].testJob = testJob;
     }
+    onJobDone?.();
 }
 export function cancelJob() {
     modulesTestStates.states[mod.id]?.cancel?.();

package/package/components/ModuleTest.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props {
     testIsLoading?: boolean;
     noEditor?: boolean;
     scriptProgress?: any;
+    onJobDone?: () => void;
 }
 declare const ModuleTest: import("svelte").Component<Props, {
     runTestWithStepArgs: () => void;

package/package/components/OktaSetting.svelte

@@ -1,10 +1,12 @@
-<script lang="ts">import CollapseLink from './CollapseLink.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import CollapseLink from './CollapseLink.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 let { value = $bindable() } = $props();
+let lastValues = { domain: undefined, custom: undefined };
 function changeDomain(domain, custom) {
     if (value) {
         let baseUrl = custom ? `https://${domain}` : `https://${domain}.okta.com`;
@@ -25,8 +27,11 @@ function changeDomain(domain, custom) {
     }
 }
 let enabled = $derived(value != undefined);
-$effect(() => {
-    changeDomain(value?.['domain'], value?.['custom']);
+$effect.pre(() => {
+    if (value?.['domain'] != lastValues.domain || value?.['custom'] != lastValues.custom) {
+        lastValues = { domain: value?.['domain'], custom: value?.['custom'] };
+        untrack(() => changeDomain(value?.['domain'], value?.['custom']));
+    }
 });
 </script>
 

package/package/components/Path.svelte

@@ -4,7 +4,7 @@ const lastMetaUsed = writable(undefined);
 
 <script lang="ts">import { pathToMeta } from '../common';
 import { localeConcatAnd, pluralize } from '../utils';
-import { AppService, FlowService, FolderService, ResourceService, ScheduleService, ScriptService, HttpTriggerService, VariableService, WebsocketTriggerService, KafkaTriggerService, PostgresTriggerService, NatsTriggerService, MqttTriggerService, SqsTriggerService, GcpTriggerService } from '../gen';
+import { AppService, FlowService, FolderService, ResourceService, ScheduleService, ScriptService, HttpTriggerService, VariableService, WebsocketTriggerService, KafkaTriggerService, PostgresTriggerService, NatsTriggerService, MqttTriggerService, SqsTriggerService, GcpTriggerService, EmailTriggerService } from '../gen';
 import { superadmin, userStore, workspaceStore } from '../stores';
 import { createEventDispatcher, getContext, untrack } from 'svelte';
 import { writable } from 'svelte/store';
@@ -224,6 +224,12 @@ async function pathExists(path, kind) {
             path: path
         });
     }
+    else if (kind === 'email_trigger') {
+        return await EmailTriggerService.existsEmailTrigger({
+            workspace: $workspaceStore,
+            path: path
+        });
+    }
     else {
         return false;
     }

package/package/components/Path.svelte.d.ts

@@ -1,4 +1,4 @@
-type PathKind = 'resource' | 'script' | 'variable' | 'flow' | 'schedule' | 'app' | 'raw_app' | 'http_trigger' | 'websocket_trigger' | 'kafka_trigger' | 'postgres_trigger' | 'nats_trigger' | 'mqtt_trigger' | 'sqs_trigger' | 'gcp_trigger';
+type PathKind = 'resource' | 'script' | 'variable' | 'flow' | 'schedule' | 'app' | 'raw_app' | 'http_trigger' | 'websocket_trigger' | 'kafka_trigger' | 'postgres_trigger' | 'nats_trigger' | 'mqtt_trigger' | 'sqs_trigger' | 'gcp_trigger' | 'email_trigger';
 interface Props {
     fullNamePlaceholder?: string | undefined;
     namePlaceholder?: string;

package/package/components/Portal.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	import { tick } from 'svelte'
 
 	export function portal(el, options) {
@@ -50,13 +50,17 @@
 
 <script>
 	/**
-	 * DOM Element or CSS Selector
-	 * @type { HTMLElement|string}
+	 * @typedef {Object} Props
+	 * @property { HTMLElement|string} [target] - DOM Element or CSS Selector
+	 * @property {any} [name]
+	 * @property {string|undefined} [class]
+	 * @property {import('svelte').Snippet} [children]
 	 */
-	export let target = 'body'
-	export let name = undefined
+
+	/** @type {Props} */
+	let { target = 'body', name = undefined, class: clazz = undefined, children } = $props()
 </script>
 
-<div use:portal={{ target, name }} hidden class={$$props.class}>
-	<slot />
+<div use:portal={{ target, name }} hidden class={clazz}>
+	{@render children?.()}
 </div>