From 2750c586ed8a3d7364a270b8dfc0964aeb8a97d5 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 4 Nov 2022 16:31:30 +0100
Subject: [PATCH] fix inner branches in the flow UX

---
 .../flows/content/FlowBranchesWrapper.svelte  | 26 ++++++++++++-------
 .../flows/content/FlowFailureModule.svelte    |  1 +
 .../flows/content/FlowModuleWrapper.svelte    |  8 +++---
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/flows/content/FlowBranchesWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesWrapper.svelte
index 814bb52b65..2f539e687e 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchesWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchesWrapper.svelte
@@ -76,20 +76,26 @@
 						{#each branches as branch, i}
 							{#if flowModule.value.type === 'branchone'}
 								<div class="flex flex-row gap-x-2 items-center">
-									<Button on:click={() => ($selectedId = branch.id)}>
-										Set branch {i} '{branch.summary && branch.summary != ''
-											? branch.summary
-											: 'No summary'}' predicate</Button
+									<div class="max-w-sm w-full text-sm text-gray-600">
+										{branch.summary && branch.summary != '' ? branch.summary : 'No summary'}</div
 									>
+									<div>
+										<Button size="sm" on:click={() => ($selectedId = branch.id)}>
+											Set branch {i} predicate</Button
+										>
+									</div>
 									<HighlightCode language="deno" code={branch.expr} />
 								</div>
 							{:else}
-								<div>
-									<Badge large={true} color="blue">
-										branch {i}: {branch.summary && branch.summary != ''
-											? branch.summary
-											: 'No summary'}
-									</Badge>
+								<div class="flex flex-row gap-x-2">
+									<div class="max-w-sm w-full text-sm text-gray-600">
+										{branch.summary && branch.summary != '' ? branch.summary : 'No summary'}
+									</div>
+									<div>
+										<Button size="sm" on:click={() => ($selectedId = branch.id)}>
+											Set branch {i} summary</Button
+										>
+									</div>
 								</div>
 							{/if}
 						{/each}
diff --git a/frontend/src/lib/components/flows/content/FlowFailureModule.svelte b/frontend/src/lib/components/flows/content/FlowFailureModule.svelte
index eff78ea43b..1803d2ae64 100644
--- a/frontend/src/lib/components/flows/content/FlowFailureModule.svelte
+++ b/frontend/src/lib/components/flows/content/FlowFailureModule.svelte
@@ -9,5 +9,6 @@
 		on:delete={() => {
 			$flowStore.value.failure_module = undefined
 		}}
+		previousModule={undefined}
 	/>
 {/if}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
index 72c8f04470..6ab2242e26 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
@@ -112,7 +112,7 @@
 		<svelte:self
 			bind:flowModule={submodule}
 			bind:parentModule={flowModule}
-			previousModuleId={flowModule.value.modules[index - 1]?.id}
+			previousModule={flowModule.value.modules[index - 1]}
 		/>
 	{/each}
 {:else if flowModule.value.type === 'branchone'}
@@ -123,7 +123,7 @@
 			<svelte:self
 				bind:flowModule={submodule}
 				bind:parentModule={flowModule}
-				previousModuleId={flowModule.value.default[index - 1]?.id}
+				previousModule={flowModule.value.default[index - 1]}
 			/>
 		{/each}
 	{/if}
@@ -135,7 +135,7 @@
 				<svelte:self
 					bind:flowModule={submodule}
 					bind:parentModule={flowModule}
-					previousModuleId={flowModule.value.branches[branchIndex].modules[index - 1]?.id}
+					previousModule={flowModule.value.branches[branchIndex].modules[index - 1]}
 				/>
 			{/each}
 		{/if}
@@ -149,7 +149,7 @@
 				<svelte:self
 					bind:flowModule={submodule}
 					bind:parentModule={flowModule}
-					previousModuleId={flowModule.value.branches[branchIndex].modules[index - 1]?.id}
+					previousModule={flowModule.value.branches[branchIndex].modules[index - 1]}
 				/>
 			{/each}
 		{/if}