windmill-components 1.444.1 → 1.447.4

package/package/components/flows/content/FlowInput.svelte

@@ -1,128 +1,479 @@
-<script>import { Button, DrawerContent } from '../../common';
+<script>import { Button } from '../../common';
+import { ButtonType } from '../../common/button/model';
 import { getContext } from 'svelte';
 import FlowCard from '../common/FlowCard.svelte';
-import { copyFirstStepSchema } from '../flowStore';
 import Drawer from '../../common/drawer/Drawer.svelte';
 import SimpleEditor from '../../SimpleEditor.svelte';
 import { convert } from '@redocly/json-to-json-schema';
 import { sendUserToast } from '../../../toast';
-import SavedInputs from '../../SavedInputs.svelte';
 import EditableSchemaForm from '../../EditableSchemaForm.svelte';
-import AddProperty from '../../schema/AddProperty.svelte';
+import AddPropertyV2 from '../../schema/AddPropertyV2.svelte';
 import FlowInputViewer from '../../FlowInputViewer.svelte';
+import HistoricInputs from '../../HistoricInputs.svelte';
+import SavedInputsPicker from '../../SavedInputsPicker.svelte';
+import FirstStepInputs from '../../FirstStepInputs.svelte';
+import { CornerDownLeft, Pen, ChevronRight, ChevronDown, Plus, History, Braces, Code, Save, X } from 'lucide-svelte';
+import CaptureIcon from '../../triggers/CaptureIcon.svelte';
+import FlowPreviewContent from '../../FlowPreviewContent.svelte';
+import FlowInputEditor from './FlowInputEditor.svelte';
+import CapturesInputs from '../../CapturesInputs.svelte';
+import { twMerge } from 'tailwind-merge';
+import ButtonDropDown from '../../meltComponents/ButtonDropDown.svelte';
+import CaptureButton from '../../triggers/CaptureButton.svelte';
 export let noEditor;
 export let disabled;
-const { flowStore, flowStateStore, previewArgs, initialPath } = getContext('FlowEditorContext');
-let inputLibraryDrawer;
-let jsonPayload;
+const { flowStore, previewArgs, pathStore, initialPath, flowInputEditorState } = getContext('FlowEditorContext');
 let pendingJson;
 let addProperty = undefined;
-function importJson() {
-    const parsed = JSON.parse(pendingJson);
+let previewSchema = undefined;
+let payloadData = undefined;
+let previewArguments = $previewArgs;
+let editOptionsOpen = false;
+let dropdownItems = [];
+let editPanelSize = $flowInputEditorState?.editPanelSize ?? 0;
+function updateEditPanelSize(size) {
+    if (!$flowInputEditorState)
+        return;
+    if (!size || size === 0) {
+        $flowInputEditorState.editPanelSize = undefined;
+        return;
+    }
+    $flowInputEditorState.editPanelSize = size;
+}
+$: updateEditPanelSize(editPanelSize);
+const getDropdownItems = () => {
+    return [
+        {
+            label: 'Input editor',
+            onClick: () => {
+                handleEditSchema('inputEditor');
+            },
+            disabled: !$flowInputEditorState?.selectedTab ||
+                $flowInputEditorState?.selectedTab === 'inputEditor',
+            icon: Pen
+        },
+        {
+            label: 'Trigger captures',
+            onClick: () => {
+                handleEditSchema('captures');
+            },
+            disabled: $flowInputEditorState?.selectedTab === 'captures',
+            icon: CaptureIcon
+        },
+        {
+            label: 'History',
+            onClick: () => {
+                handleEditSchema('history');
+            },
+            disabled: $flowInputEditorState?.selectedTab === 'history',
+            icon: History
+        },
+        {
+            label: 'Json payload',
+            onClick: () => {
+                handleEditSchema('json');
+            },
+            disabled: $flowInputEditorState?.selectedTab === 'json',
+            icon: Braces
+        },
+        {
+            label: "First step's inputs",
+            onClick: () => {
+                handleEditSchema('firstStepInputs');
+            },
+            icon: Code
+        },
+        {
+            label: 'Saved inputs',
+            onClick: () => {
+                handleEditSchema('savedInputs');
+            },
+            disabled: $flowInputEditorState?.selectedTab === 'savedInputs',
+            icon: Save
+        }
+    ].filter((item) => !item.disabled);
+};
+function handleEditSchema(editTab) {
+    if (!$flowInputEditorState) {
+        return;
+    }
+    if (editTab !== undefined) {
+        $flowInputEditorState.selectedTab = editTab;
+    }
+    else if ($flowInputEditorState.selectedTab === undefined) {
+        $flowInputEditorState.selectedTab = 'inputEditor';
+    }
+    else {
+        $flowInputEditorState.selectedTab = undefined;
+    }
+}
+function schemaFromPayload(payload) {
+    const parsed = JSON.parse(JSON.stringify(payload));
     if (!parsed) {
-        sendUserToast('Invalid JSON', true);
+        sendUserToast('Invalid Schema', true);
         return;
     }
-    $flowStore.schema = { required: [], properties: {}, ...convert(parsed) };
-    jsonPayload.closeDrawer();
+    if (Object.keys(parsed).length === 0) {
+        return {
+            required: [],
+            properties: {},
+            type: 'object',
+            additionalProperties: false,
+            order: []
+        };
+    }
+    return { required: [], properties: {}, ...convert(parsed) };
+}
+let flowPreviewContent;
+let previewOpen = false;
+function handleKeydown(event) {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+        runPreview();
+    }
+}
+function runPreview() {
+    if (previewArguments) {
+        $previewArgs = previewArguments;
+    }
+    previewOpen = true;
+    flowPreviewContent?.test();
 }
-const yOffset = 191;
+function updatePreviewSchemaAndArgs(payload) {
+    payloadData = payload;
+    if (!payload) {
+        updatePreviewArguments(undefined);
+        previewSchema = undefined;
+        return;
+    }
+    previewSchema = schemaFromPayload(payload);
+    updatePreviewArguments(payload);
+}
+function applySchemaAndArgs() {
+    if (!previewSchema) {
+        return;
+    }
+    $flowStore.schema = previewSchema;
+    if (previewArguments) {
+        $previewArgs = previewArguments;
+    }
+    if ($flowInputEditorState) {
+        $flowInputEditorState.selectedTab = undefined;
+    }
+}
+function applySchema() {
+    $flowStore.schema = previewSchema;
+    if ($flowInputEditorState) {
+        $flowInputEditorState.selectedTab = undefined;
+    }
+}
+function updatePreviewArguments(payloadData) {
+    if (!payloadData) {
+        previewArguments = $previewArgs;
+        return;
+    }
+    previewArguments = payloadData;
+}
+let jsonValid = false;
+function updatePayloadFromJson(jsonInput) {
+    if (jsonInput === undefined || jsonInput === null || jsonInput.trim() === '') {
+        updatePreviewSchemaAndArgs(undefined);
+        jsonValid = false;
+        return;
+    }
+    try {
+        const parsed = JSON.parse(jsonInput);
+        updatePreviewSchemaAndArgs(parsed);
+        jsonValid = true;
+    }
+    catch (error) {
+        updatePreviewSchemaAndArgs(undefined);
+        jsonValid = false;
+    }
+}
+let tabButtonWidth = 0;
+const TAB_TITLES = {
+    inputEditor: 'Input editor',
+    captures: 'Captures',
+    history: 'History',
+    savedInputs: 'Saved inputs',
+    json: 'JSON',
+    firstStepInputs: 'First step',
+    undefined: ''
+};
+let connectFirstNode = () => { };
+let init = false;
+function initPayloadData() {
+    if ($flowInputEditorState.payloadData && !init) {
+        init = true;
+        updatePreviewSchemaAndArgs($flowInputEditorState.payloadData);
+        $flowInputEditorState.payloadData = undefined;
+    }
+}
+$: $flowInputEditorState && ((dropdownItems = getDropdownItems()), initPayloadData());
+let preventEnter = false;
 </script>
 
+<!-- Add svelte:window to listen for keyboard events -->
+<svelte:window on:keydown={handleKeydown} />
+
+<Drawer bind:open={previewOpen} alwaysOpen size="75%">
+	<FlowPreviewContent
+		bind:this={flowPreviewContent}
+		open={previewOpen}
+		previewMode="whole"
+		on:close={() => {
+			previewOpen = false
+		}}
+	/>
+</Drawer>
+
 <FlowCard {noEditor} title="Flow Input">
 	{#if !disabled}
-		<div class="flex flex-row items-center gap-2 px-4 py-2 border-b">
-			<div class="text-sm">Copy input's schema from</div>
-			<Button
-				color="dark"
-				size="xs"
-				on:click={() => {
-					jsonPayload.openDrawer()
+		<div class="py-2 px-4 h-full">
+			<EditableSchemaForm
+				bind:schema={$flowStore.schema}
+				isFlowInput
+				on:edit={(e) => {
+					addProperty?.openDrawer(e.detail)
 				}}
-			>
-				A JSON
-			</Button>
-			<Button
-				color="dark"
-				size="xs"
-				on:click={() => {
-					inputLibraryDrawer.openDrawer()
+				on:delete={(e) => {
+					addProperty?.handleDeleteArgument([e.detail])
 				}}
+				displayWebhookWarning
+				editTab={$flowInputEditorState?.selectedTab}
+				{previewSchema}
+				bind:args={previewArguments}
+				bind:editPanelSize
+				editPanelInitialSize={$flowInputEditorState?.editPanelSize}
+				pannelExtraButtonWidth={$flowInputEditorState?.editPanelSize ? tabButtonWidth : 0}
 			>
-				Past runs/Input library
-			</Button>
-			<Button
-				color="dark"
-				size="xs"
-				disabled={$flowStore.value.modules.length === 0 ||
-					$flowStore.value.modules[0].value.type == 'identity'}
-				on:click={() => copyFirstStepSchema($flowStateStore, flowStore)}
-			>
-				First step's inputs
-			</Button>
-		</div>
-		<div class="p-4 border-b">
-			<AddProperty
-				bind:schema={$flowStore.schema}
-				bind:this={addProperty}
-				on:change={() => {
-					$flowStore = $flowStore
-				}}
-			/>
-		</div>
+				<svelte:fragment slot="openEditTab">
+					<div
+						class={twMerge(
+							'flex flex-row divide-x rounded-md bg-surface overflow-hidden',
+							!!$flowInputEditorState?.selectedTab ? 'rounded-r-none' : '',
+							ButtonType.ColorVariants.blue.divider
+						)}
+					>
+						<button
+							on:click={() => {
+								handleEditSchema()
+							}}
+							title={!!$flowInputEditorState?.selectedTab
+								? 'Close input editor'
+								: 'Open input editor'}
+							class={ButtonType.ColorVariants.blue.contained}
+						>
+							<div class="p-2 center-center">
+								<svelte:component
+									this={!!$flowInputEditorState?.selectedTab ? ChevronRight : Pen}
+									size={14}
+								/>
+							</div>
+						</button>
 
-		<EditableSchemaForm
-			bind:schema={$flowStore.schema}
-			isFlowInput
-			on:edit={(e) => {
-				addProperty?.openDrawer(e.detail)
-			}}
-			on:delete={(e) => {
-				addProperty?.handleDeleteArgument([e.detail])
-			}}
-			offset={yOffset}
-			displayWebhookWarning
-		/>
+						<ButtonDropDown
+							{dropdownItems}
+							closeOnClick={true}
+							bind:open={editOptionsOpen}
+							placement="bottom-end"
+						>
+							<div
+								class={twMerge(
+									'p-2 center-center hover:bg-surface-hover',
+									ButtonType.ColorVariants.blue.contained,
+									'flex flex-row items-center rounded-br-md',
+									'transition-all duration-150 ease-in-out overflow-hidden whitespace-nowrap',
+									!!$flowInputEditorState?.selectedTab ? 'w-[122px] px-3' : 'w-[30px]'
+								)}
+								bind:clientWidth={tabButtonWidth}
+							>
+								<div class="flex flex-row items-center gap-1 justify-between w-full">
+									{#if !!$flowInputEditorState?.selectedTab}
+										<h2 class="text-xs">{TAB_TITLES[$flowInputEditorState?.selectedTab]}</h2>
+									{/if}
+									<ChevronDown size={14} />
+								</div>
+							</div>
+						</ButtonDropDown>
+					</div>
+				</svelte:fragment>
+				<svelte:fragment slot="addProperty">
+					{#if !!previewSchema}
+						<div
+							class={twMerge(
+								'bg-blue-50 border-blue-200 border dark:bg-blue-900/40 dark:border-blue-700/40 text-xs p-2 w-full flex flex-row gap-2 items-center justify-left rounded-md',
+								'text-blue-700 dark:text-blue-100',
+								'relative'
+							)}
+						>
+							<span> Preview only, update schema to save.</span>
+							<div class="flex flex-row items-center gap-2 absolute right-2">
+								<Button
+									variant="contained"
+									color="light"
+									size="xs2"
+									startIcon={{ icon: X }}
+									shortCut={{ key: 'esc', withoutModifier: true }}
+									nonCaptureEvent
+								/>
+							</div>
+						</div>
+					{:else}
+						<AddPropertyV2
+							bind:schema={$flowStore.schema}
+							bind:this={addProperty}
+							on:change={() => {
+								$flowStore = $flowStore
+							}}
+						>
+							<svelte:fragment slot="trigger">
+								<div
+									class="w-full py-2 flex justify-center items-center border border-dashed rounded-md hover:bg-surface-hover"
+								>
+									<Plus size={14} />
+								</div>
+							</svelte:fragment>
+						</AddPropertyV2>
+					{/if}
+				</svelte:fragment>
+				<svelte:fragment slot="extraTab">
+					{#if $flowInputEditorState?.selectedTab === 'history'}
+						<FlowInputEditor
+							disabled={!payloadData}
+							on:applySchemaAndArgs={applySchemaAndArgs}
+							on:applySchema={applySchema}
+							on:destroy={() => {
+								updatePreviewSchemaAndArgs(undefined)
+							}}
+						>
+							<HistoricInputs
+								scriptHash={null}
+								scriptPath={null}
+								flowPath={$pathStore}
+								on:select={(e) => {
+									updatePreviewSchemaAndArgs(e.detail ?? undefined)
+								}}
+							/>
+						</FlowInputEditor>
+					{:else if $flowInputEditorState?.selectedTab === 'captures'}
+						<FlowInputEditor
+							disabled={!payloadData}
+							on:applySchemaAndArgs={applySchemaAndArgs}
+							on:applySchema={applySchema}
+							on:destroy={() => {
+								updatePreviewSchemaAndArgs(undefined)
+							}}
+						>
+							<svelete:fragment slot="action">
+								<div class="center-center">
+									<CaptureButton on:openTriggers small={true} />
+								</div>
+							</svelete:fragment>
+							<CapturesInputs
+								on:select={(e) => {
+									updatePreviewSchemaAndArgs(e.detail ?? undefined)
+								}}
+								flowPath={$pathStore}
+							/>
+						</FlowInputEditor>
+					{:else if $flowInputEditorState?.selectedTab === 'savedInputs'}
+						<FlowInputEditor
+							{preventEnter}
+							disabled={!payloadData}
+							on:applySchemaAndArgs={applySchemaAndArgs}
+							on:applySchema={applySchema}
+							on:destroy={() => {
+								updatePreviewSchemaAndArgs(undefined)
+							}}
+						>
+							<SavedInputsPicker
+								flowPath={initialPath}
+								on:select={(e) => {
+									updatePreviewSchemaAndArgs(e.detail ?? undefined)
+								}}
+								on:isEditing={(e) => {
+									preventEnter = e.detail
+								}}
+								previewArgs={previewArguments}
+							/>
+						</FlowInputEditor>
+					{:else if $flowInputEditorState?.selectedTab === 'json'}
+						<FlowInputEditor
+							{preventEnter}
+							disabled={!jsonValid}
+							on:applySchemaAndArgs={applySchemaAndArgs}
+							on:applySchema={applySchema}
+							on:destroy={() => {
+								updatePreviewSchemaAndArgs(undefined)
+							}}
+						>
+							<SimpleEditor
+								on:focus={() => {
+									preventEnter = true
+									updatePayloadFromJson(pendingJson)
+								}}
+								on:blur={async () => {
+									preventEnter = false
+									setTimeout(() => {
+										if (payloadData) {
+											updatePayloadFromJson('')
+										}
+									}, 100)
+								}}
+								on:change={(e) => {
+									updatePayloadFromJson(e.detail.code)
+								}}
+								bind:code={pendingJson}
+								lang="json"
+								class="h-full"
+								placeholder={'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}'}
+							/>
+						</FlowInputEditor>
+					{:else if $flowInputEditorState?.selectedTab === 'firstStepInputs'}
+						<FlowInputEditor
+							disabled={!previewSchema}
+							on:applySchemaAndArgs={() => {
+								applySchemaAndArgs()
+								connectFirstNode()
+							}}
+							on:applySchema={applySchema}
+							on:destroy={() => {
+								updatePreviewSchemaAndArgs(undefined)
+							}}
+						>
+							<FirstStepInputs
+								on:connectFirstNode={({ detail }) => {
+									connectFirstNode = detail.connectFirstNode
+								}}
+								on:select={(e) => {
+									previewSchema = e.detail ?? undefined
+								}}
+							/>
+						</FlowInputEditor>
+					{/if}
+				</svelte:fragment>
+				<svelte:fragment slot="runButton">
+					<div class="w-full flex justify-end pr-5">
+						<Button
+							color="dark"
+							btnClasses="w-fit"
+							disabled={!!previewSchema}
+							size="xs"
+							shortCut={{ Icon: CornerDownLeft, hide: false }}
+							on:click={() => {
+								runPreview()
+							}}
+						>
+							Run
+						</Button>
+					</div>
+				</svelte:fragment>
+			</EditableSchemaForm>
+		</div>
 	{:else}
 		<div class="p-4 border-b">
 			<FlowInputViewer schema={$flowStore.schema} />
 		</div>
 	{/if}
 </FlowCard>
-
-<Drawer bind:this={jsonPayload} size="800px">
-	<DrawerContent
-		title="Input schema from JSON"
-		on:close={() => {
-			jsonPayload.closeDrawer()
-		}}
-		noPadding
-	>
-		<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" />
-		<svelte:fragment slot="actions">
-			<Button size="sm" on:click={importJson}>Import</Button>
-		</svelte:fragment>
-	</DrawerContent>
-</Drawer>
-
-<Drawer bind:this={inputLibraryDrawer}>
-	<DrawerContent title="Input library {initialPath}" on:close={inputLibraryDrawer?.toggleDrawer}>
-		<SavedInputs
-			flowPath={initialPath}
-			isValid={true}
-			args={$previewArgs}
-			canSaveInputs={false}
-			on:selected_args={(e) => {
-				const parsed = JSON.parse(JSON.stringify(e.detail))
-
-				if (!parsed) {
-					sendUserToast('Invalid JSON', true)
-					return
-				}
-
-				$flowStore.schema = { required: [], properties: {}, ...convert(parsed) }
-				inputLibraryDrawer?.closeDrawer()
-			}}
-		/>
-	</DrawerContent>
-</Drawer>

package/package/components/flows/content/FlowInput.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         disabled: boolean;
     };
     events: {
+        openTriggers: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/flows/content/FlowInputEditor.svelte

@@ -0,0 +1,46 @@
+<script>import { createEventDispatcher, onDestroy } from 'svelte';
+import Section from '../../Section.svelte';
+import Button from '../../common/button/Button.svelte';
+import { CornerDownLeft, Save } from 'lucide-svelte';
+export let name = '';
+export let disabled = false;
+export let preventEnter = false;
+const dispatch = createEventDispatcher();
+function applySchemaAndArgs() {
+    dispatch('applySchemaAndArgs');
+}
+onDestroy(() => {
+    dispatch('destroy');
+});
+</script>
+
+<svelte:window
+	on:keydown={(e) => {
+		if (e.key === 'Enter' && !preventEnter) {
+			applySchemaAndArgs()
+			e.preventDefault()
+		}
+	}}
+/>
+
+<div class="h-full p-2">
+	<Section label={name} class="h-full" small={true}>
+		<svelte:fragment slot="header">
+			<slot name="header" />
+		</svelte:fragment>
+		<svelte:fragment slot="action">
+			<div class="flex flex-row gap-2 data-schema-picker">
+				<slot name="action" />
+				<Button
+					size="xs2"
+					color="dark"
+					{disabled}
+					shortCut={{ Icon: CornerDownLeft, hide: false, withoutModifier: true }}
+					startIcon={{ icon: Save }}
+					on:click={applySchemaAndArgs}>Update schema</Button
+				>
+			</div>
+		</svelte:fragment>
+		<slot />
+	</Section>
+</div>

package/package/components/flows/content/FlowInputEditor.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        name?: string | undefined;
+        disabled?: boolean | undefined;
+        preventEnter?: boolean | undefined;
+    };
+    events: {
+        applySchemaAndArgs: CustomEvent<any>;
+        destroy: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        action: {};
+        default: {};
+    };
+};
+export type FlowInputEditorProps = typeof __propDef.props;
+export type FlowInputEditorEvents = typeof __propDef.events;
+export type FlowInputEditorSlots = typeof __propDef.slots;
+export default class FlowInputEditor extends SvelteComponent<FlowInputEditorProps, FlowInputEditorEvents, FlowInputEditorSlots> {
+}
+export {};

package/package/components/flows/content/FlowInputsQuick.svelte

@@ -94,7 +94,7 @@ function onSelectedKindChange(_selectedKind) {
     selectedByKeyboard = 0;
 }
 let inlineScripts = [];
-const enterpriseLangs = ['bigquery', 'snowflake', 'mssql'];
+const enterpriseLangs = ['bigquery', 'snowflake', 'mssql', 'oracledb'];
 function computeInlineScriptChoices(funcDesc, selected, preFilter, selectedKind) {
     if (['script', 'trigger', 'failure', 'approval', 'preprocessor'].includes(selectedKind)) {
         if (!selected && preFilter == 'all') {