From eefe9d6383c13a09567ddd085fd0618fe3be6261 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 19 Nov 2022 09:15:03 +0100
Subject: [PATCH] improve run page UX

---
 .../src/routes/flows/run/[...path].svelte     | 24 +++++----
 .../src/routes/scripts/get/[...hash].svelte   | 23 +++-----
 .../src/routes/scripts/run/[...hash].svelte   | 52 +++++++++++++------
 3 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/frontend/src/routes/flows/run/[...path].svelte b/frontend/src/routes/flows/run/[...path].svelte
index 11b9cae2b1..38df9cbf23 100644
--- a/frontend/src/routes/flows/run/[...path].svelte
+++ b/frontend/src/routes/flows/run/[...path].svelte
@@ -86,16 +86,10 @@
 		<div class="flex flex-row flex-wrap justify-between gap-4 mb-6">
 			<div class="w-full">
 				<div class="flex flex-col mt-6 mb-2 w-full">
-					<div class="flex flex-row flex-wrap w-full justify-between "
-						><div class="flex flex-col">
-							<h1 class="break-words py-2 mr-2">
-								{defaultIfEmptyString(flow.summary, flow.path)}
-							</h1>
-							{#if !emptyString(flow.summary)}
-								<h2 class="font-bold pb-4">{flow.path}</h2>
-							{/if}
-						</div>
-						<div class="flex-row hidden lg:flex">
+					<div
+						class="flex flex-row-reverse w-full flex-wrap md:flex-nowrap justify-between gap-x-1"
+					>
+						<div class="flex flex-row">
 							<div>
 								<Button
 									startIcon={{ icon: faScroll }}
@@ -104,12 +98,22 @@
 									variant="border"
 									href="/flows/get/{flow?.path}">View flow</Button
 								>
+							</div>
+							<div>
 								<Button
 									startIcon={{ icon: faPlay }}
 									disabled={runForm == undefined || !isValid}
 									on:click={() => runForm?.run()}>Run (Ctrl+Enter)</Button
 								>
 							</div>
+						</div>
+						<div class="flex flex-col">
+							<h1 class="break-words py-2 mr-2">
+								{defaultIfEmptyString(flow.summary, flow.path)}
+							</h1>
+							{#if !emptyString(flow.summary)}
+								<h2 class="font-bold pb-4">{flow.path}</h2>
+							{/if}
 						</div></div
 					>
 					<div class="flex items-center gap-2">
diff --git a/frontend/src/routes/scripts/get/[...hash].svelte b/frontend/src/routes/scripts/get/[...hash].svelte
index 0309bf3ccf..532368535e 100644
--- a/frontend/src/routes/scripts/get/[...hash].svelte
+++ b/frontend/src/routes/scripts/get/[...hash].svelte
@@ -42,7 +42,7 @@
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import { onDestroy } from 'svelte'
 	import HighlightCode from '$lib/components/HighlightCode.svelte'
-	import { Badge, Tabs, Tab, TabContent, Button, ActionRow } from '$lib/components/common'
+	import { Badge, Tabs, Tab, TabContent, Button, ActionRow, Alert } from '$lib/components/common'
 	import Skeleton from '../../../lib/components/common/skeleton/Skeleton.svelte'
 	import UserSettings from '$lib/components/UserSettings.svelte'
 	import Icon from 'svelte-awesome'
@@ -336,22 +336,13 @@
 							</div>
 						{/if}
 						{#if topHash}
-							<div
-								class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4"
-								role="alert"
-							>
-								<p class="font-bold">Not HEAD</p>
-								<p>
-									This hash is not HEAD (latest non-archived version at this path) :
-									<a href="/scripts/get/{topHash}">Go to the HEAD of this path</a>
-								</p>
-							</div>
+							<Alert type="warning" title="Not HEAD">
+								This hash is not HEAD (latest non-archived version at this path) :
+								<a href="/scripts/get/{topHash}">Go to the HEAD of this path</a>
+							</Alert>
 						{/if}
-						{#if script.archived}
-							<div class="bg-red-100 border-l-4 border-red-500 text-orange-700 p-4" role="alert">
-								<p class="font-bold">Archived</p>
-								<p>This version was archived</p>
-							</div>
+						{#if script.archived && !topHash}
+							<Alert type="error" title="Archived">This version was archived</Alert>
 						{/if}
 						{#if script.deleted}
 							<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4" role="alert">
diff --git a/frontend/src/routes/scripts/run/[...hash].svelte b/frontend/src/routes/scripts/run/[...hash].svelte
index fc92ea6cf6..b8dd1494f8 100644
--- a/frontend/src/routes/scripts/run/[...hash].svelte
+++ b/frontend/src/routes/scripts/run/[...hash].svelte
@@ -23,16 +23,17 @@
 	import { inferArgs } from '$lib/infer'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import RunForm from '$lib/components/RunForm.svelte'
-	import { Badge, Button } from '$lib/components/common'
+	import { Alert, Badge, Button } from '$lib/components/common'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import SvelteMarkdown from 'svelte-markdown'
 	import { faPlay, faScroll } from '@fortawesome/free-solid-svg-icons'
 
-	const hash = $page.params.hash
+	$: hash = $page.params.hash
 	let script: Script | undefined
 	let runForm: RunForm | undefined
 	let isValid = true
 	let can_write = false
+	let topHash: string | undefined
 
 	async function loadScript() {
 		if (hash) {
@@ -42,6 +43,15 @@
 				inferArgs(script.language, script.content, script.schema)
 				script = script
 			}
+			if (script.path && script.archived) {
+				const script_by_path = await ScriptService.getScriptByPath({
+					workspace: $workspaceStore!,
+					path: script.path
+				}).catch((_) => console.error('this script has no non-archived version'))
+				topHash = script_by_path?.hash
+			} else {
+				topHash = undefined
+			}
 			can_write =
 				script.workspace_id == $workspaceStore &&
 				canWrite(script.path, script.extra_perms!, $userStore)
@@ -67,7 +77,7 @@
 	}
 
 	$: {
-		if ($workspaceStore) {
+		if ($workspaceStore && hash) {
 			loadScript()
 		}
 	}
@@ -92,19 +102,19 @@
 
 <CenteredPage>
 	{#if script}
-		<div class="flex flex-row flex-wrap justify-between gap-4 mb-6">
+		<div class="flex flex-col justify-between gap-4 mb-6">
+			{#if topHash}
+				<Alert type="warning" title="Not HEAD">
+					This hash is not HEAD (latest non-archived version at this path) :
+					<a href="/scripts/run/{topHash}">Go to the HEAD of this path</a>
+				</Alert>
+			{/if}
 			<div class="w-full">
 				<div class="flex flex-col mt-6 mb-2 w-full">
-					<div class="flex flex-row flex-wrap w-full justify-between "
-						><div class="flex flex-col">
-							<h1 class="break-words py-2 mr-2">
-								{defaultIfEmptyString(script.summary, script.path)}
-							</h1>
-							{#if !emptyString(script.summary)}
-								<h2 class="font-bold pb-4">{script.path}</h2>
-							{/if}
-						</div>
-						<div class="flex-row hidden lg:flex">
+					<div
+						class="flex flex-row-reverse w-full flex-wrap md:flex-nowrap justify-between gap-x-1"
+					>
+						<div class="flex flex-row">
 							<div>
 								<Button
 									startIcon={{ icon: faScroll }}
@@ -113,14 +123,24 @@
 									variant="border"
 									href="/scripts/get/{script?.hash}">View script</Button
 								>
+							</div>
+							<div>
 								<Button
 									startIcon={{ icon: faPlay }}
 									disabled={runForm == undefined || !isValid}
 									on:click={() => runForm?.run()}>Run (Ctrl+Enter)</Button
 								>
 							</div>
-						</div></div
-					>
+						</div>
+						<div class="flex flex-col grow">
+							<h1 class="break-words py-2 mr-2">
+								{defaultIfEmptyString(script.summary, script.path)}
+							</h1>
+							{#if !emptyString(script.summary)}
+								<h2 class="font-bold pb-4">{script.path}</h2>
+							{/if}
+						</div>
+					</div>
 					<div class="flex items-center gap-2">
 						<span class="text-sm text-gray-500">
 							{#if script}