From 8f72c32fbefdcd402bf0e185bae52bbe1acdd32e Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 12 Jan 2023 22:20:54 +0100
Subject: [PATCH] various improvements

---
 .../lib/components/FlowStatusViewer.svelte    | 21 ++++++++++++++++++-
 .../src/lib/components/ResourcePicker.svelte  | 10 ++++++++-
 frontend/src/lib/components/SchemaForm.svelte |  2 +-
 .../preview/FlowPreviewStatus.svelte          |  2 +-
 .../(logged)/flows/get/[...path]/+page.svelte |  8 ++++---
 .../(logged)/flows/run/[...path]/+page.svelte |  8 ++++---
 .../scripts/get/[...hash]/+page.svelte        | 11 ++++++----
 .../scripts/run/[...hash]/+page.svelte        |  8 ++++---
 8 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
index 0fc5e69dd5..32e6245551 100644
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -8,7 +8,7 @@
 	import { createEventDispatcher } from 'svelte'
 	import { onDestroy } from 'svelte'
 	import type { FlowState } from './flows/flowState'
-	import { Button, Tab } from './common'
+	import { Badge, Button, Tab } from './common'
 	import DisplayResult from './DisplayResult.svelte'
 	import Tabs from './common/tabs/Tabs.svelte'
 	import { FlowGraph, type GraphModuleState } from './graph'
@@ -17,6 +17,7 @@
 	import JobArgs from './JobArgs.svelte'
 	import Tooltip from './Tooltip.svelte'
 	import SimpleEditor from './SimpleEditor.svelte'
+	import { Loader2 } from 'lucide-svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -221,6 +222,24 @@
 					<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
 						<pre class="w-full">{job.logs}</pre>
 					</div>
+				{:else if innerModules?.length > 0}
+					<div class="flex flex-col gap-1">
+						{#each innerModules as mod, i (mod.id)}
+							{#if mod.type == FlowStatusModule.type.IN_PROGRESS}
+								<div
+									><span class="inline-flex gap-1"
+										><Badge color="indigo">{mod.id}</Badge>
+										{#if job.raw_flow?.modules[i]?.summary}
+											<span class="font-medium text-gray-900">
+												{job.raw_flow?.modules[i]?.summary ?? ''}
+											</span>
+										{/if}
+										<Loader2 class="animate-spin" /></span
+									></div
+								>
+							{/if}
+						{/each}
+					</div>
 				{/if}
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index 067b58c447..9c4a2b966c 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -8,6 +8,7 @@
 	import Select from 'svelte-select'
 	import AppConnect from './AppConnect.svelte'
 	import ResourceEditor from './ResourceEditor.svelte'
+	import { truncate } from '$lib/utils'
 
 	const dispatch = createEventDispatcher()
 	let resources: Resource[] = []
@@ -30,7 +31,7 @@
 
 	$: collection = resources.map((x) => ({
 		value: x.path,
-		label: `${x.path}${x.description ? ' | ' + x.description : ''}`
+		label: x.path
 	}))
 	let appConnect: AppConnect
 	let resourceEditor: ResourceEditor
@@ -49,6 +50,7 @@
 
 <div class="flex flex-row gap-x-1 w-full">
 	<Select
+		listAutoWidth={false}
 		--height="34px"
 		value={collection.find((x) => x.value == value)}
 		bind:justValue={value}
@@ -73,3 +75,9 @@
 		}}><Icon scale={0.8} data={faRotateRight} /></Button
 	>
 </div>
+
+<style>
+	:global(.svelte-select-list) {
+		font-size: small !important;
+	}
+</style>
diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index 117c4d0f5a..0fbc57380d 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -149,5 +149,5 @@
 		</div>
 	</ItemPicker>
 
-	<VariableEditor bind:this={variableEditor} on:create={itemPicker.openDrawer} />
+	<VariableEditor bind:this={variableEditor} />
 {/if}
diff --git a/frontend/src/lib/components/preview/FlowPreviewStatus.svelte b/frontend/src/lib/components/preview/FlowPreviewStatus.svelte
index 6efc4628c4..fe40a8b84c 100644
--- a/frontend/src/lib/components/preview/FlowPreviewStatus.svelte
+++ b/frontend/src/lib/components/preview/FlowPreviewStatus.svelte
@@ -9,7 +9,7 @@
 	<JobStatus {job} />
 	{#if job}
 		<div
-			><div class=" text-gray-900 whitespace-nowrap ">
+			><div class=" text-gray-900 whitespace-nowrap truncate ">
 				<span class="font-bold">Job Id</span>
 				<a rel="noreferrer" target="_blank" href="/run/{job?.id}?workspace={job?.workspace_id}">
 					{job?.id}
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 834d1163aa..834cf641c6 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -247,9 +247,11 @@
 						runAction={runFlow}
 					/>
 				</div>
-				<div class="box">
-					{defaultIfEmptyString(flow.description, 'No description')}
-				</div>
+				{#if !emptyString(flow.description)}
+					<div class="box">
+						{defaultIfEmptyString(flow.description, 'No description')}
+					</div>
+				{/if}
 			</div>
 			<div class="mt-4">
 				<FlowViewer {flow} noSummary={true} />
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 0fd6fe6bd0..b07083cd49 100644
--- a/frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/run/[...path]/+page.svelte
@@ -125,9 +125,11 @@
 					</div>
 				</div>
 			</div>
-			<div class="prose text-sm box max-w-6xl w-full mt-8">
-				{defaultIfEmptyString(flow.description, 'No description')}
-			</div>
+			{#if !emptyString(flow.description)}
+				<div class="prose text-sm box max-w-6xl w-full mt-8">
+					{defaultIfEmptyString(flow.description, 'No description')}
+				</div>
+			{/if}
 		</div>
 		<RunForm
 			{loading}
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 c8c3403ea1..4c322a67d0 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -8,7 +8,8 @@
 		canWrite,
 		defaultIfEmptyString,
 		scriptToHubUrl,
-		copyToClipboard
+		copyToClipboard,
+		emptyString
 	} from '$lib/utils'
 	import {
 		faPlay,
@@ -346,9 +347,11 @@
 						runAction={runScript}
 					/>
 				</div>
-				<div class="box">
-					{defaultIfEmptyString(script.description, 'No description')}
-				</div>
+				{#if !emptyString(script.description)}
+					<div class="box">
+						{defaultIfEmptyString(script.description, 'No description')}
+					</div>
+				{/if}
 			</div>
 
 			<div class="mt-8">
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 f162b4a1e0..786f19d222 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/run/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/run/[...hash]/+page.svelte
@@ -161,9 +161,11 @@
 					</div>
 				</div>
 			</div>
-			<div class="prose text-sm box max-w-6xl w-full mb-4 mt-8">
-				{defaultIfEmptyString(script.description, 'No description')}
-			</div>
+			{#if !emptyString(script.description)}
+				<div class="prose text-sm box max-w-6xl w-full mb-4 mt-8">
+					{defaultIfEmptyString(script.description, 'No description')}
+				</div>
+			{/if}
 		</div>
 
 		{#if script?.lock_error_logs}