fix: it should not create multiple query editor extension container (#…

…8085) Signed-off-by: Yulong Ruan <[email protected]> (cherry picked from commit 9f76399) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Sep 10, 2024 · 681ebb8 · 681ebb8
1 parent 514f838
commit 681ebb8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 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
@@ -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
@@ -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}
           />
         );