Prometheus: Fix cursor jump in prometheus code editor (#100273)

* set save view state prop

* remove custom onChange function

packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryField.tsx

@@ -1,7 +1,6 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx
 import { css } from '@emotion/css';
 import { parser } from '@prometheus-io/lezer-promql';
-import { debounce } from 'lodash';
 import { promLanguageDefinition } from 'monaco-promql';
 import { useEffect, useRef } from 'react';
 import { useLatest } from 'react-use';
@@ -106,13 +105,12 @@ 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, onChange, datasource } = props;
+  const { languageProvider, history, onBlur, onRunQuery, initialValue, placeholder, datasource } = 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);
 
@@ -134,6 +132,8 @@ const MonacoQueryField = (props: Props) => {
       ref={containerRef}
     >
       <ReactMonacoEditor
+        // see https://github.com/suren-atoyan/monaco-react/issues/365
+        saveViewState
         overrideServices={overrideServicesRef.current}
         options={options}
         language="promql"
@@ -201,23 +201,6 @@ 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.
-          // This can run quite slowly, so we're debouncing this which should accomplish two things
-          // 1. Should prevent this function from blocking the current call stack by pushing into the web API callback queue
-          // 2. Should prevent a bunch of duplicates of this function being called as the user is typing
-          const updateCurrentEditorValue = debounce(() => {
-            const editorValue = editor.getValue();
-            onChangeRef.current(editorValue);
-          }, lpRef.current.datasource.getDebounceTimeInMilliseconds());
-
-          editor.getModel()?.onDidChangeContent(() => {
-            updateCurrentEditorValue();
-          });
-
           // handle: shift + enter
           // FIXME: maybe move this functionality into CodeEditor?
           editor.addCommand(
@@ -235,9 +218,8 @@ const MonacoQueryField = (props: Props) => {
             command: null,
           });
 
-          /* Something in this configuration of monaco doesn't bubble up [mod]+K, which the
+          // Something in this configuration of monaco doesn't bubble up [mod]+K,
-                    command palette uses. Pass the event out of monaco manually
+          // which the command palette uses. Pass the event out of monaco manually
-                    */
           editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK, function () {
             global.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
           });

packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryFieldLazy.tsx

@@ -4,8 +4,6 @@ import { Suspense } from 'react';
 import MonacoQueryField from './MonacoQueryField';
 import { Props } from './MonacoQueryFieldProps';
 
-// const Field = React.lazy(() => import('./MonacoQueryField'));
-
 export const MonacoQueryFieldLazy = (props: Props) => {
   return (
     <Suspense fallback={null}>

packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryFieldProps.ts

@@ -16,7 +16,5 @@ 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;
   datasource: PrometheusDatasource;
 };

packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryFieldWrapper.tsx

@@ -23,13 +23,5 @@ export const MonacoQueryFieldWrapper = (props: Props) => {
     onChange(value);
   };
 
-  /**
+  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} />;
 };