From 9f76399eb959daa086c719ad1cbef3bc414f7f5f Mon Sep 17 00:00:00 2001
From: Yulong Ruan <ruanyl@amazon.com>
Date: Tue, 10 Sep 2024 14:11:54 +0800
Subject: [PATCH] fix: it should not create multiple query editor extension
 container (#8085)

Signed-off-by: Yulong Ruan <ruanyl@amazon.com>
---
 .../data/public/ui/query_editor/_query_editor.scss |  5 +----
 .../query_editor_extensions.tsx                    | 14 ++++++++++----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss
index 85076e8c0b23..897e9197da7c 100644
--- a/src/plugins/data/public/ui/query_editor/_query_editor.scss
+++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -153,10 +153,7 @@
 .osdQueryEditor__header {
   display: flex;
   align-items: center;
-
-  .osdQueryEditorExtensionComponent {
-    padding: 0 $euiSizeXS $euiSizeXS;
-  }
+  padding: 0 $euiSizeXS $euiSizeXS;
 }
 
 .osdQueryEditor__topBar {
diff --git a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.tsx b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.tsx
index 89e9f5e3c94f..e3de25ac5198 100644
--- a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.tsx
+++ b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.tsx
@@ -27,16 +27,22 @@ const QueryEditorExtensions: React.FC<QueryEditorExtensionsProps> = React.memo((
   return (
     <>
       {sortedConfigs.map((config) => {
-        const extensionComponentContainer = document.createElement('div');
-        extensionComponentContainer.className = `osdQueryEditorExtensionComponent osdQueryEditorExtensionComponent__${config.id}`;
-        componentContainer.appendChild(extensionComponentContainer);
+        const id = `osdQueryEditorExtensionComponent-${config.id}`;
+
+        let container = document.getElementById(id);
+        if (!container) {
+          container = document.createElement('div');
+          container.className = `osdQueryEditorExtensionComponent osdQueryEditorExtensionComponent__${config.id}`;
+          container.id = id;
+          componentContainer.appendChild(container);
+        }
 
         return (
           <QueryEditorExtension
             key={config.id}
             config={config}
             dependencies={dependencies}
-            componentContainer={extensionComponentContainer}
+            componentContainer={container}
             bannerContainer={bannerContainer}
           />
         );