windmill-components 1.55.2 → 1.56.1

package/components/Dropdown.svelte

@@ -20,8 +20,7 @@ const dispatch = createEventDispatcher();
 		{#each dropdownItems as item, i}
 			{#if item.action}
 				<button
-					on:click={(event) => {
-						event.preventDefault()
+					on:click|preventDefault|stopPropagation={(event) => {
 						if (!item.disabled) {
 							close()
 							item.action && item.action(event)
@@ -30,7 +29,7 @@ const dispatch = createEventDispatcher();
 					}}
 					class="block w-full  whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
 					 px-4 py-2 text-sm text-gray-700 text-left 
-					 {item.disabled ? 'bg-gray-100' : ''}
+					 {item.disabled ? 'bg-gray-200' : ''}
 					 {item.separatorTop ? 'border-t' : ''} {item.separatorBottom ? 'border-b' : ''} {item.type ==
 					'delete'
 						? 'text-red-500'
@@ -52,14 +51,9 @@ const dispatch = createEventDispatcher();
 			{:else if item.href && !item.disabled}
 				<a
 					href={item.href}
-					on:click={(e) => {
-						if (!item.disabled) {
-							close()
-						} else {
-							e.preventDefault()
-						}
-					}}
-					class="block w-full px-4 font-semibold  py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30"
+					on:click|stopPropagation
+					class="block w-full px-4 font-semibold text-left  py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
+					{item.disabled ? 'bg-gray-200' : ''}"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"
@@ -77,11 +71,11 @@ const dispatch = createEventDispatcher();
 			{:else}
 				<span
 					class:bg-gray-50={item.disabled}
-					class="block  px-4 py-2 text-sm text-gray-700 cursor-auto"
+					class="block  text-left px-4 py-2 text-sm text-gray-700 cursor-auto"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"
-					on:click|preventDefault
+					on:click|preventDefault|stopPropagation
 				>
 					{#if item.icon}
 						<Icon

package/components/FlowPreviewContent.svelte

@@ -89,7 +89,7 @@ $: if (job?.type === 'CompletedJob') {
 	<div class="flex flex-row justify-between w-full items-center gap-x-2">
 		<button
 			on:click={() => dispatch('close')}
-			class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
+			class="hover:bg-gray-200 bg-gray-100 rounded-full w-16 h-8 flex items-center justify-center transition-all"
 		>
 			<Icon data={faClose} class="text-gray-500" />
 		</button>

package/components/FlowStatusViewer.svelte

@@ -1,9 +1,9 @@
 <script>import { FlowStatusModule, Job, JobService } from '../gen';
-import { workspaceStore } from '../stores';
+import { userStore, workspaceStore } from '../stores';
 import FlowJobResult from './FlowJobResult.svelte';
 import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte';
 import Icon from 'svelte-awesome';
-import { faChevronDown, faChevronUp, faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import { onDestroy } from 'svelte';
 import { Button, Tab } from './common';
@@ -11,8 +11,10 @@ import DisplayResult from './DisplayResult.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
 import { FlowGraph } from './graph';
 import ModuleStatus from './ModuleStatus.svelte';
-import { displayDate, truncateRev } from '../utils';
+import { displayDate, isOwner, pluralize, truncateRev } from '../utils';
 import JobArgs from './JobArgs.svelte';
+import Tooltip from './Tooltip.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 const dispatch = createEventDispatcher();
 export let jobId;
 export let flowState = undefined;
@@ -21,6 +23,8 @@ export let job = undefined;
 export let flowModuleStates = {};
 let localFlowModuleStates = {};
 export let retry_status = {};
+export let suspend_status = undefined;
+export let is_owner = false;
 let selectedNode = undefined;
 let jobResults = [];
 let jobFailures = [];
@@ -44,6 +48,7 @@ $: {
     }
 }
 $: updateFailCount(job?.flow_status?.retry?.fail_count);
+$: suspend_status = job?.flow_status?.modules?.[job?.flow_status.step]?.count;
 function updateFailCount(count) {
     if (count) {
         retry_status[jobId ?? ''] = count;
@@ -103,11 +108,12 @@ async function loadJobInProgress() {
     }
 }
 $: job && dispatch('jobsLoaded', job);
-function updateJobId() {
+async function updateJobId() {
     if (jobId !== job?.id) {
         retry_status = {};
         localFlowModuleStates = {};
-        loadJobInProgress();
+        await loadJobInProgress();
+        job?.script_path && loadOwner(job.script_path);
     }
 }
 $: jobId && updateJobId();
@@ -115,7 +121,11 @@ $: isListJob = flowJobIds && Array.isArray(flowJobIds?.flowJobs);
 onDestroy(() => {
     timeout && clearTimeout(timeout);
 });
+async function loadOwner(path) {
+    is_owner = await isOwner(path, $userStore, $workspaceStore);
+}
 let selected = 'graph';
+let payload = '"a test payload in json"';
 </script>
 
 {#if job}
@@ -134,6 +144,41 @@ let selected = 'graph';
 					<div class="w-full h-full">
 						<FlowJobResult 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">
+						<p>Waiting for approval from the previous step</p>
+						<div>
+							{#if is_owner}
+								<div class="flex flex-row gap-2 mt-2">
+									<div>
+										<Button
+											color="green"
+											variant="border"
+											on:click={async () =>
+												await JobService.resumeSuspendedFlowAsOwner({
+													workspace: $workspaceStore ?? '',
+													id: job?.id ?? '',
+													requestBody: JSON.parse(payload)
+												})}
+											>Resume <Tooltip
+												>Since you are an owner of this flow, you can send resume events without
+												necessarily knowing the resume id sent by the approval step</Tooltip
+											></Button
+										>
+									</div>
+									<div class="w-full border rounded-lg border-gray-600 p-2">
+										<SimpleEditor automaticLayout lang="json" bind:code={payload} autoHeight />
+									</div>
+									<Tooltip
+										>The payload is optional, it is passed to the following step through the
+										`resume` variable</Tooltip
+									>
+								</div>
+							{:else}
+								You cannot resume the job without the resume id since you are not an owner of {job.script_path}
+							{/if}
+						</div>
+					</div>
 				{:else if job.logs}
 					<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
 						<pre class="w-full">{job.logs}</pre>
@@ -183,6 +228,7 @@ let selected = 'graph';
 					</Button>
 					<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
 						<svelte:self
+							bind:suspend_status
 							bind:retry_status
 							bind:flowState
 							bind:flowModuleStates={localFlowModuleStates}
@@ -254,6 +300,7 @@ let selected = 'graph';
 						<li class="w-full border border-gray-600 p-6 space-y-2 bg-blue-50/50">
 							{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
 								<svelte:self
+									bind:suspend_status
 									bind:retry_status
 									bind:flowState
 									bind:flowModuleStates={localFlowModuleStates}
@@ -314,6 +361,11 @@ let selected = 'graph';
 								Retry in progress, # of failed attempts: {count}
 							</span>
 						{/each}
+						{#if suspend_status}
+							<span class="text-sm">
+								Flow suspended, waiting for {pluralize(suspend_status, 'approval')}
+							</span>
+						{/if}
 					</div>
 
 					<FlowGraph

package/components/FlowStatusViewer.svelte.d.ts

@@ -13,6 +13,8 @@ declare const __propDef: {
         job?: Job | undefined;
         flowModuleStates?: Record<string, GraphModuleState> | undefined;
         retry_status?: Record<string, number> | undefined;
+        suspend_status?: number | undefined;
+        is_owner?: boolean | undefined;
     };
     events: {
         jobsLoaded: CustomEvent<any>;

package/components/InputTransformForm.svelte

@@ -8,7 +8,6 @@ import { Button, ToggleButton, ToggleButtonGroup } from './common';
 import { faCode } from '@fortawesome/free-solid-svg-icons';
 import TemplateEditor from './TemplateEditor.svelte';
 import Tooltip from './Tooltip.svelte';
-import { escape } from 'svelte/internal';
 export let schema;
 export let arg;
 export let argName;
@@ -18,7 +17,8 @@ export let previousModuleId;
 export let pickForField = undefined;
 export let variableEditor = undefined;
 export let itemPicker = undefined;
-export let monaco = undefined;
+let monaco = undefined;
+let monacoTemplate = undefined;
 let argInput = undefined;
 let inputCat = 'object';
 let propertyType = getPropertyType(arg);
@@ -58,6 +58,7 @@ function connectProperty(rawValue) {
     if (isStaticTemplate(inputCat)) {
         arg.value = `\$\{${rawValue}}`;
         setPropertyType(arg.value);
+        monacoTemplate?.setCode(arg.value);
     }
     else {
         arg.expr = getDefaultExpr(undefined, previousModuleId, rawValue);
@@ -71,6 +72,7 @@ function onFocus() {
         focusProp(argName, 'append', (path) => {
             const toAppend = `\$\{${path}}`;
             arg.value = `${arg.value ?? ''}${toAppend}`;
+            monacoTemplate?.setCode(arg.value);
             setPropertyType(arg.value);
             argInput?.focus();
             return false;
@@ -203,8 +205,13 @@ const closeBracket = '}';
 			</span>
 		{/if}
 		{#if isStaticTemplate(inputCat) && propertyType == 'static'}
-			<div class="py-1">
-				<TemplateEditor {extraLib} on:focus={onFocus} bind:code={arg.value} />
+			<div class="py-1 rounded border border-1 border-gray-500">
+				<TemplateEditor
+					bind:this={monacoTemplate}
+					{extraLib}
+					on:focus={onFocus}
+					bind:code={arg.value}
+				/>
 			</div>
 		{:else if propertyType === undefined || propertyType == 'static'}
 			<ArgInput

package/components/InputTransformForm.svelte.d.ts

@@ -1,6 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
-import SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
 import type ItemPicker from './ItemPicker.svelte';
 import type { InputTransform } from '../gen';
@@ -15,7 +14,6 @@ declare const __propDef: {
         pickForField?: string | undefined;
         variableEditor?: VariableEditor | undefined;
         itemPicker?: ItemPicker | undefined;
-        monaco?: SimpleEditor | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/ModulePreview.svelte

@@ -1,4 +1,5 @@
-<script>import { getScriptByPath, sendUserToast, truncateRev } from '../utils';
+<script>import { ScriptService } from '../gen';
+import { getScriptByPath, sendUserToast, truncateRev } from '../utils';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import RunForm from './RunForm.svelte';
 import TestJobLoader from './TestJobLoader.svelte';
@@ -9,6 +10,7 @@ import { faRotateRight } 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;
@@ -25,7 +27,9 @@ export async function runTest(args) {
         await testJobLoader?.runPreview(val.path, val.content, val.language, args);
     }
     else if (val.type == 'script') {
-        const script = await getScriptByPath(val.path);
+        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);
     }
     else {

package/components/ModulePreview.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
-import type { FlowModule } from '../gen';
+import { type FlowModule } from '../gen';
 declare const __propDef: {
     props: {
         mod: FlowModule;

package/components/RunForm.svelte

@@ -120,7 +120,7 @@ let invisible_to_owner;
 		</div>
 	{/if}
 	{#if schedulable}
-		<div class="flex justify-between mt-2 md:mt-6 mb-6">
+		<div class="flex gap-2 items-center flex-wrap justify-between mt-2 md:mt-6 mb-6">
 			<Button
 				color="light"
 				size="sm"
@@ -142,13 +142,15 @@ let invisible_to_owner;
 					>
 				</div>
 			{/if}
-			<Button
-				btnClasses="!px-6 !py-1"
-				disabled={!isValid}
-				on:click={() => runAction(scheduledForStr, args, invisible_to_owner)}
-			>
-				{scheduledForStr ? 'Schedule run to a later time' : buttonText}
-			</Button>
+			<div class="flex-row-reverse flex grow">
+				<Button
+					btnClasses="!px-6 !py-1"
+					disabled={!isValid}
+					on:click={() => runAction(scheduledForStr, args, invisible_to_owner)}
+				>
+					{scheduledForStr ? 'Schedule run to a later time' : buttonText}
+				</Button>
+			</div>
 		</div>
 	{:else if !topButton}
 		<Button

package/components/ScheduleEditor.svelte

@@ -6,7 +6,7 @@
 	}
 </script>
 
-<script>import { sendUserToast, formatCron, canWrite } from '../utils';
+<script>import { sendUserToast, formatCron, canWrite, emptyString } from '../utils';
 import { ScriptService, Script, ScheduleService, FlowService } from '../gen';
 import Toggle from './Toggle.svelte';
 import Path from './Path.svelte';
@@ -151,7 +151,7 @@ let drawer;
 			{/if}
 			<Button
 				startIcon={{ icon: faSave }}
-				disabled={!allowSchedule || pathError != ''}
+				disabled={!allowSchedule || pathError != '' || emptyString(script_path)}
 				on:click={scheduleScript}
 			>
 				{edit ? 'Save' : 'Schedule'}

package/components/TemplateEditor.svelte

@@ -346,6 +346,17 @@ if (browser) {
         };
     }
 }
+export function insertAtCursor(code) {
+    if (editor) {
+        editor.trigger('keyboard', 'type', { text: code });
+    }
+}
+export function setCode(ncode) {
+    code = ncode;
+    if (editor) {
+        editor.setValue(ncode);
+    }
+}
 export function getCode() {
     return editor?.getValue() ?? '';
 }
@@ -359,7 +370,8 @@ async function loadMonaco() {
         ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
         lineNumbers: 'off',
         fontSize: 16,
-        suggestOnTriggerCharacters: true
+        suggestOnTriggerCharacters: true,
+        lineDecorationsWidth: 20
     });
     const stdLib = { content: libStdContent, filePath: 'es5.d.ts' };
     if (extraLib != '') {

package/components/TestJobLoader.svelte

@@ -120,7 +120,7 @@ async function loadTestJob(id) {
         if (err.status === 404) {
             notfound = true;
         }
-        console.error(err);
+        console.warn(err);
     }
     return isCompleted;
 }

package/components/apps/components/DisplayComponent.svelte

@@ -2,8 +2,8 @@
 import RunnableWrapper from './helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
-export const staticOutputs = [];
 let result = undefined;
+export const staticOutputs = ['result', 'loading'];
 </script>
 
 <RunnableWrapper bind:result bind:componentInput {id}>

package/components/apps/components/buttons/AppButton.svelte

@@ -1,4 +1,5 @@
 <script>import { Button } from '../../../common';
+import { faArrowRight, faRefresh } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
@@ -11,11 +12,23 @@ export let extraQueryParams = {};
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export const staticOutputs = ['loading', 'result'];
-const { runnableComponents } = getContext('AppEditorContext');
+const { runnableComponents, worldStore } = getContext('AppEditorContext');
 let labelValue = 'Default label';
 let color;
 let size;
 let runnableComponent;
+let isLoading = false;
+let ownClick = false;
+$: outputs = $worldStore?.outputsById[id];
+$: outputs?.loading.subscribe({
+    next: (value) => {
+        isLoading = value;
+        if (ownClick && !value) {
+            ownClick = false;
+        }
+    }
+});
+$: loading = isLoading && ownClick;
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
@@ -32,6 +45,7 @@ let runnableComponent;
 	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
 		<Button
 			on:click={() => {
+				ownClick = true
 				runnableComponent?.runComponent()
 
 				if (recomputeIds) {
@@ -42,6 +56,10 @@ let runnableComponent;
 			}}
 			{size}
 			{color}
+			endIcon={{
+				icon: loading ? faRefresh : faArrowRight,
+				classes: loading ? 'animate-spin w-4' : 'w-4'
+			}}
 		>
 			{labelValue}
 		</Button>

package/components/apps/components/form/AppForm.svelte

@@ -1,4 +1,5 @@
 <script>import { Button } from '../../../common';
+import { faArrowRight, faRefresh } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
@@ -10,11 +11,23 @@ export let recomputeIds = undefined;
 export let extraQueryParams = {};
 export let horizontalAlignment = undefined;
 export const staticOutputs = ['loading', 'result'];
-const { runnableComponents } = getContext('AppEditorContext');
+const { runnableComponents, worldStore } = getContext('AppEditorContext');
 let labelValue = 'Default label';
 let color;
 let size;
 let runnableComponent;
+let isLoading = false;
+let ownClick = false;
+$: outputs = $worldStore?.outputsById[id];
+$: outputs?.loading.subscribe({
+    next: (value) => {
+        isLoading = value;
+        if (ownClick && !value) {
+            ownClick = false;
+        }
+    }
+});
+$: loading = isLoading && ownClick;
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
@@ -42,6 +55,10 @@ let runnableComponent;
 			}}
 			{size}
 			{color}
+			endIcon={{
+				icon: loading ? faRefresh : faArrowRight,
+				classes: loading ? 'animate-spin w-4' : 'w-4'
+			}}
 		>
 			{labelValue}
 		</Button>

package/components/apps/components/helpers/InputValue.svelte

@@ -20,9 +20,6 @@ function handleConnection() {
     }
 }
 function computeGlobalContext() {
-    Object.prototype.toString = function () {
-        return JSON.stringify(this);
-    };
     return Object.fromEntries(Object.entries($worldStore?.outputsById ?? {})
         .filter(([k, _]) => k != id)
         .map(([key, value]) => {
@@ -33,7 +30,6 @@ function computeGlobalContext() {
     }));
 }
 function setValue() {
-    console.log(computeGlobalContext());
     if (input.type === 'template' && isCodeInjection(input.eval)) {
         try {
             value = eval_like('`' + input.eval + '`', computeGlobalContext());

package/components/apps/components/helpers/MissingConnectionWarning.svelte

@@ -0,0 +1,11 @@
+<script>export let input;
+</script>
+
+{#if input.type === 'connected'}
+	<div class="flex gap-2 flex-col">
+		<div>This component is expecting a connected input: </div>
+		<div>
+			<code class="bg-gray-50 border text-gray-600">{input.connection?.path} </code>
+		</div>
+	</div>
+{/if}

package/components/apps/components/helpers/MissingConnectionWarning.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        input: AppInput;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MissingConnectionWarningProps = typeof __propDef.props;
+export type MissingConnectionWarningEvents = typeof __propDef.events;
+export type MissingConnectionWarningSlots = typeof __propDef.slots;
+export default class MissingConnectionWarning extends SvelteComponentTyped<MissingConnectionWarningProps, MissingConnectionWarningEvents, MissingConnectionWarningSlots> {
+}
+export {};