windmill-components 1.56.2 → 1.57.1

package/assets/app.css

@@ -27,6 +27,10 @@
 		whitespace: normal !important;
 	}
 
+	pre code.hljs {
+		overflow: visible !important;
+	}
+
 	svelte-virtual-list-row {
 		overflow: visible !important;
 	}
@@ -40,7 +44,7 @@
 		box-shadow: none !important;
 	}
 
-	.templatable-editor span.mtk20 {
+	.Template-editor span.mtk20 {
 		color: black !important;
 	}
 }

package/components/ArgInput.svelte

@@ -157,7 +157,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								bind:value={description}
 								placeholder="Field description"
 							/>
-							{#if type == 'string' && !contentEncoding && format != 'date-time'}
+							{#if type == 'string' && format != 'date-time'}
 								<StringTypeNarrowing bind:format bind:pattern bind:enum_ bind:contentEncoding />
 							{:else if type == 'object'}
 								<ObjectTypeNarrowing bind:format />
@@ -300,18 +300,18 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				</select>
 			{:else if inputCat == 'date'}
 				<input {autofocus} class="inline-block" type="datetime-local" bind:value />
-			{:else if inputCat == 'sql'}
-				<div class="border rounded mb-4 w-full border-gray-700">
+			{:else if inputCat == 'sql' || inputCat == 'yaml'}
+				<div class="border my-1 mb-4 w-full border-gray-400">
 					<SimpleEditor
 						on:focus={() => dispatch('focus')}
 						on:blur={() => dispatch('blur')}
 						bind:this={editor}
-						lang="sql"
+						lang={inputCat}
 						bind:code={value}
-						class="few-lines-editor"
 						on:change={async () => {
 							dispatch('input', { rawValue: value, isRaw: false })
 						}}
+						autoHeight
 					/>
 				</div>
 			{:else if inputCat == 'base64'}
@@ -360,7 +360,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 										variant="border"
 										color="blue"
 										size="sm"
-										btnClasses="min-w-min items-center leading-4 py-0"
+										btnClasses="min-w-min min-h-[34px] items-center leading-4 py-0"
 										on:click={() => {
 											pickForField = label
 											itemPicker?.openDrawer?.()

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/DisplayResult.svelte

@@ -73,7 +73,7 @@ let payload = '';
 				class="grid grid-flow-col-dense border border-gray-200 rounded-md "
 			>
 				{#each Object.keys(result) as col}
-					<div class="flex flex-col max-h-40 min-w-full overflow-auto">
+					<div class="flex flex-col max-h-40 min-w-full">
 						<div
 							class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md "
 						>

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} {...$$restProps} slot="trigger">
 		{#if !$$slots.default}
-			<Icon data={faEllipsisH} scale={1.2} />
+			<MoreHorizontal size={20} />
 		{:else}
 			<slot />
 		{/if}

package/components/Dropdown.svelte.d.ts

@@ -2,9 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 import type { DropdownItem } from '../utils';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         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

@@ -28,6 +28,7 @@ languages.typescript.typescriptDefaults.setDiagnosticsOptions({
     noSuggestionDiagnostics: true,
     noSyntaxValidation: true
 });
+languages.typescript.typescriptDefaults.setExtraLibs([]);
 meditor.defineTheme('myTheme', {
     base: 'vs',
     inherit: true,
@@ -105,7 +106,7 @@ export function setCode(ncode) {
         editor.setValue(ncode);
     }
 }
-function format() {
+export function format() {
     if (editor) {
         code = getCode();
         editor.getAction('editor.action.formatDocument').run();
@@ -156,7 +157,6 @@ export async function reloadWebsocket() {
                 markdown: {
                     isTrusted: true
                 },
-                // workspaceFolder: { uri: Uri.parse(`/tmp/${name}`), name: 'tmp', index: 0 },
                 initializationOptions,
                 middleware: {
                     workspace: {
@@ -354,14 +354,16 @@ async function closeWebsockets() {
 async function loadMonaco() {
     const model = meditor.createModel(code, lang, mUri.parse(uri));
     model.updateOptions(updateOptions);
-    editor = meditor.create(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
+    editor = meditor.create(divEl, {
+        ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets)
+    });
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         $dirtyStore = true;
         timeoutModel && clearTimeout(timeoutModel);
         timeoutModel = setTimeout(() => {
             code = getCode();
-            dispatch('change');
+            dispatch('change', code);
         }, 500);
     });
     editor.onDidFocusEditorText(() => {

package/components/Editor.svelte.d.ts

@@ -22,6 +22,7 @@ declare const __propDef: {
         insertAtBeginning?: ((code: string) => void) | undefined;
         insertAtLine?: ((code: string, line: number) => void) | undefined;
         setCode?: ((ncode: string) => void) | undefined;
+        format?: (() => void) | undefined;
         clearContent?: (() => Promise<void>) | undefined;
         reloadWebsocket?: (() => Promise<void>) | undefined;
         addAction?: ((id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
@@ -44,6 +45,7 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get insertAtBeginning(): (code: string) => void;
     get insertAtLine(): (code: string, line: number) => void;
     get setCode(): (ncode: string) => void;
+    get format(): () => void;
     get clearContent(): () => Promise<void>;
     get reloadWebsocket(): () => Promise<void>;
     get addAction(): (id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;

package/components/EditorBar.svelte

@@ -3,7 +3,7 @@
 
 <script>import { ResourceService, VariableService } from '../gen';
 import { getScriptByPath, sendUserToast } from '../utils';
-import { faCube, faDollarSign, faEye, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
+import { faBroom, faCube, faDollarSign, faEye, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
 import { workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
@@ -286,6 +286,20 @@ async function onScriptPick(e) {
 				</span>
 			</Button></div
 		>
+		<div>
+			<Button
+				btnClasses="!font-medium"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={editor.format}
+				startIcon={{ icon: faBroom }}
+			>
+				{#if !iconOnly}
+					Format (Ctrl+S)
+				{/if}
+			</Button></div
+		>
 	</div>
 	<div class="py-1">
 		<div>

package/components/FlowBuilder.svelte

@@ -2,13 +2,12 @@
 import { page } from '$app/stores';
 import { FlowService, ScheduleService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
-import { encodeState, formatCron, loadHubScripts, sendUserToast, setQueryWithoutLoad } from '../utils';
+import { encodeState, formatCron, loadHubScripts, sendUserToast } from '../utils';
 import { faCalendarAlt, faEye, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
 import { setContext } from 'svelte';
-import { Icon } from 'svelte-awesome';
 import { writable } from 'svelte/store';
 import CenteredPage from './CenteredPage.svelte';
-import { Badge, Button, Drawer, DrawerContent } from './common';
+import { Button, Drawer, DrawerContent } from './common';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
 import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { OFFSET } from './CronInput.svelte';
@@ -50,6 +49,7 @@ async function saveFlow() {
     const { cron, args, enabled } = $scheduleStore;
     $dirtyStore = false;
     if (initialPath === '') {
+        localStorage.removeItem('flow');
         await FlowService.createFlow({
             workspace: $workspaceStore,
             requestBody: {
@@ -65,6 +65,7 @@ async function saveFlow() {
         }
     }
     else {
+        localStorage.removeItem(`flow-${initialPath}`);
         await FlowService.updateFlow({
             workspace: $workspaceStore,
             path: initialPath,
@@ -112,16 +113,23 @@ async function saveFlow() {
 }
 let timeout = undefined;
 $: {
-    if ($flowStore && $flowStateStore) {
-        setUrl();
+    if ($flowStore || $selectedIdStore) {
+        saveDraft();
     }
 }
-function setUrl() {
+function saveDraft() {
     timeout && clearTimeout(timeout);
-    timeout = setTimeout(() => setQueryWithoutLoad($page.url, 'state', encodeState({
-        flow: $flowStore,
-        selectedId: $selectedIdStore
-    })), 500);
+    timeout = setTimeout(() => {
+        try {
+            localStorage.setItem(initialPath ? `flow-${initialPath}` : 'flow', encodeState({
+                flow: $flowStore,
+                selectedId: $selectedIdStore
+            }));
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }, 500);
 }
 const selectedIdStore = writable(selectedId);
 const scheduleStore = writable({ args: {}, cron: '', enabled: false });

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/GroupEditor.svelte

@@ -85,6 +85,7 @@ function getRole(x) {
 				placeholder="Summary of the group"
 			/>
 			<Button
+				disabled={!can_write}
 				size="xs"
 				on:click={async () => {
 					await GroupService.updateGroup({

package/components/IconedResourceType.svelte

@@ -8,12 +8,12 @@ export let center = false;
 $: name_prefix = name.split('_')[0];
 </script>
 
-<div class=" truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
+<div class="truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
 	{#if !silent && !after}
 		{name}
 	{/if}
 	{#if APP_TO_ICON_COMPONENT[name_prefix]}
-		<span class="text-gray-700">
+		<span class="text-gray-700 grayscale">
 			<svelte:component this={APP_TO_ICON_COMPONENT[name_prefix]} {height} {width} />
 		</span>
 	{:else}

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;
@@ -53,7 +54,7 @@ function setPropertyType(rawValue) {
     }
 }
 function isStaticTemplate(inputCat) {
-    return inputCat === 'string' || inputCat === 'sql';
+    return inputCat === 'string' || inputCat === 'sql' || inputCat == 'yaml';
 }
 function connectProperty(rawValue) {
     if (isStaticTemplate(inputCat)) {
@@ -90,13 +91,16 @@ 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 = '}';
+$: schema.properties[argName].default &&
+    !arg?.value &&
+    monacoTemplate?.setCode(schema.properties[argName].default);
 </script>
 
 {#if arg != undefined}
-	<div class="flex flex-row justify-between gap-1 mb-1">
+	<div class="flex flex-row justify-between gap-1 pb-1">
 		<div class="flex items-center flex-wrap grow">
 			<FieldHeader
 				label={argName}
@@ -118,21 +122,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 +134,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'
 						}
@@ -168,7 +164,7 @@ const closeBracket = '}';
 				>
 					{#if isStaticTemplate(inputCat)}
 						<ToggleButton light position="left" value="static" size="xs">
-							{'${} '}Templatable &nbsp; <Tooltip
+							{'${} '}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'
@@ -188,13 +184,25 @@ 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
-		class="relative {$propPickerConfig?.propName == argName
+		class="relative mb-6 {$propPickerConfig?.propName == argName
 			? 'outline outline-offset-0 outline-2 outline-blue-500 rounded-md'
 			: ''}"
 	>
@@ -205,14 +213,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
@@ -263,7 +274,6 @@ const closeBracket = '}';
 			Not recognized input type {argName}
 		{/if}
 	</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>;