windmill-components 1.122.0 → 1.138.2

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

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        isOperator?: boolean | undefined;
+        flow_json?: any | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        form: {};
+        webhooks: {
+            slot: string;
+        };
+        schedule: {
+            slot: string;
+        };
+        cli: {
+            slot: string;
+        };
+        details: {
+            slot: string;
+        };
+        save_inputs: {
+            slot: string;
+        };
+    };
+};
+export type DetailPageLayoutProps = typeof __propDef.props;
+export type DetailPageLayoutEvents = typeof __propDef.events;
+export type DetailPageLayoutSlots = typeof __propDef.slots;
+export default class DetailPageLayout extends SvelteComponentTyped<DetailPageLayoutProps, DetailPageLayoutEvents, DetailPageLayoutSlots> {
+}
+export {};

package/package/components/details/Menu.svelte

@@ -0,0 +1,53 @@
+<script>import { Menu, Transition, MenuButton, MenuItems } from '@rgossiaux/svelte-headlessui';
+import { MoreVertical } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+import { createPopperActions } from 'svelte-popperjs';
+import Portal from 'svelte-portal';
+export let hasPadding = true;
+const [popperRef, popperContent] = createPopperActions({ placement: 'auto' });
+const popperOptions = {
+    placement: 'bottom-end',
+    strategy: 'fixed',
+    modifiers: [
+        { name: 'offset', options: { offset: [8, 8] } },
+        {
+            name: 'arrow',
+            options: {
+                padding: 10
+            }
+        }
+    ]
+};
+</script>
+
+<Menu let:open as="div" class="relative hover:z-50 flex w-full h-full">
+	<span use:popperRef>
+		<MenuButton
+			class={twMerge('h-full w-full flex flex-row gap-2 items-center', hasPadding ? 'px-2' : '')}
+		>
+			<MoreVertical class="w-5 h-5" />
+		</MenuButton>
+	</span>
+
+	<Portal>
+		<div use:popperContent={popperOptions} class="z-[2000]">
+			<Transition
+				show={open}
+				enter="transition ease-out duration-[25ms]"
+				enterFrom="transform opacity-0 scale-95"
+				enterTo="transform opacity-100 scale-100"
+				leave="transition ease-in duration-[25ms]"
+				leaveFrom="transform opacity-100 scale-100"
+				leaveTo="transform opacity-0 scale-95"
+			>
+				<MenuItems
+					class="absolute border right-0 z-50 w-56 origin-top-right top-1 rounded-md bg-surface shadow-md focus:outline-none cursor-pointer"
+				>
+					<div class="my-1">
+						<slot name="items" />
+					</div>
+				</MenuItems>
+			</Transition>
+		</div>
+	</Portal>
+</Menu>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        hasPadding?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        items: {};
+    };
+};
+export type MenuProps = typeof __propDef.props;
+export type MenuEvents = typeof __propDef.events;
+export type MenuSlots = typeof __propDef.slots;
+export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
+}
+export {};

package/package/components/details/WebhooksPanel.svelte

@@ -0,0 +1,236 @@
+<script>import { page } from '$app/stores';
+import Tooltip from '../Tooltip.svelte';
+import { workspaceStore } from '../../stores';
+import bash from 'svelte-highlight/languages/bash';
+import { Tabs, Tab, TabContent, Button } 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 './ClipboardPanel.svelte';
+import { copyToClipboard } from '../../utils';
+let userSettings;
+export let webhooks;
+export let args;
+export let scopes = [];
+export let isFlow = false;
+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';
+}
+let token = 'YOUR_TOKEN';
+$: 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() {
+    return `${requestType !== 'get_path'
+        ? 'let body = JSON.stringify(' + JSON.stringify(args, null, 2) + ');'
+        : ''}
+fetch(\`${url}\`, {
+	method: '${requestType === 'get_path' ? 'GET' : 'POST'}',
+	headers: ${JSON.stringify(headers(), null, 2)},
+	${requestType !== 'get_path' ? `body: body` : ''}
+}).then(
+	response => response.${webhookType === 'sync' ? 'json' : 'text'}()
+).then(data => {
+	${webhookType === 'sync'
+        ? 'console.log(data)'
+        : `let UUID = data;
+    let checkCompletion = setInterval(() => {
+		fetch(\`${$page.url.origin}/api/w/${$workspaceStore}/jobs_u/completed/get_result_maybe/\$\{UUID\}\`, 
+	{
+		method: 'GET',
+		headers: {
+				'Authorization': 'Bearer ${token}'
+		}
+	}).then(response => response.json())
+	.then(data => {
+		if (data.completed) {
+			console.log(data.result);
+			clearInterval(checkCompletion);
+		}
+	});
+}, 1000);`}
+});`;
+}
+function curlCode() {
+    return `${requestType !== 'get_path'
+        ? `TOKEN='${token}'
+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 $RESULT | jq'
+        : `
+URL="${$page.url.origin}/api/w/${$workspaceStore}/jobs_u/completed/get_result_maybe/$UUID"
+while true; do
+	RESPONSE=$(curl -s -H "Authorization: Bearer $TOKEN" $URL)
+	COMPLETED=$(echo $RESPONSE | jq .completed)
+	if [ "$COMPLETED" = "true" ]; then
+		echo $RESPONSE | jq .result
+		break
+	else
+		sleep 1
+	fi
+done`}`;
+}
+</script>
+
+<UserSettings bind:this={userSettings} {scopes} />
+
+<div class="p-2 flex flex-col w-full gap-4">
+	{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
+		<div class="flex flex-row justify-between my-2 gap-2">
+			<input bind:value={token} placeholder="YOUR_TOKEN" class="!text-xs" />
+			<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>
+	{/if}
+
+	<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">Request type</div>
+			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={webhookType}>
+				<ToggleButton
+					label="Async"
+					value="async"
+					tooltip="Jobs can be triggered in asynchronous mode, meaning that the webhook is triggered, and the returning value is the uuid of the job assigned to execute the underlying code."
+				/>
+				<ToggleButton
+					label="Sync"
+					value="sync"
+					tooltip="The second type of autogenerated endpoint is the synchronous webhook. This webhook triggers the execution, automatically extracts the underlying code's return value and returns it as the response."
+				/>
+			</ToggleButtonGroup>
+		</div>
+		<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="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-xs font-semibold 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 -->
+	<Tabs selected="rest">
+		<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">
+			<TabContent value="rest" class="flex flex-col flex-1 h-full ">
+				<div class="flex flex-col gap-2">
+					<ClipboardPanel title="Url" content={url} />
+
+					{#if requestType !== 'get_path'}
+						<ClipboardPanel title="Body" content={JSON.stringify(args, null, 2)} />
+					{/if}
+					{#key requestType}
+						{#key tokenType}
+							<ClipboardPanel title="Headers" content={JSON.stringify(headers(), null, 2)} />
+						{/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()} class="" />
+										<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}
+								<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}
+			</TabContent>
+		</svelte:fragment>
+	</Tabs>
+</div>

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

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        webhooks: {
+            async: {
+                hash?: string;
+                path: string;
+            };
+            sync: {
+                hash?: string;
+                path: string;
+                get_path?: string;
+            };
+        };
+        args: any;
+        scopes?: string[] | undefined;
+        isFlow?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WebhooksPanelProps = typeof __propDef.props;
+export type WebhooksPanelEvents = typeof __propDef.events;
+export type WebhooksPanelSlots = typeof __propDef.slots;
+export default class WebhooksPanel extends SvelteComponentTyped<WebhooksPanelProps, WebhooksPanelEvents, WebhooksPanelSlots> {
+}
+export {};