windmill-components 1.339.2 → 1.352.0

package/package/components/SchemaForm.svelte

@@ -1,7 +1,6 @@
 <script>import { VariableService } from '../gen';
 import { workspaceStore } from '../stores';
 import { allTrue, computeShow } from '../utils';
-import ArgInput from './ArgInput.svelte';
 import { Button } from './common';
 import ItemPicker from './ItemPicker.svelte';
 import VariableEditor from './VariableEditor.svelte';
@@ -9,6 +8,12 @@ import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import { getResourceTypes } from './resourceTypesStore';
 import { Plus } from 'lucide-svelte';
+import ArgInput from './ArgInput.svelte';
+import { createEventDispatcher } from 'svelte';
+import LightweightArgInput from './LightweightArgInput.svelte';
+import { deepEqual } from 'fast-equals';
+import { dragHandleZone } from '@windmill-labs/svelte-dnd-action';
+import { flip } from 'svelte/animate';
 export let schema;
 export let schemaSkippedValues = [];
 export let schemaFieldTooltip = {};
@@ -29,8 +34,10 @@ export let disablePortal = false;
 export let showSchemaExplorer = false;
 export let showReset = false;
 export let onlyMaskPassword = false;
-let clazz = '';
-export { clazz as class };
+export let lightweightMode = false;
+export let dndConfig = undefined;
+export let items = undefined;
+const dispatch = createEventDispatcher();
 let inputCheck = {};
 $: if (args == undefined || typeof args !== 'object') {
     args = {};
@@ -39,12 +46,15 @@ export function setDefaults() {
     const nargs = {};
     Object.keys(schema?.properties ?? {}).forEach((key) => {
         if (schema?.properties[key].default != undefined && args[key] == undefined) {
-            nargs[key] = schema?.properties[key].default;
+            let value = schema?.properties[key].default;
+            nargs[key] = value === 'object' ? JSON.parse(JSON.stringify(value)) : value;
         }
     });
     args = nargs;
 }
-let keys = [];
+let keys = Array.isArray(schema?.order)
+    ? schema?.order
+    : Object.keys(schema?.properties ?? {});
 function removeExtraKey() {
     const nargs = {};
     Object.keys(args ?? {}).forEach((key) => {
@@ -57,15 +67,6 @@ function removeExtraKey() {
 let pickForField;
 let itemPicker = undefined;
 let variableEditor = undefined;
-$: {
-    let lkeys = Object.keys(schema?.properties ?? {});
-    if (schema?.properties && JSON.stringify(lkeys) != JSON.stringify(keys)) {
-        keys = lkeys;
-        if (!noDelete) {
-            removeExtraKey();
-        }
-    }
-}
 $: isValid = allTrue(inputCheck ?? {});
 let resourceTypes = undefined;
 async function loadResourceTypes() {
@@ -73,113 +74,201 @@ async function loadResourceTypes() {
 }
 loadResourceTypes();
 $: schema && reorder();
+function hasExtraKeys() {
+    return Object.keys(args ?? {}).some((x) => !keys.includes(x));
+}
 function reorder() {
-    if (schema?.order && Array.isArray(schema.order)) {
-        const n = {};
-        schema.order.forEach((x) => {
-            if (schema.properties && schema.properties[x] != undefined) {
+    dispatch('change');
+    let lkeys = Object.keys(schema?.properties ?? {});
+    if (!deepEqual(schema?.order, lkeys) || !deepEqual(keys, lkeys)) {
+        if (schema?.order && Array.isArray(schema.order)) {
+            const n = {};
+            schema.order.forEach((x) => {
+                if (schema.properties && schema.properties[x] != undefined) {
+                    n[x] = schema.properties[x];
+                }
+            });
+            Object.keys(schema.properties ?? {})
+                .filter((x) => !schema.order?.includes(x))
+                .forEach((x) => {
                 n[x] = schema.properties[x];
-            }
-        });
-        Object.keys(schema.properties ?? {})
-            .filter((x) => !schema.order?.includes(x))
-            .forEach((x) => {
-            n[x] = schema.properties[x];
-        });
-        schema.properties = n;
+            });
+            schema.properties = n;
+        }
         keys = Object.keys(schema.properties ?? {});
     }
+    if (!noDelete && hasExtraKeys()) {
+        removeExtraKey();
+    }
 }
+$: fields = items ?? keys.map((x) => ({ id: x, value: x }));
 </script>
 
 {#if showReset}
 	<div class="flex flex-row-reverse w-full">
-		<Button size="xs" color="light" on:click={() => setDefaults()}
-			>Reset args to runnable's defaults</Button
-		>
+		<Button size="xs" color="light" on:click={() => setDefaults()}>
+			Reset args to runnable's defaults
+		</Button>
 	</div>
 {/if}
-<div class="w-full {clazz} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 ' : ''}">
+
+<div
+	class="w-full {$$props.class} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 ' : ''}"
+	use:dragHandleZone={dndConfig ?? { items: [], dragDisabled: true }}
+	on:finalize
+	on:consider
+>
 	{#if keys.length > 0}
-		{#each keys as argName, i (argName)}
-			{#if !schemaSkippedValues.includes(argName) && Object.keys(schema?.properties ?? {}).includes(argName)}
-				<div>
-					{#if typeof args == 'object' && schema?.properties[argName]}
-						{#if computeShow(argName, schema?.properties[argName].showExpr, args)}
-							<ArgInput
-								{disablePortal}
-								{resourceTypes}
-								{prettifyHeader}
-								autofocus={i == 0 && autofocus ? true : null}
-								label={argName}
-								description={schema.properties[argName].description}
-								bind:value={args[argName]}
-								type={schema.properties[argName].type}
-								required={schema.required.includes(argName)}
-								pattern={schema.properties[argName].pattern}
-								bind:valid={inputCheck[argName]}
-								defaultValue={schema.properties[argName].default}
-								enum_={schema.properties[argName].enum}
-								format={schema.properties[argName].format}
-								contentEncoding={schema.properties[argName].contentEncoding}
-								customErrorMessage={schema.properties[argName].customErrorMessage}
-								properties={schema.properties[argName].properties}
-								nestedRequired={schema.properties[argName].required}
-								itemsType={schema.properties[argName].items}
-								disabled={disabledArgs.includes(argName) || disabled}
-								{compact}
-								{variableEditor}
-								{itemPicker}
-								bind:pickForField
-								password={linkedSecret == argName}
-								extra={schema.properties[argName]}
-								{showSchemaExplorer}
-								simpleTooltip={schemaFieldTooltip[argName]}
-								{onlyMaskPassword}
-								nullable={schema.properties[argName].nullable}
-								title={schema.properties[argName].title}
-								placeholder={schema.properties[argName].placeholder}
-							>
-								<svelte:fragment slot="actions">
-									{#if linkedSecretCandidates?.includes(argName)}
-										<div>
-											<ToggleButtonGroup
-												selected={linkedSecret == argName}
-												on:selected={(e) => {
-													if (e.detail) {
-														linkedSecret = argName
-													} else if (linkedSecret == argName) {
-														linkedSecret = undefined
-													}
-												}}
-											>
-												<ToggleButton
-													value={false}
-													size="sm"
-													label="Inlined"
-													tooltip="The value is inlined in the resource and thus has no special treatment."
-												/>
-												<ToggleButton
-													position="right"
-													value={true}
-													size="sm"
-													label="Secret"
-													tooltip="The value will be stored in a newly created linked secret variable at the same path. That variable can be permissioned differently, will be treated as a secret the UI, operators will not be able to load it and every access will generate a corresponding audit log."
-												/>
-											</ToggleButtonGroup>
-										</div>{/if}</svelte:fragment
-								>
-							</ArgInput>
+		{#each fields as item, i (item.id)}
+			{@const argName = item.value}
+			<div animate:flip={{ duration: 200 }}>
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				{#if !schemaSkippedValues.includes(argName) && Object.keys(schema?.properties ?? {}).includes(argName)}
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div
+						class="flex flex-row items-center bg-surface"
+						on:click={() => {
+							dispatch('click', argName)
+						}}
+					>
+						{#if typeof args == 'object' && schema?.properties[argName]}
+							{#if computeShow(argName, schema?.properties[argName].showExpr, args)}
+								{#if lightweightMode}
+									<LightweightArgInput
+										label={argName}
+										description={schema.properties[argName].description}
+										bind:value={args[argName]}
+										type={schema.properties[argName].type}
+										oneOf={schema.properties[argName].oneOf}
+										required={schema?.required?.includes(argName)}
+										pattern={schema.properties[argName].pattern}
+										bind:valid={inputCheck[argName]}
+										defaultValue={schema.properties[argName].default}
+										enum_={schema.properties[argName].enum}
+										format={schema.properties[argName].format}
+										contentEncoding={schema.properties[argName].contentEncoding}
+										customErrorMessage={schema.properties[argName].customErrorMessage}
+										bind:properties={schema.properties[argName].properties}
+										nestedRequired={schema.properties[argName]?.required}
+										itemsType={schema.properties[argName].items}
+										extra={schema.properties[argName]}
+										title={schema.properties[argName].title}
+										placeholder={schema.properties[argName].placeholder}
+									>
+										<svelte:fragment slot="actions">
+											<slot name="actions" />
+											{#if linkedSecretCandidates?.includes(argName)}
+												<div>
+													<ToggleButtonGroup
+														selected={linkedSecret == argName}
+														on:selected={(e) => {
+															if (e.detail) {
+																linkedSecret = argName
+															} else if (linkedSecret == argName) {
+																linkedSecret = undefined
+															}
+														}}
+													>
+														<ToggleButton
+															value={false}
+															size="sm"
+															label="Inlined"
+															tooltip="The value is inlined in the resource and thus has no special treatment."
+														/>
+														<ToggleButton
+															position="right"
+															value={true}
+															size="sm"
+															label="Secret"
+															tooltip="The value will be stored in a newly created linked secret variable at the same path. That variable can be permissioned differently, will be treated as a secret the UI, operators will not be able to load it and every access will generate a corresponding audit log."
+														/>
+													</ToggleButtonGroup>
+												</div>{/if}
+										</svelte:fragment>
+									</LightweightArgInput>
+								{:else}
+									<ArgInput
+										on:change={() => dispatch('change')}
+										{disablePortal}
+										{resourceTypes}
+										{prettifyHeader}
+										autofocus={i == 0 && autofocus ? true : null}
+										label={argName}
+										description={schema.properties[argName].description}
+										bind:value={args[argName]}
+										type={schema.properties[argName].type}
+										oneOf={schema.properties[argName].oneOf}
+										required={schema?.required?.includes(argName)}
+										pattern={schema.properties[argName].pattern}
+										bind:valid={inputCheck[argName]}
+										defaultValue={schema.properties[argName].default}
+										enum_={schema.properties[argName].enum}
+										format={schema.properties[argName].format}
+										contentEncoding={schema.properties[argName].contentEncoding}
+										customErrorMessage={schema.properties[argName].customErrorMessage}
+										bind:properties={schema.properties[argName].properties}
+										bind:order={schema.properties[argName].order}
+										nestedRequired={schema.properties[argName]?.required}
+										itemsType={schema.properties[argName].items}
+										disabled={disabledArgs.includes(argName) || disabled}
+										{compact}
+										{variableEditor}
+										{itemPicker}
+										bind:pickForField
+										password={linkedSecret == argName}
+										extra={schema.properties[argName]}
+										{showSchemaExplorer}
+										simpleTooltip={schemaFieldTooltip[argName]}
+										{onlyMaskPassword}
+										nullable={schema.properties[argName].nullable}
+										title={schema.properties[argName].title}
+										placeholder={schema.properties[argName].placeholder}
+										orderEditable={dndConfig != undefined}
+									>
+										<svelte:fragment slot="actions">
+											<slot name="actions" />
+											{#if linkedSecretCandidates?.includes(argName)}
+												<div>
+													<ToggleButtonGroup
+														selected={linkedSecret == argName}
+														on:selected={(e) => {
+															if (e.detail) {
+																linkedSecret = argName
+															} else if (linkedSecret == argName) {
+																linkedSecret = undefined
+															}
+														}}
+													>
+														<ToggleButton
+															value={false}
+															size="sm"
+															label="Inlined"
+															tooltip="The value is inlined in the resource and thus has no special treatment."
+														/>
+														<ToggleButton
+															position="right"
+															value={true}
+															size="sm"
+															label="Secret"
+															tooltip="The value will be stored in a newly created linked secret variable at the same path. That variable can be permissioned differently, will be treated as a secret the UI, operators will not be able to load it and every access will generate a corresponding audit log."
+														/>
+													</ToggleButtonGroup>
+												</div>{/if}</svelte:fragment
+										>
+									</ArgInput>
+								{/if}
+								<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+								<!-- svelte-ignore a11y-no-static-element-interactions -->
+							{/if}
 						{/if}
-					{/if}
-				</div>
-			{/if}
+					</div>
+				{/if}
+			</div>
 		{/each}
 	{:else if !shouldHideNoInputs}
 		<div class="text-secondary text-sm">No inputs</div>
 	{/if}
 </div>
-
 {#if !noVariablePicker}
 	<ItemPicker
 		bind:this={itemPicker}

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

@@ -1,7 +1,9 @@
 import { SvelteComponent } from "svelte";
 import type { Schema } from '../common';
+import { type Options as DndOptions } from '@windmill-labs/svelte-dnd-action';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         schema: Schema | any;
         schemaSkippedValues?: string[] | undefined;
         schemaFieldTooltip?: Record<string, string> | undefined;
@@ -22,13 +24,25 @@ declare const __propDef: {
         showSchemaExplorer?: boolean | undefined;
         showReset?: boolean | undefined;
         onlyMaskPassword?: boolean | undefined;
-        class?: string | undefined;
+        lightweightMode?: boolean | undefined;
+        dndConfig?: DndOptions | undefined;
+        items?: {
+            id: string;
+            value: string;
+        }[] | undefined;
         setDefaults?: (() => void) | undefined;
     };
     events: {
+        finalize: Event | ClipboardEvent | CompositionEvent | UIEvent | FocusEvent | InputEvent | SubmitEvent | FormDataEvent | KeyboardEvent | MouseEvent | DragEvent | TouchEvent | PointerEvent | WheelEvent | AnimationEvent | TransitionEvent | ErrorEvent | ProgressEvent<EventTarget> | SecurityPolicyViolationEvent;
+        consider: Event | ClipboardEvent | CompositionEvent | UIEvent | FocusEvent | InputEvent | SubmitEvent | FormDataEvent | KeyboardEvent | MouseEvent | DragEvent | TouchEvent | PointerEvent | WheelEvent | AnimationEvent | TransitionEvent | ErrorEvent | ProgressEvent<EventTarget> | SecurityPolicyViolationEvent;
+        click: CustomEvent<any>;
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        actions: {};
+    };
 };
 export type SchemaFormProps = typeof __propDef.props;
 export type SchemaFormEvents = typeof __propDef.events;

package/package/components/ScriptBuilder.svelte

@@ -22,7 +22,6 @@ import Toggle from './Toggle.svelte';
 import ScriptSchema from './ScriptSchema.svelte';
 import Section from './Section.svelte';
 import Label from './Label.svelte';
-import { cloneDeep } from 'lodash';
 import WorkerTagPicker from './WorkerTagPicker.svelte';
 import MetadataGen from './copilot/MetadataGen.svelte';
 import ScriptSchedules from './ScriptSchedules.svelte';
@@ -225,7 +224,7 @@ async function editScript(stay) {
         else if (enabled) {
             await createSchedule(script.path);
         }
-        savedScript = cloneDeep(script);
+        savedScript = structuredClone(script);
         if (!disableHistoryChange) {
             history.replaceState(history.state, '', `/scripts/edit/${script.path}`);
         }
@@ -324,9 +323,9 @@ async function saveDraft(forceSave = false) {
         });
         savedScript = {
             ...(initialPath == '' || savedScript?.draft_only
-                ? { ...cloneDeep(script), draft_only: true }
+                ? { ...structuredClone(script), draft_only: true }
                 : savedScript),
-            draft: cloneDeep(script)
+            draft: structuredClone(script)
         };
         if (initialPath == '' || (savedScript?.draft_only && script.path !== initialPath)) {
             initialPath = script.path;
@@ -387,7 +386,11 @@ let selectedTab = 'metadata';
 <slot />
 
 {#if !$userStore?.operator}
-	<Drawer placement="right" bind:open={metadataOpen} size="800px">
+	<Drawer
+		placement="right"
+		bind:open={metadataOpen}
+		size={selectedTab === 'ui' ? '1200px' : '800px'}
+	>
 		<DrawerContent noPadding title="Settings" on:close={() => (metadataOpen = false)}>
 			<!-- svelte-ignore a11y-autofocus -->
 			<Tabs bind:selected={selectedTab}>
@@ -404,7 +407,10 @@ let selectedTab = 'metadata';
 				</Tab>
 				<Tab value="schedule" active={$scheduleStore.enabled}>Schedule</Tab>
 				<svelte:fragment slot="content">
-					<div class="p-4">
+					<div
+						class={selectedTab === 'ui' ? 'p-0' : 'p-4'}
+						style={selectedTab === 'ui' ? `height: calc(100% - 32px);` : ''}
+					>
 						<TabContent value="metadata">
 							<div class="flex flex-col gap-8">
 								<Section label="Metadata">
@@ -896,8 +902,7 @@ let selectedTab = 'metadata';
 								{/if}
 							</div>
 						</TabContent>
-						<TabContent value="ui">
-							<div class="mt-4" />
+						<TabContent value="ui" class="h-full">
 							<ScriptSchema bind:schema={script.schema} />
 						</TabContent>
 						<TabContent value="schedule">

package/package/components/ScriptSchedules.svelte

@@ -7,6 +7,7 @@ import ScheduleEditor from './ScheduleEditor.svelte';
 import { ScheduleService } from '../gen';
 import { workspaceStore } from '../stores';
 import { Calendar } from 'lucide-svelte';
+import Label from './Label.svelte';
 export let initialPath;
 export let schema;
 export let schedule;
@@ -29,15 +30,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/ScriptSchema.svelte

@@ -1,27 +1,9 @@
-<script>import Tab from './common/tabs/Tab.svelte';
-import Tabs from './common/tabs/Tabs.svelte';
-import TabContent from './common/tabs/TabContent.svelte';
-import Highlight from 'svelte-highlight';
-import json from 'svelte-highlight/languages/json';
-import EditableSchemaForm from './EditableSchemaForm.svelte';
+<script>import EditableSchemaForm from './EditableSchemaForm.svelte';
 export let schema;
 export function setSchema(newSchema) {
     schema = newSchema;
 }
+const yOffset = 80;
 </script>
 
-<div class="w-full">
-	<Tabs selected="ui">
-		<Tab value="ui">Arguments</Tab>
-		<Tab value="jsonschema">JSON Schema</Tab>
-		<svelte:fragment slot="content">
-			<TabContent value="ui">
-				<div class="mt-4" />
-				<EditableSchemaForm bind:schema />
-			</TabContent>
-			<TabContent value="jsonschema">
-				<Highlight language={json} code={JSON.stringify(schema, null, 4)} />
-			</TabContent>
-		</svelte:fragment>
-	</Tabs>
-</div>
+<EditableSchemaForm bind:schema uiOnly offset={yOffset} />

package/package/components/ScriptVersionHistory.svelte

@@ -158,7 +158,7 @@ loadVersions();
 								</button>
 							{/if}
 						</span>
-						<FlowModuleScript path={scriptPath} hash={selectedVersion.script_hash} />
+						<FlowModuleScript showDate path={scriptPath} hash={selectedVersion.script_hash} />
 					</div>
 				{/key}
 			{:else}