From 45f47534ea09fd478138140785106d5f17833d9e Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Tue, 6 Feb 2024 18:20:19 -0800 Subject: [PATCH] Add modal for DQL language (#1420) (#1421) * add modal for DQL * group name renaming * fix linting error * update snapshot --------- (cherry picked from commit 29e1b42df8628c102318000ea121d66c5d8b936f) Signed-off-by: Eric Signed-off-by: github-actions[bot] Co-authored-by: github-actions[bot] --- .../__snapshots__/search.test.tsx.snap | 357 +++++------------- public/components/common/search/search.tsx | 99 ++++- .../components/common/search/sql_search.tsx | 5 - .../datasources/datasources_selection.tsx | 6 + 4 files changed, 185 insertions(+), 282 deletions(-) diff --git a/public/components/common/search/__tests__/__snapshots__/search.test.tsx.snap b/public/components/common/search/__tests__/__snapshots__/search.test.tsx.snap index 67dbe9c1e0..46cdaf8704 100644 --- a/public/components/common/search/__tests__/__snapshots__/search.test.tsx.snap +++ b/public/components/common/search/__tests__/__snapshots__/search.test.tsx.snap @@ -46,274 +46,117 @@ exports[`Explorer Search component renders basic component 1`] = `
- - PPL - , - "value": "PPL", - }, - Object { - "inputDisplay": - DQL - , - "value": "DQL", - }, - ] + + PPL + } - valueOfSelected="PPL" + closePopover={[Function]} + display="inlineBlock" + hasArrow={true} + id="smallContextMenuExample" + isOpen={false} + ownFocus={true} + panelPaddingSize="none" > - - PPL - , - "value": "PPL", - }, - Object { - "inputDisplay": - DQL - , - "value": "DQL", - }, - ] - } - value="PPL" - /> - } - isOpen={false} - panelPaddingSize="none" +
- - [Function] - - } - buttonRef={[Function]} - className="euiInputPopover euiSuperSelect" - closePopover={[Function]} - display="block" - hasArrow={true} - isOpen={false} - ownFocus={false} - panelPaddingSize="none" - panelRef={[Function]} +
- -
-
- -
- - PPL - , - "value": "PPL", - }, - Object { - "inputDisplay": - DQL - , - "value": "DQL", - }, - ] - } - value="PPL" + + - - -
-
- - - - PPL - , - } - } - > - - PPL - - } - > - Select an option: - -
- PPL -
- - , is selected - - - - - - -
- - - - - -
- -
-
- - -
- -
-
- - - - + + + + + + PPL + + + + + + +
+
+
{ const sqlService = new SQLService(coreRefs.http); const { application } = coreRefs; const [nlqInput, setNlqInput] = useState(''); + const [isModalVisible, setIsModalVisible] = useState(false); + const closeModal = () => setIsModalVisible(false); + const showModal = () => setIsModalVisible(true); const showQueryArea = !appLogEvents && coreRefs.queryAssistEnabled; @@ -203,7 +206,7 @@ export const Search = (props: any) => { const handleQueryLanguageChange = (lang: string) => { if (lang === QUERY_LANGUAGE.DQL) { - application!.navigateToUrl('../app/data-explorer/discover'); + showModal(); return; } dispatch( @@ -220,9 +223,19 @@ export const Search = (props: any) => { setLanguagePopoverOpen(false); }; - const languageOptions: Array> = [ - { value: QUERY_LANGUAGE.PPL, inputDisplay: PPL }, - { value: QUERY_LANGUAGE.DQL, inputDisplay: DQL }, + const languagePopOverItems = [ + handleQueryLanguageChange(QUERY_LANGUAGE.PPL)} + > + PPL + , + handleQueryLanguageChange(QUERY_LANGUAGE.DQL)} + > + DQL - Opens in Discover + , ]; const onQuerySearch = () => { @@ -290,6 +303,50 @@ export const Search = (props: any) => { : undefined; const loading = indicesLoading || indexPatternsLoading; + const onLanguagePopoverClick = () => { + setLanguagePopoverOpen(!_isLanguagePopoverOpen); + }; + + const languagePopOverButton = ( + + {queryLang} + + ); + + const redirectToDiscover = () => { + application!.navigateToUrl('../app/data-explorer/discover'); + }; + + let redirectionModal = null; + if (isModalVisible) { + redirectionModal = ( + + + +

Open in Discover

+ + + + + The OpenSearch Dashboards Query Language (DQL) offers a simplified query syntax and + support for scripted fields. Selecting this option will open the Discover application. + + + + Cancel + { + redirectToDiscover(); + }} + fill + > + Open in Discover + + + + ); + } + return (
@@ -307,14 +364,16 @@ export const Search = (props: any) => { {!appLogEvents && ( <> - { - handleQueryLanguageChange(lang); - setQueryLang(lang); - }} - /> + + + { size="l" onClick={() => showFlyout()} color="#159D8D" - // onClickAriaLabel={'pplLinkShowFlyout'} /> {coreRefs.queryAssistEnabled && ( @@ -535,6 +593,7 @@ export const Search = (props: any) => { )} + {redirectionModal} {flyout}
); diff --git a/public/components/common/search/sql_search.tsx b/public/components/common/search/sql_search.tsx index a707463648..1d53e6af64 100644 --- a/public/components/common/search/sql_search.tsx +++ b/public/components/common/search/sql_search.tsx @@ -93,7 +93,6 @@ export const DirectSearch = (props: any) => { const [isLanguagePopoverOpen, setLanguagePopoverOpen] = useState(false); const [queryLang, setQueryLang] = useState(explorerSearchMetadata.lang || QUERY_LANGUAGE.SQL); const sqlService = new SQLService(coreRefs.http); - const { application } = coreRefs; const { data: pollingResult, @@ -140,10 +139,6 @@ export const DirectSearch = (props: any) => { ); const handleQueryLanguageChange = (lang: QUERY_LANGUAGE) => { - if (lang === 'DQL') { - application!.navigateToUrl('../app/data-explorer/discover'); - return; - } dispatch(updateSearchMetaData({ tabId, data: { lang } })); setQueryLang(lang); closeLanguagePopover(); diff --git a/public/components/event_analytics/explorer/datasources/datasources_selection.tsx b/public/components/event_analytics/explorer/datasources/datasources_selection.tsx index 122e7cc7f8..1460a030e4 100644 --- a/public/components/event_analytics/explorer/datasources/datasources_selection.tsx +++ b/public/components/event_analytics/explorer/datasources/datasources_selection.tsx @@ -50,6 +50,8 @@ import { SELECTED_TIMESTAMP, } from '../../../../../common/constants/explorer'; +const DATA_SOURCE_SELECTOR_CONFIGS = { customGroupTitleExtension: '' }; + const getDataSourceState = (selectedSourceState: SelectedDataSource[]) => { if (selectedSourceState.length === 0) return []; return [ @@ -241,6 +243,9 @@ export const DataSourceSelection = ({ tabId }: { tabId: string }) => { if (dsOption.label === DEFAULT_DATA_SOURCE_TYPE_NAME) { dsOption.label = DEFAULT_DATA_SOURCE_OBSERVABILITY_DISPLAY_NAME; } + if (dsOption.label === 'Index patterns') { + dsOption.label = 'Data connections'; + } return dsOption; }); }, [dataSourceOptionList]); @@ -255,6 +260,7 @@ export const DataSourceSelection = ({ tabId }: { tabId: string }) => { onDataSourceSelect={handleSourceChange} onFetchDataSetError={handleDataSetFetchError} singleSelection={{ asPlainText: true }} + dataSourceSelectorConfigs={DATA_SOURCE_SELECTOR_CONFIGS} /> ); };