From 6c9e32af104a897e5c2a5b41867d2ffbbacc8acb Mon Sep 17 00:00:00 2001 From: HugoCasa Date: Thu, 15 Aug 2024 10:06:35 +0200 Subject: [PATCH] fix(frontend): improve UI for email triggers (#4243) * fix(frontend): improve UI for email triggers * fix: nits --- .../details/DetailPageDetailPanel.svelte | 12 +- .../details/DetailPageLayout.svelte | 2 + .../details/EmailTriggerPanel.svelte | 129 ++++++++++++++++++ .../components/details/WebhooksPanel.svelte | 81 +---------- .../(logged)/flows/get/[...path]/+page.svelte | 9 ++ .../scripts/get/[...hash]/+page.svelte | 9 ++ 6 files changed, 166 insertions(+), 76 deletions(-) create mode 100644 frontend/src/lib/components/details/EmailTriggerPanel.svelte diff --git a/frontend/src/lib/components/details/DetailPageDetailPanel.svelte b/frontend/src/lib/components/details/DetailPageDetailPanel.svelte index d29c9f140e..4263e8ab3b 100644 --- a/frontend/src/lib/components/details/DetailPageDetailPanel.svelte +++ b/frontend/src/lib/components/details/DetailPageDetailPanel.svelte @@ -1,7 +1,7 @@ + + + + { + token = e.detail + }} + newTokenLabel={`${$userStore?.username ?? 'superadmin'}-${generateRandomString(4)}`} + {scopes} +/> + +
+ {#if emailDomain} + {#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON} +
+
+ + +
+ {#if token === 'TOKEN_TO_CREATE'} +
+ + Create/input a valid token before copying the email address below +
+ {/if} +
+ {/if} + + {#if !isFlow} +
+
+
Call method
+ + + + +
+
+ {/if} +
+ {#key requestType} + {#key token} +
+ +
+ {/key} + {/key} + + 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. + +
+ {:else} +
+ + Ask an instance superadmin to setup the instance for email triggering (docs) and to set the email domain in the instance settings. + +
+ {/if} + + {#if !$enterpriseLicense} + + Email triggers on Windmill Community Edition are limited to 100 emails per day. + + {/if} +
diff --git a/frontend/src/lib/components/details/WebhooksPanel.svelte b/frontend/src/lib/components/details/WebhooksPanel.svelte index 97b40199f0..e191461aef 100644 --- a/frontend/src/lib/components/details/WebhooksPanel.svelte +++ b/frontend/src/lib/components/details/WebhooksPanel.svelte @@ -18,11 +18,7 @@ import ClipboardPanel from './ClipboardPanel.svelte' import { copyToClipboard, generateRandomString } from '$lib/utils' import HighlightTheme from '../HighlightTheme.svelte' - import Alert from '../common/alert/Alert.svelte' - import { SettingService } from '$lib/gen' import { base } from '$lib/base' - import { base32 } from 'rfc4648' - let userSettings: UserSettings export let token: string @@ -46,15 +42,6 @@ } } - let emailDomain: string | null = null - async function getEmailDomain() { - emailDomain = - ((await SettingService.getGlobal({ - key: 'email_domain' - })) as any) ?? null - } - getEmailDomain() - $: webhooks = isFlow ? computeFlowWebhooks(path) : computeScriptWebhooks(hash, path) function computeScriptWebhooks(hash: string | undefined, path: string) { @@ -97,10 +84,6 @@ requestType = 'hash' } - $: if (webhookType === 'sync' && selectedTab === 'email') { - webhookType = 'async' - } - $: url = webhooks[webhookType][requestType] + (tokenType === 'query' @@ -127,19 +110,6 @@ return headers } - function emailAddress() { - const pathOrHash = requestType === 'hash' ? hash : path.replaceAll('/', '.') - const plainPrefix = `${$workspaceStore}+${ - (requestType === 'hash' ? 'hash.' : isFlow ? 'flow.' : '') + pathOrHash - }+${token}` - const encodedPrefix = base32 - .stringify(new TextEncoder().encode(plainPrefix), { - pad: false - }) - .toLowerCase() - return `${pathOrHash}+${encodedPrefix}@${emailDomain}` - } - function fetchCode() { if (webhookType === 'sync') { return ` @@ -293,7 +263,6 @@ done` label="Sync" value="sync" tooltip="Triggers the execution, wait for the job to complete and return it as a response." - disabled={selectedTab === 'email'} /> @@ -324,15 +293,13 @@ done` /> - {#if selectedTab !== 'email'} -
-
Token configuration
- - - - -
- {/if} +
+
Token configuration
+ + + + +
@@ -342,7 +309,6 @@ done` Curl {/if} Fetch - Email {#key token} @@ -401,39 +367,6 @@ done` {/key}{/key}{/key}{/key} {/key} - - {#if emailDomain} -
- {#key args} - {#key requestType} - {#key webhookType} - {#key tokenType} - {#key token} -
- -
- {/key} - {/key} - {/key} - {/key} - {/key} - - 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. - -
- {:else} -
- - Ask an instance superadmin to setup the instance for email triggering (docs) and to set the email domain in the instance settings. - -
- {/if} - {/key} diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte index eeea7c7ff7..15c1be18b4 100644 --- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte @@ -53,6 +53,7 @@ import { loadFlowSchedule, type Schedule } from '$lib/components/flows/scheduleUtils' import GfmMarkdown from '$lib/components/GfmMarkdown.svelte' import FlowHistory from '$lib/components/flows/FlowHistory.svelte' + import EmailTriggerPanel from '$lib/components/details/EmailTriggerPanel.svelte' let flow: Flow | undefined let can_write = false @@ -472,6 +473,14 @@ {args} /> + + + diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte index 0b7229d65f..5e999d7089 100644 --- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte @@ -70,6 +70,7 @@ import PersistentScriptDrawer from '$lib/components/PersistentScriptDrawer.svelte' import { loadScriptSchedule, type ScriptSchedule } from '$lib/scripts' import GfmMarkdown from '$lib/components/GfmMarkdown.svelte' + import EmailTriggerPanel from '$lib/components/details/EmailTriggerPanel.svelte' let script: Script | undefined let topHash: string | undefined @@ -668,6 +669,14 @@ {args} /> + + +