From d90734aae7d90cecef2607045bdbfccbd977e3f8 Mon Sep 17 00:00:00 2001 From: Joshua Li Date: Tue, 4 Jun 2024 15:11:58 -0700 Subject: [PATCH] [Discover-next] add query assist to query enhancements plugin (#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: #6820 * add query assist to query enhancements Signed-off-by: Joshua Li * align language to uppercase Signed-off-by: Joshua Li * pick PR 6167 Signed-off-by: Joshua Li * 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 * Revert "pick PR 6167" This reverts commit acb0d41937e30bd76c666a225407743243692d11. Wait for official 6167 to merge to avoid conflict Signed-off-by: Joshua Li * address comments for PR 6894 Signed-off-by: Joshua Li --------- Signed-off-by: Joshua Li (cherry picked from commit 016e0f2f73efd8bb0649151908c67dd7ac09d174) --- src/plugins/data/public/index.ts | 1 - .../ui/query_editor/query_editor_top_row.tsx | 21 +++++++++- .../data/public/ui/search_bar/search_bar.tsx | 42 +------------------ .../search_bar_extension.tsx | 2 +- src/plugins/data/public/ui/types.ts | 4 +- src/plugins/data/public/ui/ui_service.ts | 2 + 6 files changed, 27 insertions(+), 45 deletions(-) diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts index 4a69fd54e0bd..cdd41eb25a4a 100644 --- 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 index 67aec0a80134..2a47e0ef0778 100644 --- 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; } // Needed for React.lazy @@ -251,6 +250,17 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) { ); } + function renderSearchBarExtensions() { + if (!shouldRenderSearchBarExtensions() || !queryEditorHeaderRef.current) return; + return ( + + ); + } + 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()} diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx index d0f9bf00f3da..620a7d633e01 100644 --- 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; @@ -127,12 +119,6 @@ class SearchBarUI extends Component { 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(); public filterBarRef: Element | null = null; public filterBarWrapperRef: Element | null = null; @@ -253,15 +239,6 @@ class SearchBarUI extends Component { ); } - 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 { filterBar={filterBar} dataTestSubj={this.props.dataTestSubj} indicateNoData={this.props.indicateNoData} - queryEditorRef={this.queryEditorRef} - /> - ); - } - - let searchBarExtensions; - if (this.shouldRenderExtensions() && this.queryEditorRef.current) { - searchBarExtensions = ( - ); } @@ -559,7 +522,6 @@ class SearchBarUI extends Component { return (
{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 index e22ed9220dd3..88a3fcdfbb08 100644 --- 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; } export interface SearchBarExtensionConfig { diff --git a/src/plugins/data/public/ui/types.ts b/src/plugins/data/public/ui/types.ts index 3598890fb0f7..105ab3922b52 100644 --- 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; SearchBar: React.ComponentType; + SuggestionsComponent: React.ComponentType; Settings: Settings; container$: Observable; } diff --git a/src/plugins/data/public/ui/ui_service.ts b/src/plugins/data/public/ui/ui_service.ts index 221273d63c72..eb171586c86c 100644 --- 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 { return { IndexPatternSelect: createIndexPatternSelect(core.savedObjects.client), SearchBar, + SuggestionsComponent, Settings, container$: this.container$, };