add modal for DQL

Signed-off-by: Eric <[email protected]>
mengweieric · Feb 6, 2024 · 899e63c · 899e63c
1 parent 7cf0519
commit 899e63c
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 20 deletions.
diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx
@@ -16,10 +16,14 @@ import {
   EuiIcon,
   EuiPopover,
   EuiPopoverFooter,
-  EuiSuperSelect,
-  EuiSuperSelectOption,
   EuiText,
   EuiToolTip,
+  EuiContextMenuItem,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalBody,
+  EuiModalHeaderTitle,
+  EuiModalFooter,
 } from '@elastic/eui';
 import { isEqual } from 'lodash';
 import React, { useEffect, useState } from 'react';
@@ -144,6 +148,9 @@ export const Search = (props: any) => {
   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;
 
@@ -207,7 +214,7 @@ export const Search = (props: any) => {
 
   const handleQueryLanguageChange = (lang: string) => {
     if (lang === QUERY_LANGUAGE.DQL) {
-      application!.navigateToUrl('../app/data-explorer/discover');
+      showModal();
       return;
     }
     dispatch(
@@ -224,9 +231,19 @@ export const Search = (props: any) => {
     setLanguagePopoverOpen(false);
   };
 
-  const languageOptions: Array<EuiSuperSelectOption<QUERY_LANGUAGE>> = [
-    { value: QUERY_LANGUAGE.PPL, inputDisplay: <EuiText>PPL</EuiText> },
-    { value: QUERY_LANGUAGE.DQL, inputDisplay: <EuiText>DQL</EuiText> },
+  const languagePopOverItems = [
+    <EuiContextMenuItem
+      key={QUERY_LANGUAGE.SQL}
+      onClick={() => handleQueryLanguageChange(QUERY_LANGUAGE.PPL)}
+    >
+      PPL
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key={QUERY_LANGUAGE.PPL}
+      onClick={() => handleQueryLanguageChange(QUERY_LANGUAGE.DQL)}
+    >
+      DQL - Opens in Discover
+    </EuiContextMenuItem>,
   ];
 
   const onQuerySearch = () => {
@@ -294,6 +311,50 @@ export const Search = (props: any) => {
       : undefined;
   const loading = indicesLoading || indexPatternsLoading;
 
+  const onLanguagePopoverClick = () => {
+    setLanguagePopoverOpen(!_isLanguagePopoverOpen);
+  };
+
+  const languagePopOverButton = (
+    <EuiButton iconType="arrowDown" iconSide="right" onClick={onLanguagePopoverClick} color="text">
+      {queryLang}
+    </EuiButton>
+  );
+
+  const redirectToDiscover = () => {
+    application!.navigateToUrl('../app/data-explorer/discover');
+  };
+
+  let redirectionModal = null;
+  if (isModalVisible) {
+    redirectionModal = (
+      <EuiModal onClose={closeModal}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>
+            <h1>Open in Discover</h1>
+          </EuiModalHeaderTitle>
+        </EuiModalHeader>
+        <EuiModalBody>
+          <EuiText>
+            The OpenSearch Dashboards Query Language (DQL) offers a simplified query syntax and
+            support for scripted fields. Selecting this option will open the Discover application.
+          </EuiText>
+        </EuiModalBody>
+        <EuiModalFooter>
+          <EuiButtonEmpty onClick={closeModal}>Cancel</EuiButtonEmpty>
+          <EuiButton
+            onClick={() => {
+              redirectToDiscover();
+            }}
+            fill
+          >
+            Open in Discover
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    );
+  }
+
   return (
     <div className="globalQueryBar">
       <EuiFlexGroup direction="column" gutterSize="s">
@@ -311,14 +372,16 @@ export const Search = (props: any) => {
             {!appLogEvents && (
               <>
                 <EuiFlexItem key="lang-selector" className="search-area lang-selector" grow={false}>
-                  <EuiSuperSelect
-                    options={languageOptions}
-                    valueOfSelected={queryLang}
-                    onChange={(lang: QUERY_LANGUAGE) => {
-                      handleQueryLanguageChange(lang);
-                      setQueryLang(lang);
-                    }}
-                  />
+                  <EuiPopover
+                    id="smallContextMenuExample"
+                    button={languagePopOverButton}
+                    isOpen={_isLanguagePopoverOpen}
+                    closePopover={closeLanguagePopover}
+                    panelPaddingSize="none"
+                    anchorPosition="downLeft"
+                  >
+                    <EuiContextMenuPanel size="m" items={languagePopOverItems} />
+                  </EuiPopover>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   <EuiIcon
@@ -329,7 +392,6 @@ export const Search = (props: any) => {
                     size="l"
                     onClick={() => showFlyout()}
                     color="#159D8D"
-                    // onClickAriaLabel={'pplLinkShowFlyout'}
                   />
                 </EuiFlexItem>
                 {coreRefs.queryAssistEnabled && (
@@ -539,6 +601,7 @@ export const Search = (props: any) => {
           </>
         )}
       </EuiFlexGroup>
+      {redirectionModal}
       {flyout}
     </div>
   );

diff --git 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
@@ -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 [
@@ -255,6 +257,7 @@ export const DataSourceSelection = ({ tabId }: { tabId: string }) => {
       onDataSourceSelect={handleSourceChange}
       onFetchDataSetError={handleDataSetFetchError}
       singleSelection={{ asPlainText: true }}
+      dataSourceSelectorConfigs={DATA_SOURCE_SELECTOR_CONFIGS}
     />
   );
 };