windmill-components 1.444.2 → 1.447.5

package/package/components/triggers/CaptureIcon.svelte

@@ -1,12 +1,15 @@
-<script>
-	import { ScanIcon } from 'lucide-svelte'
+<script>import { ScanIcon } from 'lucide-svelte';
+export let size = 14;
+export let variant = undefined;
 </script>
 
 <div class="relative">
-	<ScanIcon size="14" />
+	<ScanIcon {size} />
 	<div class="absolute inset-0 flex items-center justify-center">
 		<svg
-			class="text-red-500"
+			class={variant === 'redDot' ? 'text-red-500' : ''}
+			width={size}
+			height={size}
 			viewBox="0 0 24 24"
 			fill="currentColor"
 			xmlns="http://www.w3.org/2000/svg"

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

@@ -1,23 +1,17 @@
-/** @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;
+        size?: number | undefined;
+        variant?: 'redDot' | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export type CaptureIconProps = typeof __propDef.props;
+export type CaptureIconEvents = typeof __propDef.events;
+export type CaptureIconSlots = typeof __propDef.slots;
+export default class CaptureIcon extends SvelteComponent<CaptureIconProps, CaptureIconEvents, CaptureIconSlots> {
+}
 export {};

package/package/components/triggers/CaptureSection.svelte

@@ -3,11 +3,12 @@
 
 <script>import { slide } from 'svelte/transition';
 import AnimatedButton from '../common/button/AnimatedButton.svelte';
+import PulseButton from '../common/button/PulseButton.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 { createEventDispatcher, onDestroy, getContext } from 'svelte';
 import CaptureIcon from './CaptureIcon.svelte';
 import Tooltip from '../Tooltip.svelte';
 export let disabled;
@@ -15,25 +16,56 @@ export let captureType;
 export let captureInfo;
 export let captureTable;
 const dispatch = createEventDispatcher();
+const { showCaptureHint } = getContext('TriggerContext');
+onDestroy(() => {
+    if (captureInfo.active) {
+        dispatch('captureToggle');
+    }
+});
+function handleUpdateSchema(e) {
+    dispatch('updateSchema', {
+        payloadData: e.detail.payloadData,
+        redirect: e.detail.redirect
+    });
+}
+let openingDuration = 400;
+let pulseButton;
+function updateShowCaptureHint(show) {
+    if (show) {
+        $showCaptureHint = false;
+        setTimeout(() => {
+            pulseButton?.triggerPulse(1);
+        }, 300);
+    }
+}
+$: updateShowCaptureHint($showCaptureHint);
 </script>
 
-<div transition:slide class="pb-4">
+<div transition:slide={{ duration: openingDuration }} class="pb-12 overflow-hidden">
 	<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>
+				<PulseButton bind:this={pulseButton} numberOfPulses={1} pulseDuration={1}>
+					<AnimatedButton animate={captureInfo.active} baseRadius="6px" wrapperClasses="ml-[-2px]">
+						<Button
+							size="xs2"
+							on:click={() => dispatch('captureToggle')}
+							variant="border"
+							{disabled}
+							color="light"
+							btnClasses={captureInfo.active ? 'text-blue-500 hover:text-blue-500' : ''}
+						>
+							<div class="flex flex-row items-center gap-1 w-28 justify-center">
+								{#if captureInfo.active}
+									<CircleStop size={14} />
+								{:else}
+									<CaptureIcon variant="redDot" size={14} />
+								{/if}
+								{captureInfo.active ? 'Stop' : 'Start capturing'}
+							</div>
+						</Button>
+					</AnimatedButton>
+				</PulseButton>
 
 				{#if captureInfo.active}
 					<ConnectionIndicator connectionInfo={captureInfo.connectionInfo} />
@@ -68,9 +100,10 @@ const dispatch = createEventDispatcher();
 			path={captureInfo.path}
 			canEdit={true}
 			on:applyArgs
-			on:updateSchema
+			on:updateSchema={handleUpdateSchema}
 			on:addPreprocessor
-			maxHeight={300}
+			on:testWithArgs
+			fullHeight={false}
 		/>
 	</div>
 </div>

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

@@ -9,6 +9,7 @@ export type CaptureInfo = {
 };
 import { type ConnectionInfo } from '../common/alert/ConnectionIndicator.svelte';
 import CaptureTable from './CaptureTable.svelte';
+import type { CaptureTriggerKind } from '../../gen';
 declare const __propDef: {
     props: {
         disabled: boolean;
@@ -21,12 +22,13 @@ declare const __propDef: {
             kind: "main" | "preprocessor";
             args: Record<string, any> | undefined;
         }>;
+        addPreprocessor: CustomEvent<null>;
+        testWithArgs: CustomEvent<any>;
+        captureToggle: CustomEvent<undefined>;
         updateSchema: CustomEvent<{
-            schema: any;
+            payloadData: Record<string, any>;
             redirect: boolean;
         }>;
-        addPreprocessor: CustomEvent<null>;
-        captureToggle: CustomEvent<undefined>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/triggers/CaptureTable.svelte

@@ -1,224 +1,277 @@
 <script>import Label from '../Label.svelte';
-import { Clipboard, Info, Trash2, Plus } from 'lucide-svelte';
+import { Info, Trash2 } 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 { Webhook, Route, Unplug, Mail, Play } from 'lucide-svelte';
+import KafkaIcon from '../icons/KafkaIcon.svelte';
 import { isObject } from '../../utils';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, onDestroy } 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';
+import CaptureButton from './CaptureButton.svelte';
+import InfiniteList from '../InfiniteList.svelte';
+import { sendUserToast } from '../../utils';
+import SchemaPickerRow from '../schema/SchemaPickerRow.svelte';
+import { clickOutside } from '../../utils';
 export let path;
 export let hasPreprocessor = false;
 export let canHavePreprocessor = false;
 export let isFlow = false;
-export let captureType = 'webhook';
+export let captureType = undefined;
 export let headless = false;
 export let addButton = false;
-export let hideCapturesWhenEmpty = false;
 export let canEdit = false;
-export let maxHeight = undefined;
-let captures = [];
+export let fullHeight = true;
+let selected = undefined;
 let testKind = 'main';
+let isEmpty = true;
+let infiniteList = null;
+let firstClick = true;
+let capturesLength = 0;
 $: hasPreprocessor && (testKind = 'preprocessor');
-let deleteLoading = null;
-async function deleteCapture(id) {
-    deleteLoading = id;
-    try {
+const dispatch = createEventDispatcher();
+export async function loadCaptures(refresh = false) {
+    await infiniteList?.loadData(refresh ? 'refresh' : 'loadMore');
+}
+function initLoadCaptures(testKind = 'main') {
+    const loadInputsPageFn = async (page, perPage) => {
+        const captures = await CaptureService.listCaptures({
+            workspace: $workspaceStore,
+            runnableKind: isFlow ? 'flow' : 'script',
+            path: path ?? '',
+            triggerKind: captureType,
+            page,
+            perPage
+        });
+        let capturesWithPayload = captures.map((capture) => {
+            const payload = isObject(capture.payload) ? capture.payload : {};
+            const triggerExtra = isObject(capture.trigger_extra) ? capture.trigger_extra : {};
+            return {
+                ...capture,
+                payloadData: testKind === 'preprocessor'
+                    ? {
+                        ...payload,
+                        ...triggerExtra
+                    }
+                    : { ...payload }
+            };
+        });
+        return capturesWithPayload;
+    };
+    infiniteList?.setLoader(loadInputsPageFn);
+    const deleteInputFn = async (id) => {
         await CaptureService.deleteCapture({
             workspace: $workspaceStore,
             id
         });
-        refreshCaptures();
+    };
+    infiniteList?.setDeleteItemFn(deleteInputFn);
+}
+function handleSelect(capture) {
+    if (selected === capture.id) {
+        deselect();
     }
-    finally {
-        deleteLoading = null;
+    else {
+        selected = capture.id;
+        dispatch('select', capture.payloadData);
     }
 }
-const dispatch = createEventDispatcher();
-export async function refreshCaptures() {
-    captures = await CaptureService.listCaptures({
-        workspace: $workspaceStore,
-        runnableKind: isFlow ? 'flow' : 'script',
-        path,
-        triggerKind: captureType !== 'all' ? captureType : undefined
-    });
+function deselect() {
+    selected = undefined;
+    dispatch('select', undefined);
 }
-refreshCaptures();
+onDestroy(() => {
+    deselect();
+});
+const captureKindToIcon = {
+    webhook: Webhook,
+    http: Route,
+    email: Mail,
+    websocket: Unplug,
+    kafka: KafkaIcon
+};
+async function getPropPickerElements() {
+    return Array.from(document.querySelectorAll('[data-schema-picker], [data-schema-picker] *'));
+}
+function handleKeydown(event) {
+    if (event.key === 'Escape' && selected) {
+        deselect();
+    }
+}
+function handleError(error) {
+    if (error.type === 'delete') {
+        sendUserToast(`Failed to delete capture: ${error.error}`, true);
+    }
+    else if (error.type === 'load') {
+        sendUserToast(`Failed to load captures: ${error.error}`, true);
+    }
+}
+$: path && infiniteList && initLoadCaptures();
 </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 }}
-						/>
+<svelte:window on:keydown={handleKeydown} />
 
-						{#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>
+<Label label="Trigger captures" {headless} class="h-full flex flex-col gap-1">
+	<svelte:fragment slot="header">
+		{#if addButton}
+			<div class="inline-block">
+				<CaptureButton small={true} on:openTriggers />
+			</div>
+		{/if}
+	</svelte:fragment>
+	<svelte:fragment slot="action">
+		{#if canHavePreprocessor && !isEmpty}
+			<div>
+				<ToggleButtonGroup
+					bind:selected={testKind}
+					class="h-full"
+					on:selected={(e) => {
+						initLoadCaptures(e.detail)
+					}}
+				>
+					<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>
 
-								<svelte:fragment slot="overlay">
-									{#if schema}
-										<div class="min-w-[400px]">
-											<SchemaViewer {schema} />
-										</div>
-									{/if}
-								</svelte:fragment>
-							</CustomPopover>
-						{/if}
+	<div
+		class={fullHeight ? 'h-full' : capturesLength > 7 ? 'h-[300px]' : 'h-fit'}
+		use:clickOutside={{ capture: false, exclude: getPropPickerElements }}
+		on:click_outside={() => {
+			if (firstClick) {
+				firstClick = false
+				return
+			}
+			deselect()
+		}}
+	>
+		<InfiniteList
+			bind:this={infiniteList}
+			selectedItemId={selected}
+			bind:isEmpty
+			on:error={(e) => handleError(e.detail)}
+			on:select={(e) => handleSelect(e.detail)}
+			bind:length={capturesLength}
+		>
+			<svelte:fragment slot="columns">
+				<colgroup>
+					<col class="w-8" />
+					<col class="w-20" />
+					<col />
+				</colgroup>
+			</svelte:fragment>
+			<svelte:fragment let:item let:hover>
+				{@const captureIcon = captureKindToIcon[item.trigger_kind]}
+				<SchemaPickerRow
+					date={item.created_at}
+					payloadData={item.payloadData}
+					selected={selected === item.id}
+					hovering={hover}
+				>
+					<svelte:fragment slot="start">
+						<div class="center-center">
+							<svelte:component this={captureIcon} size={12} />
+						</div>
+					</svelte:fragment>
 
-						{#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>
+					<svelte:fragment slot="extra">
+						{#if canEdit}
+							<div class="flex flex-row items-center gap-2 px-2">
+								{#if testKind === 'preprocessor' && !hasPreprocessor}
+									<CustomPopover noPadding>
 										<Button
-											size="xs"
+											size="xs2"
 											color="dark"
-											on:click={() => {
-												dispatch('addPreprocessor')
+											disabled
+											endIcon={{
+												icon: Info
 											}}
+											wrapperClasses="h-full"
 										>
-											Add preprocessor
+											Apply args
 										</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)
-								}}
-							/>
+										<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="xs2"
+													color="dark"
+													on:click={() => {
+														dispatch('addPreprocessor')
+													}}
+												>
+													Add preprocessor
+												</Button>
+											</div>
+										</svelte:fragment>
+									</CustomPopover>
+								{:else}
+									<Button
+										size="xs2"
+										color={hover || selected === item.id ? 'dark' : 'light'}
+										dropdownItems={[
+											{
+												label: 'Use as input schema',
+												onClick: () => {
+													dispatch('updateSchema', {
+														payloadData: item.payloadData,
+														redirect: true,
+														args: true
+													})
+												},
+												disabled: !isFlow || testKind !== 'main'
+											}
+										].filter((item) => !item.disabled)}
+										on:click={() => {
+											if (isFlow && testKind === 'main') {
+												dispatch('testWithArgs', item.payloadData)
+											} else {
+												dispatch('applyArgs', {
+													kind: testKind,
+													args: item.payloadData
+												})
+											}
+										}}
+										disabled={testKind === 'preprocessor' && !hasPreprocessor}
+										title={isFlow && testKind === 'main'
+											? 'Test flow with args'
+											: 'Apply args to preprocessor'}
+										startIcon={isFlow && testKind === 'main' ? { icon: Play } : {}}
+									>
+										{isFlow && testKind === 'main' ? 'Test' : 'Apply args'}
+									</Button>
+								{/if}
+								<Button
+									size="xs2"
+									color="light"
+									variant="contained"
+									iconOnly
+									startIcon={{ icon: Trash2 }}
+									loading={item.isDeleting}
+									on:click={() => {
+										infiniteList?.deleteItem(item.id)
+									}}
+									btnClasses="hover:text-white hover:bg-red-500 text-red-500"
+								/>
+							</div>
 						{/if}
-					</div>
-				{/each}
-			{/if}
-		</div>
-	</Label>
-{/if}
+					</svelte:fragment>
+				</SchemaPickerRow>
+			</svelte:fragment>
+			<svelte:fragment slot="empty">
+				<div class="text-center text-xs text-tertiary">No captures yet</div>
+			</svelte:fragment>
+		</InfiniteList>
+	</div>
+</Label>