windmill-components 1.87.0 → 1.89.0

package/package/components/SchemaEditor.svelte

@@ -0,0 +1,284 @@
+<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';
+import SchemaEditorProperty from './SchemaEditorProperty.svelte';
+import SchemaModal, { DEFAULT_PROPERTY, schemaToModal } from './SchemaModal.svelte';
+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';
+import Portal from 'svelte-portal';
+const dispatch = createEventDispatcher();
+export let schema = emptySchema();
+if (!schema) {
+    schema = emptySchema();
+}
+let schemaModal;
+let schemaString = '';
+// Internal state: bound to args builder modal
+let modalProperty = Object.assign({}, DEFAULT_PROPERTY);
+let argError = '';
+let editing = false;
+let oldArgName; // when editing argument and changing name
+let viewJsonSchema = false;
+// Binding is not enough because monaco Editor does not support two-way binding
+export function getSchema() {
+    try {
+        if (viewJsonSchema) {
+            schema = JSON.parse(schemaString);
+            return schema;
+        }
+        else {
+            schemaString = JSON.stringify(schema, null, '\t');
+            return schema;
+        }
+    }
+    catch (err) {
+        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 = '';
+    if (modalProperty.name.length === 0) {
+        argError = 'Arguments need to have a name';
+    }
+    else if (Object.keys(schema.properties).includes(modalProperty.name) && !editing) {
+        argError = 'There is already an argument with this name';
+    }
+    else {
+        schema.properties[modalProperty.name] = modalToSchema(modalProperty);
+        if (modalProperty.required) {
+            if (!schema.required.includes(modalProperty.name)) {
+                schema.required.push(modalProperty.name);
+            }
+        }
+        else if (schema.required.includes(modalProperty.name)) {
+            const index = schema.required.indexOf(modalProperty.name, 0);
+            if (index > -1) {
+                schema.required.splice(index, 1);
+            }
+        }
+        if (editing && oldArgName && oldArgName !== modalProperty.name) {
+            handleDeleteArgument(oldArgName);
+        }
+        modalProperty = Object.assign({}, DEFAULT_PROPERTY);
+        editing = false;
+        oldArgName = undefined;
+        schemaModal.closeDrawer();
+    }
+    schema = schema;
+    schemaString = JSON.stringify(schema, null, '\t');
+    dispatch('change', schema);
+}
+function startEditArgument(argName) {
+    argError = '';
+    if (Object.keys(schema.properties).includes(argName)) {
+        editing = true;
+        modalProperty = schemaToModal(schema.properties[argName], argName, schema.required.includes(argName));
+        oldArgName = argName;
+        schemaModal.openDrawer();
+    }
+    else {
+        sendUserToast(`This argument does not exist and can't be edited`, true);
+    }
+}
+function handleDeleteArgument(argName) {
+    try {
+        if (Object.keys(schema.properties).includes(argName)) {
+            delete schema.properties[argName];
+            schema.required = schema.required.filter((arg) => arg !== argName);
+            schema = schema;
+            schemaString = JSON.stringify(schema, null, '\t');
+            dispatch('change', schema);
+        }
+        else {
+            throw Error('Argument not found!');
+        }
+    }
+    catch (err) {
+        sendUserToast(`Could not delete argument: ${err}`, true);
+    }
+}
+function switchTab() {
+    if (viewJsonSchema) {
+        if (schemaString === '') {
+            schemaString = JSON.stringify(emptySchema(), null, 4);
+        }
+        viewJsonSchema = false;
+    }
+    else {
+        schemaString = JSON.stringify(schema, null, '\t');
+        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">
+		<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: 'As JSON'
+				}}
+			/>
+			<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-parameters-to-json-schema"
+						>see docs</a
+					>
+				</Tooltip>
+			</div>
+		</div>
+	</div>
+
+	<!--json schema or table view-->
+	<div class="h-full">
+		{#if !viewJsonSchema}
+			<div class="h-full">
+				{#if schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
+					<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], i (name)}
+								<tr animate:flip>
+									<td class="font-bold">{name}</td>
+									<td>
+										<SchemaEditorProperty {property} />
+									</td>
+									<td>{property.description ?? ''}</td>
+									<td>{property.default ? JSON.stringify(property.default) : ''}</td>
+									<td
+										>{#if schema.required.includes(name)}
+											<span class="text-red-600 font-bold text-lg">*</span>
+										{/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="mx-2"
+											size="sm"
+											startIcon={{ icon: faTrash }}
+											on:click={() => handleDeleteArgument(name)}
+										>
+											Delete
+										</Button>
+										<Button
+											color="light"
+											variant="border"
+											size="sm"
+											startIcon={{ icon: faPen }}
+											on:click={() => startEditArgument(name)}
+										>
+											Edit
+										</Button>
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</TableCustom>
+				{:else}
+					<div class="text-gray-700 text-xs italic mt-2">This schema has no arguments.</div>
+				{/if}
+			</div>
+		{:else}
+			{#if !emptyString(error)}<span class="text-red-400">{error}</span>{:else}<div
+					class="py-6"
+				/>{/if}
+			<div class="border rounded p-2">
+				<SimpleEditor
+					fixedOverflowWidgets={false}
+					on:change={() => {
+						try {
+							schema = JSON.parse(schemaString)
+							error = ''
+						} catch (err) {
+							error = err.message
+						}
+					}}
+					bind:code={schemaString}
+					lang="json"
+					class="small-editor"
+				/>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<Portal>
+	<SchemaModal
+		bind:this={schemaModal}
+		bind:property={modalProperty}
+		bind:error={argError}
+		on:save={handleAddOrEditArgument}
+		bind:editing
+		bind:oldArgName
+	/>
+</Portal>

package/package/components/SchemaEditor.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+declare const __propDef: {
+    props: {
+        schema?: Schema | undefined;
+        getSchema?: (() => Schema) | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    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;
+}
+export {};

package/package/components/SchemaEditorProperty.svelte

@@ -0,0 +1,13 @@
+<script>import Badge from './common/badge/Badge.svelte';
+export let property;
+</script>
+
+<div class="flex flex-row flex-wrap gap-1">
+	<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}
+</div>

package/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 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/package/components/SchemaForm.svelte

@@ -0,0 +1,154 @@
+<script>import { VariableService } from '../gen';
+import { workspaceStore } from '../stores';
+import { allTrue } from '../utils';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import ArgInput from './ArgInput.svelte';
+import { Button } from './common';
+import ItemPicker from './ItemPicker.svelte';
+import VariableEditor from './VariableEditor.svelte';
+export let schema;
+export let args = {};
+export let disabledArgs = [];
+export let disabled = false;
+export let editableSchema = false;
+export let isValid = true;
+export let autofocus = false;
+export let shouldHideNoInputs = false;
+export let compact = false;
+export let password = undefined;
+export let noVariablePicker = false;
+export let flexWrap = false;
+export let noDelete = false;
+let clazz = '';
+export { clazz as class };
+let inputCheck = {};
+$: isValid = allTrue(inputCheck) ?? false;
+$: if (args == undefined || typeof args !== 'object') {
+    args = {};
+}
+function removeExtraKey() {
+    const nargs = {};
+    Object.keys(args ?? {}).forEach((key) => {
+        if (keys.includes(key)) {
+            nargs[key] = args[key];
+        }
+    });
+    args = nargs;
+}
+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();
+        }
+    }
+}
+</script>
+
+<div class="w-full {clazz} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 gap-y-2' : ''}">
+	{#if keys.length > 0}
+		{#each keys as argName, i (argName)}
+			{#if Object.keys(schema.properties ?? {}).includes(argName)}
+				<div>
+					{#if typeof args == 'object' && schema?.properties[argName]}
+						{#if editableSchema}
+							<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) || disabled}
+								{editableSchema}
+								{compact}
+								password={argName == password}
+								{variableEditor}
+								{itemPicker}
+								bind:pickForField
+								bind:extra={schema.properties[argName]}
+							/>
+						{:else}
+							<ArgInput
+								autofocus={i == 0 && autofocus}
+								label={argName}
+								description={schema.properties[argName].description}
+								bind:value={args[argName]}
+								type={schema.properties[argName].type}
+								required={schema.required.includes(argName)}
+								pattern={schema.properties[argName].pattern}
+								bind:valid={inputCheck[argName]}
+								defaultValue={schema.properties[argName].default}
+								enum_={schema.properties[argName].enum}
+								format={schema.properties[argName].format}
+								contentEncoding={schema.properties[argName].contentEncoding}
+								properties={schema.properties[argName].properties}
+								itemsType={schema.properties[argName].items}
+								disabled={disabledArgs.includes(argName) || disabled}
+								{editableSchema}
+								{compact}
+								password={argName == password}
+								{variableEditor}
+								{itemPicker}
+								bind:pickForField
+								extra={schema.properties[argName]}
+							/>
+						{/if}
+					{/if}
+				</div>
+			{/if}
+		{/each}
+	{:else if !shouldHideNoInputs}
+		<div class="text-gray-500 text-sm">No inputs</div>
+	{/if}
+</div>
+
+{#if !noVariablePicker}
+	<ItemPicker
+		bind:this={itemPicker}
+		pickCallback={(path, _) => {
+			if (pickForField) {
+				args[pickForField] = '$var:' + path
+			}
+		}}
+		itemName="Variable"
+		extraField="path"
+		loadItems={async () =>
+			(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
+				name: x.path,
+				...x
+			}))}
+	>
+		<div
+			slot="submission"
+			class="flex flex-row-reverse w-full bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+		>
+			<Button
+				variant="border"
+				color="blue"
+				size="sm"
+				startIcon={{ icon: faPlus }}
+				on:click={() => {
+					variableEditor?.initNew?.()
+				}}
+			>
+				New variable
+			</Button>
+		</div>
+	</ItemPicker>
+
+	<VariableEditor bind:this={variableEditor} />
+{/if}

package/package/components/SchemaForm.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+declare const __propDef: {
+    props: {
+        schema: Schema;
+        args?: Record<string, any> | undefined;
+        disabledArgs?: string[] | undefined;
+        disabled?: boolean | undefined;
+        editableSchema?: boolean | undefined;
+        isValid?: boolean | undefined;
+        autofocus?: boolean | undefined;
+        shouldHideNoInputs?: boolean | undefined;
+        compact?: boolean | undefined;
+        password?: string | undefined;
+        noVariablePicker?: boolean | undefined;
+        flexWrap?: boolean | undefined;
+        noDelete?: boolean | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    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 {};