initialize flow store correctly

frontend/src/lib/components/FlowBuilder.svelte

@@ -12,6 +12,7 @@
 	} from '$lib/utils'
 	import { faGlobe } from '@fortawesome/free-solid-svg-icons'
 	import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte'
+	import Schedules from 'src/routes/schedules.svelte'
 	import { onDestroy, onMount, setContext } from 'svelte'
 	import Icon from 'svelte-awesome'
 	import { writable } from 'svelte/store'
@@ -131,8 +132,8 @@
 	})
 
 	const selectedIdStore = writable<string>('settings')
-	const scheduleStore = writable<Schedule>(undefined)
-	const previewArgsStore = writable<Record<string, any>>(undefined)
+	const scheduleStore = writable<Schedule>({ args: {}, cron: '', enabled: false })
+	const previewArgsStore = writable<Record<string, any>>({})
 
 	function select(selectedId: string) {
 		selectedIdStore.set(selectedId)
@@ -155,8 +156,7 @@
 				scheduleStore.set({
 					cron: '0 */5 * * *',
 					args: {},
-					enabled: false,
-					previewArgs: {}
+					enabled: false
 				})
 			})
 	}

frontend/src/lib/components/flows/content/FlowLoop.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import FlowCard from '../common/FlowCard.svelte'
-	import { flowStateStore } from '../flowState'
 	import type { FlowEditorContext } from '../types'
 	import Toggle from '$lib/components/Toggle.svelte'
 

frontend/src/lib/components/flows/flowState.ts

@@ -1,7 +1,7 @@
 import type { Schema } from '$lib/common'
 import type { Flow, FlowModule } from '$lib/gen'
-import { derived, writable } from 'svelte/store'
-import { emptyFlowModuleSchema, isEmptyFlowModule, loadFlowModuleSchema } from './flowStateUtils'
+import { writable } from 'svelte/store'
+import { emptyFlowModuleState, isEmptyFlowModule, loadFlowModuleSchema } from './flowStateUtils'
 
 export type FlowModuleState = {
 	schema: Schema
@@ -14,14 +14,14 @@ export type FlowState = {
 	failureModule: FlowModuleState
 }
 
-export const flowStateStore = writable<FlowState>(undefined)
+export const flowStateStore = writable<FlowState>({ modules: [], failureModule: emptyFlowModuleState() })
 
 export async function initFlowState(flow: Flow) {
 	const modules = await mapFlowModules(flow.value.modules)
 
 	const failureModule = flow.value.failure_module
 		? await mapFlowModule(flow.value.failure_module)
-		: emptyFlowModuleSchema()
+		: emptyFlowModuleState()
 
 	flowStateStore.set({
 		modules,
@@ -46,7 +46,7 @@ async function mapFlowModule(flowModule: FlowModule) {
 	}
 
 	if (isEmptyFlowModule(flowModule)) {
-		return emptyFlowModuleSchema()
+		return emptyFlowModuleState()
 	}
 
 	return loadFlowModuleSchema(flowModule)

frontend/src/lib/components/flows/flowStateUtils.ts

@@ -15,7 +15,7 @@ import { flowStateStore, type FlowModuleState, type FlowState } from './flowStat
 import { flowStore } from './flowStore'
 import { loadSchemaFromModule } from './utils'
 
-export function emptyFlowModuleSchema(): FlowModuleState {
+export function emptyFlowModuleState(): FlowModuleState {
 	return {
 		schema: emptySchema()
 	}
@@ -75,7 +75,7 @@ export async function createLoop(): Promise<[FlowModule, FlowModuleState]> {
 	const { schema } = await loadFlowModuleSchema(loopFlowModule)
 	return [loopFlowModule, {
 		schema,
-		childFlowModules: [emptyFlowModuleSchema()],
+		childFlowModules: [emptyFlowModuleState()],
 		previewResult: NEVER_TESTED_THIS_FAR
 	}]
 }

frontend/src/lib/components/flows/flowStore.ts

@@ -4,7 +4,7 @@ import { flowStateStore, initFlowState } from './flowState'
 
 export type FlowMode = 'push' | 'pull'
 
-export const flowStore = writable<Flow>(undefined)
+export const flowStore = writable<Flow>({ summary: "", value: { modules: [] }, path: "", edited_at: "", edited_by: "", archived: false, extra_perms: {} })
 
 export function initFlow(flow: Flow) {
 	for (const mod of flow.value.modules) {

frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte

@@ -54,6 +54,8 @@
 </Drawer>
 <Drawer bind:this={jsonViewerDrawer} size="800px">
 	<DrawerContent title="See JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
-		<FlowViewer flow={cleanInputs($flowStore)} tab="json" />
+		{#if $flowStore}
+			<FlowViewer flow={cleanInputs($flowStore)} tab="json" />
+		{/if}
 	</DrawerContent>
 </Drawer>

frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte

@@ -4,7 +4,7 @@
 	import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte'
 	import Icon from 'svelte-awesome'
 	import { faPen, faPlus, faSliders } from '@fortawesome/free-solid-svg-icons'
-	import { emptyFlowModuleSchema } from '$lib/components/flows/flowStateUtils'
+	import { emptyFlowModuleState } from '$lib/components/flows/flowStateUtils'
 	import { classNames, emptyModule } from '$lib/utils'
 	import type { FlowModuleState } from '../flowState'
 	import type { FlowModule } from '$lib/gen'
@@ -16,7 +16,7 @@
 	const { select, selectedId } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	function insertAtIndex(index: number): void {
-		moduleStates.splice(index, 0, emptyFlowModuleSchema())
+		moduleStates.splice(index, 0, emptyFlowModuleState())
 		modules.splice(index, 0, emptyModule())
 		moduleStates = moduleStates
 		modules = modules

frontend/src/lib/components/flows/scheduleUtils.ts

@@ -4,7 +4,6 @@ export type Schedule = {
 	args: Record<string, any>
 	cron: string
 	enabled: boolean
-	previewArgs: Record<string, any>
 }
 
 // Load the schedule of a flow given its path and the workspace
@@ -27,6 +26,5 @@ export async function loadFlowSchedule(path: string, workspace: string = ''): Pr
 		enabled: schedule.enabled,
 		cron: schedule.schedule,
 		args: schedule.args ?? {},
-		previewArgs: JSON.parse(JSON.stringify(schedule.args))
 	}
 }