windmill-components 1.339.2 → 1.352.0

package/package/components/EditableSchemaForm.svelte

@@ -1,41 +1,42 @@
 <script>import { VariableService } from '../gen';
 import { workspaceStore } from '../stores';
-import ArgInput from './ArgInput.svelte';
 import { Button } from './common';
 import ItemPicker from './ItemPicker.svelte';
 import VariableEditor from './VariableEditor.svelte';
-import { getResourceTypes } from './resourceTypesStore';
-import { Plus } from 'lucide-svelte';
-import { flip } from 'svelte/animate';
+import { Pen, Plus, X } from 'lucide-svelte';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import { twMerge } from 'tailwind-merge';
+import FlowPropertyEditor from './schema/FlowPropertyEditor.svelte';
+import PropertyEditor from './schema/PropertyEditor.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
+import { createEventDispatcher } from 'svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import Label from './Label.svelte';
+import { sendUserToast } from '../toast';
+import Toggle from './Toggle.svelte';
+import { emptyString } from '../utils';
+import Popup from './common/popup/Popup.svelte';
+import SchemaFormDnd from './schema/SchemaFormDND.svelte';
+import { deepEqual } from 'fast-equals';
 export let schema;
 export let schemaSkippedValues = [];
-export let schemaFieldTooltip = {};
 export let args = {};
-export let autofocus = false;
 export let shouldHideNoInputs = false;
-export let compact = false;
 export let noVariablePicker = false;
 export let flexWrap = false;
-export let noDelete = false;
-export let prettifyHeader = false;
-export let disablePortal = false;
-const moveAnimationDuration = 1000;
-function changePosition(i, up) {
-    const entries = Object.entries(schema.properties);
-    var element = entries[i];
-    entries.splice(i, 1);
-    entries.splice(up ? i - 1 : i + 1, 0, element);
-    schema.properties = Object.fromEntries(entries);
-    syncOrders();
-}
-function syncOrders() {
-    if (schema) {
-        schema.order = Object.keys(schema.properties ?? {});
-    }
-}
+export let uiOnly = false;
+export let isFlowInput = false;
+export let noPreview = false;
+export let offset = 48 + 31 + 31 + 16 + 1;
+export let jsonEnabled = true;
+export let isAppInput = false;
+export let lightweightMode = false;
+export let displayWebhookWarning = false;
+export let dndType = undefined;
+const dispatch = createEventDispatcher();
 let clazz = '';
 export { clazz as class };
-let inputCheck = {};
 $: if (args == undefined || typeof args !== 'object') {
     args = {};
 }
@@ -43,16 +44,8 @@ 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;
-        }
-    });
-    args = nargs;
-}
-function removeExtraKey() {
-    const nargs = {};
-    Object.keys(args ?? {}).forEach((key) => {
-        if (keys.includes(key)) {
-            nargs[key] = args[key];
+            let value = schema?.properties[key].default;
+            nargs[key] = value === 'object' ? JSON.parse(JSON.stringify(value)) : value;
         }
     });
     args = nargs;
@@ -60,85 +53,436 @@ function removeExtraKey() {
 let pickForField;
 let itemPicker = undefined;
 let variableEditor = undefined;
-let keys = [];
-$: {
-    let lkeys = Object.keys(schema?.properties ?? {});
-    if (schema?.properties && JSON.stringify(lkeys) != JSON.stringify(keys)) {
-        keys = lkeys;
-        if (!noDelete) {
-            removeExtraKey();
+let keys = Array.isArray(schema?.order)
+    ? [...schema.order]
+    : Object.keys(schema?.properties ?? {}) ?? Object.keys(schema?.properties ?? {});
+$: schema && onSchemaChange();
+function alignOrderWithProperties(schema) {
+    if (schema.order == undefined && !Array.isArray(schema.order)) {
+        schema.order = [];
+    }
+    let norder = [...schema.order];
+    let properties = Object.keys(schema?.properties ?? {});
+    let index = 0;
+    let hasChanged = false;
+    for (let k of properties) {
+        if (schema.properties[k].type === 'object' && schema.properties[k].properties) {
+            hasChanged = hasChanged || alignOrderWithProperties(schema.properties[k]);
+        }
+        if (!norder.includes(k)) {
+            console.log('adding', k, index);
+            norder = [...norder.slice(0, index), k, ...norder.slice(index)];
+        }
+        index += 1;
+    }
+    norder = norder.filter((x) => properties.includes(x));
+    if (!deepEqual(schema.order, norder)) {
+        schema.order = norder;
+        return true;
+    }
+    return hasChanged;
+}
+function onSchemaChange() {
+    dispatch('change', schema);
+    if (alignOrderWithProperties(schema)) {
+        schema = schema;
+    }
+    let lkeys = schema?.order ?? Object.keys(schema?.properties ?? {});
+    if (schema?.properties && !deepEqual(lkeys, keys)) {
+        keys = [...lkeys];
+        schema = schema;
+        if (opened == undefined) {
+            opened = keys[0];
         }
     }
 }
-let resourceTypes = undefined;
-async function loadResourceTypes() {
-    resourceTypes = await getResourceTypes();
+let renderCount = 0;
+let opened = keys[0];
+let selected = '';
+export function openField(key) {
+    opened = key;
+}
+export function deleteField(key) {
+    delete args[key];
+    delete schema.properties[key];
+    if (schema.required?.includes(key)) {
+        schema.required = schema.required?.filter((x) => x !== key);
+    }
+    if (schema.order) {
+        schema.order = schema.order.filter((x) => x !== key);
+    }
+}
+$: if (opened && schema.properties[opened]) {
+    selected = opened
+        ? schema.properties[opened].type !== 'object'
+            ? schema.properties[opened].type
+            : schema.properties[opened].format === 'resource-s3_object'
+                ? 'S3'
+                : schema.properties[opened].oneOf && schema.properties[opened].oneOf.length >= 2
+                    ? 'oneOf'
+                    : 'object'
+        : '';
 }
-reorder();
-loadResourceTypes();
-function reorder() {
-    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];
+function renameProperty(oldName, key) {
+    const el = document.getElementById(key);
+    const newName = el.value;
+    if (oldName === newName) {
+        return;
+    }
+    if (Object.keys(schema.properties ?? {}).includes(newName)) {
+        sendUserToast('There is already an argument with this name', true);
+        // clear the input
+        el.value = oldName;
+    }
+    else {
+        args[newName] = args[oldName];
+        delete args[oldName];
+        schema.properties[newName] = schema.properties[oldName];
+        delete schema.properties[oldName];
+        if (schema.required?.includes(oldName)) {
+            schema.required = schema.required?.map((x) => (x === oldName ? newName : x));
+        }
+        // Replace the old name with the new name in the order array
+        if (schema.order) {
+            const index = schema.order.indexOf(oldName);
+            if (index !== -1) {
+                schema.order[index] = newName;
             }
-        });
-        Object.keys(schema.properties ?? {})
-            .filter((x) => !schema.order?.includes(x))
-            .forEach((x) => {
-            n[x] = schema.properties[x];
-        });
-        schema.properties = n;
+        }
+        opened = newName;
+        schema = schema;
+        sendUserToast('Argument renamed successfully');
     }
 }
+let jsonView = false;
+let schemaString = JSON.stringify(schema, null, '\t');
+let error = undefined;
+let editor = undefined;
 </script>
 
-<div class="w-full {clazz} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 ' : ''}">
-	{#if keys.length > 0}
-		{#each keys as argName, i (argName)}
-			<div animate:flip={{ duration: moveAnimationDuration }} class={'pb-6'}>
-				{#if !schemaSkippedValues.includes(argName) && Object.keys(schema?.properties ?? {}).includes(argName)}
-					{#if typeof args == 'object' && schema?.properties[argName]}
-						<ArgInput
-							{disablePortal}
-							{resourceTypes}
-							{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) ?? false}
-							bind:pattern={schema.properties[argName].pattern}
-							bind:valid={inputCheck[argName]}
-							defaultValue={schema.properties[argName].default}
-							bind:enum_={schema.properties[argName].enum}
-							bind:format={schema.properties[argName].format}
-							bind:contentEncoding={schema.properties[argName].contentEncoding}
-							bind:customErrorMessage={schema.properties[argName].customErrorMessage}
-							properties={schema.properties[argName].properties}
-							nestedRequired={schema.properties[argName].required}
-							bind:itemsType={schema.properties[argName].items}
-							editableSchema={{ i, total: keys.length }}
-							on:changePosition={(event) => changePosition(event.detail.i, event.detail.up)}
-							{compact}
-							{variableEditor}
-							{itemPicker}
-							bind:pickForField
-							bind:extra={schema.properties[argName]}
-							simpleTooltip={schemaFieldTooltip[argName]}
-							nullable={schema.properties[argName].nullable}
-							bind:title={schema.properties[argName].title}
-							bind:placeholder={schema.properties[argName].placeholder}
+<div style={offset ? `height: calc(100vh - ${offset}px);` : 'h-full'}>
+	<Splitpanes>
+		{#if !noPreview}
+			<Pane size={50} minSize={20}>
+				<div class="p-4">
+					{#key renderCount}
+						<SchemaFormDnd
+							{schema}
+							{dndType}
+							bind:args
+							on:click={(e) => {
+								opened = e.detail
+							}}
+							on:reorder={(e) => {
+								schema.order = e.detail
+							}}
+							on:change={() => {
+								schema = schema
+								dispatch('change', schema)
+							}}
+							{lightweightMode}
+							prettifyHeader={isAppInput}
+						/>
+					{/key}
+				</div>
+			</Pane>
+		{/if}
+		<Pane size={noPreview ? 100 : 50} minSize={noPreview ? 100 : 20}>
+			{#if jsonEnabled}
+				<div class="w-full p-2 flex justify-end">
+					<Toggle
+						bind:checked={jsonView}
+						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={() => {
+							schemaString = JSON.stringify(schema, null, '\t')
+							editor?.setCode(schemaString)
+						}}
+					/>
+				</div>
+			{/if}
+
+			{#if !jsonView}
+				<div class="w-full {clazz} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 ' : ''} divide-y">
+					{#if keys.length > 0}
+						{#each keys as argName, i (argName)}
+							<div>
+								<!-- svelte-ignore a11y-click-events-have-key-events -->
+								<!-- svelte-ignore a11y-no-static-element-interactions -->
+								<div
+									class={twMerge(
+										'w-full flex bg-gray-50 dark:bg-gray-800 px-4 py-1 justify-between items-center hover:bg-gray-100 cursor-pointer',
+										opened === argName ? 'bg-gray-100 hover:bg-gray-200' : ''
+									)}
+									on:click={() => {
+										if (opened === argName) {
+											opened = undefined
+										} else {
+											opened = argName
+										}
+									}}
+								>
+									<div class="flex flex-row gap-2">
+										{argName}
+										{#if !uiOnly}
+											<Popup
+												floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+												containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+												let:close
+											>
+												<svelte:fragment slot="button">
+													<Button
+														color="light"
+														size="xs2"
+														nonCaptureEvent
+														startIcon={{ icon: Pen }}
+														iconOnly
+													/>
+												</svelte:fragment>
+												<Label label="Name">
+													<div class="flex flex-col gap-2">
+														<input
+															type="text"
+															class="w-full !bg-surface"
+															value={argName}
+															id={argName + i}
+															on:keydown={(event) => {
+																if (event.key === 'Enter') {
+																	renameProperty(argName, argName + i)
+																	close(null)
+																}
+															}}
+														/>
+														<Button
+															variant="border"
+															color="light"
+															size="xs"
+															on:click={() => {
+																renameProperty(argName, argName + i)
+																close(null)
+															}}
+														>
+															Rename
+														</Button>
+													</div>
+												</Label>
+											</Popup>
+										{/if}
+									</div>
+
+									{#if schema.required?.includes(argName)}
+										<span class="text-red-500 text-xs"> Required </span>
+									{/if}
+
+									{#if !uiOnly}
+										<button
+											class="rounded-full p-1 text-gray-500 bg-white
+		duration-200 hover:bg-gray-600 focus:bg-gray-600 hover:text-white dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800"
+											aria-label="Clear"
+											on:click={() => {
+												dispatch('delete', argName)
+											}}
+										>
+											<X size={16} />
+										</button>
+									{/if}
+								</div>
+								{#if opened === argName}
+									<div class="p-4 border-t">
+										{#if !schemaSkippedValues.includes(argName) && Object.keys(schema?.properties ?? {}).includes(argName)}
+											{#if typeof args == 'object' && schema?.properties[argName]}
+												<PropertyEditor
+													bind:description={schema.properties[argName].description}
+													type={schema.properties[argName].type}
+													bind:oneOf={schema.properties[argName].oneOf}
+													bind:pattern={schema.properties[argName].pattern}
+													bind:enum_={schema.properties[argName].enum}
+													bind:format={schema.properties[argName].format}
+													bind:contentEncoding={schema.properties[argName].contentEncoding}
+													bind:customErrorMessage={schema.properties[argName].customErrorMessage}
+													bind:itemsType={schema.properties[argName].items}
+													bind:extra={schema.properties[argName]}
+													bind:title={schema.properties[argName].title}
+													bind:placeholder={schema.properties[argName].placeholder}
+													bind:properties={schema.properties[argName].properties}
+													bind:order={schema.properties[argName].order}
+													{isFlowInput}
+													{isAppInput}
+													on:change={() => {
+														schema = schema
+														dispatch('change', schema)
+													}}
+												>
+													<svelte:fragment slot="typeeditor">
+														{#if isFlowInput || isAppInput}
+															<Label label="Type">
+																<ToggleButtonGroup
+																	tabListClass="flex-wrap"
+																	class="h-auto"
+																	bind:selected
+																	on:selected={(e) => {
+																		const isS3 = e.detail == 'S3'
+																		const isOneOf = e.detail == 'oneOf'
+
+																		selected = e.detail
+
+																		const emptyProperty = {
+																			contentEncoding: undefined,
+																			enum_: undefined,
+																			pattern: undefined,
+																			default: undefined,
+																			min: undefined,
+																			max: undefined,
+																			currency: undefined,
+																			currencyLocale: undefined,
+																			multiselect: undefined,
+																			password: undefined,
+																			dateFormat: undefined,
+																			...(e.detail == 'array' ? { items: { type: 'string' } } : {}),
+																			showExpr: undefined,
+																			nullable: undefined,
+																			required: undefined
+																		}
+
+																		if (isS3) {
+																			schema.properties[argName] = {
+																				...emptyProperty,
+																				type: 'object',
+																				format: 'resource-s3_object'
+																			}
+																		} else if (isOneOf) {
+																			schema.properties[argName] = {
+																				...emptyProperty,
+																				type: 'object',
+																				oneOf: [
+																					{
+																						title: 'Option 1',
+																						type: 'object',
+																						properties: {
+																							label: {
+																								type: 'string',
+																								enum: ['Option 1']
+																							},
+																							property_1: {
+																								type: 'string'
+																							}
+																						}
+																					},
+																					{
+																						title: 'Option 2',
+																						type: 'object',
+																						properties: {
+																							label: {
+																								type: 'string',
+																								enum: ['Option 2']
+																							},
+																							property_2: {
+																								type: 'string'
+																							}
+																						}
+																					}
+																				]
+																			}
+																		} else {
+																			schema.properties[argName] = {
+																				...emptyProperty,
+																				format: undefined,
+																				type: e.detail
+																			}
+																		}
+																	}}
+																>
+																	{#each [['String', 'string'], ['Number', 'number'], ['Integer', 'integer'], ['Object', 'object'], ['OneOf', 'oneOf'], ['Array', 'array'], ['Boolean', 'boolean'], ['S3 Object', 'S3']] as x}
+																		<ToggleButton value={x[1]} label={x[0]} />
+																	{/each}
+																</ToggleButtonGroup>
+															</Label>
+														{/if}
+													</svelte:fragment>
+
+													{#if isFlowInput || isAppInput}
+														<FlowPropertyEditor
+															bind:defaultValue={schema.properties[argName].default}
+															{variableEditor}
+															{itemPicker}
+															{lightweightMode}
+															bind:nullable={schema.properties[argName].nullable}
+															type={schema.properties[argName].type}
+															bind:oneOf={schema.properties[argName].oneOf}
+															bind:format={schema.properties[argName].format}
+															contentEncoding={schema.properties[argName].contentEncoding}
+															required={schema.required?.includes(argName) ?? false}
+															pattern={schema.properties[argName].pattern}
+															password={schema.properties[argName].password}
+															propsNames={schema.properties[argName].propsNames}
+															bind:showExpr={schema.properties[argName].showExpr}
+															extra={schema.properties[argName]}
+															customErrorMessage={schema.properties[argName].customErrorMessage}
+															itemsType={schema.properties[argName].items}
+															bind:properties={schema.properties[argName].properties}
+															bind:order={schema.properties[argName].order}
+															bind:requiredProperty={schema.properties[argName].required}
+															{displayWebhookWarning}
+															on:requiredChange={(event) => {
+																if (event.detail.required) {
+																	schema.required = schema.required ?? []
+																	schema.required.push(argName)
+																} else {
+																	schema.required = schema.required?.filter((x) => x !== argName)
+																}
+															}}
+															on:schemaChange={() => {
+																renderCount++
+															}}
+														/>
+													{/if}
+												</PropertyEditor>
+											{/if}
+										{/if}
+									</div>
+								{/if}
+							</div>
+						{/each}
+					{:else if !shouldHideNoInputs}
+						<div class="text-secondary text-sm p-2">No inputs</div>
+					{/if}
+				</div>
+			{:else}
+				<div class="p-2">
+					<div class="border rounded h-full">
+						<SimpleEditor
+							bind:this={editor}
+							small
+							fixedOverflowWidgets={false}
+							on:change={() => {
+								try {
+									schema = JSON.parse(schemaString)
+									error = ''
+								} catch (err) {
+									error = err.message
+								}
+							}}
+							bind:code={schemaString}
+							lang="json"
+							autoHeight
+							automaticLayout
 						/>
+					</div>
+					{#if !emptyString(error)}
+						<div class="text-red-400 text-xs">{error}</div>
+					{:else}
+						<div><br /> </div>
 					{/if}
-				{/if}
-			</div>
-		{/each}
-	{:else if !shouldHideNoInputs}
-		<div class="text-secondary text-sm">No inputs</div>
-	{/if}
+				</div>
+			{/if}
+		</Pane>
+	</Splitpanes>
 </div>
 
 {#if !noVariablePicker}

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -4,20 +4,28 @@ declare const __propDef: {
     props: {
         schema: Schema | any;
         schemaSkippedValues?: string[] | undefined;
-        schemaFieldTooltip?: Record<string, string> | undefined;
         args?: Record<string, any> | undefined;
-        autofocus?: boolean | undefined;
         shouldHideNoInputs?: boolean | undefined;
-        compact?: boolean | undefined;
         noVariablePicker?: boolean | undefined;
         flexWrap?: boolean | undefined;
-        noDelete?: boolean | undefined;
-        prettifyHeader?: boolean | undefined;
-        disablePortal?: boolean | undefined;
+        uiOnly?: boolean | undefined;
+        isFlowInput?: boolean | undefined;
+        noPreview?: boolean | undefined;
+        offset?: number | undefined;
+        jsonEnabled?: boolean | undefined;
+        isAppInput?: boolean | undefined;
+        lightweightMode?: boolean | undefined;
+        displayWebhookWarning?: boolean | undefined;
+        dndType?: string | undefined;
         class?: string | undefined;
         setDefaults?: (() => void) | undefined;
+        openField?: ((key: string) => void) | undefined;
+        deleteField?: ((key: string) => void) | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+        delete: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
@@ -27,5 +35,7 @@ export type EditableSchemaFormEvents = typeof __propDef.events;
 export type EditableSchemaFormSlots = typeof __propDef.slots;
 export default class EditableSchemaForm extends SvelteComponent<EditableSchemaFormProps, EditableSchemaFormEvents, EditableSchemaFormSlots> {
     get setDefaults(): () => void;
+    get openField(): (key: string) => void;
+    get deleteField(): (key: string) => void;
 }
 export {};

package/package/components/Editor.svelte

@@ -14,6 +14,7 @@ import 'monaco-editor/esm/vs/basic-languages/php/php.contribution';
 import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
 import 'monaco-editor/esm/vs/basic-languages/css/css.contribution';
 import libStdContent from '../es6.d.ts.txt?raw';
+import domContent from '../dom.d.ts.txt?raw';
 import denoFetchContent from '../deno_fetch.d.ts.txt?raw';
 import processStdContent from '../process.d.ts.txt?raw';
 import windmillFetchContent from '../windmill_fetch.d.ts.txt?raw';
@@ -940,7 +941,8 @@ async function setTypescriptExtraLibs() {
         const stdLib = { content: libStdContent, filePath: 'es6.d.ts' };
         if (scriptLang == 'bun') {
             const processLib = { content: processStdContent, filePath: 'process.d.ts' };
-            languages.typescript.typescriptDefaults.setExtraLibs([stdLib, processLib]);
+            const domLib = { content: domContent, filePath: 'dom.d.ts' };
+            languages.typescript.typescriptDefaults.setExtraLibs([stdLib, domLib, processLib]);
         }
         else {
             const denoFetch = { content: denoFetchContent, filePath: 'deno_fetch.d.ts' };

package/package/components/EditorBar.svelte

@@ -4,7 +4,6 @@
 <script>import { ResourceService, VariableService } from '../gen';
 import { workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
-import ResourceEditor from './ResourceEditor.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import Button from './common/button/Button.svelte';
 import HighlightCode from './HighlightCode.svelte';
@@ -27,6 +26,7 @@ import ScriptGen from './copilot/ScriptGen.svelte';
 import { getResetCode } from '../script_helpers';
 import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte';
 import Popover from './Popover.svelte';
+import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
@@ -470,7 +470,7 @@ $res = json_decode(curl_exec($ch));`)
 			await ResourceService.listResourceType({ workspace: $workspaceStore ?? 'NO_W' })}
 	/>
 {/if}
-<ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
+<ResourceEditorDrawer bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
 
 <div class="flex justify-between items-center overflow-y-auto w-full p-0.5">