From 893a6908aa7443524ef360ddc2bae02a81e599c0 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 27 Sep 2022 17:52:02 +0200
Subject: [PATCH] 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
---
 .../flows/content/FlowModule.svelte           |  3 ++
 .../flows/content/FlowModuleHeader.svelte     | 31 +------------------
 .../flows/content/FlowModuleScript.svelte     | 26 ++++++++++++++++
 3 files changed, 30 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/lib/components/flows/content/FlowModuleScript.svelte

diff --git a/frontend/src/lib/components/flows/content/FlowModule.svelte b/frontend/src/lib/components/flows/content/FlowModule.svelte
index b070b2a358..3d572527d4 100644
--- a/frontend/src/lib/components/flows/content/FlowModule.svelte
+++ b/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>
 
diff --git a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
index ec9e2fdb00..2fd871bf20 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleScript.svelte b/frontend/src/lib/components/flows/content/FlowModuleScript.svelte
new file mode 100644
index 0000000000..a535e872ab
--- /dev/null
+++ b/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>