windmill-components 1.503.3 → 1.503.4

package/package/components/AppWrapper.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">import AppEditor from './apps/editor/AppEditor.svelte';
 let { app: oldApp, ...props } = $props();
 let app = $state(oldApp);
+$effect(() => {
+    app = oldApp;
+});
 </script>
 
 <AppEditor {app} {...props} />

package/package/components/Dev.svelte

@@ -28,6 +28,8 @@ import Tooltip from './Tooltip.svelte';
 import { workspaceAIClients } from './copilot/lib';
 import { Triggers } from './triggers/triggers.svelte';
 import { TestSteps } from './flows/testSteps.svelte';
+import { ModulesTestStates } from './modulesTest.svelte';
+import { updateDerivedModuleStatesFromTestJobs } from './flows/utils';
 let flowCopilotContext = {
     shouldUpdatePropertyType: writable({}),
     exprsToSet: writable({}),
@@ -74,6 +76,11 @@ let testIsLoading = $state(false);
 let testJob = $state();
 let pastPreviews = $state([]);
 let validCode = $state(true);
+// Flow preview
+let flowPreviewButtons = $state();
+const job = $derived(flowPreviewButtons?.getJob());
+let showJobStatus = $state(false);
+let testModuleId = $state(undefined);
 let currentScript = $state(undefined);
 let schema = $state(emptySchema());
 const href = window.location.href;
@@ -363,6 +370,13 @@ const history = initHistory(flowStore.val);
 const testSteps = new TestSteps();
 const selectedIdStore = writable('settings-metadata');
 const triggersCount = writable(undefined);
+const modulesTestStates = new ModulesTestStates((moduleId) => {
+    // Update the derived store with test job states
+    delete $derivedModuleStates[moduleId];
+    testModuleId = moduleId;
+    showJobStatus = false;
+});
+const outputPickerOpenFns = $state({});
 setContext('TriggerContext', {
     triggersCount: triggersCount,
     simplifiedPoll: writable(false),
@@ -391,7 +405,9 @@ setContext('FlowEditorContext', {
         editPanelSize: undefined,
         payloadData: undefined
     }),
-    currentEditor: writable(undefined)
+    currentEditor: writable(undefined),
+    modulesTestStates,
+    outputPickerOpenFns
 });
 setContext('PropPickerContext', {
     flowPropPickerConfig: writable(undefined),
@@ -407,7 +423,6 @@ function updateFlow(flow) {
         window?.parent.postMessage({ type: 'flow', flow, uriPath: lastUriPath }, '*');
     }
 }
-let flowPreviewButtons = $state();
 let reload = $state(0);
 async function inferModuleArgs(selectedIdStore) {
     if (selectedIdStore == '') {
@@ -471,6 +486,53 @@ $effect(() => {
 $effect(() => {
     $selectedIdStore && untrack(() => inferModuleArgs($selectedIdStore));
 });
+const localModuleStates = $derived(flowPreviewButtons?.getLocalModuleStates() ?? writable({}));
+const localDurationStatuses = $derived(flowPreviewButtons?.getLocalDurationStatuses() ?? writable({}));
+const suspendStatus = $derived(flowPreviewButtons?.getSuspendStatus() ?? writable({}));
+// Create a derived store that only shows the module states when showModuleStatus is true
+// this store can also be updated
+let derivedModuleStates = writable({});
+$effect(() => {
+    derivedModuleStates.update((currentStates) => {
+        return showJobStatus ? $localModuleStates : currentStates;
+    });
+});
+$effect(() => {
+    updateDerivedModuleStatesFromTestJobs(testModuleId, modulesTestStates, derivedModuleStates);
+});
+let flowModuleSchemaMap = $state();
+function onJobDone() {
+    if (!job) {
+        return;
+    }
+    // job was running and is now stopped
+    if (!flowPreviewButtons?.getPreviewOpen()) {
+        if (job.type === 'CompletedJob' &&
+            job.success &&
+            flowPreviewButtons?.getPreviewMode() === 'whole') {
+            if (flowModuleSchemaMap?.isNodeVisible('result') && $selectedIdStore !== 'Result') {
+                outputPickerOpenFns['Result']?.();
+            }
+        }
+        else {
+            // Find last module with a job in flow_status
+            const lastModuleWithJob = job.flow_status?.modules
+                ?.slice()
+                .reverse()
+                .find((module) => 'job' in module);
+            if (lastModuleWithJob &&
+                lastModuleWithJob.id &&
+                flowModuleSchemaMap?.isNodeVisible(lastModuleWithJob.id)) {
+                outputPickerOpenFns[lastModuleWithJob.id]?.();
+            }
+        }
+    }
+}
+function resetModulesStates() {
+    derivedModuleStates.set({});
+    showJobStatus = false;
+}
+const individualStepTests = $derived(!(showJobStatus && job) && Object.keys($derivedModuleStates).length > 0);
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
@@ -608,18 +670,40 @@ $effect(() => {
 					{/if}
 				</div>
 
-				<div class="flex justify-center pt-1 z-50 absolute right-2 top-2 gap-2">
-					<FlowPreviewButtons bind:this={flowPreviewButtons} />
+				<div class="flex justify-center pt-1 z-50 absolute -translate-x-[100%] right-2 top-2 gap-2">
+					<FlowPreviewButtons
+						bind:this={flowPreviewButtons}
+						{onJobDone}
+						onRunPreview={() => {
+							localModuleStates.set({})
+							showJobStatus = true
+						}}
+					/>
 				</div>
 				<Splitpanes horizontal class="h-full max-h-screen grow">
 					<Pane size={67}>
 						{#if flowStore.val?.value?.modules}
 							<div id="flow-editor"></div>
 							<FlowModuleSchemaMap
+								bind:this={flowModuleSchemaMap}
 								disableAi
 								disableTutorials
 								smallErrorHandler={true}
 								disableStaticInputs
+								localModuleStates={derivedModuleStates}
+								onTestUpTo={flowPreviewButtons?.testUpTo}
+								isOwner={flowPreviewButtons?.getIsOwner()}
+								onTestFlow={flowPreviewButtons?.runPreview}
+								isRunning={flowPreviewButtons?.getIsRunning()}
+								onCancelTestFlow={flowPreviewButtons?.cancelTest}
+								onOpenPreview={flowPreviewButtons?.openPreview}
+								onHideJobStatus={resetModulesStates}
+								{individualStepTests}
+								flowJob={job}
+								{showJobStatus}
+								onDelete={(id) => {
+									delete $derivedModuleStates[id]
+								}}
 							/>
 						{:else}
 							<div class="text-red-400 mt-20">Missing flow modules</div>
@@ -639,6 +723,12 @@ $effect(() => {
 										flowPreviewButtons?.openPreview()
 									}
 								}}
+								onTestFlow={flowPreviewButtons?.runPreview}
+								{job}
+								isOwner={flowPreviewButtons?.getIsOwner()}
+								{localDurationStatuses}
+								{suspendStatus}
+								onOpenDetails={flowPreviewButtons?.openPreview}
 							/>
 						{/key}
 					</Pane>

package/package/components/FlowBuilder.svelte

@@ -15,7 +15,7 @@ import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte';
 import { dfs as dfsApply } from './flows/dfs';
 import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
 import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
-import { cleanInputs } from './flows/utils';
+import { cleanInputs, updateDerivedModuleStatesFromTestJobs } from './flows/utils';
 import { Calendar, Pen, Save, DiffIcon, HistoryIcon, FileJson, Settings } from 'lucide-svelte';
 import Awareness from './Awareness.svelte';
 import { getAllModules } from './flows/flowExplorer';
@@ -36,6 +36,7 @@ import { Triggers } from './triggers/triggers.svelte';
 import { TestSteps } from './flows/testSteps.svelte';
 import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
 import { setStepHistoryLoaderContext, StepHistoryLoader } from './stepHistoryLoader.svelte';
+import { ModulesTestStates } from './modulesTest.svelte';
 let { initialPath = $bindable(''), pathStoreInit = undefined, newFlow, selectedId, initialArgs = {}, loading = false, flowStore, flowStateStore, savedFlow = $bindable(undefined), diffDrawer = undefined, customUi = {}, disableAi = false, disabledFlowInputs = false, savedPrimarySchedule = undefined, version = undefined, setSavedraftCb = undefined, draftTriggersFromUrl = undefined, selectedTriggerIndexFromUrl = undefined, children, loadedFromHistoryFromUrl, noInitial = false, onSaveInitial, onSaveDraft, onDeploy, onDeployError, onDetails, onSaveDraftError, onSaveDraftOnlyAtNewPath, onHistoryRestore } = $props();
 let initialPathStore = writable(initialPath);
 // used for new flows for captures
@@ -56,6 +57,11 @@ let confirmDeploymentCallback = () => { };
 // AI changes warning modal
 let aiChangesWarningOpen = $state(false);
 let aiChangesConfirmCallback = $state(() => { });
+// Flow preview
+let flowPreviewButtons = $state();
+const flowPreviewContent = $derived(flowPreviewButtons?.getFlowPreviewContent());
+const job = $derived(flowPreviewContent?.getJob());
+let showJobStatus = $state(false);
 async function handleDraftTriggersConfirmed(event) {
     const { selectedTriggers } = event.detail;
     // Continue with saving the flow
@@ -438,6 +444,15 @@ function select(selectedId) {
     selectedIdStore.set(selectedId);
 }
 let insertButtonOpen = writable(false);
+let testModuleId = $state(undefined);
+let modulesTestStates = new ModulesTestStates((moduleId) => {
+    // Update the derived store with test job states
+    delete $derivedModuleStates[moduleId];
+    testModuleId = moduleId;
+    showJobStatus = false;
+});
+let outputPickerOpenFns = $state({});
+let flowEditor = $state(undefined);
 setContext('FlowEditorContext', {
     selectedId: selectedIdStore,
     currentEditor: writable(undefined),
@@ -456,7 +471,9 @@ setContext('FlowEditorContext', {
     customUi,
     insertButtonOpen,
     executionCount: writable(0),
-    flowInputEditorState: flowInputEditorStateStore
+    flowInputEditorState: flowInputEditorStateStore,
+    modulesTestStates,
+    outputPickerOpenFns
 });
 // Add triggers context store
 const triggersState = $state(new Triggers([
@@ -630,7 +647,6 @@ function handleDeployTrigger(trigger) {
             newSavedDraftTrigers.length > 0 ? newSavedDraftTrigers : undefined;
     }
 }
-let flowPreviewButtons = $state();
 let forceTestTab = $state({});
 let highlightArg = $state({});
 $effect.pre(() => {
@@ -670,6 +686,53 @@ export function setLoadedFromHistory(loadedFromHistoryUrl) {
     stepHistoryLoader.setFlowJobInitial(loadedFromHistoryUrl.flowJobInitial);
     stepHistoryLoader.stepStates = loadedFromHistoryUrl.stepsState;
 }
+function onJobDone() {
+    if (!job) {
+        return;
+    }
+    // job was running and is now stopped
+    if (!flowPreviewButtons?.getPreviewOpen()) {
+        if (job.type === 'CompletedJob' &&
+            job.success &&
+            flowPreviewButtons?.getPreviewMode() === 'whole') {
+            if (flowEditor?.isNodeVisible('result') && $selectedIdStore !== 'Result') {
+                outputPickerOpenFns['Result']?.();
+            }
+        }
+        else {
+            // Find last module with a job in flow_status
+            const lastModuleWithJob = job.flow_status?.modules
+                ?.slice()
+                .reverse()
+                .find((module) => 'job' in module);
+            if (lastModuleWithJob &&
+                lastModuleWithJob.id &&
+                flowEditor?.isNodeVisible(lastModuleWithJob.id)) {
+                outputPickerOpenFns[lastModuleWithJob.id]?.();
+            }
+        }
+    }
+}
+const localModuleStates = $derived(flowPreviewContent?.getLocalModuleStates() ?? writable({}));
+const localDurationStatuses = $derived(flowPreviewContent?.getLocalDurationStatuses() ?? writable({}));
+const suspendStatus = $derived(flowPreviewContent?.getSuspendStatus() ?? writable({}));
+// Create a derived store that only shows the module states when showModuleStatus is true
+// this store can also be updated
+let derivedModuleStates = writable({});
+$effect(() => {
+    derivedModuleStates.update((currentStates) => {
+        return showJobStatus ? $localModuleStates : currentStates;
+    });
+});
+$effect(() => {
+    updateDerivedModuleStatesFromTestJobs(testModuleId, modulesTestStates, derivedModuleStates);
+});
+function resetModulesStates() {
+    derivedModuleStates.set({});
+    showJobStatus = false;
+}
+const individualStepTests = $derived(!(showJobStatus && job) && Object.keys($derivedModuleStates).length > 0);
+const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
@@ -862,8 +925,13 @@ export function setLoadedFromHistory(loadedFromHistoryUrl) {
 							captureOn.set(true)
 							showCaptureHint.set(true)
 						}}
+						{onJobDone}
 						bind:this={flowPreviewButtons}
 						{loading}
+						onRunPreview={() => {
+							localModuleStates.set({})
+							showJobStatus = true
+						}}
 					/>
 					<Button
 						loading={loadingDraft}
@@ -890,6 +958,7 @@ export function setLoadedFromHistory(loadedFromHistoryUrl) {
 			<!-- metadata -->
 			{#if $flowStateStore}
 				<FlowEditor
+					bind:this={flowEditor}
 					{disabledFlowInputs}
 					disableAi={disableAi || customUi?.stepInputs?.ai == false}
 					disableSettings={customUi?.settingsPanel === false}
@@ -908,8 +977,8 @@ export function setLoadedFromHistory(loadedFromHistoryUrl) {
 						previewArgsStore.val = JSON.parse(JSON.stringify(e.detail))
 						flowPreviewButtons?.openPreview(true)
 					}}
-					onTestUpTo={() => {
-						flowPreviewButtons?.testUpTo()
+					onTestUpTo={(id) => {
+						flowPreviewButtons?.testUpTo(id)
 					}}
 					{savedFlow}
 					onDeployTrigger={handleDeployTrigger}
@@ -929,9 +998,22 @@ export function setLoadedFromHistory(loadedFromHistoryUrl) {
 					aiChatOpen={aiChatManager.open}
 					showFlowAiButton={!disableAi && customUi?.topBar?.aiBuilder != false}
 					toggleAiChat={() => aiChatManager.toggleOpen()}
-					onRunPreview={() => {
-						flowPreviewButtons?.openPreview(true)
+					onOpenPreview={flowPreviewButtons?.openPreview}
+					localModuleStates={derivedModuleStates}
+					isOwner={flowPreviewContent?.getIsOwner()}
+					onTestFlow={flowPreviewButtons?.runPreview}
+					isRunning={flowPreviewContent?.getIsRunning()}
+					onCancelTestFlow={flowPreviewContent?.cancelTest}
+					onHideJobStatus={resetModulesStates}
+					{individualStepTests}
+					{job}
+					{localDurationStatuses}
+					{suspendStatus}
+					{showJobStatus}
+					onDelete={(id) => {
+						delete $derivedModuleStates[id]
 					}}
+					{flowHasChanged}
 				/>
 			{:else}
 				<CenteredPage>Loading...</CenteredPage>