feat: adding in some editor events for monaco (#15854)

ui/src/shared/components/FluxMonacoEditor.tsx

@@ -6,17 +6,51 @@ import MonacoEditor from 'react-monaco-editor'
 import {tokenizeFlux} from 'src/external/monaco.fluxLang'
 import {addFluxTheme} from 'src/external/monaco.fluxTheme'
 import {addSnippets} from 'src/external/monaco.fluxCompletions'
+import {OnChangeScript} from 'src/types/flux'
+
+interface Position {
+  line: number
+  ch: number
+}
 
 interface Props {
   script: string
+  onChangeScript: OnChangeScript
+  onSubmitScript?: () => void
+  onCursorChange?: (position: Position) => void
 }
 
-const FluxEditorMonaco: FC<Props> = ({script}) => {
+const FluxEditorMonaco: FC<Props> = props => {
   const editorWillMount = monaco => {
     tokenizeFlux(monaco)
     addFluxTheme(monaco)
     addSnippets(monaco)
   }
+  const editorDidMount = editor => {
+    editor.onDidChangeCursorPosition(evt => {
+      const {position} = evt
+      const {onCursorChange} = props
+      const pos = {
+        line: position.lineNumber,
+        ch: position.column,
+      }
+
+      if (onCursorChange) {
+        onCursorChange(pos)
+      }
+    })
+
+    editor.onKeyUp(evt => {
+      const {ctrlKey, code} = evt
+      const {onSubmitScript} = props
+      if (ctrlKey && code === 'Enter') {
+        if (onSubmitScript) {
+          onSubmitScript()
+        }
+      }
+    })
+  }
+  const {script, onChangeScript} = props
 
   return (
     <div className="time-machine-editor" data-testid="flux-editor">
@@ -26,7 +60,9 @@ const FluxEditorMonaco: FC<Props> = ({script}) => {
         language="flux"
         theme="vs-light"
         value={script}
+        onChange={onChangeScript}
         editorWillMount={editorWillMount}
+        editorDidMount={editorDidMount}
       />
     </div>
   )

ui/src/timeMachine/components/TimeMachineFluxEditor.tsx

@@ -58,7 +58,14 @@ class TimeMachineFluxEditor extends PureComponent<Props, State> {
           if (ENABLE_MONACO) {
             const FluxMonacoEditor = require('src/shared/components/FluxMonacoEditor')
               .default
-            return <FluxMonacoEditor script={activeQueryText} />
+            return (
+              <FluxMonacoEditor
+                script={activeQueryText}
+                onChangeScript={onSetActiveQueryText}
+                onSubmitScript={onSubmitQueries}
+                onCursorChange={this.handleCursorPosition}
+              />
+            )
           }
           return (
             <FluxEditor