windmill-components 1.60.3 → 1.70.0

package/components/EditorBar.svelte

@@ -16,6 +16,8 @@ import WorkspaceScriptPicker from './flows/pickers/WorkspaceScriptPicker.svelte'
 import PickHubScript from './flows/pickers/PickHubScript.svelte';
 import ToggleHubWorkspace from './ToggleHubWorkspace.svelte';
 import Skeleton from './common/skeleton/Skeleton.svelte';
+import Popover from './Popover.svelte';
+import Kbd from './common/kbd/Kbd.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
@@ -202,121 +204,137 @@ async function onScriptPick(e) {
 <ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
 
-<div class="flex flex-row justify-between items-center overflow-hidden w-full px-1">
-	<div class="flex flex-row divide-x items-center">
-		<div class="mx-2">
-			{#if validCode}
-				<Badge color="green">Inputs</Badge>
-			{:else}
-				<Badge color="red">Inputs</Badge>
-			{/if}
-		</div>
-		<div>
-			<Button
-				color="light"
-				btnClasses="mr-1 !font-medium"
-				on:click={contextualVariablePicker.openDrawer}
-				size="xs"
-				spacingSize="md"
-				startIcon={{ icon: faDollarSign }}
-				{iconOnly}
-			>
-				+Context Var
-			</Button>
-		</div>
-		<div>
-			<Button
-				color="light"
-				btnClasses="mx-1 !font-medium"
-				on:click={variablePicker.openDrawer}
-				size="xs"
-				spacingSize="md"
-				startIcon={{ icon: faDollarSign }}
-				{iconOnly}
-			>
-				+Variable
-			</Button>
-		</div>
-		<div>
-			<Button
-				btnClasses="mx-1 !font-medium"
-				size="xs"
-				spacingSize="md"
-				color="light"
-				on:click={resourcePicker.openDrawer}
-				{iconOnly}
-				startIcon={{ icon: faCube }}
-			>
-				+Resource
-			</Button>
-		</div>
-		<div>
-			<Button
-				btnClasses="mx-1 !font-medium"
-				size="xs"
-				spacingSize="md"
-				color="light"
-				on:click={editor.clearContent}
-				{iconOnly}
-				startIcon={{ icon: faRotateLeft }}
-			>
-				Reset
-			</Button>
-		</div>
-		<div>
-			<Button
-				btnClasses="!font-medium"
-				size="xs"
-				spacingSize="md"
-				color="light"
-				on:click={editor.reloadWebsocket}
-				startIcon={{ icon: faRotate }}
-			>
-				{#if !iconOnly}
-					Assistant
-				{/if}
-				<span class="ml-1 -my-1">
-					{#if lang == 'deno'}
-						(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
-					{:else if lang == 'go'}
-						(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
-					{:else if lang == 'python3'}
-						(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
-						<span class={websocketAlive.black ? 'green' : 'text-red-700'}>Black</span>)
+<div class="flex justify-between items-center overflow-y-auto w-full p-1">
+	<div class="flex items-center">
+		<Badge color={validCode ? 'green' : 'red'} class="min-w-[60px] mr-3">
+			{validCode ? 'Valid' : 'Invalid'}
+		</Badge>
+		<div class="flex items-center divide-x">
+			<Popover notClickable placement="bottom" disapperTimoout={0} class="pr-1" disablePopup={!iconOnly}>
+				<Button
+					color="light"
+					btnClasses="!font-medium !h-full"
+					on:click={contextualVariablePicker.openDrawer}
+					size="xs"
+					spacingSize="md"
+					startIcon={{ icon: faDollarSign }}
+					{iconOnly}
+				>
+					+Context Var
+				</Button>
+				<svelte:fragment slot="text">
+					Add context variable
+				</svelte:fragment>
+			</Popover>
+			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+				<Button
+					color="light"
+					btnClasses="!font-medium !h-full"
+					on:click={variablePicker.openDrawer}
+					size="xs"
+					spacingSize="md"
+					startIcon={{ icon: faDollarSign }}
+					{iconOnly}
+				>
+					+Variable
+				</Button>
+				<svelte:fragment slot="text">
+					Add variable
+				</svelte:fragment>
+			</Popover>
+			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+				<Button
+					btnClasses="!font-medium !h-full"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={resourcePicker.openDrawer}
+					{iconOnly}
+					startIcon={{ icon: faCube }}
+				>
+					+Resource
+				</Button>
+				<svelte:fragment slot="text">
+					Add resource
+				</svelte:fragment>
+			</Popover>
+			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+				<Button
+					btnClasses="!font-medium !h-full"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={editor.clearContent}
+					{iconOnly}
+					startIcon={{ icon: faRotateLeft }}
+				>
+					Reset
+				</Button>
+				<svelte:fragment slot="text">
+					Reset
+				</svelte:fragment>
+			</Popover>
+			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+				<Button
+					btnClasses="!font-medium !h-full"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={editor.reloadWebsocket}
+					startIcon={{ icon: faRotate }}
+				>
+					{#if !iconOnly}
+						Assistant
 					{/if}
-				</span>
-			</Button></div
-		>
-		<div>
-			<Button
-				btnClasses="!font-medium"
-				size="xs"
-				spacingSize="md"
-				color="light"
-				on:click={editor.format}
-				startIcon={{ icon: faBroom }}
-			>
-				{#if !iconOnly}
+					<span class="ml-1 -my-1">
+						{#if lang == 'deno'}
+							(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
+						{:else if lang == 'go'}
+							(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
+						{:else if lang == 'python3'}
+							(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
+							<span class={websocketAlive.black ? 'green' : 'text-red-700'}>Black</span>)
+						{/if}
+					</span>
+				</Button>
+				<svelte:fragment slot="text">
+					Reload assistant
+				</svelte:fragment>
+			</Popover>
+			<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+				<Button
+					btnClasses="!font-medium"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={editor.format}
+					{iconOnly}
+					startIcon={{ icon: faBroom }}
+				>
 					Format (Ctrl+S)
-				{/if}
-			</Button></div
-		>
-	</div>
-	<div class="py-1">
-		<div>
-			<Button
-				btnClasses="mx-1 !font-medium"
-				size="xs"
-				spacingSize="md"
-				color="light"
-				on:click={scriptPicker.openDrawer}
-				{iconOnly}
-				startIcon={{ icon: faEye }}
-			>
-				Script
-			</Button>
+				</Button>
+				<svelte:fragment slot="text">
+					Format <Kbd class="!text-gray-800">Ctrl</Kbd> + <Kbd class="!text-gray-800">S</Kbd>
+				</svelte:fragment>
+			</Popover>
 		</div>
 	</div>
+	<Popover notClickable placement="bottom" disapperTimoout={0} class="px-1" disablePopup={!iconOnly}>
+		<Button
+			btnClasses="!font-medium"
+			size="xs"
+			spacingSize="md"
+			color="light"
+			on:click={scriptPicker.openDrawer}
+			{iconOnly}
+			startIcon={{ icon: faEye }}
+		>
+			Script
+		</Button>
+		<svelte:fragment slot="text">
+			Script
+		</svelte:fragment>
+	</Popover>
 </div>
 
 <style>

package/components/FlowBuilder.svelte

@@ -108,8 +108,8 @@ async function saveFlow() {
             await createSchedule(flow.path);
         }
     }
-    sendUserToast(`Success! flow saved at ${$flowStore.path}`);
-    goto(`/flows/get/${$flowStore.path}`);
+    sendUserToast(`Flow saved at ${$flowStore.path}`);
+    goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`);
 }
 let timeout = undefined;
 $: {

package/components/FlowJobResult.svelte

@@ -1,9 +1,11 @@
-<script>import DisplayResult from './DisplayResult.svelte';
+<script>import { Loader2 } from 'lucide-svelte';
+import DisplayResult from './DisplayResult.svelte';
 import LogViewer from './LogViewer.svelte';
 export let result;
 export let logs;
 export let col = false;
 export let noBorder = false;
+export let loading;
 </script>
 
 <div
@@ -12,7 +14,13 @@ export let noBorder = false;
 >
 	<div class="bg-white max-h-80 h-full p-1 overflow-auto relative">
 		<span class="text-gray-500">Result</span>
-		<DisplayResult {result} />
+		{#if result}
+			<DisplayResult {result} />
+		{:else if loading}
+			<Loader2 class="animate-spin" />
+		{:else}
+			<div class="text-gray-400">No result (result is undefined)</div>
+		{/if}
 	</div>
 	<div class="overflow-auto max-h-80 h-full relative">
 		<LogViewer content={logs ?? ''} isLoading={false} />

package/components/FlowJobResult.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         logs: string;
         col?: boolean | undefined;
         noBorder?: boolean | undefined;
+        loading: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowMetadata.svelte

@@ -1,7 +1,7 @@
 <script>import JobStatus from './JobStatus.svelte';
 import Icon from 'svelte-awesome';
-import { displayDaysAgo } from '../utils';
-import { faCalendar, faClock, faRobot, faScroll, faUser, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+import { displayDate, displayDaysAgo } from '../utils';
+import { faCalendar, faClock, faRobot, faScroll, faUser, faBarsStaggered, faMemory } from '@fortawesome/free-solid-svg-icons';
 import ScheduleEditor from './ScheduleEditor.svelte';
 import { onDestroy, onMount } from 'svelte';
 let time = Date.now();
@@ -27,16 +27,31 @@ let scheduleEditor;
 		<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
 			class="mx-2 text-2xs text-gray-600"
 		>
-			{#key time}
-				Received job {displayDaysAgo(job.created_at ?? '')}
-			{/key}</span
+			{#if job['success'] != undefined}
+				Received job: {displayDate(job.created_at ?? '')}
+			{:else}
+				{#key time}
+					Received job {displayDaysAgo(job.created_at ?? '')}
+				{/key}
+			{/if}</span
 		>
 	</div>
 	{#if job && 'started_at' in job && job.started_at}
 		<div>
 			<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span class="mx-2">
-				{#key time}
-					Started {displayDaysAgo(job.started_at ?? '')}{/key}</span
+				{#if job['success'] != undefined}
+					Started: {displayDate(job.started_at ?? '')}
+				{:else}
+					{#key time}
+						Started {displayDaysAgo(job.started_at ?? '')}{/key}
+				{/if}
+			</span>
+		</div>
+	{/if}
+	{#if job && job['mem_peak']}
+		<div>
+			<Icon class="text-gray-700" data={faMemory} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+				Mem peak: {(job['mem_peak'] / 1024).toPrecision(5)}MB</span
 			>
 		</div>
 	{/if}
@@ -78,7 +93,8 @@ let scheduleEditor;
 		<div>
 			<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
 				By {job.created_by}
-				{#if job.permissioned_as !== `u/${job.created_by}`}but permissioned as {job.permissioned_as}{/if}
+				{#if job.permissioned_as !== `u/${job.created_by}` && job.permissioned_as != job.created_by}but
+					permissioned as {job.permissioned_as}{/if}
 			</span>
 		</div>
 	</div>

package/components/FlowPreviewContent.svelte

@@ -141,8 +141,8 @@ $: if (job?.type === 'CompletedJob') {
 	</div>
 	<FlowProgressBar {job} bind:reset={jobProgressReset} />
 
-	<div class="overflow-y-auto grow flex-col flex divide-y divide-gray-600 ">
-		<div class="max-h-1/2 overflow-auto">
+	<div class="overflow-y-auto grow  divide-y divide-gray-600 ">
+		<div class="max-h-1/2 overflow-auto border-b border-gray-700">
 			<SchemaForm
 				noVariablePicker
 				compact
@@ -152,8 +152,7 @@ $: if (job?.type === 'CompletedJob') {
 				bind:args={$previewArgs}
 			/>
 		</div>
-
-		<div class="h-full pt-4 grow">
+		<div class="pt-4 grow">
 			{#if jobId}
 				<FlowStatusViewer bind:flowState={$flowStateStore} {jobId} bind:job />
 			{:else}

package/components/FlowStatusViewer.svelte

@@ -11,7 +11,7 @@ import DisplayResult from './DisplayResult.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
 import { FlowGraph } from './graph';
 import ModuleStatus from './ModuleStatus.svelte';
-import { displayDate, isOwner, pluralize, truncateRev } from '../utils';
+import { displayDate, emptyString, isOwner, pluralize, truncateRev } from '../utils';
 import JobArgs from './JobArgs.svelte';
 import Tooltip from './Tooltip.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
@@ -127,6 +127,14 @@ async function loadOwner(path) {
 }
 let selected = 'graph';
 let payload = '"a test payload in json"';
+function isSuccess(arg) {
+    if (arg == undefined) {
+        return undefined;
+    }
+    else {
+        return arg == true;
+    }
+}
 </script>
 
 {#if job}
@@ -143,7 +151,11 @@ let payload = '"a test payload in json"';
 				<FlowPreviewStatus {job} />
 				{#if `result` in job}
 					<div class="w-full h-full">
-						<FlowJobResult result={job.result} logs={job.logs ?? ''} />
+						<FlowJobResult
+							loading={job['running'] == true}
+							result={job.result}
+							logs={job.logs ?? ''}
+						/>
 					</div>
 				{:else if job.flow_status?.modules?.[job?.flow_status?.step]?.type === FlowStatusModule.type.WAITING_FOR_EVENTS}
 					<div class="w-full h-full mt-2 text-sm text-gray-600">
@@ -189,14 +201,21 @@ let payload = '"a test payload in json"';
 					<div class="flex flex-col gap-1">
 						{#each innerModules as mod, i (mod.id)}
 							{#if mod.type == FlowStatusModule.type.IN_PROGRESS}
+								{@const rawMod = job.raw_flow?.modules[i]}
+
 								<div
 									><span class="inline-flex gap-1"
 										><Badge color="indigo">{mod.id}</Badge>
-										{#if job.raw_flow?.modules[i]?.summary}
-											<span class="font-medium text-gray-900">
-												{job.raw_flow?.modules[i]?.summary ?? ''}
-											</span>
-										{/if}
+										<span class="font-medium text-gray-900">
+											{#if !emptyString(rawMod?.summary)}
+												{rawMod?.summary ?? ''}
+											{:else if rawMod?.value.type == 'script'}
+												{rawMod.value.path ?? ''}
+											{:else if rawMod?.value.type}
+												{rawMod?.value.type}
+											{/if}
+										</span>
+
 										<Loader2 class="animate-spin" /></span
 									></div
 								>
@@ -389,6 +408,7 @@ let payload = '"a test payload in json"';
 					</div>
 
 					<FlowGraph
+						success={isSuccess(job?.['success'])}
 						flowModuleStates={localFlowModuleStates}
 						on:click={(e) => {
 							if (e.detail.id) {
@@ -407,7 +427,13 @@ let payload = '"a test payload in json"';
 					{#if selectedNode}
 						{@const node = localFlowModuleStates[selectedNode]}
 						{#if selectedNode == 'end'}
-							<FlowJobResult noBorder col result={job['result'] ?? {}} logs={job.logs ?? ''} />
+							<FlowJobResult
+								loading={job['running']}
+								noBorder
+								col
+								result={job['result']}
+								logs={job.logs ?? ''}
+							/>
 						{:else if selectedNode == 'start'}
 							{#if job.args}
 								<div class="p-2">
@@ -434,7 +460,13 @@ let payload = '"a test payload in json"';
 									</div>
 								{/if}
 							</div>
-							<FlowJobResult noBorder col result={node.result ?? {}} logs={node.logs ?? ''} />
+							<FlowJobResult
+								loading={job['running'] == true}
+								noBorder
+								col
+								result={node.result}
+								logs={node.logs ?? ''}
+							/>
 						{:else}
 							<p class="p-2 text-gray-600 italic"
 								>The execution of this node has no information attached to it. The job likely did

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])
@@ -115,7 +115,7 @@ let ownerKind = 'user';
 	{#if perms}
 		<TableCustom>
 			<tr slot="header-row">
-				<th>user</th>
+				<th>user/group</th>
 				<th />
 				<th />
 			</tr>
@@ -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/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';
     }
@@ -94,9 +94,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}
@@ -134,7 +137,7 @@ $: schema.properties[argName].default &&
 									argName,
 									previousModuleId,
 									staticTemplate
-										? `\`${arg?.value ?? ''}\``
+										? `\`${arg?.value?.toString().replaceAll('`', '\\`') ?? ''}\``
 										: arg.value
 										? JSON.stringify(arg?.value, null, 4)
 										: ''
@@ -149,6 +152,7 @@ $: schema.properties[argName].default &&
 							if (staticTemplate) {
 								if (arg) {
 									arg.value = codeToStaticTemplate(arg.expr)
+									arg.expr = undefined
 								}
 								setPropertyType(arg?.value)
 							} else {

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) {
@@ -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,7 +6,7 @@ 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 { flowStateStore, testStepStore } from './flows/flowState';
 import { flowStore } from './flows/flowStore';
 import { workspaceStore } from '../stores';
 import { Loader2 } from 'lucide-svelte';
@@ -16,7 +16,16 @@ export let schema;
 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);
 }