From 0ab8ffe305207833b32489d2707dfbfa60b3fc93 Mon Sep 17 00:00:00 2001
From: Guilhem-lm <64467926+Guilhem-lm@users.noreply.github.com>
Date: Tue, 2 Jul 2024 09:44:55 +0200
Subject: [PATCH] Improve flow UI (#3983)

* feat(frontend) : change for loop iterator expression tooltip

* feat(frontend) for turn alert into tooltip

* feat(frontend) gather for loop settings

* feat(frontend) move test step button

* feat(frontend): Fix build)

* revert feat(frontend) gather loop settings

---------

Co-authored-by: LE-MOUEL Guilhem <guilhem.le-mouel.ext@altran.com>
Co-authored-by: Faton Ramadani <faton.ramadani14@gmail.com>
---
 .../components/flows/content/FlowLoop.svelte  | 49 +++++++++----------
 1 file changed, 23 insertions(+), 26 deletions(-)

diff --git a/frontend/src/lib/components/flows/content/FlowLoop.svelte b/frontend/src/lib/components/flows/content/FlowLoop.svelte
index 260160d993..cca4b6d411 100644
--- a/frontend/src/lib/components/flows/content/FlowLoop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowLoop.svelte
@@ -9,7 +9,7 @@
 	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
 	import FlowModuleSuspend from './FlowModuleSuspend.svelte'
 	// import FlowRetries from './FlowRetries.svelte'
-	import { Button, Drawer, Tab, TabContent, Tabs, Alert } from '$lib/components/common'
+	import { Button, Drawer, Tab, TabContent, Tabs } from '$lib/components/common'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { getStepPropPicker } from '../previousResults'
 	import { enterpriseLicense } from '$lib/stores'
@@ -70,24 +70,29 @@
 <div class="h-full flex flex-col">
 	<FlowCard {noEditor} title="For loop">
 		<div slot="header" class="grow">
-			<input bind:value={mod.summary} placeholder={'Summary'} />
-		</div>
-
-		<Splitpanes horizontal class="!max-h-[calc(100%-48px)]">
-			<Pane size={60} minSize={20} class="p-4">
-				{#if !noEditor}
-					<Alert
-						type="info"
-						title="For loops"
-						documentationLink="https://www.windmill.dev/docs/flows/flow_loops"
-						class="mb-4"
-						size="xs"
-					>
+			<div class="my-2 flex flex-row gap-2 items-center">
+				<div>
+					<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops">
 						Add steps inside the loop and specify an iterator expression that defines the sequence
 						over which your subsequent steps will iterate.
-					</Alert>
-				{/if}
+					</Tooltip>
+				</div>
+				<div class="grow">
+					<input bind:value={mod.summary} placeholder={'Summary'} />
+				</div>
+				<div class="justify-end">
+					<Button
+						on:click={() => (previewOpen = true)}
+						startIcon={{ icon: Play }}
+						color="dark"
+						size="sm">Test an iteration</Button
+					>
+				</div>
+			</div>
+		</div>
 
+		<Splitpanes horizontal class="!max-h-[calc(100%-30px)]">
+			<Pane size={60} minSize={20} class="p-4">
 				{#if mod.value.type === 'forloopflow'}
 					<div class="flex flex-row gap-8 mt-2 mb-6">
 						<div>
@@ -128,12 +133,12 @@
 							/>
 						</div>
 					</div>
-
 					<div class="my-2 flex flex-row gap-2 items-center">
 						<div class="text-sm font-bold whitespace-nowrap">
 							Iterator expression
 							<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops">
-								List to iterate over.
+								The JavaScript expression that will be evaluated to get the list of items to iterate
+								over. Example : ["banana", "apple", flow_input.my_fruit].
 							</Tooltip>
 						</div>
 						{#if enableAi}
@@ -157,14 +162,6 @@
 								pickableProperties={stepPropPicker.pickableProperties}
 							/>
 						{/if}
-						<div class="flex w-full justify-end">
-							<Button
-								on:click={() => (previewOpen = true)}
-								startIcon={{ icon: Play }}
-								color="dark"
-								size="sm">Test an iteration</Button
-							>
-						</div>
 					</div>
 
 					{#if mod.value.iterator.type == 'javascript'}