windmill-components 1.511.1 → 1.531.0

package/package/components/apps/components/layout/AppDecisionTree.svelte

@@ -10,6 +10,7 @@ import { initOutput } from '../../editor/appUtils';
 import Badge from '../../../common/badge/Badge.svelte';
 import { getFirstNode, isDebugging } from '../../editor/settingsPanel/decisionTree/utils';
 import InputValue from '../helpers/InputValue.svelte';
+import { sendUserToast } from '../../../../toast';
 let { id, componentContainerHeight, customCss = undefined, render, nodes } = $props();
 let resolvedConditions = $state(createResolvedConditions());
 function createResolvedConditions() {
@@ -25,10 +26,12 @@ function createResolvedNext() {
         return acc;
     }, {});
 }
+let counter = $state(0);
 $effect(() => {
     nodes;
     resolvedConditions = untrack(() => createResolvedConditions());
     resolvedNext = untrack(() => createResolvedNext());
+    untrack(() => (counter += 1));
 });
 let everRender = $state(render);
 $effect.pre(() => {
@@ -39,7 +42,7 @@ let css = $state(initCss($app.css?.conditionalwrapper, customCss));
 let selectedConditionIndex = 0;
 let currentNodeId = $state(getFirstNode(nodes)?.id ?? '');
 let outputs = initOutput($worldStore, id, {
-    currentNodeId,
+    currentNodeId: untrack(() => currentNodeId),
     currentNodeIndex: selectedConditionIndex
 });
 $effect.pre(() => {
@@ -75,6 +78,7 @@ function next() {
             return;
         }
     }
+    sendUserToast('No next node was an available option', true);
 }
 function updateFocusedGrid(nodeId) {
     currentNodeId = nodeId;
@@ -133,30 +137,37 @@ $effect.pre(() => {
 
 <!-- {JSON.stringify(resolvedConditions)}
 {JSON.stringify(resolvedNext)} -->
-{#if Object.keys(resolvedConditions).length === nodes.length}
-	{#each nodes ?? [] as node (node.id)}
-		{#each node.next ?? [] as next, conditionIndex}
-			{#if next.condition}
+
+{#key counter}
+	{#if Object.keys(resolvedConditions).length === nodes.length}
+		{#each nodes ?? [] as node (node.id)}
+			{#each node.next ?? [] as next, conditionIndex}
+				{#if next.condition}
+					<InputValue
+						key={`condition-${node.id}-${conditionIndex}`}
+						{id}
+						input={next.condition}
+						bind:value={resolvedConditions[node.id][conditionIndex]}
+						field={`condition-${node.id}-${conditionIndex}`}
+					/>
+				{/if}
+			{/each}
+		{/each}
+	{/if}
+
+	{#if Object.keys(resolvedConditions).length === nodes.length}
+		{#each nodes ?? [] as node (node.id)}
+			{#if node.allowed}
 				<InputValue
-					key={`condition-${node.id}-${conditionIndex}`}
+					key="allowed-{node.id}"
 					{id}
-					input={next.condition}
-					bind:value={resolvedConditions[node.id][conditionIndex]}
-					field={`condition-${node.id}-${conditionIndex}`}
+					input={node.allowed}
+					bind:value={resolvedNext[node.id]}
 				/>
 			{/if}
 		{/each}
-	{/each}
-{/if}
-
-{#if Object.keys(resolvedConditions).length === nodes.length}
-	{#each nodes ?? [] as node (node.id)}
-		{#if node.allowed}
-			<InputValue key="allowed" {id} input={node.allowed} bind:value={resolvedNext[node.id]} />
-		{/if}
-	{/each}
-{/if}
-
+	{/if}
+{/key}
 {#each Object.keys(css ?? {}) as key (key)}
 	<ResolveStyle
 		{id}
@@ -181,7 +192,7 @@ $effect.pre(() => {
 						style={css?.container?.style}
 						subGridId={`${id}-${i}`}
 						containerHeight={componentContainerHeight - 40}
-						on:focus={() => {
+						onFocus={() => {
 							if (!$connectingInput.opened) {
 								$selectedComponent = [id]
 							}

package/package/components/apps/components/layout/AppDrawer.svelte

@@ -138,7 +138,7 @@ let css = $state(initCss($app.css?.drawercomponent, customCss));
 								{id}
 								{containerHeight}
 								subGridId={`${id}-0`}
-								on:focus={() => {
+								onFocus={() => {
 									if (!$connectingInput.opened) {
 										$selectedComponent = [id]
 										$focusedGrid = {

package/package/components/apps/components/layout/AppList.svelte

@@ -94,8 +94,12 @@ let pagination = $derived(getPagination(resolvedConfig.pagination?.configuration
 
 <InitializeComponent {id} />
 
+{#snippet nonRenderedPlaceholder()}
+	<ListWrapper disabled value={undefined} index={0}>
+		<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+	</ListWrapper>
+{/snippet}
 <RunnableWrapper
-	hasChildrens
 	{render}
 	{outputs}
 	autoRefresh
@@ -104,6 +108,7 @@ let pagination = $derived(getPagination(resolvedConfig.pagination?.configuration
 	bind:initializing
 	bind:result
 	bind:loading
+	{nonRenderedPlaceholder}
 >
 	{#if everRender}
 		<div
@@ -170,7 +175,7 @@ let pagination = $derived(getPagination(resolvedConfig.pagination?.configuration
 									{id}
 									subGridId={`${id}-0`}
 									containerHeight={resolvedConfig.heightPx}
-									on:focus={() => {
+									onFocus={() => {
 										if (!$connectingInput.opened) {
 											$selectedComponent = [id]
 										}
@@ -181,9 +186,7 @@ let pagination = $derived(getPagination(resolvedConfig.pagination?.configuration
 						</div>
 					{/each}
 				{:else}
-					<ListWrapper disabled value={undefined} index={0}>
-						<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
-					</ListWrapper>
+					{@render nonRenderedPlaceholder?.()}
 					{#if !Array.isArray(result)}
 						<div class="text-center text-tertiary">Input data is not an array</div>
 					{/if}
@@ -239,8 +242,6 @@ let pagination = $derived(getPagination(resolvedConfig.pagination?.configuration
 			{/if}
 		</div>
 	{:else if $app.subgrids}
-		<ListWrapper disabled value={undefined} index={0}>
-			<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
-		</ListWrapper>
+		{@render nonRenderedPlaceholder?.()}
 	{/if}
 </RunnableWrapper>

package/package/components/apps/components/layout/AppModal.svelte

@@ -191,7 +191,7 @@ async function getMenuElements() {
 									{id}
 									{containerHeight}
 									subGridId={`${id}-0`}
-									on:focus={() => {
+									onFocus={() => {
 										if (!$connectingInput.opened) {
 											$selectedComponent = [id]
 											$focusedGrid = {

package/package/components/apps/components/layout/AppSplitpanes.svelte

@@ -11,7 +11,9 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, componentContainerHeight, customCss = undefined, horizontal = false, panes, render } = $props();
 const { app, focusedGrid, selectedComponent, componentControl, worldStore, connectingInput } = getContext('AppViewerContext');
 //used so that we can count number of outputs setup for first refresh
-initOutput($worldStore, id, {});
+initOutput($worldStore, id, {
+    selectedPaneIndex: 0
+});
 let everRender = $state(render);
 $effect.pre(() => {
     render && !everRender && (everRender = true);
@@ -97,13 +99,14 @@ $effect.pre(() => {
 									style={css?.container?.style}
 									subGridId={`${id}-${index}`}
 									containerHeight={horizontal ? undefined : componentContainerHeight - 8}
-									on:focus={() => {
+									onFocus={() => {
 										if (!$connectingInput.opened) {
 											$selectedComponent = [id]
 											$focusedGrid = {
 												parentComponentId: id,
 												subGridIndex: index
 											}
+											$worldStore.outputsById[id].selectedPaneIndex.set(index)
 										}
 									}}
 								/>

package/package/components/apps/components/layout/AppStepper.svelte

@@ -20,7 +20,7 @@ let selected = $state(tabs[0]);
 let tabHeight = $state(0);
 let footerHeight = $state(0);
 let runnableComponent = $state();
-let selectedIndex = $state(tabs?.indexOf(selected) ?? -1);
+let selectedIndex = $state(tabs?.indexOf(untrack(() => selected)) ?? -1);
 let maxReachedIndex = $state(-1);
 let statusByStep = $state([]);
 let debugMode = false;
@@ -115,8 +115,13 @@ let directionClicked = $state(undefined);
 {/each}
 
 <InitializeComponent {id} />
+
+{#snippet nonRenderedPlaceholder()}
+	{#each tabs ?? [] as _res, i}
+		<SubGridEditor {id} visible={false} subGridId={`${id}-${i}`} />
+	{/each}
+{/snippet}
 <RunnableWrapper
-	hasChildrens
 	{recomputeIds}
 	{render}
 	bind:runnableComponent
@@ -129,6 +134,7 @@ let directionClicked = $state(undefined);
 	{outputs}
 	bind:result
 	errorHandledByComponent={true}
+	{nonRenderedPlaceholder}
 >
 	{#if everRender}
 		<div class="w-full overflow-auto">
@@ -160,7 +166,7 @@ let directionClicked = $state(undefined);
 							class={twMerge(css?.container?.class, 'wm-stepper')}
 							style={css?.container?.style}
 							containerHeight={componentContainerHeight - tabHeight - footerHeight}
-							on:focus={() => {
+							onFocus={() => {
 								if (!$connectingInput.opened) {
 									$selectedComponent = [id]
 									handleTabSelection()
@@ -231,8 +237,6 @@ let directionClicked = $state(undefined);
 			{/if}
 		</div>
 	{:else if $app.subgrids}
-		{#each tabs ?? [] as _res, i}
-			<SubGridEditor {id} visible={false} subGridId={`${id}-${i}`} />
-		{/each}
+		{@render nonRenderedPlaceholder?.()}
 	{/if}
 </RunnableWrapper>

package/package/components/apps/components/layout/AppTabs.svelte

@@ -19,7 +19,7 @@ $effect.pre(() => {
 });
 const { app, worldStore, focusedGrid, selectedComponent, mode, componentControl, connectingInput, runnableComponents } = getContext('AppViewerContext');
 let selected = $state(tabs[0]);
-let selectedIndex = $state(tabs?.indexOf(selected) ?? -1);
+let selectedIndex = $state(tabs?.indexOf(untrack(() => selected)) ?? -1);
 let css = $state(initCss($app.css?.tabscomponent, customCss));
 let tabHeight = $state(0);
 let outputs = initOutput($worldStore, id, {
@@ -209,7 +209,7 @@ let resolvedDisabledTabs = $state([]);
 								class={twMerge(css?.container?.class, 'wm-tabs-container')}
 								style={css?.container?.style}
 								containerHeight={componentContainerHeight - (titleBarHeight * tabs.length + 40)}
-								on:focus={() => {
+								onFocus={() => {
 									if (!$connectingInput.opened) {
 										$selectedComponent = [id]
 										handleTabSelection()
@@ -233,7 +233,7 @@ let resolvedDisabledTabs = $state([]);
 							containerHeight={resolvedConfig.tabsKind !== 'sidebar' && $mode !== 'preview'
 								? componentContainerHeight - tabHeight
 								: componentContainerHeight}
-							on:focus={() => {
+							onFocus={() => {
 								if (!$connectingInput.opened) {
 									$selectedComponent = [id]
 									handleTabSelection()

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -4,7 +4,7 @@ import { Alert, Drawer, DrawerContent, UndoRedo } from '../../common';
 import Button from '../../common/button/Button.svelte';
 import Path from '../../Path.svelte';
 import Toggle from '../../Toggle.svelte';
-import { AppService, DraftService } from '../../../gen';
+import { AppService, DraftService, SettingService } from '../../../gen';
 import { redo, undo } from '../../../history.svelte';
 import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
 import { AlignHorizontalSpaceAround, BellOff, Bug, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, Save, Smartphone, FileClock, Sun, Moon, SunMoon, Zap, Globe, AlertTriangle } from 'lucide-svelte';
@@ -739,6 +739,16 @@ setTheme($app?.darkMode);
 let customPath = $state(savedApp?.custom_path);
 let dirtyCustomPath = $state(false);
 let customPathError = $state('');
+let globalWorkspacedRoute = $state(false);
+async function loadGlobalWorkspacedRouteSetting() {
+    try {
+        const setting = await SettingService.getGlobal({ key: 'app_workspaced_route' });
+        globalWorkspacedRoute = setting ?? false;
+    }
+    catch (error) {
+        globalWorkspacedRoute = false;
+    }
+}
 async function appExists(customPath) {
     return await AppService.customPathExists({
         workspace: $workspaceStore,
@@ -779,12 +789,13 @@ $effect(() => {
     saveDrawerOpen && untrack(() => compareVersions());
 });
 let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
-let fullCustomUrl = $derived(`${window.location.origin}${base}/a/${isCloudHosted() ? $workspaceStore + '/' : ''}${customPath}`);
+let fullCustomUrl = $derived(`${window.location.origin}${base}/a/${isCloudHosted() || globalWorkspacedRoute ? $workspaceStore + '/' : ''}${customPath}`);
 $effect(() => {
     ;
     [customPath];
     untrack(() => customPath !== undefined && validateCustomPath(customPath));
 });
+loadGlobalWorkspacedRouteSetting();
 </script>
 
 <svelte:window onkeydown={onKeyDown} />

package/package/components/apps/editor/AppJobsDrawer.svelte

@@ -233,8 +233,8 @@ $effect(() => {
 												{#if job?.id}
 													<FlowStatusViewer
 														jobId={job?.id}
-														on:jobsLoaded={({ detail }) => {
-															job = detail
+														onJobsLoaded={({ job: newJob }) => {
+															job = newJob
 														}}
 													/>
 												{:else}

package/package/components/apps/editor/GridEditor.svelte

@@ -45,7 +45,7 @@ function handleFillHeight(id) {
     }
     $app = $app;
 }
-export function moveComponentBetweenSubgrids(componentId, parentComponentId, subGridIndex, position) {
+export function moveComponentBetweenSubgrids(componentId, subgrid, position) {
     // Find the component in the source subgrid
     const component = findGridItem($app, componentId);
     if (!component) {
@@ -60,14 +60,17 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
         $app.grid = $app.grid.filter((item) => item.id !== component?.id);
     }
     const gridItem = component;
-    insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), { parentComponentId: parentComponentId, subGridIndex: subGridIndex }, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), component.id, position, undefined, undefined, undefined, true);
+    insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), subgrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), component.id, position, undefined, undefined, undefined, true);
     // Update the app state
     $app = $app;
-    $selectedComponent = [parentComponentId];
-    $focusedGrid = {
-        parentComponentId,
-        subGridIndex
-    };
+    if (subgrid) {
+        $selectedComponent = [subgrid.parentComponentId];
+        $focusedGrid = subgrid;
+    }
+    else {
+        $selectedComponent = [componentId];
+        $focusedGrid = undefined;
+    }
 }
 </script>
 
@@ -144,32 +147,34 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
 				allIdsInPath={$allIdsInPath}
 				selectedIds={$selectedComponent}
 				items={$app.grid}
-				on:redraw={(e) => {
+				onRedraw={(grid) => {
 					push(history, $app)
-					$app.grid = e.detail
+					$app.grid = grid
 				}}
 				root
-				on:dropped={(e) => {
-					const { id, overlapped, x, y } = e.detail
-
-					const overlappedComponent = findGridItem($app, overlapped)
+				onDropped={({ id, overlapped, x, y }) => {
+					const overlappedComponent = overlapped ? findGridItem($app, overlapped) : undefined
 
 					if (overlappedComponent && !isContainer(overlappedComponent.data.type)) {
 						return
 					}
 
-					if (!overlapped) {
-						return
-					}
-
 					if (id === overlapped) {
 						return
 					}
 
 					moveComponentBetweenSubgrids(
 						id,
-						overlapped,
-						subGridIndexKey(overlappedComponent?.data?.type, overlapped, $worldStore),
+						overlapped
+							? {
+									parentComponentId: overlapped,
+									subGridIndex: subGridIndexKey(
+										overlappedComponent?.data?.type,
+										overlapped,
+										$worldStore
+									)
+								}
+							: undefined,
 						{ x, y }
 					)
 				}}

package/package/components/apps/editor/GridEditor.svelte.d.ts

@@ -3,7 +3,10 @@ interface Props {
     policy: Policy;
 }
 declare const GridEditor: import("svelte").Component<Props, {
-    moveComponentBetweenSubgrids: (componentId: string, parentComponentId: string, subGridIndex: number, position?: {
+    moveComponentBetweenSubgrids: (componentId: string, subgrid: {
+        parentComponentId: string;
+        subGridIndex: number;
+    } | undefined, position?: {
         x: number;
         y: number;
     }) => void;

package/package/components/apps/editor/GridViewer.svelte

@@ -80,6 +80,7 @@ onMount(() => {
 			{@const left = (item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
 
 			<div
+				id={`wm-component-${item.id}`}
 				class="svlt-grid-item"
 				style="width: {width}px; height:{height}px; {onTop
 					? 'z-index: 1000;'

package/package/components/apps/editor/RunnableJobPanelInner.svelte

@@ -32,11 +32,12 @@ let resultDrawerOpen = $state(false);
 			<div class="break-words relative h-full px-1">
 				<DisplayResult bind:drawerOpen={resultDrawerOpen} result={frontendJob} />
 			</div>
-		{:else if testJob != undefined && 'result' in testJob && testJob.result != undefined}
+		{:else if testJob != undefined && (testJob.type == 'CompletedJob' || testJob.result_stream)}
 			<div class="break-words relative h-full px-1">
 				<DisplayResult
 					bind:drawerOpen={resultDrawerOpen}
 					workspaceId={testJob?.workspace_id}
+					result_stream={testJob?.result_stream}
 					jobId={testJob?.id}
 					result={testJob.result}
 					language={testJob?.language}

package/package/components/apps/editor/SubGridEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { stopPropagation } from 'svelte/legacy';
 import { push } from '../../../history.svelte';
 import { classNames } from '../../../utils';
-import { createEventDispatcher, getContext, onDestroy } from 'svelte';
+import { getContext, onDestroy } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { gridColumns, isFixed, toggleFixed } from '../gridUtils';
 import Grid from '../svelte-grid/Grid.svelte';
@@ -10,8 +10,7 @@ import Component from './component/Component.svelte';
 import ComponentWrapper from './component/ComponentWrapper.svelte';
 import GridViewer from './GridViewer.svelte';
 import GridEditorMenu from './GridEditorMenu.svelte';
-let { containerHeight = undefined, containerWidth = undefined, class: classes = '', style = '', noPadding = false, noYPadding = false, subGridId, visible = true, id, shouldHighlight = true } = $props();
-const dispatch = createEventDispatcher();
+let { containerHeight = undefined, containerWidth = undefined, class: classes = '', style = '', noPadding = false, noYPadding = false, subGridId, visible = true, id, shouldHighlight = true, onFocus } = $props();
 const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint, allIdsInPath, worldStore } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 let isActive = $state(false);
@@ -25,7 +24,7 @@ onDestroy(() => {
 });
 let highlight = $derived(id === $focusedGrid?.parentComponentId && shouldHighlight);
 const onpointerdown = (e) => {
-    dispatch('focus');
+    onFocus?.();
 };
 function selectComponent(e, id) {
     if (!$connectingInput.opened) {
@@ -113,7 +112,7 @@ export function moveToRoot(componentId, position) {
 			{#if $mode !== 'preview'}
 				<div
 					class={highlight
-						? `outline !outline-dashed outline-2 min-h-full ${
+						? `!outline-dashed outline-2 min-h-full ${
 								isActive && !$selectedComponent?.includes(id)
 									? 'outline-orange-600'
 									: 'outline-gray-400 dark:outline-gray-600'
@@ -124,19 +123,17 @@ export function moveToRoot(componentId, position) {
 					<Grid
 						allIdsInPath={$allIdsInPath}
 						items={$app.subgrids?.[subGridId] ?? []}
-						on:redraw={(e) => {
+						onRedraw={(grid) => {
 							push(editorContext?.history, $app)
 							if ($app.subgrids) {
-								$app.subgrids[subGridId] = e.detail
+								$app.subgrids[subGridId] = grid
 							}
 						}}
 						selectedIds={$selectedComponent}
 						scroller={container}
 						parentWidth={$parentWidth - 17}
 						{containerWidth}
-						on:dropped={(e) => {
-							const { id, overlapped, x, y } = e.detail
-
+						onDropped={({ id, overlapped, x, y }) => {
 							if (!overlapped) {
 								moveToRoot(id, { x, y })
 							} else {
@@ -152,7 +149,6 @@ export function moveToRoot(componentId, position) {
 								if (id === overlapped) {
 									return
 								}
-
 								moveComponentBetweenSubgrids(
 									id,
 									overlapped,

package/package/components/apps/editor/SubGridEditor.svelte.d.ts

@@ -9,25 +9,9 @@ interface Props {
     visible?: boolean;
     id: string;
     shouldHighlight?: boolean;
+    onFocus?: () => void;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SubGridEditor: $$__sveltets_2_IsomorphicComponent<Props, {
-    focus: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+declare const SubGridEditor: import("svelte").Component<Props, {
     moveComponentBetweenSubgrids: (componentId: string, parentComponentId: string, subGridIndex: number, position?: {
         x: number;
         y: number;
@@ -37,5 +21,5 @@ declare const SubGridEditor: $$__sveltets_2_IsomorphicComponent<Props, {
         y: number;
     }) => void;
 }, "">;
-type SubGridEditor = InstanceType<typeof SubGridEditor>;
+type SubGridEditor = ReturnType<typeof SubGridEditor>;
 export default SubGridEditor;