From f87b722a21aa33020d18ae9fe36b2e86f676b501 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 10 Mar 2023 23:27:55 +0100
Subject: [PATCH 1/9] apps improvements

---
 .../apps/editor/AppEditorHeader.svelte        | 29 +++++++++++--------
 .../editor/componentsPanel/CssProperty.svelte | 16 ++++++++--
 .../InlineScriptEditor.svelte                 |  7 ++++-
 .../apps/editor/settingsPanel/GridPane.svelte |  2 +-
 .../apps/editor/settingsPanel/GridTab.svelte  |  2 +-
 .../inputEditor/IconSelectInput.svelte        |  8 ++++-
 .../inputEditor/StaticInputEditor.svelte      |  7 ++++-
 .../mainInput/InlineScriptList.svelte         |  1 +
 .../lib/components/common/table/AppRow.svelte |  3 +-
 frontend/src/lib/utils.ts                     |  2 +-
 .../(logged)/apps/get/[...path]/+page.svelte  | 14 +++++++--
 .../(logged)/flows/get/[...path]/+page.svelte | 22 +++++++++-----
 .../(logged)/flows/run/[...path]/+page.svelte | 18 ++++++++++--
 .../(root)/(logged)/run/[...run]/+page.svelte |  2 +-
 .../scripts/get/[...hash]/+page.svelte        | 11 ++++---
 .../scripts/run/[...hash]/+page.svelte        | 24 ++++++++++-----
 16 files changed, 123 insertions(+), 45 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index ca6279d0ca..5ca287ef8e 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -220,18 +220,23 @@
 			return
 		}
 		loading.save = true
-		await computeTriggerables()
-		await AppService.updateApp({
-			workspace: $workspaceStore!,
-			path: $page.params.path,
-			requestBody: {
-				value: $app!,
-				summary: $summary,
-				policy
-			}
-		})
-		loading.save = false
-		sendUserToast('App saved')
+		try {
+			await computeTriggerables()
+			await AppService.updateApp({
+				workspace: $workspaceStore!,
+				path: $page.params.path,
+				requestBody: {
+					value: $app!,
+					summary: $summary,
+					policy
+				}
+			})
+			sendUserToast('App saved')
+			loading.save = false
+		} catch (e) {
+			loading.save = false
+			throw e
+		}
 	}
 
 	let selectedJobId: string | undefined = undefined
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
index 9c268bcc00..b7f772156a 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
@@ -23,7 +23,13 @@
 			<label class="block pb-2">
 				<div class="text-xs font-medium pb-0.5"> Style </div>
 				<div class="relative">
-					<input type="text" class="!pr-7" bind:value={value.style} on:focus />
+					<input
+						on:keydown|stopPropagation
+						type="text"
+						class="!pr-7"
+						bind:value={value.style}
+						on:focus
+					/>
 					{#if value?.style}
 						<button
 							transition:fade|local={{ duration: 100 }}
@@ -41,7 +47,13 @@
 			<label class="block">
 				<div class="text-xs font-medium pb-0.5"> Tailwind classes </div>
 				<div class="relative">
-					<input type="text" class="!pr-7" bind:value={value.class} on:focus />
+					<input
+						on:keydown|stopPropagation
+						type="text"
+						class="!pr-7"
+						bind:value={value.class}
+						on:focus
+					/>
 					{#if value?.class}
 						<button
 							transition:fade|local={{ duration: 100 }}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index db3e1f2b6c..f801e2b018 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -82,7 +82,12 @@
 <div class="h-full flex flex-col gap-1">
 	<div class="flex justify-between w-full gap-2 px-2 pt-1 flex-row items-center">
 		{#if name !== undefined}
-			<input bind:value={name} placeholder="Inline script name" class="!text-xs !rounded-xs" />
+			<input
+				on:keydown|stopPropagation
+				bind:value={name}
+				placeholder="Inline script name"
+				class="!text-xs !rounded-xs"
+			/>
 		{/if}
 		<div class="flex w-full flex-row gap-2 items-center justify-end">
 			{#if validCode}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
index 79b306eba1..d40828e238 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
@@ -56,7 +56,7 @@
 	<div class="w-full flex gap-2 flex-col mt-2">
 		{#each panes as value, index (index)}
 			<div class="w-full flex flex-row gap-2 items-center relative">
-				<input type="number" bind:value />
+				<input on:keydown|stopPropagation type="number" bind:value />
 
 				<div class="absolute top-1 right-1">
 					<Button
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
index 3f69f184bb..d166ccdd8c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
@@ -54,7 +54,7 @@
 	<div class="w-full flex gap-2 flex-col mt-2">
 		{#each tabs as value, index (index)}
 			<div class="w-full flex flex-row gap-2 items-center relative">
-				<input type="text" bind:value />
+				<input on:keydown|stopPropagation type="text" bind:value />
 
 				<div class="absolute top-1 right-1">
 					<Button
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
index d8325508c1..017560c282 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
@@ -73,7 +73,13 @@
 					<Loader2 class="animate-spin" size={18} />
 				</div>
 			{:else if filteredItems}
-				<input bind:value={search} type="text" placeholder="Search" class="col-span-4 mb-2" />
+				<input
+					on:keydown|stopPropagation
+					bind:value={search}
+					type="text"
+					placeholder="Search"
+					class="col-span-4 mb-2"
+				/>
 				<div class="grid gap-1 grid-cols-4 max-h-[300px] overflow-auto">
 					{#each filteredItems as { label, icon }}
 						{@const formatedLabel = formatName(label)}
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 73065d1970..711c5baebd 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
@@ -42,7 +42,12 @@
 	{:else if componentInput.fieldType === 'labeledresource'}
 		{#if componentInput?.value && typeof componentInput?.value == 'object' && 'label' in componentInput?.value}
 			<div class="flex flex-col gap-1 w-full">
-				<input placeholder="Label" type="text" bind:value={componentInput.value['label']} />
+				<input
+					on:keydown|stopPropagation
+					placeholder="Label"
+					type="text"
+					bind:value={componentInput.value['label']}
+				/>
 				<ResourcePicker
 					initialValue={componentInput.value?.['value']?.split('$res:')[1] || ''}
 					on:change={(e) => {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte
index 560dd6cee2..d928e1b014 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte
@@ -19,6 +19,7 @@
 <div class="w-full flex mt-1 items-center gap-2">
 	<slot />
 	<input
+		on:keydown|stopPropagation
 		type="text"
 		placeholder="Search inline scripts"
 		bind:value={filter}
diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte
index 575ebdce0c..1cbf6de8c8 100644
--- a/frontend/src/lib/components/common/table/AppRow.svelte
+++ b/frontend/src/lib/components/common/table/AppRow.svelte
@@ -96,7 +96,8 @@
 				{
 					displayName: 'Edit',
 					icon: faPen,
-					href: `/apps/edit/${path}?nodraft=true`
+					href: `/apps/edit/${path}?nodraft=true`,
+					disabled: !canWrite
 				},
 				{
 					displayName: 'Use as template',
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 28cf542b2f..e0d6f11c63 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -3,7 +3,6 @@ import { goto } from '$app/navigation'
 import {
 	AppService,
 	FlowService,
-	FolderService,
 	Script,
 	ScriptService,
 	UserService,
@@ -234,6 +233,7 @@ export function canWrite(
 	if (user.folders.findIndex((x) => path.startsWith('f/' + x)) != -1) {
 		return true
 	}
+
 	return false
 }
 
diff --git a/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte
index c5c2732054..6a5e51f4c8 100644
--- a/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte
@@ -3,17 +3,20 @@
 	import AppPreview from '$lib/components/apps/editor/AppPreview.svelte'
 	import type { EditorBreakpoint } from '$lib/components/apps/types'
 
-	import { Skeleton } from '$lib/components/common'
+	import { Button, Skeleton } from '$lib/components/common'
 	import { AppService, AppWithLastVersion } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
-	import { classNames } from '$lib/utils'
+	import { canWrite } from '$lib/utils'
+	import { faPen } from '@fortawesome/free-solid-svg-icons'
 	import { writable } from 'svelte/store'
 	import { twMerge } from 'tailwind-merge'
 
 	let app: AppWithLastVersion | undefined = undefined
+	let can_write = false
 
 	async function loadApp() {
 		app = await AppService.getAppByPath({ workspace: $workspaceStore!, path: $page.params.path })
+		can_write = canWrite(app?.path, app?.extra_perms!, $userStore)
 	}
 
 	let queryId = $page.url.searchParams.get('workspace_id')
@@ -49,6 +52,13 @@
 			isEditor={false}
 			noBackend={false}
 		/>
+		{#if can_write}
+			<div class="absolute bottom-4 z-20 right-4">
+				<Button size="sm" startIcon={{ icon: faPen }} variant="border" href="/apps/edit/{app.path}"
+					>Edit</Button
+				>
+			</div>
+		{/if}
 	</div>
 {:else}
 	<Skeleton layout={[10]} />
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index 18c21977d2..390d0d0711 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -171,10 +171,9 @@
 <CenteredPage>
 	{#if flow}
 		<div class="prose-sm mx-auto mt-6">
-			<div class="flex flex-row w-full justify-between item-center">
-				<h1 class="mb-1 truncate">
-					{defaultIfEmptyString(flow.summary, flow.path)}
-				</h1>
+			<div
+				class="flex flex-row-reverse w-full flex-wrap md:flex-nowrap justify-between gap-x-2 gap-y-4"
+			>
 				<div class="flex flex-row-reverse gap-2 h-full">
 					<Button
 						href="/flows/run/{path}"
@@ -198,7 +197,7 @@
 						</Button>
 						<Button
 							href="/flows/add?template={flow.path}"
-							variant="contained"
+							variant="border"
 							color="blue"
 							size="md"
 							startIcon={{ icon: faCodeFork }}
@@ -206,10 +205,19 @@
 							Fork
 						</Button>
 					{/if}
-					<Button href="/runs/{flow.path}" color="blue" size="md" startIcon={{ icon: faList }}>
+					<Button
+						href="/runs/{flow.path}"
+						variant="border"
+						color="blue"
+						size="md"
+						startIcon={{ icon: faList }}
+					>
 						View runs
 					</Button>
 				</div>
+				<h1 class="mb-1 truncate grow">
+					{defaultIfEmptyString(flow.summary, flow.path)}
+				</h1>
 			</div>
 			{#if !emptyString(flow.summary)}
 				<span class="text-lg font-semibold">{flow.path}</span>
@@ -218,7 +226,7 @@
 	{/if}
 	<ShareModal bind:this={shareModal} />
 
-	<div class="grid grid-cols-1 gap-6 max-w-7xl pb-6 mt-2">
+	<div class="grid grid-cols-1 gap-6 max-w-7xl pb-6">
 		<Skeleton
 			loading={!flow}
 			layout={[[{ h: 1.5, w: 40 }], 1, [4], 2.25, [{ h: 1.5, w: 30 }], 1, [10]]}
diff --git a/frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte
index 6270a95b6f..8bd04f5bc0 100644
--- a/frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte
@@ -13,7 +13,7 @@
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import RunForm from '$lib/components/RunForm.svelte'
 	import { Button, Kbd, Skeleton } from '$lib/components/common'
-	import { faEye, faPlay, faScroll } from '@fortawesome/free-solid-svg-icons'
+	import { faEye, faPen, faPlay } from '@fortawesome/free-solid-svg-icons'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
 
 	const path = $page.params.path
@@ -87,9 +87,21 @@
 					<div
 						class="flex flex-row-reverse w-full flex-wrap md:flex-nowrap justify-between gap-x-1"
 					>
-						<div class="flex flex-row">
-							<div>
+						<div class="flex flex-row gap-4">
+							{#if !$userStore?.operator && can_write}
+								<div>
+									<Button
+										size="sm"
+										startIcon={{ icon: faPen }}
+										disabled={flow == undefined}
+										variant="border"
+										href="/flows/edit/{flow?.path}">Edit</Button
+									>
+								</div>
+							{/if}
+							<div class="md:pr-4">
 								<Button
+									size="sm"
 									startIcon={{ icon: faEye }}
 									disabled={flow == undefined}
 									btnClasses="mr-4"
diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
index 56dc5e9a5f..153186513e 100644
--- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -281,7 +281,7 @@
 							><Badge color="gray">{truncateHash(job.script_hash)}</Badge></a
 						>
 					{/if}
-					{#if job && 'job_kind' in job}<Badge color="blue">{job.job_kind}</Badge>
+					{#if job && 'job_kind' in job}<Badge baseClass="ml-2" color="blue">{job.job_kind}</Badge>
 					{/if}
 					{#if !job.visible_to_owner}<Badge color="red"
 							>only visible to you <Tooltip
diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
index 8e0a1995aa..d243258f40 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -200,9 +200,9 @@
 		<Skeleton {loading} layout={[[{ h: 1.5, w: 40 }], 1, [{ h: 1, w: 30 }]]} />
 
 		<div class="prose-sm mx-auto mt-6">
-			<div class="flex flex-row w-full justify-between item-center">
-				<h1 class="mb-1 truncate">{defaultIfEmptyString(script.summary, script.path)}</h1>
-
+			<div
+				class="flex flex-row-reverse w-full flex-wrap md:flex-nowrap justify-between gap-x-2 gap-y-4"
+			>
 				<div class="flex flex-row-reverse gap-2 h-full">
 					<Button
 						href={`/scripts/run/${script.hash}`}
@@ -243,13 +243,16 @@
 						View Runs
 					</Button>
 				</div>
+				<div class="grow truncate">
+					<h1 class="mb-1 truncate">{defaultIfEmptyString(script.summary, script.path)}</h1>
+				</div>
 			</div>
 
 			{#if !emptyString(script.summary)}
 				<span class="text-lg font-semibold">{script.path}</span>
 			{/if}
 
-			<div class="flex flex-row gap-x-2 flex-wrap items-center mt-4">
+			<div class="flex flex-row gap-x-2 flex-wrap items-center mt-2">
 				<span class="text-sm text-gray-600">
 					Edited {displayDaysAgo(script.created_at || '')} by {script.created_by || 'unknown'}
 				</span>
diff --git a/frontend/src/routes/(root)/(logged)/scripts/run/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/run/[...hash]/+page.svelte
index 895382a859..f0188a12f5 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/run/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/run/[...hash]/+page.svelte
@@ -17,7 +17,7 @@
 	import RunForm from '$lib/components/RunForm.svelte'
 	import { Alert, Badge, Button, Kbd, Skeleton } from '$lib/components/common'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
-	import { faPlay, faScroll } from '@fortawesome/free-solid-svg-icons'
+	import { faEye, faPen, faPlay, faScroll } from '@fortawesome/free-solid-svg-icons'
 
 	$: hash = $page.params.hash
 	let script: Script | undefined
@@ -112,15 +112,25 @@
 					<div
 						class="flex flex-row-reverse w-full flex-wrap md:flex-nowrap justify-between gap-x-1 gap-y-2"
 					>
-						<div class="flex flex-row">
-							<div>
+						<div class="flex flex-row gap-4">
+							{#if !$userStore?.operator && can_write}
+								<div>
+									<Button
+										size="sm"
+										startIcon={{ icon: faPen }}
+										disabled={script == undefined}
+										variant="border"
+										href="/scripts/edit/{script?.hash}?step=2">Edit</Button
+									>
+								</div>
+							{/if}
+							<div class="md:pr-4">
 								<Button
-									startIcon={{ icon: faScroll }}
+									size="sm"
+									startIcon={{ icon: faEye }}
 									disabled={script == undefined}
-									btnClasses="mr-4"
 									variant="border"
-									href="/scripts/get/{script?.hash}?workspace_id={$workspaceStore}"
-									>View script</Button
+									href="/scripts/get/{script?.hash}?workspace_id={$workspaceStore}">View</Button
 								>
 							</div>
 							<div>

From b349308ff793ddd4cb21c28081f7de55dc32fabd Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 11 Mar 2023 11:24:16 +0100
Subject: [PATCH 2/9] handle better linked variables renaming

---
 backend/sqlx-data.json                        | 50 +++++++++++++------
 backend/windmill-api/src/variables.rs         | 37 +++++++++++++-
 frontend/src/lib/components/AppConnect.svelte |  7 +--
 3 files changed, 76 insertions(+), 18 deletions(-)

diff --git a/backend/sqlx-data.json b/backend/sqlx-data.json
index 8a839ffc02..a3dd13a9a0 100644
--- a/backend/sqlx-data.json
+++ b/backend/sqlx-data.json
@@ -2984,20 +2984,6 @@
     },
     "query": "UPDATE group_ SET summary = $1 WHERE name = $2 AND workspace_id = $3"
   },
-  "83fc9bf32b9b40987feff61fea82e20613e74efb7bf8ba52485566667ccf2284": {
-    "describe": {
-      "columns": [],
-      "nullable": [],
-      "parameters": {
-        "Left": [
-          "Varchar",
-          "Text",
-          "Text"
-        ]
-      }
-    },
-    "query": "UPDATE resource SET path = $1 WHERE path = $2 AND workspace_id = $3"
-  },
   "8543f029d9784234e4c6a6dcd7b03e62d544b98be261334ee210594e0bb839f2": {
     "describe": {
       "columns": [
@@ -3168,6 +3154,21 @@
     },
     "query": "INSERT INTO usage (id, is_workspace, month_, usage) \n                    VALUES ($1, false, EXTRACT(YEAR FROM current_date) * 12 + EXTRACT(MONTH FROM current_date), 0) \n                    ON CONFLICT (id, is_workspace, month_) DO UPDATE SET usage = usage.usage + 1 \n                    RETURNING usage.usage"
   },
+  "8c0131a9cc61f2daa258d49767242bcaab6bb34a977ff7fb0c18aa9202d11f47": {
+    "describe": {
+      "columns": [],
+      "nullable": [],
+      "parameters": {
+        "Left": [
+          "Varchar",
+          "Jsonb",
+          "Text",
+          "Text"
+        ]
+      }
+    },
+    "query": "UPDATE resource SET path = $1, value = $2 WHERE path = $3 AND workspace_id = $4"
+  },
   "8c11511a74a41a65f448249a00ebe6964a61d00c2f7b4875a55e64741bf1f0ca": {
     "describe": {
       "columns": [
@@ -4697,6 +4698,27 @@
     },
     "query": "SELECT null FROM queue WHERE id = $1 FOR UPDATE"
   },
+  "be1de9116b18a40681cb8c5ec7578fd7c5f7ce77f7af63f766c2899d85fe0bef": {
+    "describe": {
+      "columns": [
+        {
+          "name": "value",
+          "ordinal": 0,
+          "type_info": "Jsonb"
+        }
+      ],
+      "nullable": [
+        true
+      ],
+      "parameters": {
+        "Left": [
+          "Text",
+          "Text"
+        ]
+      }
+    },
+    "query": "SELECT value FROM resource  WHERE path = $1 AND workspace_id = $2"
+  },
   "be7a99a5bb6858323ca61dd51077010f51ba58ae76b9a413339255024dcb524d": {
     "describe": {
       "columns": [],
diff --git a/backend/windmill-api/src/variables.rs b/backend/windmill-api/src/variables.rs
index 65655c8c39..599c7ccfba 100644
--- a/backend/windmill-api/src/variables.rs
+++ b/backend/windmill-api/src/variables.rs
@@ -26,6 +26,7 @@ use axum::{
     Json, Router,
 };
 use hyper::StatusCode;
+use serde_json::Value;
 use windmill_audit::{audit_log, ActionKind};
 use windmill_common::{
     error::{Error, JsonResult, Result},
@@ -378,9 +379,26 @@ async fn update_variable(
             if !authed.is_admin {
                 require_owner_of_path(&w_id, &authed.username, &authed.groups, &path, &db).await?;
             }
+            let mut v = sqlx::query_scalar!(
+                "SELECT value FROM resource  WHERE path = $1 AND workspace_id = $2",
+                path,
+                w_id
+            )
+            .fetch_one(&mut tx)
+            .await?;
+
+            if let Some(old_v) = v {
+                v = Some(replace_path(
+                    old_v,
+                    &format!("$var:{path}"),
+                    &format!("$var:{npath}"),
+                ))
+            }
+
             sqlx::query!(
-                "UPDATE resource SET path = $1 WHERE path = $2 AND workspace_id = $3",
+                "UPDATE resource SET path = $1, value = $2 WHERE path = $3 AND workspace_id = $4",
                 npath,
+                v,
                 path,
                 w_id
             )
@@ -419,6 +437,23 @@ async fn update_variable(
     Ok(format!("variable {} updated (npath: {:?})", path, npath))
 }
 
+fn replace_path(v: serde_json::Value, path: &str, npath: &str) -> Value {
+    match v {
+        Value::Object(v) => Value::Object(
+            v.into_iter()
+                .map(|(k, v)| (k, replace_path(v, path, npath)))
+                .collect(),
+        ),
+        Value::Array(arr) => Value::Array(
+            arr.into_iter()
+                .map(|v| replace_path(v, path, npath))
+                .collect(),
+        ),
+        Value::String(s) if s == path => Value::String(npath.to_owned()),
+        _ => v,
+    }
+}
+
 pub async fn build_crypt<'c>(
     db: &mut Transaction<'c, Postgres>,
     w_id: &str,
diff --git a/frontend/src/lib/components/AppConnect.svelte b/frontend/src/lib/components/AppConnect.svelte
index 77dd9c0414..28ac13d52f 100644
--- a/frontend/src/lib/components/AppConnect.svelte
+++ b/frontend/src/lib/components/AppConnect.svelte
@@ -81,7 +81,7 @@
 	$: key =
 		apiTokenApps[resource_type]?.key ??
 		(args != undefined
-			? Object.keys(args).filter((x) => ['token', 'password', 'api_key'].includes(x))[0]
+			? Object.keys(args).filter((x) => ['token', 'password', 'api_key', 'key'].includes(x))[0]
 			: undefined)
 
 	let scopes: string[] = []
@@ -259,6 +259,7 @@
 			args['token'] == '' &&
 			args['password'] == '' &&
 			args['api_key'] == '' &&
+			args['key'] == '' &&
 			key != undefined) ||
 		(step == 3 && pathError != '') ||
 		!isValid
@@ -396,7 +397,7 @@
 				bind:error={pathError}
 				bind:path
 				initialPath=""
-				namePlaceholder="{resource_type}"
+				namePlaceholder={resource_type}
 				kind="resource"
 			/>
 
@@ -433,7 +434,7 @@
 		{:else}
 			<Path
 				initialPath=""
-				namePlaceholder="{resource_type}"
+				namePlaceholder={resource_type}
 				bind:error={pathError}
 				bind:path
 				kind="resource"

From 3b44f9a72ca0466a44963a4b9657a0ee59b44753 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 11 Mar 2023 15:30:46 +0100
Subject: [PATCH 3/9] feat: add filter jobs by args or result

---
 backend/windmill-api/openapi.yaml             | 19 ++++
 backend/windmill-api/src/jobs.rs              | 35 +++++--
 frontend/src/lib/components/Slider.svelte     |  5 +
 .../inputEditor/JsonEditor.svelte             |  4 +-
 .../(logged)/runs/[...path]/+page.svelte      | 95 ++++++++++++++-----
 5 files changed, 127 insertions(+), 31 deletions(-)

diff --git a/backend/windmill-api/openapi.yaml b/backend/windmill-api/openapi.yaml
index 6f44eed791..8aed409689 100644
--- a/backend/windmill-api/openapi.yaml
+++ b/backend/windmill-api/openapi.yaml
@@ -3174,6 +3174,8 @@ paths:
         - $ref: "#/components/parameters/JobKinds"
         - $ref: "#/components/parameters/Suspended"
         - $ref: "#/components/parameters/Running"
+        - $ref: "#/components/parameters/ArgsFilter"
+        - $ref: "#/components/parameters/ResultFilter"
       responses:
         "200":
           description: All available queued jobs
@@ -3202,6 +3204,8 @@ paths:
         - $ref: "#/components/parameters/CreatedAfter"
         - $ref: "#/components/parameters/Success"
         - $ref: "#/components/parameters/JobKinds"
+        - $ref: "#/components/parameters/ArgsFilter"
+        - $ref: "#/components/parameters/ResultFilter"
         - name: is_skipped
           description: is the job skipped
           in: query
@@ -3238,6 +3242,8 @@ paths:
         - $ref: "#/components/parameters/CreatedBefore"
         - $ref: "#/components/parameters/CreatedAfter"
         - $ref: "#/components/parameters/JobKinds"
+        - $ref: "#/components/parameters/ArgsFilter"
+        - $ref: "#/components/parameters/ResultFilter"
         - name: is_skipped
           description: is the job skipped
           in: query
@@ -4646,6 +4652,19 @@ components:
       in: query
       schema:
         type: boolean
+    ArgsFilter:
+      name: args
+      description: filter on jobs containing those args as a json subset (@> in postgres)
+      in: query
+      schema:
+        type: string
+
+    ResultFilter:
+      name: result
+      description: filter on jobs containing those result as a json subset (@> in postgres)
+      in: query
+      schema:
+        type: string
     After:
       name: after
       description: filter on created after (exclusive) timestamp
diff --git a/backend/windmill-api/src/jobs.rs b/backend/windmill-api/src/jobs.rs
index a34297fcf1..ad396b7f5c 100644
--- a/backend/windmill-api/src/jobs.rs
+++ b/backend/windmill-api/src/jobs.rs
@@ -334,6 +334,8 @@ pub struct ListQueueQuery {
     pub order_desc: Option<bool>,
     pub job_kinds: Option<String>,
     pub suspended: Option<bool>,
+    // filter by matching a subset of the args using base64 encoded json subset
+    pub args: Option<String>,
 }
 
 fn list_queue_jobs_query(w_id: &str, lq: &ListQueueQuery, fields: &[&str]) -> SqlBuilder {
@@ -376,6 +378,7 @@ fn list_queue_jobs_query(w_id: &str, lq: &ListQueueQuery, fields: &[&str]) -> Sq
             sqlb.and_where_eq("suspend", 0);
         }
     }
+
     if let Some(jk) = &lq.job_kinds {
         sqlb.and_where_in(
             "job_kind",
@@ -383,6 +386,10 @@ fn list_queue_jobs_query(w_id: &str, lq: &ListQueueQuery, fields: &[&str]) -> Sq
         );
     }
 
+    if let Some(args) = &lq.args {
+        sqlb.and_where("args @> ?".bind(&args.replace("'", "''")));
+    }
+
     sqlb
 }
 
@@ -462,6 +469,7 @@ async fn list_jobs(
             order_desc: Some(true),
             job_kinds: lq.job_kinds,
             suspended: lq.suspended,
+            args: lq.args,
         },
         &[
             "'QueuedJob' as typ",
@@ -1136,15 +1144,15 @@ where
         struct InPayload {
             payload: Option<String>,
         }
-
-        fn decode_payload<D: DeserializeOwned, T: AsRef<[u8]>>(t: T) -> anyhow::Result<D> {
-            let vec = base64::engine::general_purpose::URL_SAFE
-                .decode(t)
-                .context("invalid base64")?;
-            serde_json::from_slice(vec.as_slice()).context("invalid json")
-        }
     }
 }
+
+fn decode_payload<D: DeserializeOwned, T: AsRef<[u8]>>(t: T) -> anyhow::Result<D> {
+    let vec = base64::engine::general_purpose::URL_SAFE
+        .decode(t)
+        .context("invalid base64")?;
+    serde_json::from_slice(vec.as_slice()).context("invalid json")
+}
 pub async fn run_flow_by_path(
     authed: Authed,
     Extension(user_db): Extension<UserDB>,
@@ -1706,6 +1714,15 @@ fn list_completed_jobs_query(
         );
     }
 
+    if let Some(args) = &lq.args {
+        sqlb.and_where("args @> ?".bind(&args.replace("'", "''")));
+    }
+
+    if let Some(result) = &lq.result {
+        sqlb.and_where("result @> ?".bind(&result.replace("'", "''")));
+    }
+
+    tracing::info!("{:?}", sqlb.sql());
     sqlb
 }
 #[derive(Deserialize, Clone)]
@@ -1723,6 +1740,10 @@ pub struct ListCompletedQuery {
     pub is_skipped: Option<bool>,
     pub is_flow_step: Option<bool>,
     pub suspended: Option<bool>,
+    // filter by matching a subset of the args using base64 encoded json subset
+    pub args: Option<String>,
+    // filter by matching a subset of the result using base64 encoded json subset
+    pub result: Option<String>,
 }
 
 async fn list_completed_jobs(
diff --git a/frontend/src/lib/components/Slider.svelte b/frontend/src/lib/components/Slider.svelte
index 04917e1484..d605d7658a 100644
--- a/frontend/src/lib/components/Slider.svelte
+++ b/frontend/src/lib/components/Slider.svelte
@@ -2,13 +2,18 @@
 	import { ChevronDown, ChevronUp } from 'lucide-svelte'
 	import { slide } from 'svelte/transition'
 	import Button from './common/button/Button.svelte'
+	import Tooltip from './Tooltip.svelte'
 
 	export let text: string
+	export let tooltip: string | undefined = undefined
 	export let view = false
 </script>
 
 <Button color="light" on:click={() => (view = !view)} variant="border"
 	>{text}
+	{#if tooltip}
+		<Tooltip wrapperClass="mx-1">{tooltip}</Tooltip>
+	{/if}
 	{#if !view}<ChevronDown />{:else}<ChevronUp />{/if}</Button
 >
 {#if view}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte
index 74a24a86a0..081b5ff1cd 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	export let code: string
-	export let value: any
+	export let value: any = undefined
+	export let error = ''
 
 	function parseJson() {
 		try {
@@ -11,7 +12,6 @@
 			error = e.message
 		}
 	}
-	let error = ''
 	$: code && parseJson()
 </script>
 
diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
index 505ab88a80..d436f8a5de 100644
--- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -18,6 +18,8 @@
 	import Icon from 'svelte-awesome'
 	import AutoComplete from 'simple-svelte-autocomplete'
 	import NoItemFound from '$lib/components/home/NoItemFound.svelte'
+	import Slider from '$lib/components/Slider.svelte'
+	import JsonEditor from '$lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte'
 
 	let jobs: Job[] | undefined
 	let error: Error | undefined
@@ -55,6 +57,16 @@
 
 	$: ($workspaceStore && loadJobs(createdBefore)) || (path && success && isSkipped && jobKinds)
 
+	let filterTimeout: NodeJS.Timeout | undefined = undefined
+	function debounceSyncer() {
+		filterTimeout && clearTimeout(filterTimeout)
+		filterTimeout = setTimeout(() => {
+			loadJobs(createdBefore)
+		}, 500)
+	}
+
+	$: (true || argFilter || resultFilter) && debounceSyncer()
+
 	async function fetchJobs(
 		createdBefore: string | undefined,
 		createdAfter: string | undefined
@@ -67,7 +79,13 @@
 			jobKinds,
 			success,
 			isSkipped,
-			isFlowStep: jobKindsCat != 'all' ? false : undefined
+			isFlowStep: jobKindsCat != 'all' ? false : undefined,
+			args:
+				argFilter && argFilter != '{}' && argFilter != '' && argError == '' ? argFilter : undefined,
+			result:
+				resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
+					? resultFilter
+					: undefined
 		})
 	}
 
@@ -89,7 +107,7 @@
 	}
 
 	async function syncer() {
-		if (jobs && createdBefore === undefined) {
+		if (sync && jobs && createdBefore === undefined) {
 			const reversedJobs = [...jobs].reverse()
 			const lastIndex = reversedJobs.findIndex((x) => x.type == Job.type.QUEUED_JOB) - 1
 			let ts = lastIndex >= 0 ? reversedJobs[lastIndex].created_at : undefined
@@ -110,9 +128,17 @@
 		}
 	}
 
+	let sync = true
 	onMount(() => {
 		loadPaths()
 		intervalId = setInterval(syncer, 5000)
+		document.addEventListener('visibilitychange', () => {
+			if (document.hidden) {
+				sync = false
+			} else {
+				sync = true
+			}
+		})
 	})
 
 	let paths: string[] = []
@@ -146,6 +172,12 @@
 	function onSearchPathChange() {
 		goto(`/runs/${searchPath}?${$page.url.searchParams.toString()}`)
 	}
+
+	let argFilter: any = undefined
+	let resultFilter: any = undefined
+
+	let argError = ''
+	let resultError = ''
 </script>
 
 <CenteredPage>
@@ -210,28 +242,47 @@
 					<input type="text" value={maxTs ?? 'zoom x axis to set max'} disabled />
 				</div>
 			</div>
-			<div class="flex flex-row gap-x-2 mb-2 w-full">
-				{#key path}
-					<AutoComplete
-						items={paths}
-						value={path}
-						bind:selectedItem={searchPath}
-						placeholder="Search by path of script/flow"
-					/>
-				{/key}
-				<Button
-					variant="border"
-					on:click={() => {
-						minTs = undefined
-						maxTs = undefined
-						goto('/runs?' + $page.url.searchParams.toString())
-						fetchJobs(createdBefore, undefined)
-					}}
-					size="xs"
+			<div class="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2 w-full flex-wrap">
+				<div>
+					<div class="flex flex-row gap-x-2">
+						{#key path}
+							<AutoComplete
+								items={paths}
+								value={path}
+								bind:selectedItem={searchPath}
+								placeholder="Search by path"
+							/>
+						{/key}
+						<Button
+							variant="border"
+							on:click={() => {
+								minTs = undefined
+								maxTs = undefined
+								goto('/runs?' + $page.url.searchParams.toString())
+								fetchJobs(createdBefore, undefined)
+							}}
+							size="xs"
+						>
+							<Icon data={faSearchMinus} />
+						</Button>
+					</div>
+				</div>
+				<div
+					><Slider
+						text="Filter by args"
+						tooltip={'Filter by a json being a subset of the args. Try \'{"foo": "bar"}\''}
+						><JsonEditor bind:error={argError} bind:code={argFilter} /></Slider
+					></div
+				>
+				<div
+					><Slider
+						text="Filter by result"
+						tooltip={'Filter by a json being a subset of the result. Try \'{"foo": "bar"}\''}
+						><JsonEditor bind:error={resultError} bind:code={resultFilter} /></Slider
+					></div
 				>
-					<Icon data={faSearchMinus} />
-				</Button>
 			</div>
+
 			<Skeleton loading={!jobs} layout={[[6], 1, [6], 1, [6], 1, [6], 1, [6]]} />
 
 			{#if jobs}

From 61a5e1f1accc988628b785b3b9be04c4ea719874 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 11 Mar 2023 17:13:49 +0100
Subject: [PATCH 4/9] feat(frontend): make runs filters synced with query args

---
 backend/windmill-api/openapi.yaml             | 20 +++---
 backend/windmill-api/src/jobs.rs              | 28 ++++----
 frontend/src/lib/components/RunChart.svelte   | 33 ++++++++--
 .../src/lib/components/ScriptBuilder.svelte   |  2 +-
 frontend/src/lib/utils.ts                     | 14 +++-
 .../(logged)/runs/[...path]/+page.svelte      | 64 +++++++++++--------
 6 files changed, 103 insertions(+), 58 deletions(-)

diff --git a/backend/windmill-api/openapi.yaml b/backend/windmill-api/openapi.yaml
index 8aed409689..5033b3504e 100644
--- a/backend/windmill-api/openapi.yaml
+++ b/backend/windmill-api/openapi.yaml
@@ -3168,8 +3168,8 @@ paths:
         - $ref: "#/components/parameters/ScriptExactPath"
         - $ref: "#/components/parameters/ScriptStartPath"
         - $ref: "#/components/parameters/ScriptExactHash"
-        - $ref: "#/components/parameters/CreatedBefore"
-        - $ref: "#/components/parameters/CreatedAfter"
+        - $ref: "#/components/parameters/StartedBefore"
+        - $ref: "#/components/parameters/StartedAfter"
         - $ref: "#/components/parameters/Success"
         - $ref: "#/components/parameters/JobKinds"
         - $ref: "#/components/parameters/Suspended"
@@ -3200,8 +3200,8 @@ paths:
         - $ref: "#/components/parameters/ScriptExactPath"
         - $ref: "#/components/parameters/ScriptStartPath"
         - $ref: "#/components/parameters/ScriptExactHash"
-        - $ref: "#/components/parameters/CreatedBefore"
-        - $ref: "#/components/parameters/CreatedAfter"
+        - $ref: "#/components/parameters/StartedBefore"
+        - $ref: "#/components/parameters/StartedAfter"
         - $ref: "#/components/parameters/Success"
         - $ref: "#/components/parameters/JobKinds"
         - $ref: "#/components/parameters/ArgsFilter"
@@ -3239,8 +3239,8 @@ paths:
         - $ref: "#/components/parameters/ScriptExactPath"
         - $ref: "#/components/parameters/ScriptStartPath"
         - $ref: "#/components/parameters/ScriptExactHash"
-        - $ref: "#/components/parameters/CreatedBefore"
-        - $ref: "#/components/parameters/CreatedAfter"
+        - $ref: "#/components/parameters/StartedBefore"
+        - $ref: "#/components/parameters/StartedAfter"
         - $ref: "#/components/parameters/JobKinds"
         - $ref: "#/components/parameters/ArgsFilter"
         - $ref: "#/components/parameters/ResultFilter"
@@ -4620,15 +4620,15 @@ components:
       in: query
       schema:
         type: string
-    CreatedBefore:
-      name: created_before
+    StartedBefore:
+      name: started_before
       description: filter on created before (inclusive) timestamp
       in: query
       schema:
         type: string
         format: date-time
-    CreatedAfter:
-      name: created_after
+    StartedAfter:
+      name: started_after
       description: filter on created after (exclusive) timestamp
       in: query
       schema:
diff --git a/backend/windmill-api/src/jobs.rs b/backend/windmill-api/src/jobs.rs
index ad396b7f5c..692a5696eb 100644
--- a/backend/windmill-api/src/jobs.rs
+++ b/backend/windmill-api/src/jobs.rs
@@ -327,8 +327,8 @@ pub struct ListQueueQuery {
     pub script_path_exact: Option<String>,
     pub script_hash: Option<String>,
     pub created_by: Option<String>,
-    pub created_before: Option<chrono::DateTime<chrono::Utc>>,
-    pub created_after: Option<chrono::DateTime<chrono::Utc>>,
+    pub started_before: Option<chrono::DateTime<chrono::Utc>>,
+    pub started_after: Option<chrono::DateTime<chrono::Utc>>,
     pub running: Option<bool>,
     pub parent_job: Option<String>,
     pub order_desc: Option<bool>,
@@ -364,11 +364,11 @@ fn list_queue_jobs_query(w_id: &str, lq: &ListQueueQuery, fields: &[&str]) -> Sq
     if let Some(pj) = &lq.parent_job {
         sqlb.and_where_eq("parent_job", "?".bind(pj));
     }
-    if let Some(dt) = &lq.created_before {
-        sqlb.and_where_lt("created_at", format!("to_timestamp({})", dt.timestamp()));
+    if let Some(dt) = &lq.started_before {
+        sqlb.and_where_le("started_at", format!("to_timestamp({})", dt.timestamp()));
     }
-    if let Some(dt) = &lq.created_after {
-        sqlb.and_where_gt("created_at", format!("to_timestamp({})", dt.timestamp()));
+    if let Some(dt) = &lq.started_after {
+        sqlb.and_where_ge("started_at", format!("to_timestamp({})", dt.timestamp()));
     }
 
     if let Some(s) = &lq.suspended {
@@ -462,8 +462,8 @@ async fn list_jobs(
             script_path_exact: lq.script_path_exact,
             script_hash: lq.script_hash,
             created_by: lq.created_by,
-            created_before: lq.created_before,
-            created_after: lq.created_after,
+            started_before: lq.started_before,
+            started_after: lq.started_after,
             running: None,
             parent_job: lq.parent_job,
             order_desc: Some(true),
@@ -1695,11 +1695,11 @@ fn list_completed_jobs_query(
     if let Some(pj) = &lq.parent_job {
         sqlb.and_where_eq("parent_job", "?".bind(pj));
     }
-    if let Some(dt) = &lq.created_before {
-        sqlb.and_where_lt("created_at", format!("to_timestamp({})", dt.timestamp()));
+    if let Some(dt) = &lq.started_before {
+        sqlb.and_where_le("started_at", format!("to_timestamp({})", dt.timestamp()));
     }
-    if let Some(dt) = &lq.created_after {
-        sqlb.and_where_gt("created_at", format!("to_timestamp({})", dt.timestamp()));
+    if let Some(dt) = &lq.started_after {
+        sqlb.and_where_ge("started_at", format!("to_timestamp({})", dt.timestamp()));
     }
     if let Some(sk) = &lq.is_skipped {
         sqlb.and_where_eq("is_skipped", sk);
@@ -1731,8 +1731,8 @@ pub struct ListCompletedQuery {
     pub script_path_exact: Option<String>,
     pub script_hash: Option<String>,
     pub created_by: Option<String>,
-    pub created_before: Option<chrono::DateTime<chrono::Utc>>,
-    pub created_after: Option<chrono::DateTime<chrono::Utc>>,
+    pub started_before: Option<chrono::DateTime<chrono::Utc>>,
+    pub started_after: Option<chrono::DateTime<chrono::Utc>>,
     pub success: Option<bool>,
     pub parent_job: Option<String>,
     pub order_desc: Option<bool>,
diff --git a/frontend/src/lib/components/RunChart.svelte b/frontend/src/lib/components/RunChart.svelte
index 2d04cde1b8..1890269f62 100644
--- a/frontend/src/lib/components/RunChart.svelte
+++ b/frontend/src/lib/components/RunChart.svelte
@@ -45,7 +45,7 @@
 				label: 'Failed',
 				data:
 					failed?.map((job) => ({
-						x: job.created_at as any,
+						x: job.started_at as any,
 						y: job.duration_ms,
 						id: job.id,
 						path: job.script_path
@@ -57,7 +57,7 @@
 				label: 'Successful',
 				data:
 					success?.map((job) => ({
-						x: job.created_at as any,
+						x: job.started_at as any,
 						y: job.duration_ms,
 						id: job.id,
 						path: job.script_path
@@ -71,7 +71,10 @@
 			enabled: true,
 			modifierKey: 'ctrl' as 'ctrl',
 			onPanComplete: ({ chart }) => {
-				dispatch('zoom', { min: new Date(chart.scales.x.min), max: new Date(chart.scales.x.max) })
+				dispatch('zoom', {
+					min: addSeconds(new Date(chart.scales.x.min), -1),
+					max: addSeconds(new Date(chart.scales.x.max), 1)
+				})
 			}
 		},
 		zoom: {
@@ -80,7 +83,10 @@
 			},
 			mode: 'x' as 'x',
 			onZoom: ({ chart }) => {
-				dispatch('zoom', { min: new Date(chart.scales.x.min), max: new Date(chart.scales.x.max) })
+				dispatch('zoom', {
+					min: addSeconds(new Date(chart.scales.x.min), -1),
+					max: addSeconds(new Date(chart.scales.x.max), 1)
+				})
 			}
 		}
 	}
@@ -88,6 +94,22 @@
 	function getPath(x: any): string {
 		return x.path
 	}
+
+	$: minTime = getMinTime(jobs)
+
+	function addSeconds(date: Date, seconds: number): Date {
+		date.setTime(date.getTime() + seconds * 1000)
+		return date
+	}
+	function getMinTime(jobs: CompletedJob[] | undefined): Date {
+		return addSeconds(new Date(jobs?.[jobs?.length - 1]?.started_at ?? new Date().toString()), -15)
+	}
+
+	$: maxTime = getMaxTime(jobs)
+
+	function getMaxTime(jobs: CompletedJob[] | undefined): Date {
+		return addSeconds(new Date(jobs?.[0]?.started_at ?? new Date().toString()), 15)
+	}
 </script>
 
 <Scatter
@@ -115,7 +137,8 @@
 					display: false
 				},
 				type: 'time',
-				min: jobs?.[jobs?.length - 1]?.created_at ?? new Date().toString()
+				min: minTime,
+				max: maxTime
 			},
 			y: {
 				grid: {
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 6ee4dca4cf..a06b406d60 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -38,7 +38,7 @@
 	let summaryC: HTMLInputElement | undefined = undefined
 	let pathC: Path | undefined = undefined
 
-	$: setQueryWithoutLoad($page.url, 'state', encodeState(script))
+	$: setQueryWithoutLoad($page.url, [{ key: 'state', value: encodeState(script) }])
 	$: step = Number($page.url.searchParams.get('step')) || 1
 
 	if (script.content == '') {
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index e0d6f11c63..4bbf5c87f0 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -297,17 +297,25 @@ export async function setQuery(url: URL, key: string, value: string): Promise<vo
 }
 
 let debounced: NodeJS.Timeout | undefined = undefined
-export function setQueryWithoutLoad(url: URL, key: string, value: string): void {
+export function setQueryWithoutLoad(url: URL, args: { key: string, value: string | null | undefined }[], bounceTime?: number): void {
 	debounced && clearTimeout(debounced)
 	debounced = setTimeout(() => {
 		const nurl = new URL(url.toString())
-		nurl.searchParams.set(key, value)
+		console.log(url.toString())
+		for (const { key, value } of args) {
+			if (value) {
+				nurl.searchParams.set(key, value)
+			} else {
+				nurl.searchParams.delete(key)
+			}
+		}
+
 		try {
 			history.replaceState(history.state, '', nurl.toString())
 		} catch (e) {
 			console.error(e)
 		}
-	}, 200)
+	}, bounceTime ?? 200)
 }
 
 export function groupBy<T>(
diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
index d436f8a5de..c0db346ad4 100644
--- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte'
 	import { JobService, Job, CompletedJob, ScriptService, FlowService } from '$lib/gen'
-	import { setQuery } from '$lib/utils'
+	import { setQuery, setQueryWithoutLoad } from '$lib/utils'
 
 	import { page } from '$app/stores'
 	import { sendUserToast } from '$lib/utils'
@@ -24,7 +24,6 @@
 	let jobs: Job[] | undefined
 	let error: Error | undefined
 	let intervalId: NodeJS.Timer | undefined
-	let createdBefore: string | undefined = $page.url.searchParams.get('createdBefore') ?? undefined
 
 	let success: boolean | undefined =
 		$page.url.searchParams.get('success') != undefined
@@ -35,6 +34,11 @@
 			? $page.url.searchParams.get('is_skipped') == 'true'
 			: false
 
+	let argFilter: any = $page.url.searchParams.get('arg') ?? undefined
+	let resultFilter: any = $page.url.searchParams.get('result') ?? undefined
+	let minTs = $page.url.searchParams.get('min_ts') ?? undefined
+	let maxTs = $page.url.searchParams.get('max_ts') ?? undefined
+
 	let nbOfJobs = 30
 
 	$: path = $page.params.path
@@ -55,26 +59,26 @@
 		}
 	}
 
-	$: ($workspaceStore && loadJobs(createdBefore)) || (path && success && isSkipped && jobKinds)
+	$: ($workspaceStore && loadJobs()) || (path && success && isSkipped && jobKinds)
 
 	let filterTimeout: NodeJS.Timeout | undefined = undefined
 	function debounceSyncer() {
 		filterTimeout && clearTimeout(filterTimeout)
 		filterTimeout = setTimeout(() => {
-			loadJobs(createdBefore)
-		}, 500)
+			loadJobs()
+		}, 1000)
 	}
 
 	$: (true || argFilter || resultFilter) && debounceSyncer()
 
 	async function fetchJobs(
-		createdBefore: string | undefined,
-		createdAfter: string | undefined
+		startedBefore: string | undefined,
+		startedAfter: string | undefined
 	): Promise<Job[]> {
 		return JobService.listJobs({
 			workspace: $workspaceStore!,
-			createdBefore,
-			createdAfter,
+			startedBefore,
+			startedAfter,
 			scriptPathExact: path === '' ? undefined : path,
 			jobKinds,
 			success,
@@ -89,9 +93,10 @@
 		})
 	}
 
-	async function loadJobs(createdBefore: string | undefined): Promise<void> {
+	async function loadJobs(): Promise<void> {
+		jobs = undefined
 		try {
-			const newJobs = await fetchJobs(createdBefore, undefined)
+			const newJobs = await fetchJobs(maxTs, minTs)
 			jobs = newJobs
 		} catch (err) {
 			sendUserToast(`There was a problem fetching jobs: ${err}`, true)
@@ -107,7 +112,7 @@
 	}
 
 	async function syncer() {
-		if (sync && jobs && createdBefore === undefined) {
+		if (sync && jobs && maxTs == undefined) {
 			const reversedJobs = [...jobs].reverse()
 			const lastIndex = reversedJobs.findIndex((x) => x.type == Job.type.QUEUED_JOB) - 1
 			let ts = lastIndex >= 0 ? reversedJobs[lastIndex].created_at : undefined
@@ -148,11 +153,23 @@
 		const npaths_flows = await FlowService.listFlowPaths({ workspace: $workspaceStore ?? '' })
 		paths = npaths_scripts.concat(npaths_flows).sort()
 	}
-	async function syncCatWithURL() {
-		await setQuery($page.url, 'job_kinds', jobKindsCat)
+
+	function syncWithUrl(arg: string, value: string) {
+		setQueryWithoutLoad($page.url, [{ key: arg, value }])
 	}
 
-	$: jobKindsCat && syncCatWithURL()
+	async function syncTsWithURL(minTs?: string, maxTs?: string) {
+		console.log(minTs, maxTs)
+		setQueryWithoutLoad($page.url, [
+			{ key: 'min_ts', value: minTs },
+			{ key: 'max_ts', value: maxTs }
+		])
+	}
+
+	$: syncWithUrl('job_kinds', jobKindsCat)
+	$: syncWithUrl('arg', argFilter)
+	$: syncWithUrl('result', resultFilter)
+	$: syncTsWithURL(minTs, maxTs)
 
 	$: completedJobs =
 		jobs?.filter((x) => x.type == 'CompletedJob').map((x) => x as CompletedJob) ?? []
@@ -164,8 +181,6 @@
 	})
 	let searchPath = ''
 	$: searchPath = path
-	let minTs = undefined
-	let maxTs = undefined
 
 	$: searchPath && onSearchPathChange()
 
@@ -173,9 +188,6 @@
 		goto(`/runs/${searchPath}?${$page.url.searchParams.toString()}`)
 	}
 
-	let argFilter: any = undefined
-	let resultFilter: any = undefined
-
 	let argError = ''
 	let resultError = ''
 </script>
@@ -254,12 +266,14 @@
 							/>
 						{/key}
 						<Button
+							title="Clear path and time filters"
 							variant="border"
-							on:click={() => {
+							on:click={async () => {
 								minTs = undefined
 								maxTs = undefined
-								goto('/runs?' + $page.url.searchParams.toString())
-								fetchJobs(createdBefore, undefined)
+								jobs = undefined
+								await goto('/runs?' + $page.url.searchParams.toString())
+								loadJobs()
 							}}
 							size="xs"
 						>
@@ -269,14 +283,14 @@
 				</div>
 				<div
 					><Slider
-						text="Filter by args"
+						text="Filter by args {argFilter ? '(set)' : ''}"
 						tooltip={'Filter by a json being a subset of the args. Try \'{"foo": "bar"}\''}
 						><JsonEditor bind:error={argError} bind:code={argFilter} /></Slider
 					></div
 				>
 				<div
 					><Slider
-						text="Filter by result"
+						text="Filter by result {resultFilter ? '(set)' : ''}"
 						tooltip={'Filter by a json being a subset of the result. Try \'{"foo": "bar"}\''}
 						><JsonEditor bind:error={resultError} bind:code={resultFilter} /></Slider
 					></div

From ce323709a94d27fb24214719180ea1aafc66d646 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 11 Mar 2023 20:13:16 +0100
Subject: [PATCH 5/9] fix(cli): many small fixes

---
 backend/windmill-api/src/folders.rs    | 22 ++++++++++++++-----
 backend/windmill-api/src/workspaces.rs |  2 ++
 backend/windmill-common/src/scripts.rs | 14 ++++++++++++-
 cli/apps.ts                            | 14 ++-----------
 cli/flow.ts                            | 12 ++---------
 cli/folder.ts                          | 23 +++++++++-----------
 cli/resource-type.ts                   | 18 ++++------------
 cli/resource.ts                        | 16 ++++----------
 cli/script.ts                          | 10 +++++++--
 cli/sync.ts                            | 29 +++++++++++++-------------
 cli/variable.ts                        | 19 +++++------------
 11 files changed, 81 insertions(+), 98 deletions(-)

diff --git a/backend/windmill-api/src/folders.rs b/backend/windmill-api/src/folders.rs
index cb10f45b8d..5115670e5a 100644
--- a/backend/windmill-api/src/folders.rs
+++ b/backend/windmill-api/src/folders.rs
@@ -16,10 +16,9 @@ use axum::{
     routing::{delete, get, post},
     Json, Router,
 };
-use itertools::Itertools;
 use windmill_audit::{audit_log, ActionKind};
 use windmill_common::{
-    error::{self, Error, JsonResult, Result},
+    error::{self, to_anyhow, Error, JsonResult, Result},
     users::username_to_permissioned_as,
     utils::{not_found_if_none, paginate, Pagination},
 };
@@ -262,13 +261,26 @@ async fn update_folder(
     sqlb.and_where_eq("workspace_id", "?".bind(&w_id));
 
     if let Some(display_name) = ng.display_name {
-        sqlb.set("display_name", display_name);
+        sqlb.set("display_name", "?".bind(&display_name));
     }
     if let Some(owners) = ng.owners {
-        sqlb.set_str("owners", format!("{{{}}}", owners.into_iter().join(",")));
+        sqlb.set(
+            "owners",
+            "?".bind(&format!(
+                "{{{}}}",
+                owners
+                    .iter()
+                    .map(|x| format!("\"{x}\""))
+                    .collect::<Vec<_>>()
+                    .join(","),
+            )),
+        );
     }
     if let Some(extra_perms) = ng.extra_perms {
-        sqlb.set_str("extra_perms", extra_perms.to_string());
+        sqlb.set(
+            "extra_perms",
+            "?".bind(&serde_json::to_string(&extra_perms).map_err(to_anyhow)?),
+        );
     }
 
     sqlb.returning("*");
diff --git a/backend/windmill-api/src/workspaces.rs b/backend/windmill-api/src/workspaces.rs
index dd2ee22f34..049ac59e63 100644
--- a/backend/windmill-api/src/workspaces.rs
+++ b/backend/windmill-api/src/workspaces.rs
@@ -1073,6 +1073,7 @@ struct ScriptMetadata {
     schema: Option<Schema>,
     is_template: bool,
     lock: Vec<String>,
+    kind: String,
 }
 
 enum ArchiveImpl {
@@ -1235,6 +1236,7 @@ async fn tarball_workspace(
                 description: script.description,
                 schema: script.schema,
                 is_template: script.is_template,
+                kind: script.kind.to_string(),
                 lock,
             };
             let metadata_str = serde_json::to_string_pretty(&metadata).unwrap();
diff --git a/backend/windmill-common/src/scripts.rs b/backend/windmill-common/src/scripts.rs
index 5a4a556cd3..36b1466919 100644
--- a/backend/windmill-common/src/scripts.rs
+++ b/backend/windmill-common/src/scripts.rs
@@ -7,7 +7,7 @@
  */
 
 use std::{
-    fmt::Display,
+    fmt::{self, Display},
     hash::{Hash, Hasher},
 };
 
@@ -103,6 +103,18 @@ pub enum ScriptKind {
     Approval,
 }
 
+impl Display for ScriptKind {
+    fn fmt(&self, fmt: &mut fmt::Formatter) -> fmt::Result {
+        fmt.write_str(match self {
+            ScriptKind::Trigger => "trigger",
+            ScriptKind::Failure => "failure",
+            ScriptKind::Script => "script",
+            ScriptKind::Approval => "approval",
+        })?;
+        Ok(())
+    }
+}
+
 #[derive(Serialize)]
 #[cfg_attr(feature = "sqlx", derive(sqlx::FromRow))]
 pub struct Script {
diff --git a/cli/apps.ts b/cli/apps.ts
index 46d0dd4456..72f1204bd3 100644
--- a/cli/apps.ts
+++ b/cli/apps.ts
@@ -1,7 +1,6 @@
 import { Any, model, property } from "./decoverto.ts";
 import {
   AppService,
-  AppWithLastVersion,
   colors,
   microdiff,
   Policy,
@@ -31,7 +30,7 @@ export class AppFile implements Resource, PushDiffs {
     if (await AppService.existsApp({ workspace, path: remotePath })) {
       console.log(
         colors.bold.yellow(
-          `Applying ${diffs.length} diffs to existing app...`,
+          `Applying ${diffs.length} diffs to existing app... ${remotePath}`,
         ),
       );
       const changeset: {
@@ -87,19 +86,10 @@ export class AppFile implements Resource, PushDiffs {
     }
   }
   async push(workspace: string, remotePath: string): Promise<void> {
-    let existing: AppWithLastVersion | undefined;
-    try {
-      existing = await AppService.getAppByPath({
-        workspace: workspace,
-        path: remotePath,
-      });
-    } catch {
-      existing = undefined;
-    }
     await this.pushDiffs(
       workspace,
       remotePath,
-      microdiff(existing ?? {}, this, { cyclesFix: false }),
+      microdiff({}, this, { cyclesFix: false }),
     );
   }
 }
diff --git a/cli/flow.ts b/cli/flow.ts
index ca4a2661ec..eb455c0dda 100644
--- a/cli/flow.ts
+++ b/cli/flow.ts
@@ -94,6 +94,7 @@ export class FlowFile implements Resource, PushDiffs {
         ...changeset,
         ...base_changeset,
       }
+
       await FlowService.updateFlow({
         workspace: workspace,
         path: remotePath,
@@ -114,20 +115,11 @@ export class FlowFile implements Resource, PushDiffs {
     }
   }
   async push(workspace: string, remotePath: string): Promise<void> {
-    let remote: Flow | undefined;
-    try {
-      remote = await FlowService.getFlowByPath({
-        workspace,
-        path: remotePath,
-      });
-    } catch {
 
-      remote = undefined;
-    }
     await this.pushDiffs(
       workspace,
       remotePath,
-      microdiff(remote ?? {}, this, { cyclesFix: false }),
+      microdiff({}, this, { cyclesFix: false }),
     );
   }
 }
diff --git a/cli/folder.ts b/cli/folder.ts
index ccaf6e2a01..548f950906 100644
--- a/cli/folder.ts
+++ b/cli/folder.ts
@@ -1,4 +1,4 @@
-import { colors, Command, Folder, FolderService, microdiff } from "./deps.ts";
+import { colors, Command, FolderService, microdiff } from "./deps.ts";
 import { requireLogin, resolveWorkspace, validatePath } from "./context.ts";
 import {
   Difference,
@@ -22,7 +22,9 @@ export class FolderFile implements Resource, PushDiffs {
   owners: Array<string> | undefined;
   @property(map(() => String, () => Boolean, { shape: MapShape.Object }))
   extra_perms: Map<string, boolean> | undefined;
-
+  @property(() => String)
+  display_name: string| undefined;
+  
   async push(workspace: string, remotePath: string): Promise<void> {
     if (remotePath.startsWith("/")) {
       remotePath = remotePath.substring(1);
@@ -31,16 +33,10 @@ export class FolderFile implements Resource, PushDiffs {
       remotePath = remotePath.substring(2);
     }
 
-    let existing: Folder | undefined;
-    try {
-      existing = await FolderService.getFolder({ workspace, name: remotePath });
-    } catch {
-      existing = undefined;
-    }
     await this.pushDiffs(
       workspace,
       remotePath,
-      microdiff(existing ?? {}, this, { cyclesFix: false }),
+      microdiff({}, this, { cyclesFix: false }),
     );
   }
 
@@ -66,22 +62,24 @@ export class FolderFile implements Resource, PushDiffs {
     if (exists) {
       console.log(
         colors.bold.yellow(
-          `Applying ${diffs.length} diffs to existing folder...`,
+          `Applying ${diffs.length} diffs to existing folder... ${remotePath}`,
         ),
       );
 
       const changeset: {
         owners?: string[] | undefined;
         extra_perms?: any;
+        display_name?: string | undefined;
       } = {};
       for (const diff of diffs) {
         if (
           diff.type !== "REMOVE" &&
           (
             diff.path.length !== 1 ||
-            !["owners", "extra_perms"].includes(diff.path[0] as string)
+            !["owners", "extra_perms", "display_name"].includes(diff.path[0] as string)
           )
         ) {
+          console.log(diff.path)
           throw new Error("Invalid folder diff with path " + diff.path);
         }
         if (diff.type === "CREATE" || diff.type === "CHANGE") {
@@ -97,11 +95,10 @@ export class FolderFile implements Resource, PushDiffs {
       if (!hasChanges) {
         return;
       }
-
       await FolderService.updateFolder({
         workspace: workspace,
         name: remotePath,
-        requestBody: changeset,
+        requestBody: {...changeset, extra_perms: changeset.extra_perms ? Object.fromEntries(this.extra_perms?.entries() ?? []) : undefined}
       });
     } else {
       console.log(colors.bold.yellow("Creating new folder: " + remotePath));
diff --git a/cli/resource-type.ts b/cli/resource-type.ts
index c0040c3bbc..031328cbd3 100644
--- a/cli/resource-type.ts
+++ b/cli/resource-type.ts
@@ -13,7 +13,6 @@ import {
   EditResourceType,
   microdiff,
   ResourceService,
-  ResourceType,
   Table,
 } from "./deps.ts";
 import { Any, decoverto, model, property } from "./decoverto.ts";
@@ -26,19 +25,10 @@ export class ResourceTypeFile implements ResourceI, PushDiffs {
   description?: string;
 
   async push(workspace: string, remotePath: string): Promise<void> {
-    let existing: ResourceType | undefined;
-    try {
-      existing = await ResourceService.getResourceType({
-        workspace,
-        path: remotePath,
-      });
-    } catch {
-      existing = undefined;
-    }
-    this.pushDiffs(
+    await this.pushDiffs(
       workspace,
       remotePath,
-      microdiff(existing ?? {}, this, { cyclesFix: false }),
+      microdiff({}, this, { cyclesFix: false }),
     );
   }
 
@@ -65,8 +55,8 @@ export class ResourceTypeFile implements ResourceI, PushDiffs {
         return;
       }
       console.log(
-        colors.yellow(
-          `Applying ${diffs.length} diffs to existing resource type...`,
+        colors.yellow.bold(
+          `Applying ${diffs.length} diffs to existing resource type... ${remotePath}`,
         ),
       );
       const changeset: EditResourceType = {};
diff --git a/cli/resource.ts b/cli/resource.ts
index c417a00ea2..f532b8877a 100644
--- a/cli/resource.ts
+++ b/cli/resource.ts
@@ -43,7 +43,7 @@ export class ResourceFile implements Resource2, PushDiffs {
       })
     ) {
       console.log(
-        colors.yellow(`Applying ${diffs.length} diffs to existing resource...`),
+        colors.yellow.bold(`Applying ${diffs.length} diffs to existing resource... ${remotePath}`),
       );
 
       const changeset: EditResource = {
@@ -64,9 +64,10 @@ export class ResourceFile implements Resource2, PushDiffs {
             diff.path[0] !== "value" && (
               diff.path.length !== 1 ||
               diff.path[0] !== "description"
-            )
+            ) && diff.path[0] !== "resource_type"
           )
         ) {
+          console.log(colors.red("Invalid variable diff with path " + diff.path));
           throw new Error("Invalid folder diff with path " + diff.path);
         }
         if (diff.type === "CREATE" || diff.type === "CHANGE") {
@@ -110,19 +111,10 @@ export class ResourceFile implements Resource2, PushDiffs {
     }
   }
   async push(workspace: string, remotePath: string): Promise<void> {
-    let existing: Resource | undefined;
-    try {
-      existing = await ResourceService.getResource({
-        workspace,
-        path: remotePath,
-      });
-    } catch {
-      existing = undefined;
-    }
     await this.pushDiffs(
       workspace,
       remotePath,
-      microdiff(existing ?? {}, this, { cyclesFix: false }),
+      microdiff({}, this, { cyclesFix: false }),
     );
   }
 }
diff --git a/cli/script.ts b/cli/script.ts
index fc0bf22ac0..33c075366d 100644
--- a/cli/script.ts
+++ b/cli/script.ts
@@ -42,6 +42,7 @@ export class ScriptFile {
     },
     toPlain: (data) => data,
   })
+  @property(() => String)
   kind?: "script" | "failure" | "trigger" | "command" | "approval";
 
   constructor(summary: string, description: string) {
@@ -110,6 +111,11 @@ export async function handleFile(path: string, content: string, workspace: strin
         workspace,
         path: remotePath,
       });
+
+      if (typed.description === remote.description && content === remote.content && typed.summary === remote.summary && typed.is_template === remote.is_template && typed.kind == remote.kind && typed.lock == remote.lock && JSON.stringify(typed.schema) == JSON.stringify(remote.schema)) {
+        console.log(colors.yellow.bold(`Skipping script ${remotePath}`))
+        return true
+      }
       await ScriptService.createScript({
         workspace,
         requestBody: {
@@ -123,8 +129,9 @@ export async function handleFile(path: string, content: string, workspace: strin
           lock: typed.lock,
           parent_hash: remote.hash,
           schema: typed.schema,
-        },
+        }
       });
+
       console.log(colors.yellow.bold(`Creating script with a parent ${remotePath}`))
     } catch {
       // no parent hash
@@ -144,7 +151,6 @@ export async function handleFile(path: string, content: string, workspace: strin
         },
       });
       console.log(colors.yellow.bold(`Creating script without parent ${remotePath}`))
-
     }
     return true
   }
diff --git a/cli/sync.ts b/cli/sync.ts
index b0c7335787..7cadb0ab52 100644
--- a/cli/sync.ts
+++ b/cli/sync.ts
@@ -33,8 +33,8 @@ import { ResourceFile } from "./resource.ts";
 import { FlowFile } from "./flow.ts";
 import { VariableFile } from "./variable.ts";
 import { handleFile } from "./script.ts";
-import { equal } from "https://deno.land/x/equal/mod.ts";
-import { diffCharacters } from "https://deno.land/x/diff/mod.ts";
+import { equal } from "https://deno.land/x/equal@v1.5.0/mod.ts";
+import { diffCharacters } from "https://deno.land/x/diff@v0.3.5/mod.ts";
 type DynFSElement = {
   isDirectory: boolean;
   path: string;
@@ -179,13 +179,13 @@ async function elementsToMap(els: DynFSElement, ignore: (path: string, isDirecto
   return map;
 }
 async function compareDynFSElement(
-  els1: DynFSElement, els2: DynFSElement,
+  els1: DynFSElement, els2: DynFSElement | undefined,
   ignore: (path: string, isDirectory: boolean) => boolean,
-  raw: boolean
 ): Promise<Change[]> {
 
-  const [m1, m2] = raw ? [await elementsToMap(els1, ignore), {}] :
-    await Promise.all([elementsToMap(els1, ignore), elementsToMap(els2, ignore)]);
+  const [m1, m2] = els2
+    ? await Promise.all([elementsToMap(els1, ignore), elementsToMap(els2, ignore)])
+    : [await elementsToMap(els1, ignore), {}];
 
   const changes: Change[] = [];
 
@@ -266,8 +266,8 @@ async function pull(
 
   console.log(colors.gray("Computing the files to update locally to match remote (taking .wmillignore into account)"));
   const remote = ZipFSElement((await downloadZip(workspace))!)
-  const local = await FSFSElement(path.join(Deno.cwd(), opts.raw ? "" : ".wmill"))
-  const changes = await compareDynFSElement(remote, local, await ignoreF(), opts.raw)
+  const local = opts.raw ? undefined : await FSFSElement(path.join(Deno.cwd(), opts.raw ? "" : ".wmill"))
+  const changes = await compareDynFSElement(remote, local, await ignoreF())
 
 
   console.log(`remote -> local: ${changes.length} changes to apply`);
@@ -289,7 +289,7 @@ async function pull(
 
         try {
           const currentLocal = await Deno.readTextFile(target)
-          if (currentLocal !== change.before) {
+          if (currentLocal !== change.before && currentLocal !== change.after) {
             console.log(colors.red(`Conflict detected on ${change.path}\nBoth local and remote have been modified.`))
             if (opts.failConflicts) {
               conflicts.push({ local: currentLocal, change, path: change.path })
@@ -459,7 +459,6 @@ function removeSuffix(str: string, suffix: string) {
 
 async function push(opts: GlobalOptions & { raw: boolean, yes: boolean, skipPull: boolean, failConflicts: boolean }) {
 
-
   if (!opts.raw) {
     if (!opts.skipPull) {
       console.log(colors.gray("You need to be up-to-date before pushing, pulling first."))
@@ -474,9 +473,9 @@ async function push(opts: GlobalOptions & { raw: boolean, yes: boolean, skipPull
 
 
   console.log(colors.gray("Computing the files to update on the remote to match local (taking .wmillignore into account)"));
-  const remote = ZipFSElement((await downloadZip(workspace))!)
+  const remote = opts.raw ? undefined : ZipFSElement((await downloadZip(workspace))!)
   const local = await FSFSElement(path.join(Deno.cwd(), ""))
-  const changes = await compareDynFSElement(local, remote, await ignoreF(), opts.raw)
+  const changes = await compareDynFSElement(local, remote, await ignoreF())
 
   console.log(`remote <- local: ${changes.length} changes to apply`);
   if (changes.length > 0) {
@@ -575,7 +574,7 @@ async function push(opts: GlobalOptions & { raw: boolean, yes: boolean, skipPull
             break;
         }
         try {
-          Deno.remove(stateTarget)
+          await Deno.remove(stateTarget)
         } catch { }
       }
     }
@@ -616,7 +615,7 @@ async function push(opts: GlobalOptions & { raw: boolean, yes: boolean, skipPull
       await file.pushDiffs(workspace, remotePath, diffs);
     } catch (e) {
       console.error("Failing to apply diffs to " + remotePath)
-      console.error(e.body)
+      console.error(JSON.stringify(e))
     }
   }
 }
@@ -635,7 +634,7 @@ const command = new Command()
     "Push any local changes and apply them remotely. Use --raw for usage without local state tracking.",
   )
   .option("--fail-conflicts", "Error on conflicts (both remote and local have changes on the same item)")
-  .option("--skip-pull", "Push without pulling first")
+  .option("--skip-pull", "Push without pulling first (you have pulled prior)")
   .option("--yes", "Push without needing confirmation")
   .option("--raw", "Push without using state, just overwrite.")
   .action(push as any);
diff --git a/cli/variable.ts b/cli/variable.ts
index 6c6e001a44..3c1b4527ce 100644
--- a/cli/variable.ts
+++ b/cli/variable.ts
@@ -11,7 +11,6 @@ import {
   colors,
   Command,
   EditVariable,
-  ListableVariable,
   microdiff,
   Table,
   VariableService,
@@ -67,7 +66,7 @@ export class VariableFile implements Resource, PushDiffs {
     if (await VariableService.existsVariable({ workspace, path: remotePath })) {
       console.log(
         colors.bold.yellow(
-          `Applying ${diffs.length} diffs to existing variable...`,
+          `Applying ${diffs.length} diffs to existing variable... ${remotePath}`,
         ),
       );
       const changeset: EditVariable = {};
@@ -76,11 +75,12 @@ export class VariableFile implements Resource, PushDiffs {
           diff.type !== "REMOVE" &&
           (
             diff.path.length !== 1 ||
-            !["path", "value", "is_secret", "description"].includes(
+            !["path", "value", "is_secret", "description", "account", "is_oauth"].includes(
               diff.path[0] as string,
             )
           )
         ) {
+          console.log(colors.red("Invalid variable diff with path " + diff.path));
           throw new Error("Invalid variable diff with path " + diff.path);
         }
         if (diff.type === "CREATE" || diff.type === "CHANGE") {
@@ -96,6 +96,7 @@ export class VariableFile implements Resource, PushDiffs {
       if (!hasChanges) {
         return;
       }
+
       await VariableService.updateVariable({
         workspace,
         path: remotePath,
@@ -103,7 +104,6 @@ export class VariableFile implements Resource, PushDiffs {
         requestBody: changeset,
       });
 
-      console.log(changeset);
     } else {
       console.log(colors.yellow.bold("Creating new variable..."));
       await VariableService.createVariable({
@@ -121,19 +121,10 @@ export class VariableFile implements Resource, PushDiffs {
     }
   }
   async push(workspace: string, remotePath: string): Promise<void> {
-    let existing: ListableVariable | undefined;
-    try {
-      existing = await VariableService.getVariable({
-        workspace: workspace,
-        path: remotePath,
-      });
-    } catch {
-      existing = undefined;
-    }
     await this.pushDiffs(
       workspace,
       remotePath,
-      microdiff(existing ?? {}, this, { cyclesFix: false }),
+      microdiff({}, this, { cyclesFix: false }),
     );
   }
 }

From 1a7dc0a3bd6e1f3456140733e8d8201a4965720a Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 11 Mar 2023 20:53:34 +0100
Subject: [PATCH 6/9] more cli fixes

---
 cli/apps.ts     | 18 +++++++++++++++---
 cli/resource.ts |  6 +-----
 cli/script.ts   | 15 ++++++++++-----
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/cli/apps.ts b/cli/apps.ts
index 72f1204bd3..1bbd1bafd5 100644
--- a/cli/apps.ts
+++ b/cli/apps.ts
@@ -1,6 +1,7 @@
 import { Any, model, property } from "./decoverto.ts";
 import {
   AppService,
+  AppWithLastVersion,
   colors,
   microdiff,
   Policy,
@@ -27,14 +28,18 @@ export class AppFile implements Resource, PushDiffs {
     remotePath: string,
     diffs: Difference[],
   ): Promise<void> {
-    if (await AppService.existsApp({ workspace, path: remotePath })) {
+    let app: AppWithLastVersion | undefined = undefined;
+    try {
+      app = await AppService.getAppByPath({ workspace, path: remotePath });
+    } catch (e) {}
+
+    if (app) {
       console.log(
         colors.bold.yellow(
           `Applying ${diffs.length} diffs to existing app... ${remotePath}`,
         ),
       );
       const changeset: {
-        path?: string | undefined;
         summary?: string | undefined;
         value?: any;
         policy?: Policy | undefined;
@@ -45,7 +50,7 @@ export class AppFile implements Resource, PushDiffs {
           (
             diff.path[0] !== "value" && diff.path[0] !== "policy" && (
               diff.path.length !== 1 ||
-              !["path", "summary"].includes(
+              !["summary"].includes(
                 diff.path[0] as string,
               )
             )
@@ -60,6 +65,13 @@ export class AppFile implements Resource, PushDiffs {
         }
       }
 
+      if ((!changeset?.policy || JSON.stringify(changeset?.policy) == JSON.stringify(app.policy)) 
+        && (!changeset?.value || JSON.stringify(changeset?.value) == JSON.stringify(app.value))
+        && (!changeset?.summary || changeset.summary == app.summary)) {
+        console.log(colors.yellow(`No changes to push for app ${remotePath}, skipping`))
+        return;
+      }
+
       const hasChanges = Object.values(changeset).some((v) =>
         v !== null && typeof v !== "undefined"
       );
diff --git a/cli/resource.ts b/cli/resource.ts
index f532b8877a..c1165b034e 100644
--- a/cli/resource.ts
+++ b/cli/resource.ts
@@ -51,11 +51,7 @@ export class ResourceFile implements Resource2, PushDiffs {
       };
       for (const diff of diffs) {
         if (diff.path[0] === "is_oauth") {
-          console.log(
-            colors.yellow(
-              "! is_oauth has been removed in newer versions. Ignoring.",
-            ),
-          );
+          //is_oauth is not updatable
           continue;
         }
         if (
diff --git a/cli/script.ts b/cli/script.ts
index 33c075366d..52da84b7b9 100644
--- a/cli/script.ts
+++ b/cli/script.ts
@@ -106,16 +106,21 @@ export async function handleFile(path: string, content: string, workspace: strin
     } catch { }
     const language = inferContentTypeFromFilePath(path);
 
+    let remote = undefined
     try {
-      const remote = await ScriptService.getScriptByPath({
+      remote = await ScriptService.getScriptByPath({
         workspace,
         path: remotePath,
       });
-
-      if (typed.description === remote.description && content === remote.content && typed.summary === remote.summary && typed.is_template === remote.is_template && typed.kind == remote.kind && typed.lock == remote.lock && JSON.stringify(typed.schema) == JSON.stringify(remote.schema)) {
-        console.log(colors.yellow.bold(`Skipping script ${remotePath}`))
+    } catch { }
+    
+    if (remote) {
+      if (typed.description === remote.description && content === remote.content && typed.summary === remote.summary && typed.is_template === remote.is_template && typed.kind == remote.kind && remote?.lock == typed.lock?.join('\n') && JSON.stringify(typed.schema) == JSON.stringify(remote.schema)) {
+        console.log(colors.yellow(`No change to push for script ${remotePath}, skipping`))
         return true
       }
+
+
       await ScriptService.createScript({
         workspace,
         requestBody: {
@@ -133,7 +138,7 @@ export async function handleFile(path: string, content: string, workspace: strin
       });
 
       console.log(colors.yellow.bold(`Creating script with a parent ${remotePath}`))
-    } catch {
+    } else {
       // no parent hash
       await ScriptService.createScript({
         workspace: workspace,

From 0789bef120ceab395cc45fd6a4e9e965d5263023 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 11 Mar 2023 20:54:54 +0100
Subject: [PATCH 7/9] chore(main): release 1.75.0 (#1278)

* chore(main): release 1.75.0

* Apply automatic changes

---------

Co-authored-by: rubenfiszel <rubenfiszel@users.noreply.github.com>
---
 CHANGELOG.md                          | 17 ++++++
 backend/Cargo.lock                    | 84 +++++++++++++--------------
 backend/Cargo.toml                    |  4 +-
 backend/windmill-api/openapi.yaml     |  2 +-
 cli/main.ts                           |  2 +-
 frontend/package-lock.json            |  4 +-
 frontend/package.json                 |  2 +-
 lsp/Pipfile                           |  4 +-
 openflow.openapi.yaml                 |  2 +-
 python-client/wmill/pyproject.toml    |  4 +-
 python-client/wmill_pg/pyproject.toml |  2 +-
 version.txt                           |  2 +-
 12 files changed, 73 insertions(+), 56 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e9e165ce7f..051d981f30 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,23 @@
 # Changelog
 
 
+## [1.75.0](https://github.com/windmill-labs/windmill/compare/v1.74.2...v1.75.0) (2023-03-11)
+
+
+### Features
+
+* add filter jobs by args or result ([3b44f9a](https://github.com/windmill-labs/windmill/commit/3b44f9a72ca0466a44963a4b9657a0ee59b44753))
+* **apps:** add resource picker ([8681e83](https://github.com/windmill-labs/windmill/commit/8681e83b574141acbf7e5a389a9e8a4f340336d1))
+* **bash:** add default argument handling for bash ([1d5c194](https://github.com/windmill-labs/windmill/commit/1d5c194f09ffba963d52e418c5954843d84ae337))
+* **frontend-apps:** add variable picker for static string input on apps ([bc440f8](https://github.com/windmill-labs/windmill/commit/bc440f8d4154ce464c0e027d93b7a0a3b76d782e))
+* **frontend:** make runs filters synced with query args ([61a5e1f](https://github.com/windmill-labs/windmill/commit/61a5e1f1accc988628b785b3b9be04c4ea719874))
+
+
+### Bug Fixes
+
+* **backend:** add killpill for lines reading ([7c825c2](https://github.com/windmill-labs/windmill/commit/7c825c212dd0f1e8be427eabd9a9756303241d1b))
+* **cli:** many small fixes ([ce32370](https://github.com/windmill-labs/windmill/commit/ce323709a94d27fb24214719180ea1aafc66d646))
+
 ## [1.74.2](https://github.com/windmill-labs/windmill/compare/v1.74.1...v1.74.2) (2023-03-09)
 
 
diff --git a/backend/Cargo.lock b/backend/Cargo.lock
index 5179ccf80a..56e53f66a6 100644
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@@ -1123,9 +1123,9 @@ dependencies = [
 
 [[package]]
 name = "futures"
-version = "0.3.26"
+version = "0.3.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "13e2792b0ff0340399d58445b88fd9770e3489eff258a4cbc1523418f12abf84"
+checksum = "531ac96c6ff5fd7c62263c5e3c67a603af4fcaee2e1a0ae5565ba3a11e69e549"
 dependencies = [
  "futures-channel",
  "futures-core",
@@ -1138,9 +1138,9 @@ dependencies = [
 
 [[package]]
 name = "futures-channel"
-version = "0.3.26"
+version = "0.3.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2e5317663a9089767a1ec00a487df42e0ca174b61b4483213ac24448e4664df5"
+checksum = "164713a5a0dcc3e7b4b1ed7d3b433cabc18025386f9339346e8daf15963cf7ac"
 dependencies = [
  "futures-core",
  "futures-sink",
@@ -1148,15 +1148,15 @@ dependencies = [
 
 [[package]]
 name = "futures-core"
-version = "0.3.26"
+version = "0.3.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ec90ff4d0fe1f57d600049061dc6bb68ed03c7d2fbd697274c41805dcb3f8608"
+checksum = "86d7a0c1aa76363dac491de0ee99faf6941128376f1cf96f07db7603b7de69dd"
 
 [[package]]
 name = "futures-executor"
-version = "0.3.26"
+version = "0.3.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e8de0a35a6ab97ec8869e32a2473f4b1324459e14c29275d14b10cb1fd19b50e"
+checksum = "1997dd9df74cdac935c76252744c1ed5794fac083242ea4fe77ef3ed60ba0f83"
 dependencies = [
  "futures-core",
  "futures-task",
@@ -1176,9 +1176,9 @@ dependencies = [
 
 [[package]]
 name = "futures-io"
-version = "0.3.26"
+version = "0.3.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bfb8371b6fb2aeb2d280374607aeabfc99d95c72edfe51692e42d3d7f0d08531"
+checksum = "89d422fa3cbe3b40dca574ab087abb5bc98258ea57eea3fd6f1fa7162c778b91"
 
 [[package]]
 name = "futures-lite"
@@ -1197,9 +1197,9 @@ dependencies = [
 
 [[package]]
 name = "futures-macro"
-version = "0.3.26"
+version = "0.3.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "95a73af87da33b5acf53acfebdc339fe592ecf5357ac7c0a7734ab9d8c876a70"
+checksum = "3eb14ed937631bd8b8b8977f2c198443447a8355b6e3ca599f38c975e5a963b6"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1208,21 +1208,21 @@ dependencies = [
 
 [[package]]
 name = "futures-sink"
-version = "0.3.26"
+version = "0.3.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f310820bb3e8cfd46c80db4d7fb8353e15dfff853a127158425f31e0be6c8364"
+checksum = "ec93083a4aecafb2a80a885c9de1f0ccae9dbd32c2bb54b0c3a65690e0b8d2f2"
 
 [[package]]
 name = "futures-task"
-version = "0.3.26"
+version = "0.3.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dcf79a1bf610b10f42aea489289c5a2c478a786509693b80cd39c44ccd936366"
+checksum = "fd65540d33b37b16542a0438c12e6aeead10d4ac5d05bd3f805b8f35ab592879"
 
 [[package]]
 name = "futures-util"
-version = "0.3.26"
+version = "0.3.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9c1d6de3acfef38d2be4b1f543f553131788603495be83da675e180c8d6b7bd1"
+checksum = "3ef6b17e481503ec85211fed8f39d1970f128935ca1f814cd32ac4a6842e84ab"
 dependencies = [
  "futures-channel",
  "futures-core",
@@ -1503,9 +1503,9 @@ checksum = "c4a1e36c821dbe04574f602848a19f742f4fb3c98d40449f11bcad18d6b17421"
 
 [[package]]
 name = "hyper"
-version = "0.14.24"
+version = "0.14.25"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5e011372fa0b68db8350aa7a248930ecc7839bf46d8485577d69f117a75f164c"
+checksum = "cc5e554ff619822309ffd57d8734d77cd5ce6238bc956f037ea06c58238c9899"
 dependencies = [
  "bytes",
  "futures-channel",
@@ -2953,7 +2953,7 @@ dependencies = [
 [[package]]
 name = "rustpython-ast"
 version = "0.2.0"
-source = "git+https://github.com/RustPython/RustPython#87728c44527272ece739cddbb4942ad7e176dd79"
+source = "git+https://github.com/RustPython/RustPython#415cdb1ef9b832fbca858a05f6894087e133dd31"
 dependencies = [
  "num-bigint",
  "rustpython-compiler-core",
@@ -2962,7 +2962,7 @@ dependencies = [
 [[package]]
 name = "rustpython-compiler-core"
 version = "0.2.0"
-source = "git+https://github.com/RustPython/RustPython#87728c44527272ece739cddbb4942ad7e176dd79"
+source = "git+https://github.com/RustPython/RustPython#415cdb1ef9b832fbca858a05f6894087e133dd31"
 dependencies = [
  "bitflags",
  "bstr",
@@ -2975,7 +2975,7 @@ dependencies = [
 [[package]]
 name = "rustpython-parser"
 version = "0.2.0"
-source = "git+https://github.com/RustPython/RustPython#87728c44527272ece739cddbb4942ad7e176dd79"
+source = "git+https://github.com/RustPython/RustPython#415cdb1ef9b832fbca858a05f6894087e133dd31"
 dependencies = [
  "ahash",
  "anyhow",
@@ -3667,9 +3667,9 @@ dependencies = [
 
 [[package]]
 name = "swc_common"
-version = "0.29.35"
+version = "0.29.37"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2d515be281f603cb97afaa89896aca5e5c748fde11c7f926e35cdaa8ff8da705"
+checksum = "5005cd73617e18592faa31298225b26f1c407b84a681d67efb735c3d3458e101"
 dependencies = [
  "ahash",
  "ast_node",
@@ -4052,9 +4052,9 @@ checksum = "3ab8ed2edee10b50132aed5f331333428b011c99402b5a534154ed15746f9622"
 
 [[package]]
 name = "toml_edit"
-version = "0.19.4"
+version = "0.19.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9a1eb0622d28f4b9c90adc4ea4b2b46b47663fde9ac5fafcb14a1369d5508825"
+checksum = "7082a95d48029677a28f181e5f6422d0c8339ad8396a39d3f33d62a90c1f6c30"
 dependencies = [
  "indexmap",
  "toml_datetime",
@@ -4274,7 +4274,7 @@ checksum = "497961ef93d974e23eb6f433eb5fe1b7930b659f06d12dec6fc44a8f554c0bba"
 [[package]]
 name = "typify"
 version = "0.0.11-dev"
-source = "git+https://github.com/oxidecomputer/typify#18e7faf1957812626e3bf459e20fbe16785de2d4"
+source = "git+https://github.com/oxidecomputer/typify#d1cae0f7d5115782c9557a46396dae786ad5f592"
 dependencies = [
  "typify-impl",
  "typify-macro",
@@ -4283,7 +4283,7 @@ dependencies = [
 [[package]]
 name = "typify-impl"
 version = "0.0.11-dev"
-source = "git+https://github.com/oxidecomputer/typify#18e7faf1957812626e3bf459e20fbe16785de2d4"
+source = "git+https://github.com/oxidecomputer/typify#d1cae0f7d5115782c9557a46396dae786ad5f592"
 dependencies = [
  "heck",
  "log",
@@ -4301,7 +4301,7 @@ dependencies = [
 [[package]]
 name = "typify-macro"
 version = "0.0.11-dev"
-source = "git+https://github.com/oxidecomputer/typify#18e7faf1957812626e3bf459e20fbe16785de2d4"
+source = "git+https://github.com/oxidecomputer/typify#d1cae0f7d5115782c9557a46396dae786ad5f592"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -4742,7 +4742,7 @@ checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
 
 [[package]]
 name = "windmill"
-version = "1.74.2"
+version = "1.75.0"
 dependencies = [
  "anyhow",
  "axum",
@@ -4769,7 +4769,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-api"
-version = "1.74.2"
+version = "1.75.0"
 dependencies = [
  "anyhow",
  "argon2",
@@ -4824,7 +4824,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-api-client"
-version = "1.74.2"
+version = "1.75.0"
 dependencies = [
  "base64 0.21.0",
  "chrono",
@@ -4839,7 +4839,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-audit"
-version = "1.74.2"
+version = "1.75.0"
 dependencies = [
  "chrono",
  "serde",
@@ -4852,7 +4852,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-common"
-version = "1.74.2"
+version = "1.75.0"
 dependencies = [
  "anyhow",
  "axum",
@@ -4877,7 +4877,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser"
-version = "1.74.2"
+version = "1.75.0"
 dependencies = [
  "serde",
  "serde_json",
@@ -4885,7 +4885,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-bash"
-version = "1.74.2"
+version = "1.75.0"
 dependencies = [
  "anyhow",
  "itertools",
@@ -4900,7 +4900,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-go"
-version = "1.74.2"
+version = "1.75.0"
 dependencies = [
  "anyhow",
  "itertools",
@@ -4912,7 +4912,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-py"
-version = "1.74.2"
+version = "1.75.0"
 dependencies = [
  "anyhow",
  "itertools",
@@ -4927,7 +4927,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-ts"
-version = "1.74.2"
+version = "1.75.0"
 dependencies = [
  "anyhow",
  "deno_core",
@@ -4941,7 +4941,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-queue"
-version = "1.74.2"
+version = "1.75.0"
 dependencies = [
  "anyhow",
  "chrono",
@@ -4964,7 +4964,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-worker"
-version = "1.74.2"
+version = "1.75.0"
 dependencies = [
  "anyhow",
  "async-recursion",
diff --git a/backend/Cargo.toml b/backend/Cargo.toml
index f34f03447b..4a085f16bf 100644
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "windmill"
-version = "1.74.2"
+version = "1.75.0"
 authors.workspace = true
 edition.workspace = true
 
@@ -19,7 +19,7 @@ members = [
 ]
 
 [workspace.package]
-version = "1.74.2"
+version = "1.75.0"
 authors = ["Ruben Fiszel <ruben@windmill.dev>"]
 edition = "2021"
 
diff --git a/backend/windmill-api/openapi.yaml b/backend/windmill-api/openapi.yaml
index 5033b3504e..9dee91477a 100644
--- a/backend/windmill-api/openapi.yaml
+++ b/backend/windmill-api/openapi.yaml
@@ -1,7 +1,7 @@
 openapi: "3.0.3"
 
 info:
-  version: 1.74.2
+  version: 1.75.0
   title: Windmill API
 
   contact:
diff --git a/cli/main.ts b/cli/main.ts
index cd92062ce1..024940b81c 100644
--- a/cli/main.ts
+++ b/cli/main.ts
@@ -13,7 +13,7 @@ import sync from "./sync.ts";
 import { tryResolveVersion } from "./context.ts";
 import { GlobalOptions } from "./types.ts";
 
-const VERSION = "v1.74.2";
+const VERSION = "v1.75.0";
 
 let command: any = new Command()
   .name("wmill")
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ebb0e97fd2..e444873ab4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "windmill",
-	"version": "1.74.2",
+	"version": "1.75.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "windmill",
-			"version": "1.74.2",
+			"version": "1.75.0",
 			"dependencies": {
 				"@fortawesome/free-brands-svg-icons": "^6.2.1",
 				"@fortawesome/free-solid-svg-icons": "^6.2.1",
diff --git a/frontend/package.json b/frontend/package.json
index ac7544c7ef..9785c52395 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "windmill",
-	"version": "1.74.2",
+	"version": "1.75.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
diff --git a/lsp/Pipfile b/lsp/Pipfile
index 479270ca97..6375fa9e71 100644
--- a/lsp/Pipfile
+++ b/lsp/Pipfile
@@ -4,8 +4,8 @@ verify_ssl = true
 name = "pypi"
 
 [packages]
-wmill = ">=1.74.2"
-wmill_pg = ">=1.74.2"
+wmill = ">=1.75.0"
+wmill_pg = ">=1.75.0"
 sendgrid = "*"
 mysql-connector-python = "*"
 pymongo = "*"
diff --git a/openflow.openapi.yaml b/openflow.openapi.yaml
index 5e6e97224e..b8b0b91dc7 100644
--- a/openflow.openapi.yaml
+++ b/openflow.openapi.yaml
@@ -1,7 +1,7 @@
 openapi: "3.0.3"
 
 info:
-  version: 1.74.2
+  version: 1.75.0
   title: OpenFlow Spec
   contact:
     name: Ruben Fiszel
diff --git a/python-client/wmill/pyproject.toml b/python-client/wmill/pyproject.toml
index 5b76eeb0f8..aa0ef773b2 100644
--- a/python-client/wmill/pyproject.toml
+++ b/python-client/wmill/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "wmill"
-version = "1.74.2"
+version = "1.75.0"
 description = "A client library for accessing Windmill server wrapping the Windmill client API"
 license = "Apache-2.0"
 homepage = "https://windmill.dev"
@@ -16,7 +16,7 @@ include = ["wmill/py.typed"]
 
 [tool.poetry.dependencies]
 python = "^3.7"
-windmill-api = "^1.74.2"
+windmill-api = "^1.75.0"
 
 [build-system]
 requires = ["poetry>=1.0.2", "poetry-dynamic-versioning"]
diff --git a/python-client/wmill_pg/pyproject.toml b/python-client/wmill_pg/pyproject.toml
index 2e42f34624..9ee15893fe 100644
--- a/python-client/wmill_pg/pyproject.toml
+++ b/python-client/wmill_pg/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "wmill-pg"
-version = "1.74.2"
+version = "1.75.0"
 description = "An extension client for the wmill client library focused on pg"
 license = "Apache-2.0"
 homepage = "https://windmill.dev"
diff --git a/version.txt b/version.txt
index a6e970de6f..7c7053aa23 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-1.74.2
+1.75.0

From 82c139ed0992be401e250cfb7ecc0fca61b76772 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Sun, 12 Mar 2023 20:58:06 +0100
Subject: [PATCH 8/9] feat(frontend): Copy, Cut and Paste (#1279)

* feat(frontend): add copy, paste and cut

* feat(frontend): simplify code

* feat(frontend): add apple modifiers

---------

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>
---
 .../apps/components/layout/AppTabs.svelte     |  13 +-
 .../components/apps/editor/AppEditor.svelte   |   2 +-
 .../apps/editor/AppEditorHeader.svelte        |  36 ++---
 .../apps/editor/ComponentHeader.svelte        |   4 +-
 .../components/apps/editor/GridEditor.svelte  |   3 +-
 .../apps/editor/SubGridEditor.svelte          |   4 +-
 .../lib/components/apps/editor/appUtils.ts    |  93 ++++++------
 .../component/ComponentNavigation.svelte      | 133 +++++++++++++++---
 .../InlineScriptEditor.svelte                 |   1 -
 .../settingsPanel/ComponentPanel.svelte       |  60 ++++----
 .../apps/editor/settingsPanel/GridTab.svelte  |  16 +--
 .../settingsPanel/MoveToOtherGrid.svelte      | 123 ----------------
 .../lib/components/common/CloseButton.svelte  |  18 +++
 .../common/drawer/DrawerContent.svelte        |   8 +-
 .../src/lib/components/common/tabs/Tab.svelte |   1 +
 .../src/lib/components/graph/FlowGraph.svelte |   2 +-
 16 files changed, 254 insertions(+), 263 deletions(-)
 delete mode 100644 frontend/src/lib/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte
 create mode 100644 frontend/src/lib/components/common/CloseButton.svelte

diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index e3ca52d390..7986c7bb54 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Tab, Tabs } from '$lib/components/common'
 	import { getContext, onMount } from 'svelte'
+	import { initOutput } from '../../editor/appUtils'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
@@ -27,6 +28,12 @@
 	let noPadding: boolean | undefined = undefined
 	let tabHeight: number = 0
 
+	$: outputs = $worldStore
+		? initOutput($worldStore, id, {
+				selectedTabIndex: 0
+		  })
+		: undefined
+
 	function handleTabSelection() {
 		const selectedIndex = tabs?.indexOf(selected)
 		outputs?.selectedTabIndex.set(selectedIndex, true)
@@ -76,10 +83,6 @@
 
 	$: selected && handleTabSelection()
 
-	$: outputs = $worldStore?.outputsById[id] as {
-		selectedTabIndex: Output<number>
-	}
-
 	$: selectedIndex = tabs?.indexOf(selected) ?? -1
 
 	$: css = concatCustomCss($app.css?.tabscomponent, customCss)
@@ -88,7 +91,7 @@
 <InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
 
 <div>
-	<div bind:clientHeight={tabHeight} on:pointerdown|stopPropagation>
+	<div bind:clientHeight={tabHeight}>
 		<Tabs bind:selected class={css?.tabRow?.class} style={css?.tabRow?.style}>
 			{#each tabs ?? [] as res}
 				<Tab
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index 0bf0e68936..c6608ddbe3 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -250,7 +250,7 @@
 								</div>
 							</Tab>
 							<div slot="content" class="h-full overflow-y-auto pb-4">
-								<TabContent class="overflow-auto" value="settings">
+								<TabContent class="overflow-auto h-full" value="settings">
 									{#if $selectedComponent !== undefined}
 										<SettingsPanel />
 									{:else}
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 5ca287ef8e..1d31dfec09 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -491,12 +491,12 @@
 				<ToggleButton position="left" value="dnd" size="xs">
 					<div class="inline-flex gap-1 items-center">
 						<Pencil size={14} />
-						<span class="hidden md:inline">Editor</span>
+						<span class="hidden lg:inline">Editor</span>
 					</div>
 				</ToggleButton>
 				<ToggleButton position="right" value="preview" size="xs">
 					<div class="inline-flex gap-1 items-center">
-						<Eye size={14} /> <span class="hidden md:inline">Preview</span>
+						<Eye size={14} /> <span class="hidden lg:inline">Preview</span>
 					</div>
 				</ToggleButton>
 			</ToggleButtonGroup>
@@ -530,19 +530,21 @@
 		</div>
 	</div>
 	{#if $focusedGrid !== undefined}
-		<Badge color="indigo">
-			<div class="flex flex-row gap-2 justify-center items-center">
-				<div>{`Sub grid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
-				<button
-					on:click={() => {
-						$selectedComponent = undefined
-						$focusedGrid = undefined
-					}}
-				>
-					<X size={14} />
-				</button>
-			</div>
-		</Badge>
+		<div class="hidden lg:block">
+			<Badge color="indigo">
+				<div class="flex flex-row gap-2 justify-center items-center">
+					<div>{`Sub grid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
+					<button
+						on:click={() => {
+							$selectedComponent = undefined
+							$focusedGrid = undefined
+						}}
+					>
+						<X size={14} />
+					</button>
+				</div>
+			</Badge>
+		</div>
 	{/if}
 
 	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
@@ -592,7 +594,7 @@
 				variant="border"
 				startIcon={{ icon: faBug }}
 			>
-				<span class="hidden md:inline">Debug Runs</span>
+				<span class="hidden xl:inline">Debug Runs</span>
 			</Button>
 		</span>
 		<AppExportButton bind:this={appExport} />
@@ -603,7 +605,7 @@
 			variant="border"
 			startIcon={{ icon: faExternalLink }}
 		>
-			<span class="hidden md:inline">Publish</span>
+			<span class="hidden xl:inline">Publish</span>
 		</Button>
 		{#if appPath == ''}
 			<Button
diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
index 1a280e5ed4..6411ab5abd 100644
--- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
@@ -41,13 +41,14 @@
 
 {#if pointerdown || selected || hover}
 	<button
-		title="Position locking"
+		title="Lock Position"
 		class={classNames(
 			'text-gray-800 px-1 text-2xs py-0.5 font-bold w-fit shadow border border-gray-300 absolute  -top-1  right-[2.5rem] z-50 cursor-pointer',
 			' hover:bg-gray-300',
 			selected ? 'bg-gray-200/80' : 'bg-gray-200/80'
 		)}
 		on:click={() => dispatch('lock')}
+		on:pointerdown|stopPropagation
 	>
 		{#if locked}
 			<Anchor aria-label="Unlock position" size={14} class="text-orange-500" />
@@ -63,6 +64,7 @@
 			selected ? 'bg-gray-200/80' : 'bg-gray-200/80'
 		)}
 		on:click={() => dispatch('expand')}
+		on:pointerdown|stopPropagation
 	>
 		<Expand aria-label="Expand position" size={14} />
 	</button>
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index f4380d70bd..c1e15567ce 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -218,8 +218,9 @@
 								}}
 								on:expand={() => {
 									push(history, $app)
+									$selectedComponent = gridComponent.data.id
 									expandGriditem($app.grid, gridComponent, $breakpoint)
-									$app = { ...$app }
+									$app = $app
 								}}
 							/>
 						</div>
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index d4cfe0f5c2..8e38521068 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -136,11 +136,11 @@
 									if (!parentGridItem) {
 										return
 									}
-
+									$selectedComponent = gridComponent.data.id
 									push(history, $app)
 
 									expandGriditem(subGrid, gridComponent, $breakpoint, parentGridItem)
-									$app = { ...$app }
+									$app = $app
 								}}
 							/>
 						</div>
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 7b81d3aa97..2d6cac5e77 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -4,6 +4,7 @@ import { getRecommendedDimensionsByComponent, type AppComponent } from './compon
 import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper'
 import { gridColumns } from '../gridUtils'
 import { allItems } from '../utils'
+import type { Output, World } from '../rx'
 
 function findGridItemById(
 	root: GridItem[],
@@ -18,7 +19,7 @@ function findGridItemById(
 	return undefined
 }
 
-export function findGridItemParentId(app: App, id: string): string | undefined {
+export function findGridItemParentGrid(app: App, id: string): string | undefined {
 	const gridItem = app.grid.find((x) => x.id === id)
 	if (gridItem) {
 		return undefined
@@ -27,7 +28,7 @@ export function findGridItemParentId(app: App, id: string): string | undefined {
 			const subGrid = app.subgrids[key]
 			const gridItem = subGrid.find((x) => x.id === id)
 			if (gridItem) {
-				return key.split('-')[0]
+				return key
 			}
 		}
 	}
@@ -46,9 +47,6 @@ export function getNextGridItemId(app: App): string {
 }
 
 export function createNewGridItem(grid: GridItem[], id: string, data: AppComponent): GridItem {
-	const appComponent = data
-
-	appComponent.id = id
 
 	const newComponent = {
 		resizable: true,
@@ -57,7 +55,8 @@ export function createNewGridItem(grid: GridItem[], id: string, data: AppCompone
 		y: 0
 	}
 
-	let newData: AppComponent = JSON.parse(JSON.stringify(appComponent))
+	let newData: AppComponent = JSON.parse(JSON.stringify(data))
+	newData.id = id
 
 	const newItem: GridItem = {
 		data: newData,
@@ -65,7 +64,7 @@ export function createNewGridItem(grid: GridItem[], id: string, data: AppCompone
 	}
 
 	gridColumns.forEach((column) => {
-		const rec = getRecommendedDimensionsByComponent(appComponent.type, column)
+		const rec = getRecommendedDimensionsByComponent(newData.type, column)
 
 		newItem[column] = {
 			...newComponent,
@@ -84,6 +83,16 @@ export function createNewGridItem(grid: GridItem[], id: string, data: AppCompone
 	return newItem
 }
 
+export function getGridItems(app: App, focusedGrid: FocusedGrid | undefined): GridItem[] {
+	if (!focusedGrid) {
+		return app.grid
+	} else {
+		const { parentComponentId, subGridIndex } = focusedGrid
+		const key = `${parentComponentId}-${subGridIndex ?? 0}`
+		return app?.subgrids?.[key] ?? []
+	}
+}
+
 export function insertNewGridItem(
 	app: App,
 	data: AppComponent,
@@ -96,18 +105,7 @@ export function insertNewGridItem(
 		app.subgrids = {}
 	}
 
-	if (!focusedGrid) {
-		const newItem = createNewGridItem(app.grid, id, data)
-		app.grid.push(newItem)
-	} else {
-		const { parentComponentId, subGridIndex } = focusedGrid
 
-		const key = `${parentComponentId}-${subGridIndex ?? 0}`
-
-		const subGrid = app.subgrids[key] ?? []
-		subGrid.push(createNewGridItem(subGrid, id, data))
-		app.subgrids[key] = subGrid
-	}
 	// We only want to set subgrids when we are not moving
 	if (!keepId) {
 		for (let i = 0; i < (data.numberOfSubgrids ?? 0); i++) {
@@ -115,6 +113,16 @@ export function insertNewGridItem(
 		}
 	}
 
+
+	const key = focusedGrid ? `${focusedGrid?.parentComponentId}-${focusedGrid?.subGridIndex ?? 0}` : undefined
+	let grid = focusedGrid ? app.subgrids[key!] : app.grid
+
+	const newItem = createNewGridItem(grid, id, data)
+	grid.push(newItem)
+
+	if (focusedGrid) {
+		app.subgrids[key!] = grid
+	}
 	return id
 }
 
@@ -169,27 +177,7 @@ export function deleteGridItem(
 	return components
 }
 
-export function duplicateGridItem(
-	app: App,
-	parent: string | undefined,
-	id: string
-): string | undefined {
-	const gridItem = findGridItem(app, id)
 
-	if (gridItem) {
-		const newId = getNextGridItemId(app)
-		const newItem = JSON.parse(JSON.stringify(gridItem))
-		newItem.id = newId
-		newItem.data.id = newId
-
-		let focusedGrid = parent
-			? { parentComponentId: parent.split('-')[0], subGridIndex: Number(parent.split('-')[1]) }
-			: undefined
-
-		return insertNewGridItem(app, newItem.data, focusedGrid)
-	}
-	return undefined
-}
 
 type AvailableSpace = {
 	left: number
@@ -206,7 +194,7 @@ export function findAvailableSpace(
 ): AvailableSpace | undefined {
 	if (gridItem) {
 		const breakpoint = editorBreakpoint === 'sm' ? 3 : 12
-		const maxHeight = parentGridItem ? parentGridItem[breakpoint].h - 1 : 12
+		const maxHeight = parentGridItem ? parentGridItem[breakpoint].h - 1 : 16
 		const maxWidth = 12
 
 		const availableSpace = {
@@ -297,6 +285,22 @@ function isOverlapping(item1: any, item2: any) {
 	)
 }
 
+type Outputtable<Type> = {
+	-readonly [Property in keyof Type]: Output<Type[Property]>;
+};
+
+
+export function initOutput<I extends Record<string, any>>(world: World, id: string, init: I): Outputtable<I> {
+	const output = world.outputsById[id] as Outputtable<I>
+	if (init) {
+		for (const key in init) {
+			if (output && output[key] && output[key].peak() == undefined) {
+				output[key].set(init[key] as any)
+			}
+		}
+	}
+	return output
+}
 export function expandGriditem(
 	grid: GridItem[],
 	gridComponent: GridItem,
@@ -305,16 +309,17 @@ export function expandGriditem(
 ) {
 	const availableSpace = findAvailableSpace(grid, gridComponent, $breakpoint, parentGridItem)
 
+	console.log(availableSpace)
 	if (!availableSpace) {
 		return
 	}
 
 	const { left, right, top, bottom } = availableSpace
 	const width = $breakpoint === 'sm' ? 3 : 12
-	const previousGridItem = JSON.parse(JSON.stringify(gridComponent[width]))
+	const item = gridComponent[width]
 
-	gridComponent[width].x = previousGridItem.x - left
-	gridComponent[width].y = previousGridItem.y - top
-	gridComponent[width].w = previousGridItem.w + left + right
-	gridComponent[width].h = previousGridItem.h + top + bottom
+	item.x = item.x - left
+	item.y = item.y - top
+	item.w = item.w + left + right
+	item.h = item.h + top + bottom
 }
diff --git a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
index 641e2cc7d0..694e0c7c89 100644
--- a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
@@ -1,23 +1,35 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
+	import {
+		deleteGridItem,
+		findGridItem,
+		findGridItemParentGrid,
+		getAllSubgridsAndComponentIds,
+		getGridItems,
+		insertNewGridItem
+	} from '../appUtils'
 	import type { AppEditorContext, AppViewerContext, EditorBreakpoint, GridItem } from '../../types'
-	import { findGridItemParentId } from '../appUtils'
+	import { push } from '$lib/history'
+	import { sendUserToast } from '$lib/utils'
 
 	const { app, selectedComponent, breakpoint, focusedGrid } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	const { componentControl } = getContext<AppEditorContext>('AppEditorContext')
+	const { componentControl, history } = getContext<AppEditorContext>('AppEditorContext')
+
+	let tempGridItem: GridItem | undefined = undefined
+	let copiedGridItem: GridItem | undefined = undefined
 
 	function getSortedGridItemsOfChildren(): GridItem[] {
 		if (!$focusedGrid) {
-			return sortGridItems($app.grid, $breakpoint)
+			return sortGridItemsPosition($app.grid, $breakpoint)
 		}
 
 		if (!$app.subgrids) {
 			return []
 		}
 
-		return sortGridItems(
+		return sortGridItemsPosition(
 			$app.subgrids[`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`],
 			$breakpoint
 		)
@@ -25,14 +37,14 @@
 
 	function getSortedGridItemsOfGrid(): GridItem[] {
 		if ($app.grid.find((item) => item.id === $selectedComponent)) {
-			return sortGridItems($app.grid, $breakpoint)
+			return sortGridItemsPosition($app.grid, $breakpoint)
 		}
 
 		if (!$app.subgrids) {
 			return []
 		}
 
-		return sortGridItems(
+		return sortGridItemsPosition(
 			Object.values($app.subgrids ?? {}).find((grid) =>
 				grid.find((item) => item.id === $selectedComponent)
 			) ?? [],
@@ -79,7 +91,7 @@
 				return
 			}
 
-			const sortedGridItems = sortGridItems(subgrid, $breakpoint)
+			const sortedGridItems = sortGridItemsPosition(subgrid, $breakpoint)
 
 			if (sortedGridItems) {
 				$selectedComponent = sortedGridItems[0].id
@@ -88,23 +100,88 @@
 		}
 	}
 
+	function handleEscape(event: KeyboardEvent) {
+		$selectedComponent = undefined
+		$focusedGrid = undefined
+		event.preventDefault()
+	}
+
+	function handleArrowUp(event: KeyboardEvent) {
+		if (!$selectedComponent) return
+		let parentId = findGridItemParentGrid($app, $selectedComponent)?.split('-')[0]
+		if (parentId) {
+			$selectedComponent = parentId
+		} else {
+			$selectedComponent = undefined
+			$focusedGrid = undefined
+		}
+	}
+
+	function handleCopy(event: KeyboardEvent) {
+		if (!$selectedComponent) {
+			return
+		}
+		tempGridItem = undefined
+		copiedGridItem = findGridItem($app, $selectedComponent)
+	}
+
+	function handleCut(event: KeyboardEvent) {
+		if (!$selectedComponent) {
+			return
+		}
+		push(history, $app)
+
+		const gridItem = findGridItem($app, $selectedComponent)
+		copiedGridItem = gridItem
+
+		if (!gridItem) {
+			return
+		}
+
+		// Store the grid item in a temp variable so we can paste it later
+		tempGridItem = gridItem
+	}
+
+	function handlePaste(event: KeyboardEvent) {
+		push(history, $app)
+
+		if (tempGridItem) {
+			if (
+				$focusedGrid &&
+				getAllSubgridsAndComponentIds($app, tempGridItem.data)[0].includes(
+					`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`
+				)
+			) {
+				sendUserToast('Cannot paste a component into itself', true)
+				return
+			}
+			let parentGrid = findGridItemParentGrid($app, tempGridItem.data.id)
+			const grid = parentGrid ? $app.subgrids![parentGrid] : $app.grid
+			let idx = grid.findIndex((item) => {
+				return item.id == tempGridItem!.data.id
+			})
+			if (idx > -1) {
+				grid.splice(idx, 1)
+			}
+
+			insertNewGridItem($app, tempGridItem.data, $focusedGrid, true)
+			copiedGridItem = tempGridItem
+			tempGridItem = undefined
+		} else if (copiedGridItem) {
+			insertNewGridItem($app, copiedGridItem.data, $focusedGrid, false)
+		}
+
+		$app = $app
+	}
+
 	function keydown(event: KeyboardEvent) {
 		switch (event.key) {
 			case 'Escape':
-				$selectedComponent = undefined
-				event.preventDefault()
+				handleEscape(event)
 				break
 
 			case 'ArrowUp': {
-				if (!$selectedComponent) return
-				let parentId = findGridItemParentId($app, $selectedComponent)
-				if (parentId) {
-					$selectedComponent = parentId
-				} else {
-					$selectedComponent = undefined
-					$focusedGrid = undefined
-				}
-				break
+				handleArrowUp(event)
 			}
 
 			case 'ArrowDown': {
@@ -122,12 +199,30 @@
 				break
 			}
 
+			case 'c':
+				if (event.ctrlKey || event.metaKey) {
+					handleCopy(event)
+				}
+				break
+
+			case 'v':
+				if (event.ctrlKey || event.metaKey) {
+					handlePaste(event)
+				}
+				break
+
+			case 'x':
+				if (event.ctrlKey || event.metaKey) {
+					handleCut(event)
+				}
+				break
+
 			default:
 				break
 		}
 	}
 
-	function sortGridItems(gridItems: GridItem[], breakpoint: EditorBreakpoint): GridItem[] {
+	function sortGridItemsPosition(gridItems: GridItem[], breakpoint: EditorBreakpoint): GridItem[] {
 		return gridItems.sort((a: GridItem, b: GridItem) => {
 			const width = breakpoint === 'lg' ? 12 : 3
 
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index f801e2b018..05456179b6 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -8,7 +8,6 @@
 	import { inferArgs } from '$lib/infer'
 	import type { Schema } from '$lib/common'
 	import Badge from '$lib/components/common/badge/Badge.svelte'
-	import { fly } from 'svelte/transition'
 	import Editor from '$lib/components/Editor.svelte'
 	import { emptySchema, scriptLangToEditorLang } from '$lib/utils'
 	import Popover from '../../../Popover.svelte'
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 9b1bb408d1..d381e4db7f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -19,14 +19,12 @@
 	import TemplateEditor from '$lib/components/TemplateEditor.svelte'
 	import type { AppComponent } from '../component'
 	import CssProperty from '../componentsPanel/CssProperty.svelte'
-	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
 	import GridTab from './GridTab.svelte'
-	import { duplicateGridItem } from '../appUtils'
 	import { deleteGridItem } from '../appUtils'
-	import MoveToOtherGrid from './MoveToOtherGrid.svelte'
 	import GridPane from './GridPane.svelte'
 	import { slide } from 'svelte/transition'
 	import { push } from '$lib/history'
+	import Kbd from '$lib/components/common/kbd/Kbd.svelte'
 
 	export let component: AppComponent
 	export let rowColumns = false
@@ -47,13 +45,6 @@
 
 	const { history } = getContext<AppEditorContext>('AppEditorContext')
 
-	function duplicateElement(id: string) {
-		push(history, $app)
-		$dirtyStore = true
-		const newId = duplicateGridItem($app, parent, id)
-		$selectedComponent = newId
-	}
-
 	function removeGridElement() {
 		push(history, $app)
 		$selectedComponent = undefined
@@ -96,7 +87,7 @@
 <svelte:window on:keydown={keydown} />
 
 {#if component}
-	<div class="flex flex-col min-w-[150px] w-full divide-y">
+	<div class="flex min-h-full flex-col min-w-[150px] w-full divide-y">
 		{#if component.componentInput}
 			<PanelSection
 				smallPadding
@@ -195,6 +186,8 @@
 			<Recompute bind:recomputeIds={component.recomputeIds} ownId={component.id} />
 		{/if}
 
+		<div class="grow shrink" />
+
 		{#if Object.keys(component.customCss ?? {}).length > 0}
 			<PanelSection title="Custom CSS">
 				<div slot="action">
@@ -222,8 +215,20 @@
 		{/if}
 
 		{#if duplicateMoveAllowed}
-			<PanelSection title="Duplicate">
-				<Button
+			<PanelSection title="Copy/Move">
+				<div slot="action">
+					<Button size="xs" color="red" variant="border" on:click={removeGridElement}>
+						Delete&nbsp;&nbsp;
+						<Kbd>Del</Kbd>
+					</Button>
+				</div>
+				<div class="flex flex-col">
+					<div
+						><span class="text-gray-600 text-xs mr-2">Copy:</span><Kbd>CTRL+C</Kbd> + <Kbd
+							>CTRL+V</Kbd
+						></div
+					>
+					<!-- <Button
 					size="xs"
 					color="dark"
 					startIcon={{ icon: faCopy }}
@@ -234,24 +239,19 @@
 					}}
 				>
 					Duplicate component: {component.id}
-				</Button>
-			</PanelSection>
-
-			<PanelSection title="Move to other grid">
-				<MoveToOtherGrid bind:component {parent} />
+				</Button> -->
+					<div
+						><span class="text-gray-600 text-xs mr-2">Move:</span><Kbd>CTRL+X</Kbd> + <Kbd
+							>CTRL+V</Kbd
+						></div
+					>
+					<div
+						><span class="text-gray-600 text-xs mr-2">Navigate:</span><Kbd>&leftarrow;</Kbd><Kbd
+							>&uparrow;</Kbd
+						><Kbd>&rightarrow;</Kbd><Kbd>ESC</Kbd></div
+					>
+				</div>
 			</PanelSection>
 		{/if}
-
-		<PanelSection title="Danger zone">
-			<Button
-				size="xs"
-				color="red"
-				variant="border"
-				startIcon={{ icon: faTrashAlt }}
-				on:click={removeGridElement}
-			>
-				Delete component: {component.id}
-			</Button>
-		</PanelSection>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
index d166ccdd8c..70245a8106 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import Button from '$lib/components/common/button/Button.svelte'
+	import CloseButton from '$lib/components/common/CloseButton.svelte'
 	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+	import { CrossIcon } from 'lucide-svelte'
 	import { getContext } from 'svelte'
 	import type { AppViewerContext } from '../../types'
 	import { deleteGridItem } from '../appUtils'
@@ -56,18 +58,8 @@
 			<div class="w-full flex flex-row gap-2 items-center relative">
 				<input on:keydown|stopPropagation type="text" bind:value />
 
-				<div class="absolute top-1 right-1">
-					<Button
-						size="xs"
-						color="light"
-						variant="border"
-						on:click={() => {
-							deleteSubgrid(index)
-						}}
-						iconOnly
-						btnClasses="!text-red-500"
-						startIcon={{ icon: faTrashAlt }}
-					/>
+				<div class="absolute right-1">
+					<CloseButton noBg on:close={() => deleteSubgrid(index)} />
 				</div>
 			</div>
 		{/each}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte
deleted file mode 100644
index 7aec63cfaa..0000000000
--- a/frontend/src/lib/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte
+++ /dev/null
@@ -1,123 +0,0 @@
-<script lang="ts">
-	import { Button } from '$lib/components/common'
-	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
-	import { push } from '$lib/history'
-	import { faCopy } from '@fortawesome/free-solid-svg-icons'
-	import { getContext } from 'svelte'
-	import type { App, AppEditorContext, AppViewerContext } from '../../types'
-	import {
-		createNewGridItem,
-		deleteGridItem,
-		findGridItem,
-		getAllSubgridsAndComponentIds,
-		insertNewGridItem
-	} from '../appUtils'
-	import type { AppComponent } from '../component'
-
-	export let component: AppComponent | undefined
-	export let parent: string | undefined
-
-	let selectedOption: string
-
-	const { app } = getContext<AppViewerContext>('AppViewerContext')
-	const { history } = getContext<AppEditorContext>('AppEditorContext')
-
-	function listAllSubGrids(app: App) {
-		return app.subgrids ? Object.keys(app.subgrids) : []
-	}
-
-	function findAndDelete(id: string) {
-		const node = findGridItem($app, id)
-
-		if (!node) {
-			return
-		}
-
-		const data: AppComponent = JSON.parse(JSON.stringify(node.data))
-		const shouldKeepSubGrid = data.numberOfSubgrids ? data.numberOfSubgrids >= 1 : false
-
-		$dirtyStore = true
-
-		deleteGridItem($app, data, parent, shouldKeepSubGrid)
-
-		return data
-	}
-
-	function insertComponentInSubGrid(
-		data: AppComponent,
-		targetId: string,
-		targetSubGridIndex: number
-	) {
-		push(history, $app)
-		const focusedGrid = {
-			parentComponentId: targetId,
-			subGridIndex: targetSubGridIndex
-		}
-
-		insertNewGridItem($app, data, focusedGrid, true)
-
-		$app.grid = [...$app.grid]
-	}
-
-	function insertComponentInMainGrid(data: AppComponent) {
-		const newComponent = createNewGridItem($app.grid, data.id, data)
-		$app.grid = [...$app.grid, newComponent]
-	}
-
-	function onMove(component: AppComponent) {
-		push(history, $app)
-		const data = findAndDelete(component.id)
-
-		if (!data) {
-			return
-		}
-
-		if (selectedOption !== 'main-grid') {
-			const [targetId, targetSubGridIndex] = selectedOption.split('-')
-			insertComponentInSubGrid(data, targetId, parseInt(targetSubGridIndex))
-		} else {
-			insertComponentInMainGrid(data)
-		}
-	}
-
-	const defaultOption = {
-		label: 'Main grid',
-		value: 'main-grid',
-		disabled: parent === undefined
-	}
-
-	$: [subgrids] = component ? getAllSubgridsAndComponentIds($app, component) : [[], []]
-	$: availableGrids = listAllSubGrids($app)
-	$: options = availableGrids
-		? [
-				defaultOption,
-				...availableGrids?.map((grid) => ({
-					label: grid,
-					value: grid,
-					disabled: grid === parent || subgrids.includes(grid)
-				}))
-		  ]
-		: [defaultOption]
-</script>
-
-{#if component && !options.every((option) => option.disabled)}
-	<select bind:value={selectedOption} class="w-full">
-		{#each options as option}
-			<option value={option.value} disabled={option.disabled}>{option.label}</option>
-		{/each}
-	</select>
-	<Button
-		size="xs"
-		color="dark"
-		startIcon={{ icon: faCopy }}
-		on:click={() => {
-			if (component) {
-				onMove(component)
-			}
-		}}
-	>
-		Move component: {component.id}
-	</Button>
-{:else}
-	<p class="text-gray-500 text-sm">No grids available</p>
-{/if}
diff --git a/frontend/src/lib/components/common/CloseButton.svelte b/frontend/src/lib/components/common/CloseButton.svelte
new file mode 100644
index 0000000000..ab792ced7e
--- /dev/null
+++ b/frontend/src/lib/components/common/CloseButton.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { faClose } from '@fortawesome/free-solid-svg-icons'
+	import { createEventDispatcher } from 'svelte'
+
+	import { Icon } from 'svelte-awesome'
+
+	export let noBg = false
+	const dispatch = createEventDispatcher()
+</script>
+
+<button
+	on:click={() => dispatch('close')}
+	class="hover:bg-gray-200 {noBg
+		? ''
+		: 'bg-gray-100'} rounded-full w-8 h-8 flex items-center justify-center transition-all"
+>
+	<Icon data={faClose} class="text-gray-500" />
+</button>
diff --git a/frontend/src/lib/components/common/drawer/DrawerContent.svelte b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
index cc5d907273..9728b26c94 100644
--- a/frontend/src/lib/components/common/drawer/DrawerContent.svelte
+++ b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
@@ -3,6 +3,7 @@
 	import { faClose } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
 	import { Icon } from 'svelte-awesome'
+	import CloseButton from '../CloseButton.svelte'
 
 	export let title: string | undefined = undefined
 	export let overflow_y = true
@@ -15,12 +16,7 @@
 <div class="flex flex-col divide-y h-screen max-h-screen">
 	<div class="flex justify-between w-wull items-center px-2 py-2 ">
 		<div class="flex items-center gap-2">
-			<button
-				on:click={() => dispatch('close')}
-				class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
-			>
-				<Icon data={faClose} class="text-gray-500" />
-			</button>
+			<CloseButton on:close />
 
 			<span class="font-semibold truncate text-gray-800">{title}</span>
 		</div>
diff --git a/frontend/src/lib/components/common/tabs/Tab.svelte b/frontend/src/lib/components/common/tabs/Tab.svelte
index 39f95f9c30..24c4f62f39 100644
--- a/frontend/src/lib/components/common/tabs/Tab.svelte
+++ b/frontend/src/lib/components/common/tabs/Tab.svelte
@@ -35,6 +35,7 @@
 	)}
 	style={`${style} ${$selected?.startsWith(value) ? selectedStyle : ''}`}
 	on:click={() => update(value)}
+	on:pointerdown|stopPropagation
 >
 	<slot />
 </div>
diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte
index 7086d6349e..97042e3ae4 100644
--- a/frontend/src/lib/components/graph/FlowGraph.svelte
+++ b/frontend/src/lib/components/graph/FlowGraph.svelte
@@ -341,7 +341,7 @@
 				undefined,
 				1000,
 				loopDepth,
-				0,
+				modules.findIndex((m) => m.id == module.id) + 1,
 				true,
 				undefined,
 				module.id

From 0dcbf270da509721273cbdacf565de3c9bde249d Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 12 Mar 2023 21:32:41 +0100
Subject: [PATCH 9/9] small app fixes

---
 .../components/apps/editor/AppEditor.svelte   | 262 +++++++++---------
 .../apps/editor/AppEditorHeader.svelte        |  36 ++-
 .../lib/components/apps/editor/appUtils.ts    |   1 -
 frontend/src/lib/history.ts                   |   8 +-
 4 files changed, 162 insertions(+), 145 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index c6608ddbe3..172f5cc60e 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -158,144 +158,148 @@
 	/>
 {/if}
 {#if !$userStore?.operator}
-	{#if initialMode !== 'preview'}
-		<AppEditorHeader {policy} {fromHub} />
-	{/if}
+	{#if $appStore}
+		{#if initialMode !== 'preview'}
+			<AppEditorHeader {policy} {fromHub} />
+		{/if}
 
-	{#if previewing}
-		<SplitPanesWrapper>
-			<div
-				class={twMerge('h-full w-full', $appStore.css?.['app']?.['viewer']?.class)}
-				style={$appStore.css?.['app']?.['viewer']?.style}
-			>
-				<AppPreview
-					workspace={$workspaceStore ?? ''}
-					summary={$summaryStore}
-					app={$appStore}
-					appPath={path}
-					{breakpoint}
-					{policy}
-					isEditor
-					{context}
-					noBackend={false}
-				/>
-			</div>
-		</SplitPanesWrapper>
-	{:else}
-		<SplitPanesWrapper>
-			<Splitpanes class="max-w-full overflow-hidden">
-				<Pane size={$connectingInput?.opened ? 40 : 15} minSize={5} maxSize={33}>
-					<ContextPanel />
-				</Pane>
-				<Pane size={64}>
-					<SplitPanesWrapper>
-						<Splitpanes horizontal>
-							<Pane size={$connectingInput?.opened ? 100 : 70}>
-								<div
-									on:pointerdown={(e) => {
-										$selectedComponent = undefined
-										$focusedGrid = undefined
-									}}
-									class={twMerge(
-										'bg-gray-100 h-full w-full',
-										$appStore.css?.['app']?.['viewer']?.class
-									)}
-									style={$appStore.css?.['app']?.['viewer']?.style}
-								>
+		{#if previewing}
+			<SplitPanesWrapper>
+				<div
+					class={twMerge('h-full w-full', $appStore.css?.['app']?.['viewer']?.class)}
+					style={$appStore.css?.['app']?.['viewer']?.style}
+				>
+					<AppPreview
+						workspace={$workspaceStore ?? ''}
+						summary={$summaryStore}
+						app={$appStore}
+						appPath={path}
+						{breakpoint}
+						{policy}
+						isEditor
+						{context}
+						noBackend={false}
+					/>
+				</div>
+			</SplitPanesWrapper>
+		{:else}
+			<SplitPanesWrapper>
+				<Splitpanes class="max-w-full overflow-hidden">
+					<Pane size={$connectingInput?.opened ? 40 : 15} minSize={5} maxSize={33}>
+						<ContextPanel />
+					</Pane>
+					<Pane size={64}>
+						<SplitPanesWrapper>
+							<Splitpanes horizontal>
+								<Pane size={$connectingInput?.opened ? 100 : 70}>
 									<div
-										class={classNames(
-											'relative mx-auto w-full h-full overflow-auto',
-											app.fullscreen ? '' : 'max-w-6xl'
+										on:pointerdown={(e) => {
+											$selectedComponent = undefined
+											$focusedGrid = undefined
+										}}
+										class={twMerge(
+											'bg-gray-100 h-full w-full',
+											$appStore.css?.['app']?.['viewer']?.class
 										)}
+										style={$appStore.css?.['app']?.['viewer']?.style}
 									>
-										{#if $appStore.grid}
-											<ComponentNavigation />
+										<div
+											class={classNames(
+												'relative mx-auto w-full h-full overflow-auto',
+												app.fullscreen ? '' : 'max-w-6xl'
+											)}
+										>
+											{#if $appStore.grid}
+												<ComponentNavigation />
 
-											<div on:pointerdown|stopPropagation class={width}>
-												<GridEditor {policy} />
+												<div on:pointerdown|stopPropagation class={width}>
+													<GridEditor {policy} />
+												</div>
+
+												<div id="app-editor-top-level-drawer" />
+											{/if}
+										</div>
+									</div>
+								</Pane>
+								<Pane size={$connectingInput?.opened ? 0 : 30}>
+									<div class="relative h-full w-full">
+										<InlineScriptsPanel />
+									</div>
+								</Pane>
+							</Splitpanes>
+						</SplitPanesWrapper>
+					</Pane>
+					<Pane size={21} minSize={5} maxSize={33}>
+						<div class="relative flex flex-col h-full">
+							<Tabs bind:selected={selectedTab} wrapperClass="!h-[40px]" class="!h-full">
+								<Tab value="insert" size="xs">
+									<div class="m-1 center-center gap-2">
+										<Icon data={faPlus} />
+										<span>Insert</span>
+									</div>
+								</Tab>
+								<Tab value="settings" size="xs">
+									<div class="m-1 center-center gap-2">
+										<Icon data={faSliders} />
+										<span>Settings</span>
+									</div>
+								</Tab>
+								<Tab value="css" size="xs">
+									<div class="m-1 center-center gap-2">
+										<Icon data={faCode} />
+										<span>CSS</span>
+									</div>
+								</Tab>
+								<div slot="content" class="h-full overflow-y-auto pb-4">
+									<TabContent class="overflow-auto h-full" value="settings">
+										{#if $selectedComponent !== undefined}
+											<SettingsPanel />
+										{:else}
+											<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
+												Select a component to see the settings&nbsp;for&nbsp;it
 											</div>
-
-											<div id="app-editor-top-level-drawer" />
 										{/if}
-									</div>
+									</TabContent>
+									<TabContent value="insert">
+										<ComponentList />
+									</TabContent>
+									<TabContent value="css">
+										<CssSettings />
+									</TabContent>
 								</div>
-							</Pane>
-							<Pane size={$connectingInput?.opened ? 0 : 30}>
-								<div class="relative h-full w-full">
-									<InlineScriptsPanel />
-								</div>
-							</Pane>
-						</Splitpanes>
-					</SplitPanesWrapper>
-				</Pane>
-				<Pane size={21} minSize={5} maxSize={33}>
-					<div class="relative flex flex-col h-full">
-						<Tabs bind:selected={selectedTab} wrapperClass="!h-[40px]" class="!h-full">
-							<Tab value="insert" size="xs">
-								<div class="m-1 center-center gap-2">
-									<Icon data={faPlus} />
-									<span>Insert</span>
-								</div>
-							</Tab>
-							<Tab value="settings" size="xs">
-								<div class="m-1 center-center gap-2">
-									<Icon data={faSliders} />
-									<span>Settings</span>
-								</div>
-							</Tab>
-							<Tab value="css" size="xs">
-								<div class="m-1 center-center gap-2">
-									<Icon data={faCode} />
-									<span>CSS</span>
-								</div>
-							</Tab>
-							<div slot="content" class="h-full overflow-y-auto pb-4">
-								<TabContent class="overflow-auto h-full" value="settings">
-									{#if $selectedComponent !== undefined}
-										<SettingsPanel />
-									{:else}
-										<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
-											Select a component to see the settings&nbsp;for&nbsp;it
+							</Tabs>
+							{#if $connectingInput.opened}
+								<div
+									class="fixed top-32  p-2 z-50 flex justify-center items-center"
+									transition:fly|local={{ duration: 100, y: -100 }}
+								>
+									<Alert title="Connecting" type="info">
+										<div class="flex gap-2 flex-col">
+											Click on the output of the component you want to connect to on the left panel.
+											<div>
+												<Button
+													color="blue"
+													variant="border"
+													size="xs"
+													on:click={() => {
+														$connectingInput.opened = false
+														$connectingInput.input = undefined
+													}}
+												>
+													Stop connecting
+												</Button>
+											</div>
 										</div>
-									{/if}
-								</TabContent>
-								<TabContent value="insert">
-									<ComponentList />
-								</TabContent>
-								<TabContent value="css">
-									<CssSettings />
-								</TabContent>
-							</div>
-						</Tabs>
-						{#if $connectingInput.opened}
-							<div
-								class="fixed top-32  p-2 z-50 flex justify-center items-center"
-								transition:fly|local={{ duration: 100, y: -100 }}
-							>
-								<Alert title="Connecting" type="info">
-									<div class="flex gap-2 flex-col">
-										Click on the output of the component you want to connect to on the left panel.
-										<div>
-											<Button
-												color="blue"
-												variant="border"
-												size="xs"
-												on:click={() => {
-													$connectingInput.opened = false
-													$connectingInput.input = undefined
-												}}
-											>
-												Stop connecting
-											</Button>
-										</div>
-									</div>
-								</Alert>
-							</div>
-						{/if}
-					</div>
-				</Pane>
-			</Splitpanes>
-		</SplitPanesWrapper>
+									</Alert>
+								</div>
+							{/if}
+						</div>
+					</Pane>
+				</Splitpanes>
+			</SplitPanesWrapper>
+		{/if}
+	{:else}
+		App is null
 	{/if}
 {:else}
 	App editor not available to operators
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 1d31dfec09..945cab6a19 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -18,6 +18,7 @@
 	import DisplayResult from '$lib/components/DisplayResult.svelte'
 	import Dropdown from '$lib/components/Dropdown.svelte'
 	import FlowProgressBar from '$lib/components/flows/FlowProgressBar.svelte'
+	import { idMutex } from '$lib/components/flows/flowStateUtils'
 	import FlowStatusViewer from '$lib/components/FlowStatusViewer.svelte'
 	import JobArgs from '$lib/components/JobArgs.svelte'
 	import LogViewer from '$lib/components/LogViewer.svelte'
@@ -247,7 +248,10 @@
 	$: selectedJobId && testJobLoader?.watchJob(selectedJobId)
 	$: hasErrors = Object.keys($errorByComponent).length > 0
 
+	let lock = false
 	function onKeyDown(event: KeyboardEvent) {
+		if (lock) return
+		lock = true
 		switch (event.key) {
 			case 'Z':
 				if (event.ctrlKey) {
@@ -258,6 +262,7 @@
 			case 'z':
 				if (event.ctrlKey) {
 					$app = undo(history, $app)
+
 					event.preventDefault()
 				}
 				break
@@ -286,6 +291,7 @@
 			// 	break
 			// }
 		}
+		lock = false
 	}
 </script>
 
@@ -513,20 +519,22 @@
 		</div>
 
 		<div class="hidden lg:block">
-			<ToggleButtonGroup bind:selected={$app.fullscreen}>
-				<ToggleButton position="left" value={false} size="xs">
-					<div class="flex gap-1 justify-start items-center">
-						<AlignHorizontalSpaceAround size={14} />
-						<Tooltip light class="mb-0.5">
-							The max width is 1168px and the content stay centered instead of taking the full page
-							width
-						</Tooltip>
-					</div>
-				</ToggleButton>
-				<ToggleButton position="right" value={true} size="xs">
-					<Expand size={14} />
-				</ToggleButton>
-			</ToggleButtonGroup>
+			{#if $app}
+				<ToggleButtonGroup bind:selected={$app.fullscreen}>
+					<ToggleButton position="left" value={false} size="xs">
+						<div class="flex gap-1 justify-start items-center">
+							<AlignHorizontalSpaceAround size={14} />
+							<Tooltip light class="mb-0.5">
+								The max width is 1168px and the content stay centered instead of taking the full
+								page width
+							</Tooltip>
+						</div>
+					</ToggleButton>
+					<ToggleButton position="right" value={true} size="xs">
+						<Expand size={14} />
+					</ToggleButton>
+				</ToggleButtonGroup>
+			{/if}
 		</div>
 	</div>
 	{#if $focusedGrid !== undefined}
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 2d6cac5e77..be82c52c4d 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -309,7 +309,6 @@ export function expandGriditem(
 ) {
 	const availableSpace = findAvailableSpace(grid, gridComponent, $breakpoint, parentGridItem)
 
-	console.log(availableSpace)
 	if (!availableSpace) {
 		return
 	}
diff --git a/frontend/src/lib/history.ts b/frontend/src/lib/history.ts
index 983228d32c..703f8b5ef4 100644
--- a/frontend/src/lib/history.ts
+++ b/frontend/src/lib/history.ts
@@ -21,7 +21,13 @@ export function undo<T>(history: History<T> | undefined, now: T): T {
             })
         }
         let nhistory = get(history)
-        return nhistory.history[nhistory.index]
+        let r = nhistory.history[nhistory.index]
+        if (!r) {
+            console.log('undo failed', nhistory, now)
+            return now
+        } else {
+            return r
+        }
     } else {
         return now
     }