From 50d814c3dc55841b16cd1df8ae86d021de4e880c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Tue, 25 Apr 2023 21:20:44 +0200
Subject: [PATCH] fix(frontend): Flow editor design updates (#1477)

* fix(frontend): Add seconds input to flow retries

* fix(frontend): Update flow branch editor styling
---
 .../content/FlowBranchesAllWrapper.svelte     | 138 +++++++++---------
 .../content/FlowBranchesOneWrapper.svelte     | 131 ++++++++---------
 .../flows/content/FlowRetries.svelte          |  23 ++-
 .../flows/propPicker/PropPickerWrapper.svelte |   2 +-
 4 files changed, 146 insertions(+), 148 deletions(-)

diff --git a/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte
index 94e00d0946..84fc3e3353 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-	import { Alert, Tab } from '$lib/components/common'
+	import { Alert, Badge, Tab } from '$lib/components/common'
 	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
 	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 
 	import type { BranchAll, FlowModule } from '$lib/gen'
+	import { Pane, Splitpanes } from 'svelte-splitpanes'
+	import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte'
 	import FlowCard from '../common/FlowCard.svelte'
 	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
 	import FlowModuleSleep from './FlowModuleSleep.svelte'
 	import FlowModuleSuspend from './FlowModuleSuspend.svelte'
-	// import FlowRetries from './FlowRetries.svelte'
 
 	export let flowModule: FlowModule
 	export let previousModule: FlowModule | undefined
@@ -22,76 +23,73 @@
 
 <div class="h-full flex flex-col w-full">
 	<FlowCard title={value.type == 'branchall' ? 'Run all branches' : 'Run one branch'}>
-		<div class="flex flex-col h-full w-full">
-			<div class="border w-full">
-				<Alert notRounded type="info" title="All branches will be run">
-					The result of this step is the list of the result of each branch.
-				</Alert>
+		<SplitPanesWrapper>
+			<Splitpanes horizontal>
+				<Pane size={flowModule ? 60 : 100}>
+					<Alert notRounded type="info" title="All branches will be run" class="m-2">
+						The result of this step is the list of the result of each branch.
+					</Alert>
 
-				<div class="p-4 mt-4 w-full">
-					<h3 class="mb-4">{value.branches.length} branch{value.branches.length > 1 ? 'es' : ''}</h3
-					>
-					<div class="flex flex-col gap-y-4 py-2 w-full max-w-xl">
-						{#each value.branches as branch}
-							<div class="flex flex-row gap-x-4 w-full items-center">
-								<div class="grow">
-									<input type="text" bind:value={branch.summary} placeholder="Summary" />
+					<div class="p-4 mt-4 w-full">
+						<h3 class="mb-4"
+							>{value.branches.length} branch{value.branches.length > 1 ? 'es' : ''}</h3
+						>
+						<div class="flex flex-col gap-y-4 py-2 w-full">
+							{#each value.branches as branch, i}
+								<div class="flex flex-row gap-x-4 w-full items-center">
+									<div class="grow flex gap-2">
+										<Badge large={true} color="blue">Branch {i + 1}</Badge>
+										<input type="text" bind:value={branch.summary} placeholder="Summary" />
+									</div>
+									<div class="w-min-sm">
+										<Toggle
+											bind:checked={branch.skip_failure}
+											options={{
+												right: 'Skip failure'
+											}}
+										/>
+									</div>
 								</div>
-								<div class="w-min-sm">
-									<Toggle
-										bind:checked={branch.skip_failure}
-										options={{
-											right: 'Skip failure'
-										}}
-									/>
-								</div>
-							</div>
-						{/each}
-					</div>
-					<div class="mt-6 mb-2 text-sm font-bold">Run in parallel</div>
-					<Toggle
-						bind:checked={value.parallel}
-						options={{
-							right: 'All branches run in parallel'
-						}}
-					/>
-				</div>
-			</div>
-			{#if flowModule}
-				<Tabs bind:selected>
-					<!-- <Tab value="retries">Retries</Tab> -->
-					<Tab value="early-stop">Early Stop/Break</Tab>
-					<Tab value="suspend">Suspend</Tab>
-					<Tab value="sleep">Sleep</Tab>
-
-					<svelte:fragment slot="content">
-						<div class="overflow-hidden bg-white">
-							<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowRetries bind:flowModule />
-								</div>
-							</TabContent> -->
-
-							<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleEarlyStop bind:flowModule />
-								</div>
-							</TabContent>
-
-							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleSuspend bind:flowModule />
-								</div>
-							</TabContent>
-							<TabContent value="sleep" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
-								</div>
-							</TabContent>
+							{/each}
 						</div>
-					</svelte:fragment>
-				</Tabs>
-			{/if}
-		</div>
+						<div class="mt-6 mb-2 text-sm font-bold">Run in parallel</div>
+						<Toggle
+							bind:checked={value.parallel}
+							options={{
+								right: 'All branches run in parallel'
+							}}
+						/>
+					</div>
+				</Pane>
+				{#if flowModule}
+					<Pane size={40}>
+						<Tabs bind:selected>
+							<Tab value="early-stop">Early Stop/Break</Tab>
+							<Tab value="suspend">Suspend</Tab>
+							<Tab value="sleep">Sleep</Tab>
+							<svelte:fragment slot="content">
+								<div class="overflow-hidden bg-white">
+									<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleEarlyStop bind:flowModule />
+										</div>
+									</TabContent>
+									<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleSuspend bind:flowModule />
+										</div>
+									</TabContent>
+									<TabContent value="sleep" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
+										</div>
+									</TabContent>
+								</div>
+							</svelte:fragment>
+						</Tabs>
+					</Pane>
+				{/if}
+			</Splitpanes>
+		</SplitPanesWrapper>
 	</FlowCard>
 </div>
diff --git a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
index eff8233847..9f80500c3c 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
@@ -4,11 +4,13 @@
 	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
 
 	import type { BranchOne, FlowModule } from '$lib/gen'
+	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import FlowCard from '../common/FlowCard.svelte'
 	import BranchPredicateEditor from './BranchPredicateEditor.svelte'
 	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
 	import FlowModuleSleep from './FlowModuleSleep.svelte'
 	import FlowModuleSuspend from './FlowModuleSuspend.svelte'
+	import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte'
 	// import FlowRetries from './FlowRetries.svelte'
 
 	export let flowModule: FlowModule
@@ -22,73 +24,72 @@
 
 <div class="h-full">
 	<FlowCard title="Run one branch">
-		<div class="flex flex-col h-full overflow-auto">
-			<div class="border">
-				<Alert notRounded type="info" title="Only one branch will be run">
-					The result of this step is the result of the branch.
-				</Alert>
-
-				<div class="p-2">
-					<h3 class="my-4"
-						>{value.branches.length + 1} branch{value.branches.length + 1 > 1 ? 'es' : ''}</h3
-					>
-					<div class="flex flex-col gap-y-4 py-2">
-						<div class="flex flex-row gap-2 text-sm border border-gray-400 p-2">
-							<Badge large={true} color="blue">Default branch</Badge>
-							<p class="italic text-gray-600"
-								>If none of the predicates' expressions evaluated in-order match, this branch is
-								chosen</p
-							>
-						</div>
-						{#each value.branches as branch}
-							<div class="flex flex-col gap-x-2 p-2 items-center border border-gray-400">
-								<input
-									class="w-full"
-									type="text"
-									bind:value={branch.summary}
-									placeholder="Summary"
-								/>
-								<BranchPredicateEditor {branch} parentModule={flowModule} {previousModule} />
+		<SplitPanesWrapper>
+			<Splitpanes horizontal>
+				<Pane size={flowModule ? 60 : 100}>
+					<Alert notRounded type="info" title="Only one branch will be run" class="m-2">
+						The result of this step is the result of the branch.
+					</Alert>
+					<div class="p-2">
+						<h3 class="my-4">
+							{value.branches.length + 1} branch{value.branches.length + 1 > 1 ? 'es' : ''}
+						</h3>
+						<div class="py-2">
+							<div class="flex flex-row gap-2 text-sm p-2">
+								<Badge large={true} color="blue">Default branch</Badge>
+								<p class="italic text-gray-600"
+									>If none of the predicates' expressions evaluated in-order match, this branch is
+									chosen</p
+								>
 							</div>
-						{/each}
-					</div>
-				</div>
-			</div>
-			{#if flowModule}
-				<Tabs bind:selected>
-					<!-- <Tab value="retries">Retries</Tab> -->
-					<Tab value="early-stop">Early Stop/Break</Tab>
-					<Tab value="suspend">Suspend</Tab>
-					<Tab value="sleep">Sleep</Tab>
-
-					<svelte:fragment slot="content">
-						<div class="overflow-hidden bg-white">
-							<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowRetries bind:flowModule />
+							{#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">
+										<Badge large={true} color="blue">Branch {i + 1}</Badge>
+										<input
+											class="w-full"
+											type="text"
+											bind:value={branch.summary}
+											placeholder="Summary"
+										/>
+									</div>
+									<div class="w-full border">
+										<BranchPredicateEditor {branch} parentModule={flowModule} {previousModule} />
+									</div>
 								</div>
-							</TabContent> -->
-
-							<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleEarlyStop bind:flowModule />
-								</div>
-							</TabContent>
-
-							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleSuspend bind:flowModule />
-								</div>
-							</TabContent>
-							<TabContent value="sleep" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
-								</div>
-							</TabContent>
+							{/each}
 						</div>
-					</svelte:fragment>
-				</Tabs>
-			{/if}
-		</div>
+					</div>
+				</Pane>
+				{#if flowModule}
+					<Pane size={40}>
+						<Tabs bind:selected>
+							<Tab value="early-stop">Early Stop/Break</Tab>
+							<Tab value="suspend">Suspend</Tab>
+							<Tab value="sleep">Sleep</Tab>
+							<svelte:fragment slot="content">
+								<div class="overflow-hidden bg-white">
+									<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleEarlyStop bind:flowModule />
+										</div>
+									</TabContent>
+									<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleSuspend bind:flowModule />
+										</div>
+									</TabContent>
+									<TabContent value="sleep" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
+										</div>
+									</TabContent>
+								</div>
+							</svelte:fragment>
+						</Tabs>
+					</Pane>
+				{/if}
+			</Splitpanes>
+		</SplitPanesWrapper>
 	</FlowCard>
 </div>
diff --git a/frontend/src/lib/components/flows/content/FlowRetries.svelte b/frontend/src/lib/components/flows/content/FlowRetries.svelte
index 9f7c21a83f..1c700c9898 100644
--- a/frontend/src/lib/components/flows/content/FlowRetries.svelte
+++ b/frontend/src/lib/components/flows/content/FlowRetries.svelte
@@ -2,6 +2,7 @@
 	import Toggle from '$lib/components/Toggle.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import type { FlowModule } from '$lib/gen'
+	import { SecondsInput } from '$lib/components/common'
 
 	export let flowModule: FlowModule
 
@@ -30,7 +31,7 @@
 	$: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential)
 </script>
 
-<div class={$$props.class}>
+<div class="h-full flex flex-col {$$props.class ?? ''}">
 	<h2>
 		Retries
 		<Tooltip>
@@ -40,8 +41,8 @@
 		</Tooltip>
 	</h2>
 
-	<div class="flex">
-		<div class="w-1/2 mr-2">
+	<div class="flex h-[calc(100%-22px)]">
+		<div class="w-1/2 h-full overflow-auto pr-2">
 			<div class="pt-4">
 				<Toggle
 					checked={isConstantRetryEnabled}
@@ -60,13 +61,13 @@
 			{#if flowModule.retry?.constant}
 				<div class="text-xs font-bold !mt-2">Attempts</div>
 				<input bind:value={flowModule.retry.constant.attempts} type="number" />
-				<div class="text-xs font-bold !mt-2">Delay (in seconds)</div>
-				<input bind:value={flowModule.retry.constant.seconds} type="number" />
+				<div class="text-xs font-bold !mt-2">Delay</div>
+				<SecondsInput bind:seconds={flowModule.retry.constant.seconds} />
 			{:else}
 				<div class="text-xs font-bold !mt-2">Attempts</div>
 				<input type="number" disabled />
-				<div class="text-xs font-bold !mt-2">Delay (in seconds)</div>
-				<input type="number" disabled />
+				<div class="text-xs font-bold !mt-2">Delay</div>
+				<SecondsInput disabled />
 			{/if}
 			<div class="pt-6">
 				<Toggle
@@ -101,7 +102,7 @@
 				<input type="number" disabled />
 			{/if}
 		</div>
-		<div class="w-1/2 ml-2">
+		<div class="w-1/2 h-full overflow-auto pl-2">
 			{#if true}
 				{@const { attempts: cAttempts, seconds: cSeconds } = flowModule.retry?.constant || {}}
 				{@const {
@@ -115,14 +116,12 @@
 					(_, i) => (multiplier || 0) * (eSeconds || 0) ** (i + cArray.length + 1)
 				)}
 				{@const array = [...cArray, ...eArray]}
-				<div
-					class="bg-gray-50 border border-gray-300 rounded max-h-[431px] overflow-auto px-4 py-2"
-				>
+				<div class="bg-gray-50 border border-gray-300 rounded px-4 py-2">
 					<div class="text-xs font-medium mb-2">Retry attempts</div>
 					{#if array.length > 0}
 						<table class="text-xs">
 							<tr>
-								<td class="font-semibold pr-1">1:</td>
+								<td class="font-semibold pr-1 pb-1">1:</td>
 								<td class="pb-1">After {array[0]} second{array[0] === 1 ? '' : 's'}</td>
 							</tr>
 							{#each array.slice(1) as delay, i}
diff --git a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
index 529f63e545..ff95027dd6 100644
--- a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
+++ b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
@@ -55,7 +55,7 @@
 	on:click_outside={() => propPickerConfig.set(undefined)}
 >
 	<Splitpanes>
-		<Pane minSize={20} size={60} class="relative p-4 !transition-none">
+		<Pane minSize={20} size={60} class="relative p-2 !transition-none">
 			<slot />
 		</Pane>
 		<Pane