From cb5db64320d76f0284a2e03c05bc887ad0063af4 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 30 Sep 2022 05:23:08 +0200
Subject: [PATCH] fix(frontend): various small fixes

---
 .../src/lib/components/FlowBuilder.svelte     | 17 ++++++++++++++--
 .../flows/content/FlowSettings.svelte         |  1 +
 .../flows/header/FlowEditorHeader.svelte      |  2 +-
 .../flows/header/FlowImportExportMenu.svelte  |  4 ++--
 .../flows/map/FlowErrorHandlerItem.svelte     | 20 +++++++++++--------
 5 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index a184eb2184..e668860ec8 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -10,7 +10,7 @@
 		sendUserToast,
 		setQueryWithoutLoad
 	} from '$lib/utils'
-	import { faGlobe } from '@fortawesome/free-solid-svg-icons'
+	import { faGlobe, faPen } from '@fortawesome/free-solid-svg-icons'
 	import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte'
 	import { onMount, setContext } from 'svelte'
 	import Icon from 'svelte-awesome'
@@ -167,7 +167,7 @@
 
 <div class="flex flex-col flex-1 h-full">
 	<!-- Nav between steps-->
-	<div class="justify-between flex flex-row w-full my-2 px-4">
+	<div class="justify-between flex flex-row w-full my-2 px-4 space-x-4 h-10">
 		<Breadcrumb>
 			<BreadcrumbItem>
 				<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
@@ -180,6 +180,19 @@
 				</button>
 			</BreadcrumbItem>
 		</Breadcrumb>
+		<div class="overflow-x-scroll shrink h-full">
+			<button
+				class="flex flex-row items-center h-full"
+				on:click={() => {
+					select('settings')
+					document.getElementById('flow-summary')?.focus()
+				}}
+			>
+				<div class="text-left font-semibold items-center">{$flowStore.summary ?? ''}</div>
+
+				<Icon data={faPen} scale={1.0} class="text-gray-500 ml-2" />
+			</button>
+		</div>
 		<div class="flex flex-row-reverse ml-2 space-x-reverse space-x-2">
 			{#if step == 1}
 				<Button disabled={pathError != ''} color="blue" size="sm" on:click={() => changeStep(2)}>
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index cf8d4c3d01..a6881619f8 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -42,6 +42,7 @@
 						class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
 						placeholder="A very short summary of the flow displayed when the flow is listed"
 						rows="1"
+						id="flow-summary"
 					/>
 				</label>
 			</TabContent>
diff --git a/frontend/src/lib/components/flows/header/FlowEditorHeader.svelte b/frontend/src/lib/components/flows/header/FlowEditorHeader.svelte
index f61a7053ba..8c71cf6175 100644
--- a/frontend/src/lib/components/flows/header/FlowEditorHeader.svelte
+++ b/frontend/src/lib/components/flows/header/FlowEditorHeader.svelte
@@ -11,7 +11,7 @@
 	const { select } = getContext<FlowEditorContext>('FlowEditorContext')
 </script>
 
-<div class="flex justify-between items-center border-y p-2 px-4">
+<div class="flex justify-between items-center border-y p-2 px-4 space-x-2">
 	<div id="flow_title" class="flex justify-between items-center">
 		<button on:click={() => select('settings')}>
 			<span class="font-mono text-sm"> {$flowStore.path}</span>
diff --git a/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte b/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
index 8dec468171..d3e42516a8 100644
--- a/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
+++ b/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
@@ -28,9 +28,9 @@
 <Menu placement="bottom-end">
 	<button
 		slot="trigger"
-		class="flex items-center h-8 text-sm border focus:outline-none focus:ring-4 font-medium rounded-md text-gray-800 bg-white hover:bg-gray-100 focus:ring-gray-300 px-4 py-2"
+		class="flex items-center px-3 py-2.5 text-sm border focus:outline-none focus:ring-4 font-medium rounded-md text-gray-800 bg-white hover:bg-gray-100 focus:ring-gray-300 px-4 py-2"
 	>
-		Import/Export flow
+		Import/Export
 	</button>
 	<div class="divide-y divide-gray-200">
 		<MenuItem on:click={() => jsonSetterDrawer.toggleDrawer()}>
diff --git a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
index 0cca9e4af7..1a0b4ade8e 100644
--- a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
@@ -33,14 +33,16 @@
 	on:click={() => {
 		if ($flowStore.value.failure_module) {
 			select('failure')
+		} else {
+			onToggle()
 		}
 	}}
 	class={classNames(
-		'border rounded-md p-2 bg-white text-sm cursor-pointer mt-4 flex flex-col',
+		'border rounded-md p-2 bg-white text-sm cursor-pointer mt-4 flex flex-col overflow-x-hidden',
 		$selectedId.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
 	)}
 >
-	<div class=" flex justify-between items-center">
+	<div class=" flex justify-between items-center flex-wrap">
 		<div>
 			<Icon data={faBug} class="mr-2" />
 			<span class="font-bold">Error handler</span>
@@ -48,10 +50,12 @@
 		<Toggle checked={Boolean($flowStore.value.failure_module)} on:change={onToggle} />
 	</div>
 
-	{#if $flowStore.value.failure_module}
-		<textarea
-			bind:value={$flowStore.value.failure_module.summary}
-			placeholder="Error handler summary"
-		/>
-	{/if}
+	<div class="w-full truncate block">
+		<span
+			>{$flowStore.value.failure_module?.summary ||
+				($flowStore.value.failure_module?.value.type === 'rawscript'
+					? `Inline ${$flowStore.value.failure_module?.value.language}`
+					: 'Select a script')}</span
+		>
+	</div>
 </div>