windmill-components 1.309.7 → 1.339.2

package/package/components/apps/components/inputs/currency/AppCurrencyInput.svelte

@@ -73,7 +73,7 @@ let css = initCss($app.css?.currencycomponent, customCss);
 					<CurrencyInput
 						inputClasses={{
 							formatted: twMerge(
-								'px-2 w-full py-1.5 windmillapp',
+								'px-2 text-sm w-full py-1.5 windmillapp app-editor-input',
 								css?.input?.class,
 								'wm-currency-input'
 							),

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

@@ -3,9 +3,9 @@ import { initOutput } from '../../editor/appUtils';
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
-import { InputValue } from '../helpers';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let componentContainerHeight;
 export let customCss = undefined;
@@ -53,7 +53,12 @@ $componentControl[id] = {
 </script>
 
 {#each conditions ?? [] as condition, index}
-	<InputValue key="conditions" {id} input={condition} bind:value={resolvedConditions[index]} />
+	<InputValue
+		key="condition{index + 1}"
+		{id}
+		input={condition}
+		bind:value={resolvedConditions[index]}
+	/>
 {/each}
 
 {#each Object.keys(css ?? {}) as key (key)}

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

@@ -7,8 +7,8 @@ import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 // import type { EvalV2AppInput, StaticAppInput } from '../../inputType'
 import { writable } from 'svelte/store';
-import { InputValue } from '../helpers';
 import GroupWrapper from '../GroupWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let componentContainerHeight;
 export let customCss = undefined;

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

@@ -2,7 +2,6 @@
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
-import { InputValue } from '../helpers';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import Button from '../../../common/button/Button.svelte';
@@ -10,6 +9,7 @@ import { ArrowLeft, ArrowRight } from 'lucide-svelte';
 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';
 export let id;
 export let componentContainerHeight;
 export let customCss = undefined;

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

@@ -4,12 +4,12 @@ import Portal from 'svelte-portal';
 import { initCss } from '../../utils';
 import { Button, Drawer, DrawerContent } from '../../../common';
 import { twMerge } from 'tailwind-merge';
-import { AlignWrapper } from '../helpers';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 export let customCss = undefined;
 export let id;
 export let configuration;
@@ -17,9 +17,13 @@ export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let noWFull = false;
 export let render;
-const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl } = getContext('AppViewerContext');
+export let onOpenRecomputeIds = undefined;
+export let onCloseRecomputeIds = undefined;
+const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl, runnableComponents } = getContext('AppViewerContext');
 const resolvedConfig = initConfig(components['drawercomponent'].initialData.configuration, configuration);
-initOutput($worldStore, id, {});
+const outputs = initOutput($worldStore, id, {
+    open: false
+});
 let appDrawer;
 $componentControl[id] = {
     open: () => {
@@ -95,6 +99,15 @@ let css = initCss($app.css?.drawercomponent, customCss);
 		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}

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

@@ -9,6 +9,8 @@ declare const __propDef: {
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         noWFull?: boolean | undefined;
         render: boolean;
+        onOpenRecomputeIds?: string[] | undefined;
+        onCloseRecomputeIds?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -3,7 +3,6 @@ import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
 import { Button } from '../../../common';
 import { twMerge } from 'tailwind-merge';
-import { AlignWrapper } from '../helpers';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import Portal from 'svelte-portal';
@@ -12,6 +11,8 @@ import { X } from 'lucide-svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import Disposable from '../../../common/drawer/Disposable.svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 export let customCss = undefined;
 export let id;
 export let configuration;
@@ -19,24 +20,15 @@ export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let noWFull = false;
 export let render;
-const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl } = getContext('AppViewerContext');
+export let onOpenRecomputeIds = undefined;
+export let onCloseRecomputeIds = undefined;
+const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl, runnableComponents } = getContext('AppViewerContext');
 //used so that we can count number of outputs setup for first refresh
-initOutput($worldStore, id, {});
+const outputs = initOutput($worldStore, id, {
+    open: false
+});
 let css = initCss($app.css?.modalcomponent, customCss);
-let open = false;
-function handleKeyUp(event) {
-    const key = event.key;
-    if (key === 'Escape' || key === 'Esc') {
-        if (open) {
-            event.preventDefault();
-            closeDrawer();
-        }
-    }
-}
-function closeDrawer() {
-    console.log('Close drawer');
-    open = false;
-}
+let disposable = undefined;
 let resolvedConfig = initConfig(components['modalcomponent'].initialData.configuration, configuration);
 let unclickableOutside = false;
 function unclosableModal() {
@@ -48,23 +40,21 @@ function unclosableModal() {
 $componentControl[id] = {
     openModal: () => {
         unclosableModal();
-        open = true;
+        disposable?.openDrawer();
     },
     closeModal: () => {
-        open = false;
+        disposable?.closeDrawer();
     },
     open: () => {
         unclosableModal();
-        open = true;
+        disposable?.openDrawer();
     },
     close: () => {
-        open = false;
+        disposable?.closeDrawer();
     }
 };
 </script>
 
-<svelte:window on:keyup={handleKeyUp} />
-
 <InitializeComponent {id} />
 
 {#each Object.keys(components['modalcomponent'].initialData.configuration) as key (key)}
@@ -111,7 +101,7 @@ $componentControl[id] = {
 						parentComponentId: id,
 						subGridIndex: 0
 					}
-					open = true
+					disposable?.openDrawer()
 				}}
 				size={resolvedConfig.buttonSize}
 				color={resolvedConfig.buttonColor}
@@ -123,69 +113,85 @@ $componentControl[id] = {
 {/if}
 
 <Portal target="#app-editor-top-level-drawer">
-	<div
-		class={twMerge(
-			`${
-				$mode == 'dnd' ? 'absolute' : 'fixed'
-			} top-0 bottom-0 left-0 right-0 transition-all duration-50`,
-			open ? ' bg-black bg-opacity-60' : 'h-0 overflow-hidden invisible',
-			$mode === 'dnd' ? 'z-[1000]' : 'z-[1100]'
-		)}
+	<Disposable
+		{id}
+		let:handleClickAway
+		let:zIndex
+		let:open
+		bind:this={disposable}
+		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?.()))
+		}}
 	>
 		<div
-			style={css?.popup?.style}
-			class={twMerge('mx-24 mt-8 bg-surface rounded-lg relative', css?.popup?.class)}
-			use:clickOutside={false}
-			on:click_outside={(e) => {
-				if ($mode !== 'dnd' && !unclickableOutside) {
-					closeDrawer()
-				}
-			}}
+			class={twMerge(
+				`${
+					$mode == 'dnd' ? 'absolute' : 'fixed'
+				} top-0 bottom-0 left-0 right-0 transition-all duration-50`,
+				open ? ' bg-black bg-opacity-60' : 'h-0 overflow-hidden invisible'
+			)}
+			style="z-index: {zIndex}"
 		>
-			<div class="px-4 py-2 border-b flex justify-between items-center">
-				<div>{resolvedConfig.modalTitle}</div>
-				<div class="w-8">
-					<button
-						on:click|stopPropagation={() => {
-							open = false
-						}}
-						class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
-					>
-						<X class="text-tertiary" />
-					</button>
-				</div>
-			</div>
 			<div
-				class="wm-modal"
-				on:pointerdown={(e) => {
-					e?.stopPropagation()
-					if (!$connectingInput.opened) {
-						$selectedComponent = [id]
-						$focusedGrid = {
-							parentComponentId: id,
-							subGridIndex: 0
-						}
+				style={css?.popup?.style}
+				class={twMerge('mx-24 mt-8 bg-surface rounded-lg relative', css?.popup?.class)}
+				use:clickOutside={false}
+				on:click_outside={(e) => {
+					if ($mode !== 'dnd' && !unclickableOutside) {
+						handleClickAway(e)
 					}
 				}}
 			>
-				{#if $app.subgrids?.[`${id}-0`]}
-					<SubGridEditor
-						visible={open && render}
-						{id}
-						noPadding
-						subGridId={`${id}-0`}
-						on:focus={() => {
-							if (!$connectingInput.opened) {
-								$selectedComponent = [id]
-								$focusedGrid = {
-									parentComponentId: id,
-									subGridIndex: 0
-								}
+				<div class="px-4 py-2 border-b flex justify-between items-center">
+					<div>{resolvedConfig.modalTitle}</div>
+					<div class="w-8">
+						<button
+							on:click|stopPropagation={() => {
+								disposable?.closeDrawer()
+							}}
+							class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
+						>
+							<X class="text-tertiary" />
+						</button>
+					</div>
+				</div>
+				<div
+					class="wm-modal"
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+						if (!$connectingInput.opened) {
+							$selectedComponent = [id]
+							$focusedGrid = {
+								parentComponentId: id,
+								subGridIndex: 0
 							}
-						}}
-					/>
-				{/if}
+						}
+					}}
+				>
+					{#if $app.subgrids?.[`${id}-0`]}
+						<SubGridEditor
+							visible={open && render}
+							{id}
+							noPadding
+							subGridId={`${id}-0`}
+							on:focus={() => {
+								if (!$connectingInput.opened) {
+									$selectedComponent = [id]
+									$focusedGrid = {
+										parentComponentId: id,
+										subGridIndex: 0
+									}
+								}
+							}}
+						/>
+					{/if}
+				</div>
 			</div>
 		</div>
-	</div>
+	</Disposable>
 </Portal>

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

@@ -9,6 +9,8 @@ declare const __propDef: {
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         noWFull?: boolean | undefined;
         render: boolean;
+        onOpenRecomputeIds?: string[] | undefined;
+        onCloseRecomputeIds?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -4,11 +4,12 @@ import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import Button from '../../../common/button/Button.svelte';
-import { RunnableComponent, RunnableWrapper } from '../helpers';
 import { ArrowLeftIcon, ArrowRightIcon, Loader2 } from 'lucide-svelte';
 import Stepper from '../../../common/stepper/Stepper.svelte';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import RunnableComponent from '../helpers/RunnableComponent.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentContainerHeight;
 export let tabs;

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

@@ -76,7 +76,7 @@ let resolvedDisabledTabs = [];
 
 {#each disabledTabs ?? [] as disableTab, index}
 	<InputValue
-		key="disable-{index}"
+		key="tabDisabled {index}"
 		{id}
 		input={disableTab}
 		bind:value={resolvedDisabledTabs[index]}

package/package/components/apps/editor/AppEditor.svelte

@@ -121,7 +121,8 @@ setContext('AppEditorContext', {
     movingcomponents: writable(undefined),
     selectedComponentInEditor: writable(undefined),
     jobsDrawerOpen: writable(false),
-    scale
+    scale,
+    stylePanel: () => StylePanel
 });
 let timeout = undefined;
 $: $appStore && saveFrontendDraft();
@@ -499,7 +500,7 @@ let runnableJobEnterTimeout = undefined;
 										class={classNames(
 											'mx-auto w-full h-full z-50',
 											$appStore.fullscreen ? '' : 'max-w-7xl',
-											$componentActive ? 'absolute' : 'overflow-auto'
+											$componentActive ? 'absolute right-0 left-0' : 'overflow-auto'
 										)}
 										style={$componentActive ? `top: -${$yTop}px;` : ''}
 									>

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

@@ -45,6 +45,7 @@ import { getSelectInput } from '../components/display/dbtable/queries/select';
 import { getInsertInput } from '../components/display/dbtable/queries/insert';
 import { getUpdateInput } from '../components/display/dbtable/queries/update';
 import { getDeleteInput } from '../components/display/dbtable/queries/delete';
+import { collectOneOfFields } from './appUtils';
 async function hash(message) {
     try {
         const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -114,7 +115,9 @@ async function computeTriggerables() {
         }
         if ((c.type === 'aggridcomponent' ||
             c.type === 'aggridcomponentee' ||
-            c.type === 'dbexplorercomponent') &&
+            c.type === 'dbexplorercomponent' ||
+            c.type === 'aggridinfinitecomponent' ||
+            c.type === 'aggridinfinitecomponentee') &&
             Array.isArray(c.actions)) {
             r.push(...c.actions.map((x) => ({ input: x.componentInput, id: x.id })));
         }
@@ -175,20 +178,40 @@ async function computeTriggerables() {
         .concat(Object.values($app.hiddenInlineScripts ?? {}).map(async (v, i) => {
         return await processRunnable(BG_PREFIX + i, v, v.fields);
     }))));
-    console.log('allTriggers', allTriggers);
-    policy.triggerables = Object.fromEntries(allTriggers.filter(Boolean));
+    delete policy.triggerables;
+    const ntriggerables = Object.fromEntries(allTriggers.filter(Boolean));
+    policy.triggerables_v2 = ntriggerables;
 }
 async function processRunnable(id, runnable, fields) {
     const staticInputs = collectStaticFields(fields);
+    const oneOfInputs = collectOneOfFields(fields, $app);
+    const allowUserResources = Object.entries(fields)
+        .map(([k, v]) => {
+        return v['allowUserResources'] ? k : undefined;
+    })
+        .filter(Boolean);
     if (runnable?.type == 'runnableByName') {
-        console.log('processRunnable:content', runnable.inlineScript?.content);
         let hex = await hash(runnable.inlineScript?.content);
         console.log('hex', hex, id);
-        return [`${id}:rawscript/${hex}`, staticInputs];
+        return [
+            `${id}:rawscript/${hex}`,
+            {
+                static_inputs: staticInputs,
+                one_of_inputs: oneOfInputs,
+                allow_user_resources: allowUserResources
+            }
+        ];
     }
     else if (runnable?.type == 'runnableByPath') {
         let prefix = runnable.runType !== 'hubscript' ? runnable.runType : 'script';
-        return [`${id}:${prefix}/${runnable.path}`, staticInputs];
+        return [
+            `${id}:${prefix}/${runnable.path}`,
+            {
+                static_inputs: staticInputs,
+                one_of_inputs: oneOfInputs,
+                allow_user_resources: allowUserResources
+            }
+        ];
     }
 }
 async function createApp(path) {
@@ -261,7 +284,7 @@ async function updateApp(npath) {
     }
 }
 let secretUrl = undefined;
-$: secretUrl == undefined && policy.execution_mode == 'anonymous' && getSecretUrl();
+$: appPath != '' && secretUrl == undefined && getSecretUrl();
 async function getSecretUrl() {
     secretUrl = await AppService.getPublicSecretOfApp({
         workspace: $workspaceStore,
@@ -269,16 +292,17 @@ async function getSecretUrl() {
     });
 }
 async function setPublishState() {
+    await computeTriggerables();
     await AppService.updateApp({
         workspace: $workspaceStore,
         path: appPath,
         requestBody: { policy }
     });
     if (policy.execution_mode == 'anonymous') {
-        sendUserToast('App made visible publicly at the secret URL.');
+        sendUserToast('App require no login to be accessed');
     }
     else {
-        sendUserToast('App made unaccessible publicly');
+        sendUserToast('App require login and read-access');
     }
 }
 async function save() {
@@ -591,7 +615,6 @@ export function openTroubleshootPanel() {
 <svelte:window on:keydown={onKeyDown} />
 
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
-
 <UnsavedConfirmationModal
 	{diffDrawer}
 	savedValue={savedApp}
@@ -772,22 +795,26 @@ export function openTroubleshootPanel() {
 			</Alert>
 		{:else}
 			<Alert title="App executed on behalf of you">
-				A viewer of the app will execute the runnables of the app on behalf of the publisher (you).
+				A viewer of the app will execute the runnables of the app on behalf of the publisher (you)
 				<Tooltip>
-					This is to ensure that all resources/runnable available at time of creating the app would
-					prevent the good execution of the app. To guarantee tight security, a policy is computed
-					at time of deployment of the app which only allow the scripts/flows referred to in the app
-					to be called on behalf of, and the resources are passed by reference so that their actual
-					value is . Furthermore, static parameters are not overridable. Hence, users will only be
-					able to use the app as intended by the publisher without risk for leaking resources not
-					used in the app.
+					It ensures that all required resources/runnable visible for publisher but not for viewer
+					at time of creating the app would prevent the execution of the app. To guarantee tight
+					security, a policy is computed at time of deployment of the app which only allow the
+					scripts/flows referred to in the app to be called on behalf of. Furthermore, static
+					parameters are not overridable. Hence, users will only be able to use the app as intended
+					by the publisher without risk for leaking resources not used in the app.
 				</Tooltip>
 			</Alert>
+
+			<div class="mt-10" />
+
+			<h2>Secret public URL</h2>
 			<div class="mt-4" />
+
 			<Toggle
 				options={{
-					left: `Require read-access`,
-					right: `Publish publicly for anyone knowing the secret url`
+					left: `Require login and read-access`,
+					right: `No login required`
 				}}
 				checked={policy.execution_mode == 'anonymous'}
 				on:change={(e) => {
@@ -796,11 +823,11 @@ export function openTroubleshootPanel() {
 				}}
 			/>
 
-			{#if policy.execution_mode == 'anonymous' && secretUrl}
-				{@const url = `${$page.url.hostname}/public/${$workspaceStore}/${secretUrl}`}
-				{@const href = $page.url.protocol + '//' + url}
-				<div class="my-6 box">
-					Public url:
+			<div class="my-6 box">
+				Secret public url:
+				{#if secretUrl}
+					{@const url = `${$page.url.hostname}/public/${$workspaceStore}/${secretUrl}`}
+					{@const href = $page.url.protocol + '//' + url}
 					<a
 						on:click={(e) => {
 							e.preventDefault()
@@ -814,12 +841,16 @@ export function openTroubleshootPanel() {
 							<Clipboard />
 						</span>
 					</a>
-				</div>
+				{:else}<Loader2 class="animate-spin" />
+				{/if}
+				<div class="text-xs text-secondary"
+					>You may share this url directly or embed it using an iframe (if not requiring login)</div
+				>
+			</div>
 
-				<Alert type="info" title="Only latest saved app is publicly available">
-					Once made public, you will still need to deploy the app to make visible the latest changes
-				</Alert>
-			{/if}
+			<Alert type="info" title="Only latest deployed app is publicly available">
+				You will still need to deploy the app to make visible the latest changes
+			</Alert>
 		{/if}
 	</DrawerContent>
 </Drawer>
@@ -842,7 +873,7 @@ export function openTroubleshootPanel() {
 	</DrawerContent>
 </Drawer>
 
-<Drawer bind:open={$jobsDrawerOpen} size="900px" --zIndex={1003}>
+<Drawer bind:open={$jobsDrawerOpen} size="900px">
 	<DrawerContent
 		noPadding
 		title="Debug Runs"

package/package/components/apps/editor/AppInputs.svelte

@@ -25,7 +25,7 @@ let resourceOnly = true;
 					{/each}
 				</div>
 			</div>
-		{:else if gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee' || gridItem?.data?.type === 'dbexplorercomponent'}
+		{:else if gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee' || gridItem?.data?.type === 'dbexplorercomponent' || gridItem?.data?.type === 'aggridinfinitecomponent' || gridItem?.data?.type === 'aggridinfinitecomponentee'}
 			<div>
 				<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
 				<div class="ml-4 mt-4">