From 89a20526e58e2f63367f9ed2aa5c6118685667b8 Mon Sep 17 00:00:00 2001
From: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>
Date: Wed, 21 Sep 2022 12:51:14 -0500
Subject: [PATCH] Prometheus: Update onblur ref with value of last changed
 monaco editor (#55513)

* add new monaco callback to update onBlurRef with current value on monaco editor change.

* don't overload onBlur, create new onChange tracker that doesn't initiate queries, just updates values

* Update public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx

Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>
---
 .../monaco-query-field/MonacoQueryField.tsx          | 12 +++++++++++-
 .../monaco-query-field/MonacoQueryFieldProps.ts      |  2 ++
 .../monaco-query-field/MonacoQueryFieldWrapper.tsx   | 10 +++++++++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx
index 51d47c5031f..5c26a5682d2 100644
--- a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx
+++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx
@@ -90,12 +90,13 @@ const MonacoQueryField = (props: Props) => {
   // we need only one instance of `overrideServices` during the lifetime of the react component
   const overrideServicesRef = useRef(getOverrideServices());
   const containerRef = useRef<HTMLDivElement>(null);
-  const { languageProvider, history, onBlur, onRunQuery, initialValue, placeholder } = props;
+  const { languageProvider, history, onBlur, onRunQuery, initialValue, placeholder, onChange } = props;
 
   const lpRef = useLatest(languageProvider);
   const historyRef = useLatest(history);
   const onRunQueryRef = useLatest(onRunQuery);
   const onBlurRef = useLatest(onBlur);
+  const onChangeRef = useLatest(onChange);
 
   const autocompleteDisposeFun = useRef<(() => void) | null>(null);
 
@@ -201,6 +202,15 @@ const MonacoQueryField = (props: Props) => {
           editor.onDidContentSizeChange(updateElementHeight);
           updateElementHeight();
 
+          // Whenever the editor changes, lets save the last value so the next query for this editor will be up-to-date.
+          // This change is being introduced to fix a bug where you can submit a query via shift+enter:
+          // If you clicked into another field and haven't un-blurred the active field,
+          // then the query that is run will be stale, as the reference is only updated
+          // with the value of the last blurred input.
+          editor.getModel()?.onDidChangeContent(() => {
+            onChangeRef.current(editor.getValue());
+          });
+
           // handle: shift + enter
           // FIXME: maybe move this functionality into CodeEditor?
           editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, () => {
diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldProps.ts b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldProps.ts
index d9a2cfe8fa5..3c5f17fa23d 100644
--- a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldProps.ts
+++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldProps.ts
@@ -14,4 +14,6 @@ export type Props = {
   placeholder: string;
   onRunQuery: (value: string) => void;
   onBlur: (value: string) => void;
+  // onChange will never initiate a query, it just denotes that a query value has been changed
+  onChange: (value: string) => void;
 };
diff --git a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldWrapper.tsx b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldWrapper.tsx
index 60295a3a83e..98e0be23ff1 100644
--- a/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldWrapper.tsx
+++ b/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldWrapper.tsx
@@ -30,5 +30,13 @@ export const MonacoQueryFieldWrapper = (props: Props) => {
     }
   };
 
-  return <MonacoQueryFieldLazy onRunQuery={handleRunQuery} onBlur={handleBlur} {...rest} />;
+  /**
+   * Handles changes without running any queries
+   * @param value
+   */
+  const handleChange = (value: string) => {
+    onChange(value);
+  };
+
+  return <MonacoQueryFieldLazy onChange={handleChange} onRunQuery={handleRunQuery} onBlur={handleBlur} {...rest} />;
 };