windmill-components 1.60.4 → 1.75.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/FieldHeader.svelte

@@ -7,17 +7,21 @@ export let required = false;
 export let itemsType = undefined;
 </script>
 
-<div class="inline-flex flex-row items-center">
+<div class="inline-flex flex-row items-center truncated">
 	<span class="font-semibold">
 		{label}
 	</span>
 	<Required {required} class="!ml-0" />
 
-	<span class="text-sm italic ml-1 text-indigo-800">
-		({type ?? 'any'}{contentEncoding && contentEncoding != ''
-			? `, encoding: ${contentEncoding}`
-			: ''}{format && format != '' ? `, format: ${format}` : ''}{itemsType?.type
-			? ` of ${itemsType?.type}s`
-			: ''})</span
-	>
+	{#if format && format != ''}
+		<span class="text-sm italic ml-1 text-indigo-800">
+			({format})
+		</span>
+	{:else}
+		<span class="text-sm italic ml-1 text-indigo-800">
+			({type ?? 'any'}{contentEncoding && contentEncoding != ''
+				? `, encoding: ${contentEncoding}`
+				: ''})</span
+		>
+	{/if}
 </div>

package/components/FlowBuilder.svelte

@@ -1,20 +1,18 @@
 <script>import { goto } from '$app/navigation';
-import { page } from '$app/stores';
 import { FlowService, ScheduleService } from '../gen';
+import { initHistory, redo, undo } from '../history';
 import { userStore, workspaceStore } from '../stores';
 import { encodeState, formatCron, loadHubScripts, sendUserToast } from '../utils';
-import { faCalendarAlt, faEye, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
+import { faCalendarAlt, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
 import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import CenteredPage from './CenteredPage.svelte';
-import { Button, Drawer, DrawerContent } from './common';
+import { Button, ButtonPopup, ButtonPopupItem, UndoRedo } from './common';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
-import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { OFFSET } from './CronInput.svelte';
-import FlowGraphViewer from './FlowGraphViewer.svelte';
+import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte';
 import FlowEditor from './flows/FlowEditor.svelte';
-import { flowStateStore } from './flows/flowState';
-import { flowStore } from './flows/flowStore';
+import { dfs } from './flows/flowStore';
 import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
 import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
 import { loadFlowSchedule } from './flows/scheduleUtils';
@@ -23,7 +21,8 @@ export let initialPath = '';
 export let selectedId;
 export let initialArgs = {};
 export let loading = false;
-let pathError = '';
+export let flowStore;
+export let flowStateStore;
 async function createSchedule(path) {
     const { cron, args, enabled } = $scheduleStore;
     try {
@@ -44,7 +43,9 @@ async function createSchedule(path) {
         sendUserToast(`The primary schedule could not be created: ${err}`, true);
     }
 }
-async function saveFlow() {
+let loadingSave = false;
+async function saveFlow(leave) {
+    loadingSave = true;
     const flow = cleanInputs($flowStore);
     const { cron, args, enabled } = $scheduleStore;
     $dirtyStore = false;
@@ -108,8 +109,13 @@ async function saveFlow() {
             await createSchedule(flow.path);
         }
     }
-    sendUserToast(`Success! flow saved at ${$flowStore.path}`);
-    goto(`/flows/get/${$flowStore.path}`);
+    loadingSave = false;
+    if (leave) {
+        goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`);
+    }
+    else if (initialPath !== $flowStore.path) {
+        goto(`/flows/edit/${$flowStore.path}?workspace_id=${$workspaceStore}`);
+    }
 }
 let timeout = undefined;
 $: {
@@ -131,17 +137,26 @@ function saveDraft() {
         }
     }, 500);
 }
-const selectedIdStore = writable(selectedId);
+const selectedIdStore = writable(selectedId ?? 'settings-metadata');
 const scheduleStore = writable({ args: {}, cron: '', enabled: false });
 const previewArgsStore = writable(initialArgs);
+const scriptEditorDrawer = writable(undefined);
+const moving = writable(undefined);
+const history = initHistory($flowStore);
+const testStepStore = writable({});
 function select(selectedId) {
     selectedIdStore.set(selectedId);
 }
 setContext('FlowEditorContext', {
     selectedId: selectedIdStore,
     schedule: scheduleStore,
-    select,
-    previewArgs: previewArgsStore
+    previewArgs: previewArgsStore,
+    scriptEditorDrawer,
+    moving,
+    history,
+    flowStateStore,
+    flowStore,
+    testStepStore
 });
 async function loadSchedule() {
     loadFlowSchedule(initialPath, $workspaceStore)
@@ -159,38 +174,81 @@ async function loadSchedule() {
 $: selectedId && select(selectedId);
 $: initialPath && $workspaceStore && loadSchedule();
 loadHubScripts();
-let flowViewer;
+function onKeyDown(event) {
+    switch (event.key) {
+        case 'Z':
+            if (event.ctrlKey) {
+                $flowStore = redo(history);
+                event.preventDefault();
+            }
+            break;
+        case 'z':
+            if (event.ctrlKey) {
+                $flowStore = undo(history, $flowStore);
+                $selectedIdStore = 'Input';
+                event.preventDefault();
+            }
+            break;
+        case 's':
+            if (event.ctrlKey) {
+                saveFlow(false);
+                event.preventDefault();
+            }
+            break;
+        case 'ArrowDown': {
+            let ids = generateIds();
+            let idx = ids.indexOf($selectedIdStore);
+            if (idx > -1 && idx < ids.length - 1) {
+                $selectedIdStore = ids[idx + 1];
+                event.preventDefault();
+            }
+            break;
+        }
+        case 'ArrowUp': {
+            let ids = generateIds();
+            let idx = ids.indexOf($selectedIdStore);
+            if (idx > 0 && idx < ids.length) {
+                $selectedIdStore = ids[idx - 1];
+                event.preventDefault();
+            }
+            break;
+        }
+    }
+}
+function generateIds() {
+    return [
+        'settings-metadata',
+        'constants',
+        ...dfs($flowStore.value.modules, (module) => module.id)
+    ];
+}
 </script>
 
-{#if !$userStore?.operator}
-	<UnsavedConfirmationModal />
+<svelte:window on:keydown={onKeyDown} />
 
-	<Drawer bind:this={flowViewer} size="75%">
-		<DrawerContent title="View Graph" on:close={flowViewer.closeDrawer} noPadding>
-			<div class="overflow-hidden h-full w-full">
-				<FlowGraphViewer flow={$flowStore} />
-			</div>
-		</DrawerContent>
-	</Drawer>
+{#if !$userStore?.operator}
+	<ScriptEditorDrawer bind:this={$scriptEditorDrawer} />
 
 	<div class="flex flex-col flex-1 h-screen">
 		<!-- Nav between steps-->
 		<div
 			class="justify-between flex flex-row w-full items-center pl-2.5 pr-6  space-x-4 overflow-x-auto scrollbar-hidden max-h-12 h-full"
 		>
-			<div class="flex flex-row">
+			<div class="flex flex-row gap-4 items-center">
 				<FlowImportExportMenu />
-				<Button
-					btnClasses="inline-flex"
-					startIcon={{ icon: faEye }}
-					variant="border"
-					color="light"
-					size="sm"
-					on:click={flowViewer.openDrawer}
-				>
-					Graph
-				</Button>
+				<UndoRedo
+					undoProps={{ disabled: $history.index === 0 }}
+					redoProps={{ disabled: $history.index === $history.history.length - 1 }}
+					on:undo={() => {
+						$flowStore = undo(history, $flowStore)
+						$selectedIdStore = 'Input'
+					}}
+					on:redo={() => {
+						$flowStore = redo(history)
+					}}
+				/>
 			</div>
+
 			<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
 				{#if $scheduleStore.enabled}
 					<Button
@@ -237,12 +295,22 @@ let flowViewer;
 			<div class="flex flex-row space-x-2">
 				<FlowPreviewButtons />
 				<div class="center-center">
-					<Button
-						disabled={pathError != ''}
-						startIcon={{ icon: faSave }}
+					<ButtonPopup
+						loading={loadingSave}
 						size="sm"
-						on:click={saveFlow}>Save</Button
+						startIcon={{ icon: faSave }}
+						on:click={() => saveFlow(false)}
 					>
+						<svelte:fragment slot="main">Save</svelte:fragment>
+						<ButtonPopupItem on:click={() => saveFlow(true)}>Save and exit</ButtonPopupItem>
+						{#if initialPath != ''}
+							<ButtonPopupItem
+								on:click={() => {
+									window.open(`/flows/add?template=${initialPath}`)
+								}}>Fork</ButtonPopupItem
+							>
+						{/if}
+					</ButtonPopup>
 				</div>
 			</div>
 		</div>

package/components/FlowBuilder.svelte.d.ts

@@ -1,10 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
+import { type Flow } from '../gen';
+import { type Writable } from 'svelte/store';
+import type { FlowState } from './flows/flowState';
 declare const __propDef: {
     props: {
         initialPath?: string | undefined;
         selectedId: string | undefined;
         initialArgs?: Record<string, any> | undefined;
         loading?: boolean | undefined;
+        flowStore: Writable<Flow>;
+        flowStateStore: Writable<FlowState>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowGraphViewer.svelte

@@ -71,14 +71,13 @@ let topHeight = 0;
 </Drawer>
 <div class="grid grid-cols-3 w-full">
 	<div
-		bind:clientHeight={topHeight}
 		class="{noSide
 			? 'col-span-3'
-			: 'sm:col-span-2 col-span-3'} w-full border border-gray-400 h-screen"
+			: 'sm:col-span-2 col-span-3'} w-full border border-gray-400 max-h-screen"
 		class:overflow-auto={overflowAuto}
 	>
 		<FlowGraph
-			minHeight={topHeight}
+			minHeight={400}
 			modules={flow?.value?.modules}
 			failureModule={flow?.value?.failure_module}
 			on:click={(e) => (stepDetail = e.detail)}
@@ -89,7 +88,9 @@ let topHeight = 0;
 			class="w-full border-r border-b border-t border-gray-400 min-h-[150px] p-2 overflow-auto hidden sm:block"
 		>
 			{#if stepDetail == undefined}
-				<span class="font-black text-lg w-full my-4">
+				<SchemaViewer schema={flow?.schema} />
+
+				<span class="font-black text-lg w-full my-4 mt-14">
 					<span>Click on a step to see its details</span>
 				</span>
 			{:else if stepDetail == 'Input'}

package/components/FlowJobResult.svelte

@@ -1,20 +1,28 @@
-<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
 	class:border={!noBorder}
-	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow  border-gray-400 h-full"
+	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow  border-gray-400 h-full max-h-screen"
 >
-	<div class="bg-white max-h-80 h-full p-1 overflow-auto relative">
+	<div class="bg-white {col ? '' : '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">
+	<div class="overflow-auto {col ? '' : 'max-h-80'} h-full relative">
 		<LogViewer content={logs ?? ''} isLoading={false} />
 	</div>
 </div>

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>