add search bar extensions

Signed-off-by: Joshua Li <joshuali925@gmail.com>

src/plugins/data/public/index.ts

@@ -527,3 +527,6 @@ export {
   DataSourceGroup,
   DataSourceOption,
 } from './data_sources/datasource_selector';
+
+export { SuggestionsComponent } from './ui';
+export { PersistedLog } from './query';

src/plugins/data/public/plugin.ts

@@ -234,7 +234,7 @@ export class DataPublicPlugin
       },
     ]);
 
-    const dataServices = {
+    const dataServices: Omit<DataPublicPluginStart, 'ui'> = {
       actions: {
         createFiltersFromValueClickAction,
         createFiltersFromRangeSelectAction,

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

@@ -57,6 +57,7 @@ export interface QueryEditorProps {
   size?: SuggestionsListSize;
   className?: string;
   isInvalid?: boolean;
+  queryEditorRef: React.RefObject<HTMLDivElement>;
 }
 
 interface Props extends QueryEditorProps {
@@ -514,24 +515,26 @@ export default class QueryEditorUI extends Component<Props, State> {
               </EuiFlexGroup>
             </EuiFlexItem>
             <EuiFlexItem grow={true}>
-              <CodeEditor
-                height={70}
-                languageId="markdown"
-                value={this.getQueryString()}
-                onChange={() => {}}
-                options={{
-                  lineNumbers: 'on',
-                  lineHeight: 20,
-                  fontSize: 12,
-                  fontFamily: 'Roboto Mono',
-                  minimap: {
-                    enabled: false,
-                  },
-                  scrollBeyondLastLine: false,
-                  wordWrap: 'on',
-                  wrappingIndent: 'indent',
-                }}
-              />
+              <div ref={this.props.queryEditorRef}>
+                <CodeEditor
+                  height={70}
+                  languageId="markdown"
+                  value={this.getQueryString()}
+                  onChange={() => {}}
+                  options={{
+                    lineNumbers: 'on',
+                    lineHeight: 20,
+                    fontSize: 12,
+                    fontFamily: 'Roboto Mono',
+                    minimap: {
+                      enabled: false,
+                    },
+                    scrollBeyondLastLine: false,
+                    wordWrap: 'on',
+                    wrappingIndent: 'indent',
+                  }}
+                />
+              </div>
             </EuiFlexItem>
           </EuiFlexGroup>
         )}

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

@@ -58,6 +58,7 @@ export interface QueryEditorTopRowProps {
   isDirty: boolean;
   timeHistory?: TimeHistoryContract;
   indicateNoData?: boolean;
+  queryEditorRef: React.RefObject<HTMLDivElement>;
 }
 
 // Needed for React.lazy
@@ -238,6 +239,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
           getQueryStringInitialValue={getQueryStringInitialValue}
           persistedLog={persistedLog}
           dataTestSubj={props.dataTestSubj}
+          queryEditorRef={props.queryEditorRef}
         />
       </EuiFlexItem>
     );

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

@@ -28,26 +28,24 @@
  * under the License.
  */
 
-import { compact } from 'lodash';
 import { InjectedIntl, injectI18n } from '@osd/i18n/react';
 import classNames from 'classnames';
+import { compact, get, isEqual } from 'lodash';
 import React, { Component } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
-import { get, isEqual } from 'lodash';
-
 import {
-  withOpenSearchDashboards,
   OpenSearchDashboardsReactContextValue,
+  withOpenSearchDashboards,
 } from '../../../../opensearch_dashboards_react/public';
-
-import QueryBarTopRow from '../query_string_input/query_bar_top_row';
-import QueryEditorTopRow from '../query_editor/query_editor_top_row';
-import { SavedQueryAttributes, TimeHistoryContract, SavedQuery } from '../../query';
+import { Filter, IIndexPattern, Query, TimeRange } from '../../../common';
+import { SavedQuery, SavedQueryAttributes, TimeHistoryContract } from '../../query';
 import { IDataPluginServices } from '../../types';
-import { TimeRange, Query, Filter, IIndexPattern } from '../../../common';
 import { FilterBar } from '../filter_bar/filter_bar';
+import QueryEditorTopRow from '../query_editor/query_editor_top_row';
+import QueryBarTopRow from '../query_string_input/query_bar_top_row';
 import { SavedQueryMeta, SaveQueryForm } from '../saved_query_form';
 import { SavedQueryManagementComponent } from '../saved_query_management';
+import { SearchBarExtensions } from '../search_bar_extensions/search_bar_extensions';
 import { QueryEnhancement, Settings } from '../types';
 
 interface SearchBarInjectedDeps {
@@ -125,6 +123,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
 
   private services = this.props.opensearchDashboards.services;
   private savedQueryService = this.services.data.query.savedQueries;
+  public queryEditorRef = React.createRef<HTMLDivElement>();
   public filterBarRef: Element | null = null;
   public filterBarWrapperRef: Element | null = null;
 
@@ -239,6 +238,15 @@ class SearchBarUI extends Component<SearchBarProps, State> {
     );
   }
 
+  private shouldRenderExtensions() {
+    return (
+      this.props.isEnhancementsEnabled &&
+      (!!this.props.queryEnhancements?.get(this.state.query?.language?.toUpperCase()!)?.searchBar
+        ?.extensions?.length ??
+        false)
+    );
+  }
+
   /*
    * This Function is here to show the toggle in saved query form
    * in case you the date range (from/to)
@@ -511,13 +519,29 @@ class SearchBarUI extends Component<SearchBarProps, State> {
           filterBar={filterBar}
           dataTestSubj={this.props.dataTestSubj}
           indicateNoData={this.props.indicateNoData}
+          queryEditorRef={this.queryEditorRef}
+        />
+      );
+    }
+
+    let searchBarExtensions;
+    if (this.shouldRenderExtensions() && this.queryEditorRef.current) {
+      searchBarExtensions = (
+        <SearchBarExtensions
+          configs={
+            this.props.queryEnhancements?.get(this.state.query?.language?.toUpperCase()!)?.searchBar
+              ?.extensions
+          }
+          dependencies={{ indexPatterns: this.props.indexPatterns }}
+          portalInsert={{ sibling: this.queryEditorRef.current, position: 'before' }}
         />
       );
     }
 
     return (
       <div className="globalQueryBar" data-test-subj="globalQueryBar">
         {queryBar}
+        {searchBarExtensions}
         {queryEditor}
         {!!!this.props.isEnhancementsEnabled && filterBar}
 

src/plugins/data/public/ui/search_bar_extensions/search_bar_extension.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiErrorBoundary, EuiPortal } from '@elastic/eui';
+import { EuiPortalProps } from '@opensearch-project/oui';
+import React, { useEffect, useMemo, useState } from 'react';
+import { IIndexPattern } from '../../../common';
+
+interface SearchBarExtensionProps {
+  config: SearchBarExtensionConfig;
+  dependencies: SearchBarExtensionDependencies;
+  portalInsert: EuiPortalProps['insert'];
+}
+
+export interface SearchBarExtensionDependencies {
+  /**
+   * Currently selected index patterns.
+   */
+  indexPatterns?: IIndexPattern[];
+}
+
+export interface SearchBarExtensionConfig {
+  /**
+   * The id for the search bar extension.
+   */
+  id: string;
+  /**
+   * Lower order indicates higher position on UI.
+   */
+  order: number;
+  /**
+   * A function that determines if the search bar extension is enabled and should be rendered on UI.
+   * @returns whether the extension is enabled.
+   */
+  isEnabled: () => Promise<boolean>;
+  /**
+   * A function that returns the mount point for the search bar extension.
+   * @param dependencies - The dependencies required for the extension.
+   * @returns The mount point for the search bar extension.
+   */
+  getComponent: (dependencies: SearchBarExtensionDependencies) => React.ReactElement;
+}
+
+export const SearchBarExtension: React.FC<SearchBarExtensionProps> = (props) => {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  const component = useMemo(() => props.config.getComponent(props.dependencies), [
+    props.config,
+    props.dependencies,
+  ]);
+
+  useEffect(() => {
+    props.config.isEnabled().then(setIsEnabled);
+  }, [props.dependencies, props.config]);
+
+  if (!isEnabled) return null;
+
+  return (
+    <EuiPortal insert={props.portalInsert}>
+      <EuiErrorBoundary>{component}</EuiErrorBoundary>
+    </EuiPortal>
+  );
+};

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

@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiPortalProps } from '@elastic/eui';
+import React from 'react';
+import {
+  SearchBarExtension,
+  SearchBarExtensionConfig,
+  SearchBarExtensionDependencies,
+} from './search_bar_extension';
+
+interface SearchBarExtensionsProps {
+  configs?: SearchBarExtensionConfig[];
+  dependencies: SearchBarExtensionDependencies;
+  portalInsert: EuiPortalProps['insert'];
+}
+
+export const SearchBarExtensions: React.FC<SearchBarExtensionsProps> = (props) => {
+  if (!props.configs) return null;
+
+  const configs = props.configs
+    .sort((a, b) => a.order - b.order)
+    .reduce((acc, config) => {
+      if (!acc.some((item) => item.id === config.id)) {
+        acc.push(config);
+      }
+      // TODO inform user of duplicates?
+      return acc;
+    }, [] as SearchBarExtensionConfig[]);
+
+  return (
+    <>
+      {configs.map((config) => (
+        <SearchBarExtension
+          key={config.id}
+          config={config}
+          dependencies={props.dependencies}
+          portalInsert={props.portalInsert}
+        />
+      ))}
+    </>
+  );
+};

src/plugins/data/public/ui/types.ts

@@ -7,6 +7,7 @@ import { SearchInterceptor } from '../search';
 import { IndexPatternSelectProps } from './index_pattern_select';
 import { StatefulSearchBarProps } from './search_bar';
 import { Settings } from './settings';
+import { SearchBarExtensionConfig } from './search_bar_extensions/search_bar_extension';
 
 export * from './settings';
 
@@ -30,6 +31,7 @@ export interface QueryEnhancement {
       initialFrom?: string;
       initialTo?: string;
     };
+    extensions?: SearchBarExtensionConfig[];
   };
   fields?: {
     filterable?: boolean;