From 19348988cfa1fca9a4ae6562f088b22a2f1a2884 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Thu, 1 Aug 2024 09:55:50 +0200 Subject: [PATCH 1/7] Move the switcher to the Discover menu --- .../src/text_based_languages_editor.tsx | 20 +--- packages/kbn-text-based-editor/src/types.ts | 4 - .../components/top_nav/get_top_nav_links.tsx | 55 ++++++++++ .../public/top_nav_menu/top_nav_menu_data.tsx | 2 + .../public/top_nav_menu/top_nav_menu_item.tsx | 8 +- .../dataview_picker/change_dataview.test.tsx | 15 --- .../dataview_picker/change_dataview.tsx | 61 +---------- .../dataview_picker/data_view_picker.tsx | 6 - .../esql_menu_popover.test.tsx | 67 ------------ .../dataview_picker/esql_menu_popover.tsx | 103 ------------------ .../query_string_input/query_bar_top_row.tsx | 4 - .../apps/discover/esql/_esql_view.ts | 4 - .../page_objects/unified_search_page.ts | 1 - .../common/discover/esql/_esql_view.ts | 4 - 14 files changed, 66 insertions(+), 288 deletions(-) delete mode 100644 src/plugins/unified_search/public/dataview_picker/esql_menu_popover.test.tsx delete mode 100644 src/plugins/unified_search/public/dataview_picker/esql_menu_popover.tsx 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 index 77da74bb4c337..be5c050e7508b 100644 --- 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(null); const datePickerOpenStatusRef = useRef(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} /> Promise; - /** 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 index a25e10ce3b0be..3103a4985b2f9 100644 --- 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 index 2c8fc1e58d934..050fb788a7870 100644 --- 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 index 495e5c4ac9593..d52878aad8491 100644 --- 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 ? ( - + {getButtonContainer()} ) : ( - + {getButtonContainer()} ); 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 index c5a2d85f14f64..551d8ad99ef63 100644 --- 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 index 9f8a3d403f4f7..9f0302d3cb2ba 100644 --- 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,7 +70,6 @@ export function ChangeDataView({ onDataViewCreated, trigger, selectableProps, - textBasedLanguages, onSaveTextLanguageQuery, onTextLangQuerySubmit, textBasedLanguage, @@ -82,7 +77,6 @@ export function ChangeDataView({ 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(); - 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({ {!isTextBasedLangSelected && ( <> - {textBasedLanguages?.length && ( - - { - onTextBasedSubmit({ esql: getInitialESQLQuery(trigger.title!) }); - }} - data-test-subj="select-text-based-language-btn" - > - {i18n.translate('unifiedSearch.query.queryBar.textBasedLanguagesTryLabel', { - defaultMessage: 'Try ES|QL', - })} - - - )} )} - {isTextBasedLangSelected && ( - { - 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} - /> - )} {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 index 00cc834fe76eb..79b541f69f1ea 100644 --- 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 ( ); }; diff --git a/src/plugins/unified_search/public/dataview_picker/esql_menu_popover.test.tsx b/src/plugins/unified_search/public/dataview_picker/esql_menu_popover.test.tsx deleted file mode 100644 index cf55dda78f05e..0000000000000 --- a/src/plugins/unified_search/public/dataview_picker/esql_menu_popover.test.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import { screen, render, fireEvent } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; -import { coreMock } from '@kbn/core/public/mocks'; -import { ESQLMenuPopover, type ESQLMenuPopoverProps } from './esql_menu_popover'; - -describe('ESQLMenuPopover', () => { - let defaultProps: ESQLMenuPopoverProps; - - beforeEach(() => { - defaultProps = { - onDataViewSwitch: jest.fn(), - openESQLInlineDocs: jest.fn(), - }; - }); - const renderESQLPopover = () => { - const startMock = coreMock.createStart(); - const services = { - docLinks: startMock.docLinks, - }; - return render( - - {' '} - - ); - }; - - it('should render a button', () => { - renderESQLPopover(); - expect(screen.getByTestId('esql-menu-button')).toBeInTheDocument(); - }); - - it('should open a menu when the popover is open', () => { - renderESQLPopover(); - expect(screen.getByTestId('esql-menu-button')).toBeInTheDocument(); - userEvent.click(screen.getByRole('button')); - - expect(screen.getByTestId('esql-open-docs')).toBeInTheDocument(); - expect(screen.getByTestId('esql-about')).toBeInTheDocument(); - expect(screen.getByTestId('switch-to-dataviews')).toBeInTheDocument(); - }); - - it('should call the onDataViewSwitch prop if the switch dataviews CTA is clicked', () => { - renderESQLPopover(); - expect(screen.getByTestId('esql-menu-button')).toBeInTheDocument(); - userEvent.click(screen.getByRole('button')); - fireEvent.click(screen.getByTestId('switch-to-dataviews')); - expect(defaultProps.onDataViewSwitch).toHaveBeenCalled(); - }); - - it('should call the openESQLInlineDocs prop if the open docs CTA is clicked', () => { - renderESQLPopover(); - expect(screen.getByTestId('esql-menu-button')).toBeInTheDocument(); - userEvent.click(screen.getByRole('button')); - fireEvent.click(screen.getByTestId('esql-open-docs')); - expect(defaultProps.openESQLInlineDocs).toHaveBeenCalled(); - }); -}); diff --git a/src/plugins/unified_search/public/dataview_picker/esql_menu_popover.tsx b/src/plugins/unified_search/public/dataview_picker/esql_menu_popover.tsx deleted file mode 100644 index b5ea73987ad6b..0000000000000 --- a/src/plugins/unified_search/public/dataview_picker/esql_menu_popover.tsx +++ /dev/null @@ -1,103 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { useMemo, useState } from 'react'; -import { - EuiPopover, - EuiButtonIcon, - EuiContextMenuPanel, - type EuiContextMenuPanelProps, - EuiContextMenuItem, - EuiHorizontalRule, -} from '@elastic/eui'; -import { useKibana } from '@kbn/kibana-react-plugin/public'; -import { i18n } from '@kbn/i18n'; -import type { IUnifiedSearchPluginServices } from '../types'; - -export interface ESQLMenuPopoverProps { - onDataViewSwitch: () => void; - openESQLInlineDocs?: () => void; -} - -export const ESQLMenuPopover = ({ onDataViewSwitch, openESQLInlineDocs }: ESQLMenuPopoverProps) => { - const kibana = useKibana(); - - const { docLinks } = kibana.services; - const [isESQLMenuPopoverOpen, setIsESQLMenuPopoverOpen] = useState(false); - const esqlPanelItems = useMemo(() => { - const panelItems: EuiContextMenuPanelProps['items'] = []; - if (openESQLInlineDocs) { - panelItems.push( - { - openESQLInlineDocs?.(); - setIsESQLMenuPopoverOpen(false); - }} - > - {i18n.translate('unifiedSearch.query.queryBar.esqlMenu.openDocs', { - defaultMessage: 'Open docs', - })} - - ); - } - panelItems.push( - - {i18n.translate('unifiedSearch.query.queryBar.esqlMenu.aboutESQL', { - defaultMessage: 'About ES|QL', - })} - , - , - { - onDataViewSwitch(); - setIsESQLMenuPopoverOpen(false); - }} - > - {i18n.translate('unifiedSearch.query.queryBar.esqlMenu.switchToDataviews', { - defaultMessage: 'Switch to data views', - })} - - ); - return panelItems; - }, [docLinks?.links?.query?.queryESQL, onDataViewSwitch, openESQLInlineDocs]); - - return ( - setIsESQLMenuPopoverOpen(!isESQLMenuPopoverOpen)} - data-test-subj="esql-menu-button" - /> - } - panelProps={{ - ['data-test-subj']: 'esql-menu-popover', - }} - isOpen={isESQLMenuPopoverOpen} - closePopover={() => setIsESQLMenuPopoverOpen(false)} - panelPaddingSize="none" - display="block" - > - - - ); -}; diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx index 5fd1f562fa2be..cd69a1cbe66ff 100644 --- a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx +++ b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx @@ -235,7 +235,6 @@ export const QueryBarTopRow = React.memo( ) { const isMobile = useIsWithinBreakpoints(['xs', 's']); const [isXXLarge, setIsXXLarge] = useState(false); - const [isESQLInlineDocsOpen, setIsESQLInlineDocsOpen] = useState(false); const submitButtonStyle: QueryBarTopRowProps['submitButtonStyle'] = props.submitButtonStyle ?? 'auto'; const submitButtonIconOnly = @@ -642,7 +641,6 @@ export const QueryBarTopRow = React.memo( textBasedLanguage={textBasedLanguage} onSaveTextLanguageQuery={props.onTextBasedSavedAndExit} isDisabled={props.isDisabled} - openESQLInlineDocs={() => setIsESQLInlineDocsOpen(true)} /> ); @@ -754,8 +752,6 @@ export const QueryBarTopRow = React.memo( hideRunQueryText={true} data-test-subj="unifiedTextLangEditor" isLoading={props.isLoading} - isHelpMenuOpen={isESQLInlineDocsOpen} - setIsHelpMenuOpen={setIsESQLInlineDocsOpen} /> ) ); diff --git a/test/functional/apps/discover/esql/_esql_view.ts b/test/functional/apps/discover/esql/_esql_view.ts index 537a0358dd7c2..b1a2948057f56 100644 --- a/test/functional/apps/discover/esql/_esql_view.ts +++ b/test/functional/apps/discover/esql/_esql_view.ts @@ -253,7 +253,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.discover.selectTextBaseLang(); await PageObjects.header.waitUntilLoadingHasFinished(); await PageObjects.discover.waitUntilSearchingHasFinished(); - await testSubjects.click('esql-menu-button'); await testSubjects.click('switch-to-dataviews'); await retry.try(async () => { await testSubjects.existOrFail('unifiedSearch_switch_modal'); @@ -267,7 +266,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await testSubjects.click('querySubmitButton'); await PageObjects.header.waitUntilLoadingHasFinished(); await PageObjects.discover.waitUntilSearchingHasFinished(); - await testSubjects.click('esql-menu-button'); await testSubjects.click('switch-to-dataviews'); await retry.try(async () => { await testSubjects.existOrFail('unifiedSearch_switch_modal'); @@ -279,7 +277,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await testSubjects.missingOrFail('unifiedSearch_switch_modal'); }); await PageObjects.discover.saveSearch('esql_test'); - await testSubjects.click('esql-menu-button'); await testSubjects.click('switch-to-dataviews'); await testSubjects.missingOrFail('unifiedSearch_switch_modal'); }); @@ -294,7 +291,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await testSubjects.click('querySubmitButton'); await PageObjects.header.waitUntilLoadingHasFinished(); await PageObjects.discover.waitUntilSearchingHasFinished(); - await testSubjects.click('esql-menu-button'); await testSubjects.click('switch-to-dataviews'); await retry.try(async () => { await testSubjects.existOrFail('unifiedSearch_switch_modal'); diff --git a/test/functional/page_objects/unified_search_page.ts b/test/functional/page_objects/unified_search_page.ts index da66316c749a0..cd8058234bbc8 100644 --- a/test/functional/page_objects/unified_search_page.ts +++ b/test/functional/page_objects/unified_search_page.ts @@ -44,7 +44,6 @@ export class UnifiedSearchPageObject extends FtrService { } public async switchToDataViewMode() { - await this.testSubjects.click('esql-menu-button'); await this.testSubjects.click('switch-to-dataviews'); await this.testSubjects.click('unifiedSearch_switch_noSave'); } diff --git a/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts b/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts index 3a0287a17e310..766e9e2a03e49 100644 --- a/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts +++ b/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts @@ -260,7 +260,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.discover.selectTextBaseLang(); await PageObjects.header.waitUntilLoadingHasFinished(); await PageObjects.discover.waitUntilSearchingHasFinished(); - await testSubjects.click('esql-menu-button'); await testSubjects.click('switch-to-dataviews'); await retry.try(async () => { await testSubjects.existOrFail('unifiedSearch_switch_modal'); @@ -274,7 +273,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await testSubjects.click('querySubmitButton'); await PageObjects.header.waitUntilLoadingHasFinished(); await PageObjects.discover.waitUntilSearchingHasFinished(); - await testSubjects.click('esql-menu-button'); await testSubjects.click('switch-to-dataviews'); await retry.try(async () => { await testSubjects.existOrFail('unifiedSearch_switch_modal'); @@ -286,7 +284,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await testSubjects.missingOrFail('unifiedSearch_switch_modal'); }); await PageObjects.discover.saveSearch('esql_test'); - await testSubjects.click('esql-menu-button'); await testSubjects.click('switch-to-dataviews'); await testSubjects.missingOrFail('unifiedSearch_switch_modal'); }); @@ -301,7 +298,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await testSubjects.click('querySubmitButton'); await PageObjects.header.waitUntilLoadingHasFinished(); await PageObjects.discover.waitUntilSearchingHasFinished(); - await testSubjects.click('esql-menu-button'); await testSubjects.click('switch-to-dataviews'); await retry.try(async () => { await testSubjects.existOrFail('unifiedSearch_switch_modal'); From 773a319df221ca20abc3458da87776c40eb49111 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Fri, 2 Aug 2024 08:22:32 +0200 Subject: [PATCH 2/7] Cleanup --- .../src/text_based_languages_editor.tsx | 14 --- .../dataview_picker/change_dataview.tsx | 1 - .../esql_menu_popover.test.tsx | 67 ------------ .../dataview_picker/esql_menu_popover.tsx | 103 ------------------ .../query_string_input/query_bar_top_row.tsx | 3 - 5 files changed, 188 deletions(-) delete mode 100644 src/plugins/unified_search/public/dataview_picker/esql_menu_popover.test.tsx delete mode 100644 src/plugins/unified_search/public/dataview_picker/esql_menu_popover.tsx 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 index ec500e9935bfd..8b92bb213157e 100644 --- a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx +++ b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx @@ -495,20 +495,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; diff --git a/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx b/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx index 79955144cf028..b887a9a1418e4 100644 --- a/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx +++ b/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx @@ -33,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'; diff --git a/src/plugins/unified_search/public/dataview_picker/esql_menu_popover.test.tsx b/src/plugins/unified_search/public/dataview_picker/esql_menu_popover.test.tsx deleted file mode 100644 index cf55dda78f05e..0000000000000 --- a/src/plugins/unified_search/public/dataview_picker/esql_menu_popover.test.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import { screen, render, fireEvent } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; -import { coreMock } from '@kbn/core/public/mocks'; -import { ESQLMenuPopover, type ESQLMenuPopoverProps } from './esql_menu_popover'; - -describe('ESQLMenuPopover', () => { - let defaultProps: ESQLMenuPopoverProps; - - beforeEach(() => { - defaultProps = { - onDataViewSwitch: jest.fn(), - openESQLInlineDocs: jest.fn(), - }; - }); - const renderESQLPopover = () => { - const startMock = coreMock.createStart(); - const services = { - docLinks: startMock.docLinks, - }; - return render( - - {' '} - - ); - }; - - it('should render a button', () => { - renderESQLPopover(); - expect(screen.getByTestId('esql-menu-button')).toBeInTheDocument(); - }); - - it('should open a menu when the popover is open', () => { - renderESQLPopover(); - expect(screen.getByTestId('esql-menu-button')).toBeInTheDocument(); - userEvent.click(screen.getByRole('button')); - - expect(screen.getByTestId('esql-open-docs')).toBeInTheDocument(); - expect(screen.getByTestId('esql-about')).toBeInTheDocument(); - expect(screen.getByTestId('switch-to-dataviews')).toBeInTheDocument(); - }); - - it('should call the onDataViewSwitch prop if the switch dataviews CTA is clicked', () => { - renderESQLPopover(); - expect(screen.getByTestId('esql-menu-button')).toBeInTheDocument(); - userEvent.click(screen.getByRole('button')); - fireEvent.click(screen.getByTestId('switch-to-dataviews')); - expect(defaultProps.onDataViewSwitch).toHaveBeenCalled(); - }); - - it('should call the openESQLInlineDocs prop if the open docs CTA is clicked', () => { - renderESQLPopover(); - expect(screen.getByTestId('esql-menu-button')).toBeInTheDocument(); - userEvent.click(screen.getByRole('button')); - fireEvent.click(screen.getByTestId('esql-open-docs')); - expect(defaultProps.openESQLInlineDocs).toHaveBeenCalled(); - }); -}); diff --git a/src/plugins/unified_search/public/dataview_picker/esql_menu_popover.tsx b/src/plugins/unified_search/public/dataview_picker/esql_menu_popover.tsx deleted file mode 100644 index b5ea73987ad6b..0000000000000 --- a/src/plugins/unified_search/public/dataview_picker/esql_menu_popover.tsx +++ /dev/null @@ -1,103 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { useMemo, useState } from 'react'; -import { - EuiPopover, - EuiButtonIcon, - EuiContextMenuPanel, - type EuiContextMenuPanelProps, - EuiContextMenuItem, - EuiHorizontalRule, -} from '@elastic/eui'; -import { useKibana } from '@kbn/kibana-react-plugin/public'; -import { i18n } from '@kbn/i18n'; -import type { IUnifiedSearchPluginServices } from '../types'; - -export interface ESQLMenuPopoverProps { - onDataViewSwitch: () => void; - openESQLInlineDocs?: () => void; -} - -export const ESQLMenuPopover = ({ onDataViewSwitch, openESQLInlineDocs }: ESQLMenuPopoverProps) => { - const kibana = useKibana(); - - const { docLinks } = kibana.services; - const [isESQLMenuPopoverOpen, setIsESQLMenuPopoverOpen] = useState(false); - const esqlPanelItems = useMemo(() => { - const panelItems: EuiContextMenuPanelProps['items'] = []; - if (openESQLInlineDocs) { - panelItems.push( - { - openESQLInlineDocs?.(); - setIsESQLMenuPopoverOpen(false); - }} - > - {i18n.translate('unifiedSearch.query.queryBar.esqlMenu.openDocs', { - defaultMessage: 'Open docs', - })} - - ); - } - panelItems.push( - - {i18n.translate('unifiedSearch.query.queryBar.esqlMenu.aboutESQL', { - defaultMessage: 'About ES|QL', - })} - , - , - { - onDataViewSwitch(); - setIsESQLMenuPopoverOpen(false); - }} - > - {i18n.translate('unifiedSearch.query.queryBar.esqlMenu.switchToDataviews', { - defaultMessage: 'Switch to data views', - })} - - ); - return panelItems; - }, [docLinks?.links?.query?.queryESQL, onDataViewSwitch, openESQLInlineDocs]); - - return ( - setIsESQLMenuPopoverOpen(!isESQLMenuPopoverOpen)} - data-test-subj="esql-menu-button" - /> - } - panelProps={{ - ['data-test-subj']: 'esql-menu-popover', - }} - isOpen={isESQLMenuPopoverOpen} - closePopover={() => setIsESQLMenuPopoverOpen(false)} - panelPaddingSize="none" - display="block" - > - - - ); -}; diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx index c00421cc6c133..cd69a1cbe66ff 100644 --- a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx +++ b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx @@ -641,7 +641,6 @@ export const QueryBarTopRow = React.memo( textBasedLanguage={textBasedLanguage} onSaveTextLanguageQuery={props.onTextBasedSavedAndExit} isDisabled={props.isDisabled} - openESQLInlineDocs={() => setIsESQLInlineDocsOpen(true)} /> ); @@ -753,8 +752,6 @@ export const QueryBarTopRow = React.memo( hideRunQueryText={true} data-test-subj="unifiedTextLangEditor" isLoading={props.isLoading} - isHelpMenuOpen={isESQLInlineDocsOpen} - setIsHelpMenuOpen={setIsESQLInlineDocsOpen} /> ) ); From 3e69c22bcd512bb51ed314615b2316aedcce007d Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Fri, 2 Aug 2024 10:21:18 +0200 Subject: [PATCH 3/7] Move to Discover and unfiied search plugin cleanup --- src/plugins/discover/common/constants.ts | 3 + .../components/top_nav/discover_topnav.tsx | 127 ++++++------ .../esql_dataview_transition_modal.tsx} | 90 +++------ .../esql_dataview_transition/index.tsx | 21 ++ .../components/top_nav/get_top_nav_links.tsx | 38 ++-- .../components/top_nav/use_discover_topnav.ts | 10 +- .../discover_internal_state_container.ts | 9 + .../main/state_management/discover_state.ts | 36 ++++ .../dataview_picker/change_dataview.test.tsx | 1 - .../dataview_picker/change_dataview.tsx | 186 ++++-------------- .../dataview_picker/data_view_picker.tsx | 32 --- .../public/dataview_picker/index.tsx | 2 +- .../query_string_input/query_bar_top_row.tsx | 9 +- .../public/search_bar/create_search_bar.tsx | 1 - .../public/search_bar/search_bar.tsx | 4 +- .../apps/discover/esql/_esql_view.ts | 12 +- .../page_objects/unified_search_page.ts | 2 +- x-pack/plugins/lens/public/app_plugin/app.tsx | 9 - .../lens/public/app_plugin/lens_top_nav.tsx | 2 - .../plugins/lens/public/app_plugin/types.ts | 1 - .../translations/translations/fr-FR.json | 10 +- .../translations/translations/ja-JP.json | 10 +- .../translations/translations/zh-CN.json | 10 +- .../common/discover/esql/_esql_view.ts | 12 +- 24 files changed, 274 insertions(+), 363 deletions(-) rename src/plugins/{unified_search/public/dataview_picker/text_languages_transition_modal.tsx => discover/public/application/main/components/top_nav/esql_dataview_transition/esql_dataview_transition_modal.tsx} (51%) create mode 100644 src/plugins/discover/public/application/main/components/top_nav/esql_dataview_transition/index.tsx diff --git a/src/plugins/discover/common/constants.ts b/src/plugins/discover/common/constants.ts index 1083257175d10..67f0bfc35e578 100644 --- a/src/plugins/discover/common/constants.ts +++ b/src/plugins/discover/common/constants.ts @@ -21,3 +21,6 @@ export enum VIEW_MODE { export const getDefaultRowsPerPage = (uiSettings: IUiSettingsClient): number => { return parseInt(uiSettings.get(SAMPLE_ROWS_PER_PAGE_SETTING), 10) || DEFAULT_ROWS_PER_PAGE; }; + +// local storage key for the ES|QL to Dataviews transition modal +export const ESQL_TRANSITION_MODAL_KEY = 'data.textLangTransitionModal'; diff --git a/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.tsx b/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.tsx index 55fe8825477d9..36e91bfc2baf9 100644 --- a/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.tsx +++ b/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.tsx @@ -11,11 +11,8 @@ import { type DataView, DataViewType } from '@kbn/data-views-plugin/public'; import { DataViewPickerProps } from '@kbn/unified-search-plugin/public'; import { ENABLE_ESQL } from '@kbn/esql-utils'; import { TextBasedLanguages } from '@kbn/esql-utils'; -import { - useSavedSearch, - useSavedSearchHasChanged, - useSavedSearchInitial, -} from '../../state_management/discover_state_provider'; +import { useSavedSearchInitial } from '../../state_management/discover_state_provider'; +import { ESQL_TRANSITION_MODAL_KEY } from '../../../../../common/constants'; import { useInternalStateSelector } from '../../state_management/discover_internal_state_container'; import { useDiscoverServices } from '../../../../hooks/use_discover_services'; import type { DiscoverStateContainer } from '../../state_management/discover_state'; @@ -25,6 +22,7 @@ import { addLog } from '../../../../utils/add_log'; import { useAppStateSelector } from '../../state_management/discover_app_state_container'; import { useDiscoverTopNav } from './use_discover_topnav'; import { useIsEsqlMode } from '../../hooks/use_is_esql_mode'; +import { ESQLToDataViewTransitionModal } from './esql_dataview_transition'; export interface DiscoverTopNavProps { savedQuery?: string; @@ -59,6 +57,9 @@ export const DiscoverTopNav = ({ const adHocDataViews = useInternalStateSelector((state) => state.adHocDataViews); const dataView = useInternalStateSelector((state) => state.dataView!); const savedDataViews = useInternalStateSelector((state) => state.savedDataViews); + const isESQLToDataViewTransitionModalVisible = useInternalStateSelector( + (state) => state.isESQLToDataViewTransitionModalVisible + ); const savedSearch = useSavedSearchInitial(); const isEsqlMode = useIsEsqlMode(); const showDatePicker = useMemo(() => { @@ -150,17 +151,34 @@ export const DiscoverTopNav = ({ } }; - const onEsqlSavedAndExit = useCallback( - ({ onSave, onCancel }) => { - onSaveSearch({ - savedSearch: stateContainer.savedSearchState.getState(), - services, - state: stateContainer, - onClose: onCancel, - onSaveCb: onSave, - }); + const onESQLToDataViewTransitionModalClose = useCallback( + (shouldDismissModal?: boolean, needsSave?: boolean) => { + if (shouldDismissModal) { + services.storage.set(ESQL_TRANSITION_MODAL_KEY, true); + } + stateContainer.internalState.transitions.setIsESQLToDataViewTransitionModalVisible(false); + // the user dismissed the modal, we don't need to save the search or switch to the data view mode + if (needsSave == null) { + return; + } + if (needsSave) { + onSaveSearch({ + savedSearch: stateContainer.savedSearchState.getState(), + services, + state: stateContainer, + onClose: () => + stateContainer.internalState.transitions.setIsESQLToDataViewTransitionModalVisible( + false + ), + onSaveCb: () => { + stateContainer.actions.transitionFromESQLToDataview(dataView.id ?? ''); + }, + }); + } else { + stateContainer.actions.transitionFromESQLToDataview(dataView.id ?? ''); + } }, - [services, stateContainer] + [dataView.id, services, stateContainer] ); const { topNavBadges, topNavMenu } = useDiscoverTopNav({ stateContainer }); @@ -181,8 +199,6 @@ export const DiscoverTopNav = ({ topNavMenu, ]); - const savedSearchId = useSavedSearch().id; - const savedSearchHasChanged = useSavedSearchHasChanged(); const dataViewPickerProps: DataViewPickerProps = useMemo(() => { const isESQLModeEnabled = uiSettings.get(ENABLE_ESQL); const supportedTextBasedLanguages: DataViewPickerProps['textBasedLanguages'] = isESQLModeEnabled @@ -201,7 +217,6 @@ export const DiscoverTopNav = ({ onCreateDefaultAdHocDataView: stateContainer.actions.createAndAppendAdHocDataView, onChangeDataView: stateContainer.actions.onChangeDataView, textBasedLanguages: supportedTextBasedLanguages, - shouldShowTextBasedLanguageTransitionModal: !savedSearchId || savedSearchHasChanged, adHocDataViews, savedDataViews, onEditDataView, @@ -213,8 +228,6 @@ export const DiscoverTopNav = ({ dataView, onEditDataView, savedDataViews, - savedSearchHasChanged, - savedSearchId, stateContainer, uiSettings, ]); @@ -230,40 +243,44 @@ export const DiscoverTopNav = ({ !!searchBarCustomization?.CustomDataViewPicker || !!searchBarCustomization?.hideDataViewPicker; return ( - - ) : undefined - } - dataViewPickerComponentProps={ - shouldHideDefaultDataviewPicker ? undefined : dataViewPickerProps - } - displayStyle="detached" - textBasedLanguageModeErrors={esqlModeErrors ? [esqlModeErrors] : undefined} - textBasedLanguageModeWarning={esqlModeWarning} - onTextBasedSavedAndExit={onEsqlSavedAndExit} - prependFilterBar={ - searchBarCustomization?.PrependFilterBar ? ( - - ) : undefined - } - /> + <> + + ) : undefined + } + dataViewPickerComponentProps={ + shouldHideDefaultDataviewPicker ? undefined : dataViewPickerProps + } + displayStyle="detached" + textBasedLanguageModeErrors={esqlModeErrors ? [esqlModeErrors] : undefined} + textBasedLanguageModeWarning={esqlModeWarning} + prependFilterBar={ + searchBarCustomization?.PrependFilterBar ? ( + + ) : undefined + } + /> + {isESQLToDataViewTransitionModalVisible && ( + + )} + ); }; diff --git a/src/plugins/unified_search/public/dataview_picker/text_languages_transition_modal.tsx b/src/plugins/discover/public/application/main/components/top_nav/esql_dataview_transition/esql_dataview_transition_modal.tsx similarity index 51% rename from src/plugins/unified_search/public/dataview_picker/text_languages_transition_modal.tsx rename to src/plugins/discover/public/application/main/components/top_nav/esql_dataview_transition/esql_dataview_transition_modal.tsx index 51dc74d96fc88..bda65136b82a4 100644 --- a/src/plugins/unified_search/public/dataview_picker/text_languages_transition_modal.tsx +++ b/src/plugins/discover/public/application/main/components/top_nav/esql_dataview_transition/esql_dataview_transition_modal.tsx @@ -8,7 +8,6 @@ import React, { useState, useCallback } from 'react'; import { i18n } from '@kbn/i18n'; -import { getLanguageDisplayName } from '@kbn/es-query'; import { EuiModal, EuiModalBody, @@ -27,71 +26,53 @@ import { const FEEDBACK_LINK = 'https://ela.st/esql-feedback'; -export interface TextBasedLanguagesTransitionModalProps { - closeModal: (dismissFlag: boolean, needsSave?: boolean) => void; - setIsTextLangTransitionModalVisible: (flag: boolean) => void; - textBasedLanguage?: string; +export interface ESQLToDataViewTransitionModalProps { + closeModal: (dismissFlag?: boolean, needsSave?: boolean) => void; } // Needed for React.lazy // eslint-disable-next-line import/no-default-export -export default function TextBasedLanguagesTransitionModal({ +export default function ESQLToDataViewTransitionModal({ closeModal, - setIsTextLangTransitionModalVisible, - textBasedLanguage, -}: TextBasedLanguagesTransitionModalProps) { +}: ESQLToDataViewTransitionModalProps) { const [dismissModalChecked, setDismissModalChecked] = useState(false); const onTransitionModalDismiss = useCallback((e) => { setDismissModalChecked(e.target.checked); }, []); - const language = getLanguageDisplayName(textBasedLanguage); return ( setIsTextLangTransitionModalVisible(false)} + onClose={() => closeModal()} style={{ width: 700 }} - data-test-subj="unifiedSearch_switch_modal" + data-test-subj="discover-esql-to-dataview-modal" > - {i18n.translate( - 'unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalTitle', - { - defaultMessage: 'Unsaved changes', - } - )} + {i18n.translate('discover.esqlToDataviewTransitionModalTitle', { + defaultMessage: 'Unsaved changes', + })} - {i18n.translate( - 'unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalBody', - { - defaultMessage: - "Switching data views removes the current {language} query. Save this search to ensure you don't lose work.", - values: { language }, - } - )} + {i18n.translate('discover.esqlToDataviewTransitionModalBody', { + defaultMessage: + "Switching data views removes the current ES|QL query. Save this search to ensure you don't lose work.", + })} - {i18n.translate( - 'unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalHelpText', - { - defaultMessage: 'Help us improve ES|QL.', - } - )} + {i18n.translate('discover.esqlToDataviewTransitionModalHelpText', { + defaultMessage: 'Help us improve ES|QL.', + })} - {i18n.translate( - 'unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalFeedbackLink', - { - defaultMessage: 'Submit feedback', - } - )} + {i18n.translate('discover.esqlToDataviewTransitionModalFeedbackLink', { + defaultMessage: 'Submit feedback', + })} @@ -102,12 +83,9 @@ export default function TextBasedLanguagesTransitionModal({ @@ -116,17 +94,14 @@ export default function TextBasedLanguagesTransitionModal({ closeModal(dismissModalChecked)} + onClick={() => closeModal(dismissModalChecked, false)} color="danger" iconType="trash" - data-test-subj="unifiedSearch_switch_noSave" + data-test-subj="discover-esql-to-dataview-no-save-btn" > - {i18n.translate( - 'unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalCloseButton', - { - defaultMessage: 'Discard and switch', - } - )} + {i18n.translate('discover.esqlToDataviewTransitionModalCloseButton', { + defaultMessage: 'Discard and switch', + })} @@ -135,14 +110,11 @@ export default function TextBasedLanguagesTransitionModal({ fill color="primary" iconType="save" - data-test-subj="unifiedSearch_switch_andSave" + data-test-subj="discover-esql-to-dataview-save-btn" > - {i18n.translate( - 'unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalSaveButton', - { - defaultMessage: 'Save and switch', - } - )} + {i18n.translate('discover.esqlToDataviewTransitionModalSaveButton', { + defaultMessage: 'Save and switch', + })} diff --git a/src/plugins/discover/public/application/main/components/top_nav/esql_dataview_transition/index.tsx b/src/plugins/discover/public/application/main/components/top_nav/esql_dataview_transition/index.tsx new file mode 100644 index 0000000000000..af751b037b54a --- /dev/null +++ b/src/plugins/discover/public/application/main/components/top_nav/esql_dataview_transition/index.tsx @@ -0,0 +1,21 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import type { ESQLToDataViewTransitionModalProps } from './esql_dataview_transition_modal'; + +const Fallback = () =>
; + +const LazyESQLToDataViewTransitionModal = React.lazy( + () => import('./esql_dataview_transition_modal') +); +export const ESQLToDataViewTransitionModal = (props: ESQLToDataViewTransitionModalProps) => ( + }> + + +); 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 index 974d39e5a1a27..631abdd3e4e46 100644 --- 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 @@ -12,10 +12,10 @@ 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 { ENABLE_ESQL } from '@kbn/esql-utils'; import type { DiscoverAppLocatorParams } from '../../../../../common'; +import { ESQL_TRANSITION_MODAL_KEY } from '../../../../../common/constants'; 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'; @@ -34,6 +34,7 @@ export const getTopNavLinks = ({ isEsqlMode, adHocDataViews, topNavCustomization, + shouldShowESQLToDataviewTransitionModal, }: { dataView: DataView | undefined; services: DiscoverServices; @@ -42,6 +43,7 @@ export const getTopNavLinks = ({ isEsqlMode: boolean; adHocDataViews: DataView[]; topNavCustomization: TopNavCustomization | undefined; + shouldShowESQLToDataviewTransitionModal: boolean; }): TopNavMenuData[] => { const alerts = { id: 'alerts', @@ -86,24 +88,22 @@ export const getTopNavLinks = ({ run: () => { if (dataView) { if (isEsqlMode) { - state.appState.update({ - query: { - language: 'kuery', - query: '', - }, - dataSource: { - type: DataSourceType.DataView, - dataViewId: dataView.id ?? '', - }, - }); + services.trackUiMetric?.(METRIC_TYPE.CLICK, `esql:back_to_classic_clicked`); + /** + * Display the transition modal if: + * - the user has not dismissed the modal + * - the user has opened and applied changes to the saved search + */ + if ( + shouldShowESQLToDataviewTransitionModal && + !services.storage.get(ESQL_TRANSITION_MODAL_KEY) + ) { + state.internalState.transitions.setIsESQLToDataViewTransitionModalVisible(true); + } else { + state.actions.transitionFromESQLToDataview(dataView.id ?? ''); + } } else { - const queryString = getInitialESQLQuery(dataView); - state.appState.update({ - query: { esql: queryString }, - dataSource: { - type: DataSourceType.Esql, - }, - }); + state.actions.transitionFromDataviewToESQL(dataView); services.trackUiMetric?.(METRIC_TYPE.CLICK, `esql:try_btn_clicked`); } } diff --git a/src/plugins/discover/public/application/main/components/top_nav/use_discover_topnav.ts b/src/plugins/discover/public/application/main/components/top_nav/use_discover_topnav.ts index 06efd3205d1be..bd44961226ea9 100644 --- a/src/plugins/discover/public/application/main/components/top_nav/use_discover_topnav.ts +++ b/src/plugins/discover/public/application/main/components/top_nav/use_discover_topnav.ts @@ -13,6 +13,10 @@ import { useDiscoverServices } from '../../../../hooks/use_discover_services'; import { useInspector } from '../../hooks/use_inspector'; import { useIsEsqlMode } from '../../hooks/use_is_esql_mode'; import { useInternalStateSelector } from '../../state_management/discover_internal_state_container'; +import { + useSavedSearch, + useSavedSearchHasChanged, +} from '../../state_management/discover_state_provider'; import type { DiscoverStateContainer } from '../../state_management/discover_state'; import { getTopNavBadges } from './get_top_nav_badges'; import { getTopNavLinks } from './get_top_nav_links'; @@ -39,7 +43,9 @@ export const useDiscoverTopNav = ({ }), [stateContainer, services, hasUnsavedChanges, topNavCustomization] ); - + const savedSearchId = useSavedSearch().id; + const savedSearchHasChanged = useSavedSearchHasChanged(); + const shouldShowESQLToDataviewTransitionModal = !savedSearchId || savedSearchHasChanged; const dataView = useInternalStateSelector((state) => state.dataView); const adHocDataViews = useInternalStateSelector((state) => state.adHocDataViews); const isEsqlMode = useIsEsqlMode(); @@ -58,6 +64,7 @@ export const useDiscoverTopNav = ({ isEsqlMode, adHocDataViews, topNavCustomization, + shouldShowESQLToDataviewTransitionModal, }), [ adHocDataViews, @@ -67,6 +74,7 @@ export const useDiscoverTopNav = ({ services, stateContainer, topNavCustomization, + shouldShowESQLToDataviewTransitionModal, ] ); diff --git a/src/plugins/discover/public/application/main/state_management/discover_internal_state_container.ts b/src/plugins/discover/public/application/main/state_management/discover_internal_state_container.ts index 4ebbe94832d0c..56e4365a2a2f9 100644 --- a/src/plugins/discover/public/application/main/state_management/discover_internal_state_container.ts +++ b/src/plugins/discover/public/application/main/state_management/discover_internal_state_container.ts @@ -24,6 +24,7 @@ export interface InternalState { expandedDoc: DataTableRecord | undefined; customFilters: Filter[]; overriddenVisContextAfterInvalidation: UnifiedHistogramVisContext | {} | undefined; // it will be used during saved search saving + isESQLToDataViewTransitionModalVisible?: boolean; } export interface InternalStateTransitions { @@ -48,6 +49,9 @@ export interface InternalStateTransitions { overriddenVisContextAfterInvalidation: UnifiedHistogramVisContext | {} | undefined ) => InternalState; resetOnSavedSearchChange: (state: InternalState) => () => InternalState; + setIsESQLToDataViewTransitionModalVisible: ( + state: InternalState + ) => (isVisible: boolean) => InternalState; } export type DiscoverInternalStateContainer = ReduxLikeStateContainer< @@ -80,6 +84,11 @@ export function getInternalStateContainer() { ...prevState, isDataViewLoading: loading, }), + setIsESQLToDataViewTransitionModalVisible: + (prevState: InternalState) => (isVisible: boolean) => ({ + ...prevState, + isESQLToDataViewTransitionModalVisible: isVisible, + }), setSavedDataViews: (prevState: InternalState) => (nextDataViewList: DataViewListItem[]) => ({ ...prevState, savedDataViews: nextDataViewList, diff --git a/src/plugins/discover/public/application/main/state_management/discover_state.ts b/src/plugins/discover/public/application/main/state_management/discover_state.ts index 169e596a2cf93..65bb66c5efeac 100644 --- a/src/plugins/discover/public/application/main/state_management/discover_state.ts +++ b/src/plugins/discover/public/application/main/state_management/discover_state.ts @@ -23,6 +23,7 @@ import { DataView, DataViewSpec, DataViewType } from '@kbn/data-views-plugin/pub import type { SavedSearch } from '@kbn/saved-search-plugin/public'; import { v4 as uuidv4 } from 'uuid'; import { merge } from 'rxjs'; +import { getInitialESQLQuery } from '@kbn/esql-utils'; import { AggregateQuery, Query, TimeRange } from '@kbn/es-query'; import { loadSavedSearch as loadSavedSearchFn } from './utils/load_saved_search'; import { restoreStateFromSavedSearch } from '../../../services/saved_searches/restore_from_saved_search'; @@ -174,6 +175,16 @@ export interface DiscoverStateContainer { * @param dataView */ onDataViewEdited: (dataView: DataView) => Promise; + /** + * Triggered when transitioning from ESQL to Dataview + * Clean ups the ES|QL query and moves to the dataview mode + */ + transitionFromESQLToDataview: (dataViewId: string) => void; + /** + * Triggered when transitioning from ESQL to Dataview + * Clean ups the ES|QL query and moves to the dataview mode + */ + transitionFromDataviewToESQL: (dataView: DataView) => void; /** * Triggered when a saved search is opened in the savedObject finder * @param savedSearchId @@ -352,6 +363,29 @@ export function getDiscoverStateContainer({ } }; + const transitionFromESQLToDataview = (dataViewId: string) => { + appStateContainer.update({ + query: { + language: 'kuery', + query: '', + }, + dataSource: { + type: DataSourceType.DataView, + dataViewId, + }, + }); + }; + + const transitionFromDataviewToESQL = (dataView: DataView) => { + const queryString = getInitialESQLQuery(dataView); + appStateContainer.update({ + query: { esql: queryString }, + dataSource: { + type: DataSourceType.Esql, + }, + }); + }; + const onDataViewCreated = async (nextDataView: DataView) => { if (!nextDataView.isPersisted()) { internalStateContainer.transitions.appendAdHocDataViews(nextDataView); @@ -544,6 +578,8 @@ export function getDiscoverStateContainer({ onDataViewCreated, onDataViewEdited, onOpenSavedSearch, + transitionFromESQLToDataview, + transitionFromDataviewToESQL, onUpdateQuery, setDataView, undoSavedSearchChanges, 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 index 551d8ad99ef63..842d57a1c5a0a 100644 --- a/src/plugins/unified_search/public/dataview_picker/change_dataview.test.tsx +++ b/src/plugins/unified_search/public/dataview_picker/change_dataview.test.tsx @@ -86,7 +86,6 @@ describe('DataView component', () => { 'data-test-subj': 'dataview-trigger', }, onChangeDataView: jest.fn(), - onTextLangQuerySubmit: jest.fn(), }; }); diff --git a/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx b/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx index b887a9a1418e4..b0e85d1503cbd 100644 --- a/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx +++ b/src/plugins/unified_search/public/dataview_picker/change_dataview.tsx @@ -7,7 +7,7 @@ */ import { i18n } from '@kbn/i18n'; -import React, { useState, useEffect, useCallback, useMemo } from 'react'; +import React, { useState, useEffect, useMemo } from 'react'; import { css } from '@emotion/react'; import { EuiPopover, @@ -29,27 +29,10 @@ import type { DataView } from '@kbn/data-views-plugin/public'; import type { IUnifiedSearchPluginServices } from '../types'; import { type DataViewPickerPropsExtended } from './data_view_picker'; import type { DataViewListItemEnhanced } from './dataview_list'; -import type { TextBasedLanguagesTransitionModalProps } from './text_languages_transition_modal'; import adhoc from './assets/adhoc.svg'; import { changeDataViewStyles } from './change_dataview.styles'; import { DataViewSelector } from './data_view_selector'; -// local storage key for the text based languages transition modal -const TEXT_LANG_TRANSITION_MODAL_KEY = 'data.textLangTransitionModal'; - -const Fallback = () =>
; - -const LazyTextBasedLanguagesTransitionModal = React.lazy( - () => import('./text_languages_transition_modal') -); -export const TextBasedLanguagesTransitionModal = ( - props: TextBasedLanguagesTransitionModalProps -) => ( - }> - - -); - const mapAdHocDataView = (adHocDataView: DataView): DataViewListItemEnhanced => { return { title: adHocDataView.title, @@ -70,14 +53,10 @@ export function ChangeDataView({ onDataViewCreated, trigger, selectableProps, - onSaveTextLanguageQuery, - onTextLangQuerySubmit, textBasedLanguage, - shouldShowTextBasedLanguageTransitionModal = true, isDisabled, onEditDataView, onCreateDefaultAdHocDataView, - openESQLInlineDocs, }: DataViewPickerPropsExtended) { const { euiTheme } = useEuiTheme(); const [isPopoverOpen, setPopoverIsOpen] = useState(false); @@ -86,11 +65,9 @@ export function ChangeDataView({ const [isTextBasedLangSelected, setIsTextBasedLangSelected] = useState( Boolean(textBasedLanguage) ); - const [isTextLangTransitionModalVisible, setIsTextLangTransitionModalVisible] = useState(false); - const [selectedDataView, setSelectedDataView] = useState(undefined); const kibana = useKibana(); - const { application, data, storage, dataViews, dataViewEditor } = kibana.services; + const { application, data, dataViews, dataViewEditor } = kibana.services; const styles = changeDataViewStyles({ fullWidth: trigger.fullWidth, @@ -98,10 +75,6 @@ export function ChangeDataView({ theme: euiTheme, }); - const [isTextLangTransitionModalDismissed, setIsTextLangTransitionModalDismissed] = useState(() => - Boolean(storage.get(TEXT_LANG_TRANSITION_MODAL_KEY)) - ); - // Create a reusable id to ensure search input is the first focused item in the popover even though it's not the first item const searchListInputId = useGeneratedHtmlId({ prefix: 'dataviewPickerListSearchInput' }); @@ -114,10 +87,6 @@ export function ChangeDataView({ adHocDataViews?.map(mapAdHocDataView) ?? []; setDataViewsList(savedDataViewRefs.concat(adHocDataViewRefs)); - if (currentDataViewId) { - const currentDataview = await data.dataViews.get(currentDataViewId, false); - setSelectedDataView(currentDataview); - } }; fetchDataViews(); }, [data, currentDataViewId, adHocDataViews, savedDataViews]); @@ -274,8 +243,6 @@ export function ChangeDataView({ selectableProps={selectableProps} setPopoverIsOpen={setPopoverIsOpen} onChangeDataView={async (newId) => { - const currentDataview = await data.dataViews.get(newId, false); - setSelectedDataView(currentDataview); setPopoverIsOpen(false); onChangeDataView(newId); }} @@ -287,114 +254,47 @@ export function ChangeDataView({ return panelItems; }; - let modal; - - const onTransitionModalDismiss = useCallback(() => { - storage.set(TEXT_LANG_TRANSITION_MODAL_KEY, true); - setIsTextLangTransitionModalDismissed(true); - }, [storage]); - - const cleanup = useCallback( - (shouldDismissModal: boolean) => { - setIsTextLangTransitionModalVisible(false); - setIsTextBasedLangSelected(false); - // clean up the Text based language query - onTextLangQuerySubmit?.({ - language: 'kuery', - query: '', - }); - if (selectedDataView?.id) { - onChangeDataView(selectedDataView?.id); - } - setTriggerLabel(trigger.label); - if (shouldDismissModal) { - onTransitionModalDismiss(); - } - }, - [ - onChangeDataView, - onTextLangQuerySubmit, - onTransitionModalDismiss, - selectedDataView?.id, - trigger.label, - ] - ); - - const onModalClose = useCallback( - (shouldDismissModal: boolean, needsSave?: boolean) => { - if (Boolean(needsSave)) { - setIsTextLangTransitionModalVisible(false); - onSaveTextLanguageQuery?.({ - onSave: () => { - cleanup(shouldDismissModal); - }, - onCancel: () => { - setIsTextLangTransitionModalVisible(false); - }, - }); - } else { - cleanup(shouldDismissModal); - } - }, - [cleanup, onSaveTextLanguageQuery] - ); - - if (isTextLangTransitionModalVisible && !isTextLangTransitionModalDismissed) { - modal = ( - - ); - } - return ( - <> - - {!isTextBasedLangSelected && ( - <> - - - - {i18n.translate('unifiedSearch.query.queryBar.esqlMenu.switcherLabelTitle', { - defaultMessage: 'Data view', - })} - - setPopoverIsOpen(false)} - panelPaddingSize="none" - initialFocus={`#${searchListInputId}`} - display="block" - buffer={8} - > -
- -
- - - - - )} - - - {modal} - + + {!isTextBasedLangSelected && ( + <> + + + + {i18n.translate('unifiedSearch.query.queryBar.esqlMenu.switcherLabelTitle', { + defaultMessage: 'Data view', + })} + + setPopoverIsOpen(false)} + panelPaddingSize="none" + initialFocus={`#${searchListInputId}`} + display="block" + buffer={8} + > +
+ +
+ + + + + )} + ); } 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 index 00cc834fe76eb..ab13f5c1a257b 100644 --- a/src/plugins/unified_search/public/dataview_picker/data_view_picker.tsx +++ b/src/plugins/unified_search/public/dataview_picker/data_view_picker.tsx @@ -9,7 +9,6 @@ import React from 'react'; import type { EuiButtonProps, EuiSelectableProps } from '@elastic/eui'; import type { DataView, DataViewListItem, DataViewSpec } from '@kbn/data-views-plugin/public'; -import type { AggregateQuery, Query } from '@kbn/es-query'; import { TextBasedLanguages } from '@kbn/esql-utils'; import { ChangeDataView } from './change_dataview'; @@ -18,11 +17,6 @@ export type ChangeDataViewTriggerProps = EuiButtonProps & { title?: string; }; -export interface OnSaveTextLanguageQueryProps { - onSave: () => void; - onCancel: () => void; -} - /** @public */ export interface DataViewPickerProps { /** @@ -76,31 +70,13 @@ export interface DataViewPickerProps { * will be available. */ textBasedLanguages?: TextBasedLanguages[]; - /** - * Callback that is called when the user clicks the Save and switch transition modal button - */ - onSaveTextLanguageQuery?: ({ onSave, onCancel }: OnSaveTextLanguageQueryProps) => void; - /** - * Determines if the text based language transition - * modal should be shown when switching data views - */ - shouldShowTextBasedLanguageTransitionModal?: boolean; - /** * Makes the picker disabled by disabling the popover trigger */ isDisabled?: boolean; - /** - * Opens the ESQL inline docs - */ - openESQLInlineDocs?: () => void; } export interface DataViewPickerPropsExtended extends DataViewPickerProps { - /** - * Callback that is called when the user clicks the submit button - */ - onTextLangQuerySubmit?: (query?: Query | AggregateQuery) => void; /** * Text based language that is currently selected; depends on the query */ @@ -119,13 +95,9 @@ export const DataViewPicker = ({ trigger, selectableProps, textBasedLanguages, - onSaveTextLanguageQuery, - onTextLangQuerySubmit, textBasedLanguage, - shouldShowTextBasedLanguageTransitionModal, onCreateDefaultAdHocDataView, isDisabled, - openESQLInlineDocs, }: DataViewPickerPropsExtended) => { return ( ); }; diff --git a/src/plugins/unified_search/public/dataview_picker/index.tsx b/src/plugins/unified_search/public/dataview_picker/index.tsx index 895f48384ab18..8a0870d872653 100644 --- a/src/plugins/unified_search/public/dataview_picker/index.tsx +++ b/src/plugins/unified_search/public/dataview_picker/index.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { withSuspense } from '@kbn/shared-ux-utility'; -export type { DataViewPickerProps, OnSaveTextLanguageQueryProps } from './data_view_picker'; +export type { DataViewPickerProps } from './data_view_picker'; /** * The Lazily-loaded `DataViewsList` component. Consumers should use `React.Suspense` or diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx index cd69a1cbe66ff..229296e92f192 100644 --- a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx +++ b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx @@ -49,11 +49,7 @@ import QueryStringInputUI from './query_string_input'; import { NoDataPopover } from './no_data_popover'; import { shallowEqual } from '../utils/shallow_equal'; import { AddFilterPopover } from './add_filter_popover'; -import { - DataViewPicker, - DataViewPickerProps, - OnSaveTextLanguageQueryProps, -} from '../dataview_picker'; +import { DataViewPicker, DataViewPickerProps } from '../dataview_picker'; import { FilterButtonGroup } from '../filter_bar/filter_button_group/filter_button_group'; import type { @@ -169,7 +165,6 @@ export interface QueryBarTopRowProps dataViewPickerComponentProps?: DataViewPickerProps; textBasedLanguageModeErrors?: Error[]; textBasedLanguageModeWarning?: string; - onTextBasedSavedAndExit?: ({ onSave }: OnSaveTextLanguageQueryProps) => void; filterBar?: React.ReactNode; showDatePickerAsBadge?: boolean; showSubmitButton?: boolean; @@ -637,9 +632,7 @@ export const QueryBarTopRow = React.memo( diff --git a/src/plugins/unified_search/public/search_bar/create_search_bar.tsx b/src/plugins/unified_search/public/search_bar/create_search_bar.tsx index 9415f09515fbc..38e3b11ae15e7 100644 --- a/src/plugins/unified_search/public/search_bar/create_search_bar.tsx +++ b/src/plugins/unified_search/public/search_bar/create_search_bar.tsx @@ -261,7 +261,6 @@ export function createSearchBar({ dataViewPickerComponentProps={props.dataViewPickerComponentProps} textBasedLanguageModeErrors={props.textBasedLanguageModeErrors} textBasedLanguageModeWarning={props.textBasedLanguageModeWarning} - onTextBasedSavedAndExit={props.onTextBasedSavedAndExit} displayStyle={props.displayStyle} isScreenshotMode={isScreenshotMode} dataTestSubj={props.dataTestSubj} diff --git a/src/plugins/unified_search/public/search_bar/search_bar.tsx b/src/plugins/unified_search/public/search_bar/search_bar.tsx index 0e82202a66024..2d7ce30423fc3 100644 --- a/src/plugins/unified_search/public/search_bar/search_bar.tsx +++ b/src/plugins/unified_search/public/search_bar/search_bar.tsx @@ -39,7 +39,7 @@ import type { IUnifiedSearchPluginServices } from '../types'; import { SavedQueryMeta, SaveQueryForm } from '../saved_query_form'; import { SavedQueryManagementList } from '../saved_query_management'; import { QueryBarMenu, QueryBarMenuProps } from '../query_string_input/query_bar_menu'; -import type { DataViewPickerProps, OnSaveTextLanguageQueryProps } from '../dataview_picker'; +import type { DataViewPickerProps } from '../dataview_picker'; import QueryBarTopRow, { QueryBarTopRowProps } from '../query_string_input/query_bar_top_row'; import { FilterBar, FilterItems } from '../filter_bar'; import type { @@ -121,7 +121,6 @@ export interface SearchBarOwnProps { dataViewPickerComponentProps?: DataViewPickerProps; textBasedLanguageModeErrors?: Error[]; textBasedLanguageModeWarning?: string; - onTextBasedSavedAndExit?: ({ onSave }: OnSaveTextLanguageQueryProps) => void; showSubmitButton?: boolean; submitButtonStyle?: QueryBarTopRowProps['submitButtonStyle']; // defines size of suggestions query popover @@ -648,7 +647,6 @@ class SearchBarUI extends C dataViewPickerComponentProps={this.props.dataViewPickerComponentProps} textBasedLanguageModeErrors={this.props.textBasedLanguageModeErrors} textBasedLanguageModeWarning={this.props.textBasedLanguageModeWarning} - onTextBasedSavedAndExit={this.props.onTextBasedSavedAndExit} showDatePickerAsBadge={this.shouldShowDatePickerAsBadge()} filterBar={filterBar} suggestionsSize={this.props.suggestionsSize} diff --git a/test/functional/apps/discover/esql/_esql_view.ts b/test/functional/apps/discover/esql/_esql_view.ts index b1a2948057f56..a66471b921528 100644 --- a/test/functional/apps/discover/esql/_esql_view.ts +++ b/test/functional/apps/discover/esql/_esql_view.ts @@ -255,7 +255,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.discover.waitUntilSearchingHasFinished(); await testSubjects.click('switch-to-dataviews'); await retry.try(async () => { - await testSubjects.existOrFail('unifiedSearch_switch_modal'); + await testSubjects.existOrFail('discover-esql-to-dataview-modal'); }); }); @@ -268,17 +268,17 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.discover.waitUntilSearchingHasFinished(); await testSubjects.click('switch-to-dataviews'); await retry.try(async () => { - await testSubjects.existOrFail('unifiedSearch_switch_modal'); + await testSubjects.existOrFail('discover-esql-to-dataview-modal'); }); await find.clickByCssSelector( - '[data-test-subj="unifiedSearch_switch_modal"] .euiModal__closeIcon' + '[data-test-subj="discover-esql-to-dataview-modal"] .euiModal__closeIcon' ); await retry.try(async () => { - await testSubjects.missingOrFail('unifiedSearch_switch_modal'); + await testSubjects.missingOrFail('discover-esql-to-dataview-modal'); }); await PageObjects.discover.saveSearch('esql_test'); await testSubjects.click('switch-to-dataviews'); - await testSubjects.missingOrFail('unifiedSearch_switch_modal'); + await testSubjects.missingOrFail('discover-esql-to-dataview-modal'); }); it('should show switch modal when switching to a data view while a saved search with unsaved changes is open', async () => { @@ -293,7 +293,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.discover.waitUntilSearchingHasFinished(); await testSubjects.click('switch-to-dataviews'); await retry.try(async () => { - await testSubjects.existOrFail('unifiedSearch_switch_modal'); + await testSubjects.existOrFail('discover-esql-to-dataview-modal'); }); }); }); diff --git a/test/functional/page_objects/unified_search_page.ts b/test/functional/page_objects/unified_search_page.ts index cd8058234bbc8..8b7ee691a9f25 100644 --- a/test/functional/page_objects/unified_search_page.ts +++ b/test/functional/page_objects/unified_search_page.ts @@ -45,6 +45,6 @@ export class UnifiedSearchPageObject extends FtrService { public async switchToDataViewMode() { await this.testSubjects.click('switch-to-dataviews'); - await this.testSubjects.click('unifiedSearch_switch_noSave'); + await this.testSubjects.click('discover-esql-to-dataview-no-save-btn'); } } diff --git a/x-pack/plugins/lens/public/app_plugin/app.tsx b/x-pack/plugins/lens/public/app_plugin/app.tsx index 1168c0d07ea4b..de20db385c9e9 100644 --- a/x-pack/plugins/lens/public/app_plugin/app.tsx +++ b/x-pack/plugins/lens/public/app_plugin/app.tsx @@ -471,14 +471,6 @@ export function App({ [dataViews, uiActions, http, notifications, uiSettings, initialContext, dispatch] ); - const onTextBasedSavedAndExit = useCallback(async ({ onSave, onCancel: _onCancel }) => { - setIsSaveModalVisible(true); - setShouldCloseAndSaveTextBasedQuery(true); - saveAndExit.current = () => { - onSave(); - }; - }, []); - // remember latest URL based on the configuration // url_panel_content has a similar logic const shareURLCache = useRef({ params: '', url: '' }); @@ -571,7 +563,6 @@ export function App({ topNavMenuEntryGenerators={topNavMenuEntryGenerators} initialContext={initialContext} indexPatternService={indexPatternService} - onTextBasedSavedAndExit={onTextBasedSavedAndExit} getUserMessages={getUserMessages} shortUrlService={shortUrlService} startServices={coreStart} diff --git a/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx b/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx index 545a31032155a..3f12c6f63ca95 100644 --- a/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx +++ b/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx @@ -281,7 +281,6 @@ export const LensTopNavMenu = ({ initialContext, indexPatternService, currentDoc, - onTextBasedSavedAndExit, getUserMessages, shortUrlService, isCurrentStateDirty, @@ -1112,7 +1111,6 @@ export const LensTopNavMenu = ({ ) } textBasedLanguageModeErrors={textBasedLanguageModeErrors} - onTextBasedSavedAndExit={onTextBasedSavedAndExit} showFilterBar={true} data-test-subj="lnsApp_topNav" screenTitle={'lens'} diff --git a/x-pack/plugins/lens/public/app_plugin/types.ts b/x-pack/plugins/lens/public/app_plugin/types.ts index 7bfa16b2ebd77..317efd5be507f 100644 --- a/x-pack/plugins/lens/public/app_plugin/types.ts +++ b/x-pack/plugins/lens/public/app_plugin/types.ts @@ -126,7 +126,6 @@ export interface LensTopNavMenuProps { initialContext?: VisualizeFieldContext | VisualizeEditorContext; currentDoc: Document | undefined; indexPatternService: IndexPatternServiceAPI; - onTextBasedSavedAndExit: ({ onSave }: { onSave: () => void }) => Promise; getUserMessages: UserMessagesGetter; shortUrlService: (params: LensAppLocatorParams) => Promise; isCurrentStateDirty: boolean; diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 1a1ec4b0c4e1b..c7382e35da248 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -7221,11 +7221,11 @@ "unifiedSearch.query.queryBar.indexPattern.findFilterSet": "Trouver une requête", "unifiedSearch.query.queryBar.indexPattern.manageFieldButton": "Gérer cette vue de données", "unifiedSearch.query.queryBar.indexPattern.temporaryDataviewLabel": "Temporaire", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalBody": "Modifier la vue de données supprime la requête {language} en cours. Sauvegardez cette recherche pour ne pas perdre de travail.", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalCloseButton": "Basculer sans sauvegarder", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalDismissButton": "Ne plus afficher cet avertissement", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalSaveButton": "Sauvegarder et basculer", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalTitle": "Votre requête sera supprimée", + "discover.esqlToDataviewTransitionModalBody": "Modifier la vue de données supprime la requête ES|QL en cours. Sauvegardez cette recherche pour ne pas perdre de travail.", + "discover.esqlToDataviewTransitionModalCloseButton": "Basculer sans sauvegarder", + "discover.esqlToDataviewTransitionModalDismissButton": "Ne plus afficher cet avertissement", + "discover.esqlToDataviewTransitionModalSaveButton": "Sauvegarder et basculer", + "discover.esqlToDataviewTransitionModalTitle": "Votre requête sera supprimée", "unifiedSearch.query.queryBar.kqlLanguageName": "KQL", "unifiedSearch.query.queryBar.KQLNestedQuerySyntaxInfoDocLinkText": "documents", "unifiedSearch.query.queryBar.KQLNestedQuerySyntaxInfoOptOutText": "Ne plus afficher", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 046f6cde68f49..92f7e7bdb1469 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -7197,11 +7197,11 @@ "unifiedSearch.query.queryBar.indexPattern.findFilterSet": "クエリを検索", "unifiedSearch.query.queryBar.indexPattern.manageFieldButton": "このデータビューを管理", "unifiedSearch.query.queryBar.indexPattern.temporaryDataviewLabel": "一時", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalBody": "データビューを切り替えると、現在の{language}クエリが削除されます。この検索を保存すると、作業内容が失われないことが保証されます。", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalCloseButton": "保存せずに切り替え", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalDismissButton": "次回以降この警告を表示しない", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalSaveButton": "保存して切り替え", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalTitle": "クエリは削除されます", + "discover.esqlToDataviewTransitionModalBody": "データビューを切り替えると、現在のES|QLクエリが削除されます。この検索を保存すると、作業内容が失われないことが保証されます。", + "discover.esqlToDataviewTransitionModalCloseButton": "保存せずに切り替え", + "discover.esqlToDataviewTransitionModalDismissButton": "次回以降この警告を表示しない", + "discover.esqlToDataviewTransitionModalSaveButton": "保存して切り替え", + "discover.esqlToDataviewTransitionModalTitle": "クエリは削除されます", "unifiedSearch.query.queryBar.kqlLanguageName": "KQL", "unifiedSearch.query.queryBar.KQLNestedQuerySyntaxInfoDocLinkText": "ドキュメント", "unifiedSearch.query.queryBar.KQLNestedQuerySyntaxInfoOptOutText": "今後表示しない", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 3b7c18c2e62ba..ef239550b2e6d 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -7234,11 +7234,11 @@ "unifiedSearch.query.queryBar.indexPattern.findFilterSet": "查找查询", "unifiedSearch.query.queryBar.indexPattern.manageFieldButton": "管理此数据视图", "unifiedSearch.query.queryBar.indexPattern.temporaryDataviewLabel": "临时", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalBody": "切换数据视图会移除当前的 {language} 查询。保存此搜索以确保不会丢失工作。", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalCloseButton": "切换而不保存", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalDismissButton": "不再显示此警告", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalSaveButton": "保存并切换", - "unifiedSearch.query.queryBar.indexPattern.textBasedLanguagesTransitionModalTitle": "将移除您的查询", + "discover.esqlToDataviewTransitionModalBody": "切换数据视图会移除当前的 ES|QL 查询。保存此搜索以确保不会丢失工作。", + "discover.esqlToDataviewTransitionModalCloseButton": "切换而不保存", + "discover.esqlToDataviewTransitionModalDismissButton": "不再显示此警告", + "discover.esqlToDataviewTransitionModalSaveButton": "保存并切换", + "discover.esqlToDataviewTransitionModalTitle": "将移除您的查询", "unifiedSearch.query.queryBar.kqlLanguageName": "KQL", "unifiedSearch.query.queryBar.KQLNestedQuerySyntaxInfoDocLinkText": "文档", "unifiedSearch.query.queryBar.KQLNestedQuerySyntaxInfoOptOutText": "不再显示", diff --git a/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts b/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts index 766e9e2a03e49..80fff5ef76014 100644 --- a/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts +++ b/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts @@ -262,7 +262,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.discover.waitUntilSearchingHasFinished(); await testSubjects.click('switch-to-dataviews'); await retry.try(async () => { - await testSubjects.existOrFail('unifiedSearch_switch_modal'); + await testSubjects.existOrFail('discover-esql-to-dataview-modal'); }); }); @@ -275,17 +275,17 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.discover.waitUntilSearchingHasFinished(); await testSubjects.click('switch-to-dataviews'); await retry.try(async () => { - await testSubjects.existOrFail('unifiedSearch_switch_modal'); + await testSubjects.existOrFail('discover-esql-to-dataview-modal'); }); await find.clickByCssSelector( - '[data-test-subj="unifiedSearch_switch_modal"] .euiModal__closeIcon' + '[data-test-subj="discover-esql-to-dataview-modal"] .euiModal__closeIcon' ); await retry.try(async () => { - await testSubjects.missingOrFail('unifiedSearch_switch_modal'); + await testSubjects.missingOrFail('discover-esql-to-dataview-modal'); }); await PageObjects.discover.saveSearch('esql_test'); await testSubjects.click('switch-to-dataviews'); - await testSubjects.missingOrFail('unifiedSearch_switch_modal'); + await testSubjects.missingOrFail('discover-esql-to-dataview-modal'); }); it('should show switch modal when switching to a data view while a saved search with unsaved changes is open', async () => { @@ -300,7 +300,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.discover.waitUntilSearchingHasFinished(); await testSubjects.click('switch-to-dataviews'); await retry.try(async () => { - await testSubjects.existOrFail('unifiedSearch_switch_modal'); + await testSubjects.existOrFail('discover-esql-to-dataview-modal'); }); }); }); From 315ee3073f1e013c420d5d8e02c9ca7a2df80d4e Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Fri, 2 Aug 2024 10:38:53 +0200 Subject: [PATCH 4/7] Adds unit tests --- .../top_nav/get_top_nav_links.test.ts | 27 +++++++++++++++++++ .../components/top_nav/get_top_nav_links.tsx | 7 +++-- .../state_management/discover_state.test.ts | 22 +++++++++++++++ 3 files changed, 54 insertions(+), 2 deletions(-) diff --git a/src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.test.ts b/src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.test.ts index 2faf12d62bf0a..f541d9280f452 100644 --- a/src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.test.ts +++ b/src/plugins/discover/public/application/main/components/top_nav/get_top_nav_links.test.ts @@ -17,6 +17,9 @@ const services = { save: true, }, }, + uiSettings: { + get: jest.fn(() => true), + }, } as unknown as DiscoverServices; const state = {} as unknown as DiscoverStateContainer; @@ -30,9 +33,21 @@ test('getTopNavLinks result', () => { isEsqlMode: false, adHocDataViews: [], topNavCustomization: undefined, + shouldShowESQLToDataviewTransitionModal: false, }); expect(topNavLinks).toMatchInlineSnapshot(` Array [ + Object { + "color": "text", + "description": "Try ES|QL", + "emphasize": true, + "fill": false, + "iconType": "editorRedo", + "id": "esql", + "label": "Try ES|QL", + "run": [Function], + "testId": "select-text-based-language-btn", + }, Object { "description": "New Search", "id": "new", @@ -83,9 +98,21 @@ test('getTopNavLinks result for ES|QL mode', () => { isEsqlMode: true, adHocDataViews: [], topNavCustomization: undefined, + shouldShowESQLToDataviewTransitionModal: false, }); expect(topNavLinks).toMatchInlineSnapshot(` Array [ + Object { + "color": "text", + "description": "Switch to classic", + "emphasize": true, + "fill": false, + "iconType": "editorRedo", + "id": "esql", + "label": "Switch to classic", + "run": [Function], + "testId": "switch-to-dataviews", + }, Object { "description": "New Search", "id": "new", 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 index 631abdd3e4e46..ca10da057e8ee 100644 --- 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 @@ -65,7 +65,10 @@ export const getTopNavLinks = ({ testId: 'discoverAlertsButton', }; - const esqLToggle = { + /** + * Switches from ES|QL to classic mode and vice versa + */ + const esqLDataViewTransitionToggle = { id: 'esql', label: isEsqlMode ? i18n.translate('discover.localMenu.localMenu.switchToClassicTitle', { @@ -278,7 +281,7 @@ export const getTopNavLinks = ({ const entries = [...(topNavCustomization?.getMenuItems?.() ?? [])]; if (services.uiSettings.get(ENABLE_ESQL)) { - entries.push({ data: esqLToggle, order: 0 }); + entries.push({ data: esqLDataViewTransitionToggle, order: 0 }); } if (!defaultMenu?.newItem?.disabled) { diff --git a/src/plugins/discover/public/application/main/state_management/discover_state.test.ts b/src/plugins/discover/public/application/main/state_management/discover_state.test.ts index b56600b196944..d77806f136fad 100644 --- a/src/plugins/discover/public/application/main/state_management/discover_state.test.ts +++ b/src/plugins/discover/public/application/main/state_management/discover_state.test.ts @@ -753,6 +753,28 @@ describe('Test discover state actions', () => { expect(persistedDataViewId).toBe(nextSavedSearch?.searchSource.getField('index')!.id); }); + test('transitionFromDataviewToESQL', async () => { + const savedSearchWithQuery = copySavedSearch(savedSearchMock); + const query = { query: "foo: 'bar'", language: 'kuery' }; + savedSearchWithQuery.searchSource.setField('query', query); + const { state } = await getState('/', { savedSearch: savedSearchWithQuery }); + await state.actions.transitionFromDataviewToESQL(dataViewMock); + expect(state.appState.getState().query).toStrictEqual({ + esql: 'FROM the-data-view-title | LIMIT 10', + }); + }); + + test('transitionFromESQLToDataview', async () => { + const savedSearchWithQuery = copySavedSearch(savedSearchMock); + const query = { + esql: 'FROM the-data-view-title | LIMIT 10', + }; + savedSearchWithQuery.searchSource.setField('query', query); + const { state } = await getState('/', { savedSearch: savedSearchWithQuery }); + await state.actions.transitionFromESQLToDataview('the-data-view-id'); + expect(state.appState.getState().query).toStrictEqual({ query: '', language: 'kuery' }); + }); + test('onChangeDataView', async () => { const { state, getCurrentUrl } = await getState('/', { savedSearch: savedSearchMock }); const { actions, savedSearchState, dataState } = state; From cb0e7df220aa8923439c9e7d5bb25ed52e4f2470 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Fri, 2 Aug 2024 11:02:19 +0200 Subject: [PATCH 5/7] Cleanup translations --- x-pack/plugins/translations/translations/fr-FR.json | 1 - x-pack/plugins/translations/translations/ja-JP.json | 1 - x-pack/plugins/translations/translations/zh-CN.json | 1 - 3 files changed, 3 deletions(-) diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index c7382e35da248..816b22bb6a465 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -7236,7 +7236,6 @@ "unifiedSearch.query.queryBar.searchInputPlaceholder": "Filtrer vos données à l'aide de la syntaxe {language}", "unifiedSearch.query.queryBar.searchInputPlaceholderForText": "Filtrer vos données", "unifiedSearch.query.queryBar.syntaxOptionsTitle": "Options de syntaxe", - "unifiedSearch.query.queryBar.textBasedLanguagesTryLabel": "Essayer ES|QL", "unifiedSearch.query.queryBar.textBasedNonTimestampWarning": "La sélection de plage de données pour les requêtes en {language} requiert la présence d'un champ @timestamp dans l'ensemble de données.", "unifiedSearch.queryBarTopRow.datePicker.disabledLabel": "Tout le temps", "unifiedSearch.queryBarTopRow.submitButton.cancel": "Annuler", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 92f7e7bdb1469..e79d9d157cf16 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -7212,7 +7212,6 @@ "unifiedSearch.query.queryBar.searchInputPlaceholder": "{language}構文を使用してデータをフィルタリング", "unifiedSearch.query.queryBar.searchInputPlaceholderForText": "データのフィルタリング", "unifiedSearch.query.queryBar.syntaxOptionsTitle": "構文オプション", - "unifiedSearch.query.queryBar.textBasedLanguagesTryLabel": "ES|QLを試す", "unifiedSearch.query.queryBar.textBasedNonTimestampWarning": "{language}クエリの日付範囲選択では、データセットに@timestampフィールドが存在している必要があります。", "unifiedSearch.queryBarTopRow.datePicker.disabledLabel": "常時", "unifiedSearch.queryBarTopRow.submitButton.cancel": "キャンセル", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index ef239550b2e6d..3358154f20964 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -7249,7 +7249,6 @@ "unifiedSearch.query.queryBar.searchInputPlaceholder": "使用 {language} 语法筛选数据", "unifiedSearch.query.queryBar.searchInputPlaceholderForText": "筛选您的数据", "unifiedSearch.query.queryBar.syntaxOptionsTitle": "语法选项", - "unifiedSearch.query.queryBar.textBasedLanguagesTryLabel": "尝试 ES|QL", "unifiedSearch.query.queryBar.textBasedNonTimestampWarning": "{language} 查询的日期范围选择要求数据集中存在 @timestamp 字段。", "unifiedSearch.queryBarTopRow.datePicker.disabledLabel": "所有时间", "unifiedSearch.queryBarTopRow.submitButton.cancel": "取消", From 7d0d90ab56a384533f3dca09bf29cf5ce5195539 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Fri, 2 Aug 2024 11:47:44 +0200 Subject: [PATCH 6/7] Fix jest test --- .../src/text_based_languages_editor.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.test.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.test.tsx index edc0bea76ada2..1337d204759b1 100644 --- a/packages/kbn-text-based-editor/src/text_based_languages_editor.test.tsx +++ b/packages/kbn-text-based-editor/src/text_based_languages_editor.test.tsx @@ -63,8 +63,6 @@ describe('TextBasedLanguagesEditor', () => { query: { esql: 'from test' }, onTextLangQueryChange: jest.fn(), onTextLangQuerySubmit: jest.fn(), - isHelpMenuOpen: false, - setIsHelpMenuOpen: jest.fn(), }; }); it('should render the editor component', async () => { From bc4663ce11fe04817dc74c1e64ae22260b51e9d9 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Fri, 2 Aug 2024 13:42:41 +0200 Subject: [PATCH 7/7] Fixes --- .../public/application/main/state_management/discover_state.ts | 2 ++ .../top_nav_menu/__snapshots__/top_nav_menu_item.test.tsx.snap | 1 + 2 files changed, 3 insertions(+) diff --git a/src/plugins/discover/public/application/main/state_management/discover_state.ts b/src/plugins/discover/public/application/main/state_management/discover_state.ts index 65bb66c5efeac..973cdf831c23a 100644 --- a/src/plugins/discover/public/application/main/state_management/discover_state.ts +++ b/src/plugins/discover/public/application/main/state_management/discover_state.ts @@ -369,6 +369,7 @@ export function getDiscoverStateContainer({ language: 'kuery', query: '', }, + columns: [], dataSource: { type: DataSourceType.DataView, dataViewId, @@ -383,6 +384,7 @@ export function getDiscoverStateContainer({ dataSource: { type: DataSourceType.Esql, }, + columns: [], }); }; diff --git a/src/plugins/navigation/public/top_nav_menu/__snapshots__/top_nav_menu_item.test.tsx.snap b/src/plugins/navigation/public/top_nav_menu/__snapshots__/top_nav_menu_item.test.tsx.snap index 570699aa0c0e2..ab174c6d00102 100644 --- a/src/plugins/navigation/public/top_nav_menu/__snapshots__/top_nav_menu_item.test.tsx.snap +++ b/src/plugins/navigation/public/top_nav_menu/__snapshots__/top_nav_menu_item.test.tsx.snap @@ -2,6 +2,7 @@ exports[`TopNavMenu Should render emphasized item which should be clickable 1`] = `