From 40a147ebfcf34d56a9bd76ebdfb2ee78d793f3af Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 4 Jul 2023 23:50:43 +0200
Subject: [PATCH] feat: improve debug runs wrt to frontend scripts

---
 .../helpers/RunnableComponent.svelte          |  2 ++
 .../apps/editor/AppEditorHeader.svelte        | 20 ++++++++++++++++---
 frontend/src/lib/components/apps/utils.ts     |  2 +-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index 37bb223b93..d6035b4868 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -181,6 +181,8 @@
 				await setResult(r, undefined)
 
 				$state = $state
+				const job = generateNextFrontendJobId()
+				$jobs = [{ job, component: id, result: r }, ...$jobs]
 			} catch (e) {
 				sendUserToast(`Error running frontend script ${id}: ` + e.message, true)
 
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index f0f618513f..a9bd38a533 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -26,6 +26,7 @@
 	} from '@fortawesome/free-solid-svg-icons'
 	import {
 		AlignHorizontalSpaceAround,
+		BellOff,
 		Bug,
 		Expand,
 		Laptop2,
@@ -545,7 +546,9 @@
 	<DrawerContent
 		noPadding
 		title="Debug Runs"
-		on:close={() => ($jobsDrawerOpen = false)}
+		on:close={() => {
+			$jobsDrawerOpen = false
+		}}
 		tooltip="Look at latests runs to spot potential bugs."
 		documentationLink="https://www.windmill.dev/docs/apps/app_debugging"
 	>
@@ -602,7 +605,7 @@
 										</pre>
 									</Pane>
 								</Splitpanes>
-							{:else if jobResult?.result !== undefined}
+							{:else if jobResult !== undefined}
 								<Splitpanes horizontal class="grow border w-full">
 									<Pane size={50} minSize={10}>
 										<LogViewer
@@ -795,7 +798,18 @@
 			>
 				<div class="flex flex-row gap-1 items-center">
 					<Bug size={14} />
-					<div> Debug runs </div>
+					<div> Debug runs</div>
+					<div class="text-2xs text-gray-500">({$jobs?.length ?? 0})</div>
+					{#if hasErrors}
+						<Button
+							size="xs"
+							btnClasses="-my-2 !px-1 !py-0"
+							color="light"
+							variant="border"
+							on:click={() => errorByComponent.set({})}
+							><BellOff size={12} />
+						</Button>
+					{/if}
 				</div>
 			</Button>
 		</div>
diff --git a/frontend/src/lib/components/apps/utils.ts b/frontend/src/lib/components/apps/utils.ts
index 62117e5da5..b7e27a5982 100644
--- a/frontend/src/lib/components/apps/utils.ts
+++ b/frontend/src/lib/components/apps/utils.ts
@@ -17,7 +17,7 @@ import type {
 export const BG_PREFIX = 'bg_'
 
 export function migrateApp(app: App) {
-	app.hiddenInlineScripts.forEach((x) => {
+	app?.hiddenInlineScripts.forEach((x) => {
 		if (x.type == undefined) {
 			//@ts-ignore
 			x.type = 'runnableByName'