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>
This commit is contained in:
Guilhem-lm
2024-07-02 09:44:55 +02:00
committed by GitHub
parent 991031b96d
commit 0ab8ffe305
@@ -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'}