windmill-components 1.35.42 → 1.36.0

package/components/InputTransformForm.svelte

@@ -1,26 +1,24 @@
-<script>import { faChain } from '@fortawesome/free-solid-svg-icons';
-import { Button, Tooltip } from 'flowbite-svelte';
-import Icon from 'svelte-awesome';
+<script>import { getContext } from 'svelte';
 import ArgInput from './ArgInput.svelte';
 import FieldHeader from './FieldHeader.svelte';
-import DynamicInputHelpBox from './flows/DynamicInputHelpBox.svelte';
+import DynamicInputHelpBox from './flows/content/DynamicInputHelpBox.svelte';
 import { codeToStaticTemplate, getDefaultExpr, isCodeInjection } from './flows/utils';
-import OverlayPropertyPicker from './propertyPicker/OverlayPropertyPicker.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import Toggle from './Toggle.svelte';
+import { Button } from './common';
+import Icon from 'svelte-awesome';
+import { faChain } from '@fortawesome/free-solid-svg-icons';
 export let schema;
 export let arg;
 export let argName;
 export let extraLib = 'missing extraLib';
 export let inputCheck;
 export let importPath = undefined;
-export let pickableProperties = undefined;
-let overlays = {};
 let monacos = {};
 let inputCats = {};
 let propertyType = getPropertyType(arg);
 function getPropertyType(arg) {
-    let type = arg.type;
+    let type = arg?.type ?? 'static';
     if (type == 'javascript') {
         if (codeToStaticTemplate(arg.expr)) {
             type = 'static';
@@ -49,16 +47,6 @@ function setPropertyType(rawValue) {
 function isStaticTemplate(inputCat) {
     return inputCat === 'string' || inputCat === 'sql';
 }
-function focusProp(argName, monacoEditor = false) {
-    Object.keys(overlays).forEach((k) => {
-        if (k == argName && (isStaticTemplate(inputCats[argName]) || monacoEditor)) {
-            overlays[k].focus();
-        }
-        else {
-            overlays[k].unfocus();
-        }
-    });
-}
 function connectProperty(argName, rawValue) {
     if (isStaticTemplate(inputCats[argName])) {
         arg.value = `\$\{${rawValue}}`;
@@ -69,11 +57,9 @@ function connectProperty(argName, rawValue) {
         arg.type = 'javascript';
         propertyType = 'javascript';
     }
-    if (monacos[argName]) {
-        monacos[argName].setCode(arg.value);
-    }
 }
 $: checked = propertyType == 'javascript';
+const { focusProp } = getContext('PropPickerWrapper');
 </script>
 
 {#if arg != undefined}
@@ -94,113 +80,109 @@ $: checked = propertyType == 'javascript';
 				</span>
 			{/if}
 		</div>
-		<Toggle
-			bind:checked
-			options={{
-				right: 'Raw Javascript Editor'
-			}}
-			on:change={(e) => {
-				const type = e.detail ? 'javascript' : 'static'
-				const staticTemplate = isStaticTemplate(inputCats[argName])
-				if (type === 'javascript') {
-					arg.expr = getDefaultExpr(
-						importPath,
-						argName,
-						staticTemplate ? `\`${arg.value ?? ''}\`` : arg.value
-					)
+		<div class="flex flex-row space-x-2 items-center">
+			<Toggle
+				bind:checked
+				options={{
+					right: 'Raw Javascript Editor'
+				}}
+				on:change={(e) => {
+					const type = e.detail ? 'javascript' : 'static'
+					const staticTemplate = isStaticTemplate(inputCats[argName])
+					if (type === 'javascript') {
+						arg.expr = getDefaultExpr(
+							importPath,
+							argName,
+							staticTemplate ? `\`${arg.value ?? ''}\`` : arg.value
+						)
 
-					arg.value = undefined
-					propertyType = 'javascript'
-				} else {
-					arg.value = staticTemplate ? codeToStaticTemplate(arg.expr) : undefined
+						arg.value = undefined
+						propertyType = 'javascript'
+					} else {
+						arg.value = staticTemplate ? codeToStaticTemplate(arg.expr) : undefined
 
-					arg.expr = undefined
-					propertyType = 'static'
-				}
+						arg.expr = undefined
+						propertyType = 'static'
+					}
 
-				arg.type = type
-			}}
-		/>
+					arg.type = type
+				}}
+			/>
+			<div
+				on:click={() => {
+					focusProp(argName, 'connect', (path) => {
+						connectProperty(argName, path)
+					})
+				}}
+			>
+				<Button variant="contained" color="blue" size="md">
+					<Icon data={faChain} />
+				</Button>
+			</div>
+		</div>
 	</div>
 	<div class="max-w-xs" />
 
 	{#if propertyType === undefined || !checked}
-		<OverlayPropertyPicker
-			{pickableProperties}
-			bind:this={overlays[argName]}
-			on:select={({ detail }) => {
-				if (detail.pickerVariation === 'connect') {
-					connectProperty(argName, detail.propPath)
-				} else {
-					const toAppend = `\$\{${detail.propPath}}`
-					arg.value = `${arg.value ?? ''}${toAppend}`
-					if (monacos[argName]) {
-						monacos[argName].setCode(arg.value)
-					}
-					if (isStaticTemplate(inputCats[argName])) {
+		<ArgInput
+			on:focus={() => {
+				if (isStaticTemplate(inputCats[argName])) {
+					focusProp(argName, 'append', (path) => {
+						const toAppend = `\$\{${path}}`
+						arg.value = `${arg.value ?? ''}${toAppend}`
 						setPropertyType(arg.value)
-					}
+					})
+				} else {
+					focusProp(argName, 'insert', (path) => {
+						console.log('path', path)
+						arg.expr = path
+						arg.type = 'javascript'
+						propertyType = 'javascript'
+					})
 				}
 			}}
-		>
-			<ArgInput
-				on:focus={() => focusProp(argName)}
-				label={argName}
-				bind:editor={monacos[argName]}
-				bind:description={schema.properties[argName].description}
-				bind:value={arg.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}
-				properties={schema.properties[argName].properties}
-				displayHeader={false}
-				bind:inputCat={inputCats[argName]}
-				on:input={(e) => {
-					if (isStaticTemplate(inputCats[argName])) {
-						setPropertyType(e.detail.rawValue)
-					}
-				}}
-			>
-				<div slot="actions">
-					<div on:click={() => overlays[argName]?.focus('connect')}>
-						<Tooltip placement="bottom" content="Input connect">
-							<Button size="sm" class="blue-button h-8">
-								<Icon data={faChain} />
-							</Button>
-						</Tooltip>
-					</div>
-				</div>
-			</ArgInput>
-		</OverlayPropertyPicker>
+			label={argName}
+			bind:editor={monacos[argName]}
+			bind:description={schema.properties[argName].description}
+			bind:value={arg.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}
+			properties={schema.properties[argName].properties}
+			displayHeader={false}
+			bind:inputCat={inputCats[argName]}
+			on:input={(e) => {
+				if (isStaticTemplate(inputCats[argName])) {
+					setPropertyType(e.detail.rawValue)
+				}
+			}}
+		/>
 	{:else if checked}
 		{#if arg.expr != undefined}
-			<OverlayPropertyPicker
-				bind:this={overlays[argName]}
-				{pickableProperties}
-				on:select={(event) => {
-					monacos[argName].insertAtCursor(event.detail.propPath)
-				}}
-			>
-				<div class="border rounded p-2 mt-2 border-gray-300">
-					<SimpleEditor
-						bind:this={monacos[argName]}
-						on:focus={() => focusProp(argName, true)}
-						bind:code={arg.expr}
-						lang="javascript"
-						class="few-lines-editor"
-						{extraLib}
-						extraLibPath="file:///node_modules/@types/windmill@{importPath}/index.d.ts"
-						shouldBindKey={false}
-					/>
-				</div>
-			</OverlayPropertyPicker>
+			<div class="border rounded p-2 mt-2 border-gray-300">
+				<SimpleEditor
+					bind:this={monacos[argName]}
+					on:focus={() => {
+						focusProp(argName, 'insert', (path) => {
+							monacos[argName].insertAtCursor(path)
+						})
+					}}
+					bind:code={arg.expr}
+					lang="javascript"
+					class="few-lines-editor"
+					{extraLib}
+					extraLibPath="file:///node_modules/@types/windmill@{importPath}/index.d.ts"
+					shouldBindKey={false}
+				/>
+			</div>
 			<DynamicInputHelpBox {importPath} />
+			<div class="mb-2" />
 		{/if}
 	{:else}
 		<p>Not recognized arg type {arg.type}</p>

package/components/InputTransformForm.svelte.d.ts

@@ -11,7 +11,6 @@ declare const __propDef: {
             [id: string]: boolean;
         };
         importPath?: string | undefined;
-        pickableProperties?: Object | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/InputTransformsViewer.svelte

@@ -10,7 +10,7 @@ export let inputTransforms;
 			<span class="font-black text-gray-700">{key}</span>: {#if val.type == 'static'}<ObjectViewer
 					json={val.value}
 				/>{:else}
-				<span class="inline-highlight">
+				<span class="text-xs">
 					<Highlight offsetTop={0} language={typescript} code={val.expr} />
 				</span>
 			{/if}

package/components/InviteGlobalUser.svelte

@@ -2,8 +2,8 @@
 import Switch from './Switch.svelte';
 import { createEventDispatcher } from 'svelte';
 import { UserService } from '../gen';
+import { Button } from './common';
 const dispatch = createEventDispatcher();
-let valid = true;
 let modal;
 export function openModal() {
     modal.openModal();
@@ -43,14 +43,14 @@ async function addUser() {
 	<input on:keyup={handleKeyUp} placeholder="name" bind:value={name} />
 	<input on:keyup={handleKeyUp} placeholder="company" bind:value={company} />
 
-	<button
-		class="ml-4 w-40 {valid ? 'default-button' : 'default-button-disabled'}"
-		type="button"
-		on:click={() => {
-			addUser()
-		}}
+	<Button
+		variant="contained"
+		color="blue"
+		size="sm"
+		btnClasses="!ml-4 !w-40"
+		on:click={addUser}
 		disabled={email == undefined || password == undefined}
 	>
 		Add
-	</button>
+	</Button>
 </div>

package/components/InviteUser.svelte

@@ -3,8 +3,8 @@ import Switch from './Switch.svelte';
 import { createEventDispatcher } from 'svelte';
 import { workspaceStore } from '../stores';
 import { WorkspaceService } from '../gen';
+import { Button } from './common';
 const dispatch = createEventDispatcher();
-let valid = true;
 let modal;
 export function openModal() {
     modal.openModal();
@@ -35,14 +35,14 @@ async function inviteUser() {
 	<input on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
 
 	<Switch class="ml-2" bind:checked={is_admin} horizontal={true} label={'admin: '} />
-	<button
-		class="ml-4 w-40 {valid ? 'default-button' : 'default-button-disabled'}"
-		type="button"
-		on:click={() => {
-			inviteUser()
-		}}
-		disabled={email == undefined}
+	<Button
+		variant="contained"
+		color="blue"
+		size="sm"
+		btnClasses="!ml-4"
+		on:click={inviteUser}
+		disabled={email === undefined}
 	>
 		Invite
-	</button>
+	</Button>
 </div>

package/components/ItemPicker.svelte

@@ -6,6 +6,7 @@ export let loadItems;
 export let extraField;
 export let itemName;
 export let closeOnClick = true;
+export let noItemMessage = '';
 let items = [];
 let filteredItems = [];
 let itemsFilter = '';
@@ -17,45 +18,51 @@ const fuse = new Fuse(items, fuseOptions);
 export function openModal() {
     loadItems().then((v) => {
         items = v;
-        fuse.setCollection(items);
+        if (items) {
+            fuse.setCollection(items);
+        }
     });
     modal.openModal();
 }
 $: filteredItems =
-    itemsFilter.length > 0 ? fuse.search(itemsFilter).map((value) => value.item) : items;
+    itemsFilter.length > 0 && items ? fuse.search(itemsFilter).map((value) => value.item) : items;
 let modal;
 </script>
 
 <Modal bind:this={modal} z="z-30">
-	<div slot="title">search a {itemName}</div>
+	<div slot="title">Search a {itemName}</div>
 	<div slot="content">
-		<div class="w-12/12 pb-4">
-			<input placeholder="Search {itemName}" bind:value={itemsFilter} class="search-item" />
-		</div>
-		<ul class="divide-y divide-gray-200">
-			{#each filteredItems as obj}
-				<li
-					class="py-4 px-1 gap-1 flex flex-col hover:bg-white hover:border text-black cursor-pointer"
-					on:click={() => {
-						if (closeOnClick) {
-							modal.closeModal()
-						}
-						pickCallback(obj['path'], obj[extraField])
-					}}
-				>
-					<p class="text-sm font-semibold flex flex-row">
-						{#if `app` in obj}
-							<IconedResourceType silent={true} name={obj['app']} />
-							<span class="mr-2" />
-						{/if}
-						<span class="mr-2">{obj[extraField]}</span><span class="font-normal whitespace-nowrap"
-							>{obj['path'] ?? ''}</span
-						>
-					</p>
-					<p class="text-xs italic">{obj['description'] ?? ''}</p>
-				</li>
-			{/each}
-		</ul>
+		{#if filteredItems}
+			<div class="w-12/12 pb-4">
+				<input placeholder="Search {itemName}" bind:value={itemsFilter} class="search-item" />
+			</div>
+			<ul class="divide-y divide-gray-200">
+				{#each filteredItems as obj}
+					<li
+						class="py-4 px-1 gap-1 flex flex-col hover:bg-white hover:border text-black cursor-pointer"
+						on:click={() => {
+							if (closeOnClick) {
+								modal.closeModal()
+							}
+							pickCallback(obj['path'], obj[extraField])
+						}}
+					>
+						<p class="text-sm font-semibold flex flex-row">
+							{#if `app` in obj}
+								<IconedResourceType silent={true} name={obj['app']} />
+								<span class="mr-2" />
+							{/if}
+							<span class="mr-2">{obj[extraField]}</span><span class="font-normal break-all"
+								>{obj['path'] ?? ''}</span
+							>
+						</p>
+						<p class="text-xs italic">{obj['description'] ?? ''}</p>
+					</li>
+				{/each}
+			</ul>
+		{:else}
+			<span class="mt-2 text-sm text-red-400">{noItemMessage}</span>
+		{/if}
 	</div>
 	<span slot="submission">
 		<slot name="submission" />

package/components/ItemPicker.svelte.d.ts

@@ -2,10 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         pickCallback: (path: string, f: string) => void;
-        loadItems: () => Promise<Record<string, any>[]>;
+        loadItems: () => Promise<Record<string, any>[] | undefined>;
         extraField: string;
         itemName: string;
         closeOnClick?: boolean | undefined;
+        noItemMessage?: string | undefined;
         openModal?: (() => void) | undefined;
     };
     events: {

package/components/JobStatus.svelte

@@ -28,7 +28,8 @@ export let job;
 {:else if job && 'running' in job && job.running}
 	<Badge large color="yellow">
 		<Icon data={faCircle} scale={SMALL_ICON_SCALE} class="mr-2" />
-		Running
+		Running {#if job.flow_status}({job.flow_status?.step ?? ''} of {job.raw_flow?.modules?.length ??
+				'?'}){/if}
 	</Badge>
 {:else if job && 'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)}
 	<Badge>

package/components/LogViewer.svelte

@@ -0,0 +1,23 @@
+<script>export let content;
+export let isLoading;
+let scroll = true;
+let div = null;
+$: if (content != undefined) {
+    isLoading = false;
+}
+$: content && scrollToBottom();
+export function scrollToBottom() {
+    scroll && setTimeout(() => div?.scroll({ top: div?.scrollHeight, behavior: 'smooth' }), 100);
+}
+</script>
+
+<div class="relative w-full h-full">
+	<div bind:this={div} class="w-full h-full overflow-auto bg-gray-50 relative">
+		<pre
+			class="whitespace-pre-wrap break-all bg-gray-50 text-xs w-full p-2">{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre>
+	</div>
+	<div class="absolute top-0 right-0 mr-2 text-gray-500 text-sm bg-gray-50/20">
+		Auto scroll
+		<input type="checkbox" bind:checked={scroll} />
+	</div>
+</div>

package/components/LogViewer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        content: string | undefined;
+        isLoading: boolean;
+        scrollToBottom?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type LogViewerProps = typeof __propDef.props;
+export declare type LogViewerEvents = typeof __propDef.events;
+export declare type LogViewerSlots = typeof __propDef.slots;
+export default class LogViewer extends SvelteComponentTyped<LogViewerProps, LogViewerEvents, LogViewerSlots> {
+    get scrollToBottom(): () => void;
+}
+export {};

package/components/ModulePreview.svelte

@@ -0,0 +1,107 @@
+<script>import { getScriptByPath, sendUserToast, truncateRev } from '../utils';
+import { HSplitPane, VSplitPane } from 'svelte-split-pane';
+import RunForm from './RunForm.svelte';
+import TestJobLoader from './TestJobLoader.svelte';
+import LogViewer from './LogViewer.svelte';
+import DisplayResult from './DisplayResult.svelte';
+import Button from './common/button/Button.svelte';
+import { faRotateRight } from '@fortawesome/free-solid-svg-icons';
+import { flowStateStore } from './flows/flowState';
+let testJobLoader;
+// Test
+let testIsLoading = false;
+let testJob;
+export let mod;
+export let schema;
+export let indices;
+let stepArgs = {};
+export function runTestWithStepArgs() {
+    runTest(stepArgs);
+}
+export async function runTest(args) {
+    const val = mod.value;
+    if (val.type == 'rawscript') {
+        await testJobLoader?.runPreview(val.path, val.content, val.language, args);
+    }
+    else if (val.type == 'script') {
+        const script = await getScriptByPath(val.path);
+        await testJobLoader?.runPreview(val.path, script.content, script.language, args);
+    }
+    else {
+        throw Error('not testable module type');
+    }
+    sendUserToast(`started test ${truncateRev(testJob?.id ?? '', 10)}`);
+}
+function jobDone() {
+    if (testJob && !testJob.canceled && testJob.type == 'CompletedJob' && `result` in testJob) {
+        const result = testJob.result;
+        const pMod = $flowStateStore.modules[indices[0]];
+        if (pMod) {
+            if (indices[1] != undefined && pMod.childFlowModules) {
+                const cMod = pMod.childFlowModules[indices[1]];
+                if (cMod) {
+                    cMod.previewResult = result;
+                }
+            }
+            else {
+                pMod.previewResult = result;
+            }
+            $flowStateStore.modules[indices[0]] = pMod;
+        }
+    }
+}
+</script>
+
+<TestJobLoader
+	on:done={jobDone}
+	bind:this={testJobLoader}
+	bind:isLoading={testIsLoading}
+	bind:job={testJob}
+/>
+<HSplitPane leftPaneSize="50%" rightPaneSize="50%" minLeftPaneSize="20%" minRightPaneSize="20%">
+	<left slot="left" class="relative">
+		<div class="overflow-auto h-full p-4">
+			<RunForm
+				runnable={{ summary: mod.summary ?? '', schema, description: '' }}
+				runAction={(_, args) => runTest(args)}
+				schedulable={false}
+				buttonText="Test just this step (Ctrl+Enter)"
+				detailed={false}
+				bind:args={stepArgs}
+			/>
+			{#if testIsLoading}
+				<Button
+					on:click={testJobLoader?.cancelJob}
+					btnClasses="w-full mt-4"
+					color="red"
+					size="sm"
+					startIcon={{
+						icon: faRotateRight,
+						classes: 'animate-spin'
+					}}
+				>
+					Cancel
+				</Button>
+			{/if}
+		</div>
+	</left>
+	<right slot="right">
+		<div class="overflow-auto h-full">
+			<VSplitPane topPanelSize="50%" downPanelSize="50%">
+				<top slot="top">
+					<LogViewer content={testJob?.logs} isLoading={testIsLoading} />
+				</top>
+				<down slot="down">
+					<pre class="overflow-x-auto break-all relative h-full p-2 text-sm"
+						>{#if testJob && 'result' in testJob && testJob.result != undefined}<DisplayResult
+								result={testJob.result}
+							/>
+						{:else if testIsLoading}Waiting for Result...
+						{:else}Test to see the result here
+						{/if}
+        	</pre>
+				</down>
+			</VSplitPane>
+		</div>
+	</right>
+</HSplitPane>

package/components/ModulePreview.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+import type { FlowModule } from '../gen';
+declare const __propDef: {
+    props: {
+        mod: FlowModule;
+        schema: Schema;
+        indices: [number, number | undefined];
+        runTestWithStepArgs?: (() => void) | undefined;
+        runTest?: ((args: any) => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ModulePreviewProps = typeof __propDef.props;
+export declare type ModulePreviewEvents = typeof __propDef.events;
+export declare type ModulePreviewSlots = typeof __propDef.slots;
+export default class ModulePreview extends SvelteComponentTyped<ModulePreviewProps, ModulePreviewEvents, ModulePreviewSlots> {
+    get runTestWithStepArgs(): () => void;
+    get runTest(): (args: any) => Promise<void>;
+}
+export {};

package/components/Path.svelte

@@ -188,7 +188,7 @@ $: {
 	</div>
 	<div class="pt-0 text-xs px-1 flex flex-col-reverse sm:grid sm:grid-cols-4 sm:gap-4 w-full">
 		<div class="col-span-2"><span class="font-mono">{path}</span></div>
-		<div class="text-purple-500 text-2xs col-span-2">{error}</div>
+		<div class="text-red-600 text-2xs col-span-2">{error}</div>
 	</div>
 </div>