CodeEditor: Ensure suggestions only apply to the instance of the edit… (#70067)

CodeEditor: Ensure suggestions only apply to the instance of the editor that registered them (#69995)

* user essentials mob! 🔱

lastFile:packages/grafana-ui/src/components/Monaco/CodeEditor.internal.story.tsx

* user essentials mob! 🔱

lastFile:packages/grafana-ui/src/components/Monaco/suggestions.ts

* user essentials mob! 🔱

lastFile:packages/grafana-ui/src/components/Monaco/CodeEditor.internal.story.tsx

* user essentials mob! 🔱

lastFile:packages/grafana-ui/src/components/Monaco/suggestions.ts

* remove duplicate editor from story

* remove suggestions from story

---------

Co-authored-by: Laura Benz <laura.benz@grafana.com>
Co-authored-by: Tobias Skarhed <tobias.skarhed@gmail.com>
(cherry picked from commit 61dbad6905)

# Conflicts:
#	packages/grafana-ui/src/components/Monaco/CodeEditor.tsx

packages/grafana-ui/src/components/Monaco/CodeEditor.tsx

@@ -17,6 +17,7 @@ type Props = CodeEditorProps & Themeable2;
 class UnthemedCodeEditor extends PureComponent<Props> {
   completionCancel?: monacoType.IDisposable;
   monaco?: Monaco;
+  modelId?: string;
 
   constructor(props: Props) {
     super(props);
@@ -44,8 +45,8 @@ class UnthemedCodeEditor extends PureComponent<Props> {
         return;
       }
 
-      if (getSuggestions) {
-        this.completionCancel = registerSuggestions(this.monaco, language, getSuggestions);
+      if (getSuggestions && this.modelId) {
+        this.completionCancel = registerSuggestions(this.monaco, language, getSuggestions, this.modelId);
       }
     }
 
@@ -85,21 +86,23 @@ class UnthemedCodeEditor extends PureComponent<Props> {
 
   handleBeforeMount = (monaco: Monaco) => {
     this.monaco = monaco;
-    const { language, getSuggestions, onBeforeEditorMount } = this.props;
 
-    if (getSuggestions) {
-      this.completionCancel = registerSuggestions(monaco, language, getSuggestions);
-    }
+    const { onBeforeEditorMount } = this.props;
 
     onBeforeEditorMount?.(monaco);
   };
 
   handleOnMount = (editor: MonacoEditorType, monaco: Monaco) => {
-    const { onChange, onEditorDidMount } = this.props;
+    const { getSuggestions, language, onChange, onEditorDidMount } = this.props;
 
+    this.modelId = editor.getModel()?.id;
     this.getEditorValue = () => editor.getValue();
 
+    if (getSuggestions && this.modelId) {
+      this.completionCancel = registerSuggestions(monaco, language, getSuggestions, this.modelId);
+    }
     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, this.onSave);
+
     const languagePromise = this.loadCustomLanguage();
 
     if (onEditorDidMount) {

packages/grafana-ui/src/components/Monaco/suggestions.ts

@@ -73,7 +73,8 @@ function mapKinds(monaco: Monaco, sug?: CodeEditorSuggestionItemKind): monacoTyp
 export function registerSuggestions(
   monaco: Monaco,
   language: string,
-  getSuggestions: CodeEditorSuggestionProvider
+  getSuggestions: CodeEditorSuggestionProvider,
+  modelId: string
 ): monacoType.IDisposable | undefined {
   if (!language || !getSuggestions) {
     return undefined;
@@ -82,6 +83,11 @@ export function registerSuggestions(
     triggerCharacters: ['$'],
 
     provideCompletionItems: (model, position, context) => {
+      // only return these suggestions for the specified modelId
+      // prevents duplicate suggestions when multiple editors are open
+      if (model.id !== modelId) {
+        return undefined;
+      }
       const range = {
         startLineNumber: position.lineNumber,
         endLineNumber: position.lineNumber,