From 86dba8691348993a0889dc12fed80adfa263b2f9 Mon Sep 17 00:00:00 2001
From: HugoCasa <hugo@casademont.ch>
Date: Fri, 20 Dec 2024 21:13:27 +0100
Subject: [PATCH] fix frontend checks for script and flow preview jobs (#4961)

---
 .../lib/components/ExecutionDuration.svelte    |  3 ++-
 .../components/FlowStatusViewerInner.svelte    |  8 ++------
 .../src/lib/components/TestJobLoader.svelte    |  3 ++-
 .../apps/editor/AppEditorHeader.svelte         |  5 +++--
 .../src/lib/components/runs/JobPreview.svelte  | 10 +++++-----
 frontend/src/lib/components/runs/RunRow.svelte | 16 +++++++++++-----
 frontend/src/lib/utils.ts                      | 10 ++++++++++
 .../(root)/(logged)/run/[...run]/+page.svelte  | 18 ++++++++++--------
 8 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/frontend/src/lib/components/ExecutionDuration.svelte b/frontend/src/lib/components/ExecutionDuration.svelte
index aa42d428ce..3be235583b 100644
--- a/frontend/src/lib/components/ExecutionDuration.svelte
+++ b/frontend/src/lib/components/ExecutionDuration.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { type Job } from '$lib/gen'
+	import { isScriptPreview } from '$lib/utils'
 	import { onDestroy } from 'svelte'
 
 	export let job: Job | undefined = undefined
@@ -23,7 +24,7 @@
 		!busy &&
 		job &&
 		'running' in job &&
-		(job.job_kind == 'script' || job?.job_kind == 'preview')
+		(job.job_kind == 'script' || isScriptPreview(job?.job_kind))
 	)
 		start(job)
 
diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte
index 5ad9145c5d..a102700fc2 100644
--- a/frontend/src/lib/components/FlowStatusViewerInner.svelte
+++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte
@@ -18,7 +18,7 @@
 	import Tabs from './common/tabs/Tabs.svelte'
 	import { type DurationStatus, type FlowStatusViewerContext, type GraphModuleState } from './graph'
 	import ModuleStatus from './ModuleStatus.svelte'
-	import { emptyString, msToSec, truncateRev } from '$lib/utils'
+	import { emptyString, isScriptPreview, msToSec, truncateRev } from '$lib/utils'
 	import JobArgs from './JobArgs.svelte'
 	import { ChevronDown, Hourglass, Loader2 } from 'lucide-svelte'
 	import FlowStatusWaitingForEvents from './FlowStatusWaitingForEvents.svelte'
@@ -728,11 +728,7 @@
 				})
 			}
 
-			if (
-				jobLoaded.job_kind == 'script' ||
-				jobLoaded.job_kind == 'flowscript' ||
-				jobLoaded.job_kind == 'preview'
-			) {
+			if (jobLoaded.job_kind == 'script' || isScriptPreview(jobLoaded.job_kind)) {
 				let id: string | undefined = undefined
 				if (
 					(innerModule?.type == 'forloopflow' || innerModule?.type == 'whileloopflow') &&
diff --git a/frontend/src/lib/components/TestJobLoader.svelte b/frontend/src/lib/components/TestJobLoader.svelte
index 92510174f1..e6a57d6bbd 100644
--- a/frontend/src/lib/components/TestJobLoader.svelte
+++ b/frontend/src/lib/components/TestJobLoader.svelte
@@ -5,6 +5,7 @@
 	import { createEventDispatcher } from 'svelte'
 	import type { SupportedLanguage } from '$lib/common'
 	import { sendUserToast } from '$lib/toast'
+	import { isScriptPreview } from '$lib/utils'
 
 	export let isLoading = false
 	export let job: Job | undefined = undefined
@@ -192,7 +193,7 @@
 					let getProgress: boolean | undefined = undefined
 					// We only pull individual job progress this way
 					// Flow's progress we are getting from FlowStatusModule of flow job
-					if (job.job_kind == 'script' || job.job_kind == 'preview') {
+					if (job.job_kind == 'script' || isScriptPreview(job.job_kind)) {
 						// First time, before running job, lastTimeCheckedProgress is always undefined
 						if (lastTimeCheckedProgress) {
 							const lastTimeCheckedMs = Date.now() - lastTimeCheckedProgress
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 38a3543291..ca94a7df65 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -41,7 +41,8 @@
 		truncateRev,
 		orderedJsonStringify,
 		type Value,
-		replaceFalseWithUndefined
+		replaceFalseWithUndefined,
+		isFlowPreview
 	} from '../../../utils'
 	import type {
 		AppInput,
@@ -1404,7 +1405,7 @@
 											</div>
 										{/if}
 
-										{#if job?.job_kind !== 'flow' && job?.job_kind !== 'flowpreview'}
+										{#if job?.job_kind !== 'flow' && !isFlowPreview(job?.job_kind)}
 											{@const jobResult = $jobsById[selectedJobId]}
 											<Splitpanes horizontal class="grow border w-full">
 												<Pane size={50} minSize={10}>
diff --git a/frontend/src/lib/components/runs/JobPreview.svelte b/frontend/src/lib/components/runs/JobPreview.svelte
index e4baf7012c..2dcf08946f 100644
--- a/frontend/src/lib/components/runs/JobPreview.svelte
+++ b/frontend/src/lib/components/runs/JobPreview.svelte
@@ -14,7 +14,7 @@
 	import { workspaceStore } from '$lib/stores'
 	import WorkflowTimeline from '../WorkflowTimeline.svelte'
 	import Popover from '../Popover.svelte'
-	import { truncateRev } from '$lib/utils'
+	import { isFlowPreview, isScriptPreview, truncateRev } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import { ListFilter } from 'lucide-svelte'
 
@@ -154,7 +154,7 @@
 		{/if}
 
 		<div class=" w-full rounded-md min-h-full">
-			{#if job?.is_flow_step == false && job?.flow_status && (job?.job_kind == 'preview' || job?.job_kind == 'script') && !(typeof job.flow_status == 'object' && '_metadata' in job.flow_status)}
+			{#if job?.is_flow_step == false && job?.flow_status && (isScriptPreview(job?.job_kind) || job?.job_kind == 'script') && !(typeof job.flow_status == 'object' && '_metadata' in job.flow_status)}
 				<WorkflowTimeline
 					flow_status={asWorkflowStatus(job.flow_status)}
 					flowDone={job.type == 'CompletedJob'}
@@ -165,14 +165,14 @@
 				<Tabs bind:selected={viewTab}>
 					<Tab size="xs" value="result">Result</Tab>
 					<Tab size="xs" value="logs">Logs</Tab>
-					{#if job?.job_kind == 'preview'}
+					{#if isScriptPreview(job?.job_kind)}
 						<Tab size="xs" value="code">Code</Tab>
 					{/if}
 				</Tabs>
 
 				<Skeleton loading={!job} layout={[[5]]} />
 				{#if job}
-					{#if viewTab == 'result' && (job?.job_kind == 'flow' || job?.job_kind == 'flowpreview')}
+					{#if viewTab == 'result' && (job?.job_kind == 'flow' || isFlowPreview(job?.job_kind))}
 						<div class="flex flex-col gap-2">
 							<div class="w-full mt-10 mb-20">
 								<FlowStatusViewer jobId={job.id} workspaceId={job.workspace_id} />
@@ -215,7 +215,7 @@
 					{/if}
 				{/if}
 			{:else if job && `running` in job ? job.running : false}
-				{#if job?.job_kind == 'flow' || job?.job_kind == 'flowpreview'}
+				{#if job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)}
 					<div class="flex flex-col gap-2 w-full">
 						<FlowProgressBar {job} class="py-4" />
 						<FlowStatusViewer jobId={job.id} workspaceId={job.workspace_id} />
diff --git a/frontend/src/lib/components/runs/RunRow.svelte b/frontend/src/lib/components/runs/RunRow.svelte
index f79b1b7307..7fd0e87ef5 100644
--- a/frontend/src/lib/components/runs/RunRow.svelte
+++ b/frontend/src/lib/components/runs/RunRow.svelte
@@ -2,7 +2,15 @@
 	import { base } from '$lib/base'
 	import { goto } from '$lib/navigation'
 	import type { Job } from '$lib/gen'
-	import { displayDate, msToReadableTime, truncateHash, truncateRev, isJobCancelable } from '$lib/utils'
+	import {
+		displayDate,
+		msToReadableTime,
+		truncateHash,
+		truncateRev,
+		isJobCancelable,
+		isFlowPreview,
+		isScriptPreview
+	} from '$lib/utils'
 	import { Badge, Button } from '../common'
 	import ScheduleEditor from '../ScheduleEditor.svelte'
 	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
@@ -38,7 +46,6 @@
 	let scheduleEditor: ScheduleEditor
 
 	$: isExternal = job && job.id === '-'
-
 </script>
 
 <Portal name="run-row">
@@ -110,7 +117,7 @@
 					{#if job && 'duration_ms' in job && job.duration_ms != undefined}
 						(Ran in {msToReadableTime(
 							job.duration_ms
-						)}{#if job.job_kind == 'flow' || job.job_kind == 'flowpreview'}&nbsp;total{/if})
+						)}{#if job.job_kind == 'flow' || isFlowPreview(job.job_kind)}&nbsp;total{/if})
 					{/if}
 					{#if job && (job.self_wait_time_ms || job.aggregate_wait_time_ms)}
 						<WaitTimeWarning
@@ -123,7 +130,6 @@
 					Scheduled for {displayDate(job.scheduled_for)}
 				{:else if job.canceled}
 					Cancelling job... (created <TimeAgo agoOnlyIfRecent date={job.created_at || ''} />)
-
 				{:else}
 					Waiting for executor (created <TimeAgo agoOnlyIfRecent date={job.created_at || ''} />)
 				{/if}
@@ -176,7 +182,7 @@
 									</Button>
 								{/if}
 							</div>
-						{:else if 'job_kind' in job && job.job_kind == 'preview'}
+						{:else if 'job_kind' in job && isScriptPreview(job.job_kind)}
 							<a href="{base}/run/{job.id}?workspace={job.workspace_id}">Preview without path </a>
 						{:else if 'job_kind' in job && job.job_kind == 'dependencies'}
 							<a href="{base}/run/{job.id}?workspace={job.workspace_id}">
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 7dde9aeb2d..22f8518ac8 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1089,3 +1089,13 @@ export function validateFileExtension(ext: string) {
 	const validExtensionRegex = /^[a-zA-Z0-9]+([._][a-zA-Z0-9]+)*$/
 	return validExtensionRegex.test(ext)
 }
+
+export function isFlowPreview(job_kind: Job['job_kind'] | undefined) {
+	return !!job_kind && (job_kind === 'flowpreview' || job_kind === 'flownode')
+}
+
+export function isScriptPreview(job_kind: Job['job_kind'] | undefined) {
+	return (
+		!!job_kind && (job_kind === 'preview' || job_kind === 'flowscript' || job_kind === 'appscript')
+	)
+}
diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
index 02bc163746..7a350b7733 100644
--- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -19,6 +19,8 @@
 		displayDate,
 		emptyString,
 		encodeState,
+		isFlowPreview,
+		isScriptPreview,
 		truncateHash,
 		truncateRev
 	} from '$lib/utils'
@@ -288,7 +290,7 @@
 	}
 
 	function forkPreview() {
-		if (job?.job_kind == 'flowpreview') {
+		if (isFlowPreview(job?.job_kind)) {
 			$initialArgsStore = job?.args
 			const state = {
 				flow: { value: job?.raw_flow },
@@ -355,7 +357,7 @@
 
 <ScheduleEditor bind:this={scheduleEditor} />
 
-{#if (job?.job_kind == 'flow' || job?.job_kind == 'flowpreview') && job?.['running'] && job?.parent_job == undefined}
+{#if (job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)) && job?.['running'] && job?.parent_job == undefined}
 	<Drawer bind:this={debugViewer} size="800px">
 		<DrawerContent title="Debug Detail" on:close={debugViewer.closeDrawer}>
 			<svelte:fragment slot="actions">
@@ -472,7 +474,7 @@
 			{@const stem = `/${job?.job_kind}s`}
 			{@const isScript = job?.job_kind === 'script'}
 			{@const viewHref = `${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
-			{#if (job?.job_kind == 'flow' || job?.job_kind == 'flowpreview') && job?.['running'] && job?.parent_job == undefined}
+			{#if (job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)) && job?.['running'] && job?.parent_job == undefined}
 				<div class="inline">
 					<ButtonDropdown hasPadding={false}>
 						<svelte:fragment slot="buttonReplacement">
@@ -488,7 +490,7 @@
 					</ButtonDropdown>
 				</div>
 			{/if}
-			{#if job?.job_kind === 'flowpreview' || job?.job_kind === 'preview'}
+			{#if isFlowPreview(job?.job_kind) || isScriptPreview(job?.job_kind)}
 				<Button
 					color="dark"
 					size="md"
@@ -496,7 +498,7 @@
 					startIcon={{ icon: GitBranch }}
 					on:click={forkPreview}
 				>
-					Fork {job?.job_kind == 'flowpreview' ? 'flow' : 'code'} preview
+					Fork {isFlowPreview(job?.job_kind) ? 'flow' : 'code'} preview
 				</Button>
 			{/if}
 			{#if persistentScriptDefinition !== undefined}
@@ -833,8 +835,8 @@
 				<h2 class="mt-10">Scheduled to be executed later: {displayDate(job?.['scheduled_for'])}</h2>
 			</div>
 		{/if}
-		{#if job?.job_kind !== 'flow' && job?.job_kind !== 'flowpreview' && job?.job_kind !== 'singlescriptflow' && job?.job_kind !== 'flownode'}
-			{#if ['python3', 'bun', 'deno'].includes(job?.language ?? '') && (job?.job_kind == 'script' || job?.job_kind == 'preview')}
+		{#if job?.job_kind !== 'flow' && job?.job_kind !== 'singlescriptflow' && !isFlowPreview(job?.job_kind)}
+			{#if ['python3', 'bun', 'deno'].includes(job?.language ?? '') && (job?.job_kind == 'script' || isScriptPreview(job?.job_kind))}
 				<ExecutionDuration bind:job bind:longRunning={currentJobIsLongRunning} />
 			{/if}
 			<div class="max-w-7xl mx-auto w-full px-4 mb-10">
@@ -854,7 +856,7 @@
 						<Tab value="result">Result</Tab>
 						<Tab value="logs">Logs</Tab>
 						<Tab value="stats">Metrics</Tab>
-						{#if job?.job_kind == 'preview'}
+						{#if isScriptPreview(job?.job_kind)}
 							<Tab value="code">Code</Tab>
 						{/if}
 					</Tabs>