feat(frontend): full height component

frontend/src/lib/components/apps/components/layout/AppContainer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
-	import { initOutput } from '../../editor/appUtils'
+	import { initConfig, initOutput } from '../../editor/appUtils'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { initCss } from '../../utils'
@@ -11,12 +11,15 @@
 	import { writable } from 'svelte/store'
 	import { InputValue } from '../helpers'
 	import GroupWrapper from '../GroupWrapper.svelte'
+	import { components } from '../../editor/component'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 
 	export let id: string
 	export let componentContainerHeight: number
 	export let customCss: ComponentCustomCSS<'containercomponent'> | undefined = undefined
 	export let render: boolean
 	export let groupFields: RichConfigurations | undefined = undefined
+	export let configuration: RichConfigurations
 
 	const { app, focusedGrid, selectedComponent, worldStore, connectingInput } =
 		getContext<AppViewerContext>('AppViewerContext')
@@ -35,10 +38,24 @@
 	}
 
 	let css = initCss($app.css?.containercomponent, customCss)
+
+	let resolvedConfig = initConfig(
+		components['containercomponent'].initialData.configuration,
+		configuration
+	)
 </script>
 
 <InitializeComponent {id} />
 
+{#each Object.keys(components['containercomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
 {#each Object.keys(css ?? {}) as key (key)}
 	<ResolveStyle
 		{id}

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,6 +161,8 @@
 			}
 		}
 	}
+
+	$: maxRow = maxHeight($appStore.grid, window.innerHeight, $breakpoint)
 </script>
 
 <DarkModeObserver on:change={onThemeChange} />
@@ -201,7 +203,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 +212,24 @@
 					allIdsInPath={$allIdsInPath}
 					items={app.grid}
 					let:dataItem
+					let:hidden
 					rowHeight={36}
 					cols={columnConfiguration}
 					gap={[4, 2]}
+					{maxRow}
 				>
 					<!-- 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}
+							{hidden}
+						/>
 					</div>
 				</GridViewer>
 			</div>
@@ -228,6 +238,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,17 @@
 <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,
+		EyeOff,
+		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 +31,7 @@
 	export let hasInlineEditor: boolean = false
 	export let inlineEditorOpened: boolean = false
 	export let errorHandledByComponent: boolean = false
+	export let willNotDisplay: boolean = false
 
 	const dispatch = createEventDispatcher()
 
@@ -115,6 +126,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={component.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,6 +125,7 @@
 					$app.grid = e.detail
 				}}
 				let:dataItem
+				let:hidden
 				rowHeight={36}
 				cols={columnConfiguration}
 				gap={[4, 2]}
@@ -139,6 +140,7 @@
 				>
 					<GridEditorMenu id={dataItem.id}>
 						<Component
+							{hidden}
 							render={true}
 							component={dataItem.data}
 							selected={Boolean($selectedComponent?.includes(dataItem.id))}
@@ -156,6 +158,13 @@
 								expandGriditem($app.grid, dataItem.id, $breakpoint)
 								$app = $app
 							}}
+							on:fillHeight={() => {
+								const gridItem = findGridItem($app, dataItem.id)
+								if (gridItem) {
+									gridItem.data.fullHeight = !gridItem.data.fullHeight
+								}
+								$app = $app
+							}}
 						/>
 					</GridEditorMenu>
 				</ComponentWrapper>

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

@@ -15,6 +15,7 @@
 	export let cols: [number, number][]
 	export let gap = [10, 10]
 	export let throttleUpdate = 100
+	export let maxRow: number
 
 	export let allIdsInPath: string[] | undefined = undefined
 	export let containerWidth: number | undefined = undefined
@@ -81,17 +82,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.data['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
@@ -82,7 +84,7 @@
 			classes ?? '',
 			noPadding ? 'px-0' : 'px-2'
 		)}
-		style="{containerHeight ? `height: ${containerHeight - 2}px;` : ''} {style ?? ''}"
+		style="{containerHeight ? `height: ${containerHeight}px;` : ''} {style ?? ''}"
 	>
 		{#if $mode !== 'preview'}
 			<div
@@ -105,6 +107,7 @@
 					}}
 					selectedIds={$selectedComponent}
 					let:dataItem
+					let:hidden
 					rowHeight={36}
 					cols={columnConfiguration}
 					gap={[4, 2]}
@@ -123,6 +126,7 @@
 					>
 						<GridEditorMenu id={dataItem.id}>
 							<Component
+								{hidden}
 								render={visible}
 								component={dataItem.data}
 								selected={Boolean($selectedComponent?.includes(dataItem.id))}
@@ -146,6 +150,13 @@
 									)
 									$app = $app
 								}}
+								on:fillHeight={() => {
+									const gridItem = findGridItem($app, dataItem.id)
+									if (gridItem) {
+										gridItem.data.fullHeight = !gridItem.data.fullHeight
+									}
+									$app = $app
+								}}
 							/>
 						</GridEditorMenu>
 					</ComponentWrapper>
@@ -156,11 +167,13 @@
 				allIdsInPath={$allIdsInPath}
 				items={$app.subgrids?.[subGridId] ?? []}
 				let:dataItem
+				let:hidden
 				rowHeight={36}
 				cols={columnConfiguration}
 				gap={[4, 2]}
 				parentWidth={$parentWidth - 17}
 				{containerWidth}
+				{maxRow}
 			>
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
@@ -172,6 +185,7 @@
 						component={dataItem.data}
 						selected={Boolean($selectedComponent?.includes(dataItem.id))}
 						locked={isFixed(dataItem)}
+						{hidden}
 					/>
 				</div>
 			</GridViewer>

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

@@ -363,6 +363,7 @@ export function appComponentFromType<T extends keyof typeof components>(
 			numberOfSubgrids: init.numberOfSubgrids,
 			horizontalAlignment: init.horizontalAlignment,
 			verticalAlignment: init.verticalAlignment,
+			fullHeight: init.fullHeight,
 			id,
 			...(extra ?? {})
 		}
@@ -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')
@@ -419,6 +421,8 @@ export function insertNewGridItem(
 
 	let grid = focusedGrid ? app.subgrids[key!] : app.grid
 
+	data.fullHeight = false
+
 	const newItem = createNewGridItem(grid, id, data, columns)
 	grid.push(newItem)
 	return id
@@ -972,3 +976,28 @@ export function collectOneOfFields(fields: AppInputs, app: App) {
 			})
 	)
 }
+
+export function maxHeight(
+	grid: GridItem[],
+	windowHeight: number,
+	breakpoint: EditorBreakpoint = 'lg'
+) {
+	const rowHeight = 36
+	const rowGap = 2
+
+	const totalRowHeight = rowHeight + rowGap
+	let maxRows = Math.floor((windowHeight - rowGap) / 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)
+}