From b9af03bc40b2e9c47d0830299b43b3185e0dee8c Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Mon, 9 Sep 2024 11:18:20 -0700
Subject: [PATCH] fix: order of query editor extensions not working (#8045)
 (#8078)

* fix: order it query editor extensions not working



* tweaks query assist extension styles



* Changeset file for PR #8045 created/updated

---------



(cherry picked from commit cedba8e5c1275606b6ffdb1fd94c040decc3d4a5)

Signed-off-by: Yulong Ruan <ruanyl@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
---
 changelogs/fragments/8045.yml                 |  2 ++
 .../public/ui/query_editor/_query_editor.scss |  9 +++++++
 .../query_editor_extensions.tsx               | 24 ++++++++++++-------
 .../public/query_assist/_index.scss           |  8 +++----
 4 files changed, 30 insertions(+), 13 deletions(-)
 create mode 100644 changelogs/fragments/8045.yml

diff --git a/changelogs/fragments/8045.yml b/changelogs/fragments/8045.yml
new file mode 100644
index 000000000000..da2a823b6367
--- /dev/null
+++ b/changelogs/fragments/8045.yml
@@ -0,0 +1,2 @@
+fix:
+- Order of query editor extensions not working ([#8045](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8045))
\ No newline at end of file
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 3e9a6ac61c76..85076e8c0b23 100644
--- a/src/plugins/data/public/ui/query_editor/_query_editor.scss
+++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -150,6 +150,15 @@
   }
 }
 
+.osdQueryEditor__header {
+  display: flex;
+  align-items: center;
+
+  .osdQueryEditorExtensionComponent {
+    padding: 0 $euiSizeXS $euiSizeXS;
+  }
+}
+
 .osdQueryEditor__topBar {
   display: flex;
   align-items: center;
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 45b0d076877e..89e9f5e3c94f 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
@@ -26,15 +26,21 @@ const QueryEditorExtensions: React.FC<QueryEditorExtensionsProps> = React.memo((
 
   return (
     <>
-      {sortedConfigs.map((config) => (
-        <QueryEditorExtension
-          key={config.id}
-          config={config}
-          dependencies={dependencies}
-          componentContainer={componentContainer}
-          bannerContainer={bannerContainer}
-        />
-      ))}
+      {sortedConfigs.map((config) => {
+        const extensionComponentContainer = document.createElement('div');
+        extensionComponentContainer.className = `osdQueryEditorExtensionComponent osdQueryEditorExtensionComponent__${config.id}`;
+        componentContainer.appendChild(extensionComponentContainer);
+
+        return (
+          <QueryEditorExtension
+            key={config.id}
+            config={config}
+            dependencies={dependencies}
+            componentContainer={extensionComponentContainer}
+            bannerContainer={bannerContainer}
+          />
+        );
+      })}
     </>
   );
 });
diff --git a/src/plugins/query_enhancements/public/query_assist/_index.scss b/src/plugins/query_enhancements/public/query_assist/_index.scss
index f80ad45850c9..65ed6aa60884 100644
--- a/src/plugins/query_enhancements/public/query_assist/_index.scss
+++ b/src/plugins/query_enhancements/public/query_assist/_index.scss
@@ -4,11 +4,11 @@
  */
 
 .queryAssist {
-  &.queryAssist__form {
-    padding: 0 $euiSizeXS $euiSizeXS;
-  }
-
   &.queryAssist__callout {
     margin-top: $euiSizeXS;
   }
 }
+
+.osdQueryEditorExtensionComponent__query-assist {
+  flex-grow: 1;
+}