windmill-components 1.56.2 → 1.56.5

package/components/CenteredModal.svelte

@@ -3,35 +3,36 @@ import { onMount } from 'svelte';
 import WindmillIcon from './icons/WindmillIcon.svelte';
 export let subtitle = undefined;
 export let title = 'Windmill';
+export let disableLogo = false;
 let version = '';
 onMount(async () => {
     version = await SettingsService.backendVersion();
 });
 </script>
 
-<div class="flex justify-center min-h-screen pt-10 relative bg-[#3b4252]">
-	<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:4/12 m-auto z-10">
-		<div class="border rounded-md py-4 px-16 shadow-md bg-gray-50">
-			<h1 class="justify-center text-center font-medium pb-4">
+<div class="center-center min-h-screen p-4 relative bg-[#3b4252]">
+	<div class="border rounded-md shadow-md bg-white w-full max-w-[640px] 
+	p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10">
+		<div class="mb-10">
+			<h1 class="text-center">
 				{title}
 			</h1>
 			{#if subtitle}
-				<p class="justify-center text-center font-medium pb-2 text-xs">
+				<p class="text-sm text-center text-gray-600 mt-2">
 					{subtitle}
 				</p>
 			{/if}
-			<slot />
 		</div>
-
-		<!-- empty row to make the form a little bit above vertical centering-->
-		<div class="py-12" />
+		<slot />
 	</div>
-	<div class="hidden lg:block absolute top-10 right-50">
-		<div class="animate-[spin_100s_linear_infinite] ">
-			<WindmillIcon white height="100px" width="100px" />
+	{#if !disableLogo}
+		<div class="hidden lg:block absolute top-10 right-50">
+			<div class="animate-[spin_100s_linear_infinite] ">
+				<WindmillIcon white height="100px" width="100px" />
+			</div>
+			<h2 class="text-center pt-2 text-gray-100">Windmill</h2>
 		</div>
-		<h2 class="text-center pt-2 text-gray-100">Windmill</h2>
-	</div>
+	{/if}
 	<div class="absolute top-0 right-0 text-2xs text-gray-300 italic px-3 py-1">
 		<span class="font-mono">{version}</span>
 	</div>

package/components/CenteredModal.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         subtitle?: string | undefined;
         title?: string | undefined;
+        disableLogo?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Dropdown.svelte

@@ -1,17 +1,18 @@
 <script>import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons';
+import { MoreHorizontal } from 'lucide-svelte';
 import { Button, Menu } from './common';
 export let dropdownItems;
 export let name = undefined;
 export let placement = 'bottom-start';
+export let btnClasses = '!text-blue-500 bg-transparent';
 const dispatch = createEventDispatcher();
 </script>
 
 <Menu {placement} let:close>
-	<Button color="light" size="xs" btnClasses="!text-blue-500 bg-transparent" slot="trigger">
+	<Button nonCaptureEvent color="light" size="xs" {btnClasses} slot="trigger">
 		{#if !$$slots.default}
-			<Icon data={faEllipsisH} scale={1.2} />
+			<MoreHorizontal size={20} />
 		{:else}
 			<slot />
 		{/if}

package/components/Dropdown.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         dropdownItems: DropdownItem[];
         name?: string | undefined;
         placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
+        btnClasses?: string | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/components/Editor.svelte

@@ -361,7 +361,7 @@ async function loadMonaco() {
         timeoutModel && clearTimeout(timeoutModel);
         timeoutModel = setTimeout(() => {
             code = getCode();
-            dispatch('change');
+            dispatch('change', code);
         }, 500);
     });
     editor.onDidFocusEditorText(() => {

package/components/FlowPreviewContent.svelte

@@ -50,7 +50,7 @@ function extractFlow(previewMode) {
     }
     else {
         const flow = JSON.parse(JSON.stringify($flowStore));
-        const idOrders = dfs(flow.value.modules);
+        const idOrders = dfs(flow.value.modules, (x) => x.id);
         let upToIndex = idOrders.indexOf($selectedId);
         if (upToIndex != -1) {
             flow.value.modules = sliceModules(flow.value.modules, upToIndex, idOrders);

package/components/InputTransformForm.svelte

@@ -18,6 +18,7 @@ export let previousModuleId;
 export let pickForField = undefined;
 export let variableEditor = undefined;
 export let itemPicker = undefined;
+export let noDynamicToggle = false;
 let monaco = undefined;
 let monacoTemplate = undefined;
 let argInput = undefined;
@@ -90,7 +91,7 @@ function onFocus() {
     }
 }
 const { focusProp, propPickerConfig } = getContext('PropPickerWrapper');
-$: isStaticTemplate(inputCat) && propertyType == 'static' && setPropertyType(arg.value);
+$: isStaticTemplate(inputCat) && propertyType == 'static' && setPropertyType(arg?.value);
 const openBracket = '${';
 const closeBracket = '}';
 </script>
@@ -118,21 +119,8 @@ const closeBracket = '}';
 				</span>
 			{/if}
 		</div>
-		<div class="flex flex-row-reverse gap-x-4 gap-y-1 flex-wrap">
-			<div>
-				<Button
-					variant="contained"
-					color="blue"
-					size="xs"
-					on:click={() => {
-						focusProp(argName, 'connect', (path) => {
-							connectProperty(path)
-							return true
-						})
-					}}>Connect &rightarrow;</Button
-				>
-			</div>
-			<div>
+		{#if !noDynamicToggle}
+			<div class="flex flex-row gap-x-4 gap-y-1 flex-wrap">
 				<ToggleButtonGroup
 					bind:selected={propertyType}
 					on:selected={(e) => {
@@ -143,24 +131,29 @@ const closeBracket = '}';
 									argName,
 									previousModuleId,
 									staticTemplate
-										? `\`${arg.value ?? ''}\``
+										? `\`${arg?.value ?? ''}\``
 										: arg.value
-										? JSON.stringify(arg.value, null, 4)
+										? JSON.stringify(arg?.value, null, 4)
 										: ''
 								)
 							}
-
-							arg.value = undefined
+							if (arg) {
+								arg.value = undefined
+							}
 							propertyType = 'javascript'
 							arg.type = 'javascript'
 						} else {
 							if (staticTemplate) {
-								arg.value = codeToStaticTemplate(arg.expr)
-								setPropertyType(arg.value)
+								if (arg) {
+									arg.value = codeToStaticTemplate(arg.expr)
+								}
+								setPropertyType(arg?.value)
 							} else {
-								arg.type = 'static'
-								arg.value = undefined
-								arg.expr = undefined
+								if (arg) {
+									arg.type = 'static'
+									arg.value = undefined
+									arg.expr = undefined
+								}
 							}
 							propertyType = 'static'
 						}
@@ -188,9 +181,21 @@ const closeBracket = '}';
 						Dynamic (JS)
 					</ToggleButton>
 				</ToggleButtonGroup>
+				<Button
+					variant="contained"
+					color="blue"
+					size="xs"
+					on:click={() => {
+						focusProp(argName, 'connect', (path) => {
+							connectProperty(path)
+							return true
+						})
+					}}>Connect &rightarrow;</Button
+				>
 			</div>
-		</div>
+		{/if}
 	</div>
+
 	<div class="max-w-xs" />
 
 	<div
@@ -205,14 +210,17 @@ const closeBracket = '}';
 				Connect input &rightarrow;
 			</span>
 		{/if}
-		{#if isStaticTemplate(inputCat) && propertyType == 'static'}
-			<div class="py-1 rounded border border-1 border-gray-500">
-				<TemplateEditor
-					bind:this={monacoTemplate}
-					{extraLib}
-					on:focus={onFocus}
-					bind:code={arg.value}
-				/>
+		{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
+			<div class="py-1 mt-2 min-h-[28px] rounded border border-1 border-gray-500">
+				{#if arg}
+					<TemplateEditor
+						bind:this={monacoTemplate}
+						{extraLib}
+						on:focus={onFocus}
+						bind:code={arg.value}
+						fontSize={14}
+					/>
+				{/if}
 			</div>
 		{:else if propertyType === undefined || propertyType == 'static'}
 			<ArgInput
@@ -265,5 +273,5 @@ const closeBracket = '}';
 	</div>
 	<div class="mb-6" />
 {:else}
-	<p class="text-sm text-gray-700">Arg at {argName} is undefined</p>
+	<p class="text-sm text-gray-700">Argument at {argName} is undefined</p>
 {/if}

package/components/InputTransformForm.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         pickForField?: string | undefined;
         variableEditor?: VariableEditor | undefined;
         itemPicker?: ItemPicker | undefined;
+        noDynamicToggle?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/LogViewer.svelte

@@ -1,4 +1,6 @@
-<script>import { fade } from 'svelte/transition';
+<script>import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { Icon } from 'svelte-awesome';
+import { fade } from 'svelte/transition';
 import { Drawer, DrawerContent } from './common';
 export let content;
 export let isLoading;
@@ -43,9 +45,10 @@ let logViewer;
 		{/if}
 
 		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
-			>{#if content}<span transition:fade={{ duration: 50 }}>{content}</span
-				>{:else if isLoading}{:else}<span class="text-gray-600">No logs are available yet</span
-				>{/if}</pre
+			>{#if content}<span>{content}</span>{:else if isLoading}<Icon
+					data={faSpinner}
+					class="animate-spin"
+				/>{:else}<span class="text-gray-600">No logs are available yet</span>{/if}</pre
 		>
 	</div>
 </div>

package/components/ModulePreview.svelte

@@ -6,46 +6,49 @@ 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 { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { flowStateStore } from './flows/flowState';
 import { flowStore } from './flows/flowStore';
-import { Alert } from './common';
 import { workspaceStore } from '../stores';
-let testJobLoader;
-// Test
-let testIsLoading = false;
-let testJob;
+import { Icon } from 'svelte-awesome';
 export let mod;
 export let schema;
+// Test
+let testJobLoader;
+let testIsLoading = false;
+let testJob = undefined;
 let stepArgs = {};
 export function runTestWithStepArgs() {
     runTest(stepArgs);
 }
 export async function runTest(args) {
     const val = mod.value;
+    let jobId = undefined;
     if (val.type == 'rawscript') {
-        await testJobLoader?.runPreview(val.path, val.content, val.language, args);
+        jobId = await testJobLoader?.runPreview(val.path, val.content, val.language, args);
     }
     else if (val.type == 'script') {
         const script = val.hash
             ? await ScriptService.getScriptByHash({ workspace: $workspaceStore, hash: val.hash })
             : await getScriptByPath(val.path);
-        await testJobLoader?.runPreview(val.path, script.content, script.language, args);
+        jobId = await testJobLoader?.runPreview(val.path, script.content, script.language, args);
     }
     else {
         throw Error('not testable module type');
     }
-    sendUserToast(`started test ${truncateRev(testJob?.id ?? '', 10)}`);
+    sendUserToast(`started test ${truncateRev(jobId ?? '', 10)}`);
 }
 function jobDone() {
     if (testJob && !testJob.canceled && testJob.type == 'CompletedJob' && `result` in testJob) {
-        $flowStateStore[mod.id].previewResult = testJob.result;
+        if ($flowStateStore[mod.id]?.previewResult) {
+            $flowStateStore[mod.id].previewResult = testJob.result;
+        }
     }
 }
 </script>
 
 <TestJobLoader
-	on:done={jobDone}
+	on:done={() => jobDone()}
 	bind:this={testJobLoader}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
@@ -74,7 +77,7 @@ function jobDone() {
 				color="red"
 				size="sm"
 				startIcon={{
-					icon: faRotateRight,
+					icon: faSpinner,
 					classes: 'animate-spin'
 				}}
 			>
@@ -94,7 +97,11 @@ function jobDone() {
 					</pre>
 				{:else}
 					<div class="p-2">
-						{testIsLoading ? 'Waiting for result...' : 'Test to see the result here'}
+						{#if testIsLoading}
+							<Icon data={faSpinner} class="animate-spin" />
+						{:else}
+							Test to see the result here
+						{/if}
 					</div>
 				{/if}
 			</Pane>

package/components/Popover.svelte

@@ -39,29 +39,21 @@ function close() {
 	use:popperRef
 	on:mouseenter={open}
 	on:mouseleave={close}
+	on:click
+	class={$$props.class}
 >
 	<slot />
 </button>
 {#if showTooltip}
-	<div id="tooltip" use:popperContent={extraOpts} on:mouseenter={open} on:mouseleave={close}>
+	<div
+		use:popperContent={extraOpts}
+		on:mouseenter={open}
+		on:mouseleave={close}
+		class="z-50  py-2 px-3 rounded-md  text-sm font-normal !text-gray-300 bg-gray-800
+		whitespace-normal text-left {$$props.class}"
+	>
 		<div class="max-w-sm">
 			<slot name="text" />
 		</div>
 	</div>
 {/if}
-
-<style>
-	#tooltip {
-    z-index: 50;
-    white-space: normal;
-    border-radius: 0.75rem;
-    --tw-bg-opacity: 1;
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-    padding: 1rem;
-    text-align: left;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 400;
-    --tw-text-opacity: 1;
-    color: rgb(209 213 219 / var(--tw-text-opacity))
-}</style>

package/components/Popover.svelte.d.ts

@@ -1,9 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         notClickable?: boolean | undefined;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/RadioButton.svelte

@@ -2,19 +2,21 @@
 export let options;
 export let value;
 export let disabled = false;
+export let labelClass = '';
+export let inputClass = '';
 import { createEventDispatcher } from 'svelte';
 import Tooltip from './Tooltip.svelte';
 const dispatch = createEventDispatcher();
 </script>
 
 <fieldset class="w-full">
-	<legend class="sr-only">{label}</legend>
+	<legend class="sr-only {labelClass}">{label}</legend>
 	<div class="flex flex-row flex-wrap gap-2 items-center mb-2 w-full">
 		{#each options as [label, val]}
 			<label
 				class="text-center text-sm border border-gray-300 h-full rounded-sm cursor-pointer p-2 
-				grow whitespace-nowrap hover:border-gray-600 hover:bg-gray-100
-				{val === value ? '!bg-blue-50 !border-blue-500' : ''}"
+				grow whitespace-nowrap duration-200 hover:border-gray-600 hover:bg-gray-100
+				{val === value ? '!bg-blue-50 !border-blue-500' : ''} {inputClass}"
 			>
 				<input
 					{disabled}

package/components/RadioButton.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         }, any][];
         value: any;
         disabled?: boolean | undefined;
+        labelClass?: string | undefined;
+        inputClass?: string | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/components/ResourceEditor.svelte

@@ -144,8 +144,9 @@ function parseJson() {
 						{#if !emptyString(jsonError)}<span
 								class="text-red-400 text-xs mb-1 flex flex-row-reverse">{jsonError}</span
 							>{:else}<div class="py-2" />{/if}
-						<div class="h-full w-full">
+						<div class="h-full w-full border p-1 rounded">
 							<SimpleEditor
+								autoHeight
 								class="editor"
 								lang="json"
 								bind:code={rawCode}

package/components/SchemaEditor.svelte

@@ -11,6 +11,9 @@ import Tooltip from './Tooltip.svelte';
 import { flip } from 'svelte/animate';
 const dispatch = createEventDispatcher();
 export let schema = emptySchema();
+if (!schema) {
+    schema = emptySchema();
+}
 let schemaModal;
 let schemaString = '';
 // Internal state: bound to args builder modal

package/components/SchemaForm.svelte

@@ -20,6 +20,9 @@ export let previousModuleId = undefined;
 export let shouldHideNoInputs = false;
 export let compact = false;
 export let password = undefined;
+export let noVariablePicker = false;
+export let filter = undefined;
+export let noDynamicToggle = false;
 let clazz = '';
 export { clazz as class };
 let inputCheck = {};
@@ -37,94 +40,99 @@ function removeExtraKey() {
 }
 $: schema?.properties && removeExtraKey();
 let pickForField;
-let itemPicker;
-let variableEditor;
+let itemPicker = undefined;
+let variableEditor = undefined;
 </script>
 
 <div class="w-full {clazz}">
 	{#if Object.keys(schema?.properties ?? {}).length > 0}
 		{#each Object.keys(schema?.properties ?? {}) as argName, i (argName)}
-			<div transition:slide|local>
-				{#if inputTransform}
-					<InputTransformForm
-						{previousModuleId}
-						bind:arg={args[argName]}
-						bind:schema
-						bind:argName
-						bind:inputCheck={inputCheck[argName]}
-						bind:extraLib
-						{variableEditor}
-						{itemPicker}
-						bind:pickForField
-					/>
-				{:else if typeof args == 'object'}
-					<ArgInput
-						autofocus={i == 0 && autofocus}
-						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}
-						properties={schema.properties[argName].properties}
-						bind:itemsType={schema.properties[argName].items}
-						disabled={disabledArgs.includes(argName) || disabled}
-						{editableSchema}
-						{compact}
-						password={argName == password}
-						{variableEditor}
-						{itemPicker}
-						bind:pickForField
-					/>
-				{:else}
-					Expected args to be an object, got {JSON.stringify(args)} instead
-				{/if}
-			</div>
+			{#if !filter || filter.includes(argName)}
+				<div transition:slide|local>
+					{#if inputTransform}
+						<InputTransformForm
+							{previousModuleId}
+							bind:arg={args[argName]}
+							bind:schema
+							bind:argName
+							bind:inputCheck={inputCheck[argName]}
+							bind:extraLib
+							{variableEditor}
+							{itemPicker}
+							bind:pickForField
+							{noDynamicToggle}
+						/>
+					{:else if typeof args == 'object'}
+						<ArgInput
+							autofocus={i == 0 && autofocus}
+							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}
+							properties={schema.properties[argName].properties}
+							bind:itemsType={schema.properties[argName].items}
+							disabled={disabledArgs.includes(argName) || disabled}
+							{editableSchema}
+							{compact}
+							password={argName == password}
+							{variableEditor}
+							{itemPicker}
+							bind:pickForField
+						/>
+					{:else}
+						Expected argument to be an object, got {JSON.stringify(args)} instead
+					{/if}
+				</div>
+			{/if}
 		{/each}
 	{:else if !shouldHideNoInputs}
 		<div class="text-gray-500 text-sm">No inputs</div>
 	{/if}
 </div>
 
-<ItemPicker
-	bind:this={itemPicker}
-	pickCallback={(path, _) => {
-		if (pickForField) {
-			if (inputTransform) {
-				args[pickForField].value = '$var:' + path
-			} else {
-				args[pickForField] = '$var:' + path
+{#if !noVariablePicker}
+	<ItemPicker
+		bind:this={itemPicker}
+		pickCallback={(path, _) => {
+			if (pickForField) {
+				if (inputTransform) {
+					args[pickForField].value = '$var:' + path
+				} else {
+					args[pickForField] = '$var:' + path
+				}
 			}
-		}
-	}}
-	itemName="Variable"
-	extraField="name"
-	loadItems={async () =>
-		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
-			name: x.path,
-			...x
-		}))}
->
-	<div
-		slot="submission"
-		class="flex flex-row-reverse w-full p-5 bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+		}}
+		itemName="Variable"
+		extraField="name"
+		loadItems={async () =>
+			(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
+				name: x.path,
+				...x
+			}))}
 	>
-		<Button
-			variant="border"
-			color="blue"
-			size="sm"
-			on:click={() => {
-				variableEditor?.initNew?.()
-			}}
+		<div
+			slot="submission"
+			class="flex flex-row-reverse w-full p-5 bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
 		>
-			Create a new variable
-		</Button>
-	</div>
-</ItemPicker>
+			<Button
+				variant="border"
+				color="blue"
+				size="sm"
+				on:click={() => {
+					variableEditor?.initNew?.()
+				}}
+			>
+				Create a new variable
+			</Button>
+		</div>
+	</ItemPicker>
 
-<VariableEditor bind:this={variableEditor} on:create={itemPicker.openDrawer} />
+	<VariableEditor bind:this={variableEditor} on:create={itemPicker.openDrawer} />
+{/if}