From 4f552bba8541609a506fd17aa029e083da5ac159 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 14 Jun 2023 14:03:18 +0100
Subject: [PATCH] =?UTF-8?q?CodeEditor:=20Ensure=20suggestions=20only=20app?=
 =?UTF-8?q?ly=20to=20the=20instance=20of=20the=20edit=E2=80=A6=20(#70067)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* user essentials mob! :trident:

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

* user essentials mob! :trident:

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

* user essentials mob! :trident:

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

* user essentials mob! :trident:

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 61dbad6905264e41e9464032f065993fb50cf4ea)

# Conflicts:
#	packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
---
 .../src/components/Monaco/CodeEditor.tsx        | 17 ++++++++++-------
 .../src/components/Monaco/suggestions.ts        |  8 +++++++-
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
index ef5819b74c7..528c254fa93 100644
--- a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
+++ b/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) {
diff --git a/packages/grafana-ui/src/components/Monaco/suggestions.ts b/packages/grafana-ui/src/components/Monaco/suggestions.ts
index b73b8d4ef25..cb9a78c4a95 100644
--- a/packages/grafana-ui/src/components/Monaco/suggestions.ts
+++ b/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,