windmill-components 1.89.1 → 1.103.1

package/package/components/RunForm.svelte

@@ -1,7 +1,5 @@
 <script>import { defaultIfEmptyString, displayDaysAgo, emptyString, getToday, truncateHash } from '../utils';
-import { slide } from 'svelte/transition';
 import { runFormStore, userStore } from '../stores';
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import CliHelpBox from './CliHelpBox.svelte';
 import { Badge, Button } from './common';
 import InlineCodeCopy from './InlineCodeCopy.svelte';
@@ -31,14 +29,12 @@ export function run() {
     runAction(scheduledForStr, args, invisible_to_owner);
 }
 export let isValid = true;
-let viewOptions = false;
-let viewCliOptions = false;
 let scheduledForStr;
 let invisible_to_owner;
 $: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '${JSON.stringify(args)}'`;
 </script>
 
-<div class="max-w-6xl">
+<div class="max-w-3xl">
 	{#if detailed}
 		{#if runnable}
 			<div class="flex flex-row flex-wrap justify-between gap-4">
@@ -95,55 +91,63 @@ $: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '$
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
 			<div class="text-sm p-4">No arguments</div>
 		{:else}
-			<SchemaForm {noVariablePicker} {autofocus} schema={runnable.schema} bind:isValid bind:args />
+			<SchemaForm
+				prettifyHeader
+				{noVariablePicker}
+				{autofocus}
+				schema={runnable.schema}
+				bind:isValid
+				bind:args
+			/>
 		{/if}
 	{:else}
-		<div class="text-xs text-gray-600">No schema</div>
+		<div class="text-xs text-gray-600">No arguments</div>
 	{/if}
 	{#if schedulable}
 		<div class="mt-10" />
-		<CollapseLink text="Advanced">
+		<div class="flex gap-2 items-start flex-wrap justify-between mt-2 md:mt-6 mb-6">
+			<div class="flex-row-reverse flex grow">
+				<Button
+					{loading}
+					color="dark"
+					btnClasses="!px-6 !py-1"
+					disabled={!isValid}
+					on:click={() => runAction(scheduledForStr, args, invisible_to_owner)}
+				>
+					{scheduledForStr ? 'Schedule to run later' : buttonText}
+				</Button>
+			</div>
+		</div>
+		<CollapseLink small text="Advanced">
 			<div class="flex flex-col gap-4 mt-2 border p-2">
 				<div class="flex flex-col gap-2">
 					{#if SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER}
-					<div class="flex">
-						<Button
-							color="light"
-							size="sm"
-							endIcon={{ icon: viewOptions ? faChevronUp : faChevronDown }}
-							on:click={() => (viewOptions = !viewOptions)}
-						>
-							Schedule to run later
-						</Button>
-					</div>
-					{/if}
-					{#if viewOptions}
-						<div transition:slide|local class="mt-6">
-							<div class="border rounded-md p-3 pt-4">
-								<div class="flex flex-row items-end">
-									<div class="w-max md:w-2/3 mt-2 mb-1">
-										<label for="run-time" />
-										<input
-											class="inline-block"
-											type="datetime-local"
-											id="run-time"
-											name="run-scheduled-time"
-											bind:value={scheduledForStr}
-											min={getToday().toISOString().slice(0, 16)}
-										/>
-									</div>
-									<Button
-										variant="border"
-										color="blue"
-										size="sm"
-										btnClasses="mx-2 mb-1"
-										on:click={() => {
-											scheduledForStr = undefined
-										}}
-									>
-										Clear
-									</Button>
+						<div class="border rounded-md p-3 pt-4">
+							<div class="px-2 font-semibold text-sm">Schedule to run later</div>
+
+							<div class="flex flex-row items-end">
+								<div class="w-max md:w-2/3 mt-2 mb-1">
+									<label for="run-time" />
+									<input
+										class="inline-block"
+										type="datetime-local"
+										id="run-time"
+										name="run-scheduled-time"
+										bind:value={scheduledForStr}
+										min={getToday().toISOString().slice(0, 16)}
+									/>
 								</div>
+								<Button
+									variant="border"
+									color="blue"
+									size="sm"
+									btnClasses="mx-2 mb-1"
+									on:click={() => {
+										scheduledForStr = undefined
+									}}
+								>
+									Clear
+								</Button>
 							</div>
 						</div>
 					{/if}
@@ -163,18 +167,6 @@ $: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '$
 				{/if}
 			</div>
 		</CollapseLink>
-		<div class="flex gap-2 items-start flex-wrap justify-between mt-2 md:mt-6 mb-6">
-			<div class="flex-row-reverse flex grow">
-				<Button
-					{loading}
-					btnClasses="!px-6 !py-1"
-					disabled={!isValid}
-					on:click={() => runAction(scheduledForStr, args, invisible_to_owner)}
-				>
-					{scheduledForStr ? 'Schedule to run later' : buttonText}
-				</Button>
-			</div>
-		</div>
 	{:else if !topButton}
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
@@ -187,25 +179,15 @@ $: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '$
 
 	{#if viewCliRun}
 		<div>
-			<div class="my-20" />
+			<div class="mt-4" />
 			{#if SCRIPT_VIEW_SHOW_RUN_FROM_CLI}
-			<div class="flex">
-				<Button
-					color="light"
-					size="xs"
-					endIcon={{ icon: viewCliOptions ? faChevronUp : faChevronDown }}
-					on:click={() => (viewCliOptions = !viewCliOptions)}
-				>
-					Run it from the CLI
-				</Button>
-			</div>
-			{/if}
-			{#if viewCliOptions}
-				<div transition:slide|local class="mt-2 px-4 pt-2">
+				<CollapseLink small text="Run it from CLI">
+					<div class="mt-2" />
 					<InlineCodeCopy content={cliCommand} />
 					<CliHelpBox />
-				</div>
+				</CollapseLink>
 			{/if}
+			<div class="mb-20" />
 		</div>
 	{/if}
 </div>

package/package/components/SavedInputs.svelte

@@ -12,7 +12,7 @@ import Tooltip from './Tooltip.svelte';
 export let scriptHash = null;
 export let scriptPath = null;
 export let flowPath = null;
-let runnableId = scriptHash || scriptPath || flowPath || undefined;
+let runnableId = scriptPath || flowPath || undefined;
 let runnableType = scriptHash
     ? RunnableType.SCRIPT_HASH
     : scriptPath
@@ -124,7 +124,7 @@ const selectArgs = (selected_args) => {
 				<div class="w-full flex justify-between items-center gap-4 flex-wrap">
 					<span class="text-sm font-extrabold flex-shrink-0"
 						>Saved Inputs <Tooltip
-							>Shared tooltips are available to anyone with access to the script</Tooltip
+							>Shared inputs are available to anyone with access to the script</Tooltip
 						></span
 					>
 					<Button
@@ -197,7 +197,7 @@ const selectArgs = (selected_args) => {
 												size="xs"
 												variant="border"
 												spacingSize="xs2"
-												btnClasses={'group-hover:block hidden'}
+												btnClasses={'group-hover:block hidden -my-2'}
 												on:click={(e) => {
 													e.stopPropagation()
 													i.isEditing = !i.isEditing
@@ -214,7 +214,7 @@ const selectArgs = (selected_args) => {
 												size="xs"
 												spacingSize="xs2"
 												variant="border"
-												btnClasses={i.isEditing ? 'block' : 'group-hover:block hidden'}
+												btnClasses={i.isEditing ? 'block' : 'group-hover:block hidden -my-2'}
 												on:click={() => deleteInput(i)}
 											>
 												<X class="w-4 h-4" />

package/package/components/ScheduleEditor.svelte

@@ -1,11 +1,3 @@
-<script context="module">
-	export function load() {
-		return {
-			stuff: { title: 'New Schedule' }
-		}
-	}
-</script>
-
 <script>import { Alert, Button } from './common';
 import Drawer from './common/drawer/Drawer.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
@@ -19,7 +11,7 @@ import Tooltip from './Tooltip.svelte';
 import { FlowService, ScheduleService, Script, ScriptService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
 import { canWrite, emptyString, formatCron, sendUserToast } from '../utils';
-import { faSave } from '@fortawesome/free-solid-svg-icons';
+import { faList, faSave } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 let initialPath = '';
 let edit = true;
@@ -137,12 +129,23 @@ let drawer;
 
 <Drawer size="900px" bind:this={drawer}>
 	<DrawerContent
-		title={edit ? `Edit ${initialPath}` : 'New schedule'}
+		title={edit ? `Edit schedule ${initialPath}` : 'New schedule'}
 		on:close={drawer.closeDrawer}
 	>
 		<svelte:fragment slot="actions">
 			{#if edit}
 				<div class="mr-8">
+					<Button
+						size="sm"
+						variant="border"
+						startIcon={{ icon: faList }}
+						disabled={!allowSchedule || pathError != '' || emptyString(script_path)}
+						href={`/runs/${script_path}`}
+					>
+						View Runs
+					</Button>
+				</div>
+				<div class="mr-8 center-center -mt-2">
 					<Toggle
 						disabled={!can_write}
 						checked={enabled}

package/package/components/ScheduleEditor.svelte.d.ts

@@ -1,9 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-export declare function load(): {
-    stuff: {
-        title: string;
-    };
-};
 declare const __propDef: {
     props: {
         openEdit?: ((ePath: string, isFlow: boolean) => void) | undefined;

package/package/components/SchemaEditor.svelte

@@ -1,16 +1,19 @@
 <script>import { emptySchema, emptyString, sendUserToast } from '../utils';
-import { faPen, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { Button } from './common';
 import { createEventDispatcher } from 'svelte';
-import SchemaEditorProperty from './SchemaEditorProperty.svelte';
 import SchemaModal, { DEFAULT_PROPERTY, schemaToModal } from './SchemaModal.svelte';
+import PropertyRow from './PropertyRow.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import TableCustom from './TableCustom.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import { flip } from 'svelte/animate';
 import Portal from 'svelte-portal';
+export let isFlowInput = false;
 const dispatch = createEventDispatcher();
+export let lightMode = false;
+const moveAnimationDuration = 300;
 export let schema = emptySchema();
 if (!schema) {
     schema = emptySchema();
@@ -74,7 +77,7 @@ function handleAddOrEditArgument() {
             }
         }
         if (editing && oldArgName && oldArgName !== modalProperty.name) {
-            handleDeleteArgument(oldArgName);
+            handleDeleteArgument([oldArgName]);
         }
         modalProperty = Object.assign({}, DEFAULT_PROPERTY);
         editing = false;
@@ -85,6 +88,9 @@ function handleAddOrEditArgument() {
     schemaString = JSON.stringify(schema, null, '\t');
     dispatch('change', schema);
 }
+function handleStartEditEvent(event) {
+    startEditArgument(event.detail);
+}
 function startEditArgument(argName) {
     argError = '';
     if (Object.keys(schema.properties).includes(argName)) {
@@ -97,11 +103,26 @@ function startEditArgument(argName) {
         sendUserToast(`This argument does not exist and can't be edited`, true);
     }
 }
-function handleDeleteArgument(argName) {
+function handleDeleteEvent(event) {
+    handleDeleteArgument(event.detail);
+}
+function handleDeleteArgument(argPath) {
     try {
-        if (Object.keys(schema.properties).includes(argName)) {
-            delete schema.properties[argName];
-            schema.required = schema.required.filter((arg) => arg !== argName);
+        let modifiedObject = schema;
+        let modifiedProperties = modifiedObject.properties;
+        let argName = argPath.pop();
+        argPath.forEach((property) => {
+            if (Object.keys(modifiedProperties).includes(property)) {
+                modifiedObject = modifiedProperties[property];
+                modifiedProperties = modifiedObject.properties;
+            }
+            else {
+                throw Error('Nested argument not found!');
+            }
+        });
+        if (Object.keys(modifiedProperties).includes(argName)) {
+            delete modifiedProperties[argName];
+            modifiedObject.required = schema.required.filter((arg) => arg !== argName);
             schema = schema;
             schemaString = JSON.stringify(schema, null, '\t');
             dispatch('change', schema);
@@ -126,11 +147,14 @@ function switchTab() {
         viewJsonSchema = true;
     }
 }
+function handleChangePositionEvent(event) {
+    changePosition(event.detail.i, event.detail.up);
+}
 function changePosition(i, up) {
     isAnimated = true;
     setTimeout(() => {
         isAnimated = false;
-    }, 500);
+    }, moveAnimationDuration);
     const entries = Object.entries(schema.properties);
     var element = entries[i];
     entries.splice(i, 1);
@@ -139,6 +163,39 @@ function changePosition(i, up) {
 }
 let isAnimated = false;
 let error = '';
+function schemaPropertiesToDisplay(schema) {
+    return propertiesToDisplay(schema.properties, schema.required, []);
+}
+function propertiesToDisplay(properties, required, path) {
+    return Object.entries(properties)
+        .map(([name, property], index) => {
+        const isRequired = required.includes(name);
+        const displayInfo = {
+            property: property,
+            name: name,
+            isRequired: isRequired,
+            path: path,
+            index: index,
+            propertiesNumber: Object.entries(properties).length
+        };
+        if (property.type === 'object') {
+            const newPath = [...path, name];
+            return [
+                displayInfo,
+                ...propertiesToDisplay(property.properties || {}, property.required || [], newPath)
+            ];
+        }
+        else {
+            return [displayInfo];
+        }
+    })
+        .flat();
+}
+/* Small hash function to generate a unique key for each property */
+function displayInfoKey(displayInfo) {
+    const pathLengthString = displayInfo.path.length.toString();
+    return pathLengthString + [...displayInfo.path, displayInfo.name].join(pathLengthString);
+}
 </script>
 
 <div class="flex flex-col">
@@ -184,61 +241,23 @@ let error = '';
 						<tr slot="header-row">
 							<th>Name</th>
 							<th>Type</th>
-							<th>Description</th>
-							<th>Default</th>
-							<th>Required</th>
+							{#if !lightMode}
+								<th>Default</th>
+								<th>Description</th>
+							{/if}
 							<th />
 						</tr>
 						<tbody slot="body">
-							{#each Object.entries(schema.properties) as [name, property], i (name)}
-								<tr animate:flip>
-									<td class="font-bold">{name}</td>
-									<td>
-										<SchemaEditorProperty {property} />
-									</td>
-									<td>{property.description ?? ''}</td>
-									<td>{property.default ? JSON.stringify(property.default) : ''}</td>
-									<td
-										>{#if schema.required.includes(name)}
-											<span class="text-red-600 font-bold text-lg">*</span>
-										{/if}</td
-									>
-									<td class="justify-end flex">
-										{#if i > 0}
-											<button
-												on:click={() => changePosition(i, true)}
-												class="text-lg mr-2 {isAnimated ? 'invisible' : ''}"
-											>
-												&uparrow;</button
-											>
-										{/if}
-										{#if i < Object.keys(schema.properties).length - 1}
-											<button
-												on:click={() => changePosition(i, false)}
-												class="text-lg mr-2 {isAnimated ? 'invisible' : ''}">&downarrow;</button
-											>
-										{/if}
-
-										<Button
-											color="red"
-											variant="border"
-											btnClasses="mx-2"
-											size="sm"
-											startIcon={{ icon: faTrash }}
-											on:click={() => handleDeleteArgument(name)}
-										>
-											Delete
-										</Button>
-										<Button
-											color="light"
-											variant="border"
-											size="sm"
-											startIcon={{ icon: faPen }}
-											on:click={() => startEditArgument(name)}
-										>
-											Edit
-										</Button>
-									</td>
+							{#each schemaPropertiesToDisplay(schema) as displayInfo (displayInfoKey(displayInfo))}
+								<tr animate:flip={{ duration: moveAnimationDuration }}>
+									<PropertyRow
+										{displayInfo}
+										{isAnimated}
+										{lightMode}
+										on:startEditArgument={handleStartEditEvent}
+										on:deleteArgument={handleDeleteEvent}
+										on:changePosition={handleChangePositionEvent}
+									/>
 								</tr>
 							{/each}
 						</tbody>
@@ -273,6 +292,7 @@ let error = '';
 
 <Portal>
 	<SchemaModal
+		{isFlowInput}
 		bind:this={schemaModal}
 		bind:property={modalProperty}
 		bind:error={argError}

package/package/components/SchemaEditor.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
 declare const __propDef: {
     props: {
+        isFlowInput?: boolean | undefined;
+        lightMode?: boolean | undefined;
         schema?: Schema | undefined;
         getSchema?: (() => Schema) | undefined;
     };

package/package/components/SchemaForm.svelte

@@ -19,6 +19,7 @@ export let password = undefined;
 export let noVariablePicker = false;
 export let flexWrap = false;
 export let noDelete = false;
+export let prettifyHeader = false;
 let clazz = '';
 export { clazz as class };
 let inputCheck = {};
@@ -58,12 +59,13 @@ $: {
 					{#if typeof args == 'object' && schema?.properties[argName]}
 						{#if editableSchema}
 							<ArgInput
+								{prettifyHeader}
 								autofocus={i == 0 && autofocus}
 								label={argName}
 								bind:description={schema.properties[argName].description}
 								bind:value={args[argName]}
 								type={schema.properties[argName].type}
-								required={schema.required.includes(argName)}
+								required={schema.required?.includes(argName) ?? false}
 								bind:pattern={schema.properties[argName].pattern}
 								bind:valid={inputCheck[argName]}
 								defaultValue={schema.properties[argName].default}
@@ -83,6 +85,7 @@ $: {
 							/>
 						{:else}
 							<ArgInput
+								{prettifyHeader}
 								autofocus={i == 0 && autofocus}
 								label={argName}
 								description={schema.properties[argName].description}
@@ -125,6 +128,8 @@ $: {
 			}
 		}}
 		itemName="Variable"
+		tooltip="Variables are dynamic values that have a key associated to them and can be retrieved during the execution of a Script or Flow."
+		documentationLink="https://docs.windmill.dev/docs/core_concepts/variables_and_secrets"
 		extraField="path"
 		loadItems={async () =>
 			(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({

package/package/components/SchemaForm.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         noVariablePicker?: boolean | undefined;
         flexWrap?: boolean | undefined;
         noDelete?: boolean | undefined;
+        prettifyHeader?: boolean | undefined;
         class?: string | undefined;
     };
     events: {

package/package/components/SchemaModal.svelte

@@ -3,7 +3,7 @@ export function schemaToModal(schema, name, required) {
     return {
         name,
         selectedType: schema.type,
-        description: schema.description,
+        description: schema.description ?? '',
         pattern: schema.pattern,
         default: schema.default,
         contentEncoding: schema.contentEncoding,
@@ -25,7 +25,7 @@ import ArgInput from './ArgInput.svelte';
 import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import Required from './Required.svelte';
 import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
-import { Button } from './common';
+import { Alert, Button } from './common';
 import Toggle from './Toggle.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import Drawer from './common/drawer/Drawer.svelte';
@@ -33,6 +33,7 @@ export let property = DEFAULT_PROPERTY;
 export let error = '';
 export let editing = false;
 export let oldArgName = undefined;
+export let isFlowInput = false;
 let resource_type = undefined;
 const dispatch = createEventDispatcher();
 let drawer;
@@ -140,18 +141,28 @@ else {
 					</Button>
 				</div>
 			</div>
-			<div class="flex flex-row gap-x-4">
-				<ArgInput
-					label="Default"
-					bind:value={property.default}
-					type={property.selectedType}
-					pattern={property.pattern}
-				/>
-				<Toggle
-					options={{ right: 'Required' }}
-					class="mt-5 !justify-start"
-					bind:checked={property.required}
-				/>
+			<div>
+				<div class="flex flex-row gap-x-4">
+					<ArgInput
+						label="Default"
+						bind:value={property.default}
+						type={property.selectedType}
+						pattern={property.pattern}
+					/>
+					<Toggle
+						options={{ right: 'Required' }}
+						class="mt-5 !justify-start"
+						bind:checked={property.required}
+					/>
+				</div>
+				{#if isFlowInput}
+					<Alert type="info" title="Default not used by webhooks">
+						If this flow is triggered by a webhook, the default value will not replace a missing
+						value from the payload. It will only be used as the default value in the autogenerated
+						UI. We recommend using default values in the signature of the steps where this value is
+						used (using `x=default`) to have the desired behavior.</Alert
+					>
+				{/if}
 			</div>
 			{#if property.selectedType !== 'boolean'}
 				<div>

package/package/components/SchemaModal.svelte.d.ts

@@ -24,6 +24,7 @@ declare const __propDef: {
         error?: string | undefined;
         editing?: boolean | undefined;
         oldArgName?: string | undefined;
+        isFlowInput?: boolean | undefined;
         openDrawer?: (() => void) | undefined;
         closeDrawer?: (() => void) | undefined;
     };