windmill-components 1.46.3 → 1.52.0

package/components/ResourcePicker.svelte

@@ -1,13 +1,16 @@
 <script>import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
+import { faPlus, faRotateRight } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
-import ResourceEditor from './ResourceEditor.svelte';
+import Icon from 'svelte-awesome';
+import { Button } from './common';
+import Select from 'svelte-select';
+import AppConnect from './AppConnect.svelte';
 const dispatch = createEventDispatcher();
 let resources = [];
 export let initialValue = undefined;
 export let value = initialValue;
 export let resourceType = undefined;
-let resourceEditor;
 async function loadResources(resourceType) {
     const v = value;
     resources = await ResourceService.listResource({ workspace: $workspaceStore, resourceType });
@@ -19,38 +22,38 @@ $: {
     }
 }
 $: dispatch('change', value);
+$: collection = resources.map((x) => ({
+    value: x.path,
+    label: `${x.path}${x.description ? ' | ' + x.description : ''}`
+}));
+let appConnect;
 </script>
 
-<ResourceEditor bind:this={resourceEditor} on:refresh={() => loadResources(resourceType)} />
-<select bind:value placeholder="Pick a resource {resourceType}">
-	<option value={undefined} />
-	{#each resources as r}
-		<option value={r.path}>{r.path}{r.description ? ' | ' + r.description : ''}</option>
-	{/each}
-</select>
-<div class="flex flex-row gap-2">
-	<a
-		class="text-xs hover:underline"
-		rel="noreferrer"
-		target="_blank"
-		href="/resources?connect_app={resourceType}">Connect {resourceType} with OAuth</a
+<AppConnect
+	on:refresh={async (e) => {
+		await loadResources(resourceType)
+		value = e.detail
+	}}
+	newPageOAuth
+	bind:this={appConnect}
+/>
+
+<div class="flex flex-row gap-x-1 w-full">
+	<Select
+		value={collection.find((x) => x.value == value)}
+		bind:justValue={value}
+		items={collection}
+		class="grow"
+		placeholder="Pick a {resourceType} resource"
+	/>
+	<Button variant="border" size="xs" on:click={() => appConnect?.open?.(resourceType)}>
+		<Icon scale={0.8} data={faPlus} /></Button
 	>
-	<button
-		class="text-xs text-blue-500 font-normal"
-		type="button"
+	<Button
+		variant="border"
+		size="xs"
 		on:click={() => {
 			loadResources(resourceType)
-		}}
-	>
-		refresh
-	</button>
-	<button
-		class="text-xs text-blue-500 font-normal"
-		type="button"
-		on:click={() => {
-			resourceEditor.initNew(resourceType)
-		}}
+		}}><Icon scale={0.8} data={faRotateRight} /></Button
 	>
-		+Create a new {resourceType}
-	</button>
 </div>

package/components/ResourcePicker.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ResourcePickerProps = typeof __propDef.props;
-export declare type ResourcePickerEvents = typeof __propDef.events;
-export declare type ResourcePickerSlots = typeof __propDef.slots;
+export type ResourcePickerProps = typeof __propDef.props;
+export type ResourcePickerEvents = typeof __propDef.events;
+export type ResourcePickerSlots = typeof __propDef.slots;
 export default class ResourcePicker extends SvelteComponentTyped<ResourcePickerProps, ResourcePickerEvents, ResourcePickerSlots> {
 }
 export {};

package/components/ResourceTypePicker.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ResourceTypePickerProps = typeof __propDef.props;
-export declare type ResourceTypePickerEvents = typeof __propDef.events;
-export declare type ResourceTypePickerSlots = typeof __propDef.slots;
+export type ResourceTypePickerProps = typeof __propDef.props;
+export type ResourceTypePickerEvents = typeof __propDef.events;
+export type ResourceTypePickerSlots = typeof __propDef.slots;
 export default class ResourceTypePicker extends SvelteComponentTyped<ResourceTypePickerProps, ResourceTypePickerEvents, ResourceTypePickerSlots> {
 }
 export {};

package/components/RunChart.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type RunChartProps = typeof __propDef.props;
-export declare type RunChartEvents = typeof __propDef.events;
-export declare type RunChartSlots = typeof __propDef.slots;
+export type RunChartProps = typeof __propDef.props;
+export type RunChartEvents = typeof __propDef.events;
+export type RunChartSlots = typeof __propDef.slots;
 export default class RunChart extends SvelteComponentTyped<RunChartProps, RunChartEvents, RunChartSlots> {
 }
 export {};

package/components/RunForm.svelte.d.ts

@@ -30,9 +30,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type RunFormProps = typeof __propDef.props;
-export declare type RunFormEvents = typeof __propDef.events;
-export declare type RunFormSlots = typeof __propDef.slots;
+export type RunFormProps = typeof __propDef.props;
+export type RunFormEvents = typeof __propDef.events;
+export type RunFormSlots = typeof __propDef.slots;
 export default class RunForm extends SvelteComponentTyped<RunFormProps, RunFormEvents, RunFormSlots> {
     get run(): () => void;
 }

package/components/SchemaEditor.svelte

@@ -1,4 +1,4 @@
-<script>import { emptySchema, sendUserToast } from '../utils';
+<script>import { emptySchema, emptyString, sendUserToast } from '../utils';
 import { faPen, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Button } from './common';
 import { createEventDispatcher } from 'svelte';
@@ -8,6 +8,7 @@ import SimpleEditor from './SimpleEditor.svelte';
 import TableCustom from './TableCustom.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
+import { flip } from 'svelte/animate';
 const dispatch = createEventDispatcher();
 export let schema = emptySchema();
 let schemaModal;
@@ -96,10 +97,7 @@ 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.required = schema.required.filter((arg) => arg !== argName);
             schema = schema;
             schemaString = JSON.stringify(schema, null, '\t');
             dispatch('change', schema);
@@ -124,28 +122,43 @@ function switchTab() {
         viewJsonSchema = true;
     }
 }
+function changePosition(i, up) {
+    isAnimated = true;
+    setTimeout(() => {
+        isAnimated = false;
+    }, 500);
+    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);
+}
+let isAnimated = false;
+let error = '';
 </script>
 
 <div class="flex flex-col">
 	<div class="flex justify-between gap-x-2">
-		<Button
-			variant="contained"
-			color="blue"
-			size="sm"
-			startIcon={{ icon: faPlus }}
-			on:click={() => {
-				modalProperty = Object.assign({}, DEFAULT_PROPERTY)
-				schemaModal.openDrawer()
-			}}
-		>
-			Add argument
-		</Button>
+		<div>
+			<Button
+				variant="contained"
+				color="dark"
+				size="sm"
+				startIcon={{ icon: faPlus }}
+				on:click={() => {
+					modalProperty = Object.assign({}, DEFAULT_PROPERTY)
+					schemaModal.openDrawer()
+				}}
+			>
+				Add Property
+			</Button>
+		</div>
 
 		<div class="flex items-center">
 			<Toggle
 				on:change={() => switchTab()}
 				options={{
-					right: 'Json Schema Editor'
+					right: 'As JSON'
 				}}
 			/>
 			<div class="ml-2">
@@ -172,8 +185,8 @@ function switchTab() {
 							<th />
 						</tr>
 						<tbody slot="body">
-							{#each Object.entries(schema.properties) as [name, property] (name)}
-								<tr>
+							{#each Object.entries(schema.properties) as [name, property], i (name)}
+								<tr animate:flip>
 									<td class="font-bold">{name}</td>
 									<td>
 										<SchemaEditorProperty {property} />
@@ -186,10 +199,25 @@ function switchTab() {
 										{/if}</td
 									>
 									<td class="justify-end flex">
+										{#if i > 0}
+											<button
+												on:click={() => changePosition(i, true)}
+												class="text-lg mr-2 {isAnimated ? 'invisible' : ''}"
+											>
+												&uparrow;</button
+											>
+										{/if}
+										{#if i < Object.keys(schema.properties).length - 1}
+											<button
+												on:click={() => changePosition(i, false)}
+												class="text-lg mr-2 {isAnimated ? 'invisible' : ''}">&downarrow;</button
+											>
+										{/if}
+
 										<Button
 											color="red"
 											variant="border"
-											btnClasses="mr-2"
+											btnClasses="mx-2"
 											size="sm"
 											startIcon={{ icon: faTrash }}
 											on:click={() => handleDeleteArgument(name)}
@@ -215,13 +243,17 @@ function switchTab() {
 				{/if}
 			</div>
 		{:else}
-			<div class="border rounded mt-4 p-2">
+			{#if !emptyString(error)}<span class="text-red-400">{error}</span>{:else}<div
+					class="py-6"
+				/>{/if}
+			<div class="border rounded  p-2">
 				<SimpleEditor
 					on:change={() => {
 						try {
 							schema = JSON.parse(schemaString)
+							error = ''
 						} catch (err) {
-							sendUserToast(err.message, true)
+							error = err.message
 						}
 					}}
 					bind:code={schemaString}

package/components/SchemaEditor.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SchemaEditorProps = typeof __propDef.props;
-export declare type SchemaEditorEvents = typeof __propDef.events;
-export declare type SchemaEditorSlots = typeof __propDef.slots;
+export type SchemaEditorProps = typeof __propDef.props;
+export type SchemaEditorEvents = typeof __propDef.events;
+export type SchemaEditorSlots = typeof __propDef.slots;
 export default class SchemaEditor extends SvelteComponentTyped<SchemaEditorProps, SchemaEditorEvents, SchemaEditorSlots> {
     get getSchema(): () => Schema;
 }

package/components/SchemaEditorProperty.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SchemaEditorPropertyProps = typeof __propDef.props;
-export declare type SchemaEditorPropertyEvents = typeof __propDef.events;
-export declare type SchemaEditorPropertySlots = typeof __propDef.slots;
+export type SchemaEditorPropertyProps = typeof __propDef.props;
+export type SchemaEditorPropertyEvents = typeof __propDef.events;
+export type SchemaEditorPropertySlots = typeof __propDef.slots;
 export default class SchemaEditorProperty extends SvelteComponentTyped<SchemaEditorPropertyProps, SchemaEditorPropertyEvents, SchemaEditorPropertySlots> {
 }
 export {};

package/components/SchemaForm.svelte

@@ -1,19 +1,29 @@
-<script>import { allTrue } from '../utils';
+<script>import { VariableService } from '../gen';
+import { workspaceStore } from '../stores';
+import { allTrue } from '../utils';
+import { slide } from 'svelte/transition';
 import ArgInput from './ArgInput.svelte';
+import { Button } from './common';
 import InputTransformForm from './InputTransformForm.svelte';
+import ItemPicker from './ItemPicker.svelte';
+import VariableEditor from './VariableEditor.svelte';
 export let inputTransform = false;
 export let schema;
 export let args = {};
+export let disabledArgs = [];
 export let editableSchema = false;
 export let isValid = true;
 export let extraLib = 'missing extraLib';
-export let importPath = undefined;
 export let autofocus = false;
+export let previousModuleId = undefined;
+export let shouldHideNoInputs = false;
+export let compact = false;
+export let password = undefined;
 let clazz = '';
 export { clazz as class };
 let inputCheck = {};
 $: isValid = allTrue(inputCheck) ?? false;
-$: if (args == undefined) {
+$: if (args == undefined || typeof args !== 'object') {
     args = {};
 }
 function removeExtraKey() {
@@ -25,41 +35,95 @@ function removeExtraKey() {
     });
 }
 $: schema?.properties && removeExtraKey();
+let pickForField;
+let itemPicker;
+let variableEditor;
 </script>
 
 <div class="w-full {clazz}">
 	{#if Object.keys(schema?.properties ?? {}).length > 0}
 		{#each Object.keys(schema?.properties ?? {}) as argName, i (argName)}
-			{#if inputTransform}
-				<InputTransformForm
-					bind:arg={args[argName]}
-					bind:schema
-					bind:argName
-					bind:inputCheck={inputCheck[argName]}
-					bind:extraLib
-					bind:importPath
-				/>
-			{:else}
-				<ArgInput
-					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)}
-					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}
-					properties={schema.properties[argName].properties}
-					bind:itemsType={schema.properties[argName].items}
-					{editableSchema}
-				/>
-			{/if}
+			<div transition:slide|local>
+				{#if inputTransform}
+					<InputTransformForm
+						{previousModuleId}
+						bind:arg={args[argName]}
+						bind:schema
+						bind:argName
+						bind:inputCheck={inputCheck[argName]}
+						bind:extraLib
+						{variableEditor}
+						{itemPicker}
+						bind:pickForField
+					/>
+				{:else if typeof args == 'object'}
+					<ArgInput
+						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)}
+						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}
+						properties={schema.properties[argName].properties}
+						bind:itemsType={schema.properties[argName].items}
+						disabled={disabledArgs.includes(argName)}
+						{editableSchema}
+						{compact}
+						password={argName == password}
+						{variableEditor}
+						{itemPicker}
+						bind:pickForField
+					/>
+				{:else}
+					Expected args to be an object, got {JSON.stringify(args)} instead
+				{/if}
+			</div>
 		{/each}
-	{:else}
-		<p class="italic text-sm">No inputs</p>
+	{:else if !shouldHideNoInputs}
+		<div class="text-gray-500 text-sm">No inputs</div>
 	{/if}
 </div>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, _) => {
+		if (pickForField) {
+			if (inputTransform) {
+				args[pickForField].value = '$var:' + path
+			} else {
+				args[pickForField] = '$var:' + path
+			}
+		}
+	}}
+	itemName="Variable"
+	extraField="name"
+	loadItems={async () =>
+		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
+			name: x.path,
+			...x
+		}))}
+>
+	<div
+		slot="submission"
+		class="flex flex-row-reverse w-full p-5 bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+	>
+		<Button
+			variant="border"
+			color="blue"
+			size="sm"
+			on:click={() => {
+				variableEditor?.initNew?.()
+			}}
+		>
+			Create a new variable
+		</Button>
+	</div>
+</ItemPicker>
+
+<VariableEditor bind:this={variableEditor} on:create={itemPicker.openDrawer} />

package/components/SchemaForm.svelte.d.ts

@@ -5,11 +5,15 @@ declare const __propDef: {
         inputTransform?: boolean | undefined;
         schema: Schema;
         args?: Record<string, any> | undefined;
+        disabledArgs?: string[] | undefined;
         editableSchema?: boolean | undefined;
         isValid?: boolean | undefined;
         extraLib?: string | undefined;
-        importPath?: string | undefined;
         autofocus?: boolean | undefined;
+        previousModuleId?: string | undefined;
+        shouldHideNoInputs?: boolean | undefined;
+        compact?: boolean | undefined;
+        password?: string | undefined;
         class?: string | undefined;
     };
     events: {
@@ -17,9 +21,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SchemaFormProps = typeof __propDef.props;
-export declare type SchemaFormEvents = typeof __propDef.events;
-export declare type SchemaFormSlots = typeof __propDef.slots;
+export type SchemaFormProps = typeof __propDef.props;
+export type SchemaFormEvents = typeof __propDef.events;
+export type SchemaFormSlots = typeof __propDef.slots;
 export default class SchemaForm extends SvelteComponentTyped<SchemaFormProps, SchemaFormEvents, SchemaFormSlots> {
 }
 export {};

package/components/SchemaModal.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { SchemaProperty } from '../common';
 export declare const ARG_TYPES: readonly ["integer", "number", "string", "boolean", "object", "array"];
-export declare type ArgType = typeof ARG_TYPES[number];
+export type ArgType = typeof ARG_TYPES[number];
 export interface ModalSchemaProperty {
     selectedType?: string;
     description: string;
@@ -34,9 +34,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SchemaModalProps = typeof __propDef.props;
-export declare type SchemaModalEvents = typeof __propDef.events;
-export declare type SchemaModalSlots = typeof __propDef.slots;
+export type SchemaModalProps = typeof __propDef.props;
+export type SchemaModalEvents = typeof __propDef.events;
+export type SchemaModalSlots = typeof __propDef.slots;
 export default class SchemaModal extends SvelteComponentTyped<SchemaModalProps, SchemaModalEvents, SchemaModalSlots> {
     get openDrawer(): () => void;
     get closeDrawer(): () => void;

package/components/SchemaViewer.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SchemaViewerProps = typeof __propDef.props;
-export declare type SchemaViewerEvents = typeof __propDef.events;
-export declare type SchemaViewerSlots = typeof __propDef.slots;
+export type SchemaViewerProps = typeof __propDef.props;
+export type SchemaViewerEvents = typeof __propDef.events;
+export type SchemaViewerSlots = typeof __propDef.slots;
 export default class SchemaViewer extends SvelteComponentTyped<SchemaViewerProps, SchemaViewerEvents, SchemaViewerSlots> {
 }
 export {};