windmill-components 1.447.8 → 1.448.50

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

@@ -1,6 +1,6 @@
 <script>import { Button } from '../../common';
 import { ButtonType } from '../../common/button/model';
-import { getContext } from 'svelte';
+import { getContext, tick } from 'svelte';
 import FlowCard from '../common/FlowCard.svelte';
 import Drawer from '../../common/drawer/Drawer.svelte';
 import SimpleEditor from '../../SimpleEditor.svelte';
@@ -12,14 +12,15 @@ 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 { CornerDownLeft, Pen, ChevronRight, Plus, History, Braces, Code, Save, X, Check } 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';
+import { getFullPath, setNestedProperty, getNestedProperty, schemaFromDiff, computeDiff, applyDiff } from '../../schema/schemaUtils';
+import SideBarTab from '../../meltComponents/SideBarTab.svelte';
 export let noEditor;
 export let disabled;
 const { flowStore, previewArgs, pathStore, initialPath, flowInputEditorState } = getContext('FlowEditorContext');
@@ -28,9 +29,13 @@ let addProperty = undefined;
 let previewSchema = undefined;
 let payloadData = undefined;
 let previewArguments = $previewArgs;
-let editOptionsOpen = false;
 let dropdownItems = [];
+let diff = {};
 let editPanelSize = $flowInputEditorState?.editPanelSize ?? 0;
+let selectedSchema = undefined;
+let runDisabled = false;
+let editableSchemaForm = undefined;
+let savedPreviewArgs = undefined;
 function updateEditPanelSize(size) {
     if (!$flowInputEditorState)
         return;
@@ -50,7 +55,8 @@ const getDropdownItems = () => {
             },
             disabled: !$flowInputEditorState?.selectedTab ||
                 $flowInputEditorState?.selectedTab === 'inputEditor',
-            icon: Pen
+            icon: Pen,
+            selected: $flowInputEditorState?.selectedTab === 'inputEditor'
         },
         {
             label: 'Trigger captures',
@@ -58,7 +64,8 @@ const getDropdownItems = () => {
                 handleEditSchema('captures');
             },
             disabled: $flowInputEditorState?.selectedTab === 'captures',
-            icon: CaptureIcon
+            icon: CaptureIcon,
+            selected: $flowInputEditorState?.selectedTab === 'captures'
         },
         {
             label: 'History',
@@ -66,7 +73,8 @@ const getDropdownItems = () => {
                 handleEditSchema('history');
             },
             disabled: $flowInputEditorState?.selectedTab === 'history',
-            icon: History
+            icon: History,
+            selected: $flowInputEditorState?.selectedTab === 'history'
         },
         {
             label: 'Json payload',
@@ -74,14 +82,16 @@ const getDropdownItems = () => {
                 handleEditSchema('json');
             },
             disabled: $flowInputEditorState?.selectedTab === 'json',
-            icon: Braces
+            icon: Braces,
+            selected: $flowInputEditorState?.selectedTab === 'json'
         },
         {
             label: "First step's inputs",
             onClick: () => {
                 handleEditSchema('firstStepInputs');
             },
-            icon: Code
+            icon: Code,
+            selected: $flowInputEditorState?.selectedTab === 'firstStepInputs'
         },
         {
             label: 'Saved inputs',
@@ -89,9 +99,10 @@ const getDropdownItems = () => {
                 handleEditSchema('savedInputs');
             },
             disabled: $flowInputEditorState?.selectedTab === 'savedInputs',
-            icon: Save
+            icon: Save,
+            selected: $flowInputEditorState?.selectedTab === 'savedInputs'
         }
-    ].filter((item) => !item.disabled);
+    ];
 };
 function handleEditSchema(editTab) {
     if (!$flowInputEditorState) {
@@ -107,7 +118,8 @@ function handleEditSchema(editTab) {
         $flowInputEditorState.selectedTab = undefined;
     }
 }
-function schemaFromPayload(payload) {
+function schemaFromPayload(payloadData) {
+    const payload = structuredClone(payloadData);
     const parsed = JSON.parse(JSON.stringify(payload));
     if (!parsed) {
         sendUserToast('Invalid Schema', true);
@@ -130,76 +142,81 @@ function handleKeydown(event) {
     if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
         runPreview();
     }
+    else if (event.key === 'Enter' && previewSchema && !preventEnter) {
+        applySchemaAndArgs();
+        connectFirstNode();
+        event.stopPropagation();
+        event.preventDefault();
+    }
 }
 function runPreview() {
     if (previewArguments) {
-        $previewArgs = previewArguments;
+        $previewArgs = structuredClone(previewArguments);
     }
     previewOpen = true;
     flowPreviewContent?.test();
 }
 function updatePreviewSchemaAndArgs(payload) {
-    payloadData = payload;
     if (!payload) {
+        payloadData = undefined;
+        selectedSchema = undefined;
         updatePreviewArguments(undefined);
-        previewSchema = undefined;
+        updatePreviewSchema(undefined);
         return;
     }
-    previewSchema = schemaFromPayload(payload);
-    updatePreviewArguments(payload);
+    payloadData = structuredClone(payload);
+    selectedSchema = schemaFromPayload(payloadData);
+    updatePreviewSchema(selectedSchema);
+    updatePreviewArguments(payloadData);
 }
-function applySchemaAndArgs() {
-    if (!previewSchema) {
+async function updatePreviewSchema(newSchema) {
+    if (!newSchema) {
+        previewSchema = undefined;
+        if (runDisabled) {
+            await tick();
+            runDisabled = false;
+        }
+        diff = {};
         return;
     }
-    $flowStore.schema = previewSchema;
+    diff = {};
+    const diffSchema = computeDiff(newSchema, $flowStore.schema);
+    diff = diffSchema;
+    previewSchema = schemaFromDiff(diffSchema, $flowStore.schema);
+    runDisabled = true;
+}
+async function applySchemaAndArgs() {
+    $flowStore.schema = applyDiff($flowStore.schema, diff);
     if (previewArguments) {
-        $previewArgs = previewArguments;
+        savedPreviewArgs = structuredClone(previewArguments);
     }
-    if ($flowInputEditorState) {
-        $flowInputEditorState.selectedTab = undefined;
-    }
-}
-function applySchema() {
-    $flowStore.schema = previewSchema;
+    updatePreviewSchemaAndArgs(undefined);
     if ($flowInputEditorState) {
         $flowInputEditorState.selectedTab = undefined;
     }
 }
 function updatePreviewArguments(payloadData) {
     if (!payloadData) {
-        previewArguments = $previewArgs;
+        previewArguments = savedPreviewArgs;
         return;
     }
-    previewArguments = payloadData;
+    savedPreviewArgs = structuredClone(previewArguments);
+    previewArguments = structuredClone(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() {
@@ -211,6 +228,44 @@ function initPayloadData() {
 }
 $: $flowInputEditorState && ((dropdownItems = getDropdownItems()), initPayloadData());
 let preventEnter = false;
+async function acceptChange(arg) {
+    handleChange(arg, $flowStore.schema, diff, (newSchema) => {
+        $flowStore.schema = newSchema;
+    });
+}
+async function rejectChange(arg) {
+    const revertDiff = computeDiff($flowStore.schema, selectedSchema);
+    handleChange(arg, selectedSchema, revertDiff, (newSchema) => {
+        selectedSchema = newSchema;
+    });
+}
+function handleChange(arg, currentSchema, diffSchema, updateCurrentSchema) {
+    if (!diff || !currentSchema) {
+        return;
+    }
+    const path = getFullPath(arg);
+    const parentPath = path.slice(0, -1);
+    const diffStatus = getNestedProperty({ diff: diffSchema }, path, 'diff');
+    const schema = getNestedProperty(currentSchema, parentPath, 'properties');
+    const localDiff = {
+        [arg.label]: diffStatus
+    };
+    const schemaUpdated = applyDiff(schema, localDiff);
+    if (parentPath.length > 0) {
+        setNestedProperty(currentSchema, parentPath, schemaUpdated);
+    }
+    else {
+        updateCurrentSchema(schemaUpdated);
+    }
+    diff = computeDiff(selectedSchema, $flowStore.schema);
+    previewSchema = schemaFromDiff(diff, $flowStore.schema);
+}
+function resetArgs() {
+    if (!previewSchema) {
+        previewArguments = undefined;
+        savedPreviewArgs = undefined;
+    }
+}
 </script>
 
 <!-- Add svelte:window to listen for keyboard events -->
@@ -231,6 +286,7 @@ let preventEnter = false;
 	{#if !disabled}
 		<div class="py-2 px-4 h-full">
 			<EditableSchemaForm
+				bind:this={editableSchemaForm}
 				bind:schema={$flowStore.schema}
 				isFlowInput
 				on:edit={(e) => {
@@ -246,78 +302,84 @@ let preventEnter = false;
 				bind:editPanelSize
 				editPanelInitialSize={$flowInputEditorState?.editPanelSize}
 				pannelExtraButtonWidth={$flowInputEditorState?.editPanelSize ? tabButtonWidth : 0}
+				{diff}
+				disableDnd={!!previewSchema}
+				on:rejectChange={(e) => {
+					rejectChange(e.detail).then(() => {
+						updatePreviewSchema(selectedSchema)
+					})
+				}}
+				on:acceptChange={(e) => {
+					acceptChange(e.detail).then(() => {
+						updatePreviewSchema(selectedSchema)
+					})
+				}}
+				shouldDispatchChanges={true}
+				on:change={() => {
+					previewArguments = previewArguments
+					if (!previewSchema) {
+						savedPreviewArgs = structuredClone(previewArguments)
+					}
+				}}
+				on:schemaChange={() => {
+					resetArgs()
+				}}
 			>
 				<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>
-
-						<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 class={twMerge('flex flex-row divide-x', ButtonType.ColorVariants.blue.divider)}>
+						<SideBarTab {dropdownItems} fullMenu={!!$flowInputEditorState?.selectedTab}>
+							<svelte:fragment slot="close button">
+								<button
+									on:click={() => {
+										handleEditSchema()
+									}}
+									title={!!$flowInputEditorState?.selectedTab
+										? 'Close input editor'
+										: 'Open input editor'}
+									class={twMerge(
+										ButtonType.ColorVariants.blue.contained,
+										!!$flowInputEditorState?.selectedTab
+											? 'rounded-tl-md border-l border-t'
+											: 'rounded-md border'
+									)}
+								>
+									<div class="p-2 center-center">
+										<svelte:component
+											this={!!$flowInputEditorState?.selectedTab ? ChevronRight : Pen}
+											size={14}
+										/>
+									</div>
+								</button>
+							</svelte:fragment>
+						</SideBarTab>
 					</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 class="flex flex-row items-center gap-2 right-2 justify-end">
+							<Button
+								size="xs"
+								color="green"
+								disabled={!previewSchema}
+								shortCut={{ Icon: CornerDownLeft, hide: false, withoutModifier: true }}
+								startIcon={{ icon: Check }}
+								on:click={() => {
+									applySchemaAndArgs()
+									connectFirstNode()
+								}}
+							>
+								{Object.values(diff).every((el) => el.diff === 'same')
+									? 'Apply args'
+									: 'Update schema'}
+							</Button>
+							<Button
+								variant="border"
+								color="light"
+								size="xs"
+								startIcon={{ icon: X }}
+								shortCut={{ key: 'esc', withoutModifier: true }}
+								nonCaptureEvent
+							/>
 						</div>
 					{:else}
 						<AddPropertyV2
@@ -325,6 +387,14 @@ let preventEnter = false;
 							bind:this={addProperty}
 							on:change={() => {
 								$flowStore = $flowStore
+								if (editableSchemaForm) {
+									editableSchemaForm.updateJson()
+								}
+							}}
+							on:addNew={(e) => {
+								handleEditSchema('inputEditor')
+								editableSchemaForm?.openField(e.detail)
+								$flowStore = $flowStore
 							}}
 						>
 							<svelte:fragment slot="trigger">
@@ -340,9 +410,7 @@ let preventEnter = false;
 				<svelte:fragment slot="extraTab">
 					{#if $flowInputEditorState?.selectedTab === 'history'}
 						<FlowInputEditor
-							disabled={!payloadData}
-							on:applySchemaAndArgs={applySchemaAndArgs}
-							on:applySchema={applySchema}
+							title="History"
 							on:destroy={() => {
 								updatePreviewSchemaAndArgs(undefined)
 							}}
@@ -358,12 +426,10 @@ let preventEnter = false;
 						</FlowInputEditor>
 					{:else if $flowInputEditorState?.selectedTab === 'captures'}
 						<FlowInputEditor
-							disabled={!payloadData}
-							on:applySchemaAndArgs={applySchemaAndArgs}
-							on:applySchema={applySchema}
 							on:destroy={() => {
 								updatePreviewSchemaAndArgs(undefined)
 							}}
+							title="Trigger captures"
 						>
 							<svelete:fragment slot="action">
 								<div class="center-center">
@@ -379,13 +445,10 @@ let preventEnter = false;
 						</FlowInputEditor>
 					{:else if $flowInputEditorState?.selectedTab === 'savedInputs'}
 						<FlowInputEditor
-							{preventEnter}
-							disabled={!payloadData}
-							on:applySchemaAndArgs={applySchemaAndArgs}
-							on:applySchema={applySchema}
 							on:destroy={() => {
 								updatePreviewSchemaAndArgs(undefined)
 							}}
+							title="Saved inputs"
 						>
 							<SavedInputsPicker
 								flowPath={initialPath}
@@ -400,13 +463,10 @@ let preventEnter = false;
 						</FlowInputEditor>
 					{:else if $flowInputEditorState?.selectedTab === 'json'}
 						<FlowInputEditor
-							{preventEnter}
-							disabled={!jsonValid}
-							on:applySchemaAndArgs={applySchemaAndArgs}
-							on:applySchema={applySchema}
 							on:destroy={() => {
 								updatePreviewSchemaAndArgs(undefined)
 							}}
+							title="Json payload"
 						>
 							<SimpleEditor
 								on:focus={() => {
@@ -432,22 +492,25 @@ let preventEnter = false;
 						</FlowInputEditor>
 					{:else if $flowInputEditorState?.selectedTab === 'firstStepInputs'}
 						<FlowInputEditor
-							disabled={!previewSchema}
-							on:applySchemaAndArgs={() => {
-								applySchemaAndArgs()
-								connectFirstNode()
-							}}
-							on:applySchema={applySchema}
 							on:destroy={() => {
 								updatePreviewSchemaAndArgs(undefined)
+								connectFirstNode = () => {}
 							}}
+							title="First step's inputs"
 						>
 							<FirstStepInputs
 								on:connectFirstNode={({ detail }) => {
 									connectFirstNode = detail.connectFirstNode
 								}}
 								on:select={(e) => {
-									previewSchema = e.detail ?? undefined
+									if (e.detail) {
+										const diffSchema = computeDiff(e.detail, $flowStore.schema)
+										diff = diffSchema
+										previewSchema = schemaFromDiff(diffSchema, $flowStore.schema)
+										runDisabled = true
+									} else {
+										updatePreviewSchemaAndArgs(undefined)
+									}
 								}}
 							/>
 						</FlowInputEditor>
@@ -458,7 +521,7 @@ let preventEnter = false;
 						<Button
 							color="dark"
 							btnClasses="w-fit"
-							disabled={!!previewSchema}
+							disabled={runDisabled}
 							size="xs"
 							shortCut={{ Icon: CornerDownLeft, hide: false }}
 							on:click={() => {

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

@@ -10,8 +10,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FlowInputProps = typeof __propDef.props;
 export type FlowInputEvents = typeof __propDef.events;

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

@@ -1,46 +1,22 @@
 <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');
-}
+export let title = '';
 onDestroy(() => {
     dispatch('destroy');
 });
 </script>
 
-<svelte:window
-	on:keydown={(e) => {
-		if (e.key === 'Enter' && !preventEnter) {
-			applySchemaAndArgs()
-			e.preventDefault()
-		}
-	}}
-/>
+<div class="flex flex-col h-full px-3 pb-3">
+	<div
+		class="items-center grow-0 flex flex-row justify-between gap-2 data-schema-picker min-h-[40px]"
+	>
+		<h2 class="font-semibold text-secondary text-sm flex flex-row items-center gap-1 leading-6">
+			{title}
+		</h2>
+		<slot name="action" />
+	</div>
 
-<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>
+	<div class="w-full min-h-0 grow">
 		<slot />
-	</Section>
+	</div>
 </div>

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

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

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

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         failureModule: boolean;
         preprocessorModule: boolean;
-        shouldDisableTriggerScripts?: boolean;
+        shouldDisableTriggerScripts?: boolean | undefined;
         noEditor: boolean;
         summary?: string | undefined;
     };
@@ -14,8 +14,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FlowInputsProps = typeof __propDef.props;
 export type FlowInputsEvents = typeof __propDef.events;

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

@@ -9,8 +9,6 @@ declare const __propDef: {
     slots: {
         default: {};
     };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FlowInputsFlowProps = typeof __propDef.props;
 export type FlowInputsFlowEvents = typeof __propDef.events;

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

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        filter?: string;
-        owners?: string[];
+        filter?: string | undefined;
+        owners?: string[] | undefined;
     };
     events: {
         pickFlow: CustomEvent<any>;
@@ -10,8 +10,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
 };
 export type FlowInputsFlowQuickProps = typeof __propDef.props;
 export type FlowInputsFlowQuickEvents = typeof __propDef.events;