From 398c109afeaa38d37216825f5a20e71f613bd60c Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 17 Dec 2022 17:53:32 +0100
Subject: [PATCH] UX improvements

---
 .../src/lib/components/FlowGraphViewer.svelte |  8 ++++++--
 frontend/src/lib/components/Path.svelte       |  1 +
 .../flows/content/FlowInputs.svelte           | 11 +++++++----
 .../flows/map/FlowModuleSchemaMap.svelte      |  4 +++-
 .../flows/map/InsertModuleButton.svelte       | 19 ++++++++++++++++---
 5 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/FlowGraphViewer.svelte b/frontend/src/lib/components/FlowGraphViewer.svelte
index ef992f3314..26acf9d7d5 100644
--- a/frontend/src/lib/components/FlowGraphViewer.svelte
+++ b/frontend/src/lib/components/FlowGraphViewer.svelte
@@ -80,7 +80,9 @@
 <div class="grid grid-cols-3 w-full">
 	<div
 		bind:clientHeight={topHeight}
-		class="{noSide ? 'col-span-3' : 'col-span-2'} w-full border border-gray-400 h-screen"
+		class="{noSide
+			? 'col-span-3'
+			: 'sm:col-span-2 col-span-3'} w-full border border-gray-400 h-screen"
 		class:overflow-auto={overflowAuto}
 	>
 		<FlowGraph
@@ -91,7 +93,9 @@
 		/>
 	</div>
 	{#if !noSide}
-		<div class="w-full border-r border-b border-t border-gray-400 min-h-[150px] p-2 overflow-auto">
+		<div
+			class="w-full border-r border-b border-t border-gray-400 min-h-[150px] p-2 overflow-auto hidden sm:block"
+		>
 			{#if stepDetail == undefined}
 				<span class="font-black text-lg w-full my-4">
 					<span>Click on a step to see its details</span>
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index 04be4111e1..e862992df3 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -75,6 +75,7 @@
 				meta.name = `${namePlaceholder}_${i}`
 				i += 1
 			}
+			path = metaToPath(meta)
 		} else {
 			meta = pathToMeta(path)
 		}
diff --git a/frontend/src/lib/components/flows/content/FlowInputs.svelte b/frontend/src/lib/components/flows/content/FlowInputs.svelte
index d250305a34..d39d9d37f1 100644
--- a/frontend/src/lib/components/flows/content/FlowInputs.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputs.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ToggleButton, ToggleButtonGroup } from '$lib/components/common'
+	import { Alert, ToggleButton, ToggleButtonGroup } from '$lib/components/common'
 	import ToggleHubWorkspace from '$lib/components/ToggleHubWorkspace.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { RawScript, Script } from '$lib/gen'
@@ -19,6 +19,8 @@
 		? 'failure'
 		: summary == 'Trigger'
 		? 'trigger'
+		: summary == 'Approval'
+		? 'approval'
 		: 'script'
 	let pick_existing: 'workspace' | 'hub' = 'hub'
 	let filter = ''
@@ -57,9 +59,10 @@
 		</div>
 	{/if}
 	{#if kind == 'trigger'}
-		<p class="text-sm text-gray-600 my-4"
-			>Once you pick a trigger script, a schedule will be automatically attached to this flow to run
-			every 15 minutes. Adjust frequency in 'Flow settings -> Schedule'</p
+		<div class="mt-2" />
+		<Alert title="Trigger script automatic schedule" role="info">
+			A schedule will be automatically attached to this flow to run every 15 minutes. Adjust
+			frequency in 'Settings -> Schedule'</Alert
 		>
 	{/if}
 	<h3 class="pb-2 pt-4">
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index e99d523718..c6af024056 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -28,7 +28,7 @@
 
 	async function insertNewModuleAtIndex(
 		index: number,
-		kind: 'script' | 'forloop' | 'branchone' | 'branchall' | 'flow' | 'trigger'
+		kind: 'script' | 'forloop' | 'branchone' | 'branchall' | 'flow' | 'trigger' | 'approval'
 	): Promise<void> {
 		await idMutex.runExclusive(async () => {
 			var module = emptyModule(kind == 'flow')
@@ -47,6 +47,8 @@
 			$flowStateStore[flowModule.id] = state
 			if (kind == 'trigger') {
 				flowModule.summary = 'Trigger'
+			} else if (kind == 'approval') {
+				flowModule.summary = 'Approval'
 			}
 			select(flowModule.id)
 		})
diff --git a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
index 7560e70b7f..10893560e9 100644
--- a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
@@ -5,7 +5,8 @@
 		faCodeBranch,
 		faPlus,
 		faBarsStaggered,
-		faBolt
+		faBolt,
+		faCheck
 	} from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
 	import Icon from 'svelte-awesome'
@@ -35,7 +36,7 @@
 				tabindex="-1"
 			>
 				<Icon data={faBolt} scale={0.8} class="mr-1" />
-				Trigger
+				Trigger (script)
 			</button>
 		{/if}
 		<button
@@ -48,7 +49,19 @@
 			tabindex="-1"
 		>
 			<Icon data={faCode} scale={0.8} class="mr-1" />
-			Script
+			Action (script)
+		</button>
+		<button
+			class="w-full text-left p-2 hover:bg-gray-100"
+			on:click={() => {
+				close()
+				dispatch('new', 'approval')
+			}}
+			role="menuitem"
+			tabindex="-1"
+		>
+			<Icon data={faCheck} scale={0.8} class="mr-1" />
+			Approval (script)
 		</button>
 		<button
 			class="w-full inline-flex gap-1 text-left p-2 hover:bg-gray-100"