From 420230ef171e1febd174efa16f5669944f830cd2 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 21 Dec 2022 09:46:12 +0100
Subject: [PATCH] minor editor improvements

---
 frontend/src/lib/components/Editor.svelte     | 15 +++++----
 .../src/lib/components/ScriptEditor.svelte    | 31 ++++++++++---------
 .../EmptyInlineScript.svelte                  |  5 +--
 .../InlineScriptEditor.svelte                 |  8 +++--
 .../InlineScriptEditorDrawer.svelte           |  1 +
 .../InlineScriptsPanelList.svelte             | 12 +++----
 .../settingsPanel/InputsSpecsEditor.svelte    |  2 +-
 .../settingsPanel/SelectedRunnable.svelte     |  4 +--
 .../settingsPanel/common/PanelSection.svelte  |  2 +-
 9 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index 1c4051b258..32ea271746 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -21,6 +21,13 @@
 		}
 	})
 	monaco.editor.setTheme('myTheme')
+	try {
+		StandaloneServices.initialize({
+			...getMessageServiceOverride(document.body)
+		})
+	} catch (e) {
+		console.error(e)
+	}
 </script>
 
 <script lang="ts">
@@ -56,14 +63,6 @@
 	import { dirtyStore } from './common/confirmationModal/dirtyStore'
 	import { StandaloneServices } from 'vscode/services'
 
-	try {
-		StandaloneServices.initialize({
-			...getMessageServiceOverride(document.body)
-		})
-	} catch (e) {
-		console.error(e)
-	}
-
 	let divEl: HTMLDivElement | null = null
 	let editor: monaco.editor.IStandaloneCodeEditor
 
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 6093f766e7..0b4bc9665f 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -26,6 +26,7 @@
 	export let kind: 'script' | 'trigger' | 'approval' | undefined = undefined
 	export let initialArgs: Record<string, any> = {}
 	export let fixedOverflowWidgets = true
+	export let noSyncFromGithub = false
 
 	let websocketAlive = { pyright: false, black: false, deno: false, go: false }
 
@@ -121,20 +122,22 @@
 			{websocketAlive}
 			{kind}
 		/>
-		<div class="py-1">
-			<Button
-				target="_blank"
-				href="https://github.com/windmill-labs/windmill/tree/main/cli"
-				color="light"
-				size="xs"
-				btnClasses="mr-1 hidden md:block"
-				startIcon={{
-					icon: faGithub
-				}}
-			>
-				Sync from Github
-			</Button>
-		</div>
+		{#if !noSyncFromGithub}
+			<div class="py-1">
+				<Button
+					target="_blank"
+					href="https://github.com/windmill-labs/windmill/tree/main/cli"
+					color="light"
+					size="xs"
+					btnClasses="mr-1 hidden md:block"
+					startIcon={{
+						icon: faGithub
+					}}
+				>
+					Sync from Github
+				</Button>
+			</div>
+		{/if}
 	</div>
 </div>
 <SplitPanesWrapper panesClass="!overflow-visible">
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
index fce564c8c4..51f6c749c5 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
@@ -34,7 +34,7 @@
 		subkind: 'pgsql' | 'mysql' | undefined = undefined
 	) {
 		const fullPath = `${appPath}/inline-script/${path}`
-		const content = initialCode(language, Script.kind.SCRIPT, subkind)
+		const content = initialCode(language, Script.kind.SCRIPT, subkind ?? 'flow')
 
 		let schema: Schema = emptySchema()
 
@@ -47,12 +47,13 @@
 		}
 		dispatch('new', newInlineScript)
 	}
+	const langs = ['deno', 'python3', 'go', 'bash'] as Script.language[]
 </script>
 
 <div class="flex flex-col p-4 gap-2 text-sm" in:fly={{ duration: 50 }}>
 	Please choose a language:
 	<div class="flex gap-2 flex-row flex-wrap">
-		{#each Object.values(Script.language) as lang}
+		{#each langs as lang}
 			<FlowScriptPicker
 				label={lang}
 				{lang}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index 8287b28e01..794370b196 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -11,6 +11,8 @@
 	import type { Schema } from '$lib/common'
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import { fly } from 'svelte/transition'
+	import Editor from '$lib/components/Editor.svelte'
+	import { scriptLangToEditorLang } from '$lib/utils'
 
 	let inlineScriptEditorDrawer: InlineScriptEditorDrawer
 
@@ -50,7 +52,7 @@
 <InlineScriptEditorDrawer bind:this={inlineScriptEditorDrawer} bind:inlineScript />
 
 <div class="h-full p-4 flex flex-col gap-2" transition:fly={{ duration: 50 }}>
-	<div class="flex justify-between w-full flex-row items-center">
+	<div class="flex justify-between w-full gap-1 flex-row items-center">
 		{#if name !== undefined}
 			<input bind:value={name} placeholder="Inline script name" />
 		{/if}
@@ -89,9 +91,9 @@
 	</div>
 
 	<div class="border h-full">
-		<SimpleEditor
+		<Editor
 			class="flex flex-1 grow h-full"
-			lang="typescript"
+			lang={scriptLangToEditorLang(inlineScript?.language)}
 			bind:code={inlineScript.content}
 			fixedOverflowWidgets={false}
 			on:change={async () => {
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
index 5d902bcf7d..4aef09aebe 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
@@ -21,6 +21,7 @@
 	>
 		{#if inlineScript}
 			<ScriptEditor
+				noSyncFromGithub
 				lang={inlineScript.language}
 				path={inlineScript.path}
 				fixedOverflowWidgets={false}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
index 856abb4d85..f3f90a8245 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
@@ -75,12 +75,12 @@
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
 						class="{classNames(
-							'border flex justify-between flex-row w-full items-center p-2 rounded-sm cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+							'border flex  gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-sm cursor-pointer hover:bg-blue-50 hover:text-blue-400',
 							selectedScriptComponentId === (subId ? subId : id) ? 'border-blue-500 border' : ''
 						)},"
 						on:click={() => selectInlineScript(id, subId)}
 					>
-						<span class="text-xs">{name}</span>
+						<span class="text-xs truncate">{name}</span>
 						<div>
 							<Badge color="dark-indigo">{id}</Badge>
 							{#if subId}
@@ -100,12 +100,12 @@
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
 						class="{classNames(
-							'border flex justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+							'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
 							selectedScriptComponentId === '' ? 'bg-blue-100 text-blue-600' : ''
 						)},"
 						on:click={() => selectInlineScript(unusedInlineScript.name)}
 					>
-						<span class="text-xs">{unusedInlineScript.name}</span>
+						<span class="text-xs truncate">{unusedInlineScript.name}</span>
 						<Badge color="red">Unused</Badge>
 					</div>
 				{/each}
@@ -122,12 +122,12 @@
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
 						class="{classNames(
-							'border flex justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+							'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
 							selectedScriptComponentId === id ? 'bg-blue-100 text-blue-600' : ''
 						)},"
 						on:click={() => selectInlineScript(id)}
 					>
-						<span class="text-xs">{name}</span>
+						<span class="text-xs truncate">{name}</span>
 						<Badge color="dark-indigo">{id}</Badge>
 					</div>
 				{/each}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
index b94cba9b8b..c277fc5ad9 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
@@ -17,7 +17,7 @@
 			{@const input = inputSpecs[inputSpecKey]}
 			{#if true}
 				<div class="flex flex-col gap-2">
-					<div class="flex justify-between items-center">
+					<div class="flex justify-between items-center gap-1">
 						<span class="text-xs font-semibold">{capitalize(inputSpecKey)}</span>
 
 						<div class="flex gap-2 items-center">
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
index 402904bd73..53c85743f1 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
@@ -25,7 +25,7 @@
 		bind:inlineScript={appInput.runnable.inlineScript}
 	/>
 {/if}
-<div class="flex justify-between w-full items-center">
+<div class="flex justify-between w-full items-center gap-1">
 	<span class="text-xs font-semibold">
 		{#if appInput.runnable?.type === 'runnableByName'}
 			{appInput.runnable.name}
@@ -33,7 +33,7 @@
 			{appInput.runnable.path}
 		{/if}
 	</span>
-	<div>
+	<div class="flex flex-wrap gap-1">
 		{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
 			<Button size="xs" color="light" variant="border" startIcon={{ icon: faEdit }} on:click={edit}>
 				Edit
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
index ce7674bf31..be7ebbdf42 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div class={classNames('flex flex-col gap-2 items-start', smallPadding ? 'p-2' : 'p-4')}>
-	<div class="flex justify-between items-center w-full">
+	<div class="flex justify-between items-center w-full gap-1">
 		<div class="text-sm font-extrabold">{title}</div>
 		<slot name="action" />
 	</div>