fix(frontend): Hide the editor panel when we are editing a PathScript (#631)

* fix(frontend): Hide the editor panel when we are editing a PathScript

* feat(front): Remove viewCode action and display the code in the Editor panel

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

@@ -30,6 +30,7 @@
 	import type { FlowEditorContext } from '../types'
 	import FlowModuleAdvancedSettings from './FlowModuleAdvancedSettings.svelte'
 	import { loadSchemaFromModule } from '../utils'
+	import FlowModuleScript from './FlowModuleScript.svelte'
 
 	const { selectedId, select } = getContext<FlowEditorContext>('FlowEditorContext')
 
@@ -154,6 +155,8 @@
 									formatAction={() => reload(flowModule)}
 								/>
 							</div>
+						{:else if flowModule.value.type === 'script'}
+							<FlowModuleScript {flowModule} />
 						{/if}
 					</top>
 

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

@@ -1,11 +1,8 @@
 <script lang="ts">
 	import { isEmptyFlowModule } from '$lib/components/flows/flowStateUtils'
-	import HighlightCode from '$lib/components/HighlightCode.svelte'
-	import Modal from '$lib/components/Modal.svelte'
 
 	import type { FlowModule } from '$lib/gen'
-	import { getScriptByPath } from '$lib/utils'
-	import { faCode, faCodeBranch, faSave, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+	import { faCodeBranch, faSave, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { Button } from 'flowbite-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import Icon from 'svelte-awesome'
@@ -15,21 +12,6 @@
 
 	$: shouldPick = isEmptyFlowModule(module)
 
-	let modalViewer: Modal
-	let modalViewerContent = ''
-	let modalViewerLanguage: 'deno' | 'python3' | 'go' = 'deno'
-
-	async function viewCode() {
-		if (module.value.type == 'script') {
-			const { content, language } = await getScriptByPath(module.value.path!)
-			modalViewerContent = content
-			modalViewerLanguage = language
-			modalViewer.openModal()
-		} else {
-			throw Error('Not a script')
-		}
-	}
-
 	const dispatch = createEventDispatcher()
 	const { selectedId } = getContext<FlowEditorContext>('FlowEditorContext')
 </script>
@@ -40,10 +22,6 @@
 			<Icon data={faCodeBranch} class="mr-2" />
 			Fork
 		</Button>
-		<Button size="xs" color="alternative" on:click={viewCode}>
-			<Icon data={faCode} class="mr-2" />
-			View code
-		</Button>
 	{/if}
 
 	{#if module.value.type === 'rawscript' && !shouldPick}
@@ -63,10 +41,3 @@
 		{$selectedId.includes('failure') ? 'Delete error handler' : 'Remove step'}
 	</Button>
 </div>
-
-<Modal bind:this={modalViewer}>
-	<div slot="title">Script {'path' in module?.value ? module?.value.path : ''}</div>
-	<div slot="content">
-		<HighlightCode language={modalViewerLanguage} code={modalViewerContent} />
-	</div>
-</Modal>

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import HighlightCode from '$lib/components/HighlightCode.svelte'
+	import type { FlowModule } from '$lib/gen'
+	import { getScriptByPath } from '$lib/utils'
+
+	export let flowModule: FlowModule
+
+	let code: string
+	let language: 'deno' | 'python3' | 'go'
+
+	async function loadCode(module: FlowModule) {
+		if (module.value.type == 'script') {
+			const script = await getScriptByPath(module.value.path!)
+			code = script.content
+			language = script.language
+		} else {
+			throw Error('Not a script')
+		}
+	}
+
+	$: flowModule && loadCode(flowModule)
+</script>
+
+<div class="flex flex-col flex-1 h-full overflow-auto">
+	<HighlightCode {language} {code} />
+</div>