From 6b30969ae5e63b77f8a6ed343ce946187cd6ccbd Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 1 Aug 2022 15:07:29 +0200
Subject: [PATCH] improve Flow UI (#297)

* Improve flow ui

* Finish reworking

* Fix formating

* Fix naviation

* Fix navigaion + adjust icon sizes

* Remove duplicate code

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>
---
 frontend/package-lock.json                    | 108 ++++++-
 frontend/package.json                         |   2 +
 frontend/src/app.css                          |   6 +
 frontend/src/lib/components/EditorBar.svelte  |  81 +++--
 .../src/lib/components/FlowBuilder.svelte     |  90 +++---
 frontend/src/lib/components/FlowEditor.svelte | 281 +++---------------
 .../src/lib/components/FlowPreview.svelte     |   3 +-
 frontend/src/lib/components/Modal.svelte      |   4 +-
 frontend/src/lib/components/ModuleStep.svelte | 122 ++++----
 .../src/lib/components/SchemaEditor.svelte    | 155 +++++-----
 .../src/lib/components/ScriptBuilder.svelte   |  18 +-
 .../src/lib/components/ScriptEditor.svelte    |  30 +-
 .../src/lib/components/TableCustom.svelte     |  17 +-
 frontend/src/lib/components/Tooltip.svelte    |   3 +-
 .../flows/CopyFirstStepSchema.svelte          |  10 +-
 .../src/lib/components/flows/FlowBox.svelte   |   3 +
 .../lib/components/flows/FlowBoxHeader.svelte |  10 +
 .../src/lib/components/flows/FlowInput.svelte |  21 ++
 .../components/flows/FlowModuleHeader.svelte  |  54 ++--
 .../lib/components/flows/FlowSettings.svelte  | 189 ++++++++++++
 .../src/lib/components/flows/flowStore.ts     |  38 ++-
 frontend/tailwind.config.cjs                  |  12 +-
 22 files changed, 716 insertions(+), 541 deletions(-)
 create mode 100644 frontend/src/lib/components/flows/FlowBox.svelte
 create mode 100644 frontend/src/lib/components/flows/FlowBoxHeader.svelte
 create mode 100644 frontend/src/lib/components/flows/FlowInput.svelte
 create mode 100644 frontend/src/lib/components/flows/FlowSettings.svelte

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b7cde09768..0c9c7bc021 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -32,6 +32,8 @@
 				"eslint": "^8.20.0",
 				"eslint-config-prettier": "^8.3.0",
 				"eslint-plugin-svelte3": "^4.0.0",
+				"flowbite": "^1.5.1",
+				"flowbite-svelte": "^0.22.19",
 				"openapi-typescript-codegen": "^0.23.0",
 				"path-browserify": "^1.0.1",
 				"postcss": "^8.4.5",
@@ -188,6 +190,21 @@
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "0.7.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
+			"integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==",
+			"dev": true
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "0.5.4",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
+			"integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
+			"dev": true,
+			"dependencies": {
+				"@floating-ui/core": "^0.7.3"
+			}
+		},
 		"node_modules/@fortawesome/fontawesome-common-types": {
 			"version": "6.1.2",
 			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz",
@@ -319,7 +336,6 @@
 			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
 			"integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
 			"dev": true,
-			"peer": true,
 			"funding": {
 				"type": "opencollective",
 				"url": "https://opencollective.com/popperjs"
@@ -1028,6 +1044,12 @@
 				"fsevents": "~2.3.2"
 			}
 		},
+		"node_modules/classnames": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+			"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==",
+			"dev": true
+		},
 		"node_modules/clone-regexp": {
 			"version": "2.2.0",
 			"dev": true,
@@ -1886,6 +1908,32 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/flowbite": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.5.1.tgz",
+			"integrity": "sha512-kMQ2o/aLV629WqUVubw2KZGYcN7W5rD0tFVqxvK5/45EFIgMAlTmT+XxdIjKwzyTlb3HgmUj5h5NaqN3TJc9Zw==",
+			"dev": true,
+			"dependencies": {
+				"@popperjs/core": "^2.9.3",
+				"mini-svg-data-uri": "^1.4.3"
+			}
+		},
+		"node_modules/flowbite-svelte": {
+			"version": "0.22.19",
+			"resolved": "https://registry.npmjs.org/flowbite-svelte/-/flowbite-svelte-0.22.19.tgz",
+			"integrity": "sha512-HhLhQlHiCP6K37z3OhrDGgoiiNqq6DMmbsa8hL+1TgK0WilokTuC4iLbnaBTTNg5lN+Od4w/KmX1PYKiBUrzow==",
+			"dev": true,
+			"dependencies": {
+				"@floating-ui/dom": "^0.5.3",
+				"classnames": "^2.3.1",
+				"flowbite": "^1.4.2",
+				"svelte-heros": "^2.2.2"
+			},
+			"engines": {
+				"node": ">=16.0.0",
+				"npm": ">=7.0.0"
+			}
+		},
 		"node_modules/fraction.js": {
 			"version": "4.2.0",
 			"dev": true,
@@ -4188,6 +4236,12 @@
 				"svelte": "^3.24.0"
 			}
 		},
+		"node_modules/svelte-heros": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/svelte-heros/-/svelte-heros-2.3.2.tgz",
+			"integrity": "sha512-OlfD/TzHytc9/J9ij/YrFKS2Lj0i0N0qkOm/5F7s9zdb/YGZ9tHY4PujSXrNxEyVWjjiaLTJGVgMkXlIrvVNNg==",
+			"dev": true
+		},
 		"node_modules/svelte-highlight": {
 			"version": "6.2.0",
 			"resolved": "https://registry.npmjs.org/svelte-highlight/-/svelte-highlight-6.2.0.tgz",
@@ -4905,6 +4959,21 @@
 				"strip-json-comments": "^3.1.1"
 			}
 		},
+		"@floating-ui/core": {
+			"version": "0.7.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
+			"integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==",
+			"dev": true
+		},
+		"@floating-ui/dom": {
+			"version": "0.5.4",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
+			"integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
+			"dev": true,
+			"requires": {
+				"@floating-ui/core": "^0.7.3"
+			}
+		},
 		"@fortawesome/fontawesome-common-types": {
 			"version": "6.1.2",
 			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz",
@@ -4993,8 +5062,7 @@
 			"version": "2.11.5",
 			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
 			"integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
-			"dev": true,
-			"peer": true
+			"dev": true
 		},
 		"@rollup/pluginutils": {
 			"version": "4.2.1",
@@ -5405,6 +5473,12 @@
 				"readdirp": "~3.6.0"
 			}
 		},
+		"classnames": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+			"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==",
+			"dev": true
+		},
 		"clone-regexp": {
 			"version": "2.2.0",
 			"dev": true,
@@ -5963,6 +6037,28 @@
 			"version": "3.2.5",
 			"dev": true
 		},
+		"flowbite": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.5.1.tgz",
+			"integrity": "sha512-kMQ2o/aLV629WqUVubw2KZGYcN7W5rD0tFVqxvK5/45EFIgMAlTmT+XxdIjKwzyTlb3HgmUj5h5NaqN3TJc9Zw==",
+			"dev": true,
+			"requires": {
+				"@popperjs/core": "^2.9.3",
+				"mini-svg-data-uri": "^1.4.3"
+			}
+		},
+		"flowbite-svelte": {
+			"version": "0.22.19",
+			"resolved": "https://registry.npmjs.org/flowbite-svelte/-/flowbite-svelte-0.22.19.tgz",
+			"integrity": "sha512-HhLhQlHiCP6K37z3OhrDGgoiiNqq6DMmbsa8hL+1TgK0WilokTuC4iLbnaBTTNg5lN+Od4w/KmX1PYKiBUrzow==",
+			"dev": true,
+			"requires": {
+				"@floating-ui/dom": "^0.5.3",
+				"classnames": "^2.3.1",
+				"flowbite": "^1.4.2",
+				"svelte-heros": "^2.2.2"
+			}
+		},
 		"fraction.js": {
 			"version": "4.2.0",
 			"dev": true
@@ -7356,6 +7452,12 @@
 				"typescript": "*"
 			}
 		},
+		"svelte-heros": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/svelte-heros/-/svelte-heros-2.3.2.tgz",
+			"integrity": "sha512-OlfD/TzHytc9/J9ij/YrFKS2Lj0i0N0qkOm/5F7s9zdb/YGZ9tHY4PujSXrNxEyVWjjiaLTJGVgMkXlIrvVNNg==",
+			"dev": true
+		},
 		"svelte-highlight": {
 			"version": "6.2.0",
 			"resolved": "https://registry.npmjs.org/svelte-highlight/-/svelte-highlight-6.2.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 82acf718fd..e909c44e1b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,6 +29,8 @@
 		"eslint": "^8.20.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^4.0.0",
+		"flowbite": "^1.5.1",
+		"flowbite-svelte": "^0.22.19",
 		"openapi-typescript-codegen": "^0.23.0",
 		"path-browserify": "^1.0.1",
 		"postcss": "^8.4.5",
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 0fbace3c02..209efdeb7d 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -3,6 +3,12 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+
+	/* Avoid content shifting */
+	overflow-y: overlay;
+} 
+
 @layer base {
 	h1 {
 		@apply text-2xl;
diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index 2ffc35437e..2926100762 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -2,17 +2,18 @@
 	import { ResourceService, ScriptService, VariableService } from '$lib/gen'
 	import { getScriptByPath, loadHubScripts, sendUserToast } from '$lib/utils'
 
-	import Icon from 'svelte-awesome'
 	import { faSearch } from '@fortawesome/free-solid-svg-icons'
+	import Icon from 'svelte-awesome'
 
-	import { workspaceStore, hubScripts } from '$lib/stores'
-	import ItemPicker from './ItemPicker.svelte'
-	import VariableEditor from './VariableEditor.svelte'
-	import ResourceEditor from './ResourceEditor.svelte'
+	import { hubScripts, workspaceStore } from '$lib/stores'
+	import { Button } from 'flowbite-svelte'
 	import { Highlight } from 'svelte-highlight'
 	import { python, typescript } from 'svelte-highlight/languages'
-	import Modal from './Modal.svelte'
 	import type Editor from './Editor.svelte'
+	import ItemPicker from './ItemPicker.svelte'
+	import Modal from './Modal.svelte'
+	import ResourceEditor from './ResourceEditor.svelte'
+	import VariableEditor from './VariableEditor.svelte'
 
 	export let lang: 'python3' | 'deno'
 	export let editor: Editor
@@ -172,41 +173,57 @@
 
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openModal} />
 
-<div class="flex flex-row justify-around w-full">
-	<button
-		class="default-button-secondary font-semibold py-px mr-2 text-xs align-middle max-h-8"
-		on:click|stopPropagation={() => {
+<div class="flex flex-row justify-end w-full  space-x-2">
+	<Button
+		size="xs"
+		color="blue"
+		outline
+		on:click={() => {
 			variablePicker.openModal()
 		}}
-		>Variable picker <Icon data={faSearch} scale={0.7} />
-	</button>
+	>
+		<Icon data={faSearch} scale={0.7} class="mr-2" />
+		Variable picker
+	</Button>
 
-	<button
-		class="default-button-secondary font-semibold py-px text-xs mr-2 align-middle max-h-8"
-		on:click|stopPropagation={() => {
+	<Button
+		size="xs"
+		color="blue"
+		outline
+		on:click={() => {
 			resourcePicker.openModal()
 		}}
-		>Resource picker <Icon data={faSearch} scale={0.7} />
-	</button>
-	<button
-		class="default-button-secondary font-semibold py-px text-xs mr-2 align-middle max-h-8"
-		on:click|stopPropagation={() => {
+	>
+		<Icon data={faSearch} scale={0.7} class="mr-2" />
+		Resource picker
+	</Button>
+
+	<Button
+		size="xs"
+		color="blue"
+		outline
+		on:click={() => {
 			scriptPicker.openModal()
 		}}
-		>Script explorer <Icon data={faSearch} scale={0.7} />
-	</button>
+	>
+		<Icon data={faSearch} scale={0.7} class="mr-2" />
+		Script explorer
+	</Button>
 
-	<button
-		class="default-button-secondary py-px max-h-8 text-xs"
-		on:click|stopPropagation={() => {
+	<Button
+		size="xs"
+		color="blue"
+		outline
+		on:click={() => {
 			editor.reloadWebsocket()
 		}}
 	>
-		Reload assistants (status: {#if lang == 'deno'}<span
-				class={websocketAlive.deno ? 'text-green-600' : 'text-red-600'}>deno</span
-			>{:else if lang == 'python3'}<span
-				class={websocketAlive.pyright ? 'text-green-600' : 'text-red-600'}>pyright</span
-			>
-			<span class={websocketAlive.black ? 'text-green-600' : 'text-red-600'}> black</span>{/if})
-	</button>
+		Reload assistants (status:&nbsp;
+		{#if lang == 'deno'}
+			<span class={websocketAlive.deno ? 'text-green-600' : 'text-red-600'}>Deno</span>
+		{:else if lang == 'python3'}
+			<span class={websocketAlive.pyright ? 'text-green-600' : 'text-red-600'}>Pyright</span>
+			<span class={websocketAlive.black ? 'text-green-600' : 'text-red-600'}>Black</span>
+		{/if})
+	</Button>
 </div>
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 7245abf033..a633633015 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -10,6 +10,7 @@
 		sendUserToast,
 		setQueryWithoutLoad
 	} from '$lib/utils'
+	import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte'
 	import { onMount } from 'svelte'
 	import { OFFSET } from './CronInput.svelte'
 	import FlowEditor from './FlowEditor.svelte'
@@ -126,61 +127,48 @@
 	})
 </script>
 
-<div class="flex flex-col h-screen max-w-screen-lg xl:-ml-20 xl:pl-4 w-full -mt-4 pt-4 md:mx-10 ">
+<div class="flex flex-col max-w-screen-lg w-full mb-96 px-8">
 	<!-- Nav between steps-->
-	<div class="flex flex-col w-full">
-		<div class="justify-between flex flex-row drop-shadow-sm w-full">
-			<div class="wizard-nav flex flex-row w-full">
+	<div class="justify-between flex flex-row w-full">
+		<Breadcrumb>
+			<BreadcrumbItem>
+				<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}
+					>Flow Editor</button
+				>
+			</BreadcrumbItem>
+			<BreadcrumbItem>
+				<button on:click={() => changeStep(2)} class={step === 2 ? 'font-bold' : null}
+					>UI customisation</button
+				>
+			</BreadcrumbItem>
+		</Breadcrumb>
+		<div class="flex flex-row-reverse ml-2">
+			{#if step == 1}
 				<button
 					disabled={pathError != ''}
-					class="{step === 1
-						? 'default-button-disabled text-gray-700'
-						: 'default-button-secondary'} min-w-max ml-2"
-					on:click={() => {
-						changeStep(1)
-					}}>Step 1: Flow</button
+					class="default-button px-6 max-h-8"
+					on:click={() => changeStep(2)}
 				>
+					Next
+				</button>
 				<button
 					disabled={pathError != ''}
-					class="{step === 2
-						? 'default-button-disabled text-gray-700'
-						: 'default-button-secondary'} min-w-max ml-2"
-					on:click={() => {
-						changeStep(2)
-					}}>Step 2: UI customisation</button
+					class="default-button-secondary px-6 max-h-8 mr-2"
+					on:click={saveFlow}
 				>
-			</div>
-			<div class="flex flex-row-reverse ml-2">
-				{#if step == 1}
-					<button
-						disabled={pathError != ''}
-						class="default-button px-6 max-h-8"
-						on:click={() => {
-							changeStep(step + 1)
-						}}
-					>
-						Next
-					</button>
-					<button
-						disabled={pathError != ''}
-						class="default-button-secondary px-6 max-h-8 mr-2"
-						on:click={saveFlow}
-					>
-						Save
-					</button>
-				{:else}
-					<button class="default-button px-6 self-end" on:click={saveFlow}>Save</button>
-				{/if}
-			</div>
-		</div>
-
-		<div class="flex flex-row-reverse">
-			<span class="my-1 text-sm text-gray-500 italic">
-				{#if initialPath && initialPath != $flowStore?.path} {initialPath} &rightarrow; {/if}
-				{$flowStore?.path}
-			</span>
+					Save
+				</button>
+			{:else}
+				<button class="default-button px-6 self-end" on:click={saveFlow}>Save</button>
+			{/if}
 		</div>
 	</div>
+	<div class="flex flex-row-reverse">
+		<span class="my-1 text-sm text-gray-500 italic">
+			{#if initialPath && initialPath != $flowStore?.path} {initialPath} &rightarrow; {/if}
+			{$flowStore?.path}
+		</span>
+	</div>
 
 	<!-- metadata -->
 
@@ -205,13 +193,3 @@
 		<p>Loading</p>
 	{/if}
 </div>
-
-<style>
-	/* .wizard-nav {
-		@apply w-1/2 sm:w-1/4;
-	} */
-
-	.wizard-nav button {
-		max-height: 30px;
-	}
-</style>
diff --git a/frontend/src/lib/components/FlowEditor.svelte b/frontend/src/lib/components/FlowEditor.svelte
index 95c8ac987e..6c45196677 100644
--- a/frontend/src/lib/components/FlowEditor.svelte
+++ b/frontend/src/lib/components/FlowEditor.svelte
@@ -1,28 +1,16 @@
 <script lang="ts">
 	import { ScheduleService } from '$lib/gen'
 
-	import { faFileExport, faFileImport, faGlobe, faPlus } from '@fortawesome/free-solid-svg-icons'
-	import Icon from 'svelte-awesome'
-	import FlowPreview from './FlowPreview.svelte'
-	import CopyFirstStepSchema from './flows/CopyFirstStepSchema.svelte'
-	import { addModule, flowStore, initFlow, mode } from './flows/flowStore'
-	import ModuleStep from './ModuleStep.svelte'
-	import Path from './Path.svelte'
-	import RadioButtonV2 from './RadioButtonV2.svelte'
-	import SchemaEditor from './SchemaEditor.svelte'
-	import Required from './Required.svelte'
-	import { flowToHubUrl, pathIsEmpty, sendUserToast } from '$lib/utils'
-	import Dropdown from './Dropdown.svelte'
-	import Editor from './Editor.svelte'
-	import Modal from './Modal.svelte'
-	import FlowViewer from './FlowViewer.svelte'
-	import { flowToMode } from './flows/utils'
-	import CronInput from './CronInput.svelte'
-	import CollapseLink from './CollapseLink.svelte'
-	import Toggle from './Toggle.svelte'
-	import SchemaForm from './SchemaForm.svelte'
-	import Tooltip from './Tooltip.svelte'
 	import { workspaceStore } from '$lib/stores'
+	import { pathIsEmpty } from '$lib/utils'
+	import { faPlus } from '@fortawesome/free-solid-svg-icons'
+	import { Button } from 'flowbite-svelte'
+	import Icon from 'svelte-awesome'
+	import FlowInput from './flows/FlowInput.svelte'
+	import FlowSettings from './flows/FlowSettings.svelte'
+	import { addModule, flowStore, mode } from './flows/flowStore'
+	import ModuleStep from './ModuleStep.svelte'
+	import Tooltip from './Tooltip.svelte'
 
 	export let pathError = ''
 	export let initialPath: string = ''
@@ -31,11 +19,6 @@
 	export let scheduleEnabled = false
 	export let scheduleCron: string = '0 */5 * * *'
 
-	let jsonSetter: Modal
-	let jsonViewer: Modal
-
-	let jsonValue: string = ''
-
 	async function loadSchedule() {
 		const existsSchedule = await ScheduleService.existsSchedule({
 			workspace: $workspaceStore ?? '',
@@ -46,7 +29,7 @@
 				workspace: $workspaceStore ?? '',
 				path: initialPath
 			})
-			scheduleEnabled = schedule.enabled
+			scheduleEnabled = schedule.enabled!
 			scheduleCron = schedule.schedule
 			scheduleArgs = schedule.args ?? {}
 		}
@@ -60,221 +43,51 @@
 	let args: Record<string, any> = {}
 </script>
 
-<Modal bind:this={jsonSetter}>
-	<div slot="title">Import JSON</div>
-	<div slot="content" class="h-full">
-		<Editor bind:code={jsonValue} lang={'json'} class="h-full" />
-	</div>
-	<div slot="submission">
-		<button
-			class="default-button px-4 py-2 font-semibold"
+{#if $flowStore}
+	<div class="flex space-y-8 flex-col items-center line">
+		<FlowSettings
+			bind:pathError
+			bind:initialPath
+			bind:scheduleArgs
+			bind:scheduleCron
+			bind:scheduleEnabled
+			bind:open
+		/>
+		<FlowInput />
+		{#each $flowStore?.value.modules as mod, i}
+			<ModuleStep bind:open bind:mod bind:args {i} mode={$mode} />
+			{#if i == 0 && $mode == 'pull'}
+				<div class="flex justify-center bg-white shadow p-2">
+					Starting from here, the flow for loop over items from step 1's result above &nbsp;
+					<Tooltip>
+						This flow being in 'Pull' mode, the rest of the flow will for loop over the list of
+						items returned by the trigger script right above. Retrieve the item value using
+						`flow_input._value`
+					</Tooltip>
+				</div>
+			{/if}
+		{/each}
+		<Button
+			disabled={pathIsEmpty($flowStore.path)}
+			color="blue"
 			on:click={() => {
-				Object.assign($flowStore, JSON.parse(jsonValue))
-				initFlow($flowStore)
-				open = -1
-				sendUserToast('OpenFlow imported from JSON')
-				jsonSetter.closeModal()
+				addModule()
+				open = $flowStore?.value.modules.length - 1
 			}}
 		>
-			Import
-		</button>
-	</div></Modal
->
-
-<Modal bind:this={jsonViewer}>
-	<div slot="title">See JSON</div>
-	<div slot="content" class="h-full">
-		<FlowViewer flow={flowToMode($flowStore, $mode)} tab="json" />
+			<Icon class="text-white mr-2" data={faPlus} />
+			Add step {pathIsEmpty($flowStore?.path) ? '(pick a name first!)' : ''}
+		</Button>
 	</div>
-</Modal>
-
-{#if $flowStore}
-	<div class="flow-root bg-gray-50 rounded-xl border  border-gray-200">
-		<ul class="relative -mt-10">
-			<span class="absolute top-0 left-1/2  h-full w-1 bg-gray-400" aria-hidden="true" />
-			<div class="relative">
-				<li class="flex flex-row flex-shrink max-w-full mx-auto mt-20">
-					<div
-						class="bg-white border border-gray xl-rounded shadow-lg w-full max-w-4xl mx-4 md:mx-auto p-4"
-					>
-						<div class="flex flex-row-reverse mr-4">
-							<Dropdown
-								dropdownItems={[
-									{
-										displayName: 'Import from a JSON OpenFlow',
-										icon: faFileImport,
-										action: () => {
-											jsonSetter.openModal()
-										}
-									},
-									{
-										displayName: 'Export to a JSON OpenFlow',
-										icon: faFileExport,
-										action: () => {
-											jsonViewer.openModal()
-										}
-									},
-									{
-										displayName: 'Publish to Hub',
-										icon: faGlobe,
-										action: () => {
-											const url = flowToHubUrl(flowToMode($flowStore, $mode))
-											window.open(url, '_blank')?.focus()
-										}
-									}
-								]}
-								relative={false}
-							/>
-						</div>
-						<div class="mb-8 p-4">
-							<Path
-								bind:error={pathError}
-								bind:path={$flowStore.path}
-								{initialPath}
-								namePlaceholder="my_flow"
-								kind="flow"
-							>
-								<div slot="ownerToolkit">
-									Flow permissions depend on their path. Select the group <span class="font-mono"
-										>all</span
-									>
-									to share your flow, and <span class="font-mono">user</span> to keep it private.
-									<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
-								</div>
-							</Path>
-
-							<label class="block mt-4">
-								<span class="text-gray-700">Summary <Required required={false} /></span>
-								<textarea
-									bind:value={$flowStore.summary}
-									class="
-					mt-1
-					block
-					w-full
-					rounded-md
-					border-gray-300
-					shadow-sm
-					focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
-					"
-									placeholder="A very short summary of the flow displayed when the flow is listed"
-									rows="1"
-								/>
-							</label>
-						</div>
-						<RadioButtonV2
-							options={[
-								[
-									{
-										title: 'UI or webhook triggered',
-										desc: 'Trigger this flow through the generated UI, a manual schedule or by calling the associated webhook'
-									},
-									'push'
-								],
-								[
-									{
-										title: 'Watching changes regularly',
-										desc: 'The first module of this flow is a trigger script whose purpose is to pull data from an external source and return all new items since last run. This flow is meant to be scheduled very regularly to reduce latency to react to new events. It will trigger the rest of the flow once per item. If no new items, the flow will be skipped.'
-									},
-									'pull'
-								]
-							]}
-							bind:value={$mode}
-						/>
-						{#if $mode == 'pull'}
-							<div class="p-4">
-								<CollapseLink text="set primary schedule" open={true}>
-									<Tooltip
-										>The primary schedule of a flow is simply a schedule that has the same name as a
-										flow. It can be set and enabled directly within the flow editor. "Watching for
-										new changes" flows are meant to be watching regularly for new items in an
-										external systems. The primary schedule purpose is there to set the periodicity
-										at which you want this watcher to operate.
-									</Tooltip> &nbsp;
-									<Toggle
-										bind:checked={scheduleEnabled}
-										options={{
-											left: { label: 'disabled', value: false },
-											right: { label: 'enabled', value: true }
-										}}
-									/>
-									<div class="p-2 mt-2 rounded" class:bg-gray-300={!scheduleEnabled}>
-										{#if !scheduleEnabled}
-											<span class="font-black">No next scheduled run when disabled</span>
-										{/if}
-										<CronInput bind:schedule={scheduleCron} />
-									</div>
-									<SchemaForm schema={$flowStore.schema} bind:args={scheduleArgs} />
-								</CollapseLink>
-							</div>
-						{/if}
-					</div>
-				</li>
-				<li class="flex flex-row flex-shrink max-w-full mx-auto mt-20">
-					<div class="bg-white border border-gray xl-rounded shadow-lg w-full mx-4 xl:mx-20">
-						<div
-							class="flex items-center justify-between flex-wra px-4 py-5 border-b border-gray-200 sm:px-6"
-						>
-							<h3 class="text-lg leading-6 font-medium text-gray-900">Flow Input</h3>
-							<CopyFirstStepSchema />
-						</div>
-						<div class="p-4">
-							<SchemaEditor
-								on:change={() => {
-									$flowStore = $flowStore
-								}}
-								schema={$flowStore.schema}
-							/>
-							<div class="my-4" />
-							<FlowPreview
-								mode={$mode}
-								flow={$flowStore}
-								i={$flowStore?.value.modules.length}
-								bind:args
-							/>
-						</div>
-					</div>
-				</li>
-				{#each $flowStore?.value.modules as mod, i}
-					<li class="relative mt-16">
-						<div class="relative flex justify-center">
-							<button
-								class="default-button h-10 w-10 shadow-blue-600/40  border-blue-600 shadow"
-								on:click={() => {
-									addModule(i)
-									open = i
-								}}
-							>
-								<Icon class="text-white mb-1" data={faPlus} />
-							</button>
-						</div>
-					</li>
-					<ModuleStep bind:open bind:mod bind:args {i} mode={$mode} />
-				{/each}
-				<li class="relative m-20 ">
-					<div class="relative flex justify-center">
-						<button
-							disabled={pathIsEmpty($flowStore.path)}
-							class="default-button h-10 w-10 shadow"
-							on:click={() => {
-								addModule()
-								open = $flowStore?.value.modules.length - 1
-							}}
-						>
-							<Icon class="text-white mb-1" data={faPlus} />
-							Add step {pathIsEmpty($flowStore?.path) ? '(pick a name first!)' : ''}
-						</button>
-					</div>
-				</li>
-			</div>
-		</ul>
-	</div>
-	<div class="py-10 bg-white" />
 {:else}
 	<h3>Loading flow</h3>
 {/if}
 
 <style>
-	.shadow:not([disabled]) {
-		@apply border-blue-600 shadow-blue-600/40;
+	.line {
+		background-image: linear-gradient(#e5e7eb, #e5e7eb);
+		background-size: 2px 100%;
+		background-repeat: no-repeat;
+		background-position: center center;
 	}
 </style>
diff --git a/frontend/src/lib/components/FlowPreview.svelte b/frontend/src/lib/components/FlowPreview.svelte
index 544968a0c2..316755fab3 100644
--- a/frontend/src/lib/components/FlowPreview.svelte
+++ b/frontend/src/lib/components/FlowPreview.svelte
@@ -97,7 +97,8 @@
 >
 	<h2 class="flex justify-center text-gray-600">
 		<div>
-			Preview<Icon class="ml-1" data={viewPreview ? faChevronUp : faChevronDown} scale={1} />
+			Preview
+			<Icon class="ml-1" data={viewPreview ? faChevronUp : faChevronDown} scale={1} />
 		</div>
 	</h2>
 </button>
diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
index cb3ce7c57d..049ac0ff68 100644
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -37,10 +37,10 @@
 
 	<div class="fixed top-0 w-screen h-screen {z}">
 		<div
-			class="fixed right-0 flex flex-col w-3/4 sm:w-2/3 lg:w-1/2 h-screen border border-gray-300 shadow-xl"
+			class="fixed right-0 top-0 flex flex-col w-3/4 sm:w-2/3 lg:w-1/2 h-screen border border-gray-300 shadow-xl"
 		>
 			{#if open}
-				<div class="flex flex-row justify-between p-2  bg-white border-b border-gray-200">
+				<div class="flex flex-row justify-between p-2 bg-white border-b border-gray-200">
 					<button
 						on:click={() => {
 							open = false
diff --git a/frontend/src/lib/components/ModuleStep.svelte b/frontend/src/lib/components/ModuleStep.svelte
index 95537a6f3e..ef993ef6a2 100644
--- a/frontend/src/lib/components/ModuleStep.svelte
+++ b/frontend/src/lib/components/ModuleStep.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
-	import { type FlowModule, RawScript } from '$lib/gen'
+	import { RawScript, type FlowModule } from '$lib/gen'
 	import { previewResults } from '$lib/stores'
 	import { buildExtraLib, objectToTsType, schemaToTsType } from '$lib/utils'
-	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+	import { faChevronDown, faChevronUp, faPlus } from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 	import Editor from './Editor.svelte'
 	import EditorBar from './EditorBar.svelte'
 	import FlowPreview from './FlowPreview.svelte'
+	import FlowBox from './flows/FlowBox.svelte'
 	import FlowInputs from './flows/FlowInputs.svelte'
 	import FlowModuleHeader from './flows/FlowModuleHeader.svelte'
 	import {
+		addModule,
 		createInlineScriptModule,
 		flowStore,
 		loadSchema,
@@ -42,62 +44,69 @@
 	)
 
 	function toResults(jobs: any) {
-		return jobs.map((x) => {
-			if (x.result) {
-				return x.result
-			} else if (x.length) {
-				return toResults(x)
+		return jobs.map((job) => {
+			if (job.result) {
+				return job.result
+			} else if (Array.isArray(job)) {
+				return toResults(job)
 			}
 		})
 	}
+
+	const isTrigger = mode === 'pull' && i === 0
 </script>
 
-<li class="flex flex-row flex-shrink max-w-full mx-auto mt-16">
-	<div
-		class="bg-white border border-gray xl-rounded shadow-lg w-full max-w-4xl mx-4 md:mx-auto"
-		id="module-{i}"
-	>
-		<div class="flex items-center justify-between flex-wra p-4 sm:px-6 z-10">
-			<FlowModuleHeader bind:open {mod} {i} {shouldPick}>
-				<div>
-					<h3 class="text-lg font-bold text-gray-900">Step {i + 1}</h3>
-					{#if i == 0 && mode == 'pull'}
-						<h3 class="font-bold">
-							Trigger Script <Tooltip
-								>When a flow is 'Pull', the first step is a trigger script. Trigger scripts are
-								scripts that must return a list which are the new items to be treated one by one by
-								the rest of the flow, usually the list of new items since last time the flow was
-								run. One can retrieve the item in the next step using `previous_result._value`. To
-								easily compute the diff, windmill provides some helpers under the form of
-								`getInternalState` and `setInternalState`.</Tooltip
-							>
-						</h3>{/if}
-					<p>
-						{#if 'path' in mod.value && mod.value.path}
-							{mod.value.path}
-						{/if}
-						{#if 'language' in mod.value && mod.value.language}
-							Inline {mod.value.language}
-						{/if}
-						{#if !('path' in mod.value) && !('language' in mod.value)}
-							Select a script
-						{/if}
-					</p>
-				</div>
-			</FlowModuleHeader>
-		</div>
-		<div class="border-b border-gray-200" />
+<button
+	class="rounded-full h-10 w-10 bg-white border-2 border-gray-400"
+	on:click={() => {
+		addModule(i)
+		open = i
+	}}
+>
+	<Icon class="text-gray-400 mb-1" data={faPlus} />
+</button>
+<FlowBox>
+	<div id="module-{i}">
+		<FlowModuleHeader bind:open {mod} {i} {shouldPick}>
+			<div>
+				<h3 class="text-lg font-bold text-gray-900">Step {i + 1}</h3>
+				{#if isTrigger}
+					<h3 class="font-bold">
+						Trigger Script
+						<Tooltip>
+							When a flow is 'Pull', the first step is a trigger script. Trigger scripts are scripts
+							that must return a list which are the new items to be treated one by one by the rest
+							of the flow, usually the list of new items since last time the flow was run. One can
+							retrieve the item in the next step using `previous_result._value`. To easily compute
+							the diff, windmill provides some helpers under the form of `getInternalState` and
+							`setInternalState`.
+						</Tooltip>
+					</h3>
+				{/if}
+				<p>
+					{#if 'path' in mod.value && mod.value.path}
+						{mod.value.path}
+					{/if}
+					{#if 'language' in mod.value && mod.value.language}
+						Inline {mod.value.language}
+					{/if}
+					{#if !('path' in mod.value) && !('language' in mod.value)}
+						Select a script
+					{/if}
+				</p>
+			</div>
+		</FlowModuleHeader>
 		{#if open == i}
 			<div class="p-6">
 				{#if shouldPick}
 					<FlowInputs
-						isTrigger={mode == 'pull' && i == 0}
+						{isTrigger}
 						on:pick={(e) => pickScript(e.detail.path, i)}
 						on:new={(e) => createInlineScriptModule(e.detail.language, i, mode)}
 					/>
 				{/if}
 				{#if mod.value.type === 'rawscript'}
-					<div class="p-1 overflow-hidden">
+					<div class="mb-2 overflow-hidden">
 						<EditorBar {editor} {websocketAlive} lang={mod.value.language ?? 'deno'} />
 					</div>
 					<div>
@@ -156,27 +165,16 @@
 		{/if}
 		{#if open == i}
 			<div>
-				<button class="w-full h-full" on:click={() => (open = -1)}
-					><Icon data={faChevronUp} scale={1.0} /></button
-				>
+				<button class="w-full h-full" on:click={() => (open = -1)}>
+					<Icon data={faChevronUp} scale={1.0} />
+				</button>
 			</div>
 		{:else}
 			<div>
-				<button class="w-full h-full" on:click={() => (open = i)}
-					><Icon data={faChevronDown} scale={1.0} /></button
-				>
+				<button class="w-full h-full" on:click={() => (open = i)}>
+					<Icon data={faChevronDown} scale={1.0} />
+				</button>
 			</div>
 		{/if}
 	</div>
-</li>
-{#if i == 0 && mode == 'pull'}
-	<li class="relative m-20 ">
-		<div class="relative flex justify-center bg-white shadow p-2">
-			Starting from here, the flow for loop over items from step 1's result above &nbsp;<Tooltip
-				>This flow being in 'Pull' mode, the rest of the flow will for loop over the list of items
-				returned by the trigger script right above. Retrieve the item value using
-				`flow_input._value`</Tooltip
-			>
-		</div>
-	</li>
-{/if}
+</FlowBox>
diff --git a/frontend/src/lib/components/SchemaEditor.svelte b/frontend/src/lib/components/SchemaEditor.svelte
index 77f64d0fc8..0dee369490 100644
--- a/frontend/src/lib/components/SchemaEditor.svelte
+++ b/frontend/src/lib/components/SchemaEditor.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
-	import SchemaModal, { DEFAULT_PROPERTY, schemaToModal } from './SchemaModal.svelte'
-	import type { ModalSchemaProperty } from './SchemaModal.svelte'
 	import type { Schema, SchemaProperty } from '$lib/common'
-	import Editor from './Editor.svelte'
-	import { emptySchema, sendUserToast, truncate } from '$lib/utils'
-	import Tooltip from './Tooltip.svelte'
-	import TableCustom from './TableCustom.svelte'
+	import { emptySchema, sendUserToast } from '$lib/utils'
+	import { faPen, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
+	import { Badge, Button } from 'flowbite-svelte'
 	import { createEventDispatcher } from 'svelte'
+	import Icon from 'svelte-awesome'
+	import Editor from './Editor.svelte'
+	import type { ModalSchemaProperty } from './SchemaModal.svelte'
+	import SchemaModal, { DEFAULT_PROPERTY, schemaToModal } from './SchemaModal.svelte'
+	import TableCustom from './TableCustom.svelte'
+	import Toggle from './Toggle.svelte'
+	import Tooltip from './Tooltip.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -101,6 +105,13 @@
 		try {
 			if (Object.keys(schema.properties).includes(argName)) {
 				delete schema.properties[argName]
+
+				const requiredIndex = schema.required.findIndex((arg) => arg === argName)
+
+				if (requiredIndex > -1) {
+					schema.required = schema.required.slice(requiredIndex, 1)
+				}
+
 				schema = schema
 				schemaString = JSON.stringify(schema, null, '\t')
 				dispatch('change', schema)
@@ -126,95 +137,89 @@
 </script>
 
 <div class="flex flex-col">
-	<div class="w-full">
-		<div class="flex flex-row text-base">
-			<button
-				class="text-xs sm:text-base py-1 px-6 block hover:text-blue-500 focus:outline-noneborder-gray-200  {viewJsonSchema
-					? 'text-gray-500 '
-					: 'text-gray-700 font-semibold  '}"
-				on:click={() => (viewJsonSchema ? switchTab() : null)}
-			>
-				arguments
-			</button><button
-				class="py-1 px-6 block hover:text-blue-500 focus:outline-none border-gray-200  {viewJsonSchema
-					? 'text-gray-700 font-semibold '
-					: 'text-gray-500'}"
-				on:click={() => (viewJsonSchema ? null : switchTab())}
-			>
-				advanced <Tooltip
-					>Arguments can be edited either using the wizard, or by editing their json-schema <a
-						href="https://docs.windmill.dev/docs/reference/script_arguments_reference">docs</a
-					></Tooltip
-				>
-			</button>
-			<button
-				class="default-button-secondary grow mb-1"
-				on:click={() => {
-					modalProperty = Object.assign({}, DEFAULT_PROPERTY)
-					schemaModal.openModal()
-				}}>Add argument</button
-			>
+	<div class="flex justify-between">
+		<Button
+			on:click={() => {
+				modalProperty = Object.assign({}, DEFAULT_PROPERTY)
+				schemaModal.openModal()
+			}}
+			color="blue"
+		>
+			<Icon data={faPlus} class="mr-1" />
+			Add argument
+		</Button>
+
+		<div class="flex items-center">
+			<Toggle
+				on:change={() => switchTab()}
+				options={{
+					left: { label: '', value: false },
+					right: { label: 'Json Schema Editor', value: true }
+				}}
+			/>
+			<div class="ml-2">
+				<Tooltip>
+					Arguments can be edited either using the wizard, or by editing their json-schema
+					<a href="https://docs.windmill.dev/docs/reference/script_arguments_reference">docs</a>
+				</Tooltip>
+			</div>
 		</div>
 	</div>
+
 	<!--json schema or table view-->
-	<div class="border-t py-1  h-full overflow-y-auto">
+	<div class="h-full overflow-y-auto">
 		{#if !viewJsonSchema}
 			<div class="h-full">
 				{#if schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
-					<TableCustom class="w-full min-h-full">
-						<tr slot="header-row" class="underline">
-							<th>name</th>
-							<th>type</th>
-							<th>description</th>
-							<th>default</th>
-							<th>required</th>
+					<TableCustom>
+						<tr slot="header-row">
+							<th>Name</th>
+							<th>Type</th>
+							<th>Description</th>
+							<th>Default</th>
+							<th>Required</th>
+							<th />
 						</tr>
 						<tbody slot="body">
 							{#each Object.entries(schema.properties) as [name, property] (name)}
 								<tr>
-									<td>{name}</td>
-									<td
-										>{property.type ?? 'any'}
-										{property.format ? `(format: ${property.format})` : ''}
-										{property.contentEncoding ? `(encoding: ${property.contentEncoding})` : ''}
+									<td class="font-bold">{name}</td>
+									<td>
+										{#if !property.type}
+											<Badge color="red">ANY</Badge>
+										{:else}
+											<Badge color="blue">{property.type.toLocaleUpperCase()}</Badge>
+										{/if}
 									</td>
-									<td>{truncate(property.description, 20)}</td>
-									<td>{truncate(JSON.stringify(property.default) ?? '', 20)}</td>
-									<td>{schema.required.includes(name) ? 'required' : 'optional'}</td>
-									<td class="">
-										<button class="mr-2" on:click={() => handleDeleteArgument(name)}
-											><svg
-												class="w-4 h-4"
-												fill="none"
-												stroke="currentColor"
-												viewBox="0 0 24 14"
-												xmlns="http://www.w3.org/2000/svg"
-											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													stroke-width="2"
-													d="M6 18L18 6M6 6l12 12"
-												/>
-											</svg></button
+									<td>{property.description}</td>
+									<td>{JSON.stringify(property.default) ?? ''}</td>
+									<td>{schema.required.includes(name) ? 'Required' : 'Optional'}</td>
+									<td class="justify-end flex">
+										<Button
+											color="red"
+											outline
+											class="mr-2"
+											size="xs"
+											on:click={() => handleDeleteArgument(name)}
 										>
-										<button
-											class="default-button-secondary text-xs inline-flex"
-											on:click={() => {
-												startEditArgument(name)
-											}}>edit</button
-										></td
-									>
+											<Icon data={faTrash} class="mr-2" scale={0.8} />
+											Delete
+										</Button>
+										<Button color="alternative" size="xs" on:click={() => startEditArgument(name)}>
+											<Icon data={faPen} class="mr-2" scale={0.8} />
+											Edit
+										</Button>
+									</td>
 								</tr>
 							{/each}
 						</tbody>
 					</TableCustom>
 				{:else}
-					<div class="text-gray-700 text-xs italic">This script has no argument</div>
+					<div class="text-gray-700 text-xs italic mt-2">This schema has no arguments.</div>
 				{/if}
 			</div>
 		{:else}
-			<div>
+			<div class="border rounded mt-4 p-2">
 				<Editor
 					on:change={() => {
 						try {
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 4b0aea90f7..0ec55dcbe9 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
 	import { ScriptService, type Script } from '$lib/gen'
 
+	import { goto } from '$app/navigation'
+	import { page } from '$app/stores'
+	import { inferArgs } from '$lib/infer'
+	import { DENO_INIT_CODE, DENO_INIT_CODE_TRIGGER, initialCode } from '$lib/script_helpers'
+	import { workspaceStore } from '$lib/stores'
 	import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '$lib/utils'
 	import { onDestroy } from 'svelte'
-	import ScriptEditor from './ScriptEditor.svelte'
-	import { page } from '$app/stores'
-	import { goto } from '$app/navigation'
-	import Path from './Path.svelte'
 	import SvelteMarkdown from 'svelte-markdown'
-	import { workspaceStore } from '$lib/stores'
-	import ScriptSchema from './ScriptSchema.svelte'
-	import { inferArgs } from '$lib/infer'
-	import Required from './Required.svelte'
-	import { DENO_INIT_CODE, DENO_INIT_CODE_TRIGGER, initialCode } from '$lib/script_helpers'
+	import Path from './Path.svelte'
 	import RadioButtonV3 from './RadioButtonV3.svelte'
+	import Required from './Required.svelte'
+	import ScriptEditor from './ScriptEditor.svelte'
+	import ScriptSchema from './ScriptSchema.svelte'
 
 	let editor: ScriptEditor
 	let scriptSchema: ScriptSchema
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 1c62dd490a..068ac2b4de 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { JobService, Job, CompletedJob } from '$lib/gen'
-	import { emptySchema, displayDate } from '$lib/utils'
 	import type { Schema } from '$lib/common'
-	import { fade } from 'svelte/transition'
-	import Icon from 'svelte-awesome'
+	import { CompletedJob, Job, JobService } from '$lib/gen'
+	import { userStore, workspaceStore } from '$lib/stores'
+	import { displayDate, emptySchema } from '$lib/utils'
 	import {
 		faCheck,
 		faChevronDown,
@@ -12,26 +11,25 @@
 		faSpinner,
 		faTimes
 	} from '@fortawesome/free-solid-svg-icons'
-	import Editor from './Editor.svelte'
-	import Tooltip from './Tooltip.svelte'
 	import { onDestroy, onMount } from 'svelte'
-	import { userStore, workspaceStore } from '$lib/stores'
-	import TableCustom from './TableCustom.svelte'
+	import Icon from 'svelte-awesome'
 	import { check } from 'svelte-awesome/icons'
+	import { fade } from 'svelte/transition'
+	import Editor from './Editor.svelte'
 	import Modal from './Modal.svelte'
+	import TableCustom from './TableCustom.svelte'
+	import Tooltip from './Tooltip.svelte'
 
 	import { inferArgs } from '$lib/infer'
 
 	// @ts-ignore
-	import { VSplitPane } from 'svelte-split-pane'
-	import SchemaForm from './SchemaForm.svelte'
-	import DisplayResult from './DisplayResult.svelte'
 	import type { Preview } from '$lib/gen/models/Preview'
-	import EditorBar from './EditorBar.svelte'
 	import { Highlight } from 'svelte-highlight'
-	import typescript from 'svelte-highlight/languages/typescript'
-	import python from 'svelte-highlight/languages/python'
-	import json from 'svelte-highlight/languages/json'
+	import { json, python, typescript } from 'svelte-highlight/languages'
+	import { VSplitPane } from 'svelte-split-pane'
+	import DisplayResult from './DisplayResult.svelte'
+	import EditorBar from './EditorBar.svelte'
+	import SchemaForm from './SchemaForm.svelte'
 
 	// Exported
 	export let schema: Schema = emptySchema()
@@ -423,7 +421,7 @@
 					{:else}No local save{/if}
 				</div>
 			{:else if previewTab === 'history'}
-				<TableCustom paginated={false}>
+				<TableCustom>
 					<tr slot="header-row">
 						<th class="text-xs">id</th>
 						<th class="text-xs">created at</th>
diff --git a/frontend/src/lib/components/TableCustom.svelte b/frontend/src/lib/components/TableCustom.svelte
index 3ef21fb249..8d31b3f796 100644
--- a/frontend/src/lib/components/TableCustom.svelte
+++ b/frontend/src/lib/components/TableCustom.svelte
@@ -13,7 +13,7 @@
 - the second slot should be a <tbody>, containing th elements
 -->
 <div class="flex flex-col {$$props.class} min-w-full">
-	<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+	<div class="inline-block min-w-full py-2 align-middle">
 		<table id="table-custom" class="min-w-full divide-y divide-gray-300 table-auto">
 			<thead>
 				<slot name="header-row" />
@@ -25,19 +25,16 @@
 		<div class="flex flex-row-reverse text-gray-500 mb-6">
 			<button
 				class="ml-2 drop-shadow-md {showNext ? 'visible' : 'invisible'}"
-				on:click={() => {
-					dispatch('next')
-				}}>Next</button
+				on:click={() => dispatch('next')}
 			>
+				Next
+			</button>
 			<button
 				class="mx-2 drop-shadow-md {currentPage === 1 ? 'hidden' : ''}"
-				on:click={() => {
-					dispatch('previous')
-				}}>Previous</button
+				on:click={() => dispatch('previous')}
 			>
+				Previous
+			</button>
 		</div>
 	{/if}
 </div>
-
-<style>
-</style>
diff --git a/frontend/src/lib/components/Tooltip.svelte b/frontend/src/lib/components/Tooltip.svelte
index d9e30866aa..220bbc5feb 100644
--- a/frontend/src/lib/components/Tooltip.svelte
+++ b/frontend/src/lib/components/Tooltip.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Icon from 'svelte-awesome'
 	import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+	import Icon from 'svelte-awesome'
 	import { createPopperActions } from 'svelte-popperjs'
 	import { fade } from 'svelte/transition'
 	const [popperRef, popperContent] = createPopperActions({
@@ -50,6 +50,7 @@
 		use:popperContent={extraOpts}
 		on:mouseenter={open}
 		on:mouseleave={close}
+		class="w-96 text-left"
 	>
 		<slot />
 		<div id="arrow" data-popper-arrow />
diff --git a/frontend/src/lib/components/flows/CopyFirstStepSchema.svelte b/frontend/src/lib/components/flows/CopyFirstStepSchema.svelte
index 7588c1186f..745e1c4a66 100644
--- a/frontend/src/lib/components/flows/CopyFirstStepSchema.svelte
+++ b/frontend/src/lib/components/flows/CopyFirstStepSchema.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
+	import { Button } from 'flowbite-svelte'
 	import { copyFirstStepSchema, isCopyFirstStepSchemaDisabled } from './flowStore'
 </script>
 
-<button
-	class="default-secondary-button-v2"
+<Button
+	color="alternative"
+	size="sm"
 	disabled={$isCopyFirstStepSchemaDisabled}
 	on:click={copyFirstStepSchema}
 >
-	Copy from step 1's schema
-</button>
+	Copy from first step schema
+</Button>
diff --git a/frontend/src/lib/components/flows/FlowBox.svelte b/frontend/src/lib/components/flows/FlowBox.svelte
new file mode 100644
index 0000000000..67194688af
--- /dev/null
+++ b/frontend/src/lib/components/flows/FlowBox.svelte
@@ -0,0 +1,3 @@
+<div class="bg-white border border-gray-300 rounded-lg w-full shadow-md">
+	<slot />
+</div>
diff --git a/frontend/src/lib/components/flows/FlowBoxHeader.svelte b/frontend/src/lib/components/flows/FlowBoxHeader.svelte
new file mode 100644
index 0000000000..c88536a043
--- /dev/null
+++ b/frontend/src/lib/components/flows/FlowBoxHeader.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let title: string | undefined = undefined
+</script>
+
+<div class="flex items-center justify-between flex-wra px-6 py-4 border-b border-gray-300">
+	{#if title}
+		<h3 class="text-lg leading-6 font-bold text-gray-900">{title}</h3>
+	{/if}
+	<slot />
+</div>
diff --git a/frontend/src/lib/components/flows/FlowInput.svelte b/frontend/src/lib/components/flows/FlowInput.svelte
new file mode 100644
index 0000000000..71edd2f66b
--- /dev/null
+++ b/frontend/src/lib/components/flows/FlowInput.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import SchemaEditor from '../SchemaEditor.svelte'
+	import { flowStore } from './../flows/flowStore'
+	import CopyFirstStepSchema from './CopyFirstStepSchema.svelte'
+	import FlowBox from './FlowBox.svelte'
+	import FlowBoxHeader from './FlowBoxHeader.svelte'
+</script>
+
+<FlowBox>
+	<FlowBoxHeader title="Flow Inputs">
+		<CopyFirstStepSchema />
+	</FlowBoxHeader>
+	<div class="p-6 ">
+		<SchemaEditor
+			on:change={() => {
+				$flowStore = $flowStore
+			}}
+			schema={$flowStore.schema}
+		/>
+	</div>
+</FlowBox>
diff --git a/frontend/src/lib/components/flows/FlowModuleHeader.svelte b/frontend/src/lib/components/flows/FlowModuleHeader.svelte
index 940d87290c..104241ebab 100644
--- a/frontend/src/lib/components/flows/FlowModuleHeader.svelte
+++ b/frontend/src/lib/components/flows/FlowModuleHeader.svelte
@@ -2,11 +2,13 @@
 	import type { FlowModule } from '$lib/gen'
 	import { getScriptByPath } from '$lib/utils'
 	import { faCode, faCodeBranch, faSave, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+	import { Button } from 'flowbite-svelte'
 	import Icon from 'svelte-awesome'
 	import { Highlight } from 'svelte-highlight'
-	import typescript from 'svelte-highlight/languages/typescript'
 	import python from 'svelte-highlight/languages/python'
+	import typescript from 'svelte-highlight/languages/typescript'
 	import Modal from '../Modal.svelte'
+	import FlowBoxHeader from './FlowBoxHeader.svelte'
 	import { createScriptFromInlineScript, fork, removeModule } from './flowStore'
 	import { scrollIntoView } from './utils'
 
@@ -36,54 +38,54 @@
 	}
 </script>
 
-<div class="flex flex-row w-full space-x-2">
-	<slot />
-	<a href="#module-{i}" class="grow" on:click={() => (open = i)} on:click|preventDefault={scrollTo}
-		><div class="w-full" /></a
+<FlowBoxHeader>
+	<a
+		href="#module-{i}"
+		class="grow text-inherit"
+		on:click={() => (open = i)}
+		on:click|preventDefault={scrollTo}
 	>
+		<slot />
+	</a>
 
 	<div class="flex flex-row space-x-2">
 		{#if mod.value.type === 'script' && !shouldPick}
-			<button
-				type="button"
+			<Button
 				on:click={() => {
 					open = i
 					fork(i)
 				}}
-				class="default-secondary-button-v2 text-xs"
+				size="sm"
+				color="alternative"
 			>
-				<Icon data={faCodeBranch} class={`w-4 mr-2 h-4`} />
+				<Icon data={faCodeBranch} class="mr-2" />
 				Fork
-			</button>
-			<button type="button" on:click={viewCode} class="default-secondary-button-v2 text-xs">
-				<Icon data={faCode} class="w-4 mr-2 h-4" />
+			</Button>
+			<Button size="sm" color="alternative" on:click={viewCode}>
+				<Icon data={faCode} class="mr-2" />
 				View code
-			</button>
+			</Button>
 		{/if}
 
 		{#if mod.value.type === 'rawscript' && !shouldPick}
-			<button
-				type="button"
-				on:click={() => createScriptFromInlineScript(i)}
-				class="default-secondary-button-v2 text-sm"
-			>
-				<Icon data={faSave} class="w-4 mr-4" />
+			<Button size="sm" color="alternative" on:click={() => createScriptFromInlineScript(i)}>
+				<Icon data={faSave} class="mr-2" />
 				Save to workspace
-			</button>
+			</Button>
 		{/if}
-		<button
-			type="button"
+		<Button
+			size="sm"
+			color="alternative"
 			on:click={() => {
 				open = -1
 				removeModule(i)
 			}}
-			class="default-secondary-button-v2 text-xs"
 		>
-			<Icon data={faTrashAlt} class="w-4 mr-2 h-4" />
+			<Icon data={faTrashAlt} class="mr-2" />
 			Remove step
-		</button>
+		</Button>
 	</div>
-</div>
+</FlowBoxHeader>
 
 <Modal bind:this={modalViewer}>
 	<div slot="title">Script {'path' in mod?.value ? mod?.value.path : ''}</div>
diff --git a/frontend/src/lib/components/flows/FlowSettings.svelte b/frontend/src/lib/components/flows/FlowSettings.svelte
new file mode 100644
index 0000000000..d413ba765b
--- /dev/null
+++ b/frontend/src/lib/components/flows/FlowSettings.svelte
@@ -0,0 +1,189 @@
+<script lang="ts">
+	import { sendUserToast } from '$lib/utils'
+	import { faFileExport, faFileImport, faGlobe } from '@fortawesome/free-solid-svg-icons'
+	import { Dropdown, DropdownItem } from 'flowbite-svelte'
+	import Icon from 'svelte-awesome'
+	import Editor from '../Editor.svelte'
+	import FlowPreview from '../FlowPreview.svelte'
+	import FlowViewer from '../FlowViewer.svelte'
+	import Modal from '../Modal.svelte'
+	import CollapseLink from './../CollapseLink.svelte'
+	import CronInput from './../CronInput.svelte'
+	import FlowBox from './../flows/FlowBox.svelte'
+	import { flowStore, initFlow, mode } from './../flows/flowStore'
+	import { flowToMode } from './../flows/utils'
+	import Path from './../Path.svelte'
+	import RadioButtonV2 from './../RadioButtonV2.svelte'
+	import Required from './../Required.svelte'
+	import SchemaForm from './../SchemaForm.svelte'
+	import Toggle from './../Toggle.svelte'
+	import Tooltip from './../Tooltip.svelte'
+	import FlowBoxHeader from './FlowBoxHeader.svelte'
+
+	export let pathError = ''
+	export let initialPath: string = ''
+
+	export let scheduleArgs: Record<string, any> = {}
+	export let scheduleEnabled = false
+	export let scheduleCron: string = '0 */5 * * *'
+	export let open: number
+
+	let jsonSetter: Modal
+	let jsonViewer: Modal
+
+	let jsonValue: string = ''
+</script>
+
+<Modal bind:this={jsonSetter}>
+	<div slot="title">Import JSON</div>
+	<div slot="content" class="h-full">
+		<Editor bind:code={jsonValue} lang={'json'} class="h-full" />
+	</div>
+	<div slot="submission">
+		<button
+			class="default-button px-4 py-2 font-semibold"
+			on:click={() => {
+				Object.assign($flowStore, JSON.parse(jsonValue))
+				initFlow($flowStore)
+				open = -1
+				sendUserToast('OpenFlow imported from JSON')
+				jsonSetter.closeModal()
+			}}
+		>
+			Import
+		</button>
+	</div>
+</Modal>
+
+<Modal bind:this={jsonViewer}>
+	<div slot="title">See JSON</div>
+	<div slot="content" class="h-full">
+		<FlowViewer flow={flowToMode($flowStore, $mode)} tab="json" />
+	</div>
+</Modal>
+
+<FlowBox>
+	<FlowBoxHeader title="Flow Settings">
+		<div class="flex flex-row-reverse">
+			<Dropdown class="w-fit" placement="bottom-end">
+				<button slot="trigger" class="text-gray-900 bg-white dark:text-white dark:bg-gray-800">
+					...
+				</button>
+				<DropdownItem
+					on:click={() => {
+						jsonSetter.openModal()
+					}}
+				>
+					<Icon data={faFileImport} scale={0.6} class="inline mr-2" />
+					Import from a JSON OpenFlow
+				</DropdownItem>
+				<DropdownItem
+					on:click={() => {
+						jsonViewer.openModal()
+					}}
+				>
+					<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
+					Export to a JSON OpenFlow
+				</DropdownItem>
+				<DropdownItem
+					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(flowToMode(openFlow, $mode))))
+						window.open(url, '_blank')?.focus()
+					}}
+				>
+					<Icon data={faGlobe} scale={0.6} class="inline mr-2" />
+					Publish to Hub
+				</DropdownItem>
+			</Dropdown>
+		</div>
+	</FlowBoxHeader>
+
+	<div class="p-6">
+		<Path
+			bind:error={pathError}
+			bind:path={$flowStore.path}
+			{initialPath}
+			namePlaceholder="my_flow"
+			kind="flow"
+		>
+			<div slot="ownerToolkit">
+				Flow permissions depend on their path. Select the group <span class="font-mono">all</span>
+				to share your flow, and <span class="font-mono">user</span> to keep it private.
+				<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
+			</div>
+		</Path>
+
+		<label class="block mt-4">
+			<span class="text-gray-700">Summary <Required required={false} /></span>
+			<textarea
+				bind:value={$flowStore.summary}
+				class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+				placeholder="A very short summary of the flow displayed when the flow is listed"
+				rows="1"
+			/>
+		</label>
+	</div>
+
+	<RadioButtonV2
+		options={[
+			[
+				{
+					title: 'UI or webhook triggered',
+					desc: 'Trigger this flow through the generated UI, a manual schedule or by calling the associated webhook'
+				},
+				'push'
+			],
+			[
+				{
+					title: 'Watching changes regularly',
+					desc: 'The first module of this flow is a trigger script whose purpose is to pull data from an external source and return all new items since last run. This flow is meant to be scheduled very regularly to reduce latency to react to new events. It will trigger the rest of the flow once per item. If no new items, the flow will be skipped.'
+				},
+				'pull'
+			]
+		]}
+		bind:value={$mode}
+	/>
+	{#if $mode == 'pull'}
+		<div class="p-4">
+			<CollapseLink text="set primary schedule" open={true}>
+				<Tooltip>
+					The primary schedule of a flow is simply a schedule that has the same name as a flow. It
+					can be set and enabled directly within the flow editor. "Watching for new changes" flows
+					are meant to be watching regularly for new items in an external systems. The primary
+					schedule purpose is there to set the periodicity at which you want this watcher to
+					operate.
+				</Tooltip>
+				<Toggle
+					bind:checked={scheduleEnabled}
+					options={{
+						left: { label: 'disabled', value: false },
+						right: { label: 'enabled', value: true }
+					}}
+				/>
+				<div class="p-2 mt-2 rounded" class:bg-gray-300={!scheduleEnabled}>
+					{#if !scheduleEnabled}
+						<span class="font-black">No next scheduled run when disabled</span>
+					{/if}
+					<CronInput bind:schedule={scheduleCron} />
+				</div>
+				<SchemaForm schema={$flowStore.schema} bind:args={scheduleArgs} />
+			</CollapseLink>
+		</div>
+	{/if}
+
+	<div class="p-6">
+		<FlowPreview
+			mode={$mode}
+			flow={$flowStore}
+			i={$flowStore?.value.modules.length}
+			bind:args={scheduleArgs}
+		/>
+	</div>
+</FlowBox>
diff --git a/frontend/src/lib/components/flows/flowStore.ts b/frontend/src/lib/components/flows/flowStore.ts
index bf77803078..1faa6b0b43 100644
--- a/frontend/src/lib/components/flows/flowStore.ts
+++ b/frontend/src/lib/components/flows/flowStore.ts
@@ -1,9 +1,15 @@
 import type { Schema } from '$lib/common'
-import { type InputTransform, RawScript, ScriptService, type Flow, type FlowModule } from '$lib/gen'
+import { RawScript, ScriptService, type Flow, type FlowModule } from '$lib/gen'
 import { initialCode } from '$lib/script_helpers'
 import { userStore, workspaceStore } from '$lib/stores'
+import { emptySchema } from '$lib/utils'
 import { derived, get, writable } from 'svelte/store'
-import { createInlineScriptModuleFromPath, getFirstStepSchema, loadSchemaFromModule, scrollIntoView } from './utils'
+import {
+	createInlineScriptModuleFromPath,
+	getFirstStepSchema,
+	loadSchemaFromModule,
+	scrollIntoView
+} from './utils'
 
 export type FlowMode = 'push' | 'pull'
 
@@ -17,7 +23,8 @@ export function initFlow(flow: Flow) {
 	flow = flattenForloopFlows(flow)
 	flow.value.modules.forEach((mod) => {
 		Object.values(mod.input_transform).forEach((inp) => {
-			if (inp.type == 'javascript') {				// for now we use the value for dynamic expression when done in the static editor so we have to resort to this
+			if (inp.type == 'javascript') {
+				// for now we use the value for dynamic expression when done in the static editor so we have to resort to this
 
 				//@ts-ignore
 				inp.value = codeToStaticTemplate(inp.expr)
@@ -77,7 +84,6 @@ export function addModule(i?: number) {
 		input_transform: {}
 	}
 
-
 	flowStore.update((flow: Flow) => {
 		const insertAt = i ?? flow.value.modules.length
 
@@ -87,6 +93,19 @@ export function addModule(i?: number) {
 
 		return flow
 	})
+
+	schemasStore.update((schemas: Schema[]) => {
+		if (typeof i !== 'undefined') {
+			const previousSchema = schemas[i]
+			const hadSchema = Boolean(previousSchema)
+			if (hadSchema) {
+				schemas[i] = emptySchema()
+				schemas[i + 1] = previousSchema
+			}
+		}
+
+		return schemas
+	})
 }
 
 export async function pickScript(path: string, step: number) {
@@ -101,13 +120,17 @@ export async function pickScript(path: string, step: number) {
 	await loadSchema(step)
 }
 
-export async function createInlineScriptModule(language: RawScript.language, step: number, mode: FlowMode) {
-	const code = initialCode(language, (mode === 'pull' && step == 0))
+export async function createInlineScriptModule(
+	language: RawScript.language,
+	step: number,
+	mode: FlowMode
+) {
+	const code = initialCode(language, mode === 'pull' && step == 0)
 	flowStore.update((flow: Flow) => {
 		flow.value.modules[step].value = {
 			type: 'rawscript',
 			content: code,
-			language,
+			language
 		}
 
 		return flow
@@ -152,7 +175,6 @@ export async function createScriptFromInlineScript(step: number) {
 	const schemas = get(schemasStore)
 	const user = get(userStore)
 
-
 	const flowModuleValue = flow.value.modules[step].value
 
 	if (flowModuleValue.type != 'rawscript') {
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 729f9e689b..52b1c10c18 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -1,5 +1,8 @@
 const config = {
-	content: ['./src/**/*.{html,js,svelte,ts}'],
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		"./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
+	],
 
 	theme: {
 		extend: {
@@ -26,7 +29,12 @@ const config = {
 		}
 	},
 
-	plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')]
+	plugins: [
+		require('@tailwindcss/forms'),
+		require('@tailwindcss/typography'),
+		require('flowbite/plugin')
+	],
+	darkMode: 'class',
 }
 
 module.exports = config