From c74cde953c20217cd1b3d93488cd190fca59ca79 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 8 Nov 2022 11:48:05 +0100
Subject: [PATCH] frontend nits

---
 .../src/lib/components/FlowBuilder.svelte     | 19 -------------------
 frontend/src/lib/components/FlowViewer.svelte |  2 +-
 .../src/lib/components/ModulePreview.svelte   |  1 +
 frontend/src/lib/components/RunForm.svelte    | 12 +++++++++++-
 .../components/common/button/Button.svelte    |  2 +-
 .../common/drawer/DrawerContent.svelte        |  4 ++--
 .../flows/content/CapturePayload.svelte       |  3 ++-
 .../flows/content/FlowModuleComponent.svelte  |  4 ++--
 .../flows/header/FlowImportExportMenu.svelte  |  2 --
 .../flows/map/FlowInputsItem.svelte           |  3 ++-
 .../flows/map/FlowModuleSchemaItem.svelte     |  3 ++-
 11 files changed, 24 insertions(+), 31 deletions(-)

diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 7da7029156..cbf5dc6e13 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -191,25 +191,6 @@
 		class="justify-between flex flex-row w-full py-2 px-4 space-x-4 overflow-x-auto scrollbar-hidden"
 	>
 		<div class="flex flex-row space-x-2">
-			<Button
-				color="light"
-				size="sm"
-				variant="border"
-				on:click={() => {
-					const url = new URL('https://hub.windmill.dev/flows/add')
-					const openFlow = {
-						value: $flowStore.value,
-						summary: $flowStore.summary,
-						description: $flowStore.description,
-						schema: $flowStore.schema
-					}
-					url.searchParams.append('flow', btoa(JSON.stringify(openFlow)))
-					window.open(url, '_blank')?.focus()
-				}}
-				startIcon={{ icon: faGlobe }}
-			>
-				Publish to Hub
-			</Button>
 			<FlowImportExportMenu />
 		</div>
 		<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
diff --git a/frontend/src/lib/components/FlowViewer.svelte b/frontend/src/lib/components/FlowViewer.svelte
index 000e2404c2..dd38231e71 100644
--- a/frontend/src/lib/components/FlowViewer.svelte
+++ b/frontend/src/lib/components/FlowViewer.svelte
@@ -52,7 +52,7 @@
 				{/if}
 
 				<p class="font-black text-lg w-full my-4">
-					<span>Inputs</span>
+					<span>Flow Inputs</span>
 				</p>
 				{#if flow.schema && flow.schema.properties && Object.keys(flow.schema.properties).length > 0 && flow.schema}
 					<ul class="my-2">
diff --git a/frontend/src/lib/components/ModulePreview.svelte b/frontend/src/lib/components/ModulePreview.svelte
index 531f9095e1..b22d3e8709 100644
--- a/frontend/src/lib/components/ModulePreview.svelte
+++ b/frontend/src/lib/components/ModulePreview.svelte
@@ -60,6 +60,7 @@
 			schedulable={false}
 			buttonText="Test just this step (Ctrl+Enter)"
 			detailed={false}
+			topButton
 			bind:args={stepArgs}
 		/>
 		{#if testIsLoading}
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index 14a058f0a0..22b6d8856e 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -36,6 +36,7 @@
 	export let schedulable = true
 	export let detailed = true
 	export let autofocus = false
+	export let topButton = false
 
 	export let args: Record<string, any> = decodeArgs($page.url.searchParams.get('args') ?? undefined)
 
@@ -93,6 +94,15 @@
 			<h1>Loading...</h1>
 		{/if}
 	{/if}
+	{#if topButton}
+		<Button
+			btnClasses="!px-6 !py-1 w-full"
+			disabled={!isValid}
+			on:click={() => runAction(undefined, args)}
+		>
+			{buttonText}
+		</Button>
+	{/if}
 	{#if runnable?.schema}
 		<div class="my-2" />
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
@@ -152,7 +162,7 @@
 				{scheduledForStr ? 'Schedule run to a later time' : buttonText}
 			</Button>
 		</div>
-	{:else}
+	{:else if !topButton}
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
 			disabled={!isValid}
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 9c73a0299d..e78ab76e07 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -62,7 +62,7 @@
 			'rounded-md',
 			'justify-center items-center text-center whitespace-nowrap inline-flex',
 			btnClasses,
-			disabled ? 'bg-gray-200' : ''
+			disabled ? 'bg-gray-300' : ''
 		),
 		disabled,
 		href,
diff --git a/frontend/src/lib/components/common/drawer/DrawerContent.svelte b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
index 15a30d6b59..1ca260e8fd 100644
--- a/frontend/src/lib/components/common/drawer/DrawerContent.svelte
+++ b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <div class="flex flex-col divide-y h-screen max-h-screen">
-	<div class="flex justify-between items-center py-2 px-6">
+	<div class="flex justify-between items-center py-2 px-6 gap-x-2">
 		<Button
 			variant="border"
 			size="lg"
@@ -21,7 +21,7 @@
 		>
 			<Icon data={faClose} />
 		</Button>
-		<span class="font-bold">{title}</span>
+		<span class="font-bold truncate">{title}</span>
 		<div class="flex flex-row">
 			{#if $$slots.submission}
 				<slot name="submission" class="sticky" />
diff --git a/frontend/src/lib/components/flows/content/CapturePayload.svelte b/frontend/src/lib/components/flows/content/CapturePayload.svelte
index 9f16099036..ae0a8634b3 100644
--- a/frontend/src/lib/components/flows/content/CapturePayload.svelte
+++ b/frontend/src/lib/components/flows/content/CapturePayload.svelte
@@ -48,6 +48,7 @@
 
 <Drawer
 	bind:this={drawer}
+	size="900px"
 	on:open={() => {
 		startCapturePoint()
 		interval = setInterval(() => {
@@ -56,7 +57,7 @@
 	}}
 	on:close={() => interval && clearInterval(interval)}
 >
-	<DrawerContent title="Capture from a request to seed inputs" on:close={drawer.closeDrawer}>
+	<DrawerContent title="Capture request" on:close={drawer.closeDrawer}>
 		Send a payload at: <div>
 			<a
 				class="text-2xl"
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index f74fb3c73a..6cdd2fab3c 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -183,9 +183,9 @@
 								><Tooltip>
 									Move the focus outside of the text editor to recompute the inputs or press
 									<Kbd>Ctrl/Cmd</Kbd> + <Kbd>S</Kbd>
-								</Tooltip>Inputs</Tab
+								</Tooltip><span class="font-semibold">Step Inputs</span></Tab
 							>
-							<Tab value="test">Test this step</Tab>
+							<Tab value="test"><span class="font-semibold text-md">Test this step</span></Tab>
 							<Tab value="retries">Retries</Tab>
 							{#if !$selectedId.includes('failure')}
 								<Tab value="early-stop">Early Stop</Tab>
diff --git a/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte b/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
index de53b3c6ec..73e0f977a3 100644
--- a/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
+++ b/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
@@ -2,8 +2,6 @@
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
 
-	import Menu from '$lib/components/common/menu/Menu.svelte'
-	import MenuItem from '$lib/components/common/menu/MenuItem.svelte'
 	import FlowViewer from '$lib/components/FlowViewer.svelte'
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	import { sendUserToast } from '$lib/utils'
diff --git a/frontend/src/lib/components/flows/map/FlowInputsItem.svelte b/frontend/src/lib/components/flows/map/FlowInputsItem.svelte
index 70a005f331..aa7d0e7d9d 100644
--- a/frontend/src/lib/components/flows/map/FlowInputsItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowInputsItem.svelte
@@ -13,7 +13,8 @@
 	isFirst
 	hasLine
 	selected={$selectedId === 'inputs'}
-	label="Inputs"
+	bold
+	label="Flow Inputs"
 >
 	<div slot="icon">
 		<Icon data={faPen} scale={0.8} />
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index dc89928c8b..3f9f5a2c0a 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -15,6 +15,7 @@
 	export let retry: boolean = false
 	export let earlyStop: boolean = false
 	export let suspend: boolean = false
+	export let bold: boolean = false
 	export let id: string | undefined = undefined
 	export let label: string
 
@@ -72,7 +73,7 @@
 		<div
 			class="flex justify-between items-center w-full overflow-hidden border p-2 bg-white text-sm"
 		>
-			<div class="flex-1 truncate">{label}</div>
+			<div class="flex-1 truncate" class:font-bold={bold}>{label}</div>
 			<div class="flex items-center space-x-2">
 				{#if id}
 					<Badge color="indigo">{id}</Badge>