windmill-components 1.339.2 → 1.352.1

package/package/components/flows/content/FlowEditorPanel.svelte

@@ -1,12 +1,13 @@
-<script>import { getContext } from 'svelte';
+<script>import { getContext, onMount } from 'svelte';
 import FlowModuleWrapper from './FlowModuleWrapper.svelte';
 import FlowSettings from './FlowSettings.svelte';
 import FlowInput from './FlowInput.svelte';
 import FlowFailureModule from './FlowFailureModule.svelte';
 import FlowConstants from './FlowConstants.svelte';
+import { initRequiredInputFilled } from '../utils';
 export let noEditor = false;
 export let enableAi = false;
-const { selectedId, flowStore } = getContext('FlowEditorContext');
+const { selectedId, flowStore, flowStateStore, flowInputsStore } = getContext('FlowEditorContext');
 function checkDup(modules) {
     let seenModules = [];
     for (const m of modules) {
@@ -17,6 +18,19 @@ function checkDup(modules) {
         seenModules.push(m.id);
     }
 }
+onMount(() => {
+    $flowStore?.value?.modules?.forEach((module) => {
+        if (!module) {
+            return;
+        }
+        if (!$flowStateStore) {
+            $flowInputsStore = {};
+        }
+        $flowInputsStore[module?.id] = {
+            requiredInputsFilled: initRequiredInputFilled(module.value, $flowStateStore?.[module?.id]?.schema ?? {})
+        };
+    });
+});
 </script>
 
 {#if $selectedId?.startsWith('settings')}

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

@@ -1,5 +1,4 @@
 <script>import { Button, DrawerContent } from '../../common';
-import SchemaEditor from '../../SchemaEditor.svelte';
 import { getContext } from 'svelte';
 import FlowCard from '../common/FlowCard.svelte';
 import { copyFirstStepSchema } from '../flowStore';
@@ -10,12 +9,14 @@ 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';
 export let noEditor;
 const { flowStore, flowStateStore, previewArgs, initialPath } = getContext('FlowEditorContext');
 let capturePayload;
 let inputLibraryDrawer;
 let jsonPayload;
 let pendingJson;
+let addProperty = undefined;
 function importJson() {
     const parsed = JSON.parse(pendingJson);
     if (!parsed) {
@@ -25,64 +26,73 @@ function importJson() {
     $flowStore.schema = { required: [], properties: {}, ...convert(parsed) };
     jsonPayload.closeDrawer();
 }
+const yOffset = 191;
 </script>
 
 <CapturePayload bind:this={capturePayload} />
+
 <FlowCard {noEditor} title="Flow Input">
-	<div class="p-6">
-		<div class="flex flex-row items-center gap-2 pb-2 border-b border-gray-400">
-			<div>Copy input's schema from</div>
-			<Button
-				color="dark"
-				size="xs"
-				on:click={() => {
-					capturePayload.openDrawer()
-				}}
-			>
-				A request
-			</Button>
-			<Button
-				color="dark"
-				size="xs"
-				on:click={() => {
-					jsonPayload.openDrawer()
-				}}
-			>
-				A JSON
-			</Button>
-			<Button
-				color="dark"
-				size="xs"
-				on:click={() => {
-					inputLibraryDrawer.openDrawer()
-				}}
-			>
-				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="pt-6">
-			<SchemaEditor
-				isFlowInput
-				bind:schema={$flowStore.schema}
-				on:change={() => {
-					$flowStore = $flowStore
-				}}
-			/>
-		</div>
+	<div class="flex flex-row items-center gap-2 px-4 py-2 border-b">
+		<div>Copy input's schema from</div>
+		<Button
+			color="dark"
+			size="xs"
+			on:click={() => {
+				capturePayload.openDrawer()
+			}}
+		>
+			A request
+		</Button>
+		<Button
+			color="dark"
+			size="xs"
+			on:click={() => {
+				jsonPayload.openDrawer()
+			}}
+		>
+			A JSON
+		</Button>
+		<Button
+			color="dark"
+			size="xs"
+			on:click={() => {
+				inputLibraryDrawer.openDrawer()
+			}}
+		>
+			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-6">
-		<h2 class="mb-4">Customize Flow Inputs</h2>
-		<EditableSchemaForm bind:schema={$flowStore.schema} />
+	<div class="p-4 border-b">
+		<AddProperty
+			bind:schema={$flowStore.schema}
+			bind:this={addProperty}
+			on:change={() => {
+				$flowStore = $flowStore
+			}}
+		/>
 	</div>
+
+	<EditableSchemaForm
+		bind:schema={$flowStore.schema}
+		isFlowInput
+		on:edit={(e) => {
+			addProperty?.openDrawer(e.detail)
+		}}
+		on:delete={(e) => {
+			addProperty?.handleDeleteArgument([e.detail])
+		}}
+		offset={yOffset}
+		displayWebhookWarning
+	/>
 </FlowCard>
 
 <Drawer bind:this={jsonPayload} size="800px">

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -39,7 +39,8 @@ import Label from '../../Label.svelte';
 import { enterpriseLicense } from '../../../stores';
 import { isCloudHosted } from '../../../cloud';
 import { loadSchemaFromModule } from '../flowInfers';
-const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, saveDraft } = getContext('FlowEditorContext');
+import { initRequiredInputFilled, setRequiredInputFilled } from '../utils';
+const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, saveDraft, flowInputsStore } = getContext('FlowEditorContext');
 export let flowModule;
 export let failureModule = false;
 export let parentModule = undefined;
@@ -110,6 +111,11 @@ async function reload(flowModule) {
         validCode = true;
         if (inputTransformSchemaForm) {
             inputTransformSchemaForm.setArgs(input_transforms);
+            if (!deepEqual(schema, $flowStateStore[flowModule.id]?.schema)) {
+                $flowInputsStore[flowModule?.id] = {
+                    requiredInputsFilled: initRequiredInputFilled(flowModule.value, schema ?? {})
+                };
+            }
         }
         else {
             if (flowModule.value.type == 'rawscript' ||
@@ -150,6 +156,15 @@ afterUpdate(() => {
 let forceReload = 0;
 let editorPanelSize = noEditor ? 0 : flowModule.value.type == 'script' ? 30 : 50;
 let editorSettingsPanelSize = 100 - editorPanelSize;
+function setFlowInput(argName) {
+    if ($flowInputsStore && $flowInputsStore?.[flowModule.id] === undefined) {
+        $flowInputsStore[flowModule.id] = {};
+    }
+    if ($flowInputsStore) {
+        const requiredInputsFilled = setRequiredInputFilled(argName, flowModule.value, $flowInputsStore[flowModule.id].requiredInputsFilled ?? {}, $flowStateStore[$selectedId]?.schema);
+        $flowInputsStore[flowModule.id].requiredInputsFilled = requiredInputsFilled;
+    }
+}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -234,7 +249,7 @@ let editorSettingsPanelSize = 100 - editorPanelSize;
 								{#key flowModule.id}
 									<Editor
 										folding
-										path={flowModule.value.path}
+										path={$pathStore + '/' + flowModule.id}
 										bind:websocketAlive
 										bind:this={editor}
 										class="h-full relative"
@@ -283,7 +298,11 @@ let editorSettingsPanelSize = 100 - editorPanelSize;
 							{#if !noEditor}
 								<div class="border-t">
 									{#key forceReload}
-										<FlowModuleScript path={flowModule.value.path} hash={flowModule.value.hash} />
+										<FlowModuleScript
+											showAllCode={false}
+											path={flowModule.value.path}
+											hash={flowModule.value.hash}
+										/>
 									{/key}
 								</div>
 							{/if}
@@ -314,6 +333,10 @@ let editorSettingsPanelSize = 100 - editorPanelSize;
 											bind:args={flowModule.value.input_transforms}
 											extraLib={stepPropPicker.extraLib}
 											{enableAi}
+											on:changeArg={(e) => {
+												const { argName } = e.detail
+												setFlowInput(argName)
+											}}
 										/>
 									</PropPickerWrapper>
 								</div>

package/package/components/flows/content/FlowModuleScript.svelte

@@ -1,11 +1,16 @@
 <script>import HighlightCode from '../../HighlightCode.svelte';
+import TimeAgo from '../../TimeAgo.svelte';
 import { ScriptService } from '../../../gen';
 import { getScriptByPath } from '../../../scripts';
 import { workspaceStore } from '../../../stores';
 export let path;
 export let hash = undefined;
+export let showDate = false;
+export let showAllCode = true;
 let code;
 let language;
+let lock = undefined;
+let date = undefined;
 let notFound = false;
 async function loadCode(path, hash) {
     try {
@@ -15,6 +20,8 @@ async function loadCode(path, hash) {
             : await getScriptByPath(path);
         code = script.content;
         language = script.language;
+        lock = script.lock;
+        date = script.created_at;
     }
     catch (e) {
         notFound = true;
@@ -22,12 +29,44 @@ async function loadCode(path, hash) {
     }
 }
 $: path && loadCode(path, hash);
+function toggleShowAll() {
+    showAllCode = !showAllCode;
+}
 </script>
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
+	{#if showDate && date}
+		<span class="text-xs text-tertiary mb-4"><TimeAgo {date} /></span>
+	{/if}
 	{#if notFound}
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>
-	{:else}
+	{:else if showAllCode}
 		<HighlightCode {language} {code} />
+	{:else}
+		<div class="code-container h-full">
+			<HighlightCode {language} code={code?.split('\n').slice(0, 10).join('\n')} />
+		</div>
+		<button on:click={toggleShowAll}>Show all</button>
+	{/if}
+
+	{#if lock}
+		<h3 class="mb-2 mt-6">Lock</h3>
+		<pre class="bg-surface-secondary text-xs p-2 overflow-auto w-full">{lock}</pre>
 	{/if}
 </div>
+
+<style>
+	.code-container {
+		position: relative;
+		overflow: hidden;
+	}
+	.code-container::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 100px;
+		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(var(--color-surface)));
+		pointer-events: none;
+	}</style>

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

@@ -3,6 +3,8 @@ declare const __propDef: {
     props: {
         path: string;
         hash?: string | undefined;
+        showDate?: boolean | undefined;
+        showAllCode?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/flows/content/FlowModuleSuspend.svelte

@@ -1,8 +1,7 @@
-<script>import SchemaEditor from '../../SchemaEditor.svelte';
-import Toggle from '../../Toggle.svelte';
+<script>import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import InputTransformForm from '../../InputTransformForm.svelte';
-import { getContext } from 'svelte';
+import { getContext, tick } from 'svelte';
 import { Alert, Tab, Tabs } from '../../common';
 import { GroupService } from '../../../gen';
 import { emptySchema, emptyString } from '../../../utils';
@@ -12,6 +11,8 @@ import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import Section from '../../Section.svelte';
 import Label from '../../Label.svelte';
 import SuspendDrawer from './SuspendDrawer.svelte';
+import EditableSchemaDrawer from '../../schema/EditableSchemaDrawer.svelte';
+import AddProperty from '../../schema/AddProperty.svelte';
 const { selectedId, flowStateStore } = getContext('FlowEditorContext');
 const result = $flowStateStore[$selectedId]?.previewResult ?? {};
 let editor = undefined;
@@ -36,39 +37,40 @@ $: {
         loadGroups();
     }
 }
+let jsonView = false;
 </script>
 
 <Section label="Suspend/Approval/Prompt" class="w-full">
+	<svelte:fragment slot="action">
+		<SuspendDrawer text="Approval/Prompt helpers" />
+	</svelte:fragment>
 	<svelte:fragment slot="header">
-		<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_approval">
-			If defined, at the end of the step, the flow will be suspended until it receives external
-			requests to be resumed or canceled. This is most useful to implement approval steps but can be
-			used flexibly for other purposes.
-		</Tooltip>
-		<div class="ml-4">
-			<div class="flex">
-				<SuspendDrawer text="Approval/Prompt helpers" />
-			</div>
+		<div class="flex flex-row items-center gap-2">
+			<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_approval">
+				If defined, at the end of the step, the flow will be suspended until it receives external
+				requests to be resumed or canceled. This is most useful to implement approval steps but can
+				be used flexibly for other purposes.
+			</Tooltip>
+			<Toggle
+				size="xs"
+				checked={isSuspendEnabled}
+				on:change={() => {
+					if (isSuspendEnabled && flowModule.suspend != undefined) {
+						flowModule.suspend = undefined
+					} else {
+						flowModule.suspend = {
+							required_events: 1,
+							timeout: 1800
+						}
+					}
+				}}
+				options={{
+					right: 'Suspend flow execution until events/approvals received'
+				}}
+			/>
 		</div>
 	</svelte:fragment>
 
-	<Toggle
-		checked={isSuspendEnabled}
-		on:change={() => {
-			if (isSuspendEnabled && flowModule.suspend != undefined) {
-				flowModule.suspend = undefined
-			} else {
-				flowModule.suspend = {
-					required_events: 1,
-					timeout: 1800
-				}
-			}
-		}}
-		options={{
-			right: 'Suspend flow execution until events/approvals received'
-		}}
-	/>
-
 	<div class="overflow-x-auto scrollbar-hidden">
 		<Tabs bind:selected={suspendTabSelected}>
 			<Tab size="xs" value="core" disabled={!isSuspendEnabled}>
@@ -179,46 +181,84 @@ $: {
 			{/if}
 		</div>
 	{:else}
-		<div class="flex flex-col mt-4 gap-4">
-			{#if flowModule.suspend}
-				{#if emptyString($enterpriseLicense)}
-					<Alert type="warning" title="Adding a form to the approval page is an EE feature" />
-				{/if}
+		<div class="grid grid-cols-4 mt-4 gap-8">
+			<div class="col-span-2">
+				{#if flowModule?.suspend?.resume_form}
+					<EditableSchemaDrawer
+						bind:schema={flowModule.suspend.resume_form.schema}
+						on:change={(e) => {
+							const schema = e.detail
 
-				<div class="flex gap-4">
-					<Toggle
-						checked={Boolean(flowModule.suspend.resume_form)}
-						options={{
-							right: 'Add a form to the approval page'
+							// If the schema is empty, remove the form
+							if (Object.keys(schema?.properties ?? {}).length === 0) {
+								tick().then(() => {
+									if (!flowModule.suspend) return
+									flowModule.suspend.resume_form = undefined
+								})
+							}
 						}}
-						disabled={emptyString($enterpriseLicense)}
-						on:change={(e) => {
-							if (flowModule.suspend) {
-								if (e.detail) {
+						{jsonView}
+					/>
+				{:else if emptyString($enterpriseLicense)}
+					<Alert type="warning" title="Adding a form to the approval page is an EE feature" />
+				{:else}
+					<div class="flex flex-col items-end mb-2 w-full">
+						<Toggle
+							checked={false}
+							label="JSON View"
+							size="xs"
+							options={{
+								right: 'JSON Editor',
+								rightTooltip:
+									'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
+							}}
+							lightMode
+							on:change={() => {
+								if (flowModule.suspend) {
 									flowModule.suspend.resume_form = {
 										schema: emptySchema()
 									}
-								} else {
-									flowModule.suspend.resume_form = undefined
+								}
+								jsonView = true
+							}}
+						/>
+					</div>
+					<AddProperty
+						on:change={(e) => {
+							jsonView = false
+							if (flowModule.suspend) {
+								flowModule.suspend.resume_form = {
+									schema: e.detail
 								}
 							}
 						}}
+						schema={{}}
 					/>
-					<div class="flex">
-						<SuspendDrawer text="Default args & Dynamic enums help" />
+				{/if}
+			</div>
+			<div class="col-span-2 flex flex-col gap-4">
+				{#if flowModule.suspend}
+					{#if emptyString($enterpriseLicense)}
+						<Alert type="warning" title="Adding a form to the approval page is an EE feature" />
+					{/if}
+
+					<div class="flex flex-col gap-2">
+						<div class="flex">
+							<SuspendDrawer text="Default args & Dynamic enums help" />
+						</div>
 					</div>
-				</div>
-			{/if}
-			{#if flowModule.suspend?.resume_form}
-				<Toggle
-					bind:checked={flowModule.suspend.hide_cancel}
-					size="xs"
-					options={{
-						right: 'Hide cancel button on approval page'
-					}}
-				/>
-				<SchemaEditor bind:schema={flowModule.suspend.resume_form.schema} />
-			{/if}
+				{/if}
+				{#if flowModule.suspend}
+					<Toggle
+						bind:checked={flowModule.suspend.hide_cancel}
+						size="xs"
+						options={{
+							right: 'Hide cancel button on approval page'
+						}}
+						disabled={!Boolean(flowModule?.suspend?.resume_form)}
+					/>
+				{/if}
+			</div>
 		</div>
 	{/if}
 </Section>

package/package/components/flows/content/FlowModuleWrapper.svelte

@@ -11,10 +11,11 @@ import FlowInputsFlow from './FlowInputsFlow.svelte';
 import FlowBranchesAllWrapper from './FlowBranchesAllWrapper.svelte';
 import FlowBranchesOneWrapper from './FlowBranchesOneWrapper.svelte';
 import FlowWhileLoop from './FlowWhileLoop.svelte';
+import { initRequiredInputFilled } from '../utils';
 export let flowModule;
 export let noEditor = false;
 export let enableAi = false;
-const { selectedId, schedule, flowStateStore } = getContext('FlowEditorContext');
+const { selectedId, schedule, flowStateStore, flowInputsStore } = getContext('FlowEditorContext');
 let scriptKind = 'script';
 let scriptTemplate = 'script';
 // These pointers are used to easily access previewArgs of parent module, and previous module
@@ -39,6 +40,11 @@ async function createModuleFromScript(path, summary, kind, hash) {
     }
     flowModule = module;
     $flowStateStore[module.id] = state;
+    if ($flowInputsStore) {
+        $flowInputsStore[module?.id] = {
+            requiredInputsFilled: initRequiredInputFilled(module?.value, $flowStateStore[module?.id]?.schema)
+        };
+    }
 }
 </script>
 
@@ -112,6 +118,15 @@ async function createModuleFromScript(path, summary, kind, hash) {
 
 					flowModule = module
 					$flowStateStore[module.id] = state
+
+					if ($flowInputsStore) {
+						$flowInputsStore[module.id] = {
+							requiredInputsFilled: initRequiredInputFilled(
+								module.value,
+								$flowStateStore[module.id].schema
+							)
+						}
+					}
 				}}
 				failureModule={$selectedId === 'failure'}
 			/>

package/package/components/flows/content/FlowSchedules.svelte

@@ -8,6 +8,7 @@ import ScheduleEditor from '../../ScheduleEditor.svelte';
 import { ScheduleService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { Calendar } from 'lucide-svelte';
+import Label from '../../Label.svelte';
 const { schedule, flowStore, initialPath } = getContext('FlowEditorContext');
 let schedules = undefined;
 async function loadSchedules() {
@@ -26,15 +27,17 @@ let scheduleEditor;
 $: initialPath && loadSchedules();
 </script>
 
-<div class="w-full py-2">
+<div class="w-full flex flex-col gap-4 mb-4">
 	<!-- svelte-ignore a11y-autofocus -->
-	<input
-		autofocus
-		type="text"
-		placeholder="Schedule summary"
-		class="text-sm w-full font-semibold mb-4"
-		bind:value={$schedule.summary}
-	/>
+	<Label label="Summary">
+		<input
+			autofocus
+			type="text"
+			placeholder="Short summary to be displayed when listed"
+			class="text-sm w-full"
+			bind:value={$schedule.summary}
+		/>
+	</Label>
 </div>
 
 <CronInput bind:schedule={$schedule.cron} bind:timezone={$schedule.timezone} />

package/package/components/flows/content/ScriptEditorDrawer.svelte

@@ -7,7 +7,6 @@ import { inferArgs } from '../../../infer';
 import { workspaceStore } from '../../../stores';
 import { Loader2, Save, DiffIcon } from 'lucide-svelte';
 import { cleanValueProperties, emptySchema, orderedJsonStringify, sendUserToast } from '../../../utils';
-import { cloneDeep } from 'lodash';
 import { createEventDispatcher } from 'svelte';
 import { fade } from 'svelte/transition';
 let scriptEditorDrawer;
@@ -19,7 +18,7 @@ export async function openDrawer(hash, cb) {
         workspace: $workspaceStore,
         hash
     });
-    savedScript = cloneDeep(script);
+    savedScript = structuredClone(script);
     callback = cb;
 }
 let callback = undefined;
@@ -48,7 +47,7 @@ async function saveScript() {
                     lock: undefined
                 }
             });
-            savedScript = cloneDeep(script);
+            savedScript = structuredClone(script);
             callback?.();
         }
         catch (error) {
@@ -186,7 +185,7 @@ async function checkForUnsavedChanges() {
 						button: {
 							text: 'Restore to saved',
 							onClick: () => {
-								script = cloneDeep(savedScript)
+								script = structuredClone(savedScript)
 								diffDrawer.closeDrawer()
 							}
 						}

package/package/components/flows/flowStateUtils.js

@@ -16,7 +16,10 @@ export async function loadFlowModuleState(flowModule) {
             flowModule.value.type == 'flow') {
             flowModule.value.input_transforms = input_transforms;
         }
-        return { schema, previewResult: NEVER_TESTED_THIS_FAR };
+        return {
+            schema,
+            previewResult: NEVER_TESTED_THIS_FAR
+        };
     }
     catch (e) {
         console.debug(e);