windmill-components 1.13.0

package/common.d.ts

@@ -0,0 +1,29 @@
+export declare type OwnerKind = 'group' | 'user';
+export declare type ActionKind = 'Create' | 'Update' | 'Delete' | 'Execute';
+export interface SchemaProperty {
+    type: string | undefined;
+    description: string;
+    pattern?: string;
+    default?: any;
+    enum?: string[];
+    contentEncoding?: 'base64' | 'binary';
+    format?: string;
+    items?: {
+        type?: 'string' | 'number' | 'bytes';
+        contentEncoding?: 'base64';
+    };
+}
+export declare type Schema = {
+    $schema: string;
+    type: string;
+    properties: {
+        [name: string]: SchemaProperty;
+    };
+    required: string[];
+};
+export declare type Meta = {
+    ownerKind: OwnerKind;
+    owner: string;
+    name: string;
+};
+export declare function pathToMeta(path: string): Meta;

package/components/ArgInfo.svelte

@@ -0,0 +1,48 @@
+<script>import { truncate } from '../../utils';
+import Modal from './Modal.svelte';
+import Tooltip from './Tooltip.svelte';
+import json from 'svelte-highlight/languages/json';
+import github from 'svelte-highlight/styles/github';
+import { Highlight } from 'svelte-highlight';
+import { ResourceService } from '../../gen';
+import { workspaceStore } from '../../stores';
+export let value;
+let resourceViewer;
+let resource;
+function isString(value) {
+    return typeof value === 'string' || value instanceof String;
+}
+async function getResource(path) {
+    resource = await ResourceService.getResource({ workspace: $workspaceStore, path });
+}
+let asJson = JSON.stringify(value, null, 4);
+</script>
+
+<svelte:head>
+	{@html github}
+</svelte:head>
+
+<Modal bind:this={resourceViewer}>
+	<div slot="title">{resource.path}</div>
+	<div slot="content">
+		<Highlight language={json} code={JSON.stringify(resource.value, null, 4)} />
+	</div>
+</Modal>
+
+{#if value == '<function call>'}
+	{'<function call>'}<Tooltip
+		>The arg was none and the default argument of the script is a function call, hence the actual
+		value used for this arg was the output of the script's function call for this arg</Tooltip
+	>
+{:else if isString(value) && value.startsWith('$res:')}
+	<button
+		class="text-xs text-blue-500"
+		on:click={async () => {
+			await getResource(value.substring('$res:'.length))
+			resourceViewer.openModal()
+		}}>{value}</button
+	>{:else if asJson.length > 40}
+	{truncate(asJson, 40)}<Tooltip>{asJson}</Tooltip>
+{:else}
+	{asJson}
+{/if}

package/components/ArgInput.svelte

@@ -0,0 +1,277 @@
+<script>import Tooltip from './Tooltip.svelte';
+import { slide } from 'svelte/transition';
+import { faChevronDown, faChevronUp, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+import StringTypeNarrowing from './StringTypeNarrowing.svelte';
+import Icon from 'svelte-awesome';
+import ResourcePicker from './ResourcePicker.svelte';
+import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
+import ObjectResourceInput from './ObjectResourceInput.svelte';
+import FieldHeader from './FieldHeader.svelte';
+export let label = '';
+export let value;
+export let defaultValue = undefined;
+export let description = '';
+export let format = '';
+export let contentEncoding = '';
+export let type = undefined;
+export let required = false;
+export let pattern;
+export let valid = required ? false : true;
+export let minRows = 1;
+export let maxRows = 10;
+export let enum_ = undefined;
+export let disabled = false;
+export let editableSchema = false;
+export let itemsType = undefined;
+export let displayHeader = true;
+let seeEditable = enum_ != undefined || pattern != undefined;
+$: minHeight = `${1 + minRows * 1.2}em`;
+$: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
+$: validateInput(pattern, value);
+let error = '';
+let rawValue;
+$: {
+    if (rawValue) {
+        try {
+            value = JSON.parse(rawValue);
+        }
+        catch (err) {
+            error = err.toString();
+        }
+    }
+}
+$: {
+    if (!type || type == 'object' || (type == 'array' && itemsType?.type == undefined)) {
+        evalValueToRaw();
+    }
+    if (defaultValue) {
+        let stringified = JSON.stringify(defaultValue, null, 4);
+        if (stringified.length > 50) {
+            minRows = 3;
+        }
+        if (type != 'string') {
+            minRows = Math.max(minRows, Math.min(stringified.split(/\r\n|\r|\n/).length + 1, maxRows));
+        }
+    }
+}
+export function evalValueToRaw() {
+    rawValue = JSON.stringify(value, null, 4);
+}
+function fileChanged(e, cb) {
+    let t = e.target;
+    if (t && 'files' in t && t.files.length > 0) {
+        let reader = new FileReader();
+        reader.onload = (e) => {
+            cb(e.target.result.split('base64,')[1]);
+        };
+        reader.readAsDataURL(t.files[0]);
+    }
+    else {
+        cb(undefined);
+    }
+}
+function validateInput(pattern, v) {
+    if (required && v == undefined) {
+        error = 'This field is required';
+        valid = false;
+    }
+    else {
+        if (pattern && !testRegex(pattern, v)) {
+            error = `Should match ${pattern}`;
+            valid = false;
+        }
+        else {
+            error = '';
+            valid = true;
+        }
+    }
+}
+function testRegex(pattern, value) {
+    try {
+        const regex = new RegExp(pattern);
+        return regex.test(value);
+    }
+    catch (err) {
+        return false;
+    }
+}
+$: {
+    if (value == undefined) {
+        value = defaultValue;
+    }
+}
+</script>
+
+<div class="flex flex-col w-full">
+	<div>
+		{#if displayHeader}
+			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
+		{/if}
+		{#if editableSchema}
+			<div class="my-1 text-xs border-solid border border-gray-400 rounded p-2">
+				<span
+					class="underline"
+					on:click={() => {
+						seeEditable = !seeEditable
+					}}
+					>Customize argument<Icon
+						class="ml-2"
+						data={seeEditable ? faChevronUp : faChevronDown}
+						scale={0.7}
+					/></span
+				>
+
+				{#if seeEditable}
+					<div transition:slide class="mt-2">
+						<label class="text-gray-700"
+							>Description
+							<textarea rows="1" bind:value={description} placeholder="Edit description" />
+							{#if type == 'string' && !contentEncoding && format != 'date-time'}
+								<StringTypeNarrowing bind:format bind:pattern bind:enum_ />
+							{:else if type == 'object'}
+								<ObjectTypeNarrowing bind:format />
+							{:else if type == 'array'}
+								<select bind:value={itemsType}>
+									<option value={undefined}>No specific item type</option>
+									<option value={{ type: 'string' }}> Items are strings</option>
+									<option value={{ type: 'number' }}>Items are numbers</option>
+									<option value={{ type: 'string', contentEncoding: 'base64' }}
+										>Items are bytes</option
+									>
+								</select>
+							{/if}
+						</label>
+					</div>
+				{/if}
+			</div>
+			<span class="text-2xs">Preview:</span>
+		{/if}
+
+		<div class="grid grid-cols-2">
+			<div class="text-sm italic pb-1">
+				{description}
+			</div>
+			<div class="text-right text-xs {error === '' ? 'text-white' : 'font-bold text-red-600'}">
+				{error === '' ? '...' : error}
+			</div>
+		</div>
+		<div class="container">
+			{#if type == 'number' || type == 'integer'}
+				<input
+					{disabled}
+					type="number"
+					class={valid
+						? ''
+						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
+					placeholder={defaultValue}
+					bind:value
+				/>
+			{:else if type == 'boolean'}
+				<input
+					{disabled}
+					type="checkbox"
+					class={valid
+						? ''
+						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
+					bind:checked={value}
+				/>
+				{#if type == 'boolean' && value == undefined}
+					<span>&nbsp; Not set</span>
+				{/if}
+			{:else if type == 'array' && itemsType?.type != undefined}
+				{#each value ?? [] as v}
+					<div class="flex flex-row max-w-md">
+						{#if itemsType.type == 'number'}
+							<input type="number" bind:value={v} />
+						{:else if itemsType.type == 'string' && itemsType.contentEncoding == 'base64'}
+							<input
+								type="file"
+								class="my-6"
+								on:change={(x) => fileChanged(x, (val) => (v = val))}
+								multiple={false}
+							/>
+						{:else}
+							<input type="text" bind:value={v} />
+						{/if}
+						<button
+							class="default-button-secondary mx-6"
+							on:click={() => {
+								value = value.filter((el) => el != v)
+								if (value.length == 0) {
+									value = undefined
+								}
+							}}><Icon data={faMinus} class="mb-1" /></button
+						>
+					</div>
+				{/each}
+				<button
+					class="default-button-secondary mt-1"
+					on:click={() => {
+						if (value == undefined) {
+							value = []
+						}
+						value = value.concat('')
+					}}>Add item &nbsp;<Icon data={faPlus} class="mb-1" /></button
+				><span class="ml-2">{(value ?? []).length} item(s)</span>
+			{:else if type == 'object' && format?.startsWith('resource')}
+				<ObjectResourceInput {format} bind:value />
+			{:else if !type || type == 'object' || type == 'array'}
+				<textarea
+					{disabled}
+					style="min-height: {minHeight}; max-height: {maxHeight}"
+					class="col-span-10 {valid
+						? ''
+						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
+					placeholder={JSON.stringify(defaultValue, null, 4)}
+					bind:value={rawValue}
+				/>
+			{:else if type == 'string' && enum_}
+				<select {disabled} class="px-6" bind:value>
+					{#each enum_ as e}
+						<option>{e}</option>
+					{/each}
+				</select>
+			{:else if type == 'string' && format == 'date-time'}
+				<input class="inline-block" type="datetime-local" bind:value />
+			{:else if type == 'string' && contentEncoding == 'base64'}
+				<input
+					type="file"
+					class="my-6"
+					on:change={(x) => fileChanged(x, (val) => (value = val))}
+					multiple={false}
+				/>
+			{:else if type == 'string' && format?.startsWith('resource')}
+				<ResourcePicker
+					bind:value
+					resourceType={format.split('-').length > 1
+						? format.substring('resource-'.length)
+						: undefined}
+				/>
+			{:else}
+				<textarea
+					{disabled}
+					style="height: {minHeight}; max-height: {maxHeight}"
+					class="col-span-10 {valid
+						? ''
+						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
+					placeholder={defaultValue}
+					bind:value
+				/>
+			{/if}
+			{#if !required}
+				<div class="flex flex-row-reverse">
+					<button
+						{disabled}
+						class="default-button-secondary items-center leading-4 py-0 my-px px-1 float-right"
+						on:click={() => (value = undefined)}
+						>Reset<Tooltip class="pl-1" position={'above'} direction={'left'}
+							>Reset to default value
+						</Tooltip></button
+					>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style></style>

package/components/AutosizedTextarea.svelte

@@ -0,0 +1,34 @@
+<script>export let value;
+export let placeholder = '';
+export let minRows = 1;
+export let maxRows = 20;
+$: minHeight = `${1 + minRows * 1.2}em`;
+$: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
+</script>
+
+<div class="container">
+	<pre aria-hidden="true" style="min-height: {minHeight}; max-height: {maxHeight}">
+		{value + '\n'}
+	</pre>
+	<textarea class="col-span-10 resize" bind:value {placeholder} />
+</div>
+
+<style>
+	.container {
+		position: relative;
+	}
+
+	pre,
+	textarea {
+		font-family: inherit;
+		padding: 0.5em;
+		box-sizing: border-box;
+		line-height: 1.2;
+		overflow: hidden;
+	}
+	textarea {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+	}</style>

package/components/Badge.svelte

@@ -0,0 +1,12 @@
+<script>import Tooltip from './Tooltip.svelte';
+export let twBgColor = 'bg-blue-200';
+export let twTextColor = 'text-gray-700';
+export let tooltip = undefined;
+</script>
+
+<span class="{twBgColor} {twTextColor} text-2xs rounded px-1 whitespace-nowrap">
+	<slot />
+	{#if tooltip && tooltip != ''}
+		<Tooltip>{tooltip}</Tooltip>
+	{/if}
+</span>

package/components/Button.svelte

@@ -0,0 +1,82 @@
+<script>import { faArchive, faEdit, faList, faPlay, faShare, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+export let category;
+export let disabled = false;
+const dispatch = createEventDispatcher();
+</script>
+
+<button
+	class="{$$props.class} inline-flex items-center default-button py-0 px-1 {category} default-button-secondary"
+	on:click={() => {
+		dispatch('click')
+	}}
+	{disabled}
+>
+	<div class="inline-flex items-center justify-center">
+		{#if category === 'delete'}
+			<Icon data={faTrash} scale={0.5} />
+			<slot name="text">
+				<span class="pl-1">Delete</span>
+			</slot>
+		{:else if category === 'list'}
+			<Icon data={faList} scale={0.5} />
+			<slot name="text">
+				<span class="pl-1">List</span>
+			</slot>
+		{:else if category === 'run'}
+			<Icon data={faPlay} scale={0.5} />
+			<slot name="text">
+				<span class="pl-1">Run</span>
+			</slot>
+		{:else if category === 'edit'}
+			<Icon data={faEdit} scale={0.5} />
+			<slot name="text-gray-500">
+				<span class="pl-1">Edit</span>
+			</slot>
+		{:else if category === 'archive'}
+			<Icon data={faArchive} scale={0.5} />
+			<slot name="text">
+				<span class="pl-1">Archive</span>
+			</slot>
+		{:else if category === 'share'}
+			<Icon data={faShare} scale={0.5} />
+			<slot name="text">
+				<span class="pl-1">Share</span>
+			</slot>
+		{/if}
+	</div>
+</button>
+
+<style>
+	.delete, .archive {
+    background-color: transparent
+}
+.delete:hover, .archive:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(220 38 38 / var(--tw-bg-opacity))
+}
+	.delete, .archive {
+    font-weight: 400;
+    --tw-text-opacity: 1;
+    color: rgb(220 38 38 / var(--tw-text-opacity))
+}
+	.delete:hover, .archive:hover {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity))
+}
+	.delete, .archive {
+    border-radius: 0.25rem;
+    --tw-border-opacity: 1;
+    border-color: rgb(220 38 38 / var(--tw-border-opacity))
+}
+	.delete:hover, .archive:hover {
+    border-color: transparent
+}
+
+	.edit:hover, .play:hover, .list:hover, .share:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity))
+}</style>

package/components/ButtonAndDropdown.svelte

@@ -0,0 +1,25 @@
+<script>import { faSortDown } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+import Dropdown from './Dropdown.svelte';
+export let dropdownItems = [];
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="bg-blue-500 rounded-sm {$$props.class} inline-block py-0 my-0 ">
+	<button
+		class="inline pl-2 text-white text-sm py-0 my-0"
+		on:click={() => {
+			dispatch('clickMain')
+		}}><slot name="name">Add script</slot></button
+	>
+	<Dropdown
+		{dropdownItems}
+		class="border-l border-gray-300 px-2 inline-block py-0 my-0"
+		on:click={() => dispatch('clickDropdown')}
+	>
+		<div slot="name" class="py-0 my-0">
+			<Icon class="text-white align-top py-0 my-0" data={faSortDown} />
+		</div>
+	</Dropdown>
+</div>

package/components/CenteredPage.svelte

@@ -0,0 +1,5 @@
+<div class="max-w-screen-lg flex grow w-full h-full xl:-ml-20">
+	<div class="grow w-full h-full">
+		<slot />
+	</div>
+</div>

package/components/ChevronButton.svelte

@@ -0,0 +1,21 @@
+<script>import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+export let text;
+export let viewOptions = false;
+</script>
+
+<button
+	type="submit"
+	class="mr-6 text-sm underline text-gray-700 inline-flex  items-center"
+	on:click={() => {
+		viewOptions = !viewOptions
+	}}
+>
+	<div>
+		{text}
+		<Icon data={viewOptions ? faChevronUp : faChevronDown} scale={0.5} />
+	</div>
+</button>
+{#if viewOptions}
+	<slot />
+{/if}

package/components/DisplayResult.svelte

@@ -0,0 +1,101 @@
+<script>import { Highlight } from 'svelte-highlight';
+import github from 'svelte-highlight/styles/github';
+import { json } from 'svelte-highlight/languages';
+import TableCustom from './TableCustom.svelte';
+export let result;
+let resultKind = inferResultKind(result);
+function isArray(obj) {
+    return Object.prototype.toString.call(obj) === '[object Array]';
+}
+function isRectangularArray(obj) {
+    if (!isArray(obj) || obj.length == 0) {
+        return false;
+    }
+    if (!Object.values(obj)
+        .map(isArray)
+        .reduce((a, b) => a && b)) {
+        return false;
+    }
+    let innerSize = obj[0].length;
+    return Object.values(obj)
+        .map((x) => x.length == innerSize)
+        .reduce((a, b) => a && b);
+}
+function asListOfList(obj) {
+    return obj;
+}
+function inferResultKind(result) {
+    if (result) {
+        try {
+            let keys = Object.keys(result);
+            if (keys.length == 1 && isRectangularArray(result[keys[0]])) {
+                return 'table-row';
+            }
+            else if (keys.map((k) => isArray(result[k])).reduce((a, b) => a && b)) {
+                return 'table-col';
+            }
+            else if (keys.length == 1 && keys[0] == 'png') {
+                return 'png';
+            }
+            else if (keys.length == 1 && keys[0] == 'file') {
+                return 'file';
+            }
+        }
+        catch (err) { }
+    }
+    return 'json';
+}
+</script>
+
+<svelte:head>
+	{@html github}
+</svelte:head>
+{#if Object.keys(result).length > 0}<div>
+		The result keys are: <b>{Object.keys(result).join(', ')}</b>
+	</div>
+{/if}
+{#if resultKind == 'table-col'}
+	<div class="grid grid-flow-col-dense border border-gray-200 rounded-md ">
+		{#each Object.keys(result) as col}
+			<div class="flex flex-col  min-w-full">
+				<div class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md ">
+					{col}
+				</div>
+				{#each result[col] as item}
+					<div class="px-12 text-left">{item}</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+{:else if resultKind == 'table-row'}<div
+		class="grid grid-flow-col-dense border border-gray-200 rounded-md "
+	>
+		<TableCustom>
+			<tbody slot="body">
+				{#each asListOfList(Object.values(result)[0]) as row}
+					<tr>
+						{#each row as v}
+							<td>{v ?? ''}</td>
+						{/each}
+					</tr>
+				{/each}
+			</tbody>
+		</TableCustom>
+	</div>
+{:else if resultKind == 'png'}
+	<div class="h-full">
+		Result is an image: <img
+			alt="png rendered"
+			class="w-auto h-full"
+			src="data:image/png;base64,{result.png}"
+		/>
+	</div>
+{:else if resultKind == 'file'}
+	<div>
+		Result is a file: <a
+			download="windmill.file"
+			href="data:application/octet-stream;base64,{result.file}">Download</a
+		>
+	</div>
+{:else}<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+{/if}