windmill-components 1.434.1 → 1.444.0

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        openTriggers: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CaptureButtonProps = typeof __propDef.props;
+export type CaptureButtonEvents = typeof __propDef.events;
+export type CaptureButtonSlots = typeof __propDef.slots;
+export default class CaptureButton extends SvelteComponent<CaptureButtonProps, CaptureButtonEvents, CaptureButtonSlots> {
+}
+export {};

package/package/components/triggers/CaptureIcon.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { ScanIcon } from 'lucide-svelte'
+</script>
+
+<div class="relative">
+	<ScanIcon size="14" />
+	<div class="absolute inset-0 flex items-center justify-center">
+		<svg
+			class="text-red-500"
+			viewBox="0 0 24 24"
+			fill="currentColor"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<circle cx="12" cy="12" r="3" />
+		</svg>
+	</div>
+</div>

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  CaptureIconProps */
+/** @typedef {typeof __propDef.events}  CaptureIconEvents */
+/** @typedef {typeof __propDef.slots}  CaptureIconSlots */
+export default class CaptureIcon extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CaptureIconProps = typeof __propDef.props;
+export type CaptureIconEvents = typeof __propDef.events;
+export type CaptureIconSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/triggers/CaptureSection.svelte

@@ -0,0 +1,76 @@
+<script context="module">export {};
+</script>
+
+<script>import { slide } from 'svelte/transition';
+import AnimatedButton from '../common/button/AnimatedButton.svelte';
+import Button from '../common/button/Button.svelte';
+import { CircleStop } from 'lucide-svelte';
+import ConnectionIndicator, {} from '../common/alert/ConnectionIndicator.svelte';
+import CaptureTable from './CaptureTable.svelte';
+import { createEventDispatcher } from 'svelte';
+import CaptureIcon from './CaptureIcon.svelte';
+import Tooltip from '../Tooltip.svelte';
+export let disabled;
+export let captureType;
+export let captureInfo;
+export let captureTable;
+const dispatch = createEventDispatcher();
+</script>
+
+<div transition:slide class="pb-4">
+	<div class="border p-4 rounded-lg">
+		<div class="flex flex-col gap-1 mb-4">
+			<div class="flex flex-row items-center justify-start gap-1">
+				<AnimatedButton animate={captureInfo.active} baseRadius="6px" wrapperClasses="ml-[-2px]">
+					<Button
+						size="xs2"
+						on:click={() => dispatch('captureToggle')}
+						variant="border"
+						{disabled}
+						color="light"
+						startIcon={{ icon: captureInfo.active ? CircleStop : CaptureIcon }}
+						btnClasses={captureInfo.active ? 'text-blue-500 hover:text-blue-500' : ''}
+					>
+						{captureInfo.active ? 'Stop' : 'Start capturing'}
+					</Button>
+				</AnimatedButton>
+
+				{#if captureInfo.active}
+					<ConnectionIndicator connectionInfo={captureInfo.connectionInfo} />
+				{:else}
+					<Tooltip>
+						Start capturing to test your runnables with real data. Once active, all incoming
+						payloads will be captured and displayed below, allowing you to test your runnables
+						effectively.
+					</Tooltip>
+				{/if}
+			</div>
+
+			{#if disabled}
+				<div class="text-sm font-normal text-red-600 dark:text-red-400" transition:slide>
+					Enter a valid configuration to start capturing.
+				</div>
+			{/if}
+		</div>
+
+		{#if $$slots.default}
+			<div class:opacity-50={disabled || !captureInfo.active} class="flex flex-col gap-4 mb-4">
+				<slot />
+			</div>
+		{/if}
+
+		<CaptureTable
+			bind:this={captureTable}
+			{captureType}
+			hasPreprocessor={captureInfo.hasPreprocessor}
+			canHavePreprocessor={captureInfo.canHavePreprocessor}
+			isFlow={captureInfo.isFlow}
+			path={captureInfo.path}
+			canEdit={true}
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			maxHeight={300}
+		/>
+	</div>
+</div>

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

@@ -0,0 +1,42 @@
+import { SvelteComponent } from "svelte";
+export type CaptureInfo = {
+    active: boolean;
+    hasPreprocessor: boolean;
+    canHavePreprocessor: boolean;
+    isFlow: boolean;
+    path: string;
+    connectionInfo: ConnectionInfo | undefined;
+};
+import { type ConnectionInfo } from '../common/alert/ConnectionIndicator.svelte';
+import CaptureTable from './CaptureTable.svelte';
+declare const __propDef: {
+    props: {
+        disabled: boolean;
+        captureType: CaptureTriggerKind;
+        captureInfo: CaptureInfo;
+        captureTable: CaptureTable | undefined;
+    };
+    events: {
+        applyArgs: CustomEvent<{
+            kind: "main" | "preprocessor";
+            args: Record<string, any> | undefined;
+        }>;
+        updateSchema: CustomEvent<{
+            schema: any;
+            redirect: boolean;
+        }>;
+        addPreprocessor: CustomEvent<null>;
+        captureToggle: CustomEvent<undefined>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type CaptureSectionProps = typeof __propDef.props;
+export type CaptureSectionEvents = typeof __propDef.events;
+export type CaptureSectionSlots = typeof __propDef.slots;
+export default class CaptureSection extends SvelteComponent<CaptureSectionProps, CaptureSectionEvents, CaptureSectionSlots> {
+}
+export {};

package/package/components/triggers/CaptureTable.svelte

@@ -0,0 +1,224 @@
+<script>import Label from '../Label.svelte';
+import { Clipboard, Info, Trash2, Plus } from 'lucide-svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import { copyToClipboard } from '../../utils';
+import Button from '../common/button/Button.svelte';
+import CustomPopover from '../CustomPopover.svelte';
+import { convert } from '@redocly/json-to-json-schema';
+import SchemaViewer from '../SchemaViewer.svelte';
+import { isObject } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import {} from '../triggers';
+import { CaptureService } from '../../gen';
+import { workspaceStore } from '../../stores';
+import {} from '../../gen';
+import { captureTriggerKindToTriggerKind } from '../triggers';
+import { twMerge } from 'tailwind-merge';
+import { slide } from 'svelte/transition';
+export let path;
+export let hasPreprocessor = false;
+export let canHavePreprocessor = false;
+export let isFlow = false;
+export let captureType = 'webhook';
+export let headless = false;
+export let addButton = false;
+export let hideCapturesWhenEmpty = false;
+export let canEdit = false;
+export let maxHeight = undefined;
+let captures = [];
+let testKind = 'main';
+$: hasPreprocessor && (testKind = 'preprocessor');
+let deleteLoading = null;
+async function deleteCapture(id) {
+    deleteLoading = id;
+    try {
+        await CaptureService.deleteCapture({
+            workspace: $workspaceStore,
+            id
+        });
+        refreshCaptures();
+    }
+    finally {
+        deleteLoading = null;
+    }
+}
+const dispatch = createEventDispatcher();
+export async function refreshCaptures() {
+    captures = await CaptureService.listCaptures({
+        workspace: $workspaceStore,
+        runnableKind: isFlow ? 'flow' : 'script',
+        path,
+        triggerKind: captureType !== 'all' ? captureType : undefined
+    });
+}
+refreshCaptures();
+</script>
+
+{#if captures.length > 0 || !hideCapturesWhenEmpty}
+	<Label
+		label="Captures"
+		{headless}
+		class={twMerge(
+			'flex flex-col h-full divide-y gap-1',
+			maxHeight ? `max-h-[${maxHeight}px]` : ''
+		)}
+	>
+		<svelte:fragment slot="header">
+			{#if addButton && captureType !== 'all'}
+				<Button
+					size="xs2"
+					color="light"
+					variant="contained"
+					iconOnly
+					startIcon={{ icon: Plus }}
+					on:click={() => {
+						if (captureType !== 'all') {
+							dispatch('openTriggers', {
+								kind: captureTriggerKindToTriggerKind(captureType),
+								config: {}
+							})
+						}
+					}}
+				/>
+			{/if}
+		</svelte:fragment>
+		<svelte:fragment slot="action">
+			{#if canHavePreprocessor}
+				<div>
+					<ToggleButtonGroup bind:selected={testKind} class="h-full">
+						<ToggleButton value="main" label={isFlow ? 'Flow' : 'Main'} small />
+						<ToggleButton
+							value="preprocessor"
+							label="Preprocessor"
+							small
+							tooltip="When the runnable has a preprocessor, it receives additional information about the request"
+						/>
+					</ToggleButtonGroup>
+				</div>
+			{/if}
+		</svelte:fragment>
+		<div class="flex flex-col gap-1 pt-2 grow overflow-y-auto">
+			{#if captures.length === 0}
+				<div class="text-xs text-secondary">
+					{captureType === 'all' ? 'No captures yet' : `No ${captureType} captures yet`}
+				</div>
+			{:else}
+				{#each captures as capture}
+					{@const payload = isObject(capture.payload) ? capture.payload : {}}
+					{@const triggerExtra = isObject(capture.trigger_extra) ? capture.trigger_extra : {}}
+					{@const payloadData =
+						testKind === 'preprocessor'
+							? {
+									...payload,
+									...triggerExtra
+							  }
+							: payload}
+					{@const schema =
+						isFlow && testKind === 'main'
+							? { required: [], properties: {}, ...convert(payloadData) }
+							: {}}
+					<div class="flex flex-row gap-1" transition:slide>
+						<div class="text-xs border p-2 rounded-md overflow-auto grow whitespace-nowrap">
+							{JSON.stringify(payloadData)}
+						</div>
+						<Button
+							size="xs2"
+							color="light"
+							variant="border"
+							on:click={() => {
+								copyToClipboard(JSON.stringify(payloadData))
+							}}
+							iconOnly
+							startIcon={{ icon: Clipboard }}
+						/>
+
+						{#if isFlow && testKind === 'main'}
+							<CustomPopover>
+								<Button
+									size="xs"
+									color="light"
+									variant="border"
+									on:click={() => {
+										dispatch('updateSchema', { schema, redirect: true })
+									}}
+									wrapperClasses="h-full"
+								>
+									Apply schema
+								</Button>
+
+								<svelte:fragment slot="overlay">
+									{#if schema}
+										<div class="min-w-[400px]">
+											<SchemaViewer {schema} />
+										</div>
+									{/if}
+								</svelte:fragment>
+							</CustomPopover>
+						{/if}
+
+						{#if testKind === 'preprocessor' && !hasPreprocessor}
+							<CustomPopover noPadding>
+								<Button
+									size="xs"
+									color="dark"
+									disabled
+									endIcon={{
+										icon: Info
+									}}
+									wrapperClasses="h-full"
+								>
+									Apply args
+								</Button>
+								<svelte:fragment slot="overlay">
+									<div class="text-sm p-2 flex flex-col gap-1 items-start">
+										<p>You need to add a preprocessor to use preprocessor captures as args</p>
+										<Button
+											size="xs"
+											color="dark"
+											on:click={() => {
+												dispatch('addPreprocessor')
+											}}
+										>
+											Add preprocessor
+										</Button>
+									</div>
+								</svelte:fragment>
+							</CustomPopover>
+						{:else}
+							<Button
+								size="xs"
+								color="dark"
+								on:click={() => {
+									if (isFlow && testKind === 'main') {
+										dispatch('updateSchema', { schema, redirect: false })
+									}
+									dispatch('applyArgs', {
+										kind: testKind,
+										args: payloadData
+									})
+								}}
+								disabled={testKind === 'preprocessor' && !hasPreprocessor}
+							>
+								{isFlow && testKind === 'main' ? 'Apply schema and args' : 'Apply args'}
+							</Button>
+						{/if}
+
+						{#if canEdit}
+							<Button
+								size="xs2"
+								color="red"
+								iconOnly
+								startIcon={{ icon: Trash2 }}
+								loading={deleteLoading === capture.id}
+								on:click={() => {
+									deleteCapture(capture.id)
+								}}
+							/>
+						{/if}
+					</div>
+				{/each}
+			{/if}
+		</div>
+	</Label>
+{/if}

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

@@ -0,0 +1,43 @@
+import { SvelteComponent } from "svelte";
+import { type TriggerKind } from '../triggers';
+import { type CaptureTriggerKind } from '../../gen';
+declare const __propDef: {
+    props: {
+        path: string;
+        hasPreprocessor?: boolean | undefined;
+        canHavePreprocessor?: boolean | undefined;
+        isFlow?: boolean | undefined;
+        captureType?: CaptureTriggerKind | 'all';
+        headless?: boolean | undefined;
+        addButton?: boolean | undefined;
+        hideCapturesWhenEmpty?: boolean | undefined;
+        canEdit?: boolean | undefined;
+        maxHeight?: number | undefined;
+        refreshCaptures?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        openTriggers: CustomEvent<{
+            kind: TriggerKind;
+            config: Record<string, any>;
+        }>;
+        applyArgs: CustomEvent<{
+            kind: 'main' | 'preprocessor';
+            args: Record<string, any> | undefined;
+        }>;
+        addPreprocessor: CustomEvent<null>;
+        updateSchema: CustomEvent<{
+            schema: any;
+            redirect: boolean;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CaptureTableProps = typeof __propDef.props;
+export type CaptureTableEvents = typeof __propDef.events;
+export type CaptureTableSlots = typeof __propDef.slots;
+export default class CaptureTable extends SvelteComponent<CaptureTableProps, CaptureTableEvents, CaptureTableSlots> {
+    get refreshCaptures(): () => Promise<void>;
+}
+export {};

package/package/components/triggers/CaptureWrapper.svelte

@@ -0,0 +1,237 @@
+<script>import { workspaceStore } from '../../stores';
+import { CaptureService } from '../../gen';
+import { onDestroy } from 'svelte';
+import { capitalize, isObject, sendUserToast, sleep } from '../../utils';
+import { isCloudHosted } from '../../cloud';
+import Alert from '../common/alert/Alert.svelte';
+import RouteEditorConfigSection from './RouteEditorConfigSection.svelte';
+import WebsocketEditorConfigSection from './WebsocketEditorConfigSection.svelte';
+import WebhooksConfigSection from './WebhooksConfigSection.svelte';
+import EmailTriggerConfigSection from '../details/EmailTriggerConfigSection.svelte';
+import KafkaTriggersConfigSection from './KafkaTriggersConfigSection.svelte';
+import CaptureTable from './CaptureTable.svelte';
+export let isFlow;
+export let path;
+export let hasPreprocessor;
+export let canHavePreprocessor;
+export let captureType = 'webhook';
+export let showCapture = false;
+export let data = {};
+export let connectionInfo = undefined;
+export let args = {};
+export let captureTable = undefined;
+export async function setConfig() {
+    await CaptureService.setCaptureConfig({
+        requestBody: {
+            trigger_kind: captureType,
+            path,
+            is_flow: isFlow,
+            trigger_config: args && Object.keys(args).length > 0 ? args : undefined
+        },
+        workspace: $workspaceStore
+    });
+}
+let captureActive = false;
+let captureConfigs = {};
+async function getCaptureConfigs() {
+    const captureConfigsList = await CaptureService.getCaptureConfigs({
+        workspace: $workspaceStore,
+        runnableKind: isFlow ? 'flow' : 'script',
+        path
+    });
+    captureConfigs = captureConfigsList.reduce((acc, c) => {
+        acc[c.trigger_kind] = c;
+        return acc;
+    }, {});
+    if ((captureType === 'websocket' || captureType === 'kafka') && captureActive) {
+        const config = captureConfigs[captureType];
+        if (config && config.error) {
+            const serverEnabled = getServerEnabled(config);
+            if (!serverEnabled) {
+                sendUserToast('Capture was stopped because of error: ' + config.error, true);
+                captureActive = false;
+            }
+        }
+    }
+    return captureConfigs;
+}
+getCaptureConfigs().then((captureConfigs) => setDefaultArgs(captureConfigs));
+async function capture() {
+    let i = 0;
+    captureActive = true;
+    while (captureActive) {
+        if (i % 3 === 0) {
+            await CaptureService.pingCaptureConfig({
+                workspace: $workspaceStore,
+                triggerKind: captureType,
+                runnableKind: isFlow ? 'flow' : 'script',
+                path
+            });
+            await getCaptureConfigs();
+        }
+        captureTable?.refreshCaptures();
+        i++;
+        await sleep(1000);
+    }
+}
+function setDefaultArgs(captureConfigs) {
+    if (captureType in captureConfigs) {
+        const triggerConfig = captureConfigs[captureType].trigger_config;
+        args = isObject(triggerConfig) ? triggerConfig : {};
+    }
+    else if (captureType === 'kafka') {
+        args = {
+            ...args,
+            brokers: [''],
+            topics: [''],
+            group_id: `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`
+        };
+    }
+    else if (captureType === 'http') {
+        args = {
+            route_path: '',
+            http_method: 'post'
+        };
+    }
+    else {
+        args = {};
+    }
+}
+onDestroy(() => {
+    captureActive = false;
+});
+function getServerEnabled(config) {
+    return (!!config.last_server_ping &&
+        new Date(config.last_server_ping).getTime() > new Date().getTime() - 15 * 1000);
+}
+export async function handleCapture() {
+    if (!captureActive) {
+        await setConfig();
+        capture();
+    }
+    else {
+        captureActive = false;
+    }
+}
+let config;
+$: config = captureConfigs[captureType];
+let cloudDisabled = (captureType === 'websocket' || captureType === 'kafka') && isCloudHosted();
+function updateConnectionInfo(config, captureActive) {
+    if ((captureType === 'websocket' || captureType === 'kafka') && config && captureActive) {
+        const serverEnabled = getServerEnabled(config);
+        const connected = serverEnabled && !config.error;
+        const message = connected
+            ? `${capitalize(captureType)} is connected`
+            : `${capitalize(captureType)} is not connected${config.error ? ': ' + config.error : ''}`;
+        connectionInfo = {
+            connected,
+            message
+        };
+    }
+    else {
+        connectionInfo = undefined;
+    }
+}
+$: updateConnectionInfo(config, captureActive);
+let captureInfo;
+$: captureInfo = {
+    active: captureActive,
+    hasPreprocessor,
+    canHavePreprocessor,
+    isFlow,
+    path,
+    connectionInfo
+};
+$: args && (captureActive = false);
+</script>
+
+<div class="flex flex-col gap-4 w-full">
+	{#if cloudDisabled}
+		<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+			{capitalize(captureType)} triggers are disabled in the multi-tenant cloud.
+		</Alert>
+	{:else if captureType === 'websocket'}
+		<WebsocketEditorConfigSection
+			can_write={true}
+			headless={true}
+			bind:url={args.url}
+			bind:url_runnable_args={args.url_runnable_args}
+			{showCapture}
+			{captureInfo}
+			bind:captureTable
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:captureToggle={() => {
+				handleCapture()
+			}}
+		/>
+	{:else if captureType === 'webhook'}
+		<WebhooksConfigSection
+			{isFlow}
+			{path}
+			hash={data?.hash}
+			token={data?.token}
+			{args}
+			scopes={data?.scopes}
+			{showCapture}
+			{captureInfo}
+			bind:captureTable
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:captureToggle={() => {
+				handleCapture()
+			}}
+		/>
+	{:else if captureType === 'http'}
+		<RouteEditorConfigSection
+			{showCapture}
+			can_write={true}
+			bind:route_path={args.route_path}
+			bind:http_method={args.http_method}
+			headless
+			{captureInfo}
+			bind:captureTable
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:captureToggle={() => {
+				handleCapture()
+			}}
+		/>
+	{:else if captureType === 'email'}
+		<EmailTriggerConfigSection
+			hash={data?.hash}
+			token={data?.token}
+			{path}
+			{isFlow}
+			userSettings={data?.userSettings}
+			emailDomain={data?.emailDomain}
+			{showCapture}
+			{captureInfo}
+			bind:captureTable
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:captureToggle={() => {
+				handleCapture()
+			}}
+		/>
+	{:else if captureType === 'kafka'}
+		<KafkaTriggersConfigSection
+			headless={true}
+			bind:args
+			staticInputDisabled={false}
+			{showCapture}
+			{captureInfo}
+			bind:captureTable
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			on:captureToggle={() => {
+				handleCapture()
+			}}
+		/>
+	{/if}
+</div>