feat(frontend): full height component

frontend/src/lib/components/apps/editor/AppPreview.svelte

@@ -20,7 +20,7 @@
 	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 '$lib/stores'
 	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
@@ -161,13 +161,17 @@
 			}
 		}
 	}
+
+	let appHeight: number = 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 h-full" bind:clientHeight={appHeight}>
 	<div id="app-editor-top-level-drawer" />
 	<div id="app-editor-select" />
 
@@ -201,7 +205,7 @@
 			class={twMerge(
 				'p-2 overflow-visible',
 				app.css?.['app']?.['grid']?.class ?? '',
-				'wm-app-grid  subgrid'
+				'wm-app-grid subgrid'
 			)}
 			bind:clientWidth={$parentWidth}
 		>
@@ -210,16 +214,24 @@
 					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>
@@ -228,6 +240,7 @@
 
 	{#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"

frontend/src/lib/components/apps/editor/ComponentHeader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { classNames } from '$lib/utils'
 	import type { AppViewerContext } from '../types'
-	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 '$lib/components/Popover.svelte'
 	import { Button, Popup } from '$lib/components/common'
@@ -21,6 +21,8 @@
 	export let hasInlineEditor: boolean = false
 	export let inlineEditorOpened: boolean = false
 	export let errorHandledByComponent: boolean = false
+	export let fullHeight: boolean = false
+	//export let willNotDisplay: boolean = false
 
 	const dispatch = createEventDispatcher()
 
@@ -115,6 +117,40 @@
 			<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(

frontend/src/lib/components/apps/editor/GridEditor.svelte

@@ -86,10 +86,10 @@
 			</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>
@@ -125,9 +125,8 @@
 					$app.grid = e.detail
 				}}
 				let:dataItem
-				rowHeight={36}
+				let:hidden
 				cols={columnConfiguration}
-				gap={[4, 2]}
 			>
 				<ComponentWrapper
 					id={dataItem.id}
@@ -139,10 +138,12 @@
 				>
 					<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) {
@@ -156,6 +157,14 @@
 								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>

frontend/src/lib/components/apps/editor/GridViewer.svelte

@@ -1,4 +1,8 @@
 <script lang="ts">
+	import { ROW_GAP_X, ROW_GAP_Y, ROW_HEIGHT } from './appUtils'
+
+	import type { EditorBreakpoint } from '../types'
+
 	import { onMount, createEventDispatcher } from 'svelte'
 
 	import type { FilledItem } from '../svelte-grid/types'
@@ -11,10 +15,12 @@
 	type T = $$Generic
 
 	export let items: FilledItem<T>[]
-	export let rowHeight: number
+	export let rowHeight: number = ROW_HEIGHT
 	export let cols: [number, number][]
-	export let gap = [10, 10]
+	export let gap = [ROW_GAP_X, ROW_GAP_Y]
 	export let throttleUpdate = 100
+	export let maxRow: number
+	export let breakpoint: EditorBreakpoint
 
 	export let allIdsInPath: string[] | undefined = undefined
 	export let containerWidth: number | undefined = undefined
@@ -81,17 +87,23 @@
 			{@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
 					? 'z-index: 1000;'
 					: ''} 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}

frontend/src/lib/components/apps/editor/SubGridEditor.svelte

@@ -6,7 +6,7 @@
 	import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils'
 	import Grid from '../svelte-grid/Grid.svelte'
 	import type { AppEditorContext, AppViewerContext, GridItem } from '../types'
-	import { expandGriditem, findGridItem, selectId } from './appUtils'
+	import { expandGriditem, findGridItem, maxHeight, selectId } from './appUtils'
 	import Component from './component/Component.svelte'
 	import ComponentWrapper from './component/ComponentWrapper.svelte'
 	import GridViewer from './GridViewer.svelte'
@@ -66,6 +66,8 @@
 	}
 
 	let container: HTMLElement | undefined = undefined
+
+	$: maxRow = maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $breakpoint)
 </script>
 
 <div
@@ -105,9 +107,8 @@
 					}}
 					selectedIds={$selectedComponent}
 					let:dataItem
-					rowHeight={36}
+					let:hidden
 					cols={columnConfiguration}
-					gap={[4, 2]}
 					scroller={container}
 					parentWidth={$parentWidth - 17}
 					{containerWidth}
@@ -123,6 +124,8 @@
 					>
 						<GridEditorMenu id={dataItem.id}>
 							<Component
+								{hidden}
+								fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
 								render={visible}
 								component={dataItem.data}
 								selected={Boolean($selectedComponent?.includes(dataItem.id))}
@@ -146,6 +149,15 @@
 									)
 									$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>
@@ -156,22 +168,25 @@
 				allIdsInPath={$allIdsInPath}
 				items={$app.subgrids?.[subGridId] ?? []}
 				let:dataItem
-				rowHeight={36}
+				let:hidden
 				cols={columnConfiguration}
-				gap={[4, 2]}
+				breakpoint={$breakpoint}
 				parentWidth={$parentWidth - 17}
 				{containerWidth}
+				{maxRow}
 			>
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
 					on:pointerdown|stopPropagation={(e) => selectComponent(e, dataItem.id)}
 					class={classNames('h-full w-full center-center', 'top-0')}
 				>
 					<Component
+						fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
 						render={visible}
 						component={dataItem.data}
 						selected={Boolean($selectedComponent?.includes(dataItem.id))}
 						locked={isFixed(dataItem)}
+						{hidden}
 					/>
 				</div>
 			</GridViewer>

frontend/src/lib/components/apps/editor/appUtils.ts

@@ -246,7 +246,8 @@ export function createNewGridItem(
 	const newComponent = {
 		fixed: false,
 		x: 0,
-		y: 0
+		y: 0,
+		fullHeight: false
 	}
 
 	let newData: AppComponent = JSON.parse(JSON.stringify(data))
@@ -378,6 +379,7 @@ export function insertNewGridItem(
 	const id = keepId ?? getNextGridItemId(app)
 
 	const data = builddata(id)
+
 	if (data.type == 'aggridcomponentee' && !get(enterpriseLicense)) {
 		sendUserToast('AgGrid Enterprise Edition require Windmill Enterprise Edition', true)
 		throw Error('AgGrid Enterprise Edition require Windmill Enterprise Edition')
@@ -972,3 +974,29 @@ export function collectOneOfFields(fields: AppInputs, app: App) {
 			})
 	)
 }
+
+export const ROW_HEIGHT = 36
+export const ROW_GAP_Y = 2
+export const ROW_GAP_X = 4
+
+export function maxHeight(
+	grid: GridItem[],
+	windowHeight: number,
+	breakpoint: EditorBreakpoint = 'lg'
+) {
+	const totalRowHeight = ROW_HEIGHT + ROW_GAP_Y
+	let maxRows = Math.floor((windowHeight - ROW_GAP_Y) / totalRowHeight)
+
+	if (!grid.length) {
+		return maxRows
+	}
+
+	const breakpointKey = breakpoint === 'sm' ? 3 : 12
+	const maxRowPerGrid = grid.reduce((max, item) => {
+		const y = item[breakpointKey].y
+		const h = item[breakpointKey].h
+		return Math.max(max, y + h)
+	}, 0)
+
+	return Math.max(maxRowPerGrid, maxRows)
+}

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -80,6 +80,8 @@
 	export let selected: boolean
 	export let locked: boolean = false
 	export let render: boolean
+	export let hidden: boolean
+	export let fullHeight: boolean
 
 	const { mode, app, hoverStore, connectingInput } =
 		getContext<AppViewerContext>('AppViewerContext')
@@ -115,7 +117,9 @@
 		}
 	}}
 	on:mouseout|stopPropagation={mouseOut}
-	class="h-full flex flex-col w-full component {initializing ? 'overflow-hidden h-0' : ''}"
+	class="h-full flex flex-col w-full component {initializing
+		? 'overflow-hidden h-0'
+		: ''} {hidden && $mode === 'preview' ? 'hidden' : ''} "
 >
 	{#if $mode !== 'preview'}
 		<ComponentHeader
@@ -129,9 +133,11 @@
 			hover={$hoverStore === component.id}
 			{component}
 			{selected}
+			{fullHeight}
 			connecting={$connectingInput.opened}
 			on:lock
 			on:expand
+			on:fillHeight
 			{locked}
 			{inlineEditorOpened}
 			hasInlineEditor={component.type === 'textcomponent' &&