windmill-components 1.13.0

package/components/RunForm.svelte

@@ -0,0 +1,127 @@
+<script>import { page } from '$app/stores';
+import { 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';
+export let runnable;
+export let runAction;
+export let buttonText = 'Run';
+export let schedulable = true;
+export let detailed = true;
+export let args = {};
+let isValid = true;
+let queryArgs = $page.url.searchParams.get('args');
+if (queryArgs) {
+    const parsed = JSON.parse(atob(queryArgs));
+    Object.entries(parsed).forEach(([k, v]) => {
+        if (v == '<function call>') {
+            parsed[k] = undefined;
+        }
+    });
+    console.log(parsed);
+    args = parsed;
+}
+// Run later
+let viewOptions = false;
+let scheduledForStr;
+</script>
+
+<div class="max-w-5xl">
+	{#if detailed}
+		<div class="grid grid-cols-3 gap-2">
+			<div>
+				<h2 class="mb-1">Summary</h2>
+				<div class="mb-2 md:mb-3 text-sm">
+					{runnable?.summary ? runnable?.summary : 'No summary'}
+				</div>
+			</div>
+			<div class="col-span-2">
+				<h2 class="mb-1">Description</h2>
+				<div class="mb-2 md:mb-6">
+					<div class="prose text-sm">
+						<SvelteMarkdown
+							source={runnable?.description ? runnable?.description : 'No description'}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	{/if}
+	{#if runnable?.schema}
+		{#if detailed}
+			<h2>
+				Arguments<Tooltip class="px-2 mb-6"
+					>Optioal 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>
+		{:else}
+			<div
+				class="bg-gray-50 border border shadow-md shadow-blue-100 shadow-inner rounded border-gray-300 p-6"
+			>
+				<SchemaForm schema={runnable.schema} bind:isValid bind:args />
+			</div>
+		{/if}
+	{:else}
+		<div class="text-sm">No schema</div>
+	{/if}
+	{#if viewOptions}
+		<div transition:slide class="mt-6">
+			<h2>Run later</h2>
+			<div class="border rounded-md p-3 pt-4">
+				<div class="flex flex-row items-end">
+					<div class="w-max md:w-2/3 mt-2 mb-1">
+						<label for="run-time" />
+						<input
+							class="inline-block"
+							type="datetime-local"
+							id="run-time"
+							name="run-scheduled-time"
+							bind:value={scheduledForStr}
+							min={getToday().toISOString().slice(0, 16)}
+						/>
+					</div>
+					<button
+						class="default-button-secondary mx-2 mb-1"
+						on:click={() => {
+							scheduledForStr = undefined
+						}}>clear</button
+					>
+				</div>
+			</div>
+		</div>
+	{/if}
+	<div class="flex justify-between mt-2 md:mt-6 mb-6">
+		<button
+			type="submit"
+			class="mr-6 text-sm underline text-gray-700 inline-flex  items-center"
+			on:click={() => {
+				viewOptions = !viewOptions
+			}}
+		>
+			{#if schedulable}
+				<div>
+					schedule to run later <Icon
+						data={viewOptions ? faChevronUp : faChevronDown}
+						scale={0.5}
+					/>
+				</div>
+			{/if}
+		</button>
+		<button
+			type="submit"
+			disabled={!isValid}
+			class="{isValid ? 'default-button' : 'default-button-disabled'} w-min px-6"
+			on:click={() => {
+				runAction(scheduledForStr, args)
+			}}
+		>
+			{scheduledForStr ? 'Schedule run to a later time' : buttonText}
+		</button>
+	</div>
+</div>

package/components/SchemaEditor.svelte

@@ -0,0 +1,221 @@
+<script>import SchemaModal, { DEFAULT_PROPERTY, modalToSchema, schemaToModal } from './SchemaModal.svelte';
+import Editor from './Editor.svelte';
+import { emptySchema, sendUserToast } from '../../utils';
+import Tooltip from './Tooltip.svelte';
+import TableCustom from './TableCustom.svelte';
+export let 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;
+let editor;
+$: schemaString = JSON.stringify(schema, null, '\t');
+export function getEditor() {
+    return editor;
+}
+// Binding is not enough because monaco Editor does not support two-way binding
+export function getSchema() {
+    if (viewJsonSchema) {
+        try {
+            schema = JSON.parse(editor.getCode());
+            return schema;
+        }
+        catch (err) {
+            throw Error(`Error: input is not a valid schema: ${err}`);
+        }
+    }
+    else {
+        try {
+            editor.setCode(JSON.stringify(schema, null, '\t'));
+            return schema;
+        }
+        catch (err) {
+            throw Error(`Error: input is not a valid schema: ${err}`);
+        }
+    }
+}
+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) {
+            schema.required = [...schema.required, 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.closeModal();
+    }
+}
+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;
+    }
+    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 = schema; //needed for reactivity, see https://svelte.dev/tutorial/updating-arrays-and-objects
+        }
+        else {
+            throw Error('Argument not found!');
+        }
+    }
+    catch (err) {
+        console.error(err);
+        sendUserToast(`Could not delete argument: ${err}`, true);
+    }
+}
+function switchTab() {
+    if (viewJsonSchema) {
+        let schemaString = editor.getCode();
+        if (schemaString === '') {
+            schemaString = JSON.stringify(emptySchema(), null, 4);
+        }
+        try {
+            schema = JSON.parse(schemaString);
+            viewJsonSchema = false;
+        }
+        catch (err) {
+            sendUserToast(err, true);
+        }
+    }
+    else {
+        try {
+            editor.setCode(JSON.stringify(schema, null, '\t'));
+            viewJsonSchema = true;
+        }
+        catch (err) {
+            sendUserToast(err, true);
+        }
+    }
+}
+</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>
+	</div>
+	<!--json schema or table view-->
+	<div class="border-t py-1  h-full overflow-y-auto">
+		<div class="h-full {viewJsonSchema ? 'hidden' : ''}">
+			{#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>
+					</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>{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
+									>
+									<button
+										class="default-button-secondary text-xs inline-flex"
+										on:click={() => {
+											startEditArgument(name)
+										}}>edit</button
+									></td
+								>
+							</tr>
+						{/each}
+					</tbody>
+				</TableCustom>
+			{:else}
+				<div class="text-gray-700 text-xs italic">This script has no argument</div>
+			{/if}
+		</div>
+		<div class={viewJsonSchema ? '' : 'hidden'}>
+			<Editor code={schemaString} bind:this={editor} lang={'json'} class="small-editor" />
+		</div>
+	</div>
+</div>
+
+<SchemaModal
+	bind:this={schemaModal}
+	bind:property={modalProperty}
+	bind:error={argError}
+	on:save={handleAddOrEditArgument}
+	bind:editing
+	bind:oldArgName
+/>

package/components/SchemaForm.svelte

@@ -0,0 +1,166 @@
+<script>import { allTrue } from '../../utils';
+import { slide } from 'svelte/transition';
+import ArgInput from './ArgInput.svelte';
+import RadioButton from './RadioButton.svelte';
+import Editor from './Editor.svelte';
+import FieldHeader from './FieldHeader.svelte';
+import Icon from 'svelte-awesome';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+export let inputTransform = false;
+export let schema;
+export let args = {};
+export let isValid = true;
+export let editableSchema = false;
+let inputCheck = {};
+let seeHelp = {};
+export function setArgs(nargs) {
+    args = nargs;
+}
+$: isValid = allTrue(inputCheck) ?? false;
+</script>
+
+<div class="w-full">
+	{#if Object.keys(schema?.properties ?? {}).length > 0}
+		{#each Object.keys(schema?.properties ?? {}) as argName}
+			{#if inputTransform && args[argName] != undefined}
+				<div class="mt-10" />
+				<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}
+				/>
+				<div class="max-w-xs">
+					<RadioButton
+						options={[
+							['Static', 'static'],
+							['Dynamic (JS)', 'javascript']
+						]}
+						small={true}
+						bind:value={args[argName].type}
+						on:change={(e) => {
+							console.log(e.detail)
+							args[argName].expr =
+								e.detail == 'javascript'
+									? `import { previous_result, flow_input, step, variable, resource, params } from 'windmill'
+
+previous_result.myfield`
+									: undefined
+						}}
+					/>
+				</div>
+				{#if args[argName].type == 'static'}
+					<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}
+					/>
+				{:else if args[argName].type == 'javascript'}
+					{#if args[argName].expr != undefined}
+						<div class="border rounded p-2 mt-2 border-gray-500">
+							<Editor bind:code={args[argName].expr} lang="typescript" class="few-lines-editor" />
+						</div>
+						<div class="text-xs flex flex-row-reverse">
+							<span
+								class="underline mr-4"
+								on:click={() => {
+									seeHelp[argName] = seeHelp[argName] == undefined ? true : !seeHelp[argName]
+								}}
+								>Help<Icon
+									class="ml-2"
+									data={seeHelp[argName] ? faChevronUp : faChevronDown}
+									scale={0.7}
+								/></span
+							>
+						</div>
+						{#if seeHelp[argName]}
+							<div
+								transition:slide
+								class="bg-gray-100 border-l-4 border-gray-600 text-gray-700 p-4 m-4"
+								role="alert"
+							>
+								<p class="font-bold">Dynamic arg help</p>
+								<p>
+									When a field is "dynamic", its value is computed dynamically as the evaluation of
+									its corresponding typescript snippet.
+								</p>
+								That snippet can be single line:
+								<pre><code>last_result.myarg</code></pre>
+								or multiline:
+								<pre><code
+										>let x = 5;
+x + 2</code
+									></pre>
+								<p>
+									If it is multiline, the last statement before the final expression<b
+										>MUST END WITH ; and a newline</b
+									>
+								</p>
+								The snippet can also be a string template:
+								<pre><code
+										>`Hello $&#123;params.name&#125;, all your base $&#123;previous_result.base_name&#125;
+belong to us`</code
+									></pre>
+								However, the last line must always be the final expression.
+								<p>
+									The snippet can use any typescript primitives, and the following flow specific
+									objects and functions:
+								</p>
+								<ul class="ml-4">
+									<li>
+										<b>previous_result</b>: the object containing the result of the previous step
+									</li>
+									<li><b>flow_input</b>: the object containing the flow input arguments</li>
+									<li><b>params</b>: the object containing the current step static values</li>
+									<li>
+										<b>step(n)</b>: the function returning the result of step number n. One can also
+										use a negative n. step(0) == flow_input , step(-1) == previous_result
+									</li>
+									<li>
+										<b>variable(path)</b>: the function returning the variable (including secrets)
+										at given path as a string
+									</li>
+									<li>
+										<b>resource(path)</b>: the function returning the resource at a given path as an
+										object
+									</li>
+								</ul>
+							</div>
+						{/if}
+					{/if}
+				{:else}
+					<p>Not recognized arg type {args[argName].type}</p>
+				{/if}
+			{:else}
+				<ArgInput
+					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}
+					bind:itemsType={schema.properties[argName].items}
+					{editableSchema}
+				/>{/if}
+		{/each}
+	{:else}
+		<p class="italic text-sm">No settable input</p>
+	{/if}
+</div>

package/components/SchemaModal.svelte

@@ -0,0 +1,160 @@
+<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,
+        selectedType: schema.type,
+        description: schema.description,
+        pattern: schema.pattern,
+        default: schema.default,
+        required
+    };
+}
+export const DEFAULT_PROPERTY = {
+    selectedType: 'string',
+    description: '',
+    name: '',
+    required: false
+};
+</script>
+
+<script>import Switch from './Switch.svelte';
+import { createEventDispatcher } from 'svelte';
+import ArgInput from './ArgInput.svelte';
+import StringTypeNarrowing from './StringTypeNarrowing.svelte';
+import Required from './Required.svelte';
+export let property = DEFAULT_PROPERTY;
+export let error = '';
+export let editing = false;
+export let oldArgName;
+const dispatch = createEventDispatcher();
+let modal;
+export function openModal() {
+    modal.openModal();
+}
+export function closeModal() {
+    modal.closeModal();
+}
+function clearModal() {
+    error = '';
+    editing = false;
+    oldArgName = undefined;
+    property.name = DEFAULT_PROPERTY.name;
+    property.default = DEFAULT_PROPERTY.default;
+    property.description = DEFAULT_PROPERTY.description;
+    property.required = DEFAULT_PROPERTY.required;
+    property.selectedType = DEFAULT_PROPERTY.selectedType;
+}
+</script>
+
+<Modal bind:this={modal} on:close={clearModal}>
+	<div slot="title">Add an argument</div>
+	<div slot="content">
+		<div class="flex flex-col px-6 py-3 bg-gray-50">
+			<div class="text-purple-500 text-2xs grow">{error}</div>
+			<label class="mb-2 font-semibold text-gray-700"
+				>Name<Required required={true} />
+				<input type="text" placeholder="Argument name" class="" bind:value={property.name} />
+			</label>
+			<label class="mb-2 font-semibold text-gray-700">
+				Description
+				<textarea
+					class="mb-1"
+					type="text"
+					placeholder="Type message..."
+					rows="3"
+					bind:value={property.description}
+				/>
+			</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">
+				{#each ARG_TYPES as argType}
+					<button
+						class={argType == property.selectedType ? 'item-button-selected' : 'item-button'}
+						on:click={() => {
+							property.selectedType = argType
+						}}>{argType}</button
+					>
+				{/each}
+				<button
+					class={!property.selectedType ? 'item-button-selected' : 'item-button'}
+					on:click={() => {
+						property.selectedType = undefined
+					}}>any</button
+				>
+			</div>
+			<Switch
+				label={'Required'}
+				textFormat={'text-md font-semibold text-gray-700'}
+				class="my-2"
+				bind:checked={property.required}
+			/>
+			<ArgInput
+				label="Default"
+				bind:value={property.default}
+				type={property.selectedType}
+				pattern={property.pattern}
+			/>
+			{#if property.selectedType !== 'boolean'}
+				<h2 class="mb-2">Advanced</h2>
+
+				{#if property.selectedType == 'string'}
+					<StringTypeNarrowing
+						bind:format={property.format}
+						bind:pattern={property.pattern}
+						bind:enum_={property.enum_}
+					/>
+				{:else if property.selectedType == 'array'}
+					<select bind:value={property.items}>
+						<option value={undefined}>No specific item type</option>
+						<option value={{ type: 'string' }}> Items are strings</option>
+						<option value={{ type: 'number' }}>Items are numbers</option>
+					</select>
+				{:else}
+					<p>No advanced configuration for this type</p>
+				{/if}
+			{/if}
+		</div>
+	</div>
+
+	<button
+		slot="submission"
+		class="px-4 py-2 text-white font-semibold bg-blue-500 rounded"
+		on:click={() => {
+			dispatch('save')
+		}}
+	>
+		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>