[Discover-next] add query assist to query enhancements plugin (opense…

…arch-project#6895) it adds query assist specific logic in query enhancements plugin to show a UI above the PPL search bar if user has configured PPL agent. Issues Resolved: opensearch-project#6820 * add query assist to query enhancements Signed-off-by: Joshua Li <[email protected]> * align language to uppercase Signed-off-by: Joshua Li <[email protected]> * pick PR 6167 Signed-off-by: Joshua Li <[email protected]> * use useState hooks for query assist There is a bug in data explorer `AppContainer` where memorized `DiscoverCanvas` gets unmounted after `setQuery`. PR 6167 works around it by memorizing `AppContainer`. As query assist is no longer being unmounted, we can use proper hooks to persist state now. Signed-off-by: Joshua Li <[email protected]> * Revert "pick PR 6167" This reverts commit acb0d41. Wait for official 6167 to merge to avoid conflict Signed-off-by: Joshua Li <[email protected]> * address comments for PR 6894 Signed-off-by: Joshua Li <[email protected]> --------- Signed-off-by: Joshua Li <[email protected]> (cherry picked from commit 016e0f2)
joshuali925 · Jun 14, 2024 · d90734a · d90734a
1 parent 71bba11
commit d90734a
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 45 deletions.
diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts
@@ -527,5 +527,4 @@ export {
   DataSourceOption,
 } from './data_sources/datasource_selector';
 
-export { SuggestionsComponent } from './ui';
 export { PersistedLog } from './query';
diff --git a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx
@@ -2,7 +2,6 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
 import dateMath from '@elastic/datemath';
 import {
   EuiFieldText,
@@ -30,6 +29,7 @@ import {
 } from '../../../../opensearch_dashboards_react/public';
 import { UI_SETTINGS } from '../../../common';
 import { fromUser, getQueryLog, PersistedLog } from '../../query';
+import { SearchBarExtensions } from '../search_bar_extensions';
 import { Settings } from '../types';
 import { NoDataPopover } from './no_data_popover';
 import QueryEditorUI from './query_editor';
@@ -64,7 +64,6 @@ export interface QueryEditorTopRowProps {
   isDirty: boolean;
   timeHistory?: TimeHistoryContract;
   indicateNoData?: boolean;
-  queryEditorRef: React.RefObject<HTMLDivElement>;
 }
 
 // Needed for React.lazy
@@ -251,6 +250,17 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
     );
   }
 
+  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(
@@ -282,6 +292,12 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
     );
   }
 
+  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 })
@@ -374,6 +390,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
       direction="column"
       justifyContent="flexEnd"
     >
+      {renderSearchBarExtensions()}
       {renderQueryEditor()}
       <EuiFlexItem>
         <EuiFlexGroup responsive={false} gutterSize="none">

diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx
@@ -37,23 +37,15 @@ import {
   OpenSearchDashboardsReactContextValue,
   withOpenSearchDashboards,
 } from '../../../../opensearch_dashboards_react/public';
-
-import QueryBarTopRow from '../query_string_input/query_bar_top_row';
-import { SavedQueryAttributes, TimeHistoryContract, SavedQuery } from '../../query';
-import { IDataPluginServices } from '../../types';
-import { TimeRange, Query, Filter, IIndexPattern, UI_SETTINGS } from '../../../common';
-import { Filter, IIndexPattern, Query, TimeRange } from '../../../common';
+import { Filter, IIndexPattern, Query, TimeRange, UI_SETTINGS } from '../../../common';
 import { SavedQuery, SavedQueryAttributes, TimeHistoryContract } from '../../query';
 import { IDataPluginServices } from '../../types';
 import { FilterBar } from '../filter_bar/filter_bar';
-import QueryEditorTopRow from '../query_editor/query_editor_top_row';
+import { QueryEditorTopRow } from '../query_editor';
 import QueryBarTopRow from '../query_string_input/query_bar_top_row';
 import { SavedQueryMeta, SaveQueryForm } from '../saved_query_form';
 import { SavedQueryManagementComponent } from '../saved_query_management';
 import { Settings } from '../types';
-import { QueryEditorTopRow } from '../query_editor';
-import { SearchBarExtensions } from '../search_bar_extensions';
-import { QueryEnhancement, Settings } from '../types';
 
 interface SearchBarInjectedDeps {
   opensearchDashboards: OpenSearchDashboardsReactContextValue<IDataPluginServices>;
@@ -127,12 +119,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;
 
@@ -253,15 +239,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)
@@ -536,20 +513,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' }}
         />
       );
     }
@@ -559,7 +522,6 @@ class SearchBarUI extends Component<SearchBarProps, State> {
     return (
       <div className={className} data-test-subj={className}>
         {queryBar}
-        {searchBarExtensions}
         {queryEditor}
         {!isEnhancementsEnabledOverride && filterBar}
 

diff --git a/src/plugins/data/public/ui/search_bar_extensions/search_bar_extension.tsx b/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 {

diff --git a/src/plugins/data/public/ui/types.ts b/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';
 
@@ -62,6 +63,7 @@ export interface IUiSetup {
 export interface IUiStart {
   IndexPatternSelect: React.ComponentType<IndexPatternSelectProps>;
   SearchBar: React.ComponentType<StatefulSearchBarProps>;
+  SuggestionsComponent: React.ComponentType<SuggestionsComponentProps>;
   Settings: Settings;
   container$: Observable<HTMLDivElement | null>;
 }
diff --git a/src/plugins/data/public/ui/ui_service.ts b/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
@@ -70,6 +71,7 @@ export class UiService implements Plugin<IUiSetup, IUiStart> {
     return {
       IndexPatternSelect: createIndexPatternSelect(core.savedObjects.client),
       SearchBar,
+      SuggestionsComponent,
       Settings,
       container$: this.container$,
     };