windmill-components 1.433.0 → 1.444.0

package/package/components/common/layout/ListElement.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ListElementProps */
+/** @typedef {typeof __propDef.events}  ListElementEvents */
+/** @typedef {typeof __propDef.slots}  ListElementSlots */
+export default class ListElement extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ListElementProps = typeof __propDef.props;
+export type ListElementEvents = typeof __propDef.events;
+export type ListElementSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/common/menu/MenuV2.svelte

@@ -8,6 +8,7 @@ export let placement = 'bottom-start';
 export let justifyEnd = false;
 export let lightMode = false;
 export let maxHeight = 900;
+export let disabled = false;
 const [floatingRef, floatingContent] = createFloatingActions({
     strategy: 'fixed',
     middleware: [offset(), flip(), shift()],
@@ -15,10 +16,10 @@ const [floatingRef, floatingContent] = createFloatingActions({
 });
 </script>
 
-<Menu  let:open as="div" class="relative hover:z-50 flex w-full h-8">
+<Menu let:open as="div" class="relative hover:z-50 flex w-full h-8">
 	<ResolveOpen {open} on:open on:close />
 	<div use:floatingRef class="w-full">
-		<MenuButton class={twMerge('w-full', justifyEnd ? 'flex justify-end' : '')}>
+		<MenuButton class={twMerge('w-full', justifyEnd ? 'flex justify-end' : '')} disabled={disabled}>
 			<slot name="trigger" />
 		</MenuButton>
 	</div>

package/package/components/common/menu/MenuV2.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         justifyEnd?: boolean | undefined;
         lightMode?: boolean | undefined;
         maxHeight?: number | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         open: CustomEvent<any>;

package/package/components/common/modal/Modal.svelte

@@ -66,10 +66,12 @@ function fadeFast(node) {
 				>
 					<div class="flex">
 						<div class="ml-4 text-left flex-1">
-							<h3 class="text-lg font-medium text-primary">
-								{title}
-							</h3>
-							<div class="mt-2 text-sm text-tertiary">
+							<div class="flex flex-row items-center justify-between">
+								<h3>{title}</h3>
+								<slot name="settings" />
+							</div>
+
+							<div class="mt-4 text-sm text-tertiary">
 								<slot />
 							</div>
 						</div>

package/package/components/common/modal/Modal.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        settings: {};
         default: {};
         actions: {};
     };

package/package/components/common/modal/Modal2.svelte

@@ -0,0 +1,101 @@
+<script>import Portal from '../../Portal.svelte';
+import { twMerge } from 'tailwind-merge';
+import { clickOutside } from '../../../utils';
+import { X } from 'lucide-svelte';
+import List from '../layout/List.svelte';
+import { fade } from 'svelte/transition';
+export let title;
+export let css = {};
+export let target = '';
+export let isOpen = false;
+export let fixedSize = 'md';
+// Add size mapping with custom pixel values
+const sizeStyles = {
+    xs: { width: '400px', height: '250px' },
+    sm: { width: '600px', height: '400px' },
+    md: { width: '800px', height: '500px' },
+    lg: { width: '1400px', height: '720px' },
+    xl: { width: '1600px', height: '800px' },
+    xxl: { width: '1600px', height: '1000px' }
+};
+export function close() {
+    isOpen = false;
+}
+export function open() {
+    isOpen = true;
+}
+function handleKeyDown(event) {
+    if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        close();
+    }
+}
+function fadeFast(node) {
+    return fade(node, { duration: 200 });
+}
+</script>
+
+<svelte:window on:keydown={handleKeyDown} />
+
+{#if isOpen}
+	<Portal name="always-mounted" {target}>
+		<div
+			class={'fixed top-0 bottom-0 left-0 right-0 transition-all overflow-auto z-[1100] bg-black bg-opacity-60 w-full h-full'}
+			transition:fadeFast|local
+		>
+			<div class="flex min-h-full items-center justify-center p-8">
+				<div
+					style={`width: ${sizeStyles[fixedSize].width}; height: ${sizeStyles[fixedSize].height}; ${
+						css?.popup?.style || ''
+					}`}
+					class={twMerge(
+						'max-h-screen-80 max-w-screen-80 rounded-lg relative bg-surface pt-2 px-4 pb-4',
+						css?.popup?.class,
+						'wm-modal-form-popup'
+					)}
+					use:clickOutside
+					on:click_outside={() => {
+						close()
+					}}
+				>
+					<List gap="md">
+						<div class="flex w-full">
+							<List horizontal justify="between">
+								<h3>{title}</h3>
+								<div class="grow w-min-0">
+									<List horizontal justify="between">
+										<div class="min-w-0 grow">
+											<slot name="header-left" />
+										</div>
+										<div class="min-w-0 grow-0 justify-end">
+											<List horizontal justify="end">
+												<slot name="header-right" />
+												<div class="w-8">
+													<button
+														on:click={() => {
+															isOpen = false
+														}}
+														class="hover:bg-surface-hover rounded-full w-8 h-8 flex items-center justify-center transition-all"
+													>
+														<X class="text-tertiary " />
+													</button>
+												</div>
+											</List>
+										</div>
+									</List>
+								</div>
+							</List>
+						</div>
+
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div class="w-full flex grow min-h-0" on:click|stopPropagation={() => {}}>
+							<slot />
+						</div>
+					</List>
+				</div>
+			</div>
+		</div>
+	</Portal>
+{/if}

package/package/components/common/modal/Modal2.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        css?: any;
+        target?: string | undefined;
+        isOpen?: boolean | undefined;
+        fixedSize?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined;
+        close?: (() => void) | undefined;
+        open?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'header-left': {};
+        'header-right': {};
+        default: {};
+    };
+};
+export type Modal2Props = typeof __propDef.props;
+export type Modal2Events = typeof __propDef.events;
+export type Modal2Slots = typeof __propDef.slots;
+export default class Modal2 extends SvelteComponent<Modal2Props, Modal2Events, Modal2Slots> {
+    get close(): () => void;
+    get open(): () => void;
+}
+export {};

package/package/components/common/popup/Popup.svelte

@@ -13,10 +13,12 @@ export let shouldUsePortal = true;
 export let target = undefined;
 export let noTransition = false;
 export let popupHover = false;
+export let preventPopupClosingOnClickInside = false;
+export let disabled = false;
 </script>
 
 <Popover on:close class="leading-none">
-	<PopoverButton let:open>
+	<PopoverButton let:open {disabled}>
 		<div use:floatingRef>
 			<slot name="button" {open} />
 		</div>
@@ -24,6 +26,7 @@ export let popupHover = false;
 	<ConditionalPortal condition={shouldUsePortal} {target}>
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div
 			use:floatingContent
 			class={`z5000 ${floatingClasses}`}
@@ -33,6 +36,7 @@ export let popupHover = false;
 			on:mouseleave={() => {
 				popupHover = false
 			}}
+			on:click={(e) => preventPopupClosingOnClickInside && e.stopPropagation()}
 		>
 			{#if !noTransition}
 				<Transition

package/package/components/common/popup/Popup.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         target?: string | HTMLElement | undefined;
         noTransition?: boolean | undefined;
         popupHover?: boolean | undefined;
+        preventPopupClosingOnClickInside?: boolean | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         close: CustomEvent<any>;

package/package/components/common/toggleButton-v2/ToggleButton.svelte

@@ -43,7 +43,7 @@ const { select, selected } = getContext('ToggleButtonGroup');
 			{#if icon}
 				<svelte:component
 					this={icon}
-					size={14}
+					size={small ? 12 : 14}
 					color={$selected === value ? selectedColor : '#9CA3AF'}
 					{...iconProps}
 				/>

package/package/components/copilot/FlowCopilotStatus.svelte

@@ -120,7 +120,7 @@ $: copilotStatus && copilotPopover?.refresh();
 				variant={'border'}
 				nonCaptureEvent
 			>
-				AI Builder
+				AI builder
 			</Button>
 		</svelte:fragment>
 		<div class="block text-primary">

package/package/components/details/ClipboardPanel.svelte

@@ -1,7 +1,10 @@
 <script>import { copyToClipboard } from '../../utils';
 import { Clipboard } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
 export let content;
 export let title = undefined;
+export let size = 'sm';
+export let disabled = false;
 </script>
 
 {#if title !== undefined}
@@ -11,12 +14,19 @@ export let title = undefined;
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class="grow min-w-0 w-full px-2 py-1 border flex items-center cursor-pointer bg-surface-secondary text-primary justify-between rounded-md"
+	class="grow min-w-0 w-full px-2 py-1 border flex items-center bg-surface-secondary text-primary justify-between rounded-md"
+	class:cursor-not-allowed={disabled}
+	class:cursor-pointer={!disabled}
 	on:click={(e) => {
+		if (disabled) {
+			return
+		}
 		e.preventDefault()
 		copyToClipboard(content)
 	}}
 >
-	<div class="text-xs truncate whitespace-no-wrap grow">{content}</div>
+	<div class={twMerge('truncate whitespace-no-wrap grow', size === 'sm' ? 'text-xs' : 'text-sm')}
+		>{content}</div
+	>
 	<Clipboard size={12} class="flex-shrink-0" />
 </div>

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

@@ -3,6 +3,8 @@ declare const __propDef: {
     props: {
         content: string;
         title?: string | undefined;
+        size?: "sm" | "md" | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/details/CopyableCodeBlock.svelte

@@ -0,0 +1,24 @@
+<script>import { copyToClipboard } from '../../utils';
+import { Clipboard } from 'lucide-svelte';
+import Highlight from 'svelte-highlight';
+export let code;
+export let language;
+export let disabled = false;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class="flex flex-row flex-1 border p-2 rounded-md overflow-auto relative"
+	class:cursor-not-allowed={disabled}
+	on:click={(e) => {
+		if (disabled) {
+			return
+		}
+		e.preventDefault()
+		copyToClipboard(code)
+	}}
+>
+	<Highlight {language} {code} class="pointer-events-none" />
+	<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { LanguageType } from 'svelte-highlight/languages';
+declare const __propDef: {
+    props: {
+        code: string;
+        language: LanguageType<string>;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CopyableCodeBlockProps = typeof __propDef.props;
+export type CopyableCodeBlockEvents = typeof __propDef.events;
+export type CopyableCodeBlockSlots = typeof __propDef.slots;
+export default class CopyableCodeBlock extends SvelteComponent<CopyableCodeBlockProps, CopyableCodeBlockEvents, CopyableCodeBlockSlots> {
+}
+export {};

package/package/components/details/DetailPageLayout.svelte

@@ -18,7 +18,9 @@ setContext('TriggerContext', {
     selectedTrigger: selectedTriggerStore,
     primarySchedule: primaryScheduleStore,
     triggersCount,
-    simplifiedPoll
+    simplifiedPoll,
+    defaultValues: writable(undefined),
+    captureOn: writable(undefined)
 });
 </script>
 

package/package/components/details/EmailTriggerConfigSection.svelte

@@ -0,0 +1,119 @@
+<script>import Button from '../common/button/Button.svelte';
+import Label from '../Label.svelte';
+import Tooltip from '../Tooltip.svelte';
+import { AlertTriangle } from 'lucide-svelte';
+import { workspaceStore } from '../../stores';
+import { SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON } from '../../consts';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ClipboardPanel from './ClipboardPanel.svelte';
+import Alert from '../common/alert/Alert.svelte';
+import { base32 } from 'rfc4648';
+import CaptureSection, {} from '../triggers/CaptureSection.svelte';
+import CaptureTable from '../triggers/CaptureTable.svelte';
+export let token = '';
+export let isFlow = false;
+export let hash = undefined;
+export let path;
+export let userSettings;
+export let emailDomain = null;
+export let showCapture = false;
+export let captureInfo = undefined;
+export let captureTable = undefined;
+let requestType = 'path';
+function getCaptureEmail() {
+    const cleanedPath = path.replaceAll('/', '.');
+    const plainPrefix = `capture+${$workspaceStore}+${(isFlow ? 'flow.' : '') + cleanedPath}`;
+    const encodedPrefix = base32
+        .stringify(new TextEncoder().encode(plainPrefix), {
+        pad: false
+    })
+        .toLowerCase();
+    console.log(encodedPrefix);
+    return `${encodedPrefix}@${emailDomain}`;
+}
+$: captureEmail = getCaptureEmail();
+function emailAddress(requestType, path, hash, isFlow, token) {
+    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}`;
+}
+export let email = '';
+$: email = emailAddress(requestType, path, hash, isFlow, token);
+</script>
+
+<div>
+	{#if showCapture && captureInfo}
+		<CaptureSection
+			bind:captureTable
+			captureType="email"
+			disabled={false}
+			{captureInfo}
+			on:captureToggle
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+		>
+			<Label label="Email address">
+				<ClipboardPanel content={captureEmail} disabled={!captureInfo.active} />
+			</Label>
+		</CaptureSection>
+	{/if}
+	<div class="flex flex-col gap-4">
+		{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
+			<Label label="Token">
+				<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}
+			</Label>
+		{/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}
+
+		{#key requestType}
+			{#key token}
+				<Label label="Email address">
+					<ClipboardPanel content={email} />
+				</Label>
+			{/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>
+</div>

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

@@ -0,0 +1,38 @@
+import { SvelteComponent } from "svelte";
+import { type CaptureInfo } from '../triggers/CaptureSection.svelte';
+import CaptureTable from '../triggers/CaptureTable.svelte';
+declare const __propDef: {
+    props: {
+        token?: string | undefined;
+        isFlow?: boolean | undefined;
+        hash?: string | undefined;
+        path: string;
+        userSettings: any;
+        emailDomain?: string | null | undefined;
+        showCapture?: boolean | undefined;
+        captureInfo?: CaptureInfo | undefined;
+        captureTable?: CaptureTable | undefined;
+        email?: string | undefined;
+    };
+    events: {
+        captureToggle: CustomEvent<undefined>;
+        applyArgs: CustomEvent<{
+            kind: "main" | "preprocessor";
+            args: Record<string, any> | undefined;
+        }>;
+        updateSchema: CustomEvent<{
+            schema: any;
+            redirect: boolean;
+        }>;
+        addPreprocessor: CustomEvent<null>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EmailTriggerConfigSectionProps = typeof __propDef.props;
+export type EmailTriggerConfigSectionEvents = typeof __propDef.events;
+export type EmailTriggerConfigSectionSlots = typeof __propDef.slots;
+export default class EmailTriggerConfigSection extends SvelteComponent<EmailTriggerConfigSectionProps, EmailTriggerConfigSectionEvents, EmailTriggerConfigSectionSlots> {
+}
+export {};

package/package/components/details/EmailTriggerPanel.svelte

@@ -1,50 +1,34 @@
-<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';
+<script>import { enterpriseLicense, userStore, workspaceStore } from '../../stores';
 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';
-import Label from '../Label.svelte';
 import TriggerTokens from '../triggers/TriggerTokens.svelte';
+import TriggersEditorSection from '../triggers/TriggersEditorSection.svelte';
+import Description from '../Description.svelte';
 let userSettings;
 export let token;
 export let scopes = [];
 export let isFlow = false;
 export let hash = undefined;
 export let path;
+export let isEditor = false;
+export let canHavePreprocessor = false;
+export let hasPreprocessor = false;
+export let newItem = false;
 let emailDomain = null;
+let triggerTokens = undefined;
 let loading = true;
 async function getEmailDomain() {
     emailDomain =
         (await SettingService.getGlobal({
             key: 'email_domain'
-        })) ?? null;
+        })) ?? 'mail.test.com';
     loading = false;
 }
 getEmailDomain();
-let requestType = 'path';
-function emailAddress(requestType, path, hash, isFlow, token) {
-    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}`;
-}
-export let email = '';
-$: email = emailAddress(requestType, path, hash, isFlow, token);
-let triggerTokens = undefined;
 </script>
 
 <HighlightTheme />
@@ -61,59 +45,28 @@ let triggerTokens = undefined;
 />
 
 <div class="flex flex-col w-full gap-4">
+	<Description link="https://www.windmill.dev/docs/advanced/email_triggers">
+		Email triggers execute scripts and flows when emails are sent to specific addresses. Each
+		trigger has its own unique email address that can be used to invoke the script or flow.
+	</Description>
 	{#if loading}
 		<Skeleton layout={[[18]]} />
 	{:else}
 		{#if emailDomain}
-			{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
-				<Label label="Token">
-					<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}
-				</Label>
-			{/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}
-
-			{#key requestType}
-				{#key token}
-					<Label label="Email address">
-						<ClipboardPanel content={email} />
-					</Label>
-				{/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>
+			<TriggersEditorSection
+				cloudDisabled={false}
+				triggerType="email"
+				{isFlow}
+				noSave
+				data={{ emailDomain, userSettings, token, hash, path }}
+				{isEditor}
+				{path}
+				{canHavePreprocessor}
+				{hasPreprocessor}
+				on:applyArgs
+				on:addPreprocessor
+				{newItem}
+			/>
 		{:else}
 			<div>
 				<Alert title="Email triggers are disabled" size="xs" type="warning">