windmill-components 1.60.4 → 1.83.1

package/components/LightweightArgInput.svelte.d.ts

@@ -0,0 +1,45 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SchemaProperty } from '../common';
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        value: any;
+        defaultValue?: any;
+        description?: string | undefined;
+        format?: string | undefined;
+        contentEncoding?: 'base64' | 'binary' | undefined;
+        type?: string | undefined;
+        required?: boolean | undefined;
+        pattern?: undefined | string;
+        valid?: boolean | undefined;
+        maxRows?: number | undefined;
+        enum_?: string[] | undefined;
+        itemsType?: {
+            type?: "string" | "number" | "object" | "bytes" | undefined;
+            contentEncoding?: "base64" | undefined;
+        } | undefined;
+        displayHeader?: boolean | undefined;
+        properties?: {
+            [name: string]: SchemaProperty;
+        } | undefined;
+        extra?: Record<string, any> | undefined;
+        evalValueToRaw?: (() => void) | undefined;
+        focus?: (() => void) | undefined;
+    };
+    events: {
+        focus: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        actions: {};
+    };
+};
+export type LightweightArgInputProps = typeof __propDef.props;
+export type LightweightArgInputEvents = typeof __propDef.events;
+export type LightweightArgInputSlots = typeof __propDef.slots;
+export default class LightweightArgInput extends SvelteComponentTyped<LightweightArgInputProps, LightweightArgInputEvents, LightweightArgInputSlots> {
+    get evalValueToRaw(): () => void;
+    get focus(): () => void;
+}
+export {};

package/components/LightweightSchemaForm.svelte

@@ -0,0 +1,31 @@
+<script>import LightweightArgInput from './LightweightArgInput.svelte';
+export let schema;
+export let args = undefined;
+$: if (args === undefined) {
+    args = {};
+}
+</script>
+
+<div class="w-full">
+	{#each Object.keys(schema.properties ?? {}) as argName, i (argName)}
+		<div>
+			{#if typeof args == 'object' && schema?.properties[argName] && args}
+				<LightweightArgInput
+					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}
+					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}
+					extra={schema.properties[argName]}
+				/>
+			{/if}
+		</div>
+	{/each}
+</div>

package/components/LightweightSchemaForm.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+declare const __propDef: {
+    props: {
+        schema: Schema;
+        args?: Record<string, any> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LightweightSchemaFormProps = typeof __propDef.props;
+export type LightweightSchemaFormEvents = typeof __propDef.events;
+export type LightweightSchemaFormSlots = typeof __propDef.slots;
+export default class LightweightSchemaForm extends SvelteComponentTyped<LightweightSchemaFormProps, LightweightSchemaFormEvents, LightweightSchemaFormSlots> {
+}
+export {};

package/components/LogViewer.svelte

@@ -3,6 +3,7 @@ import { Drawer, DrawerContent } from './common';
 export let content;
 export let isLoading;
 export let duration = undefined;
+export let mem = undefined;
 let scroll = true;
 let div = null;
 $: if (content != undefined) {
@@ -34,7 +35,7 @@ let logViewer;
 				<button on:click={logViewer.openDrawer}>Expand</button>
 				<div class="py-2 pr-2 text-xs flex gap-2 items-center">
 					Auto scroll
-					<input type="checkbox" bind:checked={scroll} />
+					<input class="windmillapp" type="checkbox" bind:checked={scroll} />
 				</div>
 			</div>
 		</div>
@@ -43,6 +44,11 @@ let logViewer;
 		{:else if duration}
 			<span class="absolute text-xs text-gray-500 top-2 left-2">took {duration}ms</span>
 		{/if}
+		{#if mem}
+			<span class="absolute text-xs text-gray-500 top-2 left-36"
+				>mem peak: {(mem / 1024).toPrecision(4)}MB</span
+			>
+		{/if}
 		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
 			>{#if content}<span>{content}</span>{:else if !isLoading}<span class="text-gray-600"
 					>No logs are available yet</span

package/components/LogViewer.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         content: string | undefined;
         isLoading: boolean;
         duration?: number | undefined;
+        mem?: number | undefined;
         scrollToBottom?: (() => void) | undefined;
     };
     events: {

package/components/ModulePreview.svelte

@@ -6,17 +6,26 @@ import TestJobLoader from './TestJobLoader.svelte';
 import LogViewer from './LogViewer.svelte';
 import DisplayResult from './DisplayResult.svelte';
 import Button from './common/button/Button.svelte';
-import { flowStateStore } from './flows/flowState';
-import { flowStore } from './flows/flowStore';
 import { workspaceStore } from '../stores';
 import { Loader2 } from 'lucide-svelte';
+import { getContext } from 'svelte';
 export let mod;
 export let schema;
+const { flowStore, flowStateStore, testStepStore } = getContext('FlowEditorContext');
 // Test
 let testJobLoader;
 let testIsLoading = false;
 let testJob = undefined;
-let stepArgs = {};
+let stepArgs = $testStepStore[mod.id] ??
+    Object.entries(mod.value['input_transforms'] ?? {}).reduce((acc, [k, v]) => {
+        let t = v;
+        if (t.type == 'static') {
+            acc[k] = t.value;
+            return acc;
+        }
+        return acc;
+    }, {});
+$: $testStepStore[mod.id] = stepArgs;
 export function runTestWithStepArgs() {
     runTest(stepArgs);
 }
@@ -40,6 +49,7 @@ function jobDone() {
     if (testJob && !testJob.canceled && testJob.type == 'CompletedJob' && `result` in testJob) {
         if ($flowStateStore[mod.id]?.previewResult) {
             $flowStateStore[mod.id].previewResult = testJob.result;
+            $flowStateStore = $flowStateStore;
         }
     }
 }
@@ -69,6 +79,7 @@ function jobDone() {
 			detailed={false}
 			topButton
 			bind:args={stepArgs}
+			isFlow={false}
 		/>
 		{#if testIsLoading}
 			<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full mt-4" color="red" size="sm">

package/components/MoveDrawer.svelte

@@ -85,7 +85,7 @@ async function updatePath() {
 		<input
 			type="text"
 			bind:value={summary}
-			placeholder="A short summary displayed when it is listed"
+			placeholder="Short summary to be displayed when listed"
 			disabled={!own}
 		/>
 

package/components/Multiselect.svelte

@@ -167,7 +167,7 @@
 	{#if showOptions}
 		<ul
 			class="options"
-			transition:fly={{ duration: 200, y: 5 }}
+			transition:fly|local={{ duration: 200, y: 5 }}
 			on:mousedown|preventDefault={handleOptionMousedown}
 		>
 			{#each filtered as option}

package/components/Multiselect.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Multiselect extends SvelteComponentTyped<{
     value?: any[] | undefined;
     id?: string | undefined;
-    readonly?: boolean | undefined;
     placeholder?: string | undefined;
+    readonly?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,8 +20,8 @@ declare const __propDef: {
     props: {
         value?: any[] | undefined;
         id?: string | undefined;
-        readonly?: boolean | undefined;
         placeholder?: string | undefined;
+        readonly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/ObjectResourceInput.svelte

@@ -24,7 +24,12 @@ async function loadSchema(format) {
     }
 }
 function resourceToValue() {
-    value = `$res:${path}`;
+    if (path) {
+        value = `$res:${path}`;
+    }
+    else {
+        value = undefined;
+    }
 }
 function isResource() {
     return isString(value) && value.length >= '$res:'.length;

package/components/PageHeader.svelte

@@ -9,7 +9,7 @@ export let primary = true;
 		<span class="flex items-center space-x-2 mb-2">
 			<h1>{title}</h1>
 			{#if tooltip}
-				<Tooltip>{tooltip}</Tooltip>
+				<Tooltip scale={0.9}>{tooltip}</Tooltip>
 			{/if}
 		</span>
 	{:else}

package/components/Path.svelte

@@ -11,6 +11,8 @@ import { Icon } from 'svelte-awesome';
 import Tooltip from './Tooltip.svelte';
 import FolderEditor from './FolderEditor.svelte';
 import GroupEditor from './GroupEditor.svelte';
+import { random_adj } from './random_positive_adjetive';
+import Badge from './common/badge/Badge.svelte';
 let meta = undefined;
 export let namePlaceholder = '';
 export let initialPath;
@@ -45,13 +47,21 @@ function handleKeyUp(event) {
 }
 export async function reset() {
     if (path == '' || path == 'u//') {
-        meta = { ownerKind: 'user', name: namePlaceholder, owner: '' };
+        meta = {
+            ownerKind: 'user',
+            name: random_adj() + '_' + namePlaceholder,
+            owner: ''
+        };
         meta.owner = $userStore.username.split('@')[0];
-        let i = 1;
-        while (await pathExists(metaToPath(meta), kind)) {
-            meta.name = `${namePlaceholder}_${i}`;
-            i += 1;
+        let newMeta = { ...meta };
+        while (await pathExists(metaToPath(newMeta), kind)) {
+            disabled = true;
+            error = 'finding an available name...';
+            newMeta.name = random_adj() + '_' + namePlaceholder;
         }
+        error = '';
+        disabled = false;
+        meta = newMeta;
         path = metaToPath(meta);
     }
     else {
@@ -159,6 +169,10 @@ $: {
     }
 }
 function initPath() {
+    if (path != undefined && path != '') {
+        meta = pathToMeta(path);
+        return;
+    }
     if (initialPath == undefined || initialPath == '') {
         reset();
     }
@@ -234,15 +248,19 @@ async function addGroup() {
 			folderCreated = undefined
 		}}
 	>
-		<div class="flex flex-row">
-			<input class="mr-2" placeholder="New folder name" bind:value={newFolderName} />
-			<Button size="md" startIcon={{ icon: faPlus }} disabled={!newFolderName} on:click={addFolder}>
-				New&nbsp;folder
-			</Button>
-		</div>
-
-		{#if folderCreated}
-			<div class="mt-8" />
+		{#if !folderCreated}
+			<div class="flex flex-row">
+				<input class="mr-2" placeholder="New folder name" bind:value={newFolderName} />
+				<Button
+					size="md"
+					startIcon={{ icon: faPlus }}
+					disabled={!newFolderName}
+					on:click={addFolder}
+				>
+					New&nbsp;folder
+				</Button>
+			</div>
+		{:else}
 			<FolderEditor name={folderCreated} />
 		{/if}
 	</DrawerContent>
@@ -259,7 +277,7 @@ async function addGroup() {
 		{#if meta != undefined}
 			<div class="flex gap-4 shrink">
 				<label class="block">
-					<span class="text-gray-700 text-sm whitespace-nowrap">&nbsp;</span>
+					<span class="text-gray-700 text-sm whitespace-nowrap">Owner</span>
 
 					<ToggleButtonGroup
 						class="mt-0.5"
@@ -362,8 +380,26 @@ async function addGroup() {
 		{/if}
 	</div>
 
-	<div class="flex-row flex justify-between">
-		<div><span class="font-mono text-sm">{path}</span></div>
+	<div class="flex flex-col w-full mt-4">
+		<div class="flex justify-start w-full">
+			<Badge
+				color="gray"
+				class="center-center !bg-gray-300 !text-gray-600 !w-[70px] !h-[24px] rounded-r-none"
+			>
+				Full path
+			</Badge>
+			<input
+				type="text"
+				readonly
+				value={path}
+				size={path?.length || 50}
+				class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+				on:focus={({ currentTarget }) => {
+					currentTarget.select()
+				}}
+			/>
+			<!-- <span class="font-mono text-sm break-all">{path}</span> -->
+		</div>
 		<div class="text-red-600 text-2xs">{error}</div>
 	</div>
 </div>

package/components/Popover.svelte

@@ -2,6 +2,7 @@
 export let placement = 'auto';
 export let notClickable = false;
 export let popupClass = '';
+export let disablePopup = false;
 export let disapperTimoout = 100;
 const [popperRef, popperContent] = createPopperActions({ placement });
 const betterPreventOverflow = (options) => ({
@@ -15,7 +16,12 @@ const betterPreventOverflow = (options) => ({
 const extraOpts = {
     modifiers: [
         betterPreventOverflow({ padding: 10 }),
-        { name: 'offset', options: { offset: [8, 8] } },
+        {
+            name: 'offset',
+            options: {
+                offset: [8, 8]
+            }
+        },
         {
             name: 'arrow',
             options: {
@@ -36,26 +42,15 @@ function close() {
 </script>
 
 {#if notClickable}
-	<span
-		use:popperRef
-		on:mouseenter={open}
-		on:mouseleave={close}
-		class={$$props.class}
-	>
+	<span use:popperRef on:mouseenter={open} on:mouseleave={close} class={$$props.class}>
 		<slot />
 	</span>
 {:else}
-	<button
-		use:popperRef
-		on:mouseenter={open}
-		on:mouseleave={close}
-		on:click
-		class={$$props.class}
-	>
+	<button use:popperRef on:mouseenter={open} on:mouseleave={close} on:click class={$$props.class}>
 		<slot />
 	</button>
 {/if}
-{#if showTooltip}
+{#if showTooltip && !disablePopup}
 	<div
 		use:popperContent={extraOpts}
 		on:mouseenter={open}

package/components/Popover.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         placement?: PopoverPlacement | undefined;
         notClickable?: boolean | undefined;
         popupClass?: string | undefined;
+        disablePopup?: boolean | undefined;
         disapperTimoout?: number | undefined;
     };
     events: {

package/components/Range.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Range extends SvelteComponentTyped<{
     value?: number | undefined;
     id?: null | undefined;
-    min?: number | undefined;
     max?: number | undefined;
+    min?: number | undefined;
     initialValue?: number | undefined;
 }, {
     pointerdown: PointerEvent;
@@ -22,8 +22,8 @@ declare const __propDef: {
     props: {
         value?: number | undefined;
         id?: null | undefined;
-        min?: number | undefined;
         max?: number | undefined;
+        min?: number | undefined;
         initialValue?: number | undefined;
     };
     events: {

package/components/ResourceEditor.svelte

@@ -10,6 +10,7 @@ import autosize from 'svelte-autosize';
 import SimpleEditor from './SimpleEditor.svelte';
 import { faSave } from '@fortawesome/free-solid-svg-icons';
 import SchemaForm from './SchemaForm.svelte';
+import Toggle from './Toggle.svelte';
 let path = '';
 let initialPath = '';
 let resourceToEdit;
@@ -29,6 +30,7 @@ export async function initEdit(p) {
     path = p;
     resourceToEdit = undefined;
     resourceSchema = undefined;
+    viewJsonSchema = false;
     loadingSchema = true;
     drawer.openDrawer?.();
     resourceToEdit = await ResourceService.getResource({ workspace: $workspaceStore, path: p });
@@ -98,6 +100,16 @@ function updateArgsFromLinkedVars() {
         args[k] = `$var:${path}`;
     });
 }
+let viewJsonSchema = false;
+function switchTab(asJson) {
+    viewJsonSchema = asJson;
+    if (asJson) {
+        rawCode = JSON.stringify(args, null, 2);
+    }
+    else {
+        parseJson();
+    }
+}
 </script>
 
 <Drawer bind:this={drawer} size="800px">
@@ -119,25 +131,25 @@ function updateArgsFromLinkedVars() {
 						disabled={!can_write}
 						bind:path
 						{initialPath}
-						namePlaceholder="my_resource"
+						namePlaceholder="resource"
 						kind="resource"
 					/>
 				</div>
-				<h3>Description <Required required={false} /> </h3>
-				<textarea
-					type="text"
-					disabled={!can_write}
-					use:autosize
-					bind:value={description}
-					placeholder={DESCRIPTION_PLACEHOLDER}
-				/>
-
-				<h3 class="mt-4">Value</h3>
+				<div class="flex w-full justify-between max-w-lg items-center mt-4">
+					<h3>Value</h3>
+					<Toggle
+						on:change={(e) => switchTab(e.detail)}
+						options={{
+							right: 'As JSON'
+						}}
+					/>
+				</div>
 				<div class="text-sm">
 					{#if loadingSchema}
 						<Skeleton layout={[[4]]} />
-					{:else if resourceSchema && resourceSchema?.properties}
+					{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
 						<SchemaForm
+							noDelete
 							disabled={!can_write}
 							compact
 							schema={resourceSchema}
@@ -147,10 +159,13 @@ function updateArgsFromLinkedVars() {
 					{:else if !can_write}
 						<input type="text" disabled value={rawCode} />
 					{:else}
-						<p class="italic text-gray-500 text-xs mb-4"
-							>No corresponding resource type found in your workspace for {selectedResourceType}.
-							Define the value in JSON directly</p
-						>
+						{#if !viewJsonSchema}
+							<p class="italic text-gray-500 text-xs mb-4"
+								>No corresponding resource type found in your workspace for {selectedResourceType}.
+								Define the value in JSON directly</p
+							>
+						{/if}
+
 						{#if !emptyString(jsonError)}<span
 								class="text-red-400 text-xs mb-1 flex flex-row-reverse">{jsonError}</span
 							>{:else}<div class="py-2" />{/if}
@@ -165,6 +180,14 @@ function updateArgsFromLinkedVars() {
 						</div>
 					{/if}
 				</div>
+				<h3 class="mt-4">Description <Required required={false} /> </h3>
+				<textarea
+					type="text"
+					disabled={!can_write}
+					use:autosize
+					bind:value={description}
+					placeholder={DESCRIPTION_PLACEHOLDER}
+				/>
 			</div>
 		</div>
 		<svelte:fragment slot="actions">

package/components/ResourcePicker.svelte

@@ -7,16 +7,30 @@ import { Button } from './common';
 import Select from 'svelte-select';
 import AppConnect from './AppConnect.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
-import { truncate } from '../utils';
+import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
 const dispatch = createEventDispatcher();
-let resources = [];
 export let initialValue = undefined;
 export let value = initialValue;
 export let resourceType = undefined;
+let valueSelect = initialValue || value
+    ? {
+        value: value ?? initialValue,
+        label: value ?? initialValue
+    }
+    : undefined;
+let collection = [valueSelect];
 async function loadResources(resourceType) {
-    const v = value;
-    resources = await ResourceService.listResource({ workspace: $workspaceStore, resourceType });
-    value = v;
+    const nc = (await ResourceService.listResource({
+        workspace: $workspaceStore,
+        resourceType
+    })).map((x) => ({
+        value: x.path,
+        label: x.path
+    }));
+    if (!nc.find((x) => x.value == value) && (initialValue || value)) {
+        nc.push({ value: value ?? initialValue, label: value ?? initialValue });
+    }
+    collection = nc;
 }
 $: {
     if ($workspaceStore) {
@@ -24,10 +38,6 @@ $: {
     }
 }
 $: dispatch('change', value);
-$: collection = resources.map((x) => ({
-    value: x.path,
-    label: x.path
-}));
 let appConnect;
 let resourceEditor;
 </script>
@@ -36,6 +46,7 @@ let resourceEditor;
 	on:refresh={async (e) => {
 		await loadResources(resourceType)
 		value = e.detail
+		valueSelect = { value: e.detail, label: e.detail }
 	}}
 	newPageOAuth
 	bind:this={appConnect}
@@ -45,22 +56,29 @@ let resourceEditor;
 	bind:this={resourceEditor}
 	on:refresh={async (e) => {
 		await loadResources(resourceType)
-		console.log(e)
 		if (e.detail) {
 			value = e.detail
+			valueSelect = { value: e.detail, label: e.detail }
 		}
 	}}
 />
 
 <div class="flex flex-row gap-x-1 w-full">
 	<Select
-		listAutoWidth={false}
-		--height="34px"
-		value={collection.find((x) => x.value == value)}
-		bind:justValue={value}
+		value={valueSelect}
+		on:change={(e) => {
+			value = e.detail.value
+			valueSelect = e.detail
+		}}
+		on:clear={() => {
+			value = undefined
+			valueSelect = undefined
+		}}
 		items={collection}
 		class="text-clip grow min-w-0"
-		placeholder="{resourceType} resource"
+		placeholder="{resourceType ?? 'any'} resource"
+		inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+		containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 	/>
 	{#if value && value != ''}
 		<Button variant="border" size="xs" on:click={() => resourceEditor?.initEdit?.(value ?? '')}>