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 cedba8e) Signed-off-by: Yulong Ruan <[email protected]> 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>
opensearch-project · Sep 9, 2024 · b9af03b · b9af03b
1 parent a83f4e3
commit b9af03b
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git a/changelogs/fragments/8045.yml 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))
diff --git 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
@@ -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
@@ -4,11 +4,11 @@
  */
 
 .queryAssist {
-  &.queryAssist__form {
-    padding: 0 $euiSizeXS $euiSizeXS;
-  }
-
   &.queryAssist__callout {
     margin-top: $euiSizeXS;
   }
 }
+
+.osdQueryEditorExtensionComponent__query-assist {
+  flex-grow: 1;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		fix:
		- Order of query editor extensions not working ([#8045](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8045))