windmill-components 1.22.0 → 1.28.2

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}
@@ -67,7 +65,7 @@ let viewJsonSchema = false;
 				</TableCustom>
 			</div>
 		{:else}
-			<div class="text-gray-700 text-xs italic">This script has no argument</div>
+			<div class="text-gray-700 text-xs italic">This script has no arguments</div>
 		{/if}
 	</div>
 	<div class={viewJsonSchema ? '' : 'hidden'}>

package/components/ScriptBuilder.svelte

@@ -1,26 +1,25 @@
 <script>import { ScriptService } from '../gen';
-import { emptySchema, sendUserToast, setQueryWithoutLoad } from '../utils';
-import { onDestroy } from 'svelte';
-import ScriptEditor from './ScriptEditor.svelte';
-import { page } from '$app/stores';
 import { goto } from '$app/navigation';
-import Path from './Path.svelte';
-import SvelteMarkdown from 'svelte-markdown';
-import { workspaceStore } from '../stores';
-import ScriptSchema from './ScriptSchema.svelte';
+import { page } from '$app/stores';
 import { inferArgs } from '../infer';
-import Required from './Required.svelte';
-import RadioButton from './RadioButton.svelte';
 import { DENO_INIT_CODE, DENO_INIT_CODE_TRIGGER, initialCode } from '../script_helpers';
+import { workspaceStore } from '../stores';
+import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
+import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
+import { onDestroy } from 'svelte';
+import SvelteMarkdown from 'svelte-markdown';
+import Path from './Path.svelte';
+import RadioButton from './RadioButton.svelte';
+import Required from './Required.svelte';
+import ScriptEditor from './ScriptEditor.svelte';
+import ScriptSchema from './ScriptSchema.svelte';
 let editor;
 let scriptSchema;
 $: step = Number($page.url.searchParams.get('step')) || 1;
 export let script;
 export let initialPath = '';
 let pathError = '';
-$: {
-    setQueryWithoutLoad($page.url, 'state', btoa(JSON.stringify(script)));
-}
+$: setQueryWithoutLoad($page.url, 'state', encodeState(script));
 $: {
     if (script.language == 'python3') {
         script.is_trigger = false;
@@ -85,34 +84,33 @@ onDestroy(() => {
 <div class="flex flex-col h-screen max-w-screen-lg xl:-ml-20 xl:pl-4 w-full -mt-4 pt-4 md:mx-10 ">
 	<!-- Nav between steps-->
 	<div class="flex flex-col w-full">
-		<div class="justify-between flex flex-row drop-shadow-sm w-full">
+		<div class="justify-between flex flex-row drop-shadow-sm w-full mt-4">
 			<div class="wizard-nav flex flex-row w-full">
-				<button
-					class="{step === 1
-						? 'default-button-disabled text-gray-700'
-						: 'default-button-secondary'} min-w-max ml-2"
-					on:click={() => {
-						changeStep(1)
-					}}>Step 1: Metadata</button
-				>
-				<button
-					disabled={pathError != ''}
-					class="{step === 2
-						? 'default-button-disabled text-gray-700'
-						: 'default-button-secondary'} min-w-max ml-2"
-					on:click={() => {
-						changeStep(2)
-					}}>Step 2: Code</button
-				>
-				<button
-					disabled={pathError != ''}
-					class="{step === 3
-						? 'default-button-disabled text-gray-700'
-						: 'default-button-secondary'} min-w-max ml-2"
-					on:click={() => {
-						changeStep(3)
-					}}>Step 3: UI customisation</button
-				>
+				<Breadcrumb>
+					<BreadcrumbItem>
+						<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
+							Metadata
+						</button>
+					</BreadcrumbItem>
+					<BreadcrumbItem>
+						<button
+							on:click={() => changeStep(2)}
+							class={step === 2 ? 'font-bold' : null}
+							disabled={pathError != ''}
+						>
+							Code
+						</button>
+					</BreadcrumbItem>
+					<BreadcrumbItem>
+						<button
+							on:click={() => changeStep(3)}
+							class={step === 3 ? 'font-bold' : null}
+							disabled={pathError != ''}
+						>
+							UI customisation
+						</button>
+					</BreadcrumbItem>
+				</Breadcrumb>
 			</div>
 			<div class="flex flex-row-reverse ml-2">
 				{#if step != 3}
@@ -168,7 +166,6 @@ onDestroy(() => {
 			<div class="max-w-md">
 				<RadioButton
 					label="Language"
-					small={true}
 					options={[
 						['Typescript (Deno)', 'deno'],
 						['Python 3.10', 'python3']
@@ -196,10 +193,11 @@ onDestroy(() => {
 					rows="1"
 				/>
 			</label>
-			<label class="block ">
+			<label class="block" for="inp">
 				<span class="text-gray-700"
 					>Description<Required required={false} detail="accept markdown formatting" />
 					<textarea
+						id="inp"
 						bind:value={script.description}
 						class="
 					mt-1
@@ -268,7 +266,6 @@ onDestroy(() => {
 	/* .wizard-nav {
 		@apply w-1/2 sm:w-1/4;
 	} */
-
 	.wizard-nav button {
 		max-height: 30px;
 	}</style>