windmill-components 1.537.1 → 1.542.4

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;