From 07ac388e8b448ff19fc8d908cac7d988e751a20e Mon Sep 17 00:00:00 2001
From: Hamas Shafiq <hamas.shafiq@grafana.com>
Date: Fri, 21 Oct 2022 16:01:53 +0100
Subject: [PATCH] Tempo: Update the query whenever the value of the TraceQL
 editor changes (#57199)

---
 packages/grafana-ui/src/components/Monaco/CodeEditor.tsx     | 4 +++-
 packages/grafana-ui/src/components/Monaco/types.ts           | 3 +++
 .../app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx   | 5 +++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
index ee203a41fb7..ef5819b74c7 100644
--- a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
+++ b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
@@ -95,7 +95,8 @@ class UnthemedCodeEditor extends PureComponent<Props> {
   };
 
   handleOnMount = (editor: MonacoEditorType, monaco: Monaco) => {
-    const { onEditorDidMount } = this.props;
+    const { onChange, onEditorDidMount } = this.props;
+
     this.getEditorValue = () => editor.getValue();
 
     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, this.onSave);
@@ -103,6 +104,7 @@ class UnthemedCodeEditor extends PureComponent<Props> {
 
     if (onEditorDidMount) {
       languagePromise.then(() => onEditorDidMount(editor, monaco));
+      editor.getModel()?.onDidChangeContent(() => onChange?.(editor.getValue()));
     }
   };
 
diff --git a/packages/grafana-ui/src/components/Monaco/types.ts b/packages/grafana-ui/src/components/Monaco/types.ts
index 8e4ef7805c2..7c1c1e7581f 100644
--- a/packages/grafana-ui/src/components/Monaco/types.ts
+++ b/packages/grafana-ui/src/components/Monaco/types.ts
@@ -42,6 +42,9 @@ export interface CodeEditorProps {
   /** Handler to be performed when editor is blurred */
   onBlur?: CodeEditorChangeHandler;
 
+  /** Handler to be performed whenever the text inside the editor changes */
+  onChange?: CodeEditorChangeHandler;
+
   /** Handler to be performed when Cmd/Ctrl+S is pressed */
   onSave?: CodeEditorChangeHandler;
 
diff --git a/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx b/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx
index 548ed623c65..cbded5ced6e 100644
--- a/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx
+++ b/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx
@@ -22,7 +22,7 @@ interface Props {
 }
 
 export function TraceQLEditor(props: Props) {
-  const { onRunQuery, placeholder } = props;
+  const { onChange, onRunQuery, placeholder } = props;
   const setupAutocompleteFn = useAutocomplete(props.datasource);
   const theme = useTheme2();
   const styles = getStyles(theme, placeholder);
@@ -31,7 +31,8 @@ export function TraceQLEditor(props: Props) {
     <CodeEditor
       value={props.value}
       language={langId}
-      onBlur={props.onChange}
+      onBlur={onChange}
+      onChange={onChange}
       height={'30px'}
       containerStyles={styles.queryField}
       monacoOptions={{