windmill-components 1.433.0 → 1.444.0

package/package/components/triggers/WebhooksPanel.svelte

@@ -1,351 +1,52 @@
-<script>import Tooltip from '../Tooltip.svelte';
-import { userStore, workspaceStore } from '../../stores';
-import bash from 'svelte-highlight/languages/bash';
-import { Tabs, Tab, TabContent, Button, Alert } from '../common';
-import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
-import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
-import { DEFAULT_WEBHOOK_TYPE, SCRIPT_VIEW_SHOW_EXAMPLE_CURL, SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON } from '../../consts';
-import { ArrowDownRight, ArrowUpRight, Clipboard } from 'lucide-svelte';
-import UserSettings from '../UserSettings.svelte';
-import { Highlight } from 'svelte-highlight';
-import { typescript } from 'svelte-highlight/languages';
-import ClipboardPanel from '../details/ClipboardPanel.svelte';
-import { copyToClipboard, generateRandomString } from '../../utils';
+<script>import { Alert } from '../common';
+import Description from '../Description.svelte';
 import HighlightTheme from '../HighlightTheme.svelte';
-import { base } from '../../base';
-import Label from '../Label.svelte';
-import TriggerTokens from './TriggerTokens.svelte';
-let userSettings;
+import TriggersEditorSection from './TriggersEditorSection.svelte';
 export let token;
 export let args;
 export let scopes = [];
 export let isFlow = false;
 export let hash = undefined;
 export let path;
-export let url = '';
 export let newItem = false;
-let selectedTab = 'rest';
-let webhooks;
-$: webhooks = isFlow ? computeFlowWebhooks(path) : computeScriptWebhooks(hash, path);
-function computeScriptWebhooks(hash, path) {
-    let webhookBase = `${window.location.origin}${base}/api/w/${$workspaceStore}/jobs`;
-    return {
-        async: {
-            hash: `${webhookBase}/run/h/${hash}`,
-            path: `${webhookBase}/run/p/${path}`
-        },
-        sync: {
-            hash: `${webhookBase}/run_wait_result/h/${hash}`,
-            path: `${webhookBase}/run_wait_result/p/${path}`,
-            get_path: `${webhookBase}/run_wait_result/p/${path}`
-        }
-    };
-}
-function computeFlowWebhooks(path) {
-    let webhooksBase = `${window.location.origin}${base}/api/w/${$workspaceStore}/jobs`;
-    let urlAsync = `${webhooksBase}/run/f/${path}`;
-    let urlSync = `${webhooksBase}/run_wait_result/f/${path}`;
-    return {
-        async: {
-            path: urlAsync
-        },
-        sync: {
-            path: urlSync,
-            get_path: urlSync
-        }
-    };
-}
-let webhookType = DEFAULT_WEBHOOK_TYPE;
-let requestType = isFlow ? 'path' : 'path';
-let tokenType = 'headers';
-$: if (webhookType === 'async' && requestType === 'get_path') {
-    // Request type is not supported for async webhooks
-    requestType = 'hash';
-}
-$: url =
-    webhooks[webhookType][requestType] +
-        (tokenType === 'query'
-            ? `?token=${token}${requestType === 'get_path'
-                ? `&payload=${encodeURIComponent(btoa(JSON.stringify(args)))}`
-                : ''}`
-            : `${requestType === 'get_path'
-                ? `?payload=${encodeURIComponent(btoa(JSON.stringify(args)))}`
-                : ''}`);
-function headers() {
-    const headers = {};
-    if (requestType != 'get_path') {
-        headers['Content-Type'] = 'application/json';
-    }
-    if (tokenType === 'headers') {
-        headers['Authorization'] = `Bearer ${token}`;
-    }
-    return headers;
-}
-function fetchCode() {
-    if (webhookType === 'sync') {
-        return `
-export async function main() {
-  const jobTriggerResponse = await triggerJob();
-  const data = await jobTriggerResponse.json();
-  return data;
-}
-
-async function triggerJob() {
-  ${requestType === 'get_path'
-            ? '// Payload is a base64 encoded string of the arguments'
-            : `const body = JSON.stringify(${JSON.stringify(args, null, 2).replaceAll('\n', '\n\t')});`}
-  const endpoint = \`${url}\`;
-
-  return await fetch(endpoint, {
-    method: '${requestType === 'get_path' ? 'GET' : 'POST'}',
-    headers: ${JSON.stringify(headers(), null, 2).replaceAll('\n', '\n\t\t')}${requestType === 'get_path' ? '' : `,\n\t\tbody`}
-  });
-}`;
-    }
-    // Main function
-    let mainFunction = `
-export async function main() {
-  const jobTriggerResponse = await triggerJob();
-  const UUID = await jobTriggerResponse.text();
-  const jobCompletionData = await waitForJobCompletion(UUID);
-  return jobCompletionData;
-}`;
-    // triggerJob function
-    let triggerJobFunction = `
-async function triggerJob() {
-  const body = JSON.stringify(${JSON.stringify(args, null, 2).replaceAll('\n', '\n\t')});
-  const endpoint = \`${url}\`;
-
-  return await fetch(endpoint, {
-    method: '${requestType === 'get_path' ? 'GET' : 'POST'}',
-    headers: ${JSON.stringify(headers(), null, 2).replaceAll('\n', '\n\t\t')},
-    body
-  });
-}`;
-    // waitForJobCompletion function
-    let waitForJobCompletionFunction = `
-function waitForJobCompletion(UUID) {
-  return new Promise(async (resolve, reject) => {
-    try {
-      const endpoint = \`${window.location.origin}/api/w/${$workspaceStore}/jobs_u/completed/get_result_maybe/\${UUID}\`;
-      const checkResponse = await fetch(endpoint, {
-        method: 'GET',
-        headers: ${JSON.stringify(headers(), null, 2).replaceAll('\n', '\n\t\t\t\t')}
-      });
-
-      const checkData = await checkResponse.json();
-
-      if (checkData.completed) {
-        resolve(checkData);
-      } else {
-        // If not completed, wait for a second then try again
-        setTimeout(async () => {
-          const result = await waitForJobCompletion(UUID);
-          resolve(result);
-        }, 1000);
-      }
-    } catch (error) {
-      reject(error);
-    }
-  });
-}`;
-    // Combine and return
-    return `${mainFunction}\n\n${triggerJobFunction}\n\n${waitForJobCompletionFunction}`;
-}
-function curlCode() {
-    return `TOKEN='${token}'
-${requestType !== 'get_path' ? `BODY='${JSON.stringify(args)}'` : ''}
-URL='${url}'
-${webhookType === 'sync' ? 'RESULT' : 'UUID'}=$(curl -s ${requestType != 'get_path' ? "-H 'Content-Type: application/json'" : ''} ${tokenType === 'headers' ? `-H "Authorization: Bearer $TOKEN"` : ''} -X ${requestType === 'get_path' ? 'GET' : 'POST'} ${requestType !== 'get_path' ? `-d "$BODY" ` : ''}$URL)
-
-${webhookType === 'sync'
-        ? 'echo -E $RESULT | jq'
-        : `
-URL="${window.location.origin}/api/w/${$workspaceStore}/jobs_u/completed/get_result_maybe/$UUID"
-while true; do
-  curl -s -H "Authorization: Bearer $TOKEN" $URL -o res.json
-  COMPLETED=$(cat res.json | jq .completed)
-  if [ "$COMPLETED" = "true" ]; then
-    cat res.json | jq .result
-    break
-  else
-    sleep 1
-  fi
-done`}`;
-}
-let triggerTokens = undefined;
+export let isEditor = false;
+export let canHavePreprocessor = false;
+export let hasPreprocessor = false;
+let data = {
+    hash,
+    token,
+    scopes,
+    args
+};
 </script>
 
 <HighlightTheme />
 
-<UserSettings
-	bind:this={userSettings}
-	on:tokenCreated={(e) => {
-		token = e.detail
-		triggerTokens?.listTokens()
-	}}
-	newTokenWorkspace={$workspaceStore}
-	newTokenLabel={`webhook-${$userStore?.username ?? 'superadmin'}-${generateRandomString(4)}`}
-	{scopes}
-/>
-
 <div class="flex flex-col w-full 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 !font-normal"
-				/>
-				<Button size="xs" color="light" variant="border" on:click={userSettings.openDrawer}>
-					Create a Webhook-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>
-		</Label>
-	{/if}
-
-	<div class="flex flex-col gap-2">
-		<div class="flex flex-row justify-between">
-			<div class="text-sm font-normal text-secondary flex flex-row items-center">Request type</div>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={webhookType}>
-				<ToggleButton
-					label="Async"
-					value="async"
-					tooltip="The returning value is the uuid of the job assigned to execute the job."
-				/>
-				<ToggleButton
-					label="Sync"
-					value="sync"
-					tooltip="Triggers the execution, wait for the job to complete and return it as a response."
-				/>
-			</ToggleButtonGroup>
-		</div>
-		<div class="flex flex-row justify-between">
-			<div class="text-sm font-normal text-secondary flex flex-row items-center">Call method</div>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
-				<ToggleButton
-					label="POST by path"
-					value="path"
-					icon={ArrowUpRight}
-					selectedColor="#fb923c"
-				/>
-				{#if !isFlow}
-					<ToggleButton
-						label="POST by hash"
-						value="hash"
-						icon={ArrowUpRight}
-						selectedColor="#fb923c"
-					/>
-				{/if}
-
-				<ToggleButton
-					label="GET by path"
-					value="get_path"
-					icon={ArrowDownRight}
-					disabled={webhookType !== 'sync'}
-					selectedColor="#14b8a6"
-				/>
-			</ToggleButtonGroup>
-		</div>
-		<div class="flex flex-row justify-between">
-			<div class="text-sm font-normal text-secondary flex flex-row items-center"
-				>Token configuration</div
-			>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={tokenType}>
-				<ToggleButton label="Token in Headers" value="headers" />
-				<ToggleButton label="Token in Query" value="query" />
-			</ToggleButtonGroup>
-		</div>
-	</div>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<Tabs bind:selected={selectedTab}>
-		<Tab value="rest" size="xs">REST</Tab>
-		{#if SCRIPT_VIEW_SHOW_EXAMPLE_CURL}
-			<Tab value="curl" size="xs">Curl</Tab>
-		{/if}
-		<Tab value="fetch" size="xs">Fetch</Tab>
-
-		<svelte:fragment slot="content">
-			{#key token}
-				<TabContent value="rest" class="flex flex-col flex-1 h-full ">
-					<div class="flex flex-col gap-2">
-						<Label label="Url">
-							<ClipboardPanel content={url} />
-						</Label>
-
-						{#if requestType !== 'get_path'}
-							<Label label="Body">
-								<ClipboardPanel content={JSON.stringify(args, null, 2)} />
-							</Label>
-						{/if}
-						{#key requestType}
-							{#key tokenType}
-								<Label label="Headers">
-									<ClipboardPanel content={JSON.stringify(headers(), null, 2)} />
-								</Label>
-							{/key}
-						{/key}
-					</div>
-				</TabContent>
-				<TabContent value="curl" class="flex flex-col flex-1 h-full">
-					<div class="relative">
-						{#key args}
-							{#key requestType}
-								{#key webhookType}
-									{#key tokenType}
-										<div
-											class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
-											on:click={(e) => {
-												e.preventDefault()
-												copyToClipboard(curlCode())
-											}}
-										>
-											<Highlight language={bash} code={curlCode()} />
-											<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
-										</div>
-									{/key}
-								{/key}
-							{/key}
-						{/key}
-					</div>
-				</TabContent>
-				<TabContent value="fetch">
-					{#key args}
-						{#key requestType}
-							{#key webhookType}
-								{#key tokenType}
-									{#key token}
-										<div
-											class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
-											on:click={(e) => {
-												e.preventDefault()
-												copyToClipboard(fetchCode())
-											}}
-										>
-											<Highlight language={typescript} code={fetchCode()} />
-											<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
-										</div>
-									{/key}{/key}{/key}{/key}
-					{/key}
-				</TabContent>
-			{/key}
-		</svelte:fragment>
-	</Tabs>
-
-	<div class="mt-10" />
-	<TriggerTokens bind:this={triggerTokens} {isFlow} {path} labelPrefix="webhook" />
-
+	<Description link="https://www.windmill.dev/docs/core_concepts/webhooks">
+		Webhooks trigger scripts or flows via HTTP requests. Each webhook can be configured to run
+		synchronously or asynchronously. You can secure webhooks using tokens with specific permissions.
+	</Description>
 	{#if newItem}
-		<div class="mt-10" />
 		<Alert type="warning" title="Attached to a deployed path">
 			The webhooks are only valid for a given path and will only trigger the deployed version of the
 			{isFlow ? 'flow' : 'script'}.
 		</Alert>
 	{/if}
+
+	<TriggersEditorSection
+		on:applyArgs
+		on:addPreprocessor
+		on:refreshCaptures
+		cloudDisabled={false}
+		triggerType="webhook"
+		{isFlow}
+		{data}
+		noSave
+		{path}
+		{isEditor}
+		{canHavePreprocessor}
+		{hasPreprocessor}
+		{newItem}
+	/>
 </div>

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

@@ -7,10 +7,16 @@ declare const __propDef: {
         isFlow?: boolean | undefined;
         hash?: string | undefined;
         path: string;
-        url?: string | undefined;
         newItem?: boolean | undefined;
+        isEditor?: boolean | undefined;
+        canHavePreprocessor?: boolean | undefined;
+        hasPreprocessor?: boolean | undefined;
     };
     events: {
+        applyArgs: any;
+        addPreprocessor: any;
+        refreshCaptures: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/triggers/WebsocketEditorConfigSection.svelte

@@ -0,0 +1,176 @@
+<script>import Section from '../Section.svelte';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+import ScriptPicker from '../ScriptPicker.svelte';
+import Required from '../Required.svelte';
+import { Loader2 } from 'lucide-svelte';
+import CaptureSection, {} from './CaptureSection.svelte';
+import CaptureTable from './CaptureTable.svelte';
+import { sendUserToast } from '../../utils';
+import { FlowService, ScriptService } from '../../gen';
+import { workspaceStore } from '../../stores';
+export let url;
+export let url_runnable_args;
+export let dirtyUrl = false;
+export let can_write = false;
+export let headless = false;
+export let showCapture = false;
+export let captureTable = undefined;
+export let captureInfo = undefined;
+export let isValid = false;
+let areRunnableArgsValid = true;
+let urlRunnableSchema = undefined;
+async function loadUrlRunnableSchema(url) {
+    if (url?.startsWith('$')) {
+        const path = url.split(':')[1];
+        if (path && path.length > 0) {
+            try {
+                let scriptOrFlow = url.startsWith('$flow:')
+                    ? await FlowService.getFlowByPath({
+                        workspace: $workspaceStore,
+                        path: url.split(':')[1]
+                    })
+                    : await ScriptService.getScriptByPath({
+                        workspace: $workspaceStore,
+                        path: url.split(':')[1]
+                    });
+                urlRunnableSchema = scriptOrFlow.schema;
+            }
+            catch (err) {
+                sendUserToast(`Could not query runnable schema for ${url.startsWith('$flow:') ? 'flow' : 'script'} ${url.split(':')[1]}: ${err}`, true);
+            }
+        }
+    }
+}
+$: loadUrlRunnableSchema(url);
+let urlError = '';
+let validateTimeout = undefined;
+function validateUrl(url) {
+    if (validateTimeout) {
+        clearTimeout(validateTimeout);
+    }
+    validateTimeout = setTimeout(() => {
+        if (url?.startsWith('$')) {
+            if (/^(\$script|\$flow):[^\s]+$/.test(url) === false) {
+                urlError = 'Invalid runnable path';
+            }
+            else {
+                urlError = '';
+            }
+        }
+        else if (!url || /^(ws:|wss:)\/\/[^\s]+$/.test(url) === false) {
+            urlError = 'Invalid websocket URL';
+        }
+        else {
+            urlError = '';
+        }
+        validateTimeout = undefined;
+    }, 500);
+}
+$: validateUrl(url);
+$: isValid = urlError === '' && (!url?.startsWith('$') || areRunnableArgsValid);
+</script>
+
+<div>
+	{#if showCapture && captureInfo}
+		<CaptureSection
+			disabled={!isValid}
+			on:captureToggle
+			captureType="websocket"
+			{captureInfo}
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			bind:captureTable
+		/>
+	{/if}
+	<Section label="Websocket" {headless}>
+		<div class="mb-2">
+			<ToggleButtonGroup
+				selected={url?.startsWith('$') ? 'runnable' : 'static'}
+				on:selected={(ev) => {
+					url = ev.detail === 'runnable' ? '$script:' : ''
+					url_runnable_args = {}
+				}}
+			>
+				<ToggleButton value="static" label="Static URL" />
+				<ToggleButton value="runnable" label="Runnable result as URL" />
+			</ToggleButtonGroup>
+		</div>
+		{#if url?.startsWith('$')}
+			<div class="flex flex-col w-full gap-4">
+				<div class="block grow w-full">
+					<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+						<div>
+							Runnable
+							<Required required={true} />
+						</div>
+					</div>
+					<ScriptPicker
+						allowFlow={true}
+						itemKind={url.startsWith('$flow:') ? 'flow' : 'script'}
+						initialPath={url.split(':')[1] ?? ''}
+						on:select={(ev) => {
+							dirtyUrl = true
+							const { path, itemKind } = ev.detail
+							url = `$${itemKind}:${path ?? ''}`
+						}}
+					/>
+					<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
+						{dirtyUrl ? urlError : ''}
+					</div>
+				</div>
+			</div>
+
+			{#if url.split(':')[1]?.length > 0}
+				{#if urlRunnableSchema}
+					<p class="font-semibold text-sm mt-4 mb-2">Arguments</p>
+					{#await import('../SchemaForm.svelte')}
+						<Loader2 class="animate-spin mt-2" />
+					{:then Module}
+						{#key urlRunnableSchema}
+							<Module.default
+								schema={urlRunnableSchema}
+								bind:args={url_runnable_args}
+								bind:isValid={areRunnableArgsValid}
+								shouldHideNoInputs
+								class="text-xs"
+							/>
+						{/key}
+					{/await}
+					{#if urlRunnableSchema.properties && Object.keys(urlRunnableSchema.properties).length === 0}
+						<div class="text-xs texg-gray-700">This runnable takes no arguments</div>
+					{/if}
+				{:else}
+					<Loader2 class="animate-spin mt-2" />
+				{/if}
+			{/if}
+		{:else}
+			<div class="flex flex-col w-full gap-4">
+				<label class="block grow w-full">
+					<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+						<div>
+							URL
+							<Required required={true} />
+						</div>
+					</div>
+					<input
+						type="text"
+						autocomplete="off"
+						bind:value={url}
+						disabled={!can_write}
+						on:input={() => {
+							dirtyUrl = true
+						}}
+						class={urlError === ''
+							? ''
+							: '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'}
+					/>
+					<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
+						{dirtyUrl ? urlError : ''}
+					</div>
+				</label>
+			</div>
+		{/if}
+	</Section>
+</div>

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

@@ -0,0 +1,37 @@
+import { SvelteComponent } from "svelte";
+import { type CaptureInfo } from './CaptureSection.svelte';
+import CaptureTable from './CaptureTable.svelte';
+declare const __propDef: {
+    props: {
+        url: string | undefined;
+        url_runnable_args: Record<string, unknown> | undefined;
+        dirtyUrl?: boolean | undefined;
+        can_write?: boolean | undefined;
+        headless?: boolean | undefined;
+        showCapture?: boolean | undefined;
+        captureTable?: CaptureTable | undefined;
+        captureInfo?: CaptureInfo | undefined;
+        isValid?: boolean | 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 WebsocketEditorConfigSectionProps = typeof __propDef.props;
+export type WebsocketEditorConfigSectionEvents = typeof __propDef.events;
+export type WebsocketEditorConfigSectionSlots = typeof __propDef.slots;
+export default class WebsocketEditorConfigSection extends SvelteComponent<WebsocketEditorConfigSectionProps, WebsocketEditorConfigSectionEvents, WebsocketEditorConfigSectionSlots> {
+}
+export {};

package/package/components/triggers/WebsocketTriggerEditor.svelte

@@ -6,10 +6,10 @@ export async function openEdit(ePath, isFlow) {
     await tick();
     drawer?.openEdit(ePath, isFlow);
 }
-export async function openNew(is_flow, initial_script_path) {
+export async function openNew(is_flow, initial_script_path, defaultValues) {
     open = true;
     await tick();
-    drawer?.openNew(is_flow, initial_script_path);
+    drawer?.openNew(is_flow, initial_script_path, defaultValues);
 }
 let drawer;
 </script>

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         openEdit?: ((ePath: string, isFlow: boolean) => Promise<void>) | undefined;
-        openNew?: ((is_flow: boolean, initial_script_path?: string) => Promise<void>) | undefined;
+        openNew?: ((is_flow: boolean, initial_script_path?: string, defaultValues?: Record<string, any>) => Promise<void>) | undefined;
     };
     events: {
         update: CustomEvent<any>;
@@ -16,6 +16,6 @@ export type WebsocketTriggerEditorEvents = typeof __propDef.events;
 export type WebsocketTriggerEditorSlots = typeof __propDef.slots;
 export default class WebsocketTriggerEditor extends SvelteComponent<WebsocketTriggerEditorProps, WebsocketTriggerEditorEvents, WebsocketTriggerEditorSlots> {
     get openEdit(): (ePath: string, isFlow: boolean) => Promise<void>;
-    get openNew(): (is_flow: boolean, initial_script_path?: string | undefined) => Promise<void>;
+    get openNew(): (is_flow: boolean, initial_script_path?: string | undefined, defaultValues?: Record<string, any> | undefined) => Promise<void>;
 }
 export {};