windmill-components 1.448.50 → 1.472.2

package/package/components/apps/components/helpers/RunnableComponent.svelte

@@ -1,5 +1,4 @@
 <script>import Alert from '../../../common/alert/Alert.svelte';
-import LightweightSchemaForm from '../../../LightweightSchemaForm.svelte';
 import Popover from '../../../Popover.svelte';
 import { AppService } from '../../../../gen';
 import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
@@ -15,6 +14,7 @@ import { get } from 'svelte/store';
 import RefreshButton from './RefreshButton.svelte';
 import { ctxRegex } from '../../utils';
 import { computeWorkspaceS3FileInputPolicy } from '../../editor/appUtilsS3';
+import SchemaForm from '../../../SchemaForm.svelte';
 // Component props
 export let id;
 export let fields;
@@ -92,13 +92,22 @@ $: runnableInputValues && dispatch('argsChanged');
 $: refreshOn =
     runnable && runnable.type === 'runnableByName' ? runnable.inlineScript?.refreshOn ?? [] : [];
 function refreshIfAutoRefresh(src) {
+    // console.log(
+    // 	'refreshIfAutoRefresh',
+    // 	src,
+    // 	id,
+    // 	iterContext ? $iterContext : undefined,
+    // 	$rowContext ? $rowContext : undefined,
+    // 	firstRefresh
+    // )
     if (firstRefresh) {
         firstRefresh = false;
         if (src == 'arg changed' &&
             args == undefined &&
+            result != undefined &&
             Object.keys(runnableInputValues ?? {}).length == 0 &&
             Object.keys(extraQueryParams ?? {}).length == 0) {
-            // console.debug(`Skipping refreshing ${id} because ${_src} (first)`)
+            console.log('skipping refresh because first refresh');
             return;
         }
     }
@@ -413,7 +422,7 @@ function updateResult(res) {
     result = res;
 }
 async function setResult(res, jobId) {
-    dispatch('resultSet');
+    dispatch('resultSet', res);
     const errors = getResultErrors(res);
     if (errors) {
         const transformerResult = transformer
@@ -460,6 +469,7 @@ onMount(() => {
         cancellableRun = (inlineScript, setRunnableJobEditorPanel) => {
             let rejectCb;
             let p = new Promise((resolve, reject) => {
+                dispatch('recompute');
                 rejectCb = reject;
                 executeComponent(true, inlineScript, setRunnableJobEditorPanel, undefined, {
                     done: (x) => {
@@ -621,7 +631,9 @@ function computeS3ForceViewerPolicies() {
 		<!-- {Object.keys(schemaStripped?.properties ?? {}).length > 0} -->
 		{#if render && (autoRefresh || forceSchemaDisplay) && schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0}
 			<div class="px-2 h-fit min-h-0">
-				<LightweightSchemaForm
+				<SchemaForm
+					noVariablePicker
+					onlyMaskPassword
 					schema={schemaStripped}
 					appPath={defaultIfEmptyString($appPath, `u/${$userStore?.username ?? 'unknown'}/newapp`)}
 					{computeS3ForceViewerPolicies}

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

@@ -55,6 +55,7 @@ declare const __propDef: {
         resultSet: CustomEvent<any>;
         handleError: CustomEvent<any>;
         success: CustomEvent<any>;
+        recompute: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -34,7 +34,9 @@ export let onSuccess = () => { };
 export function setArgs(value) {
     runnableComponent?.setArgs(value);
 }
-const { staticExporter, noBackend, componentControl, runnableComponents } = getContext('AppViewerContext');
+const { staticExporter, initialized, noBackend, componentControl, runnableComponents } = getContext('AppViewerContext');
+const iterContext = getContext('ListWrapperContext');
+const rowContext = getContext('RowWrapperContext');
 if (noBackend && componentInput?.type == 'runnable') {
     result = componentInput?.['value'];
 }
@@ -46,9 +48,22 @@ onMount(() => {
         return result;
     };
 });
+const fullId = id + (extraKey ?? '');
 if (!(initializing && componentInput?.type === 'runnable' && isRunnableDefined(componentInput))) {
     initializing = false;
 }
+else {
+    if ((initializing == undefined || initializing == true) &&
+        Object.keys($initialized?.runnableInitialized ?? {}).includes(fullId)) {
+        initializing = false;
+    }
+    if (result == undefined &&
+        !initializing &&
+        iterContext == undefined &&
+        rowContext == undefined) {
+        result = $initialized.runnableInitialized?.[fullId];
+    }
+}
 // We need to make sure that old apps have correct values. Triggerable (button, form, etc) have both autoRefresh and recomputeOnInputChanged set to false
 $: if (!autoRefresh && componentInput?.type === 'runnable' && componentInput.autoRefresh) {
     componentInput.autoRefresh = false;
@@ -166,7 +181,9 @@ export async function handleSideEffect(success, errorMessage) {
 	{#if !noInitialize}
 		<InitializeComponent {id} />
 	{/if}
-	<slot />
+	{#if render}
+		<slot />
+	{/if}
 {:else if componentInput.type === 'runnable' && isRunnableDefined(componentInput)}
 	<RunnableComponent
 		{noInitialize}
@@ -198,8 +215,20 @@ export async function handleSideEffect(success, errorMessage) {
 		on:done
 		on:doneError
 		on:cancel
+		on:recompute
 		on:argsChanged
-		on:resultSet={() => (initializing = false)}
+		on:resultSet={(e) => {
+			const res = e.detail
+			if ($initialized?.runnableInitialized?.[fullId] === undefined) {
+				console.log('resultSet', id)
+				$initialized.runnableInitialized = {
+					...($initialized.runnableInitialized ?? {}),
+					[fullId]: res
+				}
+			}
+
+			initializing = false
+		}}
 		on:success={(e) => {
 			onSuccess(e.detail)
 			handleSideEffect(true)

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

@@ -122,6 +122,7 @@ declare const __propDef: {
         done: CustomEvent<any>;
         doneError: CustomEvent<any>;
         cancel: CustomEvent<any>;
+        recompute: CustomEvent<any>;
         argsChanged: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/inputs/AppS3FileInput.svelte

@@ -107,6 +107,7 @@ function computeForceViewerPolicies() {
 			: undefined}
 		pathTransformer={resolvedConfig?.type?.configuration?.s3?.pathTemplate}
 		allowMultiple={resolvedConfigS3.allowMultiple}
+		allowDelete={resolvedConfigS3.allowDelete}
 		containerText={resolvedConfigS3.text}
 		customResourcePath={resolvedConfigS3.resource}
 		customResourceType="s3"

package/package/components/apps/components/layout/AppConditionalWrapper.svelte

@@ -17,6 +17,8 @@ const outputs = initOutput($worldStore, id, {
     conditions: [],
     selectedTabIndex: 0
 });
+let everRender = render;
+$: render && !everRender && (everRender = true);
 function onFocus() {
     $focusedGrid = {
         parentComponentId: id,
@@ -24,7 +26,7 @@ function onFocus() {
     };
 }
 let css = initCss($app.css?.conditionalwrapper, customCss);
-let resolvedConditions = [];
+let resolvedConditions = conditions.map((_x) => false);
 let selectedConditionIndex = 0;
 function handleResolvedConditions() {
     const slicedArray = resolvedConditions.slice(0, conditions.length);
@@ -75,23 +77,29 @@ $componentControl[id] = {
 
 <InitializeComponent {id} />
 
-<div class="w-full h-full">
-	{#if $app.subgrids}
-		{#each resolvedConditions ?? [] as _res, i}
-			<SubGridEditor
-				visible={render && i == selectedConditionIndex}
-				{id}
-				class={twMerge(css?.container?.class, 'wm-conditional-tabs')}
-				style={css?.container?.style}
-				subGridId={`${id}-${i}`}
-				containerHeight={componentContainerHeight}
-				on:focus={(e) => {
-					if (!$connectingInput.opened) {
-						$selectedComponent = [id]
-					}
-					onFocus()
-				}}
-			/>
-		{/each}
-	{/if}
-</div>
+{#if everRender}
+	<div class="w-full h-full">
+		{#if $app.subgrids}
+			{#each resolvedConditions ?? [] as _res, i}
+				<SubGridEditor
+					visible={render && i == selectedConditionIndex}
+					{id}
+					class={twMerge(css?.container?.class, 'wm-conditional-tabs')}
+					style={css?.container?.style}
+					subGridId={`${id}-${i}`}
+					containerHeight={componentContainerHeight}
+					on:focus={(e) => {
+						if (!$connectingInput.opened) {
+							$selectedComponent = [id]
+						}
+						onFocus()
+					}}
+				/>
+			{/each}
+		{/if}
+	</div>
+{:else if $app.subgrids}
+	{#each resolvedConditions ?? [] as _res, i}
+		<SubGridEditor visible={false} {id} subGridId={`${id}-${i}`} />
+	{/each}
+{/if}

package/package/components/apps/components/layout/AppContainer.svelte

@@ -15,6 +15,8 @@ export let customCss = undefined;
 export let render;
 export let groupFields = undefined;
 const { app, focusedGrid, selectedComponent, worldStore, connectingInput, componentControl } = getContext('AppViewerContext');
+let everRender = render;
+$: render && !everRender && (everRender = true);
 let groupContext = writable({});
 let outputs = initOutput($worldStore, id, { group: $groupContext });
 $: outputs.group.set($groupContext, true);
@@ -55,23 +57,29 @@ let css = initCss($app.css?.containercomponent, customCss);
 	{/if}
 {/each}
 
-<div class="w-full h-full">
-	{#if $app.subgrids?.[`${id}-0`]}
-		<GroupWrapper {id} context={groupContext}>
-			<SubGridEditor
-				visible={render}
-				{id}
-				class={twMerge(css?.container?.class, 'wm-container')}
-				style={css?.container?.style}
-				subGridId={`${id}-0`}
-				containerHeight={componentContainerHeight}
-				on:focus={() => {
-					if (!$connectingInput.opened) {
-						$selectedComponent = [id]
-					}
-					onFocus()
-				}}
-			/>
-		</GroupWrapper>
-	{/if}
-</div>
+{#if everRender}
+	<div class="w-full h-full">
+		{#if $app.subgrids?.[`${id}-0`]}
+			<GroupWrapper {id} context={groupContext}>
+				<SubGridEditor
+					visible={render}
+					{id}
+					class={twMerge(css?.container?.class, 'wm-container')}
+					style={css?.container?.style}
+					subGridId={`${id}-0`}
+					containerHeight={componentContainerHeight}
+					on:focus={() => {
+						if (!$connectingInput.opened) {
+							$selectedComponent = [id]
+						}
+						onFocus()
+					}}
+				/>
+			</GroupWrapper>
+		{/if}
+	</div>
+{:else if $app.subgrids?.[`${id}-0`]}
+	<GroupWrapper {id} context={groupContext}>
+		<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+	</GroupWrapper>
+{/if}

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

@@ -15,6 +15,8 @@ export let componentContainerHeight;
 export let customCss = undefined;
 export let render;
 export let nodes;
+let everRender = render;
+$: render && !everRender && (everRender = true);
 const { app, focusedGrid, selectedComponent, connectingInput, componentControl, worldStore, debuggingComponents } = getContext('AppViewerContext');
 let css = initCss($app.css?.conditionalwrapper, customCss);
 let selectedConditionIndex = 0;
@@ -150,55 +152,63 @@ $: if ($selectedComponent?.[0] === id && !$focusedGrid) {
 
 <InitializeComponent {id} />
 
-<div class="w-full overflow-auto">
-	<div class="w-full">
-		{#if $app.subgrids}
-			{#each Object.values(nodes) ?? [] as node, i}
-				<SubGridEditor
-					visible={render && node.id === currentNodeId}
-					{id}
-					class={twMerge(css?.container?.class, 'wm-decision-tree')}
-					style={css?.container?.style}
-					subGridId={`${id}-${i}`}
-					containerHeight={componentContainerHeight - 40}
-					on:focus={() => {
-						if (!$connectingInput.opened) {
-							$selectedComponent = [id]
-						}
-						onFocus(i)
-					}}
-				/>
-			{/each}
-		{/if}
+{#if everRender}
+	<div class="w-full overflow-auto">
+		<div class="w-full">
+			{#if $app.subgrids}
+				{#each Object.values(nodes) ?? [] as node, i}
+					<SubGridEditor
+						visible={render && node.id === currentNodeId}
+						{id}
+						class={twMerge(css?.container?.class, 'wm-decision-tree')}
+						style={css?.container?.style}
+						subGridId={`${id}-${i}`}
+						containerHeight={componentContainerHeight - 40}
+						on:focus={() => {
+							if (!$connectingInput.opened) {
+								$selectedComponent = [id]
+							}
+							onFocus(i)
+						}}
+					/>
+				{/each}
+			{/if}
+		</div>
 	</div>
-</div>
 
-<div class="h-8 flex flex-row gap-2 justify-end items-center px-2 bg-surface-primary z-50">
-	{#if isDebugging($debuggingComponents, id)}
-		<Badge color="red" size="xs2">
-			{`Debugging. Actions are disabled.`}
-		</Badge>
-	{/if}
-	{#if getFirstNode(nodes)?.id !== currentNodeId}
-		<Button
-			on:click={prev}
-			size="xs2"
-			color="light"
-			startIcon={{ icon: ArrowLeft }}
-			disabled={isDebugging($debuggingComponents, id)}
-		>
-			Prev
-		</Button>
+	{#if render}
+		<div class="h-8 flex flex-row gap-2 justify-end items-center px-2 bg-surface-primary z-50">
+			{#if isDebugging($debuggingComponents, id)}
+				<Badge color="red" size="xs2">
+					{`Debugging. Actions are disabled.`}
+				</Badge>
+			{/if}
+			{#if getFirstNode(nodes)?.id !== currentNodeId}
+				<Button
+					on:click={prev}
+					size="xs2"
+					color="light"
+					startIcon={{ icon: ArrowLeft }}
+					disabled={isDebugging($debuggingComponents, id)}
+				>
+					Prev
+				</Button>
+			{/if}
+			<Button
+				on:click={next}
+				size="xs2"
+				color="dark"
+				endIcon={{ icon: ArrowRight }}
+				disabled={isNextDisabled ||
+					currentNodeId === lastNodeId ||
+					isDebugging($debuggingComponents, id)}
+			>
+				Next
+			</Button>
+		</div>
 	{/if}
-	<Button
-		on:click={next}
-		size="xs2"
-		color="dark"
-		endIcon={{ icon: ArrowRight }}
-		disabled={isNextDisabled ||
-			currentNodeId === lastNodeId ||
-			isDebugging($debuggingComponents, id)}
-	>
-		Next
-	</Button>
-</div>
+{:else if $app.subgrids}
+	{#each Object.values(nodes) ?? [] as _node, i}
+		<SubGridEditor visible={false} {id} subGridId={`${id}-${i}`} />
+	{/each}
+{/if}

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

@@ -19,6 +19,8 @@ export let noWFull = false;
 export let render;
 export let onOpenRecomputeIds = undefined;
 export let onCloseRecomputeIds = undefined;
+let everRender = render;
+$: render && !everRender && (everRender = true);
 const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl, runnableComponents } = getContext('AppViewerContext');
 const resolvedConfig = initConfig(components['drawercomponent'].initialData.configuration, configuration);
 const outputs = initOutput($worldStore, id, {
@@ -56,98 +58,103 @@ let css = initCss($app.css?.drawercomponent, customCss);
 {/each}
 
 <InitializeComponent {id} />
+{#if render}
+	<div class="h-full w-full">
+		<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
+			<Button
+				btnClasses={twMerge(css?.button?.class, 'wm-drawer-button')}
+				wrapperClasses={twMerge(
+					css?.container?.class,
+					'wm-drawer-button-container',
+					resolvedConfig?.fillContainer ? 'w-full h-full' : '',
+					resolvedConfig?.hideButtonOnView && $mode == 'preview'
+						? 'invisible h-0 overflow-hidden'
+						: ''
+				)}
+				wrapperStyle={css?.container?.style}
+				disabled={resolvedConfig?.disabled}
+				on:pointerdown={(e) => {
+					e?.stopPropagation()
+				}}
+				on:click={async (e) => {
+					$focusedGrid = {
+						parentComponentId: id,
+						subGridIndex: 0
+					}
+					appDrawer.toggleDrawer()
+				}}
+				size={resolvedConfig.size}
+				color={resolvedConfig.color}
+				style={css?.button?.style}
+			>
+				{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
+					<div>{resolvedConfig.label}</div>
+				{/if}
+			</Button>
+		</AlignWrapper>
+	</div>
+{/if}
 
-<div class="h-full w-full">
-	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
-		<Button
-			btnClasses={twMerge(css?.button?.class, 'wm-drawer-button')}
-			wrapperClasses={twMerge(
-				css?.container?.class,
-				'wm-drawer-button-container',
-				resolvedConfig?.fillContainer ? 'w-full h-full' : '',
-				resolvedConfig?.hideButtonOnView && $mode == 'preview'
-					? 'invisible h-0 overflow-hidden'
-					: ''
-			)}
-			wrapperStyle={css?.container?.style}
-			disabled={resolvedConfig?.disabled}
-			on:pointerdown={(e) => {
-				e?.stopPropagation()
+{#if everRender}
+	<Portal target="#app-editor-top-level-drawer" name="app-drawer">
+		<Drawer
+			let:open
+			bind:this={appDrawer}
+			size="800px"
+			alwaysOpen
+			positionClass={$mode == 'dnd' ? '!absolute' : '!fixed'}
+			shouldUsePortal={false}
+			on:open={() => {
+				outputs?.open.set(true)
+				onOpenRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
 			}}
-			on:click={async (e) => {
-				$focusedGrid = {
-					parentComponentId: id,
-					subGridIndex: 0
-				}
-				appDrawer.toggleDrawer()
-			}}
-			size={resolvedConfig.size}
-			color={resolvedConfig.color}
-			style={css?.button?.style}
-		>
-			{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
-				<div>{resolvedConfig.label}</div>
-			{/if}
-		</Button>
-	</AlignWrapper>
-</div>
-
-<Portal target="#app-editor-top-level-drawer" name="app-drawer">
-	<Drawer
-		let:open
-		bind:this={appDrawer}
-		size="800px"
-		alwaysOpen
-		positionClass={$mode == 'dnd' ? '!absolute' : '!fixed'}
-		shouldUsePortal={false}
-		on:open={() => {
-			outputs?.open.set(true)
-			onOpenRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
-		}}
-		on:close={() => {
-			outputs?.open.set(false)
-			onCloseRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
-		}}
-	>
-		<DrawerContent
-			title={resolvedConfig.drawerTitle}
 			on:close={() => {
-				appDrawer?.toggleDrawer()
-				$focusedGrid = undefined
+				outputs?.open.set(false)
+				onCloseRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
 			}}
-			fullScreen={$mode !== 'dnd'}
 		>
-			<div
-				class={twMerge('h-full', css?.drawer?.class, 'wm-drawer')}
-				style={css?.drawer?.style}
-				on:pointerdown={(e) => {
-					e?.stopPropagation()
-					if (!$connectingInput.opened) {
-						$selectedComponent = [id]
-						$focusedGrid = {
-							parentComponentId: id,
-							subGridIndex: 0
-						}
-					}
+			<DrawerContent
+				title={resolvedConfig.drawerTitle}
+				on:close={() => {
+					appDrawer?.toggleDrawer()
+					$focusedGrid = undefined
 				}}
+				fullScreen={$mode !== 'dnd'}
 			>
-				{#if $app.subgrids?.[`${id}-0`]}
-					<SubGridEditor
-						visible={open && render}
-						{id}
-						subGridId={`${id}-0`}
-						on:focus={() => {
-							if (!$connectingInput.opened) {
-								$selectedComponent = [id]
-								$focusedGrid = {
-									parentComponentId: id,
-									subGridIndex: 0
-								}
+				<div
+					class={twMerge('h-full', css?.drawer?.class, 'wm-drawer')}
+					style={css?.drawer?.style}
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+						if (!$connectingInput.opened) {
+							$selectedComponent = [id]
+							$focusedGrid = {
+								parentComponentId: id,
+								subGridIndex: 0
 							}
-						}}
-					/>
-				{/if}
-			</div>
-		</DrawerContent>
-	</Drawer>
-</Portal>
+						}
+					}}
+				>
+					{#if $app.subgrids?.[`${id}-0`]}
+						<SubGridEditor
+							visible={open && render}
+							{id}
+							subGridId={`${id}-0`}
+							on:focus={() => {
+								if (!$connectingInput.opened) {
+									$selectedComponent = [id]
+									$focusedGrid = {
+										parentComponentId: id,
+										subGridIndex: 0
+									}
+								}
+							}}
+						/>
+					{/if}
+				</div>
+			</DrawerContent>
+		</Drawer>
+	</Portal>
+{:else if $app.subgrids?.[`${id}-0`]}
+	<SubGridEditor visible={false} {id} subGridId={`${id}-0`} />
+{/if}