windmill-components 1.22.42 → 1.28.3

package/components/ResourceTypePicker.svelte

@@ -5,6 +5,7 @@ import IconedResourceType from './IconedResourceType.svelte';
 let resources = [];
 export let value;
 export let notPickable = false;
+export let nonePickable = false;
 async function loadResources() {
     resources = await ResourceService.listResourceTypeNames({ workspace: $workspaceStore });
 }
@@ -17,9 +18,24 @@ $: {
 </script>
 
 <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
+	{#if nonePickable}
+		<button
+			class="px-4 h-8 text-center {undefined == value
+				? 'item-button-selected'
+				: notPickable
+				? 'item-button-disabled'
+				: 'item-button'}"
+			on:click={() => {
+				value = undefined
+				dispatch('click')
+			}}
+		>
+			None
+		</button>
+	{/if}
 	{#each resources as r}
 		<button
-			class="px-4 h-8 {r == value
+			class="px-4 h-8 text-center {r == value
 				? 'item-button-selected'
 				: notPickable
 				? 'item-button-disabled'
@@ -35,34 +51,6 @@ $: {
 </div>
 
 <style>
-	.item-button {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-    border-width: 1px;
-    border-radius: 0.125rem
-}
-	.item-button-selected {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-    border-width: 1px;
-    --tw-border-opacity: 1;
-    border-color: rgb(59 130 246 / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: rgb(239 246 255 / var(--tw-bg-opacity));
-    border-radius: 0.125rem
-}
-
-	.item-button-disabled {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-    border-width: 1px;
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-    --tw-text-opacity: 1;
-    color: rgb(209 213 219 / var(--tw-text-opacity));
-    border-radius: 0.125rem
-}
-
 	.selected:hover {
     border-radius: 0.375rem;
     border-width: 1px;

package/components/ResourceTypePicker.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         value: string | undefined;
         notPickable?: boolean | undefined;
+        nonePickable?: boolean | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/components/RunForm.svelte

@@ -1,11 +1,11 @@
 <script>import { page } from '$app/stores';
-import { getToday } from '../utils';
+import { decodeState, getToday } from '../utils';
 import { slide } from 'svelte/transition';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
-import Tooltip from './Tooltip.svelte';
 import SvelteMarkdown from 'svelte-markdown';
 import SchemaForm from './SchemaForm.svelte';
+import Tooltip from './Tooltip.svelte';
 export let runnable;
 export let runAction;
 export let buttonText = 'Run';
@@ -15,7 +15,7 @@ export let args = {};
 let isValid = true;
 let queryArgs = $page.url.searchParams.get('args');
 if (queryArgs) {
-    const parsed = JSON.parse(atob(queryArgs));
+    const parsed = decodeState(queryArgs);
     Object.entries(parsed).forEach(([k, v]) => {
         if (v == '<function call>') {
             parsed[k] = undefined;
@@ -52,17 +52,16 @@ let scheduledForStr;
 	{#if runnable?.schema}
 		{#if detailed}
 			<h2>
-				Arguments <Tooltip
-					>The optional fields, if left blank, will use the placeholder value as default.</Tooltip
-				>
+				Arguments
+				<Tooltip>
+					The optional fields, if left blank, will use the placeholder value as default.
+				</Tooltip>
 			</h2>
 		{/if}
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
-			<div class="text-sm">No arguments</div>
+			<div class="text-sm p-4">No arguments</div>
 		{:else}
-			<div
-				class="bg-gray-50 border border shadow-md shadow-blue-100 shadow-inner rounded border-gray-300 p-6"
-			>
+			<div class="bg-gray-50 border  shadow-blue-100 shadow-inner rounded border-gray-300 p-6">
 				<SchemaForm schema={runnable.schema} bind:isValid bind:args />
 			</div>
 		{/if}
@@ -89,8 +88,10 @@ let scheduledForStr;
 						class="default-button-secondary mx-2 mb-1"
 						on:click={() => {
 							scheduledForStr = undefined
-						}}>clear</button
+						}}
 					>
+						Clear
+					</button>
 				</div>
 			</div>
 		</div>
@@ -105,10 +106,8 @@ let scheduledForStr;
 		>
 			{#if schedulable}
 				<div>
-					schedule to run later <Icon
-						data={viewOptions ? faChevronUp : faChevronDown}
-						scale={0.5}
-					/>
+					Schedule to run later
+					<Icon data={viewOptions ? faChevronUp : faChevronDown} scale={0.5} />
 				</div>
 			{/if}
 		</button>

package/components/RunForm.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Script, Flow } from '../gen';
+import type { Flow, Script } from '../gen';
 declare const __propDef: {
     props: {
         runnable: Script | Flow | undefined;

package/components/SchemaEditor.svelte

@@ -1,8 +1,15 @@
-<script>import SchemaModal, { DEFAULT_PROPERTY, modalToSchema, schemaToModal } from './SchemaModal.svelte';
+<script>import { emptySchema, sendUserToast } from '../utils';
+import { faPen, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { Button } from 'flowbite-svelte';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
 import Editor from './Editor.svelte';
-import { emptySchema, sendUserToast } from '../utils';
-import Tooltip from './Tooltip.svelte';
+import SchemaEditorProperty from './SchemaEditorProperty.svelte';
+import SchemaModal, { DEFAULT_PROPERTY, schemaToModal } from './SchemaModal.svelte';
 import TableCustom from './TableCustom.svelte';
+import Toggle from './Toggle.svelte';
+import Tooltip from './Tooltip.svelte';
+const dispatch = createEventDispatcher();
 export let schema = emptySchema();
 let schemaModal;
 let schemaString = '';
@@ -28,6 +35,18 @@ export function getSchema() {
         throw Error(`Error: input is not a valid schema: ${err}`);
     }
 }
+function modalToSchema(schema) {
+    return {
+        type: schema.selectedType,
+        description: schema.description,
+        pattern: schema.pattern,
+        default: schema.default,
+        enum: schema.enum_,
+        items: schema.items,
+        contentEncoding: schema.contentEncoding,
+        format: schema.format
+    };
+}
 function handleAddOrEditArgument() {
     // If editing the arg's name, oldName containing the old argument name must be provided
     argError = '';
@@ -58,14 +77,15 @@ function handleAddOrEditArgument() {
     }
     schema = schema;
     schemaString = JSON.stringify(schema, null, '\t');
+    dispatch('change', schema);
 }
 function startEditArgument(argName) {
     argError = '';
     if (Object.keys(schema.properties).includes(argName)) {
-        schemaModal.openModal();
         editing = true;
         modalProperty = schemaToModal(schema.properties[argName], argName, schema.required.includes(argName));
         oldArgName = argName;
+        schemaModal.openModal();
     }
     else {
         sendUserToast(`This argument does not exist and can't be edited`, true);
@@ -75,8 +95,13 @@ function handleDeleteArgument(argName) {
     try {
         if (Object.keys(schema.properties).includes(argName)) {
             delete schema.properties[argName];
+            const requiredIndex = schema.required.findIndex((arg) => arg === argName);
+            if (requiredIndex > -1) {
+                schema.required = schema.required.slice(requiredIndex, 1);
+            }
             schema = schema;
             schemaString = JSON.stringify(schema, null, '\t');
+            dispatch('change', schema);
         }
         else {
             throw Error('Argument not found!');
@@ -101,93 +126,84 @@ function switchTab() {
 </script>
 
 <div class="flex flex-col">
-	<div class="w-full">
-		<div class="flex flex-row text-base">
-			<button
-				class="text-xs sm:text-base py-1 px-6 block hover:text-blue-500 focus:outline-noneborder-gray-200  {viewJsonSchema
-					? 'text-gray-500 '
-					: 'text-gray-700 font-semibold  '}"
-				on:click={() => (viewJsonSchema ? switchTab() : null)}
-			>
-				arguments
-			</button><button
-				class="py-1 px-6 block hover:text-blue-500 focus:outline-none border-gray-200  {viewJsonSchema
-					? 'text-gray-700 font-semibold '
-					: 'text-gray-500'}"
-				on:click={() => (viewJsonSchema ? null : switchTab())}
-			>
-				advanced <Tooltip
-					>Arguments can be edited either using the wizard, or by editing their json-schema <a
-						href="https://docs.windmill.dev/docs/reference/script_arguments_reference">docs</a
-					></Tooltip
-				>
-			</button>
-			<button
-				class="default-button-secondary grow"
-				on:click={() => {
-					modalProperty = Object.assign({}, DEFAULT_PROPERTY)
-					schemaModal.openModal()
-				}}>Add argument</button
-			>
+	<div class="flex justify-between">
+		<Button
+			on:click={() => {
+				modalProperty = Object.assign({}, DEFAULT_PROPERTY)
+				schemaModal.openModal()
+			}}
+			class="blue-button"
+		>
+			<Icon data={faPlus} class="mr-1" />
+			Add argument
+		</Button>
+
+		<div class="flex items-center">
+			<Toggle
+				on:change={() => switchTab()}
+				options={{
+					right: 'Json Schema Editor'
+				}}
+			/>
+			<div class="ml-2">
+				<Tooltip>
+					Arguments can be edited either using the wizard, or by editing their json-schema
+					<a href="https://docs.windmill.dev/docs/reference/script_arguments_reference">docs</a>
+				</Tooltip>
+			</div>
 		</div>
 	</div>
+
 	<!--json schema or table view-->
-	<div class="border-t py-1  h-full overflow-y-auto">
+	<div class="h-full overflow-y-auto">
 		{#if !viewJsonSchema}
 			<div class="h-full">
 				{#if schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
-					<TableCustom class="w-full min-h-full">
-						<tr slot="header-row" class="underline">
-							<th>name</th>
-							<th>type</th>
-							<th>description</th>
-							<th>default</th>
-							<th>required</th>
+					<TableCustom>
+						<tr slot="header-row">
+							<th>Name</th>
+							<th>Type</th>
+							<th>Description</th>
+							<th>Default</th>
+							<th>Required</th>
+							<th />
 						</tr>
 						<tbody slot="body">
 							{#each Object.entries(schema.properties) as [name, property] (name)}
 								<tr>
-									<td>{name}</td>
-									<td
-										>{#if !property.type} any {:else} {property.type} {/if}</td
-									>
+									<td class="font-bold">{name}</td>
+									<td>
+										<SchemaEditorProperty {property} />
+									</td>
 									<td>{property.description}</td>
 									<td>{JSON.stringify(property.default) ?? ''}</td>
-									<td>{schema.required.includes(name) ? 'required' : 'optional'}</td>
-									<td class="">
-										<button class="mr-2" on:click={() => handleDeleteArgument(name)}
-											><svg
-												class="w-4 h-4"
-												fill="none"
-												stroke="currentColor"
-												viewBox="0 0 24 14"
-												xmlns="http://www.w3.org/2000/svg"
-											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													stroke-width="2"
-													d="M6 18L18 6M6 6l12 12"
-												/>
-											</svg></button
+									<td>{schema.required.includes(name) ? 'Required' : 'Optional'}</td>
+									<td class="justify-end flex">
+										<Button
+											color="red"
+											outline
+											class="mr-2"
+											size="xs"
+											on:click={() => handleDeleteArgument(name)}
 										>
-										<button
-											class="default-button-secondary text-xs inline-flex"
-											on:click={() => {
-												startEditArgument(name)
-											}}>edit</button
-										></td
-									>
+											<Icon data={faTrash} class="mr-2" scale={0.8} />
+											Delete
+										</Button>
+										<Button color="alternative" size="xs" on:click={() => startEditArgument(name)}>
+											<Icon data={faPen} class="mr-2" scale={0.8} />
+											Edit
+										</Button>
+									</td>
 								</tr>
 							{/each}
 						</tbody>
 					</TableCustom>
 				{:else}
-					<div class="text-gray-700 text-xs italic">This script has no argument</div>
+					<div class="text-gray-700 text-xs italic mt-2">This schema has no arguments.</div>
 				{/if}
 			</div>
 		{:else}
-			<div>
+			<div class="border rounded mt-4 p-2">
 				<Editor
 					on:change={() => {
 						try {
@@ -197,7 +213,7 @@ function switchTab() {
 						}
 					}}
 					bind:code={schemaString}
-					lang={'json'}
+					lang="json"
 					class="small-editor"
 				/>
 			</div>

package/components/SchemaEditor.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         getSchema?: (() => Schema) | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/SchemaEditorProperty.svelte

@@ -0,0 +1,11 @@
+<script>import { Badge } from 'flowbite-svelte';
+export let property;
+</script>
+
+<Badge color="blue">{property.type?.toUpperCase() ?? 'ANY'}</Badge>
+{#if property.format}
+	<Badge color="green">{property.format?.toUpperCase()}</Badge>
+{/if}
+{#if property.contentEncoding}
+	<Badge color="indigo">{property.contentEncoding?.toUpperCase()}</Badge>
+{/if}

package/components/SchemaEditorProperty.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SchemaProperty } from '../common';
+declare const __propDef: {
+    props: {
+        property: SchemaProperty;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SchemaEditorPropertyProps = typeof __propDef.props;
+export declare type SchemaEditorPropertyEvents = typeof __propDef.events;
+export declare type SchemaEditorPropertySlots = typeof __propDef.slots;
+export default class SchemaEditorProperty extends SvelteComponentTyped<SchemaEditorPropertyProps, SchemaEditorPropertyEvents, SchemaEditorPropertySlots> {
+}
+export {};

package/components/SchemaForm.svelte

@@ -1,145 +1,39 @@
-<script>import { InputTransform } from '../gen';
-import { allTrue } from '../utils';
+<script>import { allTrue } from '../utils';
 import ArgInput from './ArgInput.svelte';
-import Editor from './Editor.svelte';
-import FieldHeader from './FieldHeader.svelte';
-import DynamicInputHelpBox from './flows/DynamicInputHelpBox.svelte';
-import { getCodeInjectionExpr, getDefaultExpr, isCodeInjection } from './flows/utils';
-import OverlayPropertyPicker from './propertyPicker/OverlayPropertyPicker.svelte';
-import Toggle from './Toggle.svelte';
+import InputTransformForm from './InputTransformForm.svelte';
 export let inputTransform = false;
 export let schema;
 export let args = {};
 export let editableSchema = false;
-export let extraLib = 'missing extraLib';
 export let isValid = true;
+export let pickableProperties = undefined;
+export let extraLib = 'missing extraLib';
 export let i = undefined;
-export let previousSchema = undefined;
 let inputCheck = {};
 $: isValid = allTrue(inputCheck) ?? false;
-let propertiesTypes = {};
-let inputCats = {};
-function setPropertyType(id, rawValue, isRaw) {
-    const arg = args[id];
-    if (!arg) {
-        return;
-    }
-    if (isCodeInjection(rawValue)) {
-        args[id].expr = getCodeInjectionExpr(rawValue, isRaw);
-        args[id].type = InputTransform.type.JAVASCRIPT;
-        propertiesTypes[id] = InputTransform.type.STATIC;
-    }
-    else {
-        if (args[id].type === InputTransform.type.JAVASCRIPT &&
-            propertiesTypes[id] === InputTransform.type.STATIC) {
-            args[id].type = InputTransform.type.STATIC;
-            if (inputCats[id] == 'number') {
-                args[id].value = Number(args[id].value);
-            }
+function removeExtraKey() {
+    Object.keys(args).forEach((key) => {
+        if (!Object.keys(schema?.properties ?? {}).includes(key)) {
+            delete args[key];
         }
-        if (arg.type) {
-            propertiesTypes[id] = arg.type;
-        }
-    }
-}
-function hasOverlay(inputCat) {
-    return inputCat === 'string' || inputCat === 'number';
+    });
 }
+$: Object.keys(schema?.properties ?? {}).length > 0 && removeExtraKey();
 </script>
 
 <div class="w-full">
 	{#if Object.keys(schema?.properties ?? {}).length > 0}
-		{#each Object.keys(schema?.properties ?? {}) as argName, index}
-			{#if inputTransform && args[argName] != undefined}
-				<div class={index > 0 ? 'mt-8' : ''} />
-				<div class="flex justify-between items-center">
-					<div class="flex items-center">
-						<FieldHeader
-							label={argName}
-							format={schema.properties[argName].format}
-							contentEncoding={schema.properties[argName].contentEncoding}
-							required={schema.required.includes(argName)}
-							type={schema.properties[argName].type}
-							itemsType={schema.properties[argName].items}
-						/>
-						{#if propertiesTypes[argName] === InputTransform.type.STATIC && args[argName].type === InputTransform.type.JAVASCRIPT}
-							<span
-								class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded ml-2"
-							>
-								{'${...}'}
-							</span>
-						{/if}
-					</div>
-					<Toggle
-						options={{
-							left: { label: '', value: InputTransform.type.STATIC },
-							right: { label: 'Raw Javascript Editor', value: InputTransform.type.JAVASCRIPT }
-						}}
-						bind:value={propertiesTypes[argName]}
-						on:change={(e) => {
-							if (e.detail === InputTransform.type.JAVASCRIPT) {
-								args[argName].expr = getDefaultExpr(i ?? -1, argName)
-								args[argName].value = undefined
-							} else {
-								args[argName].expr = undefined
-								args[argName].value = undefined
-							}
-
-							args[argName].type = e.detail
-						}}
-					/>
-				</div>
-				<div class="max-w-xs" />
-
-				{#if propertiesTypes[argName] === undefined || propertiesTypes[argName] === InputTransform.type.STATIC}
-					<OverlayPropertyPicker
-						{previousSchema}
-						disabled={!hasOverlay(inputCats[argName])}
-						on:select={(event) => {
-							const toAppend = `\$\{previous_result.${event.detail}}`
-							args[argName].value = `${args[argName].value ?? ''}${toAppend}`
-							setPropertyType(argName, args[argName].value, false)
-						}}
-					>
-						<ArgInput
-							label={argName}
-							bind:description={schema.properties[argName].description}
-							bind:value={args[argName].value}
-							type={schema.properties[argName].type}
-							required={schema.required.includes(argName)}
-							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}
-							contentEncoding={schema.properties[argName].contentEncoding}
-							bind:itemsType={schema.properties[argName].items}
-							displayHeader={false}
-							bind:inputCat={inputCats[argName]}
-							numberAsString={true}
-							on:input={(e) => {
-								if (hasOverlay(inputCats[argName])) {
-									setPropertyType(argName, e.detail.rawValue, e.detail.isRaw)
-								}
-							}}
-						/>
-					</OverlayPropertyPicker>
-				{:else if propertiesTypes[argName] === InputTransform.type.JAVASCRIPT}
-					{#if args[argName].expr != undefined}
-						<div class="border rounded p-2 mt-2 border-gray-300">
-							<Editor
-								bind:code={args[argName].expr}
-								lang="typescript"
-								class="few-lines-editor"
-								{extraLib}
-								extraLibPath="file:///node_modules/@types/windmill@{i}/index.d.ts"
-							/>
-						</div>
-						<DynamicInputHelpBox />
-					{/if}
-				{:else}
-					<p>Not recognized arg type {args[argName].type}</p>
-				{/if}
+		{#each Object.keys(schema?.properties ?? {}) as argName}
+			{#if inputTransform}
+				<InputTransformForm
+					bind:arg={args[argName]}
+					bind:schema
+					bind:argName
+					bind:inputCheck
+					bind:pickableProperties
+					bind:extraLib
+					bind:i
+				/>
 			{:else}
 				<ArgInput
 					label={argName}

package/components/SchemaForm.svelte.d.ts

@@ -1,16 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
-import { InputTransform } from '../gen';
 declare const __propDef: {
     props: {
         inputTransform?: boolean | undefined;
         schema: Schema;
-        args?: Record<string, InputTransform> | undefined;
+        args?: Record<string, any> | undefined;
         editableSchema?: boolean | undefined;
-        extraLib?: string | undefined;
         isValid?: boolean | undefined;
+        pickableProperties?: Object | undefined;
+        extraLib?: string | undefined;
         i?: number | undefined;
-        previousSchema?: Object | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;