windmill-components 1.309.7 → 1.339.2

package/package/components/apps/editor/AppPreview.svelte

@@ -9,13 +9,13 @@ import GridViewer from './GridViewer.svelte';
 import Component from './component/Component.svelte';
 import { twMerge } from 'tailwind-merge';
 import { columnConfiguration } from '../gridUtils';
-import { HiddenComponent } from '../components';
 import { deepEqual } from 'fast-equals';
-import { dfs } from './appUtils';
+import { dfs, maxHeight } from './appUtils';
 import { BG_PREFIX, migrateApp } from '../utils';
 import { workspaceStore, enterpriseLicense } from '../../../stores';
 import DarkModeObserver from '../../DarkModeObserver.svelte';
 import { getTheme } from './componentsPanel/themeUtils';
+import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
 export let app;
 export let appPath = '';
 export let breakpoint = writable('lg');
@@ -133,13 +133,15 @@ function addOrRemoveCss(isPremium, cssString) {
         }
     }
 }
+let appHeight = 0;
+$: maxRow = maxHeight($appStore.grid, appHeight, $breakpoint);
 </script>
 
 <DarkModeObserver on:change={onThemeChange} />
 
 <svelte:window on:hashchange={hashchange} on:resize={resizeWindow} />
 
-<div class="relative h-full">
+<div class="relative min-h-screen h-full" bind:clientHeight={appHeight}>
 	<div id="app-editor-top-level-drawer" />
 	<div id="app-editor-select" />
 
@@ -173,7 +175,7 @@ function addOrRemoveCss(isPremium, cssString) {
 			class={twMerge(
 				'p-2 overflow-visible',
 				app.css?.['app']?.['grid']?.class ?? '',
-				'wm-app-grid  subgrid'
+				'wm-app-grid subgrid'
 			)}
 			bind:clientWidth={$parentWidth}
 		>
@@ -182,16 +184,24 @@ function addOrRemoveCss(isPremium, cssString) {
 					allIdsInPath={$allIdsInPath}
 					items={app.grid}
 					let:dataItem
-					rowHeight={36}
+					let:hidden
 					cols={columnConfiguration}
-					gap={[4, 2]}
+					{maxRow}
+					breakpoint={$breakpoint}
 				>
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
 						class={'h-full w-full center-center'}
 						on:pointerdown={() => ($selectedComponent = [dataItem.id])}
 					>
-						<Component render={true} component={dataItem.data} selected={false} locked={true} />
+						<Component
+							render={true}
+							component={dataItem.data}
+							selected={false}
+							locked={true}
+							fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+							{hidden}
+						/>
 					</div>
 				</GridViewer>
 			</div>
@@ -200,6 +210,7 @@ function addOrRemoveCss(isPremium, cssString) {
 
 	{#if isLocked}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			on:click={() => (isLocked = false)}
 			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"

package/package/components/apps/editor/ComponentHeader.svelte

@@ -1,5 +1,5 @@
 <script>import { classNames } from '../../../utils';
-import { Anchor, Bug, Expand, Move, Network, Pen, Plug2 } from 'lucide-svelte';
+import { Anchor, ArrowDownFromLine, Bug, Expand, Move, Network, Pen, Plug2 } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import Popover from '../../Popover.svelte';
 import { Button, Popup } from '../../common';
@@ -16,6 +16,8 @@ export let connecting = false;
 export let hasInlineEditor = false;
 export let inlineEditorOpened = false;
 export let errorHandledByComponent = false;
+export let fullHeight = false;
+//export let willNotDisplay: boolean = false
 const dispatch = createEventDispatcher();
 const { errorByComponent, openDebugRun, connectingInput } = getContext('AppViewerContext');
 </script>
@@ -107,6 +109,40 @@ const { errorByComponent, openDebugRun, connectingInput } = getContext('AppViewe
 			<DecisionTreeDebug id={component.id} nodes={component.nodes ?? []} />
 		{/if}
 
+		<!-- {#if willNotDisplay}
+			<Popover>
+				<svelte:fragment slot="text">
+					This component won't render, because an other component above it is set to fill the
+					height.
+				</svelte:fragment>
+				<div
+					title="Fill height"
+					class={classNames(
+						'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
+						'bg-red-100 text-red-600 border-red-500 hover:bg-red-200 hover:text-red-800'
+					)}
+				>
+					<EyeOff aria-label="Expand position" size={14} />
+				</div>
+			</Popover>
+		{/if} -->
+
+		<button
+			title="Fill height"
+			class={classNames(
+				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
+				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+			)}
+			on:click={() => dispatch('fillHeight')}
+			on:pointerdown|stopPropagation
+		>
+			<ArrowDownFromLine
+				aria-label="Expand position"
+				size={14}
+				class={fullHeight ? 'text-orange-500' : ''}
+			/>
+		</button>
+
 		<button
 			title="Expand"
 			class={classNames(

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

@@ -10,12 +10,14 @@ declare const __propDef: {
         hasInlineEditor?: boolean | undefined;
         inlineEditorOpened?: boolean | undefined;
         errorHandledByComponent?: boolean | undefined;
+        fullHeight?: boolean | undefined;
     };
     events: {
         mousedown: MouseEvent;
         pointerdown: PointerEvent;
         mouseover: CustomEvent<any>;
         triggerInlineEditor: CustomEvent<any>;
+        fillHeight: CustomEvent<any>;
         expand: CustomEvent<any>;
         lock: CustomEvent<any>;
     } & {

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

@@ -67,10 +67,10 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
 			</div>
 			<div>
 				{policy.on_behalf_of ? `Author ${policy.on_behalf_of_email}` : ''}
-				<Tooltip
-					>The scripts will be run on behalf of the author and a tight policy ensure security about
-					the possible inputs of the runnables.</Tooltip
-				>
+				<Tooltip>
+					The scripts will be run on behalf of the author and a tight policy ensure security about
+					the possible inputs of the runnables.
+				</Tooltip>
 			</div>
 		</div>
 	</div>
@@ -106,9 +106,8 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
 					$app.grid = e.detail
 				}}
 				let:dataItem
-				rowHeight={36}
+				let:hidden
 				cols={columnConfiguration}
-				gap={[4, 2]}
 			>
 				<ComponentWrapper
 					id={dataItem.id}
@@ -120,10 +119,12 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
 				>
 					<GridEditorMenu id={dataItem.id}>
 						<Component
+							{hidden}
 							render={true}
 							component={dataItem.data}
 							selected={Boolean($selectedComponent?.includes(dataItem.id))}
 							locked={isFixed(dataItem)}
+							fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
 							on:lock={() => {
 								const gridItem = findGridItem($app, dataItem.id)
 								if (gridItem) {
@@ -137,6 +138,14 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
 								expandGriditem($app.grid, dataItem.id, $breakpoint)
 								$app = $app
 							}}
+							on:fillHeight={() => {
+								const gridItem = findGridItem($app, dataItem.id)
+								const b = $breakpoint === 'sm' ? 3 : 12
+								if (gridItem?.[b]) {
+									gridItem[b].fullHeight = !gridItem[b].fullHeight
+								}
+								$app = $app
+							}}
 						/>
 					</GridEditorMenu>
 				</ComponentWrapper>

package/package/components/apps/editor/GridEditorMenu.svelte

@@ -1,64 +1,135 @@
+<script context="module">import { writable } from 'svelte/store';
+// Using a Svelte store for global state management
+const openedContextMenus = writable(new Set());
+</script>
+
 <script>import { getModifierKey } from '../../../utils';
 import { Copy, Paintbrush2, Scissors, Trash } from 'lucide-svelte';
-import ContextMenu from '../../ContextMenu.svelte';
 import ComponentCallbacks from './component/ComponentCallbacks.svelte';
 import { getContext } from 'svelte';
 import DeleteComponent from './settingsPanel/DeleteComponent.svelte';
-import { findComponentSettings } from './appUtils';
 import { secondaryMenuLeft } from './settingsPanel/secondaryMenu';
-import StylePanel from './settingsPanel/StylePanel.svelte';
+import { clickOutside } from '../../../utils';
+import Portal from 'svelte-portal';
+import { twMerge } from 'tailwind-merge';
+let contextMenuVisible = false;
+let menuX = 0;
+let menuY = 0;
+function handleRightClick(event) {
+    event.preventDefault();
+    contextMenuVisible = true;
+    menuX = event.clientX;
+    menuY = event.clientY;
+    openedContextMenus.update((menus) => {
+        menus.forEach((menu) => menu.id !== id && menu.close());
+        menus.clear();
+        menus.add({ id, close: () => (contextMenuVisible = false) });
+        return menus;
+    });
+}
+function closeContextMenu() {
+    contextMenuVisible = false;
+    openedContextMenus.update((menus) => {
+        menus.clear();
+        return menus;
+    });
+}
+function handleClickOutside(event) {
+    if (contextMenuVisible) {
+        closeContextMenu();
+    }
+}
 export let id;
 let componentCallbacks = undefined;
-const { selectedComponent, app } = getContext('AppViewerContext');
-const { movingcomponents } = getContext('AppEditorContext');
+const { selectedComponent } = getContext('AppViewerContext');
+const { movingcomponents, stylePanel } = getContext('AppEditorContext');
 let deleteComponent = undefined;
-$: componentSettings = $selectedComponent?.map((sc) => findComponentSettings($app, sc));
+const menuItems = [
+    {
+        label: 'Cut',
+        onClick: () => {
+            componentCallbacks?.handleCut(new KeyboardEvent('keydown'));
+        },
+        icon: Scissors,
+        shortcut: `${getModifierKey()}X`,
+        disabled: $movingcomponents?.includes($selectedComponent?.[0] ?? '')
+    },
+    {
+        label: 'Copy',
+        onClick: () => {
+            componentCallbacks?.handleCopy(new KeyboardEvent('keydown'));
+        },
+        icon: Copy,
+        shortcut: `${getModifierKey()}C`
+    },
+    {
+        label: 'Show style panel',
+        onClick: () => {
+            secondaryMenuLeft?.toggle(stylePanel(), { type: 'style' });
+        },
+        icon: Paintbrush2,
+        disabled: $secondaryMenuLeft.isOpen
+    },
+    {
+        label: 'Delete',
+        onClick: () => {
+            deleteComponent?.removeGridElement();
+        },
+        icon: Trash,
+        shortcut: `Del`,
+        color: 'red'
+    }
+];
 </script>
 
 <ComponentCallbacks bind:this={componentCallbacks} />
-<ContextMenu
-	contextMenu={{
-		menuItems: [
-			{
-				label: 'Cut',
-				onClick: () => {
-					componentCallbacks?.handleCut(new KeyboardEvent('keydown'))
-				},
-				icon: Scissors,
-				shortcut: `${getModifierKey()}X`,
-				disabled: $movingcomponents?.includes($selectedComponent?.[0] ?? '')
-			},
-			{
-				label: 'Copy',
-				onClick: () => {
-					componentCallbacks?.handleCopy(new KeyboardEvent('keydown'))
-				},
-				icon: Copy,
-				shortcut: `${getModifierKey()}C`
-			},
-			{
-				label: 'Show style panel',
-				onClick: () => {
-					secondaryMenuLeft?.toggle(StylePanel, {})
-				},
-				icon: Paintbrush2,
-				disabled: $secondaryMenuLeft.isOpen
-			},
+<DeleteComponent bind:this={deleteComponent} />
 
-			{
-				label: 'Delete',
-				onClick: () => {
-					deleteComponent?.removeGridElement()
-				},
-				icon: Trash,
-				shortcut: `Del`,
-				color: 'red'
-			}
-		]
-	}}
-	{id}
->
+<svelte:window on:click={handleClickOutside} />
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div on:click={closeContextMenu} on:contextmenu={handleRightClick} class="h-full w-full">
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<slot />
-</ContextMenu>
 
-<DeleteComponent {componentSettings} bind:this={deleteComponent} />
+	{#if contextMenuVisible}
+		<Portal>
+			<div style="position: fixed; top: {menuY}px; left: {menuX}px; z-index:6000;">
+				<div class="rounded-md bg-surface border shadow-md divide-y w-64">
+					<div class="p-1" use:clickOutside={false}>
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						{#each menuItems as item}
+							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<button
+								class={twMerge(
+									'flex items-center p-2 hover:bg-surface-hover cursor-pointer transition-all rounded-md  w-full',
+									item.color === 'red' && 'text-red-500',
+									item.color === 'green' && 'text-green-500',
+									item.color === 'blue' && 'text-blue-500',
+									item.disabled && 'opacity-50 cursor-not-allowed'
+								)}
+								on:click={() => {
+									item.onClick()
+									closeContextMenu()
+								}}
+								disabled={item.disabled}
+							>
+								<!-- svelte-ignore missing-declaration -->
+								<svelte:component this={item.icon} class="w-4 h-4" />
+
+								<span class="ml-2 text-xs">{item.label}</span>
+								{#if item.shortcut}
+									<span class="ml-auto text-xs text-gray-400">
+										{item.shortcut}
+									</span>
+								{/if}
+							</button>
+						{/each}
+					</div>
+				</div>
+			</div>
+		</Portal>
+	{/if}
+</div>

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

@@ -1,13 +1,16 @@
-<script>import { onMount, createEventDispatcher } from 'svelte';
+<script>import { ROW_GAP_X, ROW_GAP_Y, ROW_HEIGHT } from './appUtils';
+import { onMount, createEventDispatcher } from 'svelte';
 import { getColumn, throttle } from '../svelte-grid/utils/other';
 import { getContainerHeight } from '../svelte-grid/utils/container';
 import { specifyUndefinedColumns } from '../svelte-grid/utils/item';
 const dispatch = createEventDispatcher();
 export let items;
-export let rowHeight;
+export let rowHeight = ROW_HEIGHT;
 export let cols;
-export let gap = [10, 10];
+export let gap = [ROW_GAP_X, ROW_GAP_Y];
 export let throttleUpdate = 100;
+export let maxRow;
+export let breakpoint;
 export let allIdsInPath = undefined;
 export let containerWidth = undefined;
 export let parentWidth = undefined;
@@ -60,9 +63,15 @@ onMount(() => {
 			{@const width =
 				Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx -
 				gapX * 2}
-			{@const height = (item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
+			{@const height =
+				(item?.[breakpoint === 'sm' ? 3 : 12]?.fullHeight
+					? maxRow - item[getComputedCols].y
+					: item[getComputedCols] && item[getComputedCols].h) *
+					yPerPx -
+				gapY * 2}
 			{@const top = (item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
 			{@const left = (item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
+
 			<div
 				class="svlt-grid-item"
 				style="width: {width}px; height:{height}px; {onTop
@@ -70,7 +79,7 @@ onMount(() => {
 					: ''} top: {top}px; left: {left}px;"
 			>
 				{#if item[getComputedCols]}
-					<slot dataItem={item} item={item[getComputedCols]} />
+					<slot dataItem={item} item={item[getComputedCols]} hidden={false} />
 				{/if}
 			</div>
 		{/each}

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

@@ -1,12 +1,15 @@
 import { SvelteComponent } from "svelte";
+import type { EditorBreakpoint } from '../types';
 import type { FilledItem } from '../svelte-grid/types';
 declare class __sveltets_Render<T> {
     props(): {
         items: FilledItem<T>[];
-        rowHeight: number;
+        rowHeight?: number | undefined;
         cols: [number, number][];
         gap?: number[] | undefined;
         throttleUpdate?: number | undefined;
+        maxRow: number;
+        breakpoint: EditorBreakpoint;
         allIdsInPath?: string[] | undefined;
         containerWidth?: number | undefined;
         parentWidth?: number | undefined;
@@ -21,6 +24,7 @@ declare class __sveltets_Render<T> {
         default: {
             dataItem: FilledItem<T>;
             item: Required<import("../svelte-grid/types").ItemLayout>;
+            hidden: boolean;
         };
     };
 }

package/package/components/apps/editor/RecomputeAllComponents.svelte

@@ -47,6 +47,7 @@ function setInter(inter) {
     interval = inter;
     onClick(!inter);
 }
+let refreshing = [];
 function refresh() {
     let isFirstLoad = false;
     if (!firstLoad) {
@@ -56,14 +57,27 @@ function refresh() {
     }
     loading = true;
     console.log('refresh all');
+    refreshing = [];
     const promises = Object.keys($runnableComponents)
         .flatMap((id) => {
         if (!$runnableComponents?.[id]?.autoRefresh &&
             (!isFirstLoad || !$runnableComponents?.[id]?.refreshOnStart)) {
             return;
         }
-        console.log('refresh start', id);
-        return $runnableComponents?.[id]?.cb?.map((f) => f().then(() => console.log('refreshed', id)));
+        let cb = $runnableComponents?.[id]?.cb;
+        if (cb) {
+            console.log('refresh start', id);
+            refreshing.push(id);
+            return cb.map((f) => f()
+                .then(() => {
+                console.log('refreshed', id);
+                refreshing = refreshing.filter((x) => x !== id);
+            })
+                .catch((e) => {
+                console.error('refresh error', id);
+                refreshing = refreshing.filter((x) => x !== id);
+            }));
+        }
     })
         .filter(Boolean);
     Promise.all(promises).finally(() => {
@@ -113,7 +127,7 @@ let items = [
 		btnClasses="!rounded-r-none text-tertiary !text-2xs {timeout ? '!border !border-blue-500' : ''}"
 		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval
 			? `every ${interval / 1000} seconds`
-			: 'once'}"
+			: 'once'} {refreshing.length > 0 ? `(live: ${refreshing.join(', ')}))` : ''}"
 	>
 		<RefreshCw class={loading ? 'animate-spin' : ''} size={14} /> &nbsp;{componentNumber}
 	</Button>

package/package/components/apps/editor/RunnableJobPanel.svelte

@@ -33,12 +33,14 @@ function updateSelectedJob() {
         }
     }
 }
+let logDrawerOpen = false;
+let resultDrawerOpen = false;
 </script>
 
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job={testJob} />
 
-{#if $runnableJobEditorPanel.focused && $selectedComponentInEditor}
-	{@const frontendJob = $runnableJobEditorPanel?.frontendJobs[$selectedComponentInEditor]}
+{#if ($runnableJobEditorPanel.focused && $selectedComponentInEditor) || logDrawerOpen || resultDrawerOpen}
+	{@const frontendJob = $runnableJobEditorPanel?.frontendJobs[$selectedComponentInEditor ?? '']}
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		class="absolute z-[100] top-0 right-0 border-t h-full"
@@ -53,6 +55,7 @@ function updateSelectedJob() {
 					</div>
 				{:else}
 					<LogViewer
+						bind:drawerOpen={logDrawerOpen}
 						small
 						jobId={testJob?.id}
 						duration={testJob?.['duration_ms']}
@@ -65,12 +68,13 @@ function updateSelectedJob() {
 			</Pane>
 			<Pane size={frontendJob ? 70 : 50} minSize={10} class="text-sm text-tertiary">
 				{#if frontendJob}
-					<pre class="overflow-x-auto break-words relative h-full px-2"
-						><DisplayResult result={frontendJob} /></pre
+					<pre class="overflow-x-auto break-words relative h-full px-2 pt-2"
+						><DisplayResult bind:drawerOpen={resultDrawerOpen} result={frontendJob} /></pre
 					>
 				{:else if testJob != undefined && 'result' in testJob && testJob.result != undefined}
-					<pre class="overflow-x-auto break-words relative h-full px-2"
+					<pre class="overflow-x-auto break-words relative h-full px-2 pt-2"
 						><DisplayResult
+							bind:drawerOpen={resultDrawerOpen}
 							workspaceId={testJob?.workspace_id}
 							jobId={testJob?.id}
 							result={testJob.result}

package/package/components/apps/editor/SettingsPanel.svelte

@@ -28,7 +28,9 @@ function findTableActionSettings(app, id) {
         }
         else if (x?.data?.type === 'aggridcomponent' ||
             x?.data?.type === 'aggridcomponentee' ||
-            x?.data?.type === 'dbexplorercomponent') {
+            x?.data?.type === 'dbexplorercomponent' ||
+            x?.data?.type === 'aggridinfinitecomponent' ||
+            x?.data?.type === 'aggridinfinitecomponentee') {
             if (x?.data?.actions) {
                 const tableAction = x.data.actions.find((x) => x.id === id);
                 if (tableAction) {
@@ -85,7 +87,9 @@ const dispatch = createEventDispatcher();
 					if (
 						(parent.data.type === 'aggridcomponent' ||
 							parent.data.type === 'aggridcomponentee' ||
-							parent.data.type === 'dbexplorercomponent') &&
+							parent.data.type === 'dbexplorercomponent' ||
+							parent.data.type === 'aggridinfinitecomponent' ||
+							parent.data.type === 'aggridinfinitecomponentee') &&
 						Array.isArray(parent.data.actions)
 					) {
 						parent.data.actions = parent.data.actions.filter(