windmill-components 1.22.42 → 1.28.1

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>;

package/components/SchemaModal.svelte

@@ -1,15 +1,5 @@
 <script context="module">import Modal from './Modal.svelte';
 export const ARG_TYPES = ['integer', 'number', 'string', 'boolean', 'object', 'array'];
-export function modalToSchema(schema) {
-    return {
-        type: schema.selectedType,
-        description: schema.description,
-        pattern: schema.pattern,
-        default: schema.default,
-        enum: schema.enum_,
-        items: schema.items
-    };
-}
 export function schemaToModal(schema, name, required) {
     return {
         name,
@@ -17,6 +7,8 @@ export function schemaToModal(schema, name, required) {
         description: schema.description,
         pattern: schema.pattern,
         default: schema.default,
+        contentEncoding: schema.contentEncoding,
+        format: schema.format,
         required
     };
 }
@@ -33,14 +25,17 @@ import { createEventDispatcher } from 'svelte';
 import ArgInput from './ArgInput.svelte';
 import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import Required from './Required.svelte';
+import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
 export let property = DEFAULT_PROPERTY;
 export let error = '';
 export let editing = false;
 export let oldArgName = undefined;
+let resource_type = undefined;
 const dispatch = createEventDispatcher();
 let modal;
 export function openModal() {
     modal.openModal();
+    resource_type = property.format?.substring(5);
 }
 export function closeModal() {
     modal.closeModal();
@@ -54,6 +49,11 @@ function clearModal() {
     property.description = DEFAULT_PROPERTY.description;
     property.required = DEFAULT_PROPERTY.required;
     property.selectedType = DEFAULT_PROPERTY.selectedType;
+    property.format = undefined;
+    resource_type = undefined;
+}
+$: if (property.selectedType == 'object' && resource_type) {
+    property.format = resource_type ? `$res:${resource_type}` : undefined;
 }
 </script>
 
@@ -77,12 +77,16 @@ function clearModal() {
 				/>
 			</label>
 			<h3 class="font-semibold text-gray-700">Type<Required required={true} /></h3>
-			<div class="grid sm:grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-1 items-center mb-2">
+			<div class="grid sm:grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-1 items-center mb-2 w-full">
 				{#each ARG_TYPES as argType}
 					<button
 						class={argType == property.selectedType ? 'item-button-selected' : 'item-button'}
 						on:click={() => {
 							property.selectedType = argType
+							property.format = undefined
+							property.contentEncoding = undefined
+							property.enum_ = undefined
+							property.pattern = undefined
 						}}>{argType}</button
 					>
 				{/each}
@@ -106,13 +110,14 @@ function clearModal() {
 				pattern={property.pattern}
 			/>
 			{#if property.selectedType !== 'boolean'}
-				<h2 class="mb-2">Advanced</h2>
+				<h2 class="mb-2 mt-4">Advanced</h2>
 
 				{#if property.selectedType == 'string'}
 					<StringTypeNarrowing
 						bind:format={property.format}
 						bind:pattern={property.pattern}
 						bind:enum_={property.enum_}
+						bind:contentEncoding={property.contentEncoding}
 					/>
 				{:else if property.selectedType == 'array'}
 					<select bind:value={property.items}>
@@ -120,6 +125,9 @@ function clearModal() {
 						<option value={{ type: 'string' }}> Items are strings</option>
 						<option value={{ type: 'number' }}>Items are numbers</option>
 					</select>
+				{:else if property.selectedType == 'object'}
+					<h3 class="mb-2 font-bold mt-4">Resource type</h3>
+					<ObjectTypeNarrowing bind:format={property.format} />
 				{:else}
 					<p>No advanced configuration for this type</p>
 				{/if}
@@ -137,24 +145,3 @@ function clearModal() {
 		Save
 	</button>
 </Modal>
-
-<style>
-	.item-button {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-    border-width: 1px;
-    border-radius: 0.125rem
-}
-	.item-button-selected {
-    -webkit-text-decoration-line: underline;
-            text-decoration-line: underline;
-    font-weight: 700;
-    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
-}</style>

package/components/SchemaModal.svelte.d.ts

@@ -14,8 +14,8 @@ export interface ModalSchemaProperty {
     items?: {
         type?: 'string' | 'number';
     };
+    contentEncoding?: 'base64' | 'binary';
 }
-export declare function modalToSchema(schema: ModalSchemaProperty): SchemaProperty;
 export declare function schemaToModal(schema: SchemaProperty, name: string, required: boolean): ModalSchemaProperty;
 export declare const DEFAULT_PROPERTY: ModalSchemaProperty;
 declare const __propDef: {

package/components/SchemaViewer.svelte

@@ -1,16 +1,11 @@
 <script>import { emptySchema } from '../utils';
 import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
-import github from 'svelte-highlight/styles/github';
 import TableCustom from './TableCustom.svelte';
 export let schema = emptySchema();
 let viewJsonSchema = false;
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
-
 <div class="w-full">
 	<div class="flex flex-col sm:flex-row text-base">
 		<button
@@ -59,7 +54,10 @@ let viewJsonSchema = false;
 										? JSON.stringify(property.default)
 										: ''}</td
 								>
-								<td>{property.format ?? ''}</td>
+								<td
+									>{property.format ?? ''}
+									{property.contentEncoding ? `(encoding: ${property.contentEncoding})` : ''}</td
+								>
 								<td>{schema.required.includes(name) ? 'required' : 'optional'}</td>
 							</tr>
 						{/each}