refactor: move the render of query extension control buttons to extension component

changelogs/fragments/8334.yml

@@ -0,0 +1,2 @@
+refactor:
+- Move the render of query extension control buttons to extension component ([#8334](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8334))

src/plugins/data/public/ui/query_editor/_query_editor.scss

@@ -169,6 +169,12 @@
   .osdQueryEditor__querycontrols {
     float: right;
     margin: $euiSizeS $euiSizeS;
+
+    .osdQueryEditor__extensionQueryControls {
+      display: flex;
+      padding: 0 $euiSizeS 0 $euiSizeXS;
+      border-right: $euiBorderThin;
+    }
   }
 
   .osdQueryEditor__dataSetPicker {

src/plugins/data/public/ui/query_editor/query_editor.tsx

@@ -106,6 +106,7 @@ export default class QueryEditorUI extends Component<Props, State> {
   private services = this.props.opensearchDashboards.services;
   private headerRef: RefObject<HTMLDivElement> = createRef();
   private bannerRef: RefObject<HTMLDivElement> = createRef();
+  private queryControlsContainer: RefObject<HTMLDivElement> = createRef();
   private extensionMap = this.languageManager.getQueryEditorExtensionMap();
 
   private getQueryString = () => {
@@ -121,6 +122,7 @@ export default class QueryEditorUI extends Component<Props, State> {
       !(
         this.headerRef.current &&
         this.bannerRef.current &&
+        this.queryControlsContainer.current &&
         this.props.query.language &&
         this.extensionMap &&
         Object.keys(this.extensionMap).length > 0
@@ -137,6 +139,7 @@ export default class QueryEditorUI extends Component<Props, State> {
         configMap={this.extensionMap}
         componentContainer={this.headerRef.current}
         bannerContainer={this.bannerRef.current}
+        queryControlsContainer={this.queryControlsContainer.current}
       />
     );
   }
@@ -336,25 +339,6 @@ export default class QueryEditorUI extends Component<Props, State> {
     return <QueryControls queryControls={queryControls} />;
   };
 
-  private renderExtensionSearchBarButton = () => {
-    if (!this.extensionMap || Object.keys(this.extensionMap).length === 0) return null;
-    const sortedConfigs = Object.values(this.extensionMap).sort((a, b) => a.order - b.order);
-    return (
-      <>
-        {sortedConfigs.map((config) => {
-          return config.getSearchBarButton
-            ? config.getSearchBarButton({
-                language: this.props.query.language,
-                onSelectLanguage: this.onSelectLanguage,
-                isCollapsed: this.state.isCollapsed,
-                setIsCollapsed: this.setIsCollapsed,
-              })
-            : null;
-        })}
-      </>
-    );
-  };
-
   public render() {
     const className = classNames(this.props.className);
 
@@ -471,9 +455,12 @@ export default class QueryEditorUI extends Component<Props, State> {
           {languageSelector}
           <div className="osdQueryEditor__querycontrols">
             <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+              <div
+                ref={this.queryControlsContainer}
+                className="osdQueryEditor__extensionQueryControls"
+              />
               {this.renderQueryControls(languageEditor.TopBar.Controls)}
               {!languageEditor.TopBar.Expanded && this.renderToggleIcon()}
-              {!languageEditor.TopBar.Expanded && this.renderExtensionSearchBarButton()}
               {this.props.savedQueryManagement}
             </EuiFlexGroup>
           </div>

src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx

@@ -14,6 +14,7 @@
   dependencies: QueryEditorExtensionDependencies;
   componentContainer: Element;
   bannerContainer: Element;
+  queryControlsContainer: Element;
 }
 
 export interface QueryEditorExtensionDependencies {
@@ -97,6 +98,11 @@
     props.dependencies,
   ]);
 
+  const queryControlButtons = useMemo(() => props.config.getSearchBarButton?.(props.dependencies), [
+    props.config,
+    props.dependencies,
+  ]);
+
   useEffect(() => {
     isMounted.current = true;
     return () => {
@@ -121,6 +127,9 @@
       <QueryEditorExtensionPortal container={props.componentContainer}>
         {component}
       </QueryEditorExtensionPortal>
+      <QueryEditorExtensionPortal container={props.queryControlsContainer}>
+        {queryControlButtons}
+      </QueryEditorExtensionPortal>
     </>
   );
 };

src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.test.tsx

@@ -23,6 +23,7 @@ describe('QueryEditorExtensions', () => {
   const defaultProps: QueryEditorExtensionsProps = {
     componentContainer: document.createElement('div'),
     bannerContainer: document.createElement('div'),
+    queryControlsContainer: document.createElement('div'),
     language: 'Test-lang',
     onSelectLanguage: jest.fn(),
     isCollapsed: false,

src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.tsx

@@ -14,10 +14,17 @@ interface QueryEditorExtensionsProps extends QueryEditorExtensionDependencies {
   configMap?: Record<string, QueryEditorExtensionConfig>;
   componentContainer: Element;
   bannerContainer: Element;
+  queryControlsContainer: Element;
 }
 
 const QueryEditorExtensions: React.FC<QueryEditorExtensionsProps> = React.memo((props) => {
-  const { configMap, componentContainer, bannerContainer, ...dependencies } = props;
+  const {
+    configMap,
+    componentContainer,
+    bannerContainer,
+    queryControlsContainer,
+    ...dependencies
+  } = props;
 
   const sortedConfigs = useMemo(() => {
     if (!configMap || Object.keys(configMap).length === 0) return [];
@@ -27,23 +34,35 @@ const QueryEditorExtensions: React.FC<QueryEditorExtensionsProps> = React.memo((
   return (
     <>
       {sortedConfigs.map((config) => {
-        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);
+        const extensionComponentId = `osdQueryEditorExtensionComponent-${config.id}`;
+        const extensionQueryControlsId = `osdQueryEditorExtensionQueryControls-${config.id}`;
+
+        // Make sure extension components are rendered in order
+        let extensionComponentContainer = document.getElementById(extensionComponentId);
+        if (!extensionComponentContainer) {
+          extensionComponentContainer = document.createElement('div');
+          extensionComponentContainer.className = `osdQueryEditorExtensionComponent osdQueryEditorExtensionComponent__${config.id}`;
+          extensionComponentContainer.id = extensionComponentId;
+          componentContainer.appendChild(extensionComponentContainer);
+        }
+
+        // Make sure extension query controls are rendered in order
+        let extensionQueryControlsContainer = document.getElementById(extensionQueryControlsId);
+        if (!extensionQueryControlsContainer) {
+          extensionQueryControlsContainer = document.createElement('div');
+          extensionQueryControlsContainer.className = `osdQueryEditorExtensionQueryControls osdQueryEditorExtensionQueryControls__${config.id}`;
+          extensionQueryControlsContainer.id = extensionQueryControlsId;
+          queryControlsContainer.appendChild(extensionQueryControlsContainer);
         }
 
         return (
           <QueryEditorExtension
             key={config.id}
             config={config}
             dependencies={dependencies}
-            componentContainer={container}
+            componentContainer={extensionComponentContainer}
             bannerContainer={bannerContainer}
+            queryControlsContainer={extensionQueryControlsContainer}
           />
         );
       })}

src/plugins/query_enhancements/public/query_assist/components/query_assist_button.tsx

@@ -32,7 +32,7 @@ export const QueryAssistButton: React.FC<QueryAssistButtonProps> = (props) => {
         iconType={
           !props.dependencies.isCollapsed && !isQueryAssistCollapsed ? expandIcon : collapsedIcon
         }
-        aria-label={i18n.translate('queryEnhancements.queryAssist.button.ariaLable', {
+        aria-label={i18n.translate('queryEnhancements.queryAssist.button.ariaLabel', {
           defaultMessage: `Query Assist Toggle`,
         })}
         onClick={onClick}