From 2c81f7929ebc88824bdf5dd051677b5c5f453b4e Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 20 May 2023 10:10:22 +0200
Subject: [PATCH] flow nits

---
 .../src/lib/components/FlowGraphViewer.svelte |  4 ++
 .../lib/components/common/menu/Menu.svelte    |  2 +-
 .../content/BranchPredicateEditor.svelte      | 50 ++++++++++++-------
 .../content/FlowBranchesOneWrapper.svelte     |  2 +-
 .../lib/components/flows/flowStateUtils.ts    |  2 +-
 .../components/flows/map/VirtualItem.svelte   |  4 +-
 .../src/lib/components/graph/FlowGraph.svelte |  3 +-
 .../(logged)/flows/get/[...path]/+page.svelte |  2 +-
 .../scripts/get/[...hash]/+page.svelte        |  2 +-
 9 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/frontend/src/lib/components/FlowGraphViewer.svelte b/frontend/src/lib/components/FlowGraphViewer.svelte
index d57ae37ab2..ae6dce9e38 100644
--- a/frontend/src/lib/components/FlowGraphViewer.svelte
+++ b/frontend/src/lib/components/FlowGraphViewer.svelte
@@ -209,6 +209,10 @@
 				{:else if stepDetail.value.type == 'flow'}
 					<FlowPathViewer noSide path={stepDetail.value.path} />
 				{/if}
+			{:else}
+				<p class="font-medium text-gray-600 text-center pt-4 pb-8">
+					Step {stepDetail} selected
+				</p>
 			{/if}
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/common/menu/Menu.svelte b/frontend/src/lib/components/common/menu/Menu.svelte
index 3770505e81..23d14b86d5 100644
--- a/frontend/src/lib/components/common/menu/Menu.svelte
+++ b/frontend/src/lib/components/common/menu/Menu.svelte
@@ -11,7 +11,7 @@
 	export let show = false
 	export let wrapperClasses = ''
 	export let popupClasses = ''
-	export let transitionDuration = 100
+	export let transitionDuration = 25
 	let menu: HTMLDivElement
 
 	type Alignment = 'start' | 'end' | 'center'
diff --git a/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte b/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte
index e481870b77..dcdebbc24b 100644
--- a/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte
+++ b/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte
@@ -6,6 +6,8 @@
 
 	import { getStepPropPicker } from '../previousResults'
 	import type { FlowEditorContext } from '../types'
+	import Button from '$lib/components/common/button/Button.svelte'
+	import { faPen } from '@fortawesome/free-solid-svg-icons'
 
 	export let branch: {
 		summary?: string
@@ -19,7 +21,7 @@
 		getContext<FlowEditorContext>('FlowEditorContext')
 
 	let editor: SimpleEditor | undefined = undefined
-
+	let open = false
 	$: stepPropPicker = getStepPropPicker(
 		$flowStateStore,
 		parentModule,
@@ -31,22 +33,32 @@
 	)
 </script>
 
-<PropPickerWrapper
-	notSelectable
-	pickableProperties={stepPropPicker.pickableProperties}
-	on:select={({ detail }) => {
-		editor?.insertAtCursor(detail)
-		editor?.focus()
-	}}
->
-	<div class="border border-gray-400">
-		<SimpleEditor
-			bind:this={editor}
-			lang="javascript"
-			bind:code={branch.expr}
-			class="small-editor border "
-			shouldBindKey={false}
-			extraLib={stepPropPicker.extraLib}
-		/>
+{#if open}
+	<PropPickerWrapper
+		notSelectable
+		pickableProperties={stepPropPicker.pickableProperties}
+		on:select={({ detail }) => {
+			editor?.insertAtCursor(detail)
+			editor?.focus()
+		}}
+	>
+		<div class="border border-gray-400">
+			<SimpleEditor
+				bind:this={editor}
+				lang="javascript"
+				bind:code={branch.expr}
+				class="small-editor border "
+				shouldBindKey={false}
+				extraLib={stepPropPicker.extraLib}
+			/>
+		</div>
+	</PropPickerWrapper>
+{:else}
+	<div class="flex justify-between gap-4 p-2">
+		<div><pre class="text-sm">{branch.expr}</pre></div><div
+			><Button startIcon={{ icon: faPen }} variant="border" on:click={() => (open = !open)}
+				>Edit Predicate</Button
+			></div
+		>
 	</div>
-</PropPickerWrapper>
+{/if}
diff --git a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
index 9f80500c3c..c4428b817d 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
@@ -44,7 +44,7 @@
 							</div>
 							{#each value.branches as branch, i}
 								<div class="flex flex-col gap-x-2 items-center">
-									<div class="w-full flex gap-2 px-2 pt-10 pb-2">
+									<div class="w-full flex gap-2 px-2 pt-4 pb-2">
 										<Badge large={true} color="blue">Branch {i + 1}</Badge>
 										<input
 											class="w-full"
diff --git a/frontend/src/lib/components/flows/flowStateUtils.ts b/frontend/src/lib/components/flows/flowStateUtils.ts
index 85178e692e..5c5062ca31 100644
--- a/frontend/src/lib/components/flows/flowStateUtils.ts
+++ b/frontend/src/lib/components/flows/flowStateUtils.ts
@@ -129,7 +129,7 @@ export async function createBranchAll(id: string): Promise<[FlowModule, FlowModu
 		id,
 		value: {
 			type: 'branchall',
-			branches: []
+			branches: [{ modules: [] }]
 		},
 		summary: ''
 	}
diff --git a/frontend/src/lib/components/flows/map/VirtualItem.svelte b/frontend/src/lib/components/flows/map/VirtualItem.svelte
index 52c14ff800..e5a30b8e86 100644
--- a/frontend/src/lib/components/flows/map/VirtualItem.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItem.svelte
@@ -65,7 +65,7 @@
 	}}
 >
 	<div
-		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm 
+		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
 			border border-gray-400 p-2 text-2xs module"
 	>
 		{#if $$slots.icon}
@@ -101,7 +101,7 @@
 					}
 				}}
 				type="button"
-				class=" text-gray-900 bg-white border mx-0.5  border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+				class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 			>
 				<ClipboardCopy size={12} />
 			</button>
diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte
index 537f80681e..4426c8fd9b 100644
--- a/frontend/src/lib/components/graph/FlowGraph.svelte
+++ b/frontend/src/lib/components/graph/FlowGraph.svelte
@@ -261,8 +261,8 @@
 							if (!notSelectable) {
 								if ($selectedId != mod.id) {
 									$selectedId = mod.id
-									dispatch('select', mod)
 								}
+								dispatch('select', mod)
 							}
 						} else if (e == 'insert') {
 							dispatch('insert', detail)
@@ -634,7 +634,6 @@
 						id: mod.id
 					},
 					cb: (e: string, detail: any) => {
-						console.log(detail)
 						if (e == 'select') {
 							$selectedId = detail
 							dispatch('select', detail)
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 5ca070fea6..0cad7c7a4b 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -274,7 +274,7 @@
 						size="xs"
 						startIcon={{ icon: faCalendar }}
 					>
-						Schedule
+						New Schedule
 					</Button>
 					<Button
 						on:click={() => moveDrawer.openDrawer(flow?.path ?? '', flow?.summary, 'flow')}
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 ff6b5269df..e46e64c458 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -331,7 +331,7 @@
 						size="xs"
 						startIcon={{ icon: faCalendar }}
 					>
-						Schedule
+						New Schedule
 					</Button>
 				{/if}
 				<Button