windmill-components 1.352.9 → 1.362.0

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

@@ -3,7 +3,7 @@ import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
 import { Button } from '../../../common';
 import { twMerge } from 'tailwind-merge';
-import { initConfig, initOutput } from '../../editor/appUtils';
+import { initConfig, initOutput, maxHeight, ROW_GAP_Y, ROW_HEIGHT } from '../../editor/appUtils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import Portal from 'svelte-portal';
 import { clickOutside } from '../../../../utils';
@@ -22,7 +22,7 @@ export let noWFull = false;
 export let render;
 export let onOpenRecomputeIds = undefined;
 export let onCloseRecomputeIds = undefined;
-const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl, runnableComponents } = getContext('AppViewerContext');
+const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl, runnableComponents, breakpoint } = getContext('AppViewerContext');
 //used so that we can count number of outputs setup for first refresh
 const outputs = initOutput($worldStore, id, {
     open: false
@@ -53,6 +53,13 @@ $componentControl[id] = {
         disposable?.closeDrawer();
     }
 };
+let wrapperHeight = 0;
+let headerHeight = 0;
+$: containerHeight = Math.min(
+// 8px * 2 of padding
+maxHeight($app.subgrids?.[`${id}-0`] ?? [], 0, $breakpoint) * (ROW_HEIGHT + ROW_GAP_Y) + 16, 
+// 32px (2rem) of top and bottom margin
+wrapperHeight - headerHeight - 64);
 </script>
 
 <InitializeComponent {id} />
@@ -111,7 +118,6 @@ $componentControl[id] = {
 		</AlignWrapper>
 	</div>
 {/if}
-
 <Portal target="#app-editor-top-level-drawer">
 	<Disposable
 		{id}
@@ -136,6 +142,7 @@ $componentControl[id] = {
 				open ? ' bg-black bg-opacity-60' : 'h-0 overflow-hidden invisible'
 			)}
 			style="z-index: {zIndex}"
+			bind:clientHeight={wrapperHeight}
 		>
 			<div
 				style={css?.popup?.style}
@@ -147,7 +154,10 @@ $componentControl[id] = {
 					}
 				}}
 			>
-				<div class="px-4 py-2 border-b flex justify-between items-center">
+				<div
+					class="px-4 py-2 border-b flex justify-between items-center"
+					bind:clientHeight={headerHeight}
+				>
 					<div>{resolvedConfig.modalTitle}</div>
 					<div class="w-8">
 						<button
@@ -160,8 +170,9 @@ $componentControl[id] = {
 						</button>
 					</div>
 				</div>
+
 				<div
-					class="wm-modal"
+					class={twMerge('wm-modal h-full', 'overflow-y-auto')}
 					on:pointerdown={(e) => {
 						e?.stopPropagation()
 						if (!$connectingInput.opened) {
@@ -177,7 +188,7 @@ $componentControl[id] = {
 						<SubGridEditor
 							visible={open && render}
 							{id}
-							noPadding
+							{containerHeight}
 							subGridId={`${id}-0`}
 							on:focus={() => {
 								if (!$connectingInput.opened) {

package/package/components/apps/editor/AppDeploymentHistory.svelte

@@ -3,10 +3,9 @@ import { AppService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { sendUserToast } from '../../../toast';
 import DeploymentHistory from './DeploymentHistory.svelte';
-let appPath = undefined;
+export let appPath = undefined;
 let historyBrowserDrawerOpen = false;
-export function open(appPath) {
-    appPath = appPath;
+export function open() {
     historyBrowserDrawerOpen = true;
 }
 async function updateApp(app) {

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

@@ -1,7 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        open?: ((appPath: string) => void) | undefined;
+        appPath?: string | undefined;
+        open?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -12,6 +13,6 @@ export type AppDeploymentHistoryProps = typeof __propDef.props;
 export type AppDeploymentHistoryEvents = typeof __propDef.events;
 export type AppDeploymentHistorySlots = typeof __propDef.slots;
 export default class AppDeploymentHistory extends SvelteComponent<AppDeploymentHistoryProps, AppDeploymentHistoryEvents, AppDeploymentHistorySlots> {
-    get open(): (appPath: string) => void;
+    get open(): () => void;
 }
 export {};

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

@@ -33,6 +33,7 @@ import DarkModeObserver from '../../DarkModeObserver.svelte';
 import { getTheme } from './componentsPanel/themeUtils';
 import StylePanel from './settingsPanel/StylePanel.svelte';
 import RunnableJobPanel from './RunnableJobPanel.svelte';
+import { goto, replaceState } from '$app/navigation';
 export let app;
 export let path;
 export let policy;
@@ -103,7 +104,8 @@ setContext('AppViewerContext', {
     darkMode,
     cssEditorOpen,
     previewTheme,
-    debuggingComponents: writable({})
+    debuggingComponents: writable({}),
+    replaceStateFn: (path) => replaceState(path, $page.state)
 });
 let scale = writable(100);
 const componentActive = writable(false);
@@ -243,7 +245,10 @@ else if (!$connectingInput.opened && toggled) {
 }
 // Animation logic for cssInput
 $: animateCssInput($cssEditorOpen);
-$: $cssEditorOpen && secondaryMenuLeft?.open(StylePanel, {});
+$: $cssEditorOpen &&
+    secondaryMenuLeft?.open(StylePanel, {
+        type: 'style'
+    });
 function animateCssInput(cssEditorOpen) {
     if (cssEditorOpen && !cssToggled) {
         cssToggled = true;
@@ -420,6 +425,8 @@ let runnableJobEnterTimeout = undefined;
 						isEditor
 						{context}
 						noBackend={false}
+						replaceStateFn={(path) => replaceState(path, $page.state)}
+						gotoFn={(path, opt) => goto(path, opt)}
 					/>
 				</div>
 			</SplitPanesWrapper>

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

@@ -45,6 +45,7 @@ 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';
+import Summary from '../../Summary.svelte';
 async function hash(message) {
     try {
         const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -997,7 +998,11 @@ export function openTroubleshootPanel() {
 										{/if}
 										{#if job?.args}
 											<div class="p-2">
-												<JobArgs args={job?.args} />
+												<JobArgs
+													id={job.id}
+													workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
+													args={job?.args}
+												/>
 											</div>
 										{/if}
 										{#if job?.raw_code}
@@ -1120,15 +1125,7 @@ export function openTroubleshootPanel() {
 	class="border-b flex flex-row justify-between py-1 gap-2 gap-y-2 px-2 items-center overflow-y-visible overflow-x-auto"
 >
 	<div class="flex flex-row gap-2 items-center">
-		<div class="min-w-64 w-64">
-			<input
-				type="text"
-				placeholder="App summary"
-				class="text-sm w-full font-semibold"
-				bind:value={$summary}
-				on:keydown|stopPropagation
-			/>
-		</div>
+		<Summary bind:value={$summary} />
 		<div class="flex gap-2">
 			<UndoRedo
 				undoProps={{ disabled: $history?.index === 0 }}

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

@@ -27,6 +27,8 @@ export let context;
 export let noBackend = false;
 export let isLocked = false;
 export let hideRefreshBar = false;
+export let replaceStateFn = (path) => window.history.replaceState(null, '', path);
+export let gotoFn = (path, opt) => window.history.pushState(null, '', path);
 migrateApp(app);
 const appStore = writable(app);
 const selectedComponent = writable(undefined);
@@ -81,7 +83,9 @@ setContext('AppViewerContext', {
     darkMode,
     cssEditorOpen: writable(false),
     previewTheme: writable(undefined),
-    debuggingComponents: writable({})
+    debuggingComponents: writable({}),
+    replaceStateFn,
+    gotoFn
 });
 let previousSelectedIds = undefined;
 $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
@@ -128,8 +132,13 @@ function addOrRemoveCss(isPremium, cssString) {
             link.innerHTML = cssString;
             head.appendChild(link);
         }
-        else if (existingElement && cssString) {
-            existingElement.innerHTML = cssString;
+        else if (existingElement) {
+            if (cssString) {
+                existingElement.innerHTML = cssString;
+            }
+            else {
+                existingElement.innerHTML = '';
+            }
         }
     }
 }

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

@@ -16,6 +16,8 @@ declare const __propDef: {
         noBackend?: boolean | undefined;
         isLocked?: boolean | undefined;
         hideRefreshBar?: boolean | undefined;
+        replaceStateFn?: ((path: string) => void) | undefined;
+        gotoFn?: ((path: string, opt?: Record<string, any> | undefined) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/editor/DecisionTreeDebug.svelte

@@ -9,88 +9,112 @@ export let id;
 const { componentControl, debuggingComponents, worldStore } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 let currentNodeId = $worldStore.outputsById[id]?.currentNodeId?.peak() ?? 'a';
-$worldStore.outputsById[id]?.currentNodeId?.subscribe({
-    id: id,
-    next: (value) => {
-        currentNodeId = value;
+function subscribeToCurrentNode(id) {
+    return $worldStore.outputsById[id]?.currentNodeId?.subscribe({
+        id: `id-${id}-${currentNodeId}`,
+        next: (value) => {
+            currentNodeId = value;
+        }
+    }, currentNodeId);
+}
+let subscription = subscribeToCurrentNode(id);
+function onDebugNode(debuggedNodeIndex) {
+    if (debuggedNodeIndex === undefined) {
+        return;
+    }
+    if (debuggedNodeIndex !== undefined && nodes[debuggedNodeIndex]?.id === undefined) {
+        currentNodeId = nodes[0]?.id ?? '';
+        $componentControl?.[id]?.setTab?.(0);
+        $debuggingComponents = Object.fromEntries(Object.entries($debuggingComponents).filter(([key]) => key !== id));
+    }
+}
+$: onDebugNode($debuggingComponents[id]);
+let renderCount = 0;
+let lastNodes = nodes;
+function onNodesChange(newNodes) {
+    if (JSON.stringify(newNodes) !== JSON.stringify(lastNodes)) {
+        lastNodes = newNodes;
+        if (subscription) {
+            subscription?.();
+        }
+        subscription = subscribeToCurrentNode(id);
+        renderCount++;
     }
-}, currentNodeId);
-$: if (nodes[$debuggingComponents[id] ?? 0]?.id === undefined) {
-    currentNodeId = '';
-    $componentControl?.[id]?.setTab?.(0);
-    $debuggingComponents = Object.fromEntries(Object.entries($debuggingComponents).filter(([key]) => key !== id));
 }
+$: onNodesChange(nodes);
 </script>
 
-<button
-	title={'Debug tabs'}
-	class={classNames(
-		'text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
-		isDebugging($debuggingComponents, id)
-			? 'bg-red-100 text-red-600 border-red-500 hover:bg-red-200 hover:text-red-800'
-			: 'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-	)}
-	on:click={() => dispatch('triggerInlineEditor')}
-	on:pointerdown|stopPropagation
->
-	<ButtonDropdown hasPadding={false}>
-		<svelte:fragment slot="buttonReplacement">
-			<div class="px-1">
-				{#if isDebugging($debuggingComponents, id)}
-					<div class="flex flex-row items-center gap-2">
-						{`Debugging node ${nodes[$debuggingComponents[id] ?? 0]?.id}`}
-						<button
-							on:click={() => {
-								$componentControl?.[id]?.setTab?.(0)
+{#key renderCount}
+	<button
+		title={'Debug tabs'}
+		class={classNames(
+			'text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
+			isDebugging($debuggingComponents, id)
+				? 'bg-red-100 text-red-600 border-red-500 hover:bg-red-200 hover:text-red-800'
+				: 'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+		)}
+		on:click={() => dispatch('triggerInlineEditor')}
+		on:pointerdown|stopPropagation
+	>
+		<ButtonDropdown hasPadding={false}>
+			<svelte:fragment slot="buttonReplacement">
+				<div class="px-1">
+					{#if isDebugging($debuggingComponents, id)}
+						<div class="flex flex-row items-center gap-2">
+							{`Debugging node ${nodes[$debuggingComponents[id] ?? 0]?.id}`}
+							<button
+								on:click={() => {
+									$componentControl?.[id]?.setTab?.(0)
+
+									$debuggingComponents = Object.fromEntries(
+										Object.entries($debuggingComponents).filter(([key]) => key !== id)
+									)
+								}}
+							>
+								<X size={14} />
+							</button>
+						</div>
+					{:else}
+						{`Debug nodes (current node: ${currentNodeId})`}
+					{/if}
+				</div>
+			</svelte:fragment>
+			<svelte:fragment slot="items">
+				{#each nodes ?? [] as node, index}
+					<MenuItem
+						on:click={() => {
+							$componentControl?.[id]?.setTab?.(index)
 
-								$debuggingComponents = Object.fromEntries(
-									Object.entries($debuggingComponents).filter(([key]) => key !== id)
-								)
-							}}
+							$debuggingComponents[id] = index
+						}}
+					>
+						<div
+							class={classNames(
+								'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+							)}
 						>
-							<X size={14} />
-						</button>
-					</div>
-				{:else}
-					{`Debug nodes (current node: ${currentNodeId})`}
-				{/if}
-			</div>
-		</svelte:fragment>
-		<svelte:fragment slot="items">
-			{#each nodes ?? [] as node, index}
+							{`Debug node ${node.label}`}
+						</div>
+					</MenuItem>
+				{/each}
 				<MenuItem
 					on:click={() => {
-						$componentControl?.[id]?.setTab?.(index)
+						$componentControl?.[id]?.setTab?.(0)
 
-						$debuggingComponents[id] = index
+						$debuggingComponents = Object.fromEntries(
+							Object.entries($debuggingComponents).filter(([key]) => key !== id)
+						)
 					}}
 				>
 					<div
 						class={classNames(
-							'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+							'!text-red-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
 						)}
 					>
-						{`Debug node ${node.label}`}
+						{`Reset debug mode`}
 					</div>
 				</MenuItem>
-			{/each}
-			<MenuItem
-				on:click={() => {
-					$componentControl?.[id]?.setTab?.(0)
-
-					$debuggingComponents = Object.fromEntries(
-						Object.entries($debuggingComponents).filter(([key]) => key !== id)
-					)
-				}}
-			>
-				<div
-					class={classNames(
-						'!text-red-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
-					)}
-				>
-					{`Reset debug mode`}
-				</div>
-			</MenuItem>
-		</svelte:fragment>
-	</ButtonDropdown>
-</button>
+			</svelte:fragment>
+		</ButtonDropdown>
+	</button>
+{/key}

package/package/components/apps/editor/DeploymentHistory.svelte

@@ -17,11 +17,9 @@ let deploymentMsgUpdateMode = false;
 let deploymentMsgUpdate = undefined;
 $: selectedVersion !== undefined && loadValue(selectedVersion.version);
 async function loadVersions() {
-    console.log('loading versions');
     if (appPath === undefined) {
         return;
     }
-    console.log('loading versions');
     loading = true;
     versions = await AppService.getAppHistoryByPath({
         workspace: $workspaceStore,

package/package/components/apps/editor/appUtils.d.ts

@@ -77,4 +77,5 @@ export declare const ROW_HEIGHT = 36;
 export declare const ROW_GAP_Y = 2;
 export declare const ROW_GAP_X = 4;
 export declare function maxHeight(grid: GridItem[], windowHeight: number, breakpoint?: EditorBreakpoint): number;
+export declare function isTableAction(id: string, app: App): boolean;
 export {};

package/package/components/apps/editor/appUtils.js

@@ -707,3 +707,20 @@ export function maxHeight(grid, windowHeight, breakpoint = 'lg') {
     }, 0);
     return Math.max(maxRowPerGrid, maxRows);
 }
+export function isTableAction(id, app) {
+    const [tableId, actionId] = id.split('_');
+    if (!tableId || !actionId) {
+        return false;
+    }
+    const table = findGridItem(app, tableId);
+    if (!table ||
+        (table.data.type !== 'tablecomponent' &&
+            table.data.type !== 'aggridcomponent' &&
+            table.data.type !== 'aggridcomponentee' &&
+            table.data.type !== 'dbexplorercomponent' &&
+            table.data.type !== 'aggridinfinitecomponent' &&
+            table.data.type !== 'aggridinfinitecomponentee')) {
+        return false;
+    }
+    return true;
+}

package/package/components/apps/editor/component/Component.svelte

@@ -71,6 +71,8 @@ import AppPdf from '../../components/display/AppPdf.svelte';
 import AppCurrencyInput from '../../components/inputs/currency/AppCurrencyInput.svelte';
 import AppSliderInputs from '../../components/inputs/AppSliderInputs.svelte';
 import AppNumberInput from '../../components/inputs/AppNumberInput.svelte';
+import AppNavbar from '../../components/display/AppNavbar.svelte';
+import AppDateSelect from '../../components/inputs/AppDateSelect.svelte';
 export let component;
 export let selected;
 export let locked = false;
@@ -90,6 +92,11 @@ function mouseOut() {
     outTimeout && clearTimeout(outTimeout);
     outTimeout = setTimeout(() => {
         if ($hoverStore !== undefined) {
+            // In order to avoid flickering when hovering over table actions,
+            // we leave the actions to manage the hover state
+            if ($hoverStore.startsWith(`${component.id}_`)) {
+                return;
+            }
             $hoverStore = undefined;
         }
     }, 50);
@@ -812,6 +819,22 @@ function mouseOut() {
 				verticalAlignment={component.verticalAlignment}
 				{render}
 			/>
+		{:else if component.type === 'navbarcomponent'}
+			<AppNavbar
+				id={component.id}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				navbarItems={component.navbarItems}
+				{render}
+			/>
+		{:else if component.type === 'dateselectcomponent'}
+			<AppDateSelect
+				id={component.id}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				verticalAlignment={component.verticalAlignment}
+				{render}
+			/>
 		{/if}
 	</div>
 </div>