Move the switcher to the Discover menu

stratoula · Aug 1, 2024 · 1934898 · 1934898
1 parent 0dcc704
commit 1934898
Show file tree

Hide file tree

Showing 14 changed files with 66 additions and 288 deletions.
diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
@@ -75,9 +75,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
   allowQueryCancellation,
   hideTimeFilterInfo,
   hideQueryHistory,
-  isHelpMenuOpen,
   hasOutline,
-  setIsHelpMenuOpen,
 }: TextBasedLanguagesEditorProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const datePickerOpenStatusRef = useRef<boolean>(false);
@@ -490,20 +488,6 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
     [esqlCallbacks]
   );
 
-  const helpMenuPopoverProps = useMemo(() => {
-    if (setIsHelpMenuOpen) {
-      return {
-        isHelpMenuOpen: isHelpMenuOpen ?? false,
-        setIsHelpMenuOpen,
-      };
-    }
-
-    return {
-      isHelpMenuOpen: isLanguagePopoverOpen,
-      setIsHelpMenuOpen: setIsLanguagePopoverOpen,
-    };
-  }, [isHelpMenuOpen, isLanguagePopoverOpen, setIsHelpMenuOpen]);
-
   const onErrorClick = useCallback(({ startLineNumber, startColumn }: MonacoMessage) => {
     if (!editor1.current) {
       return;
@@ -718,8 +702,8 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
         measuredContainerWidth={measuredEditorWidth}
         hideQueryHistory={hideHistoryComponent}
         refetchHistoryItems={refetchHistoryItems}
-        isHelpMenuOpen={helpMenuPopoverProps.isHelpMenuOpen}
-        setIsHelpMenuOpen={helpMenuPopoverProps.setIsHelpMenuOpen}
+        isHelpMenuOpen={isLanguagePopoverOpen}
+        setIsHelpMenuOpen={setIsLanguagePopoverOpen}
       />
       <ResizableButton
         onMouseDownResizeHandler={onMouseDownResizeHandler}

diff --git a/packages/kbn-text-based-editor/src/types.ts b/packages/kbn-text-based-editor/src/types.ts
@@ -22,10 +22,6 @@ export interface TextBasedLanguagesEditorProps {
     query?: AggregateQuery,
     abortController?: AbortController
   ) => Promise<void>;
-  /** inline docs popover status, controlled from outside the editor **/
-  isHelpMenuOpen?: boolean;
-  /** sets the inline docs popover status, controlled from outside the editor **/
-  setIsHelpMenuOpen?: (status: boolean) => void;
   /** If it is true, the editor displays the message @timestamp found
    * The text based queries are relying on adhoc dataviews which
    * can have an @timestamp timefield or nothing

diff --git a/src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.tsx b/src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.tsx
@@ -11,8 +11,11 @@ import type { DataView } from '@kbn/data-views-plugin/public';
 import type { TopNavMenuData } from '@kbn/navigation-plugin/public';
 import { setStateToKbnUrl } from '@kbn/kibana-utils-plugin/public';
 import { omit } from 'lodash';
+import { METRIC_TYPE } from '@kbn/analytics';
+import { getInitialESQLQuery, ENABLE_ESQL } from '@kbn/esql-utils';
 import type { DiscoverAppLocatorParams } from '../../../../../common';
 import { showOpenSearchPanel } from './show_open_search_panel';
+import { DataSourceType } from '../../../../../common/data_sources';
 import { getSharingData, showPublicUrlSwitch } from '../../../../utils/get_sharing_data';
 import { DiscoverServices } from '../../../../build_services';
 import { onSaveSearch } from './on_save_search';
@@ -60,6 +63,54 @@ export const getTopNavLinks = ({
     testId: 'discoverAlertsButton',
   };
 
+  const esqLToggle = {
+    id: 'esql',
+    label: isEsqlMode
+      ? i18n.translate('discover.localMenu.localMenu.switchToClassicTitle', {
+          defaultMessage: 'Switch to classic',
+        })
+      : i18n.translate('discover.localMenu.localMenu.tryESQLTitle', {
+          defaultMessage: 'Try ES|QL',
+        }),
+    emphasize: true,
+    iconType: 'editorRedo',
+    description: isEsqlMode
+      ? i18n.translate('discover.localMenu.localMenu.switchToClassicTitle', {
+          defaultMessage: 'Switch to classic',
+        })
+      : i18n.translate('discover.localMenu.tryESQLDescription', {
+          defaultMessage: 'Try ES|QL',
+        }),
+    fill: false,
+    color: 'text',
+    run: () => {
+      if (dataView) {
+        if (isEsqlMode) {
+          state.appState.update({
+            query: {
+              language: 'kuery',
+              query: '',
+            },
+            dataSource: {
+              type: DataSourceType.DataView,
+              dataViewId: dataView.id ?? '',
+            },
+          });
+        } else {
+          const queryString = getInitialESQLQuery(dataView?.getIndexPattern());
+          state.appState.update({
+            query: { esql: queryString },
+            dataSource: {
+              type: DataSourceType.Esql,
+            },
+          });
+          services.trackUiMetric?.(METRIC_TYPE.CLICK, `esql:try_btn_clicked`);
+        }
+      }
+    },
+    testId: isEsqlMode ? 'switch-to-dataviews' : 'select-text-based-language-btn',
+  };
+
   const newSearch = {
     id: 'new',
     label: i18n.translate('discover.localMenu.localMenu.newSearchTitle', {
@@ -226,6 +277,10 @@ export const getTopNavLinks = ({
   const defaultMenu = topNavCustomization?.defaultMenu;
   const entries = [...(topNavCustomization?.getMenuItems?.() ?? [])];
 
+  if (services.uiSettings.get(ENABLE_ESQL)) {
+    entries.push({ data: esqLToggle, order: 0 });
+  }
+
   if (!defaultMenu?.newItem?.disabled) {
     entries.push({ data: newSearch, order: defaultMenu?.newItem?.order ?? 100 });
   }

diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx
@@ -22,6 +22,8 @@ export interface TopNavMenuData {
   tooltip?: string | (() => string | undefined);
   badge?: EuiBetaBadgeProps;
   emphasize?: boolean;
+  fill?: boolean;
+  color?: string;
   isLoading?: boolean;
   iconType?: string;
   iconSide?: EuiButtonProps['iconSide'];

diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
@@ -8,7 +8,7 @@
 
 import { upperFirst, isFunction } from 'lodash';
 import React, { MouseEvent } from 'react';
-import { EuiToolTip, EuiButton, EuiHeaderLink, EuiBetaBadge } from '@elastic/eui';
+import { EuiToolTip, EuiButton, EuiHeaderLink, EuiBetaBadge, EuiButtonColor } from '@elastic/eui';
 import { TopNavMenuData } from './top_nav_menu_data';
 
 export function TopNavMenuItem(props: TopNavMenuData) {
@@ -48,6 +48,8 @@ export function TopNavMenuItem(props: TopNavMenuData) {
     iconSide: props.iconSide,
     'data-test-subj': props.testId,
     className: props.className,
+    color: (props.color ?? 'primary') as EuiButtonColor,
+    fill: props.fill ?? true,
   };
 
   // If the item specified a href, then override the suppress the onClick
@@ -58,11 +60,11 @@ export function TopNavMenuItem(props: TopNavMenuData) {
       : {};
 
   const btn = props.emphasize ? (
-    <EuiButton size="s" {...commonButtonProps} fill>
+    <EuiButton size="s" {...commonButtonProps}>
       {getButtonContainer()}
     </EuiButton>
   ) : (
-    <EuiHeaderLink size="s" color="primary" {...commonButtonProps} {...overrideProps}>
+    <EuiHeaderLink size="s" {...commonButtonProps} {...overrideProps}>
       {getButtonContainer()}
     </EuiHeaderLink>
   );

diff --git a/src/plugins/unified_search/public/dataview_picker/change_dataview.test.tsx b/src/plugins/unified_search/public/dataview_picker/change_dataview.test.tsx
@@ -14,7 +14,6 @@ import { findTestSubject } from '@elastic/eui/lib/test';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { indexPatternEditorPluginMock as dataViewEditorPluginMock } from '@kbn/data-view-editor-plugin/public/mocks';
-import { TextBasedLanguages } from '@kbn/esql-utils';
 import { ChangeDataView } from './change_dataview';
 import { DataViewSelector } from './data_view_selector';
 import { dataViewMock, dataViewMockEsql } from './mocks/dataview';
@@ -133,20 +132,6 @@ describe('DataView component', () => {
     expect(addDataViewSpy).toHaveBeenCalled();
   });
 
-  it('should render the text based languages button if languages are given', async () => {
-    const component = mount(
-      wrapDataViewComponentInContext(
-        {
-          ...props,
-          textBasedLanguages: [TextBasedLanguages.ESQL],
-        },
-        false
-      )
-    );
-    const text = component.find('[data-test-subj="select-text-based-language-btn"]');
-    expect(text.length).not.toBe(0);
-  });
-
   it('should properly handle ad hoc data views', async () => {
     const component = mount(
       wrapDataViewComponentInContext(

diff --git a/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx b/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx
@@ -12,7 +12,6 @@ import { css } from '@emotion/react';
 import {
   EuiPopover,
   EuiHorizontalRule,
-  EuiButton,
   EuiContextMenuPanel,
   EuiContextMenuItem,
   useEuiTheme,
@@ -24,10 +23,8 @@ import {
   EuiFlexItem,
   EuiButtonEmpty,
 } from '@elastic/eui';
-import { METRIC_TYPE } from '@kbn/analytics';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { AggregateQuery, getLanguageDisplayName } from '@kbn/es-query';
-import { getInitialESQLQuery } from '@kbn/esql-utils';
+import { getLanguageDisplayName } from '@kbn/es-query';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { IUnifiedSearchPluginServices } from '../types';
 import { type DataViewPickerPropsExtended } from './data_view_picker';
@@ -36,7 +33,6 @@ import type { TextBasedLanguagesTransitionModalProps } from './text_languages_tr
 import adhoc from './assets/adhoc.svg';
 import { changeDataViewStyles } from './change_dataview.styles';
 import { DataViewSelector } from './data_view_selector';
-import { ESQLMenuPopover } from './esql_menu_popover';
 
 // local storage key for the text based languages transition modal
 const TEXT_LANG_TRANSITION_MODAL_KEY = 'data.textLangTransitionModal';
@@ -74,15 +70,13 @@ export function ChangeDataView({
   onDataViewCreated,
   trigger,
   selectableProps,
-  textBasedLanguages,
   onSaveTextLanguageQuery,
   onTextLangQuerySubmit,
   textBasedLanguage,
   shouldShowTextBasedLanguageTransitionModal = true,
   isDisabled,
   onEditDataView,
   onCreateDefaultAdHocDataView,
-  openESQLInlineDocs,
 }: DataViewPickerPropsExtended) {
   const { euiTheme } = useEuiTheme();
   const [isPopoverOpen, setPopoverIsOpen] = useState(false);
@@ -95,9 +89,7 @@ export function ChangeDataView({
   const [selectedDataViewId, setSelectedDataViewId] = useState(currentDataViewId);
 
   const kibana = useKibana<IUnifiedSearchPluginServices>();
-  const { application, data, storage, dataViews, dataViewEditor, appName, usageCollection } =
-    kibana.services;
-  const reportUiCounter = usageCollection?.reportUiCounter.bind(usageCollection, appName);
+  const { application, data, storage, dataViews, dataViewEditor } = kibana.services;
 
   const styles = changeDataViewStyles({
     fullWidth: trigger.fullWidth,
@@ -296,15 +288,6 @@ export function ChangeDataView({
     setIsTextLangTransitionModalDismissed(true);
   }, [storage]);
 
-  const onTextBasedSubmit = useCallback(
-    (q: AggregateQuery) => {
-      onTextLangQuerySubmit?.(q);
-      setPopoverIsOpen(false);
-      reportUiCounter?.(METRIC_TYPE.CLICK, `esql:unified_search_clicked`);
-    },
-    [onTextLangQuerySubmit, reportUiCounter]
-  );
-
   const cleanup = useCallback(
     (shouldDismissModal: boolean) => {
       setIsTextLangTransitionModalVisible(false);
@@ -365,22 +348,6 @@ export function ChangeDataView({
       <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
         {!isTextBasedLangSelected && (
           <>
-            {textBasedLanguages?.length && (
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  iconType="editorRedo"
-                  color="text"
-                  onClick={() => {
-                    onTextBasedSubmit({ esql: getInitialESQLQuery(trigger.title!) });
-                  }}
-                  data-test-subj="select-text-based-language-btn"
-                >
-                  {i18n.translate('unifiedSearch.query.queryBar.textBasedLanguagesTryLabel', {
-                    defaultMessage: 'Try ES|QL',
-                  })}
-                </EuiButton>
-              </EuiFlexItem>
-            )}
             <EuiFlexItem grow={false}>
               <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
                 <EuiFlexItem
@@ -419,30 +386,6 @@ export function ChangeDataView({
             </EuiFlexItem>
           </>
         )}
-        {isTextBasedLangSelected && (
-          <ESQLMenuPopover
-            onDataViewSwitch={() => {
-              const showTransitionModal =
-                !isTextLangTransitionModalDismissed && shouldShowTextBasedLanguageTransitionModal;
-
-              if (showTransitionModal) {
-                setIsTextLangTransitionModalVisible(true);
-              } else {
-                setIsTextBasedLangSelected(false);
-                // clean up the Text based language query
-                onTextLangQuerySubmit?.({
-                  language: 'kuery',
-                  query: '',
-                });
-                if (selectedDataViewId) {
-                  onChangeDataView(selectedDataViewId);
-                }
-                setTriggerLabel(trigger.label);
-              }
-            }}
-            openESQLInlineDocs={openESQLInlineDocs}
-          />
-        )}
       </EuiFlexGroup>
 
       {modal}

diff --git a/src/plugins/unified_search/public/dataview_picker/data_view_picker.tsx b/src/plugins/unified_search/public/dataview_picker/data_view_picker.tsx
@@ -90,10 +90,6 @@ export interface DataViewPickerProps {
    * Makes the picker disabled by disabling the popover trigger
    */
   isDisabled?: boolean;
-  /**
-   * Opens the ESQL inline docs
-   */
-  openESQLInlineDocs?: () => void;
 }
 
 export interface DataViewPickerPropsExtended extends DataViewPickerProps {
@@ -125,7 +121,6 @@ export const DataViewPicker = ({
   shouldShowTextBasedLanguageTransitionModal,
   onCreateDefaultAdHocDataView,
   isDisabled,
-  openESQLInlineDocs,
 }: DataViewPickerPropsExtended) => {
   return (
     <ChangeDataView
@@ -146,7 +141,6 @@ export const DataViewPicker = ({
       textBasedLanguage={textBasedLanguage}
       shouldShowTextBasedLanguageTransitionModal={shouldShowTextBasedLanguageTransitionModal}
       isDisabled={isDisabled}
-      openESQLInlineDocs={openESQLInlineDocs}
     />
   );
 };