feat: import and export flow from JSON

frontend/src/lib/components/FlowBuilder.svelte

@@ -4,7 +4,9 @@
 	import { FlowService, ScriptService, type Flow } from '$lib/gen'
 	import { clearPreviewResults, hubScripts, workspaceStore } from '$lib/stores'
 	import { sendUserToast, setQueryWithoutLoad } from '$lib/utils'
+	import { faFileExport, faFileImport } from '@fortawesome/free-solid-svg-icons'
 	import { onMount } from 'svelte'
+	import Icon from 'svelte-awesome'
 	import FlowEditor from './FlowEditor.svelte'
 	import { flowStore, type FlowMode } from './flows/flowStore'
 	import { flowToMode } from './flows/utils'

frontend/src/lib/components/FlowEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { FlowModuleValue } from '$lib/gen'
 
-	import { faPlus } from '@fortawesome/free-solid-svg-icons'
+	import { faFileExport, faFileImport, faPlus } from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 	import FlowPreview from './FlowPreview.svelte'
 	import CopyFirstStepSchema from './flows/CopyFirstStepSchema.svelte'
@@ -11,11 +11,20 @@
 	import RadioButtonV2 from './RadioButtonV2.svelte'
 	import SchemaEditor from './SchemaEditor.svelte'
 	import Required from './Required.svelte'
-	import { pathIsEmpty } from '$lib/utils'
+	import { 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'
 
 	export let pathError = ''
 	export let initialPath: string = ''
 
+	let jsonSetter: Modal
+	let jsonViewer: Modal
+
+	let jsonValue: string = ''
+
 	let open = 0
 	let args: Record<string, any> = {}
 	export let mode: FlowMode =
@@ -23,6 +32,32 @@
 	$: numberOfSteps = $flowStore?.value.modules.length - 1
 </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={() => {
+				$flowStore.value = JSON.parse(jsonValue)
+				sendUserToast('Flow 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={$flowStore} tab="json" />
+	</div>
+</Modal>
+
 <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" />
@@ -31,6 +66,27 @@
 				<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 JSON',
+									icon: faFileImport,
+									action: () => {
+										jsonSetter.openModal()
+									}
+								},
+								{
+									displayName: 'Export to JSON',
+									icon: faFileExport,
+									action: () => {
+										jsonViewer.openModal()
+									}
+								}
+							]}
+							relative={false}
+						/>
+					</div>
 					<div class="mb-8 p-4">
 						<Path
 							bind:error={pathError}

frontend/src/lib/components/Modal.svelte

@@ -7,11 +7,14 @@
 	const dispatch = createEventDispatcher()
 
 	export function closeModal(): void {
+		document.body.style.overflow = 'auto'
+
 		open = false
 		dispatch('close')
 	}
 
 	export function openModal(): void {
+		document.body.style.overflow = 'hidden'
 		open = true
 		dispatch('open')
 	}
@@ -29,9 +32,9 @@
 
 <svelte:window on:keyup={handleKeyUp} />
 
-<div class="blurred-background z-0  {open ? '' : 'hidden'}" />
+<div class="blurred-background  {open ? '' : 'hidden'}" />
 
-<div class="fixed top-0 w-screen h-screen  {open ? '' : 'hidden'} {z}">
+<div class="fixed top-0 w-screen h-screen {open ? '' : 'hidden'} {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"
 	>
@@ -100,6 +103,6 @@
 		@apply bg-gray-400 opacity-75;
 		@apply w-screen;
 		@apply h-screen;
-		z-index: 1;
+		z-index: 10;
 	}
 </style>

frontend/src/lib/components/Path.svelte

@@ -135,7 +135,7 @@
 <div>
 	<div class="flex flex-col sm:grid sm:grid-cols-4 sm:gap-4 pb-0 mb-1">
 		<label class="block">
-			<span class="text-gray-700 text-sm">
+			<span class="text-gray-700 text-sm whitespace-nowrap">
 				Owner Kind <Tooltip>
 					<slot name="ownerToolkit" />
 				</Tooltip>