address comments for PR 6894

Signed-off-by: Joshua Li <[email protected]>

plugins-extra/query_enhancements/public/plugin.tsx

@@ -4,11 +4,12 @@ import { IStorageWrapper, Storage } from '../../../src/plugins/opensearch_dashbo
 import { createQueryAssistExtension } from './query_assist';
 import { PPLQlSearchInterceptor } from './search/ppl_search_interceptor';
 import { SQLQlSearchInterceptor } from './search/sql_search_interceptor';
-import { setStorage } from './services';
+import { setData, setStorage } from './services';
 import {
   QueryEnhancementsPluginSetup,
   QueryEnhancementsPluginSetupDependencies,
   QueryEnhancementsPluginStart,
+  QueryEnhancementsPluginStartDependencies,
 } from './types';
 
 export class QueryEnhancementsPlugin
@@ -23,8 +24,6 @@ export class QueryEnhancementsPlugin
     core: CoreSetup,
     { data }: QueryEnhancementsPluginSetupDependencies
   ): QueryEnhancementsPluginSetup {
-    setStorage(this.storage);
-
     const pplSearchInterceptor = new PPLQlSearchInterceptor({
       toasts: core.notifications.toasts,
       http: core.http,
@@ -86,7 +85,12 @@ export class QueryEnhancementsPlugin
     return {};
   }
 
-  public start(core: CoreStart): QueryEnhancementsPluginStart {
+  public start(
+    core: CoreStart,
+    deps: QueryEnhancementsPluginStartDependencies
+  ): QueryEnhancementsPluginStart {
+    setStorage(this.storage);
+    setData(deps.data);
     return {};
   }
 

plugins-extra/query_enhancements/public/query_assist/components/query_assist_input.tsx

@@ -1,11 +1,8 @@
 import { EuiFieldText, EuiIcon, EuiOutsideClickDetector, EuiPortal } from '@elastic/eui';
 import React, { useMemo, useState } from 'react';
-import {
-  PersistedLog,
-  QuerySuggestionTypes,
-  SuggestionsComponent,
-} from '../../../../../src/plugins/data/public';
+import { PersistedLog, QuerySuggestionTypes } from '../../../../../src/plugins/data/public';
 import assistantLogo from '../../assets/query_assist_logo.svg';
+import { getData } from '../../services';
 
 interface QueryAssistInputProps {
   inputRef: React.RefObject<HTMLInputElement>;
@@ -16,6 +13,9 @@ interface QueryAssistInputProps {
 }
 
 export const QueryAssistInput: React.FC<QueryAssistInputProps> = (props) => {
+  const {
+    ui: { SuggestionsComponent },
+  } = getData();
   const [isSuggestionsVisible, setIsSuggestionsVisible] = useState(false);
   const [suggestionIndex, setSuggestionIndex] = useState<number | null>(null);
   const [value, setValue] = useState(props.initialValue ?? '');

plugins-extra/query_enhancements/public/services.ts

@@ -1,4 +1,6 @@
 import { createGetterSetter } from '../../../src/plugins/opensearch_dashboards_utils/common';
 import { IStorageWrapper } from '../../../src/plugins/opensearch_dashboards_utils/public';
+import { DataPublicPluginStart } from '../../../src/plugins/data/public';
 
 export const [getStorage, setStorage] = createGetterSetter<IStorageWrapper>('storage');
+export const [getData, setData] = createGetterSetter<DataPublicPluginStart>('data');

src/plugins/data/public/index.ts

@@ -528,5 +528,4 @@ export {
   DataSourceOption,
 } from './data_sources/datasource_selector';
 
-export { SuggestionsComponent } from './ui';
 export { PersistedLog } from './query';

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

@@ -54,7 +54,7 @@ export interface QueryEditorProps {
   size?: SuggestionsListSize;
   className?: string;
   isInvalid?: boolean;
-  queryEditorRef: React.RefObject<HTMLDivElement>;
+  queryEditorHeaderRef: React.RefObject<HTMLDivElement>;
 }
 
 interface Props extends QueryEditorProps {
@@ -519,7 +519,7 @@ export default class QueryEditorUI extends Component<Props, State> {
               </EuiFlexGroup>
             </EuiFlexItem>
             <EuiFlexItem onClick={this.onClickInput} grow={true}>
-              <div ref={this.props.queryEditorRef} />
+              <div ref={this.props.queryEditorHeaderRef} />
               <CodeEditor
                 height={70}
                 languageId="xjson"

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

@@ -4,7 +4,7 @@
  */
 import dateMath from '@elastic/datemath';
 import classNames from 'classnames';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 import {
   EuiFlexGroup,
@@ -26,6 +26,7 @@ import { UI_SETTINGS } from '../../../common';
 import { PersistedLog, fromUser, getQueryLog } from '../../query';
 import { NoDataPopover } from './no_data_popover';
 import { QueryEnhancement, Settings } from '../types';
+import { SearchBarExtensions } from '../search_bar_extensions';
 
 const QueryEditor = withOpenSearchDashboards(QueryEditortUI);
 
@@ -58,14 +59,14 @@ export interface QueryEditorTopRowProps {
   isDirty: boolean;
   timeHistory?: TimeHistoryContract;
   indicateNoData?: boolean;
-  queryEditorRef: React.RefObject<HTMLDivElement>;
 }
 
 // Needed for React.lazy
 // eslint-disable-next-line import/no-default-export
 export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
   const [isDateRangeInvalid, setIsDateRangeInvalid] = useState(false);
   const [isQueryEditorFocused, setIsQueryEditorFocused] = useState(false);
+  const queryEditorHeaderRef = useRef<HTMLDivElement | null>(null);
 
   const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
   const { uiSettings, storage, appName } = opensearchDashboards.services;
@@ -239,12 +240,23 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
           getQueryStringInitialValue={getQueryStringInitialValue}
           persistedLog={persistedLog}
           dataTestSubj={props.dataTestSubj}
-          queryEditorRef={props.queryEditorRef}
+          queryEditorHeaderRef={queryEditorHeaderRef}
         />
       </EuiFlexItem>
     );
   }
 
+  function renderSearchBarExtensions() {
+    if (!shouldRenderSearchBarExtensions() || !queryEditorHeaderRef.current) return;
+    return (
+      <SearchBarExtensions
+        configs={props.queryEnhancements?.get(queryLanguage!)?.searchBar?.extensions}
+        dependencies={{ indexPatterns: props.indexPatterns }}
+        portalInsert={{ sibling: queryEditorHeaderRef.current, position: 'before' }}
+      />
+    );
+  }
+
   function renderSharingMetaFields() {
     const { from, to } = getDateRange();
     const dateRangePretty = prettyDuration(
@@ -274,6 +286,12 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
     return Boolean(props.showQueryEditor && props.indexPatterns && props.query && storage);
   }
 
+  function shouldRenderSearchBarExtensions(): boolean {
+    return Boolean(
+      queryLanguage && props.queryEnhancements?.get(queryLanguage)?.searchBar?.extensions?.length
+    );
+  }
+
   function renderUpdateButton() {
     const button = props.customSubmitButton ? (
       React.cloneElement(props.customSubmitButton, { onClick: onClickSubmitButton })
@@ -366,6 +384,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
       direction="column"
       justifyContent="flexEnd"
     >
+      {renderSearchBarExtensions()}
       {renderQueryEditor()}
       <EuiFlexItem>
         <EuiFlexGroup responsive={false} gutterSize="none">

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

@@ -45,7 +45,6 @@ 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';
 import { QueryEnhancement, Settings } from '../types';
 
 interface SearchBarInjectedDeps {
@@ -123,12 +122,6 @@ class SearchBarUI extends Component<SearchBarProps, State> {
 
   private services = this.props.opensearchDashboards.services;
   private savedQueryService = this.services.data.query.savedQueries;
-  /**
-   * queryEditorRef can't be bound to the actual editor
-   * https://github.com/react-monaco-editor/react-monaco-editor/blob/v0.27.0/src/editor.js#L113,
-   * currently it is an element above.
-   */
-  public queryEditorRef = React.createRef<HTMLDivElement>();
   public filterBarRef: Element | null = null;
   public filterBarWrapperRef: Element | null = null;
 
@@ -243,15 +236,6 @@ class SearchBarUI extends Component<SearchBarProps, State> {
     );
   }
 
-  private shouldRenderExtensions() {
-    return (
-      this.props.isEnhancementsEnabled &&
-      (!!this.props.queryEnhancements?.get(this.state.query?.language!)?.searchBar?.extensions
-        ?.length ??
-        false)
-    );
-  }
-
   /*
    * This Function is here to show the toggle in saved query form
    * in case you the date range (from/to)
@@ -525,20 +509,6 @@ 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!)?.searchBar?.extensions
-          }
-          dependencies={{ indexPatterns: this.props.indexPatterns }}
-          portalInsert={{ sibling: this.queryEditorRef.current, position: 'before' }}
         />
       );
     }
@@ -548,7 +518,6 @@ class SearchBarUI extends Component<SearchBarProps, State> {
     return (
       <div className={className} data-test-subj="globalQueryBar">
         {queryBar}
-        {searchBarExtensions}
         {queryEditor}
         {!!!this.props.isEnhancementsEnabled && filterBar}
 

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

@@ -18,7 +18,7 @@ export interface SearchBarExtensionDependencies {
   /**
    * Currently selected index patterns.
    */
-  indexPatterns?: IIndexPattern[];
+  indexPatterns?: Array<IIndexPattern | string>;
 }
 
 export interface SearchBarExtensionConfig {

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

@@ -8,7 +8,8 @@ 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';
+import { SearchBarExtensionConfig } from './search_bar_extensions';
+import { SuggestionsComponentProps } from './typeahead/suggestions_component';
 
 export * from './settings';
 
@@ -64,6 +65,7 @@ export interface IUiStart {
   queryEnhancements: Map<string, QueryEnhancement>;
   IndexPatternSelect: React.ComponentType<IndexPatternSelectProps>;
   SearchBar: React.ComponentType<StatefulSearchBarProps>;
+  SuggestionsComponent: React.ComponentType<SuggestionsComponentProps>;
   Settings: Settings;
   containerRef: HTMLDivElement | null;
   container$: BehaviorSubject<HTMLDivElement | null>;

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

@@ -13,6 +13,7 @@ import { createSearchBar } from './search_bar/create_search_bar';
 import { createSettings } from './settings';
 import { DataPublicPluginStart } from '../types';
 import { IStorageWrapper } from '../../../opensearch_dashboards_utils/public';
+import { SuggestionsComponent } from './typeahead';
 
 /** @internal */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -71,6 +72,7 @@ export class UiService implements Plugin<IUiSetup, IUiStart> {
       queryEnhancements: this.queryEnhancements,
       IndexPatternSelect: createIndexPatternSelect(core.savedObjects.client),
       SearchBar,
+      SuggestionsComponent,
       Settings,
       containerRef: this.containerRef,
       container$: this.container$,