windmill-components 1.60.4 → 1.83.1

package/components/FolderEditor.svelte

@@ -50,7 +50,7 @@ async function loadFolder() {
     can_write =
         $userStore != undefined &&
             (folder?.owners.includes('u/' + $userStore.username) ||
-                ($userStore.is_admin ?? false) ||
+                ($userStore.is_admin ?? false) || ($userStore.is_super_admin ?? false) ||
                 $userStore.pgroups.findIndex((x) => folder?.owners.includes(x)) != -1);
     perms = Array.from(new Set(Object.entries(folder?.extra_perms ?? {})
         .map((x) => x[0])
@@ -146,7 +146,8 @@ let ownerKind = 'user';
 													path: name,
 													kind: 'folder',
 													requestBody: {
-														owner: owner_name
+														owner: owner_name,
+														write: true
 													}
 												})
 											} else if (role == 'writer') {

package/components/FolderUsageInfo.svelte

@@ -1,6 +1,8 @@
 <script>import { FolderService, GroupService } from '../gen';
 import { workspaceStore } from '../stores';
 export let name;
+export let tabular = false;
+export let order = ['scripts', 'flows', 'apps', 'schedules', 'variables', 'resources'];
 $: $workspaceStore && loadUsage();
 let usage = {};
 async function loadUsage() {
@@ -8,10 +10,18 @@ async function loadUsage() {
 }
 </script>
 
-<div class="flex flex-col text-xs text-gray-600">
-	{#each Object.entries(usage) as [k, v]}
-		<div>
-			{k}: {v}
-		</div>
+{#if tabular}
+	{#each order as key}
+		<td class="text-center">
+			{usage[key] ?? ''}
+		</td>
 	{/each}
-</div>
+{:else}
+	<div class="flex flex-col text-xs text-gray-600">
+		{#each Object.entries(usage) as [k, v]}
+			<div>
+				{k}: {v}
+			</div>
+		{/each}
+	</div>
+{/if}

package/components/FolderUsageInfo.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         name: string;
+        tabular?: boolean | undefined;
+        order?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/GroupEditor.svelte

@@ -219,6 +219,14 @@ function getRole(x) {
 											name,
 											requestBody: { username: member_name }
 										})
+										await GranularAclService.removeGranularAcls({
+											workspace: $workspaceStore ?? '',
+											path: name,
+											kind: 'group_',
+											requestBody: {
+												owner: 'u/' + member_name
+											}
+										})
 										loadGroup()
 									}}>remove</button
 								>

package/components/HighlightCode.svelte

@@ -22,4 +22,10 @@ function getLang(lang) {
 $: lang = getLang(language);
 </script>
 
-<Highlight className="nowrap {$$props.class}" language={lang} {code} />
+{#if code?.length < 5000}
+	<Highlight className="nowrap {$$props.class}" language={lang} {code} />
+{:else}
+	<pre class="overflow-auto max-h-screen {$$props.class}"
+		><code class="language-{language}">{code}</code></pre
+	>
+{/if}

package/components/InlineCodeCopy.svelte

@@ -0,0 +1,11 @@
+<script>import { copyToClipboard } from '../utils';
+import { faClipboard } from '@fortawesome/free-solid-svg-icons';
+import { Icon } from 'svelte-awesome';
+export let content;
+</script>
+
+<pre class="bg-gray-700 text-gray-100 p-2  font-mono text-sm whitespace-pre-wrap"
+	>{content} <span on:click={() => copyToClipboard(content)} class="cursor-pointer ml-2"
+		><Icon data={faClipboard} /></span
+	></pre
+>

package/components/InlineCodeCopy.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        content: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlineCodeCopyProps = typeof __propDef.props;
+export type InlineCodeCopyEvents = typeof __propDef.events;
+export type InlineCodeCopySlots = typeof __propDef.slots;
+export default class InlineCodeCopy extends SvelteComponentTyped<InlineCodeCopyProps, InlineCodeCopyEvents, InlineCodeCopySlots> {
+}
+export {};

package/components/InputTransformForm.svelte

@@ -40,7 +40,7 @@ function setPropertyType(rawValue) {
         return;
     }
     if (isCodeInjection(rawValue)) {
-        arg.expr = getDefaultExpr(argName, previousModuleId, `\`${rawValue}\``);
+        arg.expr = getDefaultExpr(argName, previousModuleId, `\`${rawValue.toString().replaceAll('`', '\\`')}\``);
         arg.type = 'javascript';
         propertyType = 'static';
     }
@@ -57,17 +57,10 @@ function isStaticTemplate(inputCat) {
     return inputCat === 'string' || inputCat === 'sql' || inputCat == 'yaml';
 }
 function connectProperty(rawValue) {
-    if (isStaticTemplate(inputCat)) {
-        arg.value = `\$\{${rawValue}}`;
-        setPropertyType(arg.value);
-        monacoTemplate?.setCode(arg.value);
-    }
-    else {
-        arg.expr = getDefaultExpr(undefined, previousModuleId, rawValue);
-        arg.type = 'javascript';
-        propertyType = 'javascript';
-        monaco?.setCode(arg.expr);
-    }
+    arg.expr = getDefaultExpr(undefined, previousModuleId, rawValue);
+    arg.type = 'javascript';
+    propertyType = 'javascript';
+    monaco?.setCode(arg.expr);
 }
 function onFocus() {
     if (isStaticTemplate(inputCat)) {
@@ -94,9 +87,12 @@ const { focusProp, propPickerConfig } = getContext('PropPickerWrapper');
 $: isStaticTemplate(inputCat) && propertyType == 'static' && setPropertyType(arg?.value);
 const openBracket = '${';
 const closeBracket = '}';
-$: schema.properties[argName].default &&
-    !arg?.value &&
-    monacoTemplate?.setCode(schema.properties[argName].default);
+function setDefaultCode() {
+    if (!arg?.value) {
+        monacoTemplate?.setCode(schema.properties[argName].default);
+    }
+}
+$: schema.properties[argName].default && setDefaultCode();
 </script>
 
 {#if arg != undefined}
@@ -108,7 +104,6 @@ $: schema.properties[argName].default &&
 				contentEncoding={schema.properties[argName].contentEncoding}
 				required={schema.required.includes(argName)}
 				type={schema.properties[argName].type}
-				itemsType={schema.properties[argName].items}
 			/>
 
 			{#if isStaticTemplate(inputCat)}
@@ -123,7 +118,7 @@ $: schema.properties[argName].default &&
 			{/if}
 		</div>
 		{#if !noDynamicToggle}
-			<div class="flex flex-row gap-x-4 gap-y-1 flex-wrap">
+			<div class="flex flex-row gap-x-4 gap-y-1 flex-wrap z-10">
 				<ToggleButtonGroup
 					bind:selected={propertyType}
 					on:selected={(e) => {
@@ -134,7 +129,7 @@ $: schema.properties[argName].default &&
 									argName,
 									previousModuleId,
 									staticTemplate
-										? `\`${arg?.value ?? ''}\``
+										? `\`${arg?.value?.toString().replaceAll('`', '\\`') ?? ''}\``
 										: arg.value
 										? JSON.stringify(arg?.value, null, 4)
 										: ''
@@ -149,6 +144,7 @@ $: schema.properties[argName].default &&
 							if (staticTemplate) {
 								if (arg) {
 									arg.value = codeToStaticTemplate(arg.expr)
+									arg.expr = undefined
 								}
 								setPropertyType(arg?.value)
 							} else {
@@ -164,10 +160,10 @@ $: schema.properties[argName].default &&
 				>
 					{#if isStaticTemplate(inputCat)}
 						<ToggleButton light position="left" value="static" size="xs">
-							{'${} '}Template &nbsp; <Tooltip
-								>Write javascript expressions between "{openBracket}" and "{closeBracket}". You may
-								refer to contextual objects like 'flow_input', or 'result' or functions like
-								'resource' and 'variable'
+							{'${} '}&nbsp;
+							<Tooltip
+								>Write text or surround javascript with "{openBracket}" and "{closeBracket}". Use
+								`result` to connect to another node's output.
 							</Tooltip></ToggleButton
 						>
 					{:else}
@@ -180,9 +176,11 @@ $: schema.properties[argName].default &&
 						value="javascript"
 						startIcon={{ icon: faCode }}
 						size="xs"
+						>&nbsp;<Tooltip
+							>Write javascript expressions directly, using 'flow_input' or 'result'. You can use
+							multiline javascript.
+						</Tooltip></ToggleButton
 					>
-						Dynamic (JS)
-					</ToggleButton>
 				</ToggleButtonGroup>
 				<Button
 					variant="contained"
@@ -273,6 +271,4 @@ $: schema.properties[argName].default &&
 			Not recognized input type {argName}
 		{/if}
 	</div>
-{:else}
-	<p class="text-sm text-gray-700">Argument at {argName} is undefined</p>
 {/if}

package/components/InputTransformSchemaForm.svelte

@@ -0,0 +1,103 @@
+<script>import { VariableService } from '../gen';
+import { workspaceStore } from '../stores';
+import { allTrue } from '../utils';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { Button } from './common';
+import InputTransformForm from './InputTransformForm.svelte';
+import ItemPicker from './ItemPicker.svelte';
+import VariableEditor from './VariableEditor.svelte';
+export let schema;
+export let args = {};
+export let isValid = true;
+export let extraLib = 'missing extraLib';
+export let previousModuleId = undefined;
+export let filter = undefined;
+export let noDynamicToggle = 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;
+        removeExtraKey();
+    }
+}
+</script>
+
+<div class="w-full {clazz}">
+	{#if keys.length > 0}
+		{#each keys as argName, i (argName)}
+			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
+				<div class="z-10">
+					<InputTransformForm
+						{previousModuleId}
+						bind:arg={args[argName]}
+						bind:schema
+						bind:argName
+						bind:inputCheck={inputCheck[argName]}
+						bind:extraLib
+						{variableEditor}
+						{itemPicker}
+						bind:pickForField
+						{noDynamicToggle}
+					/>
+				</div>
+			{/if}
+		{/each}
+	{:else}
+		<div class="text-gray-500 text-sm">No inputs</div>
+	{/if}
+</div>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, _) => {
+		if (pickForField) {
+			args[pickForField].value = '$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} />

package/components/InputTransformSchemaForm.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+declare const __propDef: {
+    props: {
+        schema: Schema;
+        args?: Record<string, any> | undefined;
+        isValid?: boolean | undefined;
+        extraLib?: string | undefined;
+        previousModuleId?: string | undefined;
+        filter?: string[] | undefined;
+        noDynamicToggle?: boolean | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputTransformSchemaFormProps = typeof __propDef.props;
+export type InputTransformSchemaFormEvents = typeof __propDef.events;
+export type InputTransformSchemaFormSlots = typeof __propDef.slots;
+export default class InputTransformSchemaForm extends SvelteComponentTyped<InputTransformSchemaFormProps, InputTransformSchemaFormEvents, InputTransformSchemaFormSlots> {
+}
+export {};

package/components/LightweightArgInput.svelte

@@ -0,0 +1,302 @@
+<script>import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { setInputCat as computeInputCat } from '../utils';
+import { Badge, Button } from './common';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+import FieldHeader from './FieldHeader.svelte';
+import ObjectResourceInput from './ObjectResourceInput.svelte';
+import ResourcePicker from './ResourcePicker.svelte';
+import autosize from 'svelte-autosize';
+import Toggle from './Toggle.svelte';
+import Range from './Range.svelte';
+import LightweightSchemaForm from './LightweightSchemaForm.svelte';
+export let label = '';
+export let value;
+export let defaultValue = undefined;
+export let description = '';
+export let format = '';
+export let contentEncoding = undefined;
+export let type = undefined;
+export let required = false;
+export let pattern = undefined;
+export let valid = required ? false : true;
+export let maxRows = 10;
+export let enum_ = undefined;
+export let itemsType = undefined;
+export let displayHeader = true;
+export let properties = undefined;
+export let extra = {};
+const dispatch = createEventDispatcher();
+$: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
+$: validateInput(pattern, value);
+let error = '';
+let el = undefined;
+let rawValue = undefined;
+$: {
+    if (rawValue) {
+        try {
+            value = JSON.parse(rawValue);
+            error = '';
+        }
+        catch (err) {
+            error = err.toString();
+        }
+    }
+}
+$: {
+    error = '';
+    if (inputCat === 'object') {
+        evalValueToRaw();
+        validateInput(pattern, value);
+    }
+}
+export function evalValueToRaw() {
+    if (value) {
+        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);
+    }
+}
+export function focus() {
+    el?.focus();
+    if (el) {
+        el.style.height = '5px';
+        el.style.height = el.scrollHeight + 50 + 'px';
+    }
+}
+function validateInput(pattern, v) {
+    if (required && (v == undefined || v == null || v === '')) {
+        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 == null) {
+        value = defaultValue;
+        if (defaultValue === undefined || defaultValue === null) {
+            if (inputCat === 'string') {
+                value = '';
+            }
+            else if (inputCat == 'enum') {
+                value = enum_?.[0];
+            }
+            else if (inputCat == 'boolean') {
+                value = false;
+            }
+        }
+    }
+}
+$: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
+</script>
+
+<div class="flex flex-col w-full min-w-[250px]">
+	<div>
+		{#if displayHeader}
+			<FieldHeader {label} {required} {type} {contentEncoding} {format} />
+		{/if}
+
+		{#if description}
+			<div class="text-sm italic pb-1">
+				{description}
+			</div>
+		{/if}
+
+		<div class="flex space-x-1">
+			{#if inputCat == 'number'}
+				{#if extra['min'] != undefined && extra['max'] != undefined}
+					<div class="flex w-full gap-1">
+						<span>{extra['min']}</span>
+						<div class="grow">
+							<Range bind:value min={extra['min']} max={extra['max']} />
+						</div>
+						<span>{extra['max']}</span>
+						<span class="mx-2"><Badge large color="blue">{value}</Badge></span>
+					</div>
+				{:else}
+					<input
+						on:focus={(e) => {
+							dispatch('focus')
+						}}
+						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
+						min={extra['min']}
+						max={extra['max']}
+					/>
+				{/if}
+			{:else if inputCat == 'boolean'}
+				<Toggle
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+					}}
+					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 inputCat == 'list'}
+				<div>
+					<div>
+						{#each value ?? [] as v, i}
+							<div class="flex flex-row max-w-md mt-1">
+								{#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) => (value[i] = val))}
+										multiple={false}
+									/>
+								{:else}
+									<input type="text" bind:value={v} />
+								{/if}
+								<Button
+									variant="border"
+									color="red"
+									size="sm"
+									btnClasses="mx-6"
+									on:click={() => {
+										value = value.filter((el) => el != v)
+										if (value.length == 0) {
+											value = undefined
+										}
+									}}
+								>
+									<Icon data={faMinus} />
+								</Button>
+							</div>
+						{/each}
+					</div>
+					<Button
+						variant="border"
+						color="blue"
+						size="sm"
+						btnClasses="mt-1"
+						on:click={() => {
+							if (value == undefined || !Array.isArray(value)) {
+								value = []
+							}
+							value = value.concat('')
+						}}
+					>
+						<Icon data={faPlus} class="mr-2" />
+						Add item
+					</Button>
+					<span class="ml-2">
+						{(value ?? []).length} item{(value ?? []).length > 1 ? 's' : ''}
+					</span>
+				</div>
+			{:else if inputCat == 'resource-object'}
+				<ObjectResourceInput {format} bind:value />
+			{:else if inputCat == 'object'}
+				{#if properties && Object.keys(properties).length > 0}
+					<div class="p-4 pl-8 border rounded w-full">
+						<LightweightSchemaForm
+							schema={{ properties, $schema: '', required: [], type: 'object' }}
+							bind:args={value}
+						/>
+					</div>
+				{:else}
+					<textarea
+						bind:this={el}
+						on:focus={(e) => {
+							dispatch('focus')
+						}}
+						use:autosize
+						style="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 ? JSON.stringify(defaultValue, null, 4) : ''}
+						bind:value={rawValue}
+					/>
+				{/if}
+			{:else if inputCat == 'enum'}
+				<select
+					on:focus={(e) => {
+						dispatch('focus')
+					}}
+					class="px-6"
+					bind:value
+				>
+					{#each enum_ ?? [] as e}
+						<option>{e}</option>
+					{/each}
+				</select>
+			{:else if inputCat == 'date'}
+				<input class="inline-block" type="datetime-local" bind:value />
+			{:else if inputCat == 'base64'}
+				<input
+					type="file"
+					class="my-6"
+					on:change={(x) => fileChanged(x, (val) => (value = val))}
+					multiple={false}
+				/>
+			{:else if inputCat == 'resource-string'}
+				<ResourcePicker
+					bind:value
+					resourceType={format.split('-').length > 1
+						? format.substring('resource-'.length)
+						: undefined}
+				/>
+			{:else if inputCat == 'string'}
+				<div class="flex flex-col w-full">
+					<div class="flex flex-row w-full items- justify-between">
+						<textarea
+							rows="1"
+							bind:this={el}
+							on:focus={(e) => {
+								dispatch('focus')
+							}}
+							use:autosize
+							type="text"
+							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
+						/>
+					</div>
+				</div>
+			{/if}
+			<slot name="actions" />
+		</div>
+	</div>
+</div>