windmill-components 1.444.2 → 1.447.4

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -11,25 +11,35 @@ declare const __propDef: {
         uiOnly?: boolean | undefined;
         isFlowInput?: boolean | undefined;
         noPreview?: boolean | undefined;
-        offset?: number | undefined;
         jsonEnabled?: boolean | undefined;
         isAppInput?: boolean | undefined;
         lightweightMode?: boolean | undefined;
         displayWebhookWarning?: boolean | undefined;
         dndType?: string | undefined;
+        editTab: 'inputEditor' | 'history' | 'savedInputs' | 'json' | 'captures' | 'firstStepInputs' | undefined;
+        previewSchema?: Record<string, any> | undefined;
+        editPanelInitialSize?: number | undefined;
+        editPanelSize?: number | undefined;
         class?: string | undefined;
         setDefaults?: (() => void) | undefined;
         openField?: ((key: string) => void) | undefined;
         deleteField?: ((key: string) => void) | undefined;
+        pannelExtraButtonWidth?: number | undefined;
     };
     events: {
         click: MouseEvent;
         change: CustomEvent<any>;
         delete: CustomEvent<any>;
+        editPanelSizeChanged: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        openEditTab: {};
+        addProperty: {};
+        runButton: {};
+        extraTab: {};
+    };
 };
 export type EditableSchemaFormProps = typeof __propDef.props;
 export type EditableSchemaFormEvents = typeof __propDef.events;

package/package/components/Editor.svelte

@@ -123,7 +123,7 @@ import { sleep } from '../utils';
 import { editorCodeCompletion } from './copilot/completion';
 import { editor as meditor, languages, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor';
 import EditorTheme from './EditorTheme.svelte';
-import { BIGQUERY_TYPES, MSSQL_TYPES, MYSQL_TYPES, POSTGRES_TYPES, SNOWFLAKE_TYPES } from '../consts';
+import { BIGQUERY_TYPES, MSSQL_TYPES, MYSQL_TYPES, ORACLEDB_TYPES, POSTGRES_TYPES, SNOWFLAKE_TYPES } from '../consts';
 import { setupTypeAcquisition } from '../ata/index';
 import { initWasmTs } from '../infer';
 import { initVim } from './monaco_keybindings';
@@ -371,7 +371,9 @@ function addSqlTypeCompletions() {
                                 ? BIGQUERY_TYPES
                                 : scriptLang === 'mssql'
                                     ? MSSQL_TYPES
-                                    : []).map((t) => ({
+                                    : scriptLang === 'oracledb'
+                                        ? ORACLEDB_TYPES
+                                        : []).map((t) => ({
                     label: t,
                     kind: languages.CompletionItemKind.Function,
                     insertText: t,
@@ -567,6 +569,7 @@ export async function reloadWebsocket() {
     function createLanguageClient(transports, name, initializationOptions, middlewareOptions) {
         const client = new MonacoLanguageClient({
             name: name,
+            messageTransports: transports,
             clientOptions: {
                 outputChannel,
                 documentSelector: [lang],
@@ -595,11 +598,6 @@ export async function reloadWebsocket() {
                             })
                     }
                 }
-            },
-            connectionProvider: {
-                get: () => {
-                    return Promise.resolve(transports);
-                }
             }
         });
         return client;

package/package/components/FirstStepInputs.svelte

@@ -0,0 +1,111 @@
+<script>import { createEventDispatcher, onDestroy, getContext } from 'svelte';
+import { getFirstStepSchema } from './flows/flowStore';
+import { twMerge } from 'tailwind-merge';
+import { clickOutside } from '../utils';
+import { Alert } from './common';
+import FlowModuleSchemaItemViewer from './flows/map/FlowModuleSchemaItemViewer.svelte';
+import LanguageIcon from './common/languageIcons/LanguageIcon.svelte';
+import { prettyLanguage } from '../common';
+import IconedResourceType from './IconedResourceType.svelte';
+import { Building } from 'lucide-svelte';
+const { flowStore, flowStateStore } = getContext('FlowEditorContext');
+const dispatch = createEventDispatcher();
+let schema = undefined;
+let error = undefined;
+let mod = undefined;
+async function loadSchema() {
+    try {
+        const res = await getFirstStepSchema($flowStateStore, flowStore);
+        schema = res.schema;
+        mod = res.mod;
+        dispatch('connectFirstNode', { connectFirstNode: res.connectFirstNode });
+    }
+    catch (e) {
+        error = e;
+    }
+}
+loadSchema();
+function handleClick() {
+    selected = !selected;
+    dispatch('select', selected ? schema : undefined);
+}
+onDestroy(() => {
+    selected = false;
+    dispatch('select', undefined);
+});
+let selected = false;
+async function getPropPickerElements() {
+    return Array.from(document.querySelectorAll('[data-schema-picker], [data-schema-picker] *'));
+}
+function handleKeydown(event) {
+    if (event.key === 'Escape' && selected) {
+        selected = false;
+        dispatch('select', undefined);
+    }
+}
+let firstUpdate = true;
+$: if (schema && !selected && firstUpdate) {
+    firstUpdate = false;
+    setTimeout(() => {
+        selected = true;
+        dispatch('select', schema);
+    }, 200);
+}
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<div class="h-full">
+	{#if schema && mod}
+		<button
+			class={twMerge(
+				'w-full shadow-md rounded-sm',
+				selected ? 'bg-surface-selected' : 'hover:bg-surface-hover'
+			)}
+			disabled={!schema}
+			on:click={handleClick}
+			use:clickOutside={{ capture: false, exclude: getPropPickerElements }}
+			on:click_outside={() => {
+				if (selected) {
+					selected = false
+					dispatch('select', undefined)
+				}
+			}}
+		>
+			<FlowModuleSchemaItemViewer
+				on:click={handleClick}
+				deletable={false}
+				id={mod.id}
+				label={mod.summary ||
+					(`path` in mod.value ? mod.value.path : undefined) ||
+					(mod.value.type === 'rawscript'
+						? `Inline ${prettyLanguage(mod.value.language)}`
+						: 'To be defined')}
+				path={`path` in mod.value && mod.summary ? mod.value.path : ''}
+			>
+				<div slot="icon">
+					{#if mod.value.type === 'rawscript'}
+						<LanguageIcon lang={mod.value.language} width={16} height={16} />
+					{:else if mod.value.type === 'script'}
+						{#if mod.value.path.startsWith('hub/')}
+							<div>
+								<IconedResourceType
+									width="20px"
+									height="20px"
+									name={mod.value.path.split('/')[2]}
+									silent={true}
+								/>
+							</div>
+						{:else}
+							<Building size={14} />
+						{/if}
+					{/if}
+				</div>
+			</FlowModuleSchemaItemViewer>
+		</button>
+	{:else}
+		<Alert type="warning" title="Cannot load first step's inputs" size="xs">
+			{error}
+		</Alert>
+	{/if}
+</div>

package/package/components/FirstStepInputs.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        select: CustomEvent<any>;
+        connectFirstNode: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FirstStepInputsProps = typeof __propDef.props;
+export type FirstStepInputsEvents = typeof __propDef.events;
+export type FirstStepInputsSlots = typeof __propDef.slots;
+export default class FirstStepInputs extends SvelteComponent<FirstStepInputsProps, FirstStepInputsEvents, FirstStepInputsSlots> {
+}
+export {};

package/package/components/FlowBuilder.svelte

@@ -166,7 +166,8 @@ export async function saveDraft(forceSave = false) {
                     tag: flow.tag,
                     draft_only: true,
                     ws_error_handler_muted: flow.ws_error_handler_muted,
-                    visible_to_runner_only: flow.visible_to_runner_only
+                    visible_to_runner_only: flow.visible_to_runner_only,
+                    on_behalf_of_email: flow.on_behalf_of_email
                 }
             });
         }
@@ -288,6 +289,7 @@ async function saveFlow(deploymentMsg) {
                     tag: flow.tag,
                     dedicated_worker: flow.dedicated_worker,
                     visible_to_runner_only: flow.visible_to_runner_only,
+                    on_behalf_of_email: flow.on_behalf_of_email,
                     deployment_message: deploymentMsg || undefined
                 }
             });
@@ -359,6 +361,7 @@ async function saveFlow(deploymentMsg) {
                     dedicated_worker: flow.dedicated_worker,
                     ws_error_handler_muted: flow.ws_error_handler_muted,
                     visible_to_runner_only: flow.visible_to_runner_only,
+                    on_behalf_of_email: flow.on_behalf_of_email,
                     deployment_message: deploymentMsg || undefined
                 }
             });
@@ -408,6 +411,13 @@ const scriptEditorDrawer = writable(undefined);
 const moving = writable(undefined);
 const history = initHistory($flowStore);
 const pathStore = writable(pathStoreInit ?? initialPath);
+const captureOn = writable(false);
+const showCaptureHint = writable(undefined);
+const flowInputEditorStateStore = writable({
+    selectedTab: undefined,
+    editPanelSize: 0,
+    payloadData: undefined
+});
 $: initialPath && ($pathStore = initialPath);
 const testStepStore = writable({});
 function select(selectedId) {
@@ -432,7 +442,8 @@ setContext('FlowEditorContext', {
     flowInputsStore: writable({}),
     customUi,
     insertButtonOpen,
-    executionCount: writable(0)
+    executionCount: writable(0),
+    flowInputEditorState: flowInputEditorStateStore
 });
 setContext('TriggerContext', {
     selectedTrigger: selectedTriggerStore,
@@ -440,7 +451,8 @@ setContext('TriggerContext', {
     triggersCount,
     simplifiedPoll,
     defaultValues: writable(undefined),
-    captureOn: writable(undefined)
+    captureOn,
+    showCaptureHint
 });
 async function loadTriggers() {
     $triggersCount = await FlowService.getTriggersCountOfFlow({
@@ -1201,7 +1213,15 @@ let flowPreviewButtons;
 							{abortController}
 						/>
 					{/if}
-					<FlowPreviewButtons bind:this={flowPreviewButtons} />
+					<FlowPreviewButtons
+						on:openTriggers={(e) => {
+							select('triggers')
+							selectTrigger(e.detail.kind)
+							captureOn.set(true)
+							showCaptureHint.set(true)
+						}}
+						bind:this={flowPreviewButtons}
+					/>
 					<Button
 						loading={loadingDraft}
 						size="xs"
@@ -1270,11 +1290,12 @@ let flowPreviewButtons;
 						if (ev.detail.kind === 'preprocessor') {
 							$testStepStore['preprocessor'] = ev.detail.args ?? {}
 							$selectedIdStore = 'preprocessor'
-						} else {
-							$previewArgsStore = ev.detail.args ?? {}
-							flowPreviewButtons?.openPreview()
 						}
 					}}
+					on:testWithArgs={(e) => {
+						$previewArgsStore = JSON.parse(JSON.stringify(e.detail))
+						flowPreviewButtons?.openPreview(true)
+					}}
 				/>
 			{:else}
 				<CenteredPage>Loading...</CenteredPage>

package/package/components/FlowPreviewContent.svelte

@@ -6,12 +6,14 @@ import { runFlowPreview } from './flows/utils';
 import SchemaForm from './SchemaForm.svelte';
 import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
 import FlowProgressBar from './flows/FlowProgressBar.svelte';
-import { AlertTriangle, ArrowRight, CornerDownLeft, Play, RefreshCw, X } from 'lucide-svelte';
+import { AlertTriangle, ArrowRight, CornerDownLeft, Play, RefreshCw, X, ArrowLeftIcon } from 'lucide-svelte';
 import { emptyString, sendUserToast } from '../utils';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import SavedInputs from './SavedInputs.svelte';
 import { dfs } from './flows/dfs';
 import { sliceModules } from './flows/flowStateUtils';
+import CapturesInputs from './CapturesInputs.svelte';
+import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
 export let previewMode;
 export let open;
 export let jobId = undefined;
@@ -96,7 +98,9 @@ $: if (job?.type === 'CompletedJob') {
 }
 $: selectedJobStep !== undefined && onSelectedJobStepChange();
 let inputLibraryDrawer;
+let captureLibraryDrawer;
 let renderCount = 0;
+let selectedCapture = undefined;
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -116,6 +120,65 @@ let renderCount = 0;
 	</DrawerContent>
 </Drawer>
 
+<Drawer bind:this={captureLibraryDrawer}>
+	<DrawerContent
+		title="Trigger captures library {initialPath}"
+		on:close={captureLibraryDrawer?.toggleDrawer}
+	>
+		<div class="h-full flex flex-col gap-2">
+			<CapturesInputs
+				flowPath={$pathStore}
+				headless={false}
+				addButton={true}
+				on:select={(e) => {
+					selectedCapture = e.detail
+				}}
+				on:openTriggers={(e) => {
+					dispatch('openTriggers', e.detail)
+					captureLibraryDrawer?.closeDrawer()
+				}}
+			/>
+
+			<div class="h-full overflow-hidden min-h-0 flex flex-col justify-between">
+				<div class="w-full flex flex-col min-h-0 gap-2 px-2 py-2 grow">
+					<div class="w-full flex flex-col">
+						<Button
+							color="blue"
+							btnClasses="w-full"
+							size="sm"
+							spacingSize="xl"
+							on:click={async () => {
+								$previewArgs = JSON.parse(JSON.stringify(selectedCapture))
+								captureLibraryDrawer?.closeDrawer()
+								renderCount++
+							}}
+							disabled={!selectedCapture}
+						>
+							<ArrowLeftIcon class="w-4 h-4 mr-2" />
+							Use input
+						</Button>
+					</div>
+					<div class="w-full min-h-0 grow overflow-auto">
+						{#if typeof selectedCapture == 'string' && selectedCapture == 'WINDMILL_TOO_BIG'}
+							<div class="text-secondary mt-2">
+								Payload too big to preview but can still be loaded</div
+							>
+						{:else if Object.keys(selectedCapture || {}).length > 0}
+							<div class=" overflow-auto h-full p-2">
+								<ObjectViewer json={selectedCapture} />
+							</div>
+						{:else}
+							<div class="text-center text-tertiary">
+								Select an Input to preview scripts arguments
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>
+
 <div class="flex flex-col space-y-2 h-screen bg-surface px-6 py-2 w-full" id="flow-preview-content">
 	<div class="flex flex-row justify-between w-full items-center gap-x-2">
 		<div class="w-8">
@@ -256,6 +319,14 @@ let renderCount = 0;
 			</div>
 		{/if}
 		<div class="flex gap-2">
+			<Button
+				btnClasses="h-full truncate"
+				size="sm"
+				variant="border"
+				on:click={() => {
+					captureLibraryDrawer?.openDrawer()
+				}}>Trigger captures library</Button
+			>
 			{#if initialPath != ''}
 				<Button
 					btnClasses="h-full truncate"

package/package/components/FlowPreviewContent.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         runPreview?: ((args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<void>) | undefined;
     };
     events: {
+        openTriggers: CustomEvent<any>;
         close: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/GfmMarkdown.svelte

@@ -1,14 +1,105 @@
-<script>import Markdown from 'svelte-exmarkdown';
+<script>import { Markdown } from 'svelte-exmarkdown';
 import { gfmPlugin } from 'svelte-exmarkdown/gfm';
+import rehypeRaw from 'rehype-raw';
+import { rehypeGithubAlerts } from 'rehype-github-alerts';
 export let md;
+const plugins = [
+    gfmPlugin(),
+    { rehypePlugin: [rehypeRaw] },
+    { rehypePlugin: [rehypeGithubAlerts] }
+];
 </script>
 
 <div class="!prose-xs pgap">
-	<Markdown {md} plugins={[gfmPlugin()]} />
+	<Markdown {md} {plugins} />
 </div>
 
 <style global>
 	:global(.pgap) > :global(p) {
 		margin-top: 0.5rem;
 		margin-bottom: 0.5rem;
+	}
+
+	:global(:root) {
+		--github-alert-default-color: rgb(208, 215, 222);
+		--github-alert-note-color: rgb(9, 105, 218);
+		--github-alert-tip-color: rgb(26, 127, 55);
+		--github-alert-important-color: rgb(130, 80, 223);
+		--github-alert-warning-color: rgb(191, 135, 0);
+		--github-alert-caution-color: rgb(207, 34, 46);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root) {
+			--github-alert-default-color: rgb(48, 54, 61);
+			--github-alert-note-color: rgb(31, 111, 235);
+			--github-alert-tip-color: rgb(35, 134, 54);
+			--github-alert-important-color: rgb(137, 87, 229);
+			--github-alert-warning-color: rgb(158, 106, 3);
+			--github-alert-caution-color: rgb(248, 81, 73);
+		}
+	}
+
+	:global(.markdown-alert) {
+		padding: 0.5rem 1rem;
+		margin-bottom: 16px;
+		border-left: 0.25em solid var(--github-alert-default-color);
+	}
+
+	:global(.markdown-alert) > :global(:first-child) {
+		margin-top: 0;
+	}
+
+	:global(.markdown-alert) > :global(:last-child) {
+		margin-bottom: 0;
+	}
+
+	:global(.markdown-alert-note) {
+		border-left-color: var(--github-alert-note-color);
+	}
+
+	:global(.markdown-alert-tip) {
+		border-left-color: var(--github-alert-tip-color);
+	}
+
+	:global(.markdown-alert-important) {
+		border-left-color: var(--github-alert-important-color);
+	}
+
+	:global(.markdown-alert-warning) {
+		border-left-color: var(--github-alert-warning-color);
+	}
+
+	:global(.markdown-alert-caution) {
+		border-left-color: var(--github-alert-caution-color);
+	}
+
+	:global(.markdown-alert-title) {
+		display: flex;
+		margin-bottom: 4px;
+		align-items: center;
+	}
+
+	:global(.markdown-alert-title) > :global(svg) {
+		margin-right: 8px;
+	}
+
+	:global(.markdown-alert-note) :global(.markdown-alert-title) {
+		color: var(--github-alert-note-color);
+	}
+
+	:global(.markdown-alert-tip) :global(.markdown-alert-title) {
+		color: var(--github-alert-tip-color);
+	}
+
+	:global(.markdown-alert-important) :global(.markdown-alert-title) {
+		color: var(--github-alert-important-color);
+	}
+
+	:global(.markdown-alert-warning) :global(.markdown-alert-title) {
+		color: var(--github-alert-warning-color);
+	}
+
+	:global(.markdown-alert-caution) :global(.markdown-alert-title) {
+		color: var(--github-alert-caution-color);
 	}</style>

package/package/components/HighlightCode.svelte

@@ -46,6 +46,8 @@ function getLang(lang) {
             return sql;
         case 'bigquery':
             return sql;
+        case 'oracledb':
+            return sql;
         case 'powershell':
             return powershell;
         case 'php':