windmill-components 1.532.0 → 1.542.4

package/package/components/triggers/TriggerLabel.svelte

@@ -15,6 +15,14 @@ let label = $derived.by(() => getTriggerLabel(trigger));
 	{label}
 </span>
 
+{#if trigger.type === 'default_email'}
+	<span
+		class="ml-2 bg-blue-50 dark:bg-blue-900/40 px-1.5 py-0.5 rounded text-xs text-blue-700 dark:text-blue-100 whitespace-nowrap"
+	>
+		Default
+	</span>
+{/if}
+
 {#if trigger.isPrimary}
 	<span
 		class="ml-2 bg-blue-50 dark:bg-blue-900/40 px-1.5 py-0.5 rounded text-xs text-blue-700 dark:text-blue-100 whitespace-nowrap"

package/package/components/triggers/TriggerTokens.svelte

@@ -14,7 +14,7 @@ export async function listTokens() {
         ? await FlowService.listTokensOfFlow({ workspace: $workspaceStore, path })
         : await ScriptService.listTokensOfScript({ workspace: $workspaceStore, path })).filter((x) => x.label && x.label.startsWith(labelPrefix + '-'));
     if (labelPrefix == 'email') {
-        $triggersCount = { ...($triggersCount ?? {}), email_count: tokens?.length };
+        $triggersCount = { ...($triggersCount ?? {}), default_email_count: tokens?.length };
     }
     else {
         $triggersCount = { ...($triggersCount ?? {}), webhook_count: tokens?.length };

package/package/components/triggers/TriggersEditor.svelte

@@ -13,7 +13,7 @@ import Button from '../common/button/Button.svelte';
 import TriggersWrapperV2 from './TriggersWrapper.svelte';
 import { triggerTypeToCaptureKind, CLOUD_DISABLED_TRIGGER_TYPES } from './utils';
 import { isCloudHosted } from '../../cloud';
-import { ScheduleService, WebsocketTriggerService, PostgresTriggerService, KafkaTriggerService, NatsTriggerService, MqttTriggerService, HttpTriggerService, GcpTriggerService, SqsTriggerService } from '../../gen';
+import { ScheduleService, WebsocketTriggerService, PostgresTriggerService, KafkaTriggerService, NatsTriggerService, MqttTriggerService, HttpTriggerService, GcpTriggerService, SqsTriggerService, EmailTriggerService } from '../../gen';
 import { sendUserToast } from '../../toast';
 let { noEditor, newItem = false, currentPath, fakeInitialPath = '', hash = undefined, args = {}, initialPath, isFlow, canHavePreprocessor = false, hasPreprocessor = false, isDeployed = false, schema = undefined, noCapture = false, isEditor = true, onDeployTrigger } = $props();
 let config = $state({});
@@ -47,7 +47,8 @@ async function deleteDeployedTrigger(triggerIndex) {
         gcp: () => GcpTriggerService.deleteGcpTrigger,
         sqs: () => SqsTriggerService.deleteSqsTrigger,
         mqtt: () => MqttTriggerService.deleteMqttTrigger,
-        http: () => HttpTriggerService.deleteHttpTrigger
+        http: () => HttpTriggerService.deleteHttpTrigger,
+        email: () => EmailTriggerService.deleteEmailTrigger
     };
     const deleteHandler = deleteHandlers[triggerType];
     if (deleteHandler && deletingTrigger !== triggerIndex) {
@@ -114,6 +115,9 @@ async function handleUpdate(trigger, path) {
     else if (triggerType === 'http') {
         await triggersState.fetchHttpTriggers(triggersCount, $workspaceStore, currentPath, isFlow, $userStore);
     }
+    else if (triggerType === 'email') {
+        await triggersState.fetchEmailTriggers(triggersCount, $workspaceStore, currentPath, isFlow, $userStore);
+    }
     triggersState.selectedTriggerIndex = triggersState.triggers.findIndex((t) => t.path === path && t.type === triggerType);
     loading = false;
     onDeployTrigger?.({ type: triggerType, id: triggerId, path: triggerPath });
@@ -155,7 +159,7 @@ const cloudDisabled = $derived(CLOUD_DISABLED_TRIGGER_TYPES.includes(triggersSta
 								onDeleteDraft={deleteTrigger}
 								onReset={handleResetDraft}
 								webhookToken={$triggersCount?.webhook_count}
-								emailToken={$triggersCount?.email_count}
+								emailToken={$triggersCount?.default_email_count}
 							/>
 						</div>
 					{:else}
@@ -229,8 +233,8 @@ const cloudDisabled = $derived(CLOUD_DISABLED_TRIGGER_TYPES.includes(triggersSta
 										onReset={() => {
 											handleResetDraft(triggersState.selectedTriggerIndex)
 										}}
-										on:email-domain={({ detail }) => {
-											emailDomain = detail
+										onEmailDomain={(domain) => {
+											emailDomain = domain
 										}}
 									/>
 								</div>

package/package/components/triggers/TriggersTable.svelte

@@ -66,7 +66,7 @@ let loading = false;
 									>
 										{`${webhookToken} token${webhookToken > 1 ? 's' : ''}`}
 									</span>
-								{:else if trigger.type === 'email' && emailToken}
+								{:else if trigger.type === 'default_email' && emailToken}
 									<span
 										class="ml-2 text-xs rounded-md bg-tertiary/50 group-hover:bg-primary text-primary-inverse px-1.5 py-0.5"
 									>
@@ -75,7 +75,7 @@ let loading = false;
 								{/if}
 							</div>
 
-							{#if !['email', 'webhook', 'cli'].includes(trigger.type)}
+							{#if !['default_email', 'webhook', 'cli'].includes(trigger.type)}
 								{#if trigger.isDraft}
 									<DeleteTriggerButton {trigger} onDelete={() => onDeleteDraft?.(index)} small />
 								{:else if !!trigger.draftConfig && !trigger.isDraft}

package/package/components/triggers/TriggersWrapper.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import RoutesPanel from './http/RoutesPanel.svelte';
 import WebhooksPanel from './webhook/WebhooksPanel.svelte';
-import EmailTriggerPanel from '../details/EmailTriggerPanel.svelte';
+import EmailTriggerPanel from './email/EmailTriggerPanel.svelte';
+import DefaultEmailPanel from './email/DefaultEmailPanel.svelte';
 import SchedulePanel from '../SchedulePanel.svelte';
 import PostgresTriggersPanel from './postgres/PostgresTriggersPanel.svelte';
 import KafkaTriggerPanel from './kafka/KafkaTriggersPanel.svelte';
@@ -15,7 +16,7 @@ import ClipboardPanel from '../details/ClipboardPanel.svelte';
 import CliHelpBox from '../CliHelpBox.svelte';
 import TriggerLabel from './TriggerLabel.svelte';
 import { twMerge } from 'tailwind-merge';
-let { selectedTrigger, isFlow = false, initialPath, fakeInitialPath, currentPath, hash, small, args, newItem, schema, ...props } = $props();
+let { selectedTrigger, isFlow = false, initialPath, fakeInitialPath, currentPath, hash, small, args, newItem, schema, onEmailDomain, ...props } = $props();
 </script>
 
 {#if selectedTrigger.type === 'http'}
@@ -37,13 +38,14 @@ let { selectedTrigger, isFlow = false, initialPath, fakeInitialPath, currentPath
 		scopes={isFlow ? [`jobs:run:flows:${currentPath}`] : [`jobs:run:scripts:${currentPath}`]}
 		{newItem}
 	/>
-{:else if selectedTrigger.type === 'email'}
-	<EmailTriggerPanel
+{:else if selectedTrigger.type === 'default_email'}
+	<DefaultEmailPanel
 		token=""
 		scopes={isFlow ? [`jobs:run:flows:${currentPath}`] : [`jobs:run:scripts:${currentPath}`]}
 		path={initialPath || fakeInitialPath}
 		{isFlow}
-		on:email-domain
+		{hash}
+		{onEmailDomain}
 	/>
 {:else if selectedTrigger.type === 'schedule'}
 	<SchedulePanel
@@ -118,6 +120,16 @@ let { selectedTrigger, isFlow = false, initialPath, fakeInitialPath, currentPath
 		{customLabel}
 		{...props}
 	/>
+{:else if selectedTrigger.type === 'email'}
+	<EmailTriggerPanel
+		{isFlow}
+		path={initialPath || fakeInitialPath}
+		{selectedTrigger}
+		defaultValues={selectedTrigger.draftConfig ?? selectedTrigger.captureConfig ?? undefined}
+		{customLabel}
+		{onEmailDomain}
+		{...props}
+	/>
 {:else if selectedTrigger.type === 'poll'}
 	<ScheduledPollPanel />
 {:else if selectedTrigger.type === 'cli'}

package/package/components/triggers/TriggersWrapper.svelte.d.ts

@@ -17,24 +17,8 @@ interface Props {
     onUpdate?: (path: string) => void;
     onDelete?: () => void;
     onReset?: () => void;
+    onEmailDomain: (domain: string) => void;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const TriggersWrapper: $$__sveltets_2_IsomorphicComponent<Props, {
-    'email-domain': CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type TriggersWrapper = InstanceType<typeof TriggersWrapper>;
+declare const TriggersWrapper: import("svelte").Component<Props, {}, "">;
+type TriggersWrapper = ReturnType<typeof TriggersWrapper>;
 export default TriggersWrapper;

package/package/components/{details/EmailTriggerCaptures.svelte → triggers/email/DefaultEmailCapture.svelte}

@@ -1,8 +1,8 @@
-<script lang="ts">import Label from '../Label.svelte';
-import { workspaceStore } from '../../stores';
+<script lang="ts">import Label from '../../Label.svelte';
+import { workspaceStore } from '../../../stores';
 import { base32 } from 'rfc4648';
-import ClipboardPanel from './ClipboardPanel.svelte';
-import CaptureSection, {} from '../triggers/CaptureSection.svelte';
+import ClipboardPanel from '../../details/ClipboardPanel.svelte';
+import CaptureSection, {} from '../CaptureSection.svelte';
 import { fade } from 'svelte/transition';
 let { isFlow = false, path, emailDomain = null, captureInfo = undefined, hasPreprocessor = false, captureLoading = false } = $props();
 function getCaptureEmail() {
@@ -20,7 +20,7 @@ let captureEmail = $derived(getCaptureEmail());
 
 {#if captureInfo}
 	<CaptureSection
-		captureType="email"
+		captureType="default_email"
 		disabled={false}
 		{captureInfo}
 		{captureLoading}

package/package/components/{details/EmailTriggerCaptures.svelte.d.ts → triggers/email/DefaultEmailCapture.svelte.d.ts}

@@ -1,4 +1,4 @@
-import { type CaptureInfo } from '../triggers/CaptureSection.svelte';
+import { type CaptureInfo } from '../CaptureSection.svelte';
 interface Props {
     isFlow?: boolean;
     path: string;
@@ -20,7 +20,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const EmailTriggerCaptures: $$__sveltets_2_IsomorphicComponent<Props, {
+declare const DefaultEmailCapture: $$__sveltets_2_IsomorphicComponent<Props, {
     captureToggle: CustomEvent<{
         disableOnly?: boolean;
     }>;
@@ -38,5 +38,5 @@ declare const EmailTriggerCaptures: $$__sveltets_2_IsomorphicComponent<Props, {
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;
-type EmailTriggerCaptures = InstanceType<typeof EmailTriggerCaptures>;
-export default EmailTriggerCaptures;
+type DefaultEmailCapture = InstanceType<typeof DefaultEmailCapture>;
+export default DefaultEmailCapture;

package/package/components/{details/EmailTriggerConfigSection.svelte → triggers/email/DefaultEmailConfigSection.svelte}

@@ -1,17 +1,18 @@
-<script lang="ts">import { run } from 'svelte/legacy';
-import Button from '../common/button/Button.svelte';
-import Label from '../Label.svelte';
-import Tooltip from '../Tooltip.svelte';
+<script lang="ts">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 { 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 '../../details/ClipboardPanel.svelte';
+import Alert from '../../common/alert/Alert.svelte';
 import { base32 } from 'rfc4648';
+import { emptyString } from '../../../utils';
+import UserSettings from '../../UserSettings.svelte';
 let requestType = $state('path');
-function emailAddress(requestType, path, hash, isFlow, token) {
+function emailAddress() {
     const pathOrHash = requestType === 'hash' ? hash : path.replaceAll('/', '.');
     const plainPrefix = `${$workspaceStore}+${(requestType === 'hash' ? 'hash.' : isFlow ? 'flow.' : '') + pathOrHash}+${token}`;
     const encodedPrefix = base32
@@ -22,8 +23,8 @@ function emailAddress(requestType, path, hash, isFlow, token) {
     return `${pathOrHash}+${encodedPrefix}@${emailDomain}`;
 }
 let { token = $bindable(''), isFlow = false, hash = undefined, path, userSettings, emailDomain = null, email = $bindable('') } = $props();
-run(() => {
-    email = emailAddress(requestType, path, hash, isFlow, token);
+$effect(() => {
+    email = emailAddress();
 });
 </script>
 
@@ -76,7 +77,16 @@ run(() => {
 		{#key requestType}
 			{#key token}
 				<Label label="Email address">
-					<ClipboardPanel content={email} />
+					{#if !emptyString(token)}
+						<ClipboardPanel content={email} />
+					{:else}
+						<input
+							type="text"
+							disabled
+							value="Create a token first"
+							class="!text-xs !text-red-400"
+						/>
+					{/if}
 				</Label>
 			{/key}
 		{/key}

package/package/components/triggers/email/DefaultEmailConfigSection.svelte.d.ts

@@ -0,0 +1,13 @@
+import UserSettings from '../../UserSettings.svelte';
+interface Props {
+    token?: string;
+    isFlow?: boolean;
+    hash?: string | undefined;
+    path: string;
+    userSettings: UserSettings;
+    emailDomain?: string | null;
+    email?: string;
+}
+declare const DefaultEmailConfigSection: import("svelte").Component<Props, {}, "email" | "token">;
+type DefaultEmailConfigSection = ReturnType<typeof DefaultEmailConfigSection>;
+export default DefaultEmailConfigSection;

package/package/components/triggers/email/DefaultEmailPanel.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
+import UserSettings from '../../UserSettings.svelte';
+import { generateRandomString } from '../../../utils';
+import HighlightTheme from '../../HighlightTheme.svelte';
+import Alert from '../../common/alert/Alert.svelte';
+import Skeleton from '../../common/skeleton/Skeleton.svelte';
+import TriggerTokens from '../TriggerTokens.svelte';
+import Description from '../../Description.svelte';
+import Section from '../../Section.svelte';
+import DefaultEmailConfigSection from './DefaultEmailConfigSection.svelte';
+import { getEmailDomain } from './utils';
+let userSettings = $state(undefined);
+let { token = $bindable(), scopes = [], isFlow = false, hash = undefined, path, onEmailDomain } = $props();
+let emailDomain = $state(null);
+let triggerTokens = $state(undefined);
+let loading = $state(true);
+getEmailDomain().then((domain) => {
+    emailDomain = domain;
+    loading = false;
+});
+$effect(() => {
+    if (emailDomain) {
+        onEmailDomain(emailDomain);
+    }
+});
+</script>
+
+<HighlightTheme />
+
+<UserSettings
+	bind:this={userSettings}
+	on:tokenCreated={(e) => {
+		token = e.detail
+		triggerTokens?.listTokens()
+	}}
+	newTokenWorkspace={$workspaceStore}
+	newTokenLabel={`email-${$userStore?.username ?? 'superadmin'}-${generateRandomString(4)}`}
+	{scopes}
+/>
+
+<Section label="Default email trigger" class="flex flex-col gap-4">
+	<Description link="https://www.windmill.dev/docs/advanced/email_triggers">
+		Default email trigger is a partially fixed email address that can be used to trigger a script or
+		flow. The email address is composed of the encoded workspace and script or flow path as well as
+		the token.
+	</Description>
+	{#if loading}
+		<Skeleton layout={[[18]]} />
+	{:else}
+		{#if emailDomain}
+			<DefaultEmailConfigSection {hash} {token} {path} {isFlow} {userSettings} {emailDomain} />
+		{: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}
+
+		<TriggerTokens bind:this={triggerTokens} {isFlow} {path} labelPrefix="email" />
+	{/if}
+</Section>

package/package/components/triggers/email/DefaultEmailPanel.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    token: string;
+    scopes?: string[];
+    isFlow?: boolean;
+    hash?: string | undefined;
+    path: string;
+    onEmailDomain: (domain: string) => void;
+}
+declare const DefaultEmailPanel: import("svelte").Component<Props, {}, "token">;
+type DefaultEmailPanel = ReturnType<typeof DefaultEmailPanel>;
+export default DefaultEmailPanel;

package/package/components/triggers/email/EmailCapture.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">import { workspaceStore } from '../../../stores';
+import Label from '../../Label.svelte';
+import CaptureSection from '../CaptureSection.svelte';
+import { fade } from 'svelte/transition';
+import ClipboardPanel from '../../details/ClipboardPanel.svelte';
+let { local_part, emailDomain = null, captureInfo = undefined, isValid = undefined, hasPreprocessor = false, isFlow = false, captureLoading = false } = $props();
+let captureEmail = $derived(`capture+${$workspaceStore}-${local_part}@${emailDomain}`);
+</script>
+
+{#if captureInfo}
+	<CaptureSection
+		captureType="email"
+		disabled={isValid === false}
+		{captureInfo}
+		{captureLoading}
+		on:captureToggle
+		on:applyArgs
+		on:updateSchema
+		on:addPreprocessor
+		on:testWithArgs
+		{hasPreprocessor}
+		{isFlow}
+	>
+		{#snippet description()}
+			{#if captureInfo.active}
+				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
+					Send an email to the test address below to simulate an email trigger.
+				</p>
+			{:else}
+				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
+					Start capturing to listen to email events on this test address.
+				</p>
+			{/if}
+		{/snippet}
+		<Label label="Test email address" disabled={!captureInfo.active}>
+			<ClipboardPanel content={captureEmail} disabled={!captureInfo.active} />
+		</Label>
+	</CaptureSection>
+{/if}

package/package/components/triggers/email/EmailCapture.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { CaptureInfo } from '../CaptureSection.svelte';
+interface Props {
+    local_part: string | undefined;
+    emailDomain: string | null;
+    captureInfo?: CaptureInfo | undefined;
+    isValid?: boolean | undefined;
+    hasPreprocessor?: boolean;
+    isFlow?: boolean;
+    captureLoading?: boolean;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const EmailCapture: $$__sveltets_2_IsomorphicComponent<Props, {
+    captureToggle: CustomEvent<{
+        disableOnly?: boolean;
+    }>;
+    applyArgs: CustomEvent<{
+        kind: "main" | "preprocessor";
+        args: Record<string, any>;
+    }>;
+    updateSchema: CustomEvent<{
+        payloadData: Record<string, any>;
+        redirect: boolean;
+        args?: boolean;
+    }>;
+    addPreprocessor: CustomEvent<null>;
+    testWithArgs: CustomEvent<Record<string, any>>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type EmailCapture = InstanceType<typeof EmailCapture>;
+export default EmailCapture;

package/package/components/triggers/email/EmailTriggerEditor.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">import { tick } from 'svelte';
+import EmailTriggerEditorInner from './EmailTriggerEditorInner.svelte';
+let { onUpdate = undefined, customSaveBehavior } = $props();
+let open = $state(false);
+export async function openEdit(ePath, isFlow) {
+    open = true;
+    await tick();
+    drawer?.openEdit(ePath, isFlow);
+}
+export async function openNew(is_flow, initial_script_path, defaultValues) {
+    open = true;
+    await tick();
+    drawer?.openNew(is_flow, initial_script_path, defaultValues);
+}
+let drawer = $state();
+</script>
+
+{#if open}
+	<EmailTriggerEditorInner {customSaveBehavior} {onUpdate} bind:this={drawer} />
+{/if}

package/package/components/triggers/email/EmailTriggerEditor.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { EditEmailTrigger, EmailTrigger } from '../../../gen';
+interface Props {
+    onUpdate?: (cfg?: Record<string, any>) => void;
+    customSaveBehavior?: (cfg: EmailTrigger | EditEmailTrigger) => void;
+}
+declare const EmailTriggerEditor: import("svelte").Component<Props, {
+    openEdit: (ePath: string, isFlow: boolean) => Promise<void>;
+    openNew: (is_flow: boolean, initial_script_path?: string, defaultValues?: Record<string, any>) => Promise<void>;
+}, "">;
+type EmailTriggerEditor = ReturnType<typeof EmailTriggerEditor>;
+export default EmailTriggerEditor;

package/package/components/triggers/email/EmailTriggerEditorConfigSection.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">import { Alert } from '../../common';
+import Required from '../../Required.svelte';
+import Section from '../../Section.svelte';
+import { userStore, workspaceStore } from '../../../stores';
+// import { page } from '$app/stores'
+import { getEmailAddress, getEmailDomain } from './utils';
+import { isCloudHosted } from '../../../cloud';
+import Toggle from '../../Toggle.svelte';
+import TestingBadge from '../testingBadge.svelte';
+import { untrack } from 'svelte';
+import { EmailTriggerService } from '../../../gen';
+import ClipboardPanel from '../../details/ClipboardPanel.svelte';
+let { initialTriggerPath = undefined, dirtyLocalPart = $bindable(false), local_part = $bindable(), can_write = false, headless = false, workspaced_local_part = $bindable(false), isValid = $bindable(false), isDraftOnly = true, showTestingBadge = false } = $props();
+let validateTimeout = undefined;
+let addressError = $state('');
+async function validateEmailAddress(localPart, workspaced_local_part) {
+    if (validateTimeout) {
+        clearTimeout(validateTimeout);
+    }
+    validateTimeout = setTimeout(async () => {
+        if (!localPart || !/^[a-z0-9._]{1,64}$/.test(localPart)) {
+            addressError =
+                'Local part not valid, only accepts lowercase alphanumeric characters, dots and underscores, and must be between 1 and 64 characters';
+        }
+        else if (await emailTriggerExists(localPart, workspaced_local_part)) {
+            addressError = 'Email address already taken';
+        }
+        else {
+            addressError = '';
+        }
+        validateTimeout = undefined;
+    }, 500);
+}
+async function emailTriggerExists(local_part, workspaced_local_part) {
+    return await EmailTriggerService.existsEmailLocalPart({
+        workspace: $workspaceStore,
+        requestBody: {
+            local_part,
+            trigger_path: initialTriggerPath,
+            workspaced_local_part: workspaced_local_part
+        }
+    });
+}
+$effect.pre(() => {
+    ;
+    [local_part, workspaced_local_part];
+    untrack(() => {
+        validateEmailAddress(local_part, workspaced_local_part);
+    });
+});
+$effect.pre(() => {
+    isValid = addressError === '';
+});
+let emailDomain = $state(null);
+getEmailDomain().then((domain) => {
+    emailDomain = domain;
+});
+let fullEmailAddress = $derived(getEmailAddress(local_part, workspaced_local_part, $workspaceStore ?? '', emailDomain ?? ''));
+$effect.pre(() => {
+    local_part === undefined && (local_part = '');
+});
+let userIsAdmin = $derived($userStore?.is_admin || $userStore?.is_super_admin);
+let userCanEditConfig = $derived(userIsAdmin || isDraftOnly); // User can edit config if they are admin or if the trigger is a draft which will not be saved
+</script>
+
+<div>
+	<Section label="Email" {headless}>
+		{#snippet header()}
+			{#if showTestingBadge}
+				<TestingBadge />
+			{/if}
+		{/snippet}
+		{#if !userCanEditConfig && isDraftOnly}
+			<Alert type="info" title="Admin only" collapsible size="xs">
+				Email triggers can only be edited by workspace admins
+			</Alert>
+			<div class="my-2"></div>
+		{/if}
+		<div class="flex flex-col w-full gap-4">
+			<label class="block grow w-full">
+				<div class="flex flex-col gap-1">
+					<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+						<div>
+							Local part
+							<Required required={true} />
+						</div>
+					</div>
+					<!-- svelte-ignore a11y_autofocus -->
+					<input
+						type="text"
+						autocomplete="off"
+						bind:value={local_part}
+						disabled={!userCanEditConfig || !can_write}
+						class={addressError === ''
+							? ''
+							: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
+						oninput={() => {
+							dirtyLocalPart = true
+						}}
+					/>
+				</div>
+			</label>
+
+			<div class="flex flex-col w-full">
+				<ClipboardPanel content={fullEmailAddress} />
+
+				<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5"
+					>{dirtyLocalPart ? addressError : ''}</div
+				>
+				{#if !isCloudHosted()}
+					<div class="mt-1">
+						<Toggle
+							size="sm"
+							checked={workspaced_local_part}
+							disabled={!can_write || !userCanEditConfig}
+							on:change={() => {
+								workspaced_local_part = !workspaced_local_part
+								dirtyLocalPart = true
+							}}
+							options={{
+								right: 'Prefix with workspace',
+								rightTooltip:
+									'Prefixes the email address with the workspace ID (e.g., ${workspace_id}-${local_part}@). Note: deploying the email trigger to another workspace updates the email address workspace prefix accordingly.',
+								rightDocumentationLink:
+									'https://www.windmill.dev/docs/advanced/email_triggers#workspace-prefix'
+							}}
+						/>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</Section>
+</div>

package/package/components/triggers/email/EmailTriggerEditorConfigSection.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    initialTriggerPath?: string | undefined;
+    dirtyLocalPart?: boolean;
+    local_part: string | undefined;
+    can_write?: boolean;
+    headless?: boolean;
+    workspaced_local_part?: boolean;
+    isValid?: boolean;
+    isDraftOnly?: boolean;
+    showTestingBadge?: boolean;
+}
+declare const EmailTriggerEditorConfigSection: import("svelte").Component<Props, {}, "local_part" | "workspaced_local_part" | "isValid" | "dirtyLocalPart">;
+type EmailTriggerEditorConfigSection = ReturnType<typeof EmailTriggerEditorConfigSection>;
+export default EmailTriggerEditorConfigSection;