feat(frontend): Add contextual actions to insert variables or resources (#629)

* feat(frontend): Add actions to Monaco editor

* feat(frontend): Remove useless icon

* feat(front): Move addActions to editorBar

frontend/src/lib/components/Editor.svelte

@@ -413,6 +413,24 @@
 		}
 	}
 
+	export function addAction(
+		id: string,
+		label: string,
+		callback: (editor: monaco.editor.IStandaloneCodeEditor) => void,
+		keybindings: number[] = []
+	) {
+		editor.addAction({
+			id,
+			label,
+			keybindings,
+			contextMenuGroupId: 'navigation',
+
+			run: function (editor: monaco.editor.IStandaloneCodeEditor) {
+				callback(editor)
+			}
+		})
+	}
+
 	onMount(() => {
 		if (browser) {
 			loadMonaco().then((x) => (disposeMethod = x))

frontend/src/lib/components/EditorBar.svelte

@@ -29,6 +29,17 @@
 	let codeLang: 'python3' | 'deno' | 'go' = 'deno'
 	let codeContent: string = ''
 
+	function addEditorActions() {
+		editor.addAction('insert-variable', 'Windmill: Insert variable', () => {
+			variablePicker.openModal()
+		})
+		editor.addAction('insert-resource', 'Windmill: Insert resource', () => {
+			resourcePicker.openModal()
+		})
+	}
+
+	$: editor && addEditorActions()
+
 	async function loadVariables() {
 		let r: { name: string; path?: string; description?: string }[] = []
 		const variables = (

frontend/src/lib/components/ModulePreview.svelte

@@ -9,7 +9,6 @@
 	import TestJobLoader from './TestJobLoader.svelte'
 	import LogViewer from './LogViewer.svelte'
 	import DisplayResult from './DisplayResult.svelte'
-	import { mapJobResultsToFlowState } from './flows/flowStateUtils'
 	import Button from './common/button/Button.svelte'
 	import { faRotateRight } from '@fortawesome/free-solid-svg-icons'
 	import { flowStateStore } from './flows/flowState'