Merge branch 'main' into rf/strip2

backend/windmill-common/src/flows.rs

@@ -11,7 +11,9 @@ use std::{collections::HashMap, time::Duration};
 use serde::{self, Deserialize, Serialize};
 
 use crate::{
-    more_serde::{default_false, default_id, default_true, is_default},
+    more_serde::{
+        default_empty_string, default_false, default_id, default_null, default_true, is_default,
+    },
     scripts::{Schema, ScriptHash, ScriptLang},
 };
 
@@ -172,8 +174,14 @@ impl FlowModule {
     rename_all(serialize = "lowercase", deserialize = "lowercase")
 )]
 pub enum InputTransform {
-    Static { value: serde_json::Value },
-    Javascript { expr: String },
+    Static {
+        #[serde(default = "default_null")]
+        value: serde_json::Value,
+    },
+    Javascript {
+        #[serde(default = "default_empty_string")]
+        expr: String,
+    },
 }
 
 #[derive(Serialize, Deserialize, Debug, Clone)]

backend/windmill-common/src/more_serde.rs

@@ -18,6 +18,14 @@ pub fn default_false() -> bool {
     false
 }
 
+pub fn default_null() -> serde_json::Value {
+    serde_json::Value::Null
+}
+
+pub fn default_empty_string() -> String {
+    String::new()
+}
+
 pub fn default_id() -> String {
     rd_string(6)
 }

frontend/src/lib/components/apps/components/table/AppTable.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, onMount } from 'svelte'
 	import type { Output } from '../../rx'
 	import type { AppEditorContext, BaseAppComponent, ButtonComponent } from '../../types'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -31,7 +31,7 @@
 
 	$: setSearch(searchValue)
 
-	function setSearch(srch) {
+	function setSearch(srch: string) {
 		outputs?.search?.set(srch)
 	}
 
@@ -46,7 +46,7 @@
 	const { worldStore, staticOutputs: staticOutputsStore } =
 		getContext<AppEditorContext>('AppEditorContext')
 
-	let selectedRowIndex = 0
+	let selectedRowIndex = -1
 
 	function toggleRow(row: Record<string, any>, rowIndex: number) {
 		if (selectedRowIndex !== rowIndex) {
@@ -55,6 +55,18 @@
 		}
 	}
 
+	let mounted = false
+	onMount(() => {
+		mounted = true
+	})
+
+	$: selectedRowIndex === -1 &&
+		Array.isArray(result) &&
+		result.length > 0 &&
+		// We need to wait until the component is mounted so the world is created
+		mounted &&
+		toggleRow({ original: result[0] }, 0)
+
 	function setOptions(filteredResult: Array<Record<string, any>>) {
 		if (!Array.isArray(result)) {
 			return

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount, setContext } from 'svelte'
-
+	import { fade } from 'svelte/transition'
+	import { cubicOut } from 'svelte/easing'
 	import { writable, type Writable } from 'svelte/store'
 	import { buildWorld, type World } from '../rx'
 	import type {
@@ -11,9 +12,10 @@
 		EditorMode
 	} from '../types'
 	import GridEditor from './GridEditor.svelte'
-
 	import { classNames } from '$lib/utils'
 	import type { Policy } from '$lib/gen'
+	import Button from '../../common/button/Button.svelte'
+	import { Unlock } from 'lucide-svelte'
 
 	export let app: App
 	export let appPath: string
@@ -24,6 +26,7 @@
 	export let isEditor: boolean
 	export let context: Record<string, any>
 	export let noBackend: boolean = false
+	export let isLocked = false
 
 	const appStore = writable<App>(app)
 	const worldStore = writable<World | undefined>(undefined)
@@ -67,12 +70,29 @@
 
 	$: mounted && ($worldStore = buildWorld($staticOutputs, undefined, context))
 	$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full '
+	$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : ''
 </script>
 
-<div class="h-full max-h-[calc(100%-41px)] overflow-auto w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto">
-	{#if $appStore.grid}
-		<div class={classNames('mx-auto pb-4', width)}>
-			<GridEditor {policy} />
+<div class="relative">
+	<div class="{$$props.class} {lockedClasses} h-full max-h-[calc(100%-41px)] overflow-auto 
+	w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto">
+		{#if $appStore.grid}
+			<div class={classNames('mx-auto pb-4', width)}>
+				<GridEditor {policy} />
+			</div>
+		{/if}
+	</div>
+	{#if isLocked}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div
+			transition:fade|local={{ duration: 200, easing: cubicOut }}
+			on:click={() => isLocked = false}
+			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"
+		>
+			<Button on:click={() => isLocked = false}>
+				Unlock preview
+				<Unlock size={18} class="ml-1" strokeWidth={2.5} />
+			</Button>
 		</div>
 	{/if}
 </div>