From 3d873ed51c769005981a8d8dfb95faa3ca33bb83 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 19 Jan 2023 14:08:32 +0100
Subject: [PATCH 01/16] fix(frontend): add missing condition to properly select
 first row (#1128)

---
 .../src/lib/components/apps/components/table/AppTable.svelte     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/lib/components/apps/components/table/AppTable.svelte b/frontend/src/lib/components/apps/components/table/AppTable.svelte
index 606962dc41..4d9f54a48e 100644
--- a/frontend/src/lib/components/apps/components/table/AppTable.svelte
+++ b/frontend/src/lib/components/apps/components/table/AppTable.svelte
@@ -65,6 +65,7 @@
 		result.length > 0 &&
 		// We need to wait until the component is mounted so the world is created
 		mounted &&
+		outputs &&
 		toggleRow({ original: result[0] }, 0)
 
 	function setOptions(filteredResult: Array<Record<string, any>>) {

From ee14bed3d93da9120e16c742443d2414f68634da Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 19 Jan 2023 14:34:59 +0100
Subject: [PATCH 02/16] relax nsjail limits

---
 backend/windmill-worker/nsjail/run.bash.config.proto    | 8 ++------
 backend/windmill-worker/nsjail/run.deno.config.proto    | 6 +-----
 backend/windmill-worker/nsjail/run.go.config.proto      | 6 +-----
 backend/windmill-worker/nsjail/run.python3.config.proto | 6 +-----
 4 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/backend/windmill-worker/nsjail/run.bash.config.proto b/backend/windmill-worker/nsjail/run.bash.config.proto
index e93e6b4557..1862ac6b8d 100644
--- a/backend/windmill-worker/nsjail/run.bash.config.proto
+++ b/backend/windmill-worker/nsjail/run.bash.config.proto
@@ -3,12 +3,8 @@ name: "bash run script"
 mode: ONCE
 hostname: "bash"
 log_level: ERROR
-time_limit: 300
 
-rlimit_as: 2048
-rlimit_cpu: 1000
-rlimit_fsize: 1024
-rlimit_nofile: 64
+rlimit_nofile: 10000
 
 cwd: "/tmp"
 
@@ -87,4 +83,4 @@ iface_no_lo: true
 
 {SHARED_MOUNT}
 
-
+envar: "HOME=/tmp"
diff --git a/backend/windmill-worker/nsjail/run.deno.config.proto b/backend/windmill-worker/nsjail/run.deno.config.proto
index 9f106c231f..7ea972d8a7 100644
--- a/backend/windmill-worker/nsjail/run.deno.config.proto
+++ b/backend/windmill-worker/nsjail/run.deno.config.proto
@@ -3,12 +3,8 @@ name: "deno run script"
 mode: ONCE
 hostname: "deno"
 log_level: ERROR
-time_limit: 300
 
-rlimit_as: 16000
-rlimit_cpu: 1000
-rlimit_fsize: 1024
-rlimit_nofile: 64
+rlimit_nofile: 10000
 
 cwd: "/tmp"
 
diff --git a/backend/windmill-worker/nsjail/run.go.config.proto b/backend/windmill-worker/nsjail/run.go.config.proto
index 3af548d18c..116c861b07 100644
--- a/backend/windmill-worker/nsjail/run.go.config.proto
+++ b/backend/windmill-worker/nsjail/run.go.config.proto
@@ -3,12 +3,8 @@ name: "go run script"
 mode: ONCE
 hostname: "go"
 log_level: ERROR
-time_limit: 300
 
-rlimit_as: 2048
-rlimit_cpu: 1000
-rlimit_fsize: 1024
-rlimit_nofile: 64
+rlimit_nofile: 10000
 
 cwd: "/tmp/go"
 
diff --git a/backend/windmill-worker/nsjail/run.python3.config.proto b/backend/windmill-worker/nsjail/run.python3.config.proto
index 5747d3cb3f..80865ac0c4 100644
--- a/backend/windmill-worker/nsjail/run.python3.config.proto
+++ b/backend/windmill-worker/nsjail/run.python3.config.proto
@@ -3,12 +3,8 @@ name: "python run script"
 mode: ONCE
 hostname: "python"
 log_level: ERROR
-time_limit: 300
 
-rlimit_as: 2048
-rlimit_cpu: 1000
-rlimit_fsize: 1024
-rlimit_nofile: 64
+rlimit_nofile: 10000
 
 cwd: "/tmp"
 

From e371fda1ce95bfab090dc115117cb0fb41f80b51 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 19 Jan 2023 14:51:43 +0100
Subject: [PATCH 03/16] relax nsjail limits

---
 backend/windmill-worker/nsjail/run.bash.config.proto    | 3 +++
 backend/windmill-worker/nsjail/run.deno.config.proto    | 3 +++
 backend/windmill-worker/nsjail/run.go.config.proto      | 3 +++
 backend/windmill-worker/nsjail/run.python3.config.proto | 3 +++
 4 files changed, 12 insertions(+)

diff --git a/backend/windmill-worker/nsjail/run.bash.config.proto b/backend/windmill-worker/nsjail/run.bash.config.proto
index 1862ac6b8d..b18a521ee5 100644
--- a/backend/windmill-worker/nsjail/run.bash.config.proto
+++ b/backend/windmill-worker/nsjail/run.bash.config.proto
@@ -4,6 +4,9 @@ mode: ONCE
 hostname: "bash"
 log_level: ERROR
 
+rlimit_as: 4096
+rlimit_cpu: 1000
+rlimit_fsize: 1000
 rlimit_nofile: 10000
 
 cwd: "/tmp"
diff --git a/backend/windmill-worker/nsjail/run.deno.config.proto b/backend/windmill-worker/nsjail/run.deno.config.proto
index 7ea972d8a7..b8a904d773 100644
--- a/backend/windmill-worker/nsjail/run.deno.config.proto
+++ b/backend/windmill-worker/nsjail/run.deno.config.proto
@@ -4,6 +4,9 @@ mode: ONCE
 hostname: "deno"
 log_level: ERROR
 
+rlimit_as: 4096
+rlimit_cpu: 1000
+rlimit_fsize: 1000
 rlimit_nofile: 10000
 
 cwd: "/tmp"
diff --git a/backend/windmill-worker/nsjail/run.go.config.proto b/backend/windmill-worker/nsjail/run.go.config.proto
index 116c861b07..7bc44b6a4c 100644
--- a/backend/windmill-worker/nsjail/run.go.config.proto
+++ b/backend/windmill-worker/nsjail/run.go.config.proto
@@ -4,6 +4,9 @@ mode: ONCE
 hostname: "go"
 log_level: ERROR
 
+rlimit_as: 4096
+rlimit_cpu: 1000
+rlimit_fsize: 1000
 rlimit_nofile: 10000
 
 cwd: "/tmp/go"
diff --git a/backend/windmill-worker/nsjail/run.python3.config.proto b/backend/windmill-worker/nsjail/run.python3.config.proto
index 80865ac0c4..ef4e9a77d8 100644
--- a/backend/windmill-worker/nsjail/run.python3.config.proto
+++ b/backend/windmill-worker/nsjail/run.python3.config.proto
@@ -4,6 +4,9 @@ mode: ONCE
 hostname: "python"
 log_level: ERROR
 
+rlimit_as: 4096
+rlimit_cpu: 1000
+rlimit_fsize: 1000
 rlimit_nofile: 10000
 
 cwd: "/tmp"

From e969af9e44d1b4409064080e8662552ee3e262e8 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 19 Jan 2023 14:52:32 +0100
Subject: [PATCH 04/16] =?UTF-8?q?feat(frontend):=20add=20support=20for=20b?=
 =?UTF-8?q?ackground=20scripts=20+=20add=20FormButtonCo=E2=80=A6=20(#1124)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(frontend): add support for background scripts + add FormButtonComponnet

* feat(frontend): add background script fields

* feat(frontend): Handle deletion + display of results

* feat(frontend): Fix background script ids: Runnable ids needs to be valid js expression, because they are used in the evaluator.

* feat(frontend): add a portal to display modal

* feat(frontend): fix build

* feat(frontend): Add missing props

* feat(frontend): Fix run button + add tooltip + fix icon
---
 frontend/package-lock.json                    |  11 +
 frontend/package.json                         |   3 +-
 .../apps/components/HiddenComponent.svelte    |  28 +++
 .../apps/components/buttons/AppButton.svelte  |   4 +-
 .../apps/components/form/AppFormButton.svelte | 159 +++++++++++++
 .../apps/editor/ComponentEditor.svelte        |   7 +
 .../components/apps/editor/GridEditor.svelte  |  13 ++
 .../apps/editor/SettingsPanel.svelte          |  17 +-
 .../apps/editor/componentsPanel/data.ts       | 208 +++++++++++-------
 .../editor/contextPanel/ContextPanel.svelte   |   2 +
 .../InlineScriptEditor.svelte                 |   5 +-
 .../InlineScriptsPanel.svelte                 |  30 ++-
 .../InlineScriptsPanelList.svelte             |  63 +++++-
 .../settingsPanel/ComponentPanel.svelte       |   2 +-
 .../mainInput/RunnableSelector.svelte         |  29 +--
 frontend/src/lib/components/apps/types.ts     |  41 ++--
 frontend/src/lib/components/apps/utils.ts     |  83 +++++--
 .../ConfirmationModal.svelte                  |   9 +-
 .../UnsavedConfirmationModal.svelte           |   8 +-
 .../lib/components/common/modal/Modal.svelte  |  76 +++++++
 .../(root)/(logged)/apps/add/+page.svelte     |   3 +-
 21 files changed, 644 insertions(+), 157 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/components/HiddenComponent.svelte
 create mode 100644 frontend/src/lib/components/apps/components/form/AppFormButton.svelte
 create mode 100644 frontend/src/lib/components/common/modal/Modal.svelte

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index bf32b04a43..ca3e1b96f2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,6 +24,7 @@
 				"monaco-yaml": "^4.0.2",
 				"svelte-autosize": "^1.0.1",
 				"svelte-chartjs": "^3.1.0",
+				"svelte-portal": "^2.2.0",
 				"svelte-select": "^5.0.2",
 				"vscode-ws-jsonrpc": "^2.0.1"
 			},
@@ -6256,6 +6257,11 @@
 				"svelte": ">=3"
 			}
 		},
+		"node_modules/svelte-portal": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/svelte-portal/-/svelte-portal-2.2.0.tgz",
+			"integrity": "sha512-jhtZWtD6cUE2nMw46dJ5VXWYiqnER+JH+V/BmNBQ5fNP/YdsJCpJi+DemUy9msklqGb0f+wLhJPBtKHLWQvzjg=="
+		},
 		"node_modules/svelte-preprocess": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.0.tgz",
@@ -11548,6 +11554,11 @@
 			"dev": true,
 			"requires": {}
 		},
+		"svelte-portal": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/svelte-portal/-/svelte-portal-2.2.0.tgz",
+			"integrity": "sha512-jhtZWtD6cUE2nMw46dJ5VXWYiqnER+JH+V/BmNBQ5fNP/YdsJCpJi+DemUy9msklqGb0f+wLhJPBtKHLWQvzjg=="
+		},
 		"svelte-preprocess": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index dd5bc7b8f4..910f271e1f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,8 +21,8 @@
 		"@sveltejs/package": "^1.0.1",
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/typography": "^0.5.8",
-		"@types/vscode": "~1.74.0",
 		"@types/node": "^18.11.18",
+		"@types/vscode": "~1.74.0",
 		"@typescript-eslint/eslint-plugin": "^5.46.1",
 		"@typescript-eslint/parser": "^5.48.0",
 		"@windmill-labs/svelvet": "^4.0.20",
@@ -77,6 +77,7 @@
 		"monaco-yaml": "^4.0.2",
 		"svelte-autosize": "^1.0.1",
 		"svelte-chartjs": "^3.1.0",
+		"svelte-portal": "^2.2.0",
 		"svelte-select": "^5.0.2",
 		"vscode-ws-jsonrpc": "^2.0.1"
 	},
diff --git a/frontend/src/lib/components/apps/components/HiddenComponent.svelte b/frontend/src/lib/components/apps/components/HiddenComponent.svelte
new file mode 100644
index 0000000000..ab76911659
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/HiddenComponent.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../inputType'
+	import type { InlineScript } from '../types'
+	import RunnableComponent from './helpers/RunnableComponent.svelte'
+
+	export let id: string
+	export let name: string
+	export let inlineScript: InlineScript | undefined
+	export let fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>
+
+	let result: any = undefined
+
+	export const staticOutputs: string[] = ['result', 'loading']
+</script>
+
+<RunnableComponent
+	{id}
+	bind:fields
+	bind:result
+	runnable={{
+		name,
+		inlineScript,
+		type: 'runnableByName'
+	}}
+	wrapperClass="hidden"
+>
+	<slot />
+</RunnableComponent>
diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 262961aa65..4908997a94 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -86,11 +86,11 @@
 				e?.stopPropagation()
 				window.dispatchEvent(new Event('pointerup'))
 			}}
-			on:click={(e) => {
+			on:click={async (e) => {
 				e?.stopPropagation()
 				e?.preventDefault()
 				ownClick = true
-				runnableComponent?.runComponent()
+				await runnableComponent?.runComponent()
 
 				if (recomputeIds) {
 					recomputeIds.forEach((id) => {
diff --git a/frontend/src/lib/components/apps/components/form/AppFormButton.svelte b/frontend/src/lib/components/apps/components/form/AppFormButton.svelte
new file mode 100644
index 0000000000..30166c49a2
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/form/AppFormButton.svelte
@@ -0,0 +1,159 @@
+<script lang="ts">
+	import { Button, type ButtonType } from '$lib/components/common'
+	import { faUser } from '@fortawesome/free-solid-svg-icons'
+	import { getContext } from 'svelte'
+	import { Icon } from 'svelte-awesome'
+	import type { AppInput } from '../../inputType'
+	import type { Output } from '../../rx'
+	import type { AppEditorContext } from '../../types'
+	import AlignWrapper from '../helpers/AlignWrapper.svelte'
+	import InputValue from '../helpers/InputValue.svelte'
+	import type RunnableComponent from '../helpers/RunnableComponent.svelte'
+	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
+	import Portal from 'svelte-portal'
+	import Modal from '$lib/components/common/modal/Modal.svelte'
+
+	export let id: string
+	export let componentInput: AppInput | undefined
+	export let configuration: Record<string, AppInput>
+	export let recomputeIds: string[] | undefined = undefined
+	export let extraQueryParams: Record<string, any> = {}
+	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
+	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
+
+	export const staticOutputs: string[] = ['loading', 'result']
+
+	const { runnableComponents, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+
+	let labelValue: string = 'Default label'
+	let color: ButtonType.Color
+	let size: ButtonType.Size
+	let runnableComponent: RunnableComponent
+	let disabled: boolean | undefined = undefined
+
+	let isLoading: boolean = false
+	let ownClick: boolean = false
+
+	let errors: Record<string, string> = {}
+	$: errorsMessage = Object.values(errors)
+		.filter((x) => x != '')
+		.join('\n')
+
+	$: noInputs =
+		componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0
+
+	$: outputs = $worldStore?.outputsById[id] as {
+		result: Output<Array<any>>
+		loading: Output<boolean>
+	}
+
+	$: if (outputs?.loading != undefined) {
+		outputs.loading.set(false, true)
+	}
+
+	$: outputs?.loading.subscribe({
+		next: (value) => {
+			isLoading = value
+			if (ownClick && !value) {
+				ownClick = false
+			}
+		}
+	})
+
+	$: loading = isLoading && ownClick
+
+	let open: boolean = false
+</script>
+
+<InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.color} bind:value={color} />
+<InputValue {id} input={configuration.size} bind:value={size} />
+<InputValue
+	row={extraQueryParams['row']}
+	{id}
+	input={configuration.disabled}
+	bind:value={disabled}
+	bind:error={errors.disabled}
+/>
+
+<Portal>
+	<Modal
+		{open}
+		title={labelValue}
+		on:canceled={() => {
+			open = false
+		}}
+		on:confirmed={() => {
+			open = false
+		}}
+	>
+		<RunnableWrapper
+			defaultUserInput
+			noMinH
+			bind:runnableComponent
+			bind:componentInput
+			{id}
+			{extraQueryParams}
+			autoRefresh={false}
+			forceSchemaDisplay={true}
+			runnableClass="!block"
+		>
+			<div class="flex flex-col gap-2 px-4 w-full">
+				<div>
+					{#if noInputs}
+						<div class="text-gray-600 italic text-sm my-4">
+							Run forms are associated with a runnable that has user inputs.
+							<br />
+							Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
+							<strong>
+								User Input
+								<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
+							</strong>
+						</div>
+					{/if}
+				</div>
+				<div class="flex justify-end">
+					<Button
+						{loading}
+						btnClasses="my-1"
+						on:pointerdown={(e) => {
+							e?.stopPropagation()
+							window.dispatchEvent(new Event('pointerup'))
+						}}
+						on:click={async () => {
+							await runnableComponent?.runComponent()
+
+							if (recomputeIds) {
+								recomputeIds.forEach((id) => {
+									$runnableComponents[id]?.()
+								})
+							}
+
+							open = false
+						}}
+						size="xs"
+						color="dark"
+					>
+						Submit
+					</Button>
+				</div>
+			</div>
+		</RunnableWrapper>
+	</Modal>
+</Portal>
+
+<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+	{#if errorsMessage}
+		<div class="text-red-500 text-xs">{errorsMessage}</div>
+	{/if}
+	<Button
+		{disabled}
+		{size}
+		{color}
+		on:click={(e) => {
+			open = true
+		}}
+	>
+		{labelValue}
+	</Button>
+</AlignWrapper>
diff --git a/frontend/src/lib/components/apps/editor/ComponentEditor.svelte b/frontend/src/lib/components/apps/editor/ComponentEditor.svelte
index ee3ed634f8..9ea8e17bf4 100644
--- a/frontend/src/lib/components/apps/editor/ComponentEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentEditor.svelte
@@ -19,6 +19,7 @@
 	import AppTimeseries from '../components/dataDisplay/AppTimeseries.svelte'
 	import AppHtml from '../components/dataDisplay/AppHtml.svelte'
 	import AppSliderInputs from '../components/numberInputs/AppSliderInputs.svelte'
+	import AppFormButton from '../components/form/AppFormButton.svelte'
 	import VegaLiteHtml from '../components/dataDisplay/VegaLiteHtml.svelte'
 
 	export let component: AppComponent
@@ -124,6 +125,12 @@
 				bind:componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
 			/>
+		{:else if component.type === 'formbuttoncomponent'}
+			<AppFormButton
+				{...component}
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
 		{:else if component.type === 'checkboxcomponent'}
 			<CheckboxComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{:else if component.type === 'textinputcomponent'}
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index f6dfab6164..1a46fd32c3 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -8,6 +8,7 @@
 
 	import RecomputeAllComponents from './RecomputeAllComponents.svelte'
 	import type { Policy } from '$lib/gen'
+	import HiddenComponent from '../components/HiddenComponent.svelte'
 
 	export let policy: Policy
 
@@ -176,6 +177,18 @@
 	</div>
 </div>
 
+{#each $app.hiddenInlineScripts as script, index}
+	{#if script}
+		<HiddenComponent
+			id={`bg_${index}`}
+			inlineScript={script.inlineScript}
+			name={script.name}
+			bind:fields={script.fields}
+			bind:staticOutputs={$staticOutputs[`bg_${index}`]}
+		/>
+	{/if}
+{/each}
+
 <style>
 	:global(.svlt-grid-shadow) {
 		/* Back shadow */
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index 08acbe8878..700dbe216b 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import type { AppEditorContext } from '../types'
+	import PanelSection from './settingsPanel/common/PanelSection.svelte'
 	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
+	import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte'
 	import TablePanel from './TablePanel.svelte'
 
-	const { selectedComponent, lazyGrid } = getContext<AppEditorContext>('AppEditorContext')
+	const { selectedComponent, lazyGrid, app } = getContext<AppEditorContext>('AppEditorContext')
 </script>
 
 {#each $lazyGrid as gridItem (gridItem.data.id)}
@@ -14,3 +16,16 @@
 		<TablePanel bind:component={gridItem.data} />
 	{/if}
 {/each}
+
+{#each $app.hiddenInlineScripts as script, index (script.name)}
+	{#if $selectedComponent === `bg_${index}`}
+		<PanelSection title={`Background script inputs`}>
+			<InputsSpecsEditor
+				id={`bg_${index}`}
+				shouldCapitalize={false}
+				bind:inputSpecs={script.fields}
+				userInputEnabled={false}
+			/>
+		</PanelSection>
+	{/if}
+{/each}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts b/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
index 36e449e208..1ab855a043 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
@@ -15,8 +15,8 @@ const inputs: ComponentSet = {
 					type: 'static',
 					value: 'Type...',
 					fieldType: 'text',
-					onlyStatic: true,
-				},
+					onlyStatic: true
+				}
 			},
 			card: false
 		},
@@ -31,8 +31,8 @@ const inputs: ComponentSet = {
 					type: 'static',
 					value: 'Password',
 					fieldType: 'text',
-					onlyStatic: true,
-				},
+					onlyStatic: true
+				}
 			},
 			card: false
 		},
@@ -47,8 +47,8 @@ const inputs: ComponentSet = {
 					type: 'static',
 					value: 'Type...',
 					fieldType: 'text',
-					onlyStatic: true,
-				},
+					onlyStatic: true
+				}
 			},
 			card: false
 		},
@@ -63,14 +63,14 @@ const inputs: ComponentSet = {
 					type: 'static',
 					value: 0,
 					fieldType: 'number',
-					onlyStatic: true,
+					onlyStatic: true
 				},
 				max: {
 					type: 'static',
 					value: 42,
 					fieldType: 'number',
-					onlyStatic: true,
-				},
+					onlyStatic: true
+				}
 			},
 			card: false
 		},
@@ -84,15 +84,15 @@ const inputs: ComponentSet = {
 				minDate: {
 					type: 'static',
 					value: '',
-					fieldType: 'date',
+					fieldType: 'date'
 				},
 				maxDate: {
 					type: 'static',
 					value: '',
-					fieldType: 'date',
+					fieldType: 'date'
 				}
 			},
-			card: false,
+			card: false
 		},
 		{
 			...defaultAlignement,
@@ -104,7 +104,7 @@ const inputs: ComponentSet = {
 				label: {
 					type: 'static',
 					value: 'Label',
-					fieldType: 'text',
+					fieldType: 'text'
 				}
 			},
 			card: false
@@ -148,8 +148,7 @@ const buttons: ComponentSet = {
 				type: 'runnable',
 				fieldType: 'any',
 				fields: {},
-				runnable: undefined,
-
+				runnable: undefined
 			},
 			recomputeIds: undefined,
 			configuration: {
@@ -189,29 +188,64 @@ const buttons: ComponentSet = {
 				type: 'runnable',
 				fieldType: 'any',
 				fields: {},
-				runnable: undefined,
-
+				runnable: undefined
 			},
 			recomputeIds: undefined,
 			configuration: {
 				label: {
 					type: 'static',
 					value: 'Submit',
-					fieldType: 'text',
+					fieldType: 'text'
 				},
 				color: {
 					fieldType: 'select',
 					type: 'static',
 					onlyStatic: true,
 					value: 'dark',
-					optionValuesKey: 'buttonColorOptions',
+					optionValuesKey: 'buttonColorOptions'
 				},
 				size: {
 					fieldType: 'select',
 					type: 'static',
 					value: 'xs',
 					onlyStatic: true,
-					optionValuesKey: 'buttonSizeOptions',
+					optionValuesKey: 'buttonSizeOptions'
+				}
+			},
+
+			card: true
+		},
+		{
+			horizontalAlignment: 'center',
+			verticalAlignment: 'center',
+			id: 'formbuttoncomponent',
+			type: 'formbuttoncomponent',
+			componentInput: {
+				type: 'runnable',
+				fieldType: 'any',
+				fields: {},
+				runnable: undefined
+			},
+			recomputeIds: undefined,
+			configuration: {
+				label: {
+					type: 'static',
+					value: 'Open popup',
+					fieldType: 'text'
+				},
+				color: {
+					fieldType: 'select',
+					type: 'static',
+					onlyStatic: true,
+					value: 'dark',
+					optionValuesKey: 'buttonColorOptions'
+				},
+				size: {
+					fieldType: 'select',
+					type: 'static',
+					value: 'xs',
+					onlyStatic: true,
+					optionValuesKey: 'buttonSizeOptions'
 				}
 			},
 
@@ -235,7 +269,7 @@ const display: ComponentSet = {
 >
 <h1 class="absolute top-4 left-2 text-white">
 	Hello \${ctx.username}
-</h1>`,
+</h1>`
 			},
 			configuration: {},
 			card: false
@@ -253,7 +287,7 @@ const display: ComponentSet = {
 							{ a: 'A', b: 28 },
 							{ a: 'B', b: 55 },
 							{ a: 'C', b: 43 },
-							{ a: 'D', b: 91 },
+							{ a: 'D', b: 91 }
 						]
 					},
 					mark: 'bar',
@@ -269,9 +303,8 @@ const display: ComponentSet = {
 					onlyStatic: true,
 					fieldType: 'boolean',
 					value: false,
-					tooltip: "use the canvas renderer instead of the svg one for more interactive plots"
+					tooltip: 'use the canvas renderer instead of the svg one for more interactive plots'
 				}
-
 			},
 			card: false
 		},
@@ -284,7 +317,7 @@ const display: ComponentSet = {
 			componentInput: {
 				type: 'static',
 				fieldType: 'template',
-				value: 'Hello ${ctx.username}',
+				value: 'Hello ${ctx.username}'
 			},
 			configuration: {
 				style: {
@@ -298,19 +331,18 @@ const display: ComponentSet = {
 					type: 'static',
 					fieldType: 'text',
 					value: '',
-					tooltip: 'CSS rules like "color: blue;"',
+					tooltip: 'CSS rules like "color: blue;"'
 				},
 				copyButton: {
 					type: 'static',
 					value: false,
 					fieldType: 'boolean',
-					onlyStatic: true,
-				},
+					onlyStatic: true
+				}
 			},
 			card: false
 		},
 		{
-
 			id: 'tablecomponent',
 			type: 'tablecomponent',
 			configuration: {
@@ -337,8 +369,7 @@ const display: ComponentSet = {
 						name: 'A briefer cell',
 						age: 84
 					}
-				],
-
+				]
 			},
 			card: true,
 			actionButtons: []
@@ -385,7 +416,6 @@ const display: ComponentSet = {
 					fieldType: 'boolean',
 					value: false
 				}
-
 			},
 			componentInput: {
 				type: 'static',
@@ -409,30 +439,32 @@ const display: ComponentSet = {
 					onlyStatic: true,
 					fieldType: 'boolean',
 					value: false
-				},
+				}
 			},
 			componentInput: {
 				type: 'static',
 				fieldType: 'array',
 				subFieldType: 'object',
-				value: [{
-					label: 'foo',
-					data: [
-						{ x: 25, y: 50 },
-						{ x: 23, y: 23 },
-						{ x: 12, y: 37 }
-					],
-					backgroundColor: 'rgb(255, 12, 137)'
-				},
-				{
-					label: 'foobar',
-					data: [
-						{ x: 32, y: 32 },
-						{ x: 25, y: 42 },
-						{ x: 3, y: 27 }
-					],
-					backgroundColor: 'orange'
-				}]
+				value: [
+					{
+						label: 'foo',
+						data: [
+							{ x: 25, y: 50 },
+							{ x: 23, y: 23 },
+							{ x: 12, y: 37 }
+						],
+						backgroundColor: 'rgb(255, 12, 137)'
+					},
+					{
+						label: 'foobar',
+						data: [
+							{ x: 32, y: 32 },
+							{ x: 25, y: 42 },
+							{ x: 3, y: 27 }
+						],
+						backgroundColor: 'orange'
+					}
+				]
 			},
 			card: true
 		},
@@ -457,40 +489,50 @@ const display: ComponentSet = {
 					onlyStatic: true,
 					fieldType: 'boolean',
 					value: false
-				},
+				}
 			},
 			componentInput: {
 				type: 'static',
 				fieldType: 'array',
 				subFieldType: 'object',
-				value: [{
-					label: 'foo',
-					data: [{
-						x: '2021-11-06 23:39:30',
-						y: 50
-					}, {
-						x: '2021-11-07 01:00:28',
-						y: 60
-					}, {
-						x: '2021-11-07 09:00:28',
-						y: 20
-					}],
-					backgroundColor: 'rgb(255, 12, 137)'
-				},
-				{
-					label: 'foobar',
-					data: [{
-						x: '2021-11-06 23:39:30',
-						y: 20
-					}, {
-						x: '2021-11-07 01:00:28',
-						y: 13
-					}, {
-						x: '2021-11-07 09:00:28',
-						y: 45
-					}],
-					backgroundColor: 'orange'
-				}]
+				value: [
+					{
+						label: 'foo',
+						data: [
+							{
+								x: '2021-11-06 23:39:30',
+								y: 50
+							},
+							{
+								x: '2021-11-07 01:00:28',
+								y: 60
+							},
+							{
+								x: '2021-11-07 09:00:28',
+								y: 20
+							}
+						],
+						backgroundColor: 'rgb(255, 12, 137)'
+					},
+					{
+						label: 'foobar',
+						data: [
+							{
+								x: '2021-11-06 23:39:30',
+								y: 20
+							},
+							{
+								x: '2021-11-07 01:00:28',
+								y: 13
+							},
+							{
+								x: '2021-11-07 09:00:28',
+								y: 45
+							}
+						],
+						backgroundColor: 'orange'
+					}
+				]
 			},
 			card: true
 		},
@@ -500,13 +542,11 @@ const display: ComponentSet = {
 			componentInput: {
 				type: 'static',
 				fieldType: 'object',
-				value: { "foo": 42 },
-
+				value: { foo: 42 }
 			},
 			configuration: {},
 			card: false
-		},
-
+		}
 	]
 }
 
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
index d8fc885a41..ebf67cd6f6 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
@@ -34,6 +34,8 @@
 			return displayData[component?.data.type].name
 		} else if (componentId == 'ctx') {
 			return 'Context'
+		} else if (componentId.startsWith('bg_')) {
+			return 'Background'
 		} else {
 			return 'Table action'
 		}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index 4ff76b3b7b..ec66a841c4 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -82,7 +82,7 @@
 			>
 				Format&nbsp;<Tooltip>Ctrl+S</Tooltip>
 			</Button>
-			{#if id.startsWith('unused-')}
+			{#if id.startsWith('unused-') || id.startsWith('bg_')}
 				<Button
 					size="xs"
 					color="light"
@@ -91,7 +91,8 @@
 					startIcon={{ icon: faTrash }}
 					on:click={() => dispatch('delete')}
 				/>
-			{:else if $runnableComponents[id] != undefined}
+			{/if}
+			{#if $runnableComponents[id] != undefined}
 				<Button
 					loading={runLoading}
 					size="xs"
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index be67ac2715..e9b2710260 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -6,8 +6,9 @@
 	import InlineScriptsPanelList from './InlineScriptsPanelList.svelte'
 	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
 	import InlineScriptEditor from './InlineScriptEditor.svelte'
+	import EmptyInlineScript from './EmptyInlineScript.svelte'
 
-	const { lazyGrid, app } = getContext<AppEditorContext>('AppEditorContext')
+	const { lazyGrid, app, staticOutputs } = getContext<AppEditorContext>('AppEditorContext')
 
 	let selectedScriptComponentId: string | undefined = undefined
 </script>
@@ -51,6 +52,33 @@
 					/>
 				{/if}
 			{/each}
+			{#each $app.hiddenInlineScripts as hiddenInlineScript, index (index)}
+				{#if `bg_${index}` === selectedScriptComponentId}
+					{#if hiddenInlineScript.inlineScript}
+						<InlineScriptEditor
+							id={`bg_${index}`}
+							bind:inlineScript={hiddenInlineScript.inlineScript}
+							bind:name={hiddenInlineScript.name}
+							on:delete={() => {
+								// remove the script from the array at the index
+								$app.hiddenInlineScripts.splice(index, 1)
+								$app.hiddenInlineScripts = [...$app.hiddenInlineScripts]
+
+								delete $staticOutputs[`bg_${index}`]
+								$staticOutputs = $staticOutputs
+							}}
+						/>
+					{:else}
+						<EmptyInlineScript
+							id={`b_${index}`}
+							name={hiddenInlineScript.name}
+							on:new={(e) => {
+								hiddenInlineScript.inlineScript = e.detail
+							}}
+						/>
+					{/if}
+				{/if}
+			{/each}
 		</Pane>
 	</Splitpanes>
 </SplitPanesWrapper>
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
index 43c189fe4a..00a6360c8f 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
-	import { Badge } from '$lib/components/common'
+	import { Badge, Button } from '$lib/components/common'
+	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { classNames } from '$lib/utils'
+	import { faPlus } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import type { AppEditorContext } from '../../types'
+	import { getAllScriptNames } from '../../utils'
 	import PanelSection from '../settingsPanel/common/PanelSection.svelte'
 	import { getAppScripts } from './utils'
 
@@ -11,7 +14,7 @@
 
 	function selectInlineScript(id: string) {
 		selectedScriptComponentId = id
-		if (!id.startsWith('unused-')) {
+		if (!id.startsWith('unused-') || !id.startsWith('bg_')) {
 			$selectedComponent = selectedScriptComponentId
 		}
 	}
@@ -24,6 +27,29 @@
 			selectedScriptComponentId = $selectedComponent
 		}
 	}
+
+	function createBackgroundScript() {
+		let index = 0
+		let newScriptPath = `Background Script ${index}`
+
+		const names = getAllScriptNames($app)
+
+		// Find a name that is not used by any other inline script
+		while (names.includes(newScriptPath)) {
+			newScriptPath = `Background Script ${++index}`
+		}
+
+		if (!$app.hiddenInlineScripts) {
+			$app.hiddenInlineScripts = []
+		}
+
+		$app.hiddenInlineScripts.push({
+			name: newScriptPath,
+			inlineScript: undefined,
+			fields: {}
+		})
+		$app.hiddenInlineScripts = $app.hiddenInlineScripts
+	}
 </script>
 
 <div class="min-h-full flex flex-col gap-4">
@@ -96,4 +122,37 @@
 			{/if}
 		</div>
 	</PanelSection>
+
+	<PanelSection title="Background scripts" smallPadding>
+		<svelte:fragment slot="action">
+			<Button size="xs" color="dark" startIcon={{ icon: faPlus }} on:click={createBackgroundScript}>
+				Add
+			</Button>
+			<Tooltip>
+				Background scripts are triggered upon global refresh or when their input changes. The result
+				of a background script can be shared among many components.
+			</Tooltip>
+		</svelte:fragment>
+		<div class="flex flex-col gap-2 w-full">
+			{#if $app.hiddenInlineScripts?.length > 0}
+				<div class="flex gap-2 flex-col ">
+					{#each $app.hiddenInlineScripts as { name }, index (index)}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<div
+							class="{classNames(
+								'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+								selectedScriptComponentId === `bg_${index}` ? 'bg-blue-100 text-blue-600' : ''
+							)},"
+							on:click={() => selectInlineScript(`bg_${index}`)}
+						>
+							<span class="text-xs truncate">{name}</span>
+							<Badge color="yellow">Background</Badge>
+						</div>
+					{/each}
+				</div>
+			{:else}
+				<div class="text-sm text-gray-500">No items</div>
+			{/if}
+		</div>
+	</PanelSection>
 </div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 9d1b0d91b6..3021bcfccc 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -163,7 +163,7 @@
 		{/if}
 
 		<AlignmentEditor bind:component />
-		{#if component.type === 'buttoncomponent' || component.type === 'formcomponent'}
+		{#if component.type === 'buttoncomponent' || component.type === 'formcomponent' || component.type === 'formbuttoncomponent'}
 			<Recompute bind:recomputeIds={component.recomputeIds} ownId={component.id} />
 		{/if}
 
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
index c623ef3bc4..850370cae5 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
@@ -10,7 +10,7 @@
 	import type { AppEditorContext, GridItem, InlineScript } from '$lib/components/apps/types'
 	import { getContext } from 'svelte'
 	import type { Schema } from '$lib/common'
-	import { loadSchema, schemaToInputsSpec } from '$lib/components/apps/utils'
+	import { getAllScriptNames, loadSchema, schemaToInputsSpec } from '$lib/components/apps/utils'
 	import { emptySchema } from '$lib/utils'
 
 	type Tab = 'hubscripts' | 'workspacescripts' | 'workspaceflows' | 'inlinescripts'
@@ -94,33 +94,10 @@
 		let index = 0
 		let newScriptPath = `Inline Script ${index}`
 
-		const names = $app.grid.reduce((acc, gridItem: GridItem) => {
-			const { componentInput } = gridItem.data
-
-			if (
-				componentInput?.type === 'runnable' &&
-				componentInput?.runnable?.type === 'runnableByName'
-			) {
-				acc.push(componentInput.runnable.name)
-			}
-
-			if (componentInput?.type === 'tablecomponent') {
-				componentInput.actionButtons.forEach((actionButton) => {
-					if (actionButton.componentInput?.type === 'runnable') {
-						if (actionButton.componentInput.runnable?.type === 'runnableByName') {
-							acc.push(actionButton.componentInput.runnable.name)
-						}
-					}
-				})
-			}
-
-			return acc
-		}, [] as string[])
-
-		const unusedNames = $app.unusedInlineScripts.map((x) => x.name)
+		const names = getAllScriptNames($app)
 
 		// Find a name that is not used by any other inline script
-		while (names.includes(newScriptPath) || unusedNames.includes(newScriptPath)) {
+		while (names.includes(newScriptPath)) {
 			newScriptPath = `Inline Script ${++index}`
 		}
 
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index 70c85a8d2e..3e8706ae03 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -34,6 +34,10 @@ export type FormComponent = BaseComponent<'formcomponent'> & {
 	recomputeIds: string[] | undefined
 }
 
+export type FormButtonComponent = BaseComponent<'formbuttoncomponent'> & {
+	recomputeIds: string[] | undefined
+}
+
 export type RunFormComponent = BaseComponent<'runformcomponent'>
 export type BarChartComponent = BaseComponent<'barchartcomponent'>
 export type PieChartComponent = BaseComponent<'piechartcomponent'>
@@ -60,11 +64,14 @@ export type Aligned = {
 export interface BaseAppComponent extends Partial<Aligned> {
 	id: ComponentID
 	componentInput: AppInput | undefined
-	configuration: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput) & {
-		onlyStatic?: boolean,
-		evaluatedValue?: boolean,
-		tooltip?: string
-	}>
+	configuration: Record<
+		string,
+		(StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput) & {
+			onlyStatic?: boolean
+			evaluatedValue?: boolean
+			tooltip?: string
+		}
+	>
 	card: boolean | undefined
 	/**
 	 * If `true` then the wrapper will allow items to flow outside of it's borders.
@@ -98,6 +105,7 @@ export type AppComponent = BaseAppComponent &
 		| CheckboxComponent
 		| RadioComponent
 		| FormComponent
+		| FormButtonComponent
 		| VegaLiteComponent
 	)
 
@@ -132,6 +140,11 @@ export type App = {
 		name: string
 		inlineScript: InlineScript
 	}>
+	hiddenInlineScripts: Array<{
+		name: string
+		inlineScript: InlineScript | undefined
+		fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>
+	}>
 }
 
 export type ConnectingInput = {
@@ -143,21 +156,21 @@ export type ConnectingInput = {
 
 export type AppEditorContext = {
 	worldStore: Writable<World | undefined>
-	staticOutputs: Writable<Record<string, string[]>>,
-	lazyGrid: Writable<GridItem[]>,
-	app: Writable<App>,
-	summary: Writable<string>,
+	staticOutputs: Writable<Record<string, string[]>>
+	lazyGrid: Writable<GridItem[]>
+	app: Writable<App>
+	summary: Writable<string>
 	selectedComponent: Writable<string | undefined>
 	mode: Writable<EditorMode>
 	connectingInput: Writable<ConnectingInput>
 	breakpoint: Writable<EditorBreakpoint>
 	runnableComponents: Writable<Record<string, () => Promise<void>>>
 	staticExporter: Writable<Record<string, () => any>>
-	appPath: string,
-	workspace: string,
-	onchange: (() => void) | undefined,
-	isEditor: boolean,
-	jobs: Writable<{ job: string, component: string }[]>,
+	appPath: string
+	workspace: string
+	onchange: (() => void) | undefined
+	isEditor: boolean
+	jobs: Writable<{ job: string; component: string }[]>
 	noBackend: boolean
 }
 
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index c4052d04f1..72b35ad55d 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -21,11 +21,12 @@ import {
 	ToggleLeft,
 	GripHorizontal,
 	Code2,
-	SlidersHorizontal
+	SlidersHorizontal,
+	PlusSquare
 } from 'lucide-svelte'
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType'
 import type { Output } from './rx'
-import type { App, AppComponent } from './types'
+import type { App, AppComponent, GridItem } from './types'
 
 export async function loadSchema(
 	workspace: string,
@@ -50,7 +51,11 @@ export async function loadSchema(
 		const script = await ScriptService.getHubScriptByPath({
 			path
 		})
-		if (script.schema == undefined || Object.keys(script.schema).length == 0 || typeof script.schema != 'object') {
+		if (
+			script.schema == undefined ||
+			Object.keys(script.schema).length == 0 ||
+			typeof script.schema != 'object'
+		) {
 			script.schema = emptySchema()
 		}
 
@@ -59,14 +64,16 @@ export async function loadSchema(
 	}
 }
 
-export function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput> {
+export function schemaToInputsSpec(
+	schema: Schema,
+	defaultUserInput: boolean
+): Record<string, StaticAppInput> {
 	if (schema?.properties == undefined) {
 		return {}
 	}
 	return Object.keys(schema.properties).reduce((accu, key) => {
 		const property = schema.properties[key]
 
-
 		accu[key] = {
 			type: defaultUserInput && !property.format?.startsWith('resource-') ? 'user' : 'static',
 			value: property.default,
@@ -74,7 +81,6 @@ export function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): R
 			format: property.format
 		}
 
-
 		return accu
 	}, {})
 }
@@ -96,6 +102,10 @@ export const displayData: Record<AppComponent['type'], { name: string; icon: any
 		name: 'Form',
 		icon: FormInput
 	},
+	formbuttoncomponent: {
+		name: 'Modal Form',
+		icon: PlusSquare
+	},
 	piechartcomponent: {
 		name: 'Pie Chart',
 		icon: PieChart
@@ -239,8 +249,11 @@ export function clearResultAppInput(appInput: ResultAppInput): ResultAppInput {
 	return appInput
 }
 
-
-export function toStatic(app: App, staticExporter: Record<string, () => any>, summary: string): { app: App; summary: string } {
+export function toStatic(
+	app: App,
+	staticExporter: Record<string, () => any>,
+	summary: string
+): { app: App; summary: string } {
 	const newApp: App = JSON.parse(JSON.stringify(app))
 	newApp.grid.forEach((x) => {
 		let c: AppComponent = x.data
@@ -251,16 +264,52 @@ export function toStatic(app: App, staticExporter: Record<string, () => any>, su
 	return { app: newApp, summary }
 }
 
-export function buildExtraLib(components: Record<string, Record<string, Output<any>>>, idToExclude: string, hasRows: boolean): string {
-	return Object.entries(components)
-		.filter(([k, v]) => k != idToExclude)
-		.map(([k, v]) => [k, Object.fromEntries(Object.entries(v).map(([k, v]) => [k, v.peak()]))])
-		.map(
-			([k, v]) => `
+export function buildExtraLib(
+	components: Record<string, Record<string, Output<any>>>,
+	idToExclude: string,
+	hasRows: boolean
+): string {
+	return (
+		Object.entries(components)
+			.filter(([k, v]) => k != idToExclude)
+			.map(([k, v]) => [k, Object.fromEntries(Object.entries(v).map(([k, v]) => [k, v.peak()]))])
+			.map(
+				([k, v]) => `
 
 declare const ${k} = ${JSON.stringify(v)};
 
 `
-		)
-		.join('\n') + (hasRows ? 'declare const row: Record<string, any>;' : '')
-}
\ No newline at end of file
+			)
+			.join('\n') + (hasRows ? 'declare const row: Record<string, any>;' : '')
+	)
+}
+
+export function getAllScriptNames(app: App): string[] {
+	const names = app.grid.reduce((acc, gridItem: GridItem) => {
+		const { componentInput } = gridItem.data
+
+		if (
+			componentInput?.type === 'runnable' &&
+			componentInput?.runnable?.type === 'runnableByName'
+		) {
+			acc.push(componentInput.runnable.name)
+		}
+
+		if (componentInput?.type === 'tablecomponent') {
+			componentInput.actionButtons.forEach((actionButton) => {
+				if (actionButton.componentInput?.type === 'runnable') {
+					if (actionButton.componentInput.runnable?.type === 'runnableByName') {
+						acc.push(actionButton.componentInput.runnable.name)
+					}
+				}
+			})
+		}
+
+		return acc
+	}, [] as string[])
+
+	const unusedNames = app.unusedInlineScripts.map((x) => x.name)
+	const backgroundNames = app.hiddenInlineScripts?.map((x) => x.name) ?? []
+
+	return [...names, ...unusedNames, ...backgroundNames]
+}
diff --git a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
index 461ebd61fd..a3c0b0da84 100644
--- a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
@@ -28,12 +28,19 @@
 			}
 		}
 	}
+	function fadeFast(node: HTMLElement) {
+		return fade(node, { duration: 100 })
+	}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
 
 {#if open}
-	<div transition:fade={{ duration: 100 }} class={'relative  z-50'} role="dialog">
+	<div
+		transition:fadeFast|local
+		class={'absolute top-0 bottom-0 left-0 right-0 z-50'}
+		role="dialog"
+	>
 		<div
 			class={classNames(
 				'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
diff --git a/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
index 25827906c0..5694865f18 100644
--- a/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
@@ -48,9 +48,9 @@
 	}}
 >
 	<div class="flex flex-col w-full space-y-4">
-		<span
-			>Are you sure you want to discard change you have made? (A draft has been temporarily and
-			locally saved)</span
-		>
+		<span>
+			Are you sure you want to discard change you have made? (A draft has been temporarily and
+			locally saved)
+		</span>
 	</div>
 </ConfirmationModal>
diff --git a/frontend/src/lib/components/common/modal/Modal.svelte b/frontend/src/lib/components/common/modal/Modal.svelte
new file mode 100644
index 0000000000..484a9901a7
--- /dev/null
+++ b/frontend/src/lib/components/common/modal/Modal.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { classNames } from '$lib/utils'
+	import { createEventDispatcher } from 'svelte'
+	import { fade } from 'svelte/transition'
+	import Button from '../button/Button.svelte'
+	import Badge from '../badge/Badge.svelte'
+
+	export let title: string
+	export let open: boolean = false
+
+	const dispatch = createEventDispatcher()
+
+	function onKeyDown(event: KeyboardEvent) {
+		if (open) {
+			event.stopPropagation()
+			event.preventDefault()
+			switch (event.key) {
+				case 'Enter':
+					dispatch('confirmed')
+					break
+				case 'Escape':
+					dispatch('canceled')
+					break
+			}
+		}
+	}
+	function fadeFast(node: HTMLElement) {
+		return fade(node, { duration: 100 })
+	}
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+{#if open}
+	<div
+		transition:fadeFast|local
+		class={'absolute top-0 bottom-0 left-0 right-0 z-50'}
+		role="dialog"
+	>
+		<div
+			class={classNames(
+				'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
+				open ? 'ease-out duration-300 opacity-100' : 'ease-in duration-200 opacity-0'
+			)}
+		/>
+
+		<div class="fixed inset-0 z-10 overflow-y-auto">
+			<div class="flex min-h-full items-center justify-center p-4">
+				<div
+					class={classNames(
+						'relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
+						open
+							? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
+							: 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+					)}
+				>
+					<div class="flex">
+						<div class="ml-4 text-left flex-1">
+							<h3 class="text-lg font-medium text-gray-900">
+								{title}
+							</h3>
+							<div class="mt-2 text-sm text-gray-500">
+								<slot />
+							</div>
+						</div>
+					</div>
+					<div class="flex items-center space-x-2 flex-row-reverse space-x-reverse mt-4">
+						<Button on:click={() => dispatch('canceled')} color="light" size="sm">
+							<span class="gap-2">Cancel <Badge color="dark-gray">Escape</Badge></span>
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
index 487d7b4cc6..de10a87d91 100644
--- a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
@@ -25,7 +25,8 @@
 	let value: App = {
 		grid: [],
 		fullscreen: false,
-		unusedInlineScripts: []
+		unusedInlineScripts: [],
+		hiddenInlineScripts: []
 	}
 
 	if (nodraft) {

From a78486d7e08f76e22406063288b35e9030974d7a Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 19 Jan 2023 15:14:15 +0100
Subject: [PATCH 05/16] fix(frontend): Make sure that old apps are rendering
 properly (#1132)

---
 .../components/apps/editor/GridEditor.svelte  | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index 1a46fd32c3..eaba61912e 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -177,17 +177,19 @@
 	</div>
 </div>
 
-{#each $app.hiddenInlineScripts as script, index}
-	{#if script}
-		<HiddenComponent
-			id={`bg_${index}`}
-			inlineScript={script.inlineScript}
-			name={script.name}
-			bind:fields={script.fields}
-			bind:staticOutputs={$staticOutputs[`bg_${index}`]}
-		/>
-	{/if}
-{/each}
+{#if $app.hiddenInlineScripts}
+	{#each $app.hiddenInlineScripts as script, index}
+		{#if script}
+			<HiddenComponent
+				id={`bg_${index}`}
+				inlineScript={script.inlineScript}
+				name={script.name}
+				bind:fields={script.fields}
+				bind:staticOutputs={$staticOutputs[`bg_${index}`]}
+			/>
+		{/if}
+	{/each}
+{/if}
 
 <style>
 	:global(.svlt-grid-shadow) {

From d4765dee165dbf5e6c77418b21d0847b392c1017 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 19 Jan 2023 16:22:27 +0100
Subject: [PATCH 06/16] add nodejs npm to heavy image

---
 docker/DockerfileHeavy | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docker/DockerfileHeavy b/docker/DockerfileHeavy
index 9170330d9f..c546b20bec 100644
--- a/docker/DockerfileHeavy
+++ b/docker/DockerfileHeavy
@@ -4,5 +4,5 @@ RUN /usr/local/bin/python3 -m pip install nltk
 RUN mkdir -p /nsjail_data/python && HOME=/nsjail_data/python /usr/local/bin/python3 -m nltk.downloader vader_lexicon
 
 RUN apt-get update \
-    && apt-get install -y tesseract-ocr \
+    && apt-get install -y tesseract-ocr nodejs npm \
     && rm -rf /var/lib/apt/lists/*

From 2ce903d7e779599fc898e113f4a2e55a4896a0e0 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 19 Jan 2023 18:20:24 +0100
Subject: [PATCH 07/16] add more details about signals termination

---
 backend/windmill-worker/src/worker.rs | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/backend/windmill-worker/src/worker.rs b/backend/windmill-worker/src/worker.rs
index 8135a627e5..110d4140de 100644
--- a/backend/windmill-worker/src/worker.rs
+++ b/backend/windmill-worker/src/worker.rs
@@ -12,7 +12,10 @@ use itertools::Itertools;
 use lazy_static::lazy_static;
 use regex::Regex;
 use sqlx::{Pool, Postgres, Transaction};
-use std::{borrow::Borrow, collections::HashMap, io, panic, process::Stdio, time::Duration};
+use std::{
+    borrow::Borrow, collections::HashMap, io, os::unix::process::ExitStatusExt, panic,
+    process::Stdio, time::Duration,
+};
 use tracing::{trace_span, Instrument};
 use uuid::Uuid;
 
@@ -2420,9 +2423,12 @@ async fn handle_child(
             } else if let Some(code) = status.code() {
                 Err(error::Error::ExitStatus(code))
             } else {
-                Err(error::Error::ExecutionErr(
-                    "process terminated by signal".to_string(),
-                ))
+                Err(error::Error::ExecutionErr(format!(
+                    "process terminated by signal: {:#?}, stopped_signal: {:#?}, core_dumped: {}",
+                    status.signal(),
+                    status.stopped_signal(),
+                    status.core_dumped()
+                )))
             }
         }
         Ok(Err(kill_reason)) => Err(Error::ExecutionErr(format!(

From b8155f4d27574cde422765d90987c3c263f34987 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 19 Jan 2023 20:00:01 +0100
Subject: [PATCH 08/16] update npm used in heavy

---
 docker/DockerfileHeavy | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docker/DockerfileHeavy b/docker/DockerfileHeavy
index c546b20bec..404d64215a 100644
--- a/docker/DockerfileHeavy
+++ b/docker/DockerfileHeavy
@@ -3,6 +3,10 @@ FROM ghcr.io/windmill-labs/windmill-ee
 RUN /usr/local/bin/python3 -m pip install nltk
 RUN mkdir -p /nsjail_data/python && HOME=/nsjail_data/python /usr/local/bin/python3 -m nltk.downloader vader_lexicon
 
+RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
+    apt-get install -y nodejs
+RUN curl -fsSL https://npmjs.org/install.sh | bash
+
 RUN apt-get update \
-    && apt-get install -y tesseract-ocr nodejs npm \
+    && apt-get install -y tesseract-ocr \
     && rm -rf /var/lib/apt/lists/*

From f359015d895f1396b5bb188a579688649e736600 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 19 Jan 2023 20:32:08 +0100
Subject: [PATCH 09/16] bump default bash tmp size

---
 backend/windmill-worker/nsjail/run.bash.config.proto | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/windmill-worker/nsjail/run.bash.config.proto b/backend/windmill-worker/nsjail/run.bash.config.proto
index b18a521ee5..9d6723e630 100644
--- a/backend/windmill-worker/nsjail/run.bash.config.proto
+++ b/backend/windmill-worker/nsjail/run.bash.config.proto
@@ -54,7 +54,7 @@ mount {
 	dst: "/tmp"
 	fstype: "tmpfs"
 	rw: true
-    options: "size=500000000"
+    options: "size=800000000"
 }
 
 mount {

From 2456e359083408fcdf72ca957be382f0938cca29 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 19 Jan 2023 21:01:30 +0100
Subject: [PATCH 10/16] install nodejs only on heavy

---
 docker/DockerfileHeavy | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docker/DockerfileHeavy b/docker/DockerfileHeavy
index 404d64215a..7a02470844 100644
--- a/docker/DockerfileHeavy
+++ b/docker/DockerfileHeavy
@@ -5,7 +5,6 @@ RUN mkdir -p /nsjail_data/python && HOME=/nsjail_data/python /usr/local/bin/pyth
 
 RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
     apt-get install -y nodejs
-RUN curl -fsSL https://npmjs.org/install.sh | bash
 
 RUN apt-get update \
     && apt-get install -y tesseract-ocr \

From d1526d9c72285f8b82bcd89e8af663a735990c54 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 20 Jan 2023 11:49:08 +0100
Subject: [PATCH 11/16] fix deno nsjail vmem

---
 backend/windmill-worker/nsjail/run.deno.config.proto | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/windmill-worker/nsjail/run.deno.config.proto b/backend/windmill-worker/nsjail/run.deno.config.proto
index b8a904d773..d9aa074840 100644
--- a/backend/windmill-worker/nsjail/run.deno.config.proto
+++ b/backend/windmill-worker/nsjail/run.deno.config.proto
@@ -4,7 +4,7 @@ mode: ONCE
 hostname: "deno"
 log_level: ERROR
 
-rlimit_as: 4096
+rlimit_as: 16000
 rlimit_cpu: 1000
 rlimit_fsize: 1000
 rlimit_nofile: 10000

From 71a443e3c56d2b8c951de6e3701a411ad1a0ce34 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 20 Jan 2023 11:49:43 +0100
Subject: [PATCH 12/16] fix(frontend): Check if hiddenInlineScripts are
 undefined before iterating over them (#1134)

---
 frontend/src/lib/components/apps/editor/SettingsPanel.svelte    | 2 +-
 .../apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index 700dbe216b..e39b564e07 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -17,7 +17,7 @@
 	{/if}
 {/each}
 
-{#each $app.hiddenInlineScripts as script, index (script.name)}
+{#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
 	{#if $selectedComponent === `bg_${index}`}
 		<PanelSection title={`Background script inputs`}>
 			<InputsSpecsEditor
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index e9b2710260..611abc09a6 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -52,7 +52,7 @@
 					/>
 				{/if}
 			{/each}
-			{#each $app.hiddenInlineScripts as hiddenInlineScript, index (index)}
+			{#each $app?.hiddenInlineScripts ?? [] as hiddenInlineScript, index (index)}
 				{#if `bg_${index}` === selectedScriptComponentId}
 					{#if hiddenInlineScript.inlineScript}
 						<InlineScriptEditor

From aa6de3bb5746b9d99c8e3a52e6a9fff10d97bc6a Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 20 Jan 2023 15:39:37 +0100
Subject: [PATCH 13/16] fix(frontend): Prevent modal from hijacking all
 keypress event (#1136)

---
 frontend/src/lib/components/common/modal/Modal.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/common/modal/Modal.svelte b/frontend/src/lib/components/common/modal/Modal.svelte
index 484a9901a7..f902c65554 100644
--- a/frontend/src/lib/components/common/modal/Modal.svelte
+++ b/frontend/src/lib/components/common/modal/Modal.svelte
@@ -12,13 +12,15 @@
 
 	function onKeyDown(event: KeyboardEvent) {
 		if (open) {
-			event.stopPropagation()
-			event.preventDefault()
 			switch (event.key) {
 				case 'Enter':
+					event.stopPropagation()
+					event.preventDefault()
 					dispatch('confirmed')
 					break
 				case 'Escape':
+					event.stopPropagation()
+					event.preventDefault()
 					dispatch('canceled')
 					break
 			}

From 8f906026b3203702c3b6a30bcac9fb2aca985c29 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 20 Jan 2023 18:31:10 +0100
Subject: [PATCH 14/16] fix(frontend): Add default value for text, number and
 date input + fix issues with number input + add date input in the settings
 panel (#1135)

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>
---
 .../components/dateInputs/AppDateInput.svelte |  7 +++++
 .../helpers/InputDefaultValue.svelte          | 22 +++++++++++++
 .../numberInputs/AppNumberInput.svelte        | 31 ++++++++++++-------
 .../components/textInputs/AppTextInput.svelte |  6 ++++
 .../apps/editor/componentsPanel/data.ts       | 20 ++++++++++++
 .../inputEditor/StaticInputEditor.svelte      |  2 ++
 6 files changed, 77 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/lib/components/apps/components/helpers/InputDefaultValue.svelte

diff --git a/frontend/src/lib/components/apps/components/dateInputs/AppDateInput.svelte b/frontend/src/lib/components/apps/components/dateInputs/AppDateInput.svelte
index dbfba0c3d8..fb7afee03a 100644
--- a/frontend/src/lib/components/apps/components/dateInputs/AppDateInput.svelte
+++ b/frontend/src/lib/components/apps/components/dateInputs/AppDateInput.svelte
@@ -4,6 +4,7 @@
 	import type { Output } from '../../rx'
 	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
+	import InputDefaultValue from '../helpers/InputDefaultValue.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 
 	export let id: string
@@ -17,6 +18,7 @@
 	let labelValue: string = 'Title'
 	let minValue: string = ''
 	let maxValue: string = ''
+	let defaultValue: string | undefined = undefined
 
 	$: outputs = $worldStore?.outputsById[id] as {
 		result: Output<string>
@@ -25,11 +27,16 @@
 	function handleInput() {
 		outputs?.result.set(input.value)
 	}
+
+	$: input && handleInput()
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
 <InputValue {id} input={configuration.minDate} bind:value={minValue} />
 <InputValue {id} input={configuration.maxDate} bind:value={maxValue} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+
+<InputDefaultValue bind:input {defaultValue} />
 
 <AlignWrapper {verticalAlignment}>
 	<input
diff --git a/frontend/src/lib/components/apps/components/helpers/InputDefaultValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputDefaultValue.svelte
new file mode 100644
index 0000000000..6a04b4eada
--- /dev/null
+++ b/frontend/src/lib/components/apps/components/helpers/InputDefaultValue.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	type InputType = string | number | boolean
+	export let input: HTMLInputElement | undefined = undefined
+	export let defaultValue: InputType | undefined = undefined
+
+	function setInputValueToDefaultValue() {
+		if (defaultValue !== undefined && input) {
+			input.value = String(defaultValue)
+		}
+	}
+
+	function clearInputValue() {
+		if (input) {
+			input.value = ''
+		}
+	}
+
+	$: input && defaultValue && setInputValueToDefaultValue()
+	$: input &&
+		(defaultValue === '' || defaultValue === undefined || defaultValue === null) &&
+		clearInputValue()
+</script>
diff --git a/frontend/src/lib/components/apps/components/numberInputs/AppNumberInput.svelte b/frontend/src/lib/components/apps/components/numberInputs/AppNumberInput.svelte
index bf99c94ad5..7f5597b9cc 100644
--- a/frontend/src/lib/components/apps/components/numberInputs/AppNumberInput.svelte
+++ b/frontend/src/lib/components/apps/components/numberInputs/AppNumberInput.svelte
@@ -4,6 +4,7 @@
 	import type { Output } from '../../rx'
 	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
+	import InputDefaultValue from '../helpers/InputDefaultValue.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 
 	export let id: string
@@ -12,31 +13,39 @@
 	export const staticOutputs: string[] = ['result']
 
 	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
-	let value: number
-	let labelValue: string = 'Title'
+	let input: HTMLInputElement
+
+	let defaultValue: number | undefined = undefined
+	let placeholder: string | undefined = undefined
 
 	$: outputs = $worldStore?.outputsById[id] as {
 		result: Output<number | null>
 	}
-	$: if (value || !value) {
-		// Disallow 'e' character in numbers
-		// if(value && value.toString().includes('e')) {
-		// 	value = +value.toString().replaceAll('e', '')
-		// }
+
+	function handleInput() {
+		const value = input?.value
 		const num = isNaN(+value) ? null : +value
 		outputs?.result.set(num)
 	}
+
+	$: input && handleInput()
 </script>
 
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputDefaultValue bind:input {defaultValue} />
 
 <AlignWrapper {verticalAlignment}>
 	<input
-		bind:value
+		bind:this={input}
+		on:input={handleInput}
+		on:focus={(e) => {
+			e?.stopPropagation()
+			window.dispatchEvent(new Event('pointerup'))
+		}}
 		type="number"
 		inputmode="numeric"
 		pattern="\d*"
-		placeholder="Type..."
-		class="h-full"
+		{placeholder}
 	/>
 </AlignWrapper>
diff --git a/frontend/src/lib/components/apps/components/textInputs/AppTextInput.svelte b/frontend/src/lib/components/apps/components/textInputs/AppTextInput.svelte
index e94b170d6a..6b22e2a045 100644
--- a/frontend/src/lib/components/apps/components/textInputs/AppTextInput.svelte
+++ b/frontend/src/lib/components/apps/components/textInputs/AppTextInput.svelte
@@ -4,6 +4,7 @@
 	import type { Output } from '../../rx'
 	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
+	import InputDefaultValue from '../helpers/InputDefaultValue.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 
 	export let id: string
@@ -16,6 +17,7 @@
 	let input: HTMLInputElement
 
 	let placeholder: string | undefined = undefined
+	let defaultValue: string | undefined = undefined
 
 	$: outputs = $worldStore?.outputsById[id] as {
 		result: Output<string>
@@ -24,9 +26,13 @@
 	function handleInput() {
 		outputs?.result.set(input.value)
 	}
+
+	$: input && handleInput()
 </script>
 
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputDefaultValue bind:input {defaultValue} />
 
 <AlignWrapper {verticalAlignment}>
 	<input
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts b/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
index 1ab855a043..e9b60f09a7 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
@@ -16,6 +16,11 @@ const inputs: ComponentSet = {
 					value: 'Type...',
 					fieldType: 'text',
 					onlyStatic: true
+				},
+				defaultValue: {
+					type: 'static',
+					value: undefined,
+					fieldType: 'text'
 				}
 			},
 			card: false
@@ -48,6 +53,11 @@ const inputs: ComponentSet = {
 					value: 'Type...',
 					fieldType: 'text',
 					onlyStatic: true
+				},
+				defaultValue: {
+					type: 'static',
+					value: undefined,
+					fieldType: 'number'
 				}
 			},
 			card: false
@@ -90,6 +100,11 @@ const inputs: ComponentSet = {
 					type: 'static',
 					value: '',
 					fieldType: 'date'
+				},
+				defaultValue: {
+					type: 'static',
+					value: undefined,
+					fieldType: 'date'
 				}
 			},
 			card: false
@@ -105,6 +120,11 @@ const inputs: ComponentSet = {
 					type: 'static',
 					value: 'Label',
 					fieldType: 'text'
+				},
+				defaultValue: {
+					type: 'static',
+					value: undefined,
+					fieldType: 'boolean'
 				}
 			},
 			card: false
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
index 1de6148827..208186811f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
@@ -20,6 +20,8 @@
 		<input type="number" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'textarea'}
 		<textarea bind:value={componentInput.value} />
+	{:else if componentInput.fieldType === 'date'}
+		<input type="date" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'boolean'}
 		<Toggle bind:checked={componentInput.value} />
 	{:else if componentInput.fieldType === 'select'}

From 51a8810aa0a9ab7702df459dd270278d42bd3899 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 20 Jan 2023 19:39:25 +0100
Subject: [PATCH 15/16] feat: add QUEUE_LIMIT_WAIT_RESULT

---
 README.md                        |  3 +++
 backend/windmill-api/src/jobs.rs |  5 +++--
 backend/windmill-api/src/lib.rs  | 13 +++++++++----
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index a8f21b3442..d4d5cbb0ce 100644
--- a/README.md
+++ b/README.md
@@ -305,6 +305,9 @@ upcoming CLI tool.
 | DATABASE_CONNECTIONS      | 50 (Server)/3 (Worker) | The max number of connections in the database connection pool                                                                                                                                      | All                   |
 | SUPERADMIN_SECRET         | None                   | A token that would let the caller act as a virtual superadmin superadmin@windmill.dev                                                                                                              | Server                |
 | TIMEOUT_WAIT_RESULT       | 20                     | The number of seconds to wait before timeout on the 'run_wait_result' endpoint                                                                                                                     | Worker                |
+| QUEUE_LIMIT_WAIT_RESULT   | None                   | The number of max jobs in the queue before rejecting immediately the request in 'run_wait_result' endpoint. Takes precedence on the query arg. If none is specified, there are no limit.           | Worker                |
+
+
 
 
 ## Run a local dev setup
diff --git a/backend/windmill-api/src/jobs.rs b/backend/windmill-api/src/jobs.rs
index 300eb4e786..78892088af 100644
--- a/backend/windmill-api/src/jobs.rs
+++ b/backend/windmill-api/src/jobs.rs
@@ -38,7 +38,7 @@ use crate::{
     db::{UserDB, DB},
     users::{require_owner_of_path, Authed},
     variables::get_workspace_key,
-    BaseUrl, TimeoutWaitResult,
+    BaseUrl, QueueLimitWaitResult, TimeoutWaitResult,
 };
 
 pub fn workspaced_service() -> Router {
@@ -1298,12 +1298,13 @@ pub async fn run_wait_result_job_by_path(
     Extension(user_db): Extension<UserDB>,
     Extension(db): Extension<DB>,
     Extension(timeout): Extension<Arc<TimeoutWaitResult>>,
+    Extension(queue_limit): Extension<Arc<QueueLimitWaitResult>>,
     Path((w_id, script_path)): Path<(String, StripPath)>,
     Query(run_query): Query<RunJobQuery>,
     headers: HeaderMap,
     Json(args): Json<Option<serde_json::Map<String, serde_json::Value>>>,
 ) -> error::JsonResult<serde_json::Value> {
-    check_queue_too_long(db, run_query.queue_limit).await?;
+    check_queue_too_long(db, queue_limit.0.or(run_query.queue_limit)).await?;
     let script_path = script_path.to_path();
     let mut tx = user_db.clone().begin(&authed).await?;
     let job_payload = script_path_to_payload(script_path, &mut tx, &w_id).await?;
diff --git a/backend/windmill-api/src/lib.rs b/backend/windmill-api/src/lib.rs
index c245754cf8..8db6297e78 100644
--- a/backend/windmill-api/src/lib.rs
+++ b/backend/windmill-api/src/lib.rs
@@ -54,6 +54,7 @@ pub struct CookieDomain(Option<String>);
 pub struct CloudHosted(bool);
 pub struct ContentSecurityPolicy(String);
 pub struct TimeoutWaitResult(i32);
+pub struct QueueLimitWaitResult(Option<i64>);
 
 pub use users::delete_expired_items_perdiodically;
 
@@ -117,14 +118,18 @@ pub async fn run_server(
                         .nest("/scripts", scripts::workspaced_service())
                         .nest(
                             "/jobs",
-                            jobs::workspaced_service().layer(Extension(Arc::new(
-                                TimeoutWaitResult(
+                            jobs::workspaced_service()
+                                .layer(Extension(Arc::new(TimeoutWaitResult(
                                     std::env::var("TIMEOUT_WAIT_RESULT")
                                         .ok()
                                         .and_then(|x| x.parse().ok())
                                         .unwrap_or(20),
-                                ),
-                            ))),
+                                ))))
+                                .layer(Extension(Arc::new(QueueLimitWaitResult(
+                                    std::env::var("QUEUE_LIMIT_WAIT_RESULT")
+                                        .ok()
+                                        .and_then(|x| x.parse().ok()),
+                                )))),
                         )
                         .nest(
                             "/users",

From 2143bbdc946f5ac69b3c607856e85d831ecf8395 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 20 Jan 2023 19:52:18 +0100
Subject: [PATCH 16/16] add support for python import shopifyAPI

---
 backend/parsers/windmill-parser-py/src/lib.rs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/backend/parsers/windmill-parser-py/src/lib.rs b/backend/parsers/windmill-parser-py/src/lib.rs
index c0addf1c2a..93336ef3b8 100644
--- a/backend/parsers/windmill-parser-py/src/lib.rs
+++ b/backend/parsers/windmill-parser-py/src/lib.rs
@@ -179,6 +179,7 @@ static PYTHON_IMPORTS_REPLACEMENT: phf::Map<&'static str, &'static str> = phf_ma
     "git" => "GitPython",
     "u" => "requests",
     "f" => "requests",
+    "shopify" => "ShopifyAPI",
     "seleniumwire" => "selenium-wire",
 };