feat: individual retry + flow UX refactor

windmill-labs · Oct 4, 2022 · c207745 · c207745
1 parent e385eb5
commit c207745
Show file tree

Hide file tree

Showing 29 changed files with 491 additions and 361 deletions.
diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
@@ -197,73 +197,75 @@
 <ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openModal} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openModal} />
 
-<div class="flex divide-x items-center overflow-hidden w-full">
-	<div>
-		<Button
-			color="light"
-			btnClasses="mr-1"
-			on:click={contextualVariablePicker.openModal}
-			size="xs"
-			spacingSize="md"
-			startIcon={{ icon: faDollarSign }}
-			{iconOnly}
-		>
-			+Contextual Variable
-		</Button>
-	</div>
-	<div>
-		<Button
-			color="light"
-			btnClasses="mr-1"
-			on:click={variablePicker.openModal}
-			size="xs"
-			spacingSize="md"
-			startIcon={{ icon: faWallet }}
-			{iconOnly}
-		>
-			+Variable
-		</Button>
-	</div>
-	<div>
-		<Button
-			btnClasses="mx-1"
-			size="xs"
-			spacingSize="md"
-			color="light"
-			on:click={resourcePicker.openModal}
-			{iconOnly}
-			startIcon={{ icon: faCube }}
-		>
-			+Resource
-		</Button>
-	</div>
+<div class="flex flex-row justify-between items-center overflow-hidden w-full">
+	<div class="flex flex-row divide-x items-center">
+		<div>
+			<Button
+				color="light"
+				btnClasses="mr-1"
+				on:click={contextualVariablePicker.openModal}
+				size="xs"
+				spacingSize="md"
+				startIcon={{ icon: faDollarSign }}
+				{iconOnly}
+			>
+				+Contextual Variable
+			</Button>
+		</div>
+		<div>
+			<Button
+				color="light"
+				btnClasses="mr-1"
+				on:click={variablePicker.openModal}
+				size="xs"
+				spacingSize="md"
+				startIcon={{ icon: faWallet }}
+				{iconOnly}
+			>
+				+Variable
+			</Button>
+		</div>
+		<div>
+			<Button
+				btnClasses="mx-1"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={resourcePicker.openModal}
+				{iconOnly}
+				startIcon={{ icon: faCube }}
+			>
+				+Resource
+			</Button>
+		</div>
 
-	<div>
-		<Button
-			btnClasses="mx-1"
-			size="xs"
-			spacingSize="md"
-			color="light"
-			on:click={scriptPicker.openModal}
-			{iconOnly}
-			startIcon={{ icon: faCode }}
-		>
-			View Script
-		</Button>
-	</div>
+		<div>
+			<Button
+				btnClasses="mx-1"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={scriptPicker.openModal}
+				{iconOnly}
+				startIcon={{ icon: faCode }}
+			>
+				View Script
+			</Button>
+		</div>
 
-	<div>
-		<Button
-			btnClasses="mx-1"
-			size="xs"
-			spacingSize="md"
-			color="light"
-			on:click={editor.clearContent}
-			{iconOnly}
-			startIcon={{ icon: faRotateLeft }}
-		>
-			Reset content
-		</Button>
+		<div>
+			<Button
+				btnClasses="mx-1"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={editor.clearContent}
+				{iconOnly}
+				startIcon={{ icon: faRotateLeft }}
+			>
+				Reset content
+			</Button>
+		</div>
 	</div>
 	<div>
 		<Button
@@ -274,7 +276,9 @@
 			on:click={editor.reloadWebsocket}
 			startIcon={{ icon: faRotate }}
 		>
-			Reload assistants
+			{#if !iconOnly}
+				Reload assistants
+			{/if}
 			<span class="ml-1">
 				{#if lang == 'deno'}
 					(<span class={websocketAlive.deno ? 'text-green-600' : 'text-red-700'}>Deno</span>)

diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
@@ -182,7 +182,11 @@
 				}}
 			>
 				<div class="overflow-x-auto flex items-center h-full text-sm text-left font-semibold">
-					<div>{$flowStore.summary ?? ''}</div>
+					<div
+						>{$flowStore.summary == '' || !$flowStore.summary
+							? 'No summary'
+							: $flowStore.summary}</div
+					>
 				</div>
 				<div>
 					<Icon data={faPen} scale={0.8} class="text-gray-500 ml-1" />

diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -25,13 +25,14 @@
 		if (previewMode === 'whole') {
 			return $flowStore
 		} else {
-			const [parentIndex, childIndex] = selectedIdToIndexes($selectedId)
+			let [parentIndex, childIndex] = selectedIdToIndexes($selectedId)
 
-			const modules = $flowStore.value.modules.slice(0, Number(parentIndex) + 1)
 			const flow = JSON.parse(JSON.stringify($flowStore))
+			const modules = flow.value.modules.slice(0, Number(parentIndex) + 1)
 			flow.value.modules = modules
 
 			if (childIndex != undefined) {
+				console.log(modules)
 				const lastModule = modules[modules.length - 1].value
 				if (lastModule.type === 'forloopflow') {
 					lastModule.modules = lastModule.modules.slice(0, Number(childIndex) + 1)

diff --git a/frontend/src/lib/components/ItemPicker.svelte b/frontend/src/lib/components/ItemPicker.svelte
@@ -6,13 +6,14 @@
 
 	type Item = Record<string, any>
 	export let pickCallback: (path: string, f: string) => void
-	export let loadItems: () => Promise<Item[]>
+	export let loadItems: () => Promise<Item[] | undefined>
 	export let extraField: string
 	export let itemName: string
 	export let closeOnClick = true
+	export let noItemMessage = ''
 
-	let items: Item[] = []
-	let filteredItems: Item[] = []
+	let items: Item[] | undefined = []
+	let filteredItems: Item[] | undefined = []
 	let itemsFilter = ''
 
 	const fuseOptions = {
@@ -24,47 +25,53 @@
 	export function openModal() {
 		loadItems().then((v) => {
 			items = v
-			fuse.setCollection(items)
+			if (items) {
+				fuse.setCollection(items)
+			}
 		})
 		modal.openModal()
 	}
 
 	$: filteredItems =
-		itemsFilter.length > 0 ? fuse.search(itemsFilter).map((value) => value.item) : items
+		itemsFilter.length > 0 && items ? fuse.search(itemsFilter).map((value) => value.item) : items
 
 	let modal: Modal
 </script>
 
 <Modal bind:this={modal} z="z-30">
 	<div slot="title">Search a {itemName}</div>
 	<div slot="content">
-		<div class="w-12/12 pb-4">
-			<input placeholder="Search {itemName}" bind:value={itemsFilter} class="search-item" />
-		</div>
-		<ul class="divide-y divide-gray-200">
-			{#each filteredItems as obj}
-				<li
-					class="py-4 px-1 gap-1 flex flex-col hover:bg-white hover:border text-black cursor-pointer"
-					on:click={() => {
-						if (closeOnClick) {
-							modal.closeModal()
-						}
-						pickCallback(obj['path'], obj[extraField])
-					}}
-				>
-					<p class="text-sm font-semibold flex flex-row">
-						{#if `app` in obj}
-							<IconedResourceType silent={true} name={obj['app']} />
-							<span class="mr-2" />
-						{/if}
-						<span class="mr-2">{obj[extraField]}</span><span class="font-normal break-all"
-							>{obj['path'] ?? ''}</span
-						>
-					</p>
-					<p class="text-xs italic">{obj['description'] ?? ''}</p>
-				</li>
-			{/each}
-		</ul>
+		{#if filteredItems}
+			<div class="w-12/12 pb-4">
+				<input placeholder="Search {itemName}" bind:value={itemsFilter} class="search-item" />
+			</div>
+			<ul class="divide-y divide-gray-200">
+				{#each filteredItems as obj}
+					<li
+						class="py-4 px-1 gap-1 flex flex-col hover:bg-white hover:border text-black cursor-pointer"
+						on:click={() => {
+							if (closeOnClick) {
+								modal.closeModal()
+							}
+							pickCallback(obj['path'], obj[extraField])
+						}}
+					>
+						<p class="text-sm font-semibold flex flex-row">
+							{#if `app` in obj}
+								<IconedResourceType silent={true} name={obj['app']} />
+								<span class="mr-2" />
+							{/if}
+							<span class="mr-2">{obj[extraField]}</span><span class="font-normal break-all"
+								>{obj['path'] ?? ''}</span
+							>
+						</p>
+						<p class="text-xs italic">{obj['description'] ?? ''}</p>
+					</li>
+				{/each}
+			</ul>
+		{:else}
+			<span class="mt-2 text-sm text-red-400">{noItemMessage}</span>
+		{/if}
 	</div>
 	<span slot="submission">
 		<slot name="submission" />

diff --git a/frontend/src/lib/components/ModulePreview.svelte b/frontend/src/lib/components/ModulePreview.svelte
@@ -81,7 +81,7 @@
 			{#if testIsLoading}
 				<Button
 					on:click={testJobLoader?.cancelJob}
-					btnClasses="w-full"
+					btnClasses="w-full mt-4"
 					color="red"
 					size="sm"
 					startIcon={{
@@ -101,8 +101,8 @@
 					<LogViewer content={testJob?.logs} isLoading={testIsLoading} />
 				</top>
 				<down slot="down">
-					<pre
-						class="overflow-x-auto break-all relative h-full p-2 text-sm">{#if testJob && 'result' in testJob && testJob.result != undefined}<DisplayResult
+					<pre class="overflow-x-auto break-all relative h-full p-2 text-sm"
+						>{#if testJob && 'result' in testJob && testJob.result != undefined}<DisplayResult
 								result={testJob.result}
 							/>
 						{:else if testIsLoading}Waiting for Result...

diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
@@ -127,7 +127,7 @@
 		</div>
 	{:else}
 		<Button
-			btnClasses="!px-6 !py-1"
+			btnClasses="!px-6 !py-1 w-full"
 			disabled={!isValid}
 			on:click={() => runAction(undefined, args)}
 		>

diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { ScriptService, FlowService, Script } from '$lib/gen'
 
-	import Icon from 'svelte-awesome'
 	import { faSearch } from '@fortawesome/free-solid-svg-icons'
 	import { hubScripts, workspaceStore } from '$lib/stores'
 	import { createEventDispatcher } from 'svelte'

diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
@@ -13,6 +13,7 @@
 	export let href: string | undefined = undefined
 	export let target: Button.Target = '_self'
 	export let iconOnly: boolean = false
+	export let id: string = ''
 
 	export let startIcon: { icon: any; classes?: string } | undefined = undefined
 	export let endIcon: { icon: any; classes?: string } | undefined = undefined
@@ -80,12 +81,11 @@
 	}
 
 	$: isSmall = size === 'xs' || size === 'sm'
-	$: startIconClass = classNames(isSmall ? 'mr-1' : 'mr-2', startIcon?.classes)
-	$: endIconClass = classNames(isSmall ? 'ml-1' : 'ml-2', endIcon?.classes)
 </script>
 
 {#if href}
 	<button
+		{id}
 		type="button"
 		on:click|stopPropagation={() => goto(href ?? '#')}
 		{target}
@@ -111,7 +111,7 @@
 		{/if}
 	</button>
 {:else}
-	<button type="button" on:click|stopPropagation {...buttonProps} {...$$restProps}>
+	<button {id} type="button" on:click|stopPropagation {...buttonProps} {...$$restProps}>
 		{#if startIcon}
 			<Icon
 				data={startIcon.icon}

diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte
@@ -1,21 +1,20 @@
 <!-- Flow Editor: Top level component -->
 <script lang="ts">
 	import { HSplitPane } from 'svelte-split-pane'
-	import FlowEditorHeader from './header/FlowEditorHeader.svelte'
 	import FlowEditorPanel from './content/FlowEditorPanel.svelte'
 	import FlowModuleSchemaMap from './map/FlowModuleSchemaMap.svelte'
 	import { flowStore } from './flowStore'
 	import { flowStateStore } from './flowState'
+	import FlowPreviewButtons from './header/FlowPreviewButtons.svelte'
 
 	export let initialPath: string
 </script>
 
-<FlowEditorHeader />
-
-<div class="h-full overflow-hidden">
+<div class="h-full overflow-hidden border-t">
 	<HSplitPane leftPaneSize="25%" rightPaneSize="75%" minLeftPaneSize="20%" minRightPaneSize="40%">
-		<left slot="left" class="h-full ">
-			<div class="h-full overflow-auto p-4 bg-gray-50">
+		<left slot="left" class="h-full flex flex-col ">
+			<FlowPreviewButtons />
+			<div class="grow overflow-auto p-4 bg-gray-50">
 				{#if $flowStore.value.modules && $flowStateStore.modules}
 					<FlowModuleSchemaMap
 						bind:modules={$flowStore.value.modules}

diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
@@ -5,8 +5,8 @@
 	import FlowModuleWrapper from './FlowModuleWrapper.svelte'
 	import FlowSettings from './FlowSettings.svelte'
 	import FlowInput from './FlowInput.svelte'
-	import FlowLoop from './FlowLoop.svelte'
 	import FlowFailureModule from './FlowFailureModule.svelte'
+	import FlowLoopWrapper from './FlowLoopWrapper.svelte'
 
 	export let initialPath: string
 
@@ -18,10 +18,8 @@
 		<FlowSettings {initialPath} />
 	{:else if $selectedId === 'settings-schedule'}
 		<FlowSettings {initialPath} defaultTab="schedule" />
-	{:else if $selectedId === 'settings-retries'}
-		<FlowSettings {initialPath} defaultTab="retries" />
 	{:else if $selectedId.includes('loop')}
-		<FlowLoop />
+		<FlowLoopWrapper />
 	{:else if $selectedId === 'inputs'}
 		<FlowInput />
 	{:else if $selectedId === 'failure'}