From 0271e798c4a5ab693bbf73f3b4434203ab70b128 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Mon, 21 Mar 2022 17:08:57 +0200 Subject: [PATCH] [Unified search] Moves dataview picker to the search bar (#126560) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [Unified search] Moves dataview picker to the search bar * alter texts * Remove unused file * [ChangeDataView] Design cleanup * Fix services mock failure * Show newly created datavuew on the list * Keep dataview picker in discover in mobile view * Cleanup * Cleanup translations * Fix some discover FTs * Fix management FTs * More test fixes * Added a dismissible tour * Pulled the selectabl list into a new component … for reuse Called `DataViewsList`. I then changed Lens’ config panel’s own EuiSelectableList to use this new component instead. *Didn’t do any test updates* * Fix broken jest test * Use the same picker component on Discover mobile view * Apply some CI fixes * Fix more functional tests * More FTs fixes * Close the tour popover for lens tests * More FTs fixes * Fix lens FTs * Using new `styles.ts` pattern for custom styles and allowing for `fullWidth` buttons * Better tour text and i18n * Update copy * No exclamation point * Cleanup * Fixes on discover tests * Fixes on Lens Fts - create runtime fields * Fixes on edit permission of add field in discover and some FTs fixes * Further Fts fixes * More FTs fixes * Made tour opt-in with `showNewMenuTour` * Refactor the OSS FTs to change less files * Further cleanup on the FTs * Remove unecessary action * Fix dataview creation bug * Add a unit test to the new component * More fixes * Fix OSS a11y tests * Adds another unit test for Lens permissions * Make a change to stabilize the tests * Clear flyout prop as it is not used anymore * Deisgn fixes for mobile view * Address PR comments WIP * Update the layrpanl dataview list when a new dataview is created Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: cchaos Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src/plugins/data/public/index.ts | 2 +- src/plugins/data/public/types.ts | 1 + .../dataview_picker/change_dataview.styles.ts | 20 + .../dataview_picker/change_dataview.test.tsx | 137 ++++ .../ui/dataview_picker/change_dataview.tsx | 225 ++++++ .../ui/dataview_picker/dataview_list.test.tsx | 71 ++ .../ui/dataview_picker/dataview_list.tsx | 76 ++ .../data/public/ui/dataview_picker/index.tsx | 52 ++ src/plugins/data/public/ui/index.ts | 2 + .../ui/query_string_input/_query_bar.scss | 9 + .../query_string_input/query_bar_top_row.tsx | 16 +- .../ui/search_bar/create_search_bar.tsx | 1 + .../data/public/ui/search_bar/search_bar.tsx | 3 + .../components/layout/discover_layout.tsx | 3 + .../discover_index_pattern.test.tsx.snap | 3 - ...ver_index_pattern_management.test.tsx.snap | 735 ------------------ .../sidebar/change_indexpattern.test.tsx | 71 -- .../sidebar/change_indexpattern.tsx | 109 --- .../sidebar/discover_index_pattern.test.tsx | 94 --- .../sidebar/discover_index_pattern.tsx | 74 -- ...discover_index_pattern_management.test.tsx | 118 --- .../discover_index_pattern_management.tsx | 130 ---- .../components/sidebar/discover_sidebar.tsx | 71 +- .../sidebar/discover_sidebar_responsive.tsx | 45 +- .../top_nav/discover_topnav.test.tsx | 2 + .../components/top_nav/discover_topnav.tsx | 87 ++- .../main/discover_main_app.test.tsx | 7 +- .../apps/dashboard/dashboard_state.ts | 3 +- .../_indexpattern_without_timefield.ts | 3 +- test/functional/apps/home/_navigation.ts | 3 +- test/functional/page_objects/common_page.ts | 1 + test/functional/page_objects/discover_page.ts | 9 +- test/functional/page_objects/index.ts | 2 + .../page_objects/unified_search_page.ts | 26 + .../functional/page_objects/visualize_page.ts | 5 + .../services/dashboard/visualizations.ts | 2 + x-pack/plugins/lens/kibana.json | 1 + .../lens/public/app_plugin/app.test.tsx | 69 ++ .../lens/public/app_plugin/lens_top_nav.tsx | 144 +++- .../lens/public/app_plugin/mounter.tsx | 2 + .../plugins/lens/public/app_plugin/types.ts | 4 + .../change_indexpattern.tsx | 47 +- .../datapanel.test.tsx | 95 --- .../indexpattern_datasource/datapanel.tsx | 94 --- .../indexpattern_datasource/indexpattern.tsx | 25 + .../layerpanel.test.tsx | 10 +- .../indexpattern_datasource/layerpanel.tsx | 1 - .../lens/public/mocks/services_mock.tsx | 4 + x-pack/plugins/lens/public/plugin.ts | 2 + x-pack/plugins/lens/public/types.ts | 8 + x-pack/plugins/lens/public/utils.ts | 38 + x-pack/plugins/lens/tsconfig.json | 3 +- .../translations/translations/fr-FR.json | 6 - .../translations/translations/ja-JP.json | 8 - .../translations/translations/zh-CN.json | 8 - .../apps/canvas/embeddables/lens.ts | 3 +- .../drilldowns/explore_data_panel_action.ts | 2 +- x-pack/test/functional/apps/lens/dashboard.ts | 4 +- .../test/functional/apps/lens/lens_tagging.ts | 2 + .../test/functional/page_objects/lens_page.ts | 9 +- .../services/ml/dashboard_embeddables.ts | 4 +- .../functional/services/transform/discover.ts | 2 +- .../functional/services/transform/wizard.ts | 3 +- 63 files changed, 1112 insertions(+), 1704 deletions(-) create mode 100644 src/plugins/data/public/ui/dataview_picker/change_dataview.styles.ts create mode 100644 src/plugins/data/public/ui/dataview_picker/change_dataview.test.tsx create mode 100644 src/plugins/data/public/ui/dataview_picker/change_dataview.tsx create mode 100644 src/plugins/data/public/ui/dataview_picker/dataview_list.test.tsx create mode 100644 src/plugins/data/public/ui/dataview_picker/dataview_list.tsx create mode 100644 src/plugins/data/public/ui/dataview_picker/index.tsx delete mode 100644 src/plugins/discover/public/application/main/components/sidebar/__snapshots__/discover_index_pattern.test.tsx.snap delete mode 100644 src/plugins/discover/public/application/main/components/sidebar/__snapshots__/discover_index_pattern_management.test.tsx.snap delete mode 100644 src/plugins/discover/public/application/main/components/sidebar/change_indexpattern.test.tsx delete mode 100644 src/plugins/discover/public/application/main/components/sidebar/change_indexpattern.tsx delete mode 100644 src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern.test.tsx delete mode 100644 src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern.tsx delete mode 100644 src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern_management.test.tsx delete mode 100644 src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern_management.tsx create mode 100644 test/functional/page_objects/unified_search_page.ts diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts index 02480aded9655d..a3cc6b87d5e86d 100644 --- a/src/plugins/data/public/index.ts +++ b/src/plugins/data/public/index.ts @@ -19,7 +19,7 @@ export * from './deprecated'; */ export { getEsQueryConfig, FilterStateStore } from '../common'; -export { FilterLabel, FilterItem } from './ui'; +export { FilterLabel, FilterItem, DataViewsList, DataViewPicker } from './ui'; export { getDisplayValueFromFilter, generateFilters, extractTimeRange } from './query'; /** diff --git a/src/plugins/data/public/types.ts b/src/plugins/data/public/types.ts index bfc35b8f39c512..b9492afa9da234 100644 --- a/src/plugins/data/public/types.ts +++ b/src/plugins/data/public/types.ts @@ -124,6 +124,7 @@ export interface IDataPluginServices extends Partial { uiSettings: CoreStart['uiSettings']; savedObjects: CoreStart['savedObjects']; notifications: CoreStart['notifications']; + application: CoreStart['application']; http: CoreStart['http']; storage: IStorageWrapper; data: DataPublicPluginStart; diff --git a/src/plugins/data/public/ui/dataview_picker/change_dataview.styles.ts b/src/plugins/data/public/ui/dataview_picker/change_dataview.styles.ts new file mode 100644 index 00000000000000..77b7c4c6d94df7 --- /dev/null +++ b/src/plugins/data/public/ui/dataview_picker/change_dataview.styles.ts @@ -0,0 +1,20 @@ +/* + * 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. + */ + +export const DATA_VIEW_POPOVER_CONTENT_WIDTH = 280; + +export const ChangeDataViewStyles = ({ fullWidth }: { fullWidth?: boolean }) => { + return { + trigger: { + maxWidth: fullWidth ? undefined : DATA_VIEW_POPOVER_CONTENT_WIDTH, + }, + popoverContent: { + width: DATA_VIEW_POPOVER_CONTENT_WIDTH, + }, + }; +}; diff --git a/src/plugins/data/public/ui/dataview_picker/change_dataview.test.tsx b/src/plugins/data/public/ui/dataview_picker/change_dataview.test.tsx new file mode 100644 index 00000000000000..73c043ab8a7864 --- /dev/null +++ b/src/plugins/data/public/ui/dataview_picker/change_dataview.test.tsx @@ -0,0 +1,137 @@ +/* + * 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 { I18nProvider } from '@kbn/i18n-react'; +import { act } from 'react-dom/test-utils'; +import { mountWithIntl as mount } from '@kbn/test-jest-helpers'; +import { KibanaContextProvider } from 'src/plugins/kibana_react/public'; +import { dataPluginMock } from '../../mocks'; +import { ChangeDataView } from './change_dataview'; +import { EuiTourStep } from '@elastic/eui'; +import type { DataViewPickerProps } from './index'; + +describe('DataView component', () => { + const createMockWebStorage = () => ({ + clear: jest.fn(), + getItem: jest.fn(), + key: jest.fn(), + removeItem: jest.fn(), + setItem: jest.fn(), + length: 0, + }); + + const createMockStorage = () => ({ + storage: createMockWebStorage(), + get: jest.fn(), + set: jest.fn(), + remove: jest.fn(), + clear: jest.fn(), + }); + const getStorage = (v: boolean) => { + const storage = createMockStorage(); + storage.get.mockReturnValue(v); + return storage; + }; + + function wrapDataViewComponentInContext(testProps: DataViewPickerProps, storageValue: boolean) { + let dataMock = dataPluginMock.createStartContract(); + dataMock = { + ...dataMock, + dataViews: { + ...dataMock.dataViews, + getIdsWithTitle: jest.fn(), + }, + }; + const services = { + data: dataMock, + storage: getStorage(storageValue), + }; + + return ( + + + + + + ); + } + let props: DataViewPickerProps; + beforeEach(() => { + props = { + currentDataViewId: 'dataview-1', + trigger: { + label: 'Dataview 1', + title: 'Dataview 1', + fullWidth: true, + 'data-test-subj': 'dataview-trigger', + }, + onChangeDataView: jest.fn(), + }; + }); + it('should not render the tour component by default', async () => { + await act(async () => { + const component = mount(wrapDataViewComponentInContext(props, true)); + expect(component.find(EuiTourStep).prop('isStepOpen')).toBe(false); + }); + }); + it('should render the tour component if the showNewMenuTour is true', async () => { + const component = mount( + wrapDataViewComponentInContext({ ...props, showNewMenuTour: true }, false) + ); + expect(component.find(EuiTourStep).prop('isStepOpen')).toBe(true); + }); + + it('should not render the add runtime field menu if addField is not given', async () => { + await act(async () => { + const component = mount(wrapDataViewComponentInContext(props, true)); + component.find('[data-test-subj="dataview-trigger"]').first().simulate('click'); + expect(component.find('[data-test-subj="indexPattern-add-field"]').length).toBe(0); + }); + }); + + it('should render the add runtime field menu if addField is given', async () => { + const addFieldSpy = jest.fn(); + const component = mount( + wrapDataViewComponentInContext( + { ...props, onAddField: addFieldSpy, showNewMenuTour: true }, + false + ) + ); + component.find('[data-test-subj="dataview-trigger"]').first().simulate('click'); + expect(component.find('[data-test-subj="indexPattern-add-field"]').at(0).text()).toContain( + 'Add a field to this data view' + ); + component.find('[data-test-subj="indexPattern-add-field"]').first().simulate('click'); + expect(addFieldSpy).toHaveBeenCalled(); + }); + + it('should not render the add datavuew menu if onDataViewCreated is not given', async () => { + await act(async () => { + const component = mount(wrapDataViewComponentInContext(props, true)); + component.find('[data-test-subj="dataview-trigger"]').first().simulate('click'); + expect(component.find('[data-test-subj="idataview-create-new"]').length).toBe(0); + }); + }); + + it('should render the add datavuew menu if onDataViewCreated is given', async () => { + const addDataViewSpy = jest.fn(); + const component = mount( + wrapDataViewComponentInContext( + { ...props, onDataViewCreated: addDataViewSpy, showNewMenuTour: true }, + false + ) + ); + component.find('[data-test-subj="dataview-trigger"]').first().simulate('click'); + expect(component.find('[data-test-subj="dataview-create-new"]').at(0).text()).toContain( + 'Create a data view' + ); + component.find('[data-test-subj="dataview-create-new"]').first().simulate('click'); + expect(addDataViewSpy).toHaveBeenCalled(); + }); +}); diff --git a/src/plugins/data/public/ui/dataview_picker/change_dataview.tsx b/src/plugins/data/public/ui/dataview_picker/change_dataview.tsx new file mode 100644 index 00000000000000..203dc11bd098be --- /dev/null +++ b/src/plugins/data/public/ui/dataview_picker/change_dataview.tsx @@ -0,0 +1,225 @@ +/* + * 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 { i18n } from '@kbn/i18n'; +import React, { useState, useEffect } from 'react'; +import { css } from '@emotion/react'; +import { + EuiPopover, + EuiHorizontalRule, + EuiButton, + EuiContextMenuPanel, + EuiContextMenuItem, + useEuiTheme, + useGeneratedHtmlId, + EuiIcon, + EuiLink, + EuiText, + EuiTourStep, +} from '@elastic/eui'; +import type { DataViewListItem } from 'src/plugins/data_views/public'; +import { IDataPluginServices } from '../../'; +import { useKibana } from '../../../../kibana_react/public'; +import type { DataViewPickerProps } from './index'; +import { DataViewsList } from './dataview_list'; +import { ChangeDataViewStyles } from './change_dataview.styles'; + +const NEW_DATA_VIEW_MENU_STORAGE_KEY = 'data.newDataViewMenu'; + +const newMenuTourTitle = i18n.translate('data.query.dataViewMenu.newMenuTour.title', { + defaultMessage: 'A better data view menu', +}); + +const newMenuTourDescription = i18n.translate('data.query.dataViewMenu.newMenuTour.description', { + defaultMessage: + 'This menu now offers all the tools you need to create, find, and edit your data views.', +}); + +const newMenuTourDismissLabel = i18n.translate('data.query.dataViewMenu.newMenuTour.dismissLabel', { + defaultMessage: 'Got it', +}); + +export function ChangeDataView({ + isMissingCurrent, + currentDataViewId, + onChangeDataView, + onAddField, + onDataViewCreated, + trigger, + selectableProps, + showNewMenuTour = false, +}: DataViewPickerProps) { + const { euiTheme } = useEuiTheme(); + const [isPopoverOpen, setPopoverIsOpen] = useState(false); + const [dataViewsList, setDataViewsList] = useState([]); + const kibana = useKibana(); + const { application, data, storage } = kibana.services; + const styles = ChangeDataViewStyles({ fullWidth: trigger.fullWidth }); + + const [isTourDismissed, setIsTourDismissed] = useState(() => + Boolean(storage.get(NEW_DATA_VIEW_MENU_STORAGE_KEY)) + ); + const [isTourOpen, setIsTourOpen] = useState(false); + + useEffect(() => { + if (showNewMenuTour && !isTourDismissed) { + setIsTourOpen(true); + } + }, [isTourDismissed, setIsTourOpen, showNewMenuTour]); + + const onTourDismiss = () => { + storage.set(NEW_DATA_VIEW_MENU_STORAGE_KEY, true); + setIsTourDismissed(true); + setIsTourOpen(false); + }; + + // 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' }); + + useEffect(() => { + const fetchDataViews = async () => { + const dataViewsRefs = await data.dataViews.getIdsWithTitle(); + setDataViewsList(dataViewsRefs); + }; + fetchDataViews(); + }, [data, currentDataViewId]); + + const createTrigger = function () { + const { label, title, 'data-test-subj': dataTestSubj, fullWidth, ...rest } = trigger; + return ( + { + setPopoverIsOpen(!isPopoverOpen); + setIsTourOpen(false); + // onTourDismiss(); TODO: Decide if opening the menu should also dismiss the tour + }} + color={isMissingCurrent ? 'danger' : 'primary'} + iconSide="right" + iconType="arrowDown" + title={title} + fullWidth={fullWidth} + {...rest} + > + {label} + + ); + }; + + return ( + +   {newMenuTourTitle} + + } + content={ + +

{newMenuTourDescription}

+ + } + isStepOpen={isTourOpen} + onFinish={onTourDismiss} + step={1} + stepsTotal={1} + footerAction={ + + {newMenuTourDismissLabel} + + } + repositionOnScroll + display="block" + > + setPopoverIsOpen(false)} + panelPaddingSize="none" + initialFocus={`#${searchListInputId}`} + display="block" + buffer={8} + > +
+ {onAddField && ( + <> + { + setPopoverIsOpen(false); + onAddField(); + }} + > + {i18n.translate('data.query.queryBar.indexPattern.addFieldButton', { + defaultMessage: 'Add a field to this data view', + })} + , + { + setPopoverIsOpen(false); + application.navigateToApp('management', { + path: `/kibana/indexPatterns/patterns/${currentDataViewId}`, + }); + }} + > + {i18n.translate('data.query.queryBar.indexPattern.manageFieldButton', { + defaultMessage: 'Manage this data view', + })} + , + ]} + /> + + + )} + { + onChangeDataView(newId); + setPopoverIsOpen(false); + }} + currentDataViewId={currentDataViewId} + selectableProps={selectableProps} + searchListInputId={searchListInputId} + /> + {onDataViewCreated && ( + <> + + { + setPopoverIsOpen(false); + onDataViewCreated(); + }} + > + {i18n.translate('data.query.queryBar.indexPattern.addNewDataView', { + defaultMessage: 'Create a data view', + })} + + + )} +
+ + + ); +} diff --git a/src/plugins/data/public/ui/dataview_picker/dataview_list.test.tsx b/src/plugins/data/public/ui/dataview_picker/dataview_list.test.tsx new file mode 100644 index 00000000000000..813beae20369c2 --- /dev/null +++ b/src/plugins/data/public/ui/dataview_picker/dataview_list.test.tsx @@ -0,0 +1,71 @@ +/* + * 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 { EuiSelectable } from '@elastic/eui'; +import { act } from 'react-dom/test-utils'; +import { ShallowWrapper } from 'enzyme'; +import { shallowWithIntl as shallow } from '@kbn/test-jest-helpers'; +import { DataViewsList, DataViewsListProps } from './dataview_list'; + +function getDataViewPickerList(instance: ShallowWrapper) { + return instance.find(EuiSelectable).first(); +} + +function getDataViewPickerOptions(instance: ShallowWrapper) { + return getDataViewPickerList(instance).prop('options'); +} + +function selectDataViewPickerOption(instance: ShallowWrapper, selectedLabel: string) { + const options: Array<{ label: string; checked?: 'on' | 'off' }> = getDataViewPickerOptions( + instance + ).map((option: { label: string }) => + option.label === selectedLabel + ? { ...option, checked: 'on' } + : { ...option, checked: undefined } + ); + return getDataViewPickerList(instance).prop('onChange')!(options); +} + +describe('DataView list component', () => { + const list = [ + { + id: 'dataview-1', + title: 'dataview-1', + }, + { + id: 'dataview-2', + title: 'dataview-2', + }, + ]; + const changeDataViewSpy = jest.fn(); + let props: DataViewsListProps; + beforeEach(() => { + props = { + currentDataViewId: 'dataview-1', + onChangeDataView: changeDataViewSpy, + dataViewsList: list, + }; + }); + it('should trigger the onChangeDataView if a new dataview is selected', async () => { + const component = shallow(); + await act(async () => { + selectDataViewPickerOption(component, 'dataview-2'); + }); + expect(changeDataViewSpy).toHaveBeenCalled(); + }); + + it('should list all dataviiew', () => { + const component = shallow(); + + expect(getDataViewPickerOptions(component)!.map((option: any) => option.label)).toEqual([ + 'dataview-1', + 'dataview-2', + ]); + }); +}); diff --git a/src/plugins/data/public/ui/dataview_picker/dataview_list.tsx b/src/plugins/data/public/ui/dataview_picker/dataview_list.tsx new file mode 100644 index 00000000000000..1c9c5888d3eb12 --- /dev/null +++ b/src/plugins/data/public/ui/dataview_picker/dataview_list.tsx @@ -0,0 +1,76 @@ +/* + * 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 { EuiSelectable, EuiSelectableProps, EuiPanel } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { css } from '@emotion/react'; +import { DataViewListItem } from '../../data_views'; + +export interface DataViewsListProps { + dataViewsList: DataViewListItem[]; + onChangeDataView: (newId: string) => void; + currentDataViewId?: string; + selectableProps?: EuiSelectableProps; + searchListInputId?: string; +} + +export function DataViewsList({ + dataViewsList, + onChangeDataView, + currentDataViewId, + selectableProps, + searchListInputId, +}: DataViewsListProps) { + return ( + + {...selectableProps} + data-test-subj="indexPattern-switcher" + searchable + singleSelection="always" + options={dataViewsList?.map(({ title, id }) => ({ + key: id, + label: title, + value: id, + checked: id === currentDataViewId ? 'on' : undefined, + }))} + onChange={(choices) => { + const choice = choices.find(({ checked }) => checked) as unknown as { + value: string; + }; + onChangeDataView(choice.value); + }} + searchProps={{ + id: searchListInputId, + compressed: true, + placeholder: i18n.translate('data.query.queryBar.indexPattern.findDataView', { + defaultMessage: 'Find a data view', + }), + ...(selectableProps ? selectableProps.searchProps : undefined), + }} + > + {(list, search) => ( + + {search} + {list} + + )} + + ); +} diff --git a/src/plugins/data/public/ui/dataview_picker/index.tsx b/src/plugins/data/public/ui/dataview_picker/index.tsx new file mode 100644 index 00000000000000..bd24aef0498ef6 --- /dev/null +++ b/src/plugins/data/public/ui/dataview_picker/index.tsx @@ -0,0 +1,52 @@ +/* + * 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 { EuiButtonProps, EuiSelectableProps } from '@elastic/eui'; +import { ChangeDataView } from './change_dataview'; + +export type ChangeDataViewTriggerProps = EuiButtonProps & { + label: string; + title?: string; +}; + +/** @public */ +export interface DataViewPickerProps { + trigger: ChangeDataViewTriggerProps; + isMissingCurrent?: boolean; + onChangeDataView: (newId: string) => void; + currentDataViewId?: string; + selectableProps?: EuiSelectableProps; + onAddField?: () => void; + onDataViewCreated?: () => void; + showNewMenuTour?: boolean; +} + +export const DataViewPicker = ({ + isMissingCurrent, + currentDataViewId, + onChangeDataView, + onAddField, + onDataViewCreated, + trigger, + selectableProps, + showNewMenuTour, +}: DataViewPickerProps) => { + return ( + + ); +}; diff --git a/src/plugins/data/public/ui/index.ts b/src/plugins/data/public/ui/index.ts index 026db1b7c09ee6..a7078a553a7d54 100644 --- a/src/plugins/data/public/ui/index.ts +++ b/src/plugins/data/public/ui/index.ts @@ -13,3 +13,5 @@ export { QueryStringInput } from './query_string_input'; export type { SearchBarProps, StatefulSearchBarProps } from './search_bar'; export { SearchBar } from './search_bar'; export { SuggestionsComponent } from './typeahead'; +export { DataViewsList } from './dataview_picker/dataview_list'; +export { DataViewPicker } from './dataview_picker'; diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss index f8c2f067d9ec5c..f3e33dd2e3f7e6 100644 --- a/src/plugins/data/public/ui/query_string_input/_query_bar.scss +++ b/src/plugins/data/public/ui/query_string_input/_query_bar.scss @@ -102,6 +102,15 @@ margin-top: $euiSizeS * -1; } } + + .kbnQueryBar-withDataViewPicker { + > :nth-child(2) { + // Change the order of the query bar and date picker so that the date picker is top and the query bar still aligns with filters + order: 1; + // EUI Flexbox adds too much margin between responded items, this just moves it up + margin-top: $euiSizeS * -1; + } + } } // IE specific fix for the datepicker to not collapse diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx index 75d22137937e94..b04bd0d427733b 100644 --- a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx @@ -32,6 +32,7 @@ import { getQueryLog } from '../../query'; import type { PersistedLog } from '../../query'; import { NoDataPopover } from './no_data_popover'; import { shallowEqual } from '../../utils/shallow_equal'; +import { DataViewPicker, DataViewPickerProps } from '../dataview_picker'; const SuperDatePicker = React.memo( EuiSuperDatePicker as any @@ -73,6 +74,7 @@ export interface QueryBarTopRowProps { showAutoRefreshOnly?: boolean; timeHistory?: TimeHistoryContract; timeRangeForSuggestionsOverride?: boolean; + dataViewPickerComponentProps?: DataViewPickerProps; } const SharingMetaFields = React.memo(function SharingMetaFields({ @@ -336,6 +338,16 @@ export const QueryBarTopRow = React.memo( ); } + function renderDataViewsPicker() { + if (!props.dataViewPickerComponentProps) return; + + return ( + + + + ); + } + function renderQueryInput() { if (!shouldRenderQueryInput()) return; @@ -364,7 +376,8 @@ export const QueryBarTopRow = React.memo( } const classes = classNames('kbnQueryBar', { - 'kbnQueryBar--withDatePicker': showDatePicker, + 'kbnQueryBar--withDatePicker': showDatePicker && !props.dataViewPickerComponentProps, + 'kbnQueryBar-withDataViewPicker': showDatePicker && props.dataViewPickerComponentProps, }); return ( @@ -374,6 +387,7 @@ export const QueryBarTopRow = React.memo( gutterSize="s" justifyContent="flexEnd" > + {renderDataViewsPicker()} {renderQueryInput()} ); diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx index 1ee3a97f45a34f..495ebffb5513d9 100644 --- a/src/plugins/data/public/ui/search_bar/search_bar.tsx +++ b/src/plugins/data/public/ui/search_bar/search_bar.tsx @@ -25,6 +25,7 @@ import { TimeRange, IIndexPattern } from '../../../common'; import { FilterBar } from '../filter_bar/filter_bar'; import { SavedQueryMeta, SaveQueryForm } from '../saved_query_form'; import { SavedQueryManagementComponent } from '../saved_query_management'; +import type { DataViewPickerProps } from '../dataview_picker'; export interface SearchBarInjectedDeps { kibana: KibanaReactContextValue; @@ -80,6 +81,7 @@ export interface SearchBarOwnProps { displayStyle?: 'inPage' | 'detached'; // super update button background fill control fillSubmitButton?: boolean; + dataViewPickerComponentProps?: DataViewPickerProps; } export type SearchBarProps = SearchBarOwnProps & SearchBarInjectedDeps; @@ -392,6 +394,7 @@ class SearchBarUI extends Component { nonKqlMode={this.props.nonKqlMode} nonKqlModeHelpText={this.props.nonKqlModeHelpText} timeRangeForSuggestionsOverride={timeRangeForSuggestionsOverride} + dataViewPickerComponentProps={this.props.dataViewPickerComponentProps} /> ); } diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx b/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx index 8be5e2b7ce4be8..a5ef7e00916b60 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx @@ -226,6 +226,9 @@ export function DiscoverLayout({ stateContainer={stateContainer} updateQuery={onUpdateQuery} resetSavedSearch={resetSavedSearch} + onChangeIndexPattern={onChangeIndexPattern} + onEditRuntimeField={onEditRuntimeField} + useNewFieldsApi={useNewFieldsApi} /> - - - } - closePopover={[Function]} - data-test-subj="discover-addRuntimeField-popover" - display="inlineBlock" - hasArrow={true} - isOpen={false} - ownFocus={true} - panelPaddingSize="none" - > -
-
- - - -
-
- - - -`; diff --git a/src/plugins/discover/public/application/main/components/sidebar/change_indexpattern.test.tsx b/src/plugins/discover/public/application/main/components/sidebar/change_indexpattern.test.tsx deleted file mode 100644 index a5e93c1d895bce..00000000000000 --- a/src/plugins/discover/public/application/main/components/sidebar/change_indexpattern.test.tsx +++ /dev/null @@ -1,71 +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 { EuiSelectable } from '@elastic/eui'; -import { ShallowWrapper } from 'enzyme'; -import { act } from 'react-dom/test-utils'; -import { shallowWithIntl } from '@kbn/test-jest-helpers'; -import { ChangeIndexPattern } from './change_indexpattern'; -import { indexPatternMock } from '../../../../__mocks__/index_pattern'; -import { indexPatternWithTimefieldMock } from '../../../../__mocks__/index_pattern_with_timefield'; -import { IndexPatternRef } from './types'; - -function getProps() { - return { - indexPatternId: indexPatternMock.id, - indexPatternRefs: [ - indexPatternMock as IndexPatternRef, - indexPatternWithTimefieldMock as IndexPatternRef, - ], - onChangeIndexPattern: jest.fn(), - trigger: { - label: indexPatternMock.title, - title: indexPatternMock.title, - 'data-test-subj': 'indexPattern-switch-link', - }, - }; -} - -function getIndexPatternPickerList(instance: ShallowWrapper) { - return instance.find(EuiSelectable).first(); -} - -function getIndexPatternPickerOptions(instance: ShallowWrapper) { - return getIndexPatternPickerList(instance).prop('options'); -} - -export function selectIndexPatternPickerOption(instance: ShallowWrapper, selectedLabel: string) { - const options: Array<{ label: string; checked?: 'on' | 'off' }> = getIndexPatternPickerOptions( - instance - ).map((option: { label: string }) => - option.label === selectedLabel - ? { ...option, checked: 'on' } - : { ...option, checked: undefined } - ); - return getIndexPatternPickerList(instance).prop('onChange')!(options); -} - -describe('ChangeIndexPattern', () => { - test('switching index pattern to the same index pattern does not trigger onChangeIndexPattern', async () => { - const props = getProps(); - const comp = shallowWithIntl(); - await act(async () => { - selectIndexPatternPickerOption(comp, indexPatternMock.title); - }); - expect(props.onChangeIndexPattern).toHaveBeenCalledTimes(0); - }); - test('switching index pattern to a different index pattern triggers onChangeIndexPattern', async () => { - const props = getProps(); - const comp = shallowWithIntl(); - await act(async () => { - selectIndexPatternPickerOption(comp, indexPatternWithTimefieldMock.title); - }); - expect(props.onChangeIndexPattern).toHaveBeenCalledTimes(1); - expect(props.onChangeIndexPattern).toHaveBeenCalledWith(indexPatternWithTimefieldMock.id); - }); -}); diff --git a/src/plugins/discover/public/application/main/components/sidebar/change_indexpattern.tsx b/src/plugins/discover/public/application/main/components/sidebar/change_indexpattern.tsx deleted file mode 100644 index ceee905cff6fa0..00000000000000 --- a/src/plugins/discover/public/application/main/components/sidebar/change_indexpattern.tsx +++ /dev/null @@ -1,109 +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 { i18n } from '@kbn/i18n'; -import React, { useState } from 'react'; -import { - EuiButton, - EuiPopover, - EuiPopoverTitle, - EuiSelectable, - EuiButtonProps, -} from '@elastic/eui'; -import { EuiSelectableProps } from '@elastic/eui/src/components/selectable/selectable'; -import { IndexPatternRef } from './types'; - -export type ChangeIndexPatternTriggerProps = EuiButtonProps & { - label: string; - title?: string; -}; - -// TODO: refactor to shared component with ../../../../../../../../x-pack/legacy/plugins/lens/public/indexpattern_plugin/change_indexpattern - -export function ChangeIndexPattern({ - indexPatternId, - indexPatternRefs, - onChangeIndexPattern, - selectableProps, - trigger, -}: { - indexPatternId?: string; - indexPatternRefs: IndexPatternRef[]; - onChangeIndexPattern: (newId: string) => void; - selectableProps?: EuiSelectableProps<{ value: string }>; - trigger: ChangeIndexPatternTriggerProps; -}) { - const [isPopoverOpen, setPopoverIsOpen] = useState(false); - - const createTrigger = function () { - const { label, title, ...rest } = trigger; - return ( - setPopoverIsOpen(!isPopoverOpen)} - {...rest} - > - {label} - - ); - }; - - return ( - setPopoverIsOpen(false)} - display="block" - panelPaddingSize="s" - > -
- - {i18n.translate('discover.fieldChooser.indexPattern.changeDataViewTitle', { - defaultMessage: 'Change data view', - })} - - - data-test-subj="indexPattern-switcher" - {...selectableProps} - searchable - singleSelection="always" - options={indexPatternRefs.map(({ title, id }) => ({ - label: title, - key: id, - value: id, - checked: id === indexPatternId ? 'on' : undefined, - }))} - onChange={(choices) => { - const choice = choices.find(({ checked }) => checked) as unknown as { - value: string; - }; - if (choice.value !== indexPatternId) { - onChangeIndexPattern(choice.value); - } - setPopoverIsOpen(false); - }} - searchProps={{ - compressed: true, - ...(selectableProps ? selectableProps.searchProps : undefined), - }} - > - {(list, search) => ( - <> - {search} - {list} - - )} - -
- - ); -} diff --git a/src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern.test.tsx b/src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern.test.tsx deleted file mode 100644 index aa44976ab50fbc..00000000000000 --- a/src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern.test.tsx +++ /dev/null @@ -1,94 +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 { act } from 'react-dom/test-utils'; -import { shallowWithIntl as shallow } from '@kbn/test-jest-helpers'; -import { ShallowWrapper } from 'enzyme'; -import { ChangeIndexPattern } from './change_indexpattern'; -import { SavedObject } from 'kibana/server'; -import { DiscoverIndexPattern, DiscoverIndexPatternProps } from './discover_index_pattern'; -import { EuiSelectable } from '@elastic/eui'; -import type { DataView, DataViewAttributes } from 'src/plugins/data_views/public'; -import { indexPatternsMock } from '../../../../__mocks__/index_patterns'; - -const indexPattern = { - id: 'the-index-pattern-id-first', - title: 'test1 title', -} as DataView; - -const indexPattern1 = { - id: 'the-index-pattern-id-first', - attributes: { - title: 'test1 title', - }, -} as SavedObject; - -const indexPattern2 = { - id: 'the-index-pattern-id', - attributes: { - title: 'test2 title', - }, -} as SavedObject; - -const defaultProps = { - indexPatternList: [indexPattern1, indexPattern2], - selectedIndexPattern: indexPattern, - useNewFieldsApi: true, - indexPatterns: indexPatternsMock, - onChangeIndexPattern: jest.fn(), -}; - -function getIndexPatternPickerList(instance: ShallowWrapper) { - return instance.find(ChangeIndexPattern).first().dive().find(EuiSelectable); -} - -function getIndexPatternPickerOptions(instance: ShallowWrapper) { - return getIndexPatternPickerList(instance).prop('options'); -} - -function selectIndexPatternPickerOption(instance: ShallowWrapper, selectedLabel: string) { - const options: Array<{ label: string; checked?: 'on' | 'off' }> = getIndexPatternPickerOptions( - instance - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ).map((option: any) => - option.label === selectedLabel - ? { ...option, checked: 'on' } - : { ...option, checked: undefined } - ); - return getIndexPatternPickerList(instance).prop('onChange')!(options); -} - -describe('DiscoverIndexPattern', () => { - test('Invalid props dont cause an exception', () => { - const props = { - indexPatternList: null, - selectedIndexPattern: null, - onChangeIndexPattern: jest.fn(), - } as unknown as DiscoverIndexPatternProps; - - expect(shallow()).toMatchSnapshot(`""`); - }); - test('should list all index patterns', () => { - const instance = shallow(); - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - expect(getIndexPatternPickerOptions(instance)!.map((option: any) => option.label)).toEqual([ - 'test1 title', - 'test2 title', - ]); - }); - - test('should switch data panel to target index pattern', async () => { - const instance = shallow(); - await act(async () => { - selectIndexPatternPickerOption(instance, 'test2 title'); - }); - expect(defaultProps.onChangeIndexPattern).toHaveBeenCalledWith('the-index-pattern-id'); - }); -}); diff --git a/src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern.tsx b/src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern.tsx deleted file mode 100644 index 0bbd78ed36cb73..00000000000000 --- a/src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern.tsx +++ /dev/null @@ -1,74 +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, { useState, useEffect } from 'react'; -import { SavedObject } from 'kibana/public'; -import type { DataView, DataViewAttributes } from 'src/plugins/data_views/public'; -import { IndexPatternRef } from './types'; -import { ChangeIndexPattern } from './change_indexpattern'; - -export interface DiscoverIndexPatternProps { - /** - * list of available index patterns, if length > 1, component offers a "change" link - */ - indexPatternList: Array>; - /** - * Callback function when changing an index pattern - */ - onChangeIndexPattern: (id: string) => void; - /** - * currently selected index pattern - */ - selectedIndexPattern: DataView; -} - -/** - * Component allows you to select an index pattern in discovers side bar - */ -export function DiscoverIndexPattern({ - indexPatternList, - onChangeIndexPattern, - selectedIndexPattern, -}: DiscoverIndexPatternProps) { - const options: IndexPatternRef[] = (indexPatternList || []).map((entity) => ({ - id: entity.id, - title: entity.attributes!.title, - })); - const { id: selectedId, title: selectedTitle } = selectedIndexPattern || {}; - - const [selected, setSelected] = useState({ - id: selectedId, - title: selectedTitle || '', - }); - useEffect(() => { - const { id, title } = selectedIndexPattern; - setSelected({ id, title }); - }, [selectedIndexPattern]); - if (!selectedId) { - return null; - } - - return ( - { - const indexPattern = options.find((pattern) => pattern.id === id); - if (indexPattern) { - onChangeIndexPattern(id); - setSelected(indexPattern); - } - }} - /> - ); -} diff --git a/src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern_management.test.tsx b/src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern_management.test.tsx deleted file mode 100644 index b511dc08f1e910..00000000000000 --- a/src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern_management.test.tsx +++ /dev/null @@ -1,118 +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 { mountWithIntl, findTestSubject } from '@kbn/test-jest-helpers'; -import { EuiContextMenuPanel, EuiPopover, EuiContextMenuItem } from '@elastic/eui'; -import { DiscoverServices } from '../../../../build_services'; -import { DiscoverIndexPatternManagement } from './discover_index_pattern_management'; -import { stubLogstashIndexPattern } from '../../../../../../data/common/stubs'; -import { KibanaContextProvider } from '../../../../../../kibana_react/public'; - -const mockServices = { - history: () => ({ - location: { - search: '', - }, - }), - capabilities: { - visualize: { - show: true, - }, - discover: { - save: false, - }, - }, - core: { - application: { - navigateToApp: jest.fn(), - }, - }, - uiSettings: { - get: (key: string) => { - if (key === 'fields:popularLimit') { - return 5; - } - }, - }, - dataViewFieldEditor: { - openEditor: jest.fn(), - userPermissions: { - editIndexPattern: () => { - return true; - }, - }, - }, -} as unknown as DiscoverServices; - -describe('Discover DataView Management', () => { - const indexPattern = stubLogstashIndexPattern; - - const editField = jest.fn(); - const createNewDataView = jest.fn(); - - const mountComponent = () => { - return mountWithIntl( - - - - ); - }; - - test('renders correctly', () => { - const component = mountComponent(); - expect(component).toMatchSnapshot(); - expect(component.find(EuiPopover).length).toBe(1); - }); - - test('click on a button opens popover', () => { - const component = mountComponent(); - expect(component.find(EuiContextMenuPanel).length).toBe(0); - - const button = findTestSubject(component, 'discoverIndexPatternActions'); - button.simulate('click'); - - expect(component.find(EuiContextMenuPanel).length).toBe(1); - expect(component.find(EuiContextMenuItem).length).toBe(3); - }); - - test('click on an add button executes editField callback', () => { - const component = mountComponent(); - const button = findTestSubject(component, 'discoverIndexPatternActions'); - button.simulate('click'); - - const addButton = findTestSubject(component, 'indexPattern-add-field'); - addButton.simulate('click'); - expect(editField).toHaveBeenCalledWith(undefined); - }); - - test('click on a manage button navigates away from discover', () => { - const component = mountComponent(); - const button = findTestSubject(component, 'discoverIndexPatternActions'); - button.simulate('click'); - - const manageButton = findTestSubject(component, 'indexPattern-manage-field'); - manageButton.simulate('click'); - expect(mockServices.core.application.navigateToApp).toHaveBeenCalled(); - }); - - test('click on add dataView button executes createNewDataView callback', () => { - const component = mountComponent(); - const button = findTestSubject(component, 'discoverIndexPatternActions'); - button.simulate('click'); - - const manageButton = findTestSubject(component, 'dataview-create-new'); - manageButton.simulate('click'); - expect(createNewDataView).toHaveBeenCalled(); - }); -}); diff --git a/src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern_management.tsx b/src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern_management.tsx deleted file mode 100644 index f993d151f44796..00000000000000 --- a/src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern_management.tsx +++ /dev/null @@ -1,130 +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, { useState } from 'react'; -import { - EuiButtonIcon, - EuiContextMenuItem, - EuiContextMenuPanel, - EuiHorizontalRule, - EuiPopover, -} from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; -import { useDiscoverServices } from '../../../../utils/use_discover_services'; -import type { DataView } from '../../../../../../data_views/public'; - -export interface DiscoverIndexPatternManagementProps { - /** - * Currently selected index pattern - */ - selectedIndexPattern?: DataView; - /** - * Read from the Fields API - */ - useNewFieldsApi?: boolean; - /** - * Callback to execute on edit field action - * @param fieldName - */ - editField: (fieldName?: string) => void; - - /** - * Callback to execute on create new data action - */ - createNewDataView: () => void; -} - -export function DiscoverIndexPatternManagement(props: DiscoverIndexPatternManagementProps) { - const { dataViewFieldEditor, core } = useDiscoverServices(); - const { useNewFieldsApi, selectedIndexPattern, editField, createNewDataView } = props; - const dataViewEditPermission = dataViewFieldEditor?.userPermissions.editIndexPattern(); - const canEditDataViewField = !!dataViewEditPermission && useNewFieldsApi; - const [isAddIndexPatternFieldPopoverOpen, setIsAddIndexPatternFieldPopoverOpen] = useState(false); - - if (!useNewFieldsApi || !selectedIndexPattern || !canEditDataViewField) { - return null; - } - - const addField = () => { - editField(undefined); - }; - - return ( - { - setIsAddIndexPatternFieldPopoverOpen(false); - }} - ownFocus - data-test-subj="discover-addRuntimeField-popover" - button={ - { - setIsAddIndexPatternFieldPopoverOpen(!isAddIndexPatternFieldPopoverOpen); - }} - /> - } - > - { - setIsAddIndexPatternFieldPopoverOpen(false); - addField(); - }} - > - {i18n.translate('discover.fieldChooser.indexPatterns.addFieldButton', { - defaultMessage: 'Add field', - })} - , - { - setIsAddIndexPatternFieldPopoverOpen(false); - core.application.navigateToApp('management', { - path: `/kibana/indexPatterns/patterns/${props.selectedIndexPattern?.id}`, - }); - }} - > - {i18n.translate('discover.fieldChooser.indexPatterns.manageFieldButton', { - defaultMessage: 'Manage settings', - })} - , - , - { - setIsAddIndexPatternFieldPopoverOpen(false); - createNewDataView(); - }} - > - {i18n.translate('discover.fieldChooser.dataViews.createNewDataView', { - defaultMessage: 'Create new data view', - })} - , - ]} - /> - - ); -} diff --git a/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.tsx index 5b9f9a6c452d6a..eb5a7df640cf93 100644 --- a/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.tsx +++ b/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.tsx @@ -23,20 +23,18 @@ import { } from '@elastic/eui'; import useShallowCompareEffect from 'react-use/lib/useShallowCompareEffect'; -import { isEqual, sortBy } from 'lodash'; +import { isEqual } from 'lodash'; import { FormattedMessage } from '@kbn/i18n-react'; import { useDiscoverServices } from '../../../../utils/use_discover_services'; import { DiscoverField } from './discover_field'; -import { DiscoverIndexPattern } from './discover_index_pattern'; import { DiscoverFieldSearch } from './discover_field_search'; import { FIELDS_LIMIT_SETTING } from '../../../../../common'; import { groupFields } from './lib/group_fields'; -import { indexPatterns as indexPatternUtils } from '../../../../../../data/public'; +import { indexPatterns as indexPatternUtils, DataViewPicker } from '../../../../../../data/public'; import { getDetails } from './lib/get_details'; import { FieldFilterState, getDefaultFieldFilter, setFieldFilterProp } from './lib/field_filter'; import { getIndexPatternFieldList } from './lib/get_index_pattern_field_list'; import { DiscoverSidebarResponsiveProps } from './discover_sidebar_responsive'; -import { DiscoverIndexPatternManagement } from './discover_index_pattern_management'; import { VIEW_MODE } from '../../../../components/view_mode_toggle'; import { ElasticSearchHit } from '../../../../types'; import { DataViewField } from '../../../../../../data_views/public'; @@ -83,6 +81,8 @@ export interface DiscoverSidebarProps extends Omit(null); @@ -282,34 +282,6 @@ export function DiscoverSidebarComponent({ return null; } - if (useFlyout) { - return ( -
- - - o.attributes.title)} - onChangeIndexPattern={onChangeIndexPattern} - /> - - - - - -
- ); - } - return ( - - - - o.attributes.title)} - onChangeIndexPattern={onChangeIndexPattern} - /> - - - - - - + {Boolean(showDataViewPicker) && ( + + )}
void; - /** - * Shows index pattern and a button that displays the sidebar in a flyout - */ - useFlyout?: boolean; /** * Read from the Fields API */ @@ -128,13 +119,7 @@ export interface DiscoverSidebarResponsiveProps { */ export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps) { const services = useDiscoverServices(); - const { - selectedIndexPattern, - onEditRuntimeField, - useNewFieldsApi, - onChangeIndexPattern, - onDataViewCreated, - } = props; + const { selectedIndexPattern, onEditRuntimeField, useNewFieldsApi, onDataViewCreated } = props; const [fieldFilter, setFieldFilter] = useState(getDefaultFieldFilter()); const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); /** @@ -295,33 +280,6 @@ export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps) )}
-
- - - o.attributes.title)} - /> - - - - - -
-
diff --git a/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.test.tsx b/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.test.tsx index 834e7283bddfbd..5f5a3ae49d5aec 100644 --- a/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.test.tsx +++ b/src/plugins/discover/public/application/main/components/top_nav/discover_topnav.test.tsx @@ -40,6 +40,8 @@ function getProps(savePermissions = true): DiscoverTopNavProps { onOpenInspector: jest.fn(), searchSource: {} as ISearchSource, resetSavedSearch: () => {}, + onEditRuntimeField: jest.fn(), + onChangeIndexPattern: jest.fn(), }; } 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 d0b79cf11a5199..761786f953d701 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 @@ -5,7 +5,7 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -import React, { useCallback, useMemo } from 'react'; +import React, { useCallback, useMemo, useRef, useEffect } from 'react'; import { useHistory } from 'react-router-dom'; import { useDiscoverServices } from '../../../../utils/use_discover_services'; import { DiscoverLayoutProps } from '../layout/types'; @@ -25,6 +25,9 @@ export type DiscoverTopNavProps = Pick< updateQuery: (payload: { dateRange: TimeRange; query?: Query }, isUpdate?: boolean) => void; stateContainer: GetStateReturn; resetSavedSearch: () => void; + onChangeIndexPattern: (indexPattern: string) => void; + onEditRuntimeField: () => void; + useNewFieldsApi?: boolean; }; export const DiscoverTopNav = ({ @@ -38,6 +41,9 @@ export const DiscoverTopNav = ({ navigateTo, savedSearch, resetSavedSearch, + onChangeIndexPattern, + onEditRuntimeField, + useNewFieldsApi = false, }: DiscoverTopNavProps) => { const history = useHistory(); const showDatePicker = useMemo( @@ -45,7 +51,13 @@ export const DiscoverTopNav = ({ [indexPattern] ); const services = useDiscoverServices(); - const { TopNavMenu } = services.navigation.ui; + const { dataViewEditor, navigation, dataViewFieldEditor, data } = services; + const editPermission = dataViewFieldEditor.userPermissions.editIndexPattern(); + const canEditDataViewField = !!editPermission && useNewFieldsApi; + const closeFieldEditor = useRef<() => void | undefined>(); + const closeDataViewEditor = useRef<() => void | undefined>(); + + const { TopNavMenu } = navigation.ui; const onOpenSavedSearch = useCallback( (newSavedSearchId: string) => { @@ -58,6 +70,64 @@ export const DiscoverTopNav = ({ [history, resetSavedSearch, savedSearch.id] ); + useEffect(() => { + return () => { + // Make sure to close the editors when unmounting + if (closeFieldEditor.current) { + closeFieldEditor.current(); + } + if (closeDataViewEditor.current) { + closeDataViewEditor.current(); + } + }; + }, []); + + const editField = useMemo( + () => + canEditDataViewField + ? async (fieldName?: string, uiAction: 'edit' | 'add' = 'edit') => { + if (indexPattern?.id) { + const indexPatternInstance = await data.dataViews.get(indexPattern?.id); + closeFieldEditor.current = dataViewFieldEditor.openEditor({ + ctx: { + dataView: indexPatternInstance, + }, + fieldName, + onSave: async () => { + onEditRuntimeField(); + }, + }); + } + } + : undefined, + [ + canEditDataViewField, + indexPattern?.id, + data.dataViews, + dataViewFieldEditor, + onEditRuntimeField, + ] + ); + + const addField = useMemo( + () => (canEditDataViewField && editField ? () => editField(undefined, 'add') : undefined), + [editField, canEditDataViewField] + ); + + const createNewDataView = useCallback(() => { + const indexPatternFieldEditPermission = dataViewEditor.userPermissions.editDataView; + if (!indexPatternFieldEditPermission) { + return; + } + closeDataViewEditor.current = dataViewEditor.openEditor({ + onSave: async (dataView) => { + if (dataView.id) { + onChangeIndexPattern(dataView.id); + } + }, + }); + }, [dataViewEditor, onChangeIndexPattern]); + const topNavMenu = useMemo( () => getTopNavLinks({ @@ -99,6 +169,18 @@ export const DiscoverTopNav = ({ return getHeaderActionMenuMounter(); }, []); + const dataViewPickerProps = { + trigger: { + label: indexPattern?.title || '', + 'data-test-subj': 'discover-dataView-switch-link', + title: indexPattern?.title || '', + }, + currentDataViewId: indexPattern?.id, + onAddField: addField, + onDataViewCreated: createNewDataView, + onChangeDataView: (newIndexPatternId: string) => onChangeIndexPattern(newIndexPatternId), + }; + return ( ); }; diff --git a/src/plugins/discover/public/application/main/discover_main_app.test.tsx b/src/plugins/discover/public/application/main/discover_main_app.test.tsx index 86cd009b86d779..abc99237e871f4 100644 --- a/src/plugins/discover/public/application/main/discover_main_app.test.tsx +++ b/src/plugins/discover/public/application/main/discover_main_app.test.tsx @@ -9,11 +9,11 @@ import React from 'react'; import { mountWithIntl } from '@kbn/test-jest-helpers'; import { indexPatternMock } from '../../__mocks__/index_pattern'; import { DiscoverMainApp } from './discover_main_app'; +import { DiscoverTopNav } from './components/top_nav/discover_topnav'; import { savedSearchMock } from '../../__mocks__/saved_search'; import { SavedObject } from '../../../../../core/types'; import type { DataViewAttributes } from '../../../../data_views/public'; import { setHeaderActionMenuMounter } from '../../kibana_services'; -import { findTestSubject } from '@elastic/eui/lib/test'; import { KibanaContextProvider } from '../../../../kibana_react/public'; import { discoverServiceMock } from '../../__mocks__/services'; import { Router } from 'react-router-dom'; @@ -42,8 +42,7 @@ describe('DiscoverMainApp', () => { ); - expect(findTestSubject(component, 'indexPattern-switch-link').text()).toBe( - indexPatternMock.title - ); + expect(component.find(DiscoverTopNav).exists()).toBe(true); + expect(component.find(DiscoverTopNav).prop('indexPattern')).toEqual(indexPatternMock); }); }); diff --git a/test/functional/apps/dashboard/dashboard_state.ts b/test/functional/apps/dashboard/dashboard_state.ts index d3643753c8e836..3a883b5a0b268d 100644 --- a/test/functional/apps/dashboard/dashboard_state.ts +++ b/test/functional/apps/dashboard/dashboard_state.ts @@ -48,13 +48,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { isNewChartsLibraryEnabled = await PageObjects.visChart.isNewChartsLibraryEnabled(); await PageObjects.dashboard.initTests(); await PageObjects.dashboard.preserveCrossAppState(); + await browser.setLocalStorageItem('data.newDataViewMenu', 'true'); if (isNewChartsLibraryEnabled) { await kibanaServer.uiSettings.update({ 'visualization:visualize:legacyPieChartsLibrary': false, }); - await browser.refresh(); } + await browser.refresh(); }); after(async function () { diff --git a/test/functional/apps/discover/_indexpattern_without_timefield.ts b/test/functional/apps/discover/_indexpattern_without_timefield.ts index 2d5892fa6e6cac..6c936f63e999d4 100644 --- a/test/functional/apps/discover/_indexpattern_without_timefield.ts +++ b/test/functional/apps/discover/_indexpattern_without_timefield.ts @@ -91,7 +91,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await browser.goBack(); await PageObjects.discover.waitForDocTableLoadingComplete(); return ( - (await testSubjects.getVisibleText('indexPattern-switch-link')) === 'without-timefield' + (await testSubjects.getVisibleText('discover-dataView-switch-link')) === + 'without-timefield' ); } ); diff --git a/test/functional/apps/home/_navigation.ts b/test/functional/apps/home/_navigation.ts index 016cead53f0c43..1d9d02d5e94b58 100644 --- a/test/functional/apps/home/_navigation.ts +++ b/test/functional/apps/home/_navigation.ts @@ -11,7 +11,7 @@ import { FtrProviderContext } from '../../ftr_provider_context'; export default function ({ getService, getPageObjects }: FtrProviderContext) { const browser = getService('browser'); - const PageObjects = getPageObjects(['common', 'header', 'home', 'timePicker']); + const PageObjects = getPageObjects(['common', 'header', 'home', 'timePicker', 'unifiedSearch']); const appsMenu = getService('appsMenu'); const esArchiver = getService('esArchiver'); const kibanaServer = getService('kibanaServer'); @@ -37,6 +37,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { // Navigate to discover app await appsMenu.clickLink('Discover'); + await PageObjects.unifiedSearch.closeTourPopoverByLocalStorage(); const discoverUrl = await browser.getCurrentUrl(); await PageObjects.timePicker.setDefaultAbsoluteRange(); const modifiedTimeDiscoverUrl = await browser.getCurrentUrl(); diff --git a/test/functional/page_objects/common_page.ts b/test/functional/page_objects/common_page.ts index 0150daec3afb5c..88ae1f62a4ed06 100644 --- a/test/functional/page_objects/common_page.ts +++ b/test/functional/page_objects/common_page.ts @@ -281,6 +281,7 @@ export class CommonPageObject extends FtrService { } if (appName === 'discover') { await this.browser.setLocalStorageItem('data.autocompleteFtuePopover', 'true'); + await this.browser.setLocalStorageItem('data.newDataViewMenu', 'true'); } return currentUrl; }); diff --git a/test/functional/page_objects/discover_page.ts b/test/functional/page_objects/discover_page.ts index 842f13f2666e1b..e6c6166ad2e053 100644 --- a/test/functional/page_objects/discover_page.ts +++ b/test/functional/page_objects/discover_page.ts @@ -23,6 +23,7 @@ export class DiscoverPageObject extends FtrService { private readonly config = this.ctx.getService('config'); private readonly dataGrid = this.ctx.getService('dataGrid'); private readonly kibanaServer = this.ctx.getService('kibanaServer'); + private readonly unifiedSearch = this.ctx.getPageObject('unifiedSearch'); private readonly defaultFindTimeout = this.config.get('timeouts.find'); @@ -357,8 +358,7 @@ export class DiscoverPageObject extends FtrService { public async clickIndexPatternActions() { await this.retry.try(async () => { - await this.testSubjects.click('discoverIndexPatternActions'); - await this.testSubjects.existOrFail('discover-addRuntimeField-popover'); + await this.testSubjects.click('discover-dataView-switch-link'); }); } @@ -486,7 +486,7 @@ export class DiscoverPageObject extends FtrService { } public async selectIndexPattern(indexPattern: string) { - await this.testSubjects.click('indexPattern-switch-link'); + await this.testSubjects.click('discover-dataView-switch-link'); await this.find.setValue('[data-test-subj="indexPattern-switcher"] input', indexPattern); await this.find.clickByCssSelector( `[data-test-subj="indexPattern-switcher"] [title="${indexPattern}"]` @@ -549,6 +549,7 @@ export class DiscoverPageObject extends FtrService { await this.retry.waitFor('Discover app on screen', async () => { return await this.isDiscoverAppOnScreen(); }); + await this.unifiedSearch.closeTourPopoverByLocalStorage(); } public async showAllFilterActions() { @@ -622,7 +623,7 @@ export class DiscoverPageObject extends FtrService { public async getCurrentlySelectedDataView() { await this.testSubjects.existOrFail('discover-sidebar'); - const button = await this.testSubjects.find('indexPattern-switch-link'); + const button = await this.testSubjects.find('discover-dataView-switch-link'); return button.getAttribute('title'); } } diff --git a/test/functional/page_objects/index.ts b/test/functional/page_objects/index.ts index 826c4b78d1d0f1..bdfe91efef9007 100644 --- a/test/functional/page_objects/index.ts +++ b/test/functional/page_objects/index.ts @@ -31,6 +31,7 @@ import { SavedObjectsPageObject } from './management/saved_objects_page'; import { LegacyDataTableVisPageObject } from './legacy/data_table_vis'; import { IndexPatternFieldEditorPageObject } from './management/indexpattern_field_editor_page'; import { DashboardPageControls } from './dashboard_page_controls'; +import { UnifiedSearchPageObject } from './unified_search_page'; export const pageObjects = { common: CommonPageObject, @@ -58,4 +59,5 @@ export const pageObjects = { vegaChart: VegaChartPageObject, savedObjects: SavedObjectsPageObject, indexPatternFieldEditorObjects: IndexPatternFieldEditorPageObject, + unifiedSearch: UnifiedSearchPageObject, }; diff --git a/test/functional/page_objects/unified_search_page.ts b/test/functional/page_objects/unified_search_page.ts new file mode 100644 index 00000000000000..b1bcd0662f77e0 --- /dev/null +++ b/test/functional/page_objects/unified_search_page.ts @@ -0,0 +1,26 @@ +/* + * 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 { FtrService } from '../ftr_provider_context'; + +export class UnifiedSearchPageObject extends FtrService { + private readonly browser = this.ctx.getService('browser'); + private readonly testSubjects = this.ctx.getService('testSubjects'); + + public async closeTour() { + const tourPopoverIsOpen = await this.testSubjects.exists('dataViewPickerTourLink'); + if (tourPopoverIsOpen) { + await this.testSubjects.click('dataViewPickerTourLink'); + } + } + + public async closeTourPopoverByLocalStorage() { + await this.browser.setLocalStorageItem('data.newDataViewMenu', 'true'); + await this.browser.refresh(); + } +} diff --git a/test/functional/page_objects/visualize_page.ts b/test/functional/page_objects/visualize_page.ts index 06d34094e614c6..750dd74e667a86 100644 --- a/test/functional/page_objects/visualize_page.ts +++ b/test/functional/page_objects/visualize_page.ts @@ -39,6 +39,7 @@ export class VisualizePageObject extends FtrService { private readonly elasticChart = this.ctx.getService('elasticChart'); private readonly common = this.ctx.getPageObject('common'); private readonly header = this.ctx.getPageObject('header'); + private readonly unifiedSearch = this.ctx.getPageObject('unifiedSearch'); private readonly visEditor = this.ctx.getPageObject('visEditor'); private readonly visChart = this.ctx.getPageObject('visChart'); @@ -151,6 +152,10 @@ export class VisualizePageObject extends FtrService { public async clickVisType(type: string) { await this.testSubjects.click(`visType-${type}`); await this.header.waitUntilLoadingHasFinished(); + + if (type === 'lens') { + await this.unifiedSearch.closeTour(); + } } public async clickAreaChart() { diff --git a/test/functional/services/dashboard/visualizations.ts b/test/functional/services/dashboard/visualizations.ts index 8688d375f7a7b9..48828798a4efa3 100644 --- a/test/functional/services/dashboard/visualizations.ts +++ b/test/functional/services/dashboard/visualizations.ts @@ -17,6 +17,7 @@ export class DashboardVisualizationsService extends FtrService { private readonly visualize = this.ctx.getPageObject('visualize'); private readonly visEditor = this.ctx.getPageObject('visEditor'); private readonly header = this.ctx.getPageObject('header'); + private readonly unifiedSearch = this.ctx.getPageObject('unifiedSearch'); private readonly discover = this.ctx.getPageObject('discover'); private readonly timePicker = this.ctx.getPageObject('timePicker'); @@ -43,6 +44,7 @@ export class DashboardVisualizationsService extends FtrService { }) { this.log.debug(`createSavedSearch(${name})`); await this.header.clickDiscover(true); + await this.unifiedSearch.closeTourPopoverByLocalStorage(); await this.timePicker.setHistoricalDataRange(); if (query) { diff --git a/x-pack/plugins/lens/kibana.json b/x-pack/plugins/lens/kibana.json index 17a58a0f967702..bb31327692de97 100644 --- a/x-pack/plugins/lens/kibana.json +++ b/x-pack/plugins/lens/kibana.json @@ -20,6 +20,7 @@ "share", "presentationUtil", "dataViewFieldEditor", + "dataViewEditor", "expressionGauge", "expressionHeatmap" ], diff --git a/x-pack/plugins/lens/public/app_plugin/app.test.tsx b/x-pack/plugins/lens/public/app_plugin/app.test.tsx index e7cdcfe4707cba..e7bc3a482b86a9 100644 --- a/x-pack/plugins/lens/public/app_plugin/app.test.tsx +++ b/x-pack/plugins/lens/public/app_plugin/app.test.tsx @@ -379,6 +379,75 @@ describe('Lens App', () => { }); }); + describe('TopNavMenu#dataViewPickerProps', () => { + it('calls the nav component with the correct dataview picker props if no permissions are given', async () => { + const { instance, lensStore } = await mountWith({ preloadedState: {} }); + const document = { + savedObjectId: defaultSavedObjectId, + state: { + query: 'fake query', + filters: [{ query: { match_phrase: { src: 'test' } } }], + }, + references: [{ type: 'index-pattern', id: '1', name: 'index-pattern-0' }], + } as unknown as Document; + + act(() => { + lensStore.dispatch( + setState({ + query: 'fake query' as unknown as Query, + persistedDoc: document, + }) + ); + }); + instance.update(); + const props = instance + .find('[data-test-subj="lnsApp_topNav"]') + .prop('dataViewPickerComponentProps') as TopNavMenuData[]; + expect(props).toEqual( + expect.objectContaining({ + currentDataViewId: 'mockip', + onChangeDataView: expect.any(Function), + onDataViewCreated: expect.any(Function), + onAddField: undefined, + }) + ); + }); + + it('calls the nav component with the correct dataview picker props if permissions are given', async () => { + const { instance, lensStore, services } = await mountWith({ preloadedState: {} }); + services.dataViewFieldEditor.userPermissions.editIndexPattern = () => true; + const document = { + savedObjectId: defaultSavedObjectId, + state: { + query: 'fake query', + filters: [{ query: { match_phrase: { src: 'test' } } }], + }, + references: [{ type: 'index-pattern', id: '1', name: 'index-pattern-0' }], + } as unknown as Document; + + act(() => { + lensStore.dispatch( + setState({ + query: 'fake query' as unknown as Query, + persistedDoc: document, + }) + ); + }); + instance.update(); + const props = instance + .find('[data-test-subj="lnsApp_topNav"]') + .prop('dataViewPickerComponentProps') as TopNavMenuData[]; + expect(props).toEqual( + expect.objectContaining({ + currentDataViewId: 'mockip', + onChangeDataView: expect.any(Function), + onDataViewCreated: expect.any(Function), + onAddField: expect.any(Function), + }) + ); + }); + }); + describe('persistence', () => { it('passes query and indexPatterns to TopNavMenu', async () => { const { instance, lensStore, services } = await mountWith({ preloadedState: {} }); 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 e30ea0d44aef34..84234ebde592eb 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 @@ -7,7 +7,7 @@ import { isEqual } from 'lodash'; import { i18n } from '@kbn/i18n'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react'; import { TopNavMenuData } from '../../../../../src/plugins/navigation/public'; import { LensAppServices, @@ -15,6 +15,7 @@ import { LensTopNavMenuProps, LensTopNavTooltips, } from './types'; +import type { StateSetter } from '../types'; import { downloadMultipleAs } from '../../../../../src/plugins/share/public'; import { trackUiEvent } from '../lens_ui_telemetry'; import { tableHasFormulas } from '../../../../../src/plugins/data/common'; @@ -27,8 +28,15 @@ import { useLensDispatch, LensAppState, DispatchSetState, + updateDatasourceState, } from '../state_management'; -import { getIndexPatternsObjects, getIndexPatternsIds, getResolvedDateRange } from '../utils'; +import { + getIndexPatternsObjects, + getIndexPatternsIds, + getResolvedDateRange, + handleIndexPatternChange, + refreshIndexPatternsList, +} from '../utils'; import { combineQueryAndFilters, getLayerMetaInfo, @@ -210,6 +218,8 @@ export const LensTopNavMenu = ({ attributeService, discover, dashboardFeatureFlag, + dataViewFieldEditor, + dataViewEditor, dataViews, } = useKibana().services; @@ -221,6 +231,9 @@ export const LensTopNavMenu = ({ const [indexPatterns, setIndexPatterns] = useState([]); const [rejectedIndexPatterns, setRejectedIndexPatterns] = useState([]); + const editPermission = dataViewFieldEditor.userPermissions.editIndexPattern(); + const closeFieldEditor = useRef<() => void | undefined>(); + const closeDataViewEditor = useRef<() => void | undefined>(); const { isSaveable, @@ -280,6 +293,18 @@ export const LensTopNavMenu = ({ dataViews, ]); + useEffect(() => { + return () => { + // Make sure to close the editors when unmounting + if (closeFieldEditor.current) { + closeFieldEditor.current(); + } + if (closeDataViewEditor.current) { + closeDataViewEditor.current(); + } + }; + }, []); + const { TopNavMenu } = navigation.ui; const { from, to } = data.query.timefilter.timefilter.getTime(); @@ -553,6 +578,120 @@ export const LensTopNavMenu = ({ }); }, [data.query.filterManager, data.query.queryString, dispatchSetState]); + const currentIndexPattern = indexPatterns[0]; + + const setDatasourceState: StateSetter = useMemo(() => { + return (updater) => { + dispatch( + updateDatasourceState({ + updater, + datasourceId: activeDatasourceId!, + clearStagedPreview: true, + }) + ); + }; + }, [activeDatasourceId, dispatch]); + + const refreshFieldList = useCallback(async () => { + if (currentIndexPattern && currentIndexPattern.id) { + refreshIndexPatternsList({ + activeDatasources: Object.keys(datasourceStates).reduce( + (acc, datasourceId) => ({ + ...acc, + [datasourceId]: datasourceMap[datasourceId], + }), + {} + ), + indexPatternId: currentIndexPattern.id, + setDatasourceState, + }); + } + // start a new session so all charts are refreshed + data.search.session.start(); + }, [ + currentIndexPattern, + data.search.session, + datasourceMap, + datasourceStates, + setDatasourceState, + ]); + + const editField = useMemo( + () => + editPermission + ? async (fieldName?: string, uiAction: 'edit' | 'add' = 'edit') => { + if (currentIndexPattern?.id) { + const indexPatternInstance = await data.dataViews.get(currentIndexPattern?.id); + closeFieldEditor.current = dataViewFieldEditor.openEditor({ + ctx: { + dataView: indexPatternInstance, + }, + fieldName, + onSave: async () => { + refreshFieldList(); + }, + }); + } + } + : undefined, + [editPermission, currentIndexPattern?.id, data.dataViews, dataViewFieldEditor, refreshFieldList] + ); + + const addField = useMemo( + () => (editPermission && editField ? () => editField(undefined, 'add') : undefined), + [editField, editPermission] + ); + + const createNewDataView = useCallback(() => { + const dataViewEditPermission = dataViewEditor.userPermissions.editDataView; + if (!dataViewEditPermission) { + return; + } + closeDataViewEditor.current = dataViewEditor.openEditor({ + onSave: async (dataView) => { + if (dataView.id) { + handleIndexPatternChange({ + activeDatasources: Object.keys(datasourceStates).reduce( + (acc, datasourceId) => ({ + ...acc, + [datasourceId]: datasourceMap[datasourceId], + }), + {} + ), + datasourceStates, + indexPatternId: dataView.id, + setDatasourceState, + }); + refreshFieldList(); + } + }, + }); + }, [dataViewEditor, datasourceMap, datasourceStates, refreshFieldList, setDatasourceState]); + + const dataViewPickerProps = { + trigger: { + label: currentIndexPattern?.title || '', + 'data-test-subj': 'lns-dataView-switch-link', + title: currentIndexPattern?.title || '', + }, + currentDataViewId: currentIndexPattern?.id, + onAddField: addField, + onDataViewCreated: createNewDataView, + onChangeDataView: (newIndexPatternId: string) => + handleIndexPatternChange({ + activeDatasources: Object.keys(datasourceStates).reduce( + (acc, datasourceId) => ({ + ...acc, + [datasourceId]: datasourceMap[datasourceId], + }), + {} + ), + datasourceStates, + indexPatternId: newIndexPatternId, + setDatasourceState, + }), + }; + return ( ip.isTimeBased()) || Boolean( diff --git a/x-pack/plugins/lens/public/app_plugin/mounter.tsx b/x-pack/plugins/lens/public/app_plugin/mounter.tsx index 10337c26f14efd..fc54569b3a9a3f 100644 --- a/x-pack/plugins/lens/public/app_plugin/mounter.tsx +++ b/x-pack/plugins/lens/public/app_plugin/mounter.tsx @@ -87,6 +87,8 @@ export async function getLensServices( notifications: coreStart.notifications, savedObjectsClient: coreStart.savedObjects.client, presentationUtil: startDependencies.presentationUtil, + dataViewEditor: startDependencies.dataViewEditor, + dataViewFieldEditor: startDependencies.dataViewFieldEditor, dashboard: startDependencies.dashboard, getOriginatingAppName: () => { return embeddableEditorIncomingState?.originatingApp diff --git a/x-pack/plugins/lens/public/app_plugin/types.ts b/x-pack/plugins/lens/public/app_plugin/types.ts index ff6092c42eaa56..2bdd7e246227a0 100644 --- a/x-pack/plugins/lens/public/app_plugin/types.ts +++ b/x-pack/plugins/lens/public/app_plugin/types.ts @@ -30,6 +30,8 @@ import type { LensAttributeService } from '../lens_attribute_service'; import type { IStorageWrapper } from '../../../../../src/plugins/kibana_utils/public'; import type { DashboardFeatureFlagConfig } from '../../../../../src/plugins/dashboard/public'; import type { SavedObjectTaggingPluginStart } from '../../../saved_objects_tagging/public'; +import type { IndexPatternFieldEditorStart } from '../../../../../src/plugins/data_view_field_editor/public'; +import type { DataViewEditorStart } from '../../../../../src/plugins/data_view_editor/public'; import { VisualizeFieldContext, ACTION_VISUALIZE_LENS_FIELD, @@ -142,6 +144,8 @@ export interface LensAppServices { // Temporarily required until the 'by value' paradigm is default. dashboardFeatureFlag: DashboardFeatureFlagConfig; + dataViewEditor: DataViewEditorStart; + dataViewFieldEditor: IndexPatternFieldEditorStart; } export interface LensTopNavTooltips { diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx index d5fabb9d7ef80d..bca17bba73e956 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx @@ -7,10 +7,11 @@ import { i18n } from '@kbn/i18n'; import React, { useState } from 'react'; -import { EuiPopover, EuiPopoverTitle, EuiSelectable, EuiSelectableProps } from '@elastic/eui'; +import { EuiPopover, EuiPopoverTitle, EuiSelectableProps } from '@elastic/eui'; import { IndexPatternRef } from './types'; import { trackUiEvent } from '../lens_ui_telemetry'; import { ToolbarButton, ToolbarButtonProps } from '../../../../../src/plugins/kibana_react/public'; +import { DataViewsList } from '../../../../../src/plugins/data/public'; export type ChangeIndexPatternTriggerProps = ToolbarButtonProps & { label: string; @@ -67,50 +68,26 @@ export function ChangeIndexPattern({ isOpen={isPopoverOpen} closePopover={() => setPopoverIsOpen(false)} display="block" - panelPaddingSize="s" + panelPaddingSize="none" ownFocus >
- + {i18n.translate('xpack.lens.indexPattern.changeDataViewTitle', { defaultMessage: 'Data view', })} - - {...selectableProps} - searchable - singleSelection="always" - options={indexPatternRefs.map(({ title, id }) => ({ - key: id, - label: title, - value: id, - checked: id === indexPatternId ? 'on' : undefined, - }))} - onChange={(choices) => { - const choice = choices.find(({ checked }) => checked) as unknown as { - value: string; - }; + + { trackUiEvent('indexpattern_changed'); - onChangeIndexPattern(choice.value); + onChangeIndexPattern(newId); setPopoverIsOpen(false); }} - searchProps={{ - compressed: true, - ...(selectableProps ? selectableProps.searchProps : undefined), - }} - > - {(list, search) => ( - <> - {search} - {list} - - )} - + currentDataViewId={indexPatternId} + selectableProps={selectableProps} + />
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx index 93000db126e65a..bc1d7173ebd63b 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx @@ -6,7 +6,6 @@ */ import React from 'react'; -import { waitFor } from '@testing-library/react'; import ReactDOM from 'react-dom'; import { createMockedDragDropContext } from './mocks'; import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks'; @@ -19,7 +18,6 @@ import { act } from 'react-dom/test-utils'; import { coreMock } from 'src/core/public/mocks'; import { IndexPatternPrivateState } from './types'; import { mountWithIntl, shallowWithIntl } from '@kbn/test-jest-helpers'; -import { ChangeIndexPattern } from './change_indexpattern'; import { EuiProgress, EuiLoadingSpinner } from '@elastic/eui'; import { documentField } from './document_field'; import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks'; @@ -328,14 +326,6 @@ describe('IndexPattern Data Panel', () => { expect(wrapper.find('[data-test-subj="indexPattern-no-indexpatterns"]')).toHaveLength(1); }); - it('should call setState when the index pattern is switched', async () => { - const wrapper = shallowWithIntl(); - - wrapper.find(ChangeIndexPattern).prop('onChangeIndexPattern')('2'); - - expect(defaultProps.onChangeIndexPattern).toHaveBeenCalledWith('2'); - }); - describe('loading existence data', () => { function testProps() { const setState = jest.fn(); @@ -853,90 +843,5 @@ describe('IndexPattern Data Panel', () => { 'memory', ]); }); - describe('edit field list', () => { - beforeEach(() => { - props.indexPatternFieldEditor.userPermissions.editIndexPattern = () => true; - }); - it('should call field editor plugin on clicking add button', async () => { - const mockIndexPattern = {}; - (props.dataViews.get as jest.Mock).mockImplementation(() => - Promise.resolve(mockIndexPattern) - ); - const wrapper = mountWithIntl(); - act(() => { - const popoverTrigger = wrapper.find( - '[data-test-subj="lnsIndexPatternActions-popover"] button' - ); - popoverTrigger.simulate('click'); - }); - - wrapper.update(); - act(() => { - wrapper.find('[data-test-subj="indexPattern-add-field"]').first().simulate('click'); - }); - // wait for indx pattern to be loaded - await waitFor(() => { - expect(props.indexPatternFieldEditor.openEditor).toHaveBeenCalledWith( - expect.objectContaining({ - ctx: expect.objectContaining({ - dataView: mockIndexPattern, - }), - }) - ); - }); - }); - - it('should reload index pattern if callback gets called', async () => { - const mockIndexPattern = { - id: '1', - fields: [ - { - name: 'fieldOne', - aggregatable: true, - }, - ], - metaFields: [], - }; - (props.dataViews.get as jest.Mock).mockImplementation(() => - Promise.resolve(mockIndexPattern) - ); - const wrapper = mountWithIntl(); - - act(() => { - const popoverTrigger = wrapper.find( - '[data-test-subj="lnsIndexPatternActions-popover"] button' - ); - popoverTrigger.simulate('click'); - }); - - wrapper.update(); - act(() => { - wrapper.find('[data-test-subj="indexPattern-add-field"]').first().simulate('click'); - }); - - // wait for indx pattern to be loaded - await act(async () => await new Promise((r) => setTimeout(r, 0))); - - await (props.indexPatternFieldEditor.openEditor as jest.Mock).mock.calls[0][0].onSave(); - // wait for indx pattern to be loaded - await act(async () => await new Promise((r) => setTimeout(r, 0))); - expect(props.onUpdateIndexPattern).toHaveBeenCalledWith( - expect.objectContaining({ - fields: [ - expect.objectContaining({ - name: 'fieldOne', - }), - expect.anything(), - ], - }) - ); - }); - - it('should not render add button without permissions', () => { - props.indexPatternFieldEditor.userPermissions.editIndexPattern = () => false; - const wrapper = mountWithIntl(); - expect(wrapper.find('[data-test-subj="indexPattern-add-field"]').exists()).toBe(false); - }); - }); }); }); diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx index 4f8c492de3c17c..e979324f6e4c86 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx @@ -20,7 +20,6 @@ import { EuiFilterGroup, EuiFilterButton, EuiScreenReaderOnly, - EuiButtonIcon, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import type { EsQueryConfig, Query, Filter } from '@kbn/es-query'; @@ -61,7 +60,6 @@ export type Props = Omit, 'co indexPatternFieldEditor: IndexPatternFieldEditorStart; }; import { LensFieldIcon } from './lens_field_icon'; -import { ChangeIndexPattern } from './change_indexpattern'; import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public'; import { FieldGroups, FieldList } from './field_list'; @@ -571,11 +569,6 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({ [currentIndexPattern.id, dataViews, editPermission, indexPatternFieldEditor, refreshFieldList] ); - const addField = useMemo( - () => (editPermission && editField ? () => editField(undefined, 'add') : undefined), - [editField, editPermission] - ); - const fieldProps = useMemo( () => ({ core, @@ -601,8 +594,6 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({ ] ); - const [popoverOpen, setPopoverOpen] = useState(false); - return ( - - - - { - onChangeIndexPattern(newId); - clearLocalState(); - }} - /> - - {addField && ( - - { - setPopoverOpen(false); - }} - ownFocus - data-test-subj="lnsIndexPatternActions-popover" - button={ - { - setPopoverOpen(!popoverOpen); - }} - /> - } - > - { - setPopoverOpen(false); - addField(); - }} - > - {i18n.translate('xpack.lens.indexPatterns.addFieldButton', { - defaultMessage: 'Add field to data view', - })} - , - { - setPopoverOpen(false); - core.application.navigateToApp('management', { - path: `/kibana/indexPatterns/patterns/${currentIndexPattern.id}`, - }); - }} - > - {i18n.translate('xpack.lens.indexPatterns.manageFieldButton', { - defaultMessage: 'Manage data view fields', - })} - , - ]} - /> - - - )} - - { + handleChangeIndexPattern(indexPatternId, state, setState); + }, + + refreshIndexPatternsList: async ({ indexPatternId, setState }) => { + const newlyMappedIndexPattern = await loadIndexPatterns({ + indexPatternsService: dataViews, + cache: {}, + patterns: [indexPatternId], + }); + const indexPatternRefs = await dataViews.getIdsWithTitle(); + const indexPattern = newlyMappedIndexPattern[indexPatternId]; + setState((s) => { + return { + ...s, + indexPatterns: { + ...s.indexPatterns, + [indexPattern.id]: indexPattern, + }, + indexPatternRefs, + }; + }); + }, + // Reset the temporary invalid state when closing the editor, but don't // update the state if it's not needed updateStateOnCloseDimension: ({ state, layerId }) => { diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/layerpanel.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/layerpanel.test.tsx index 91b9de58bdaa15..37c2e9533f4349 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/layerpanel.test.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/layerpanel.test.tsx @@ -11,6 +11,7 @@ import { IndexPatternLayerPanelProps, LayerPanel } from './layerpanel'; import { shallowWithIntl as shallow } from '@kbn/test-jest-helpers'; import { ShallowWrapper } from 'enzyme'; import { EuiSelectable } from '@elastic/eui'; +import { DataViewsList } from '../../../../../src/plugins/data/public'; import { ChangeIndexPattern } from './change_indexpattern'; import { getFieldByNameFactory } from './pure_helpers'; import { TermsIndexPatternColumn } from './operations'; @@ -212,7 +213,14 @@ describe('Layer Data Panel', () => { }); function getIndexPatternPickerList(instance: ShallowWrapper) { - return instance.find(ChangeIndexPattern).first().dive().find(EuiSelectable); + return instance + .find(ChangeIndexPattern) + .first() + .dive() + .find(DataViewsList) + .first() + .dive() + .find(EuiSelectable); } function selectIndexPatternPickerOption(instance: ShallowWrapper, selectedLabel: string) { diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/layerpanel.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/layerpanel.tsx index f8548321e49bd3..efa1ef509b12d7 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/layerpanel.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/layerpanel.tsx @@ -22,7 +22,6 @@ export function LayerPanel({ state, layerId, onChangeIndexPattern }: IndexPatter const layer = state.layers[layerId]; const indexPattern = state.indexPatterns[layer.indexPatternId]; - const notFoundTitleLabel = i18n.translate('xpack.lens.layerPanel.missingDataView', { defaultMessage: 'Data view not found', }); diff --git a/x-pack/plugins/lens/public/mocks/services_mock.tsx b/x-pack/plugins/lens/public/mocks/services_mock.tsx index 28a05d0e58ae28..df192983ae72ae 100644 --- a/x-pack/plugins/lens/public/mocks/services_mock.tsx +++ b/x-pack/plugins/lens/public/mocks/services_mock.tsx @@ -12,6 +12,8 @@ import { navigationPluginMock } from '../../../../../src/plugins/navigation/publ import { LensAppServices } from '../app_plugin/types'; import { DOC_TYPE } from '../../common'; import { UI_SETTINGS } from '../../../../../src/plugins/data/public'; +import { indexPatternFieldEditorPluginMock } from '../../../../../src/plugins/data_view_field_editor/public/mocks'; +import { indexPatternEditorPluginMock } from '../../../../../src/plugins/data_view_editor/public/mocks'; import { inspectorPluginMock } from '../../../../../src/plugins/inspector/public/mocks'; import { spacesPluginMock } from '../../../spaces/public/mocks'; import { dashboardPluginMock } from '../../../../../src/plugins/dashboard/public/mocks'; @@ -155,5 +157,7 @@ export function makeDefaultServices( clear: jest.fn(), }, spaces: spacesPluginMock.createStartContract(), + dataViewFieldEditor: indexPatternFieldEditorPluginMock.createStartContract(), + dataViewEditor: indexPatternEditorPluginMock.createStartContract(), }; } diff --git a/x-pack/plugins/lens/public/plugin.ts b/x-pack/plugins/lens/public/plugin.ts index 4d883c3a27c5e7..9a9b79483ba814 100644 --- a/x-pack/plugins/lens/public/plugin.ts +++ b/x-pack/plugins/lens/public/plugin.ts @@ -37,6 +37,7 @@ import type { PresentationUtilPluginStart } from '../../../../src/plugins/presen import { EmbeddableStateTransfer } from '../../../../src/plugins/embeddable/public'; import type { EditorFrameService as EditorFrameServiceType } from './editor_frame_service'; import { IndexPatternFieldEditorStart } from '../../../../src/plugins/data_view_field_editor/public'; +import { DataViewEditorStart } from '../../../../src/plugins/data_view_editor/public'; import type { IndexPatternDatasource as IndexPatternDatasourceType, IndexPatternDatasourceSetupPlugins, @@ -123,6 +124,7 @@ export interface LensPluginStartDependencies { savedObjectsTagging?: SavedObjectTaggingPluginStart; presentationUtil: PresentationUtilPluginStart; dataViewFieldEditor: IndexPatternFieldEditorStart; + dataViewEditor: DataViewEditorStart; inspector: InspectorStartContract; spaces: SpacesPluginStart; usageCollection?: UsageCollectionStart; diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index 9bea94bd723d3d..6a7d717bdd506f 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -273,6 +273,14 @@ export interface Datasource { state: T; }) => T | undefined; + updateCurrentIndexPatternId?: (props: { + indexPatternId: string; + state: T; + setState: StateSetter; + }) => void; + + refreshIndexPatternsList?: (props: { indexPatternId: string; setState: StateSetter }) => void; + toExpression: (state: T, layerId: string) => ExpressionAstExpression | string | null; getDatasourceSuggestionsForField: ( diff --git a/x-pack/plugins/lens/public/utils.ts b/x-pack/plugins/lens/public/utils.ts index 09fed81d346026..9c9ebec341f341 100644 --- a/x-pack/plugins/lens/public/utils.ts +++ b/x-pack/plugins/lens/public/utils.ts @@ -18,6 +18,7 @@ import type { LensBrushEvent, LensFilterEvent, Visualization, + StateSetter, } from './types'; import { search } from '../../../../src/plugins/data/public'; import type { DatasourceStates, VisualizationState } from './state_management'; @@ -63,6 +64,43 @@ export const getInitialDatasourceId = (datasourceMap: DatasourceMap, doc?: Docum return (doc && getActiveDatasourceIdFromDoc(doc)) || Object.keys(datasourceMap)[0] || null; }; +export function handleIndexPatternChange({ + activeDatasources, + datasourceStates, + indexPatternId, + setDatasourceState, +}: { + activeDatasources: Record; + datasourceStates: DatasourceStates; + indexPatternId: string; + setDatasourceState: StateSetter; +}): void { + Object.entries(activeDatasources).forEach(([id, datasource]) => { + datasource?.updateCurrentIndexPatternId?.({ + state: datasourceStates[id].state, + indexPatternId, + setState: setDatasourceState, + }); + }); +} + +export function refreshIndexPatternsList({ + activeDatasources, + indexPatternId, + setDatasourceState, +}: { + activeDatasources: Record; + indexPatternId: string; + setDatasourceState: StateSetter; +}): void { + Object.entries(activeDatasources).forEach(([id, datasource]) => { + datasource?.refreshIndexPatternsList?.({ + indexPatternId, + setState: setDatasourceState, + }); + }); +} + export function getIndexPatternsIds({ activeDatasources, datasourceStates, diff --git a/x-pack/plugins/lens/tsconfig.json b/x-pack/plugins/lens/tsconfig.json index 583e2963a1ca7a..bdfd77f2e3c6ae 100644 --- a/x-pack/plugins/lens/tsconfig.json +++ b/x-pack/plugins/lens/tsconfig.json @@ -40,6 +40,7 @@ { "path": "../../../src/plugins/presentation_util/tsconfig.json"}, { "path": "../../../src/plugins/field_formats/tsconfig.json"}, { "path": "../../../src/plugins/chart_expressions/expression_heatmap/tsconfig.json"}, - { "path": "../../../src/plugins/chart_expressions/expression_gauge/tsconfig.json"} + { "path": "../../../src/plugins/chart_expressions/expression_gauge/tsconfig.json"}, + { "path": "../../../src/plugins/data_view_editor/tsconfig.json"}, ] } diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 0843867d79222d..69c2c7145519c4 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -578,13 +578,10 @@ "xpack.lens.indexPattern.timeShiftSmallWarning": "{label} utilise un décalage temporel de {columnTimeShift} qui est inférieur à l'intervalle de l'histogramme des dates de {interval}. Pour éviter une non-correspondance des données, utilisez un multiple de {interval} comme décalage.", "xpack.lens.indexPattern.uniqueLabel": "{label} [{num}]", "xpack.lens.indexPattern.useAsTopLevelAgg": "Regrouper d'abord en fonction de ce champ", - "xpack.lens.indexPatterns.actionsPopoverLabel": "Paramètres du modèle d'indexation", - "xpack.lens.indexPatterns.addFieldButton": "Ajouter un champ au modèle d'indexation", "xpack.lens.indexPatterns.clearFiltersLabel": "Effacer le nom et saisissez les filtres", "xpack.lens.indexPatterns.fieldFiltersLabel": "Filtrer par type", "xpack.lens.indexPatterns.fieldSearchLiveRegion": "{availableFields} {availableFields, plural, one {champ} other {champs}} disponible(s). {emptyFields} {emptyFields, plural, one {champ} other {champs}} vide(s). {metaFields} {metaFields, plural, one {champ} other {champs}} méta.", "xpack.lens.indexPatterns.filterByNameLabel": "Rechercher les noms des champs", - "xpack.lens.indexPatterns.manageFieldButton": "Gérer les champs du modèle d'indexation", "xpack.lens.indexPatterns.noAvailableDataLabel": "Aucun champ disponible ne contient de données.", "xpack.lens.indexPatterns.noDataLabel": "Aucun champ.", "xpack.lens.indexPatterns.noEmptyDataLabel": "Aucun champ vide.", @@ -2385,9 +2382,6 @@ "discover.fieldChooser.filter.toggleButton.no": "non", "discover.fieldChooser.filter.toggleButton.yes": "oui", "discover.fieldChooser.filter.typeLabel": "Type", - "discover.fieldChooser.indexPatterns.actionsPopoverLabel": "Paramètres du modèle d'indexation", - "discover.fieldChooser.indexPatterns.addFieldButton": "Ajouter un champ au modèle d'indexation", - "discover.fieldChooser.indexPatterns.manageFieldButton": "Gérer les champs du modèle d'indexation", "discover.fieldChooser.searchPlaceHolder": "Rechercher les noms de champs", "discover.fieldChooser.toggleFieldFilterButtonHideAriaLabel": "Masquer les paramètres de filtre de champs", "discover.fieldChooser.toggleFieldFilterButtonShowAriaLabel": "Afficher les paramètres de filtre de champs", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index ff74a38cae97eb..04f070dd8eea31 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -682,13 +682,10 @@ "xpack.lens.indexPattern.timeShiftSmallWarning": "{label}は{columnTimeShift}の時間シフトを使用しています。これは{interval}の日付ヒストグラム間隔よりも小さいです。不一致のデータを防止するには、時間シフトとして{interval}を使用します。", "xpack.lens.indexPattern.uniqueLabel": "{label} [{num}]", "xpack.lens.indexPattern.useAsTopLevelAgg": "最初にこのフィールドでグループ化", - "xpack.lens.indexPatterns.actionsPopoverLabel": "データビュー設定", - "xpack.lens.indexPatterns.addFieldButton": "フィールドをデータビューに追加", "xpack.lens.indexPatterns.clearFiltersLabel": "名前とタイプフィルターを消去", "xpack.lens.indexPatterns.fieldFiltersLabel": "タイプでフィルタリング", "xpack.lens.indexPatterns.fieldSearchLiveRegion": "{availableFields}使用可能な{availableFields, plural, other {フィールド}}。{emptyFields}空の{emptyFields, plural, other {フィールド}}。 {metaFields}メタ{metaFields, plural, other {フィールド}}。", "xpack.lens.indexPatterns.filterByNameLabel": "検索フィールド名", - "xpack.lens.indexPatterns.manageFieldButton": "データビューフィールドを管理", "xpack.lens.indexPatterns.noAvailableDataLabel": "データを含むフィールドはありません。", "xpack.lens.indexPatterns.noDataLabel": "フィールドがありません。", "xpack.lens.indexPatterns.noEmptyDataLabel": "空のフィールドがありません。", @@ -2794,7 +2791,6 @@ "discover.field.mappingConflict": "このフィールドは、このパターンと一致するインデックス全体に対して複数の型（文字列、整数など）として定義されています。この競合フィールドを使用することはできますが、Kibana で型を認識する必要がある関数では使用できません。この問題を修正するにはデータのレンダリングが必要です。", "discover.field.mappingConflict.title": "マッピングの矛盾", "discover.field.title": "{fieldName} ({fieldDisplayName})", - "discover.fieldChooser.dataViews.createNewDataView": "新しいデータビューを作成", "discover.fieldChooser.detailViews.emptyStringText": "空の文字列", "discover.fieldChooser.detailViews.existsInRecordsText": "{value} / {totalValue}件のレコードに存在", "discover.fieldChooser.detailViews.filterOutValueButtonAriaLabel": "{field}を除外：\"{value}\"", @@ -2831,10 +2827,6 @@ "discover.fieldChooser.filter.toggleButton.no": "いいえ", "discover.fieldChooser.filter.toggleButton.yes": "はい", "discover.fieldChooser.filter.typeLabel": "型", - "discover.fieldChooser.indexPattern.changeDataViewTitle": "データビューを変更", - "discover.fieldChooser.indexPatterns.actionsPopoverLabel": "データビュー設定", - "discover.fieldChooser.indexPatterns.addFieldButton": "フィールドの追加", - "discover.fieldChooser.indexPatterns.manageFieldButton": "設定の管理", "discover.fieldChooser.searchPlaceHolder": "検索フィールド名", "discover.fieldChooser.toggleFieldFilterButtonHideAriaLabel": "フィールド設定を非表示", "discover.fieldChooser.toggleFieldFilterButtonShowAriaLabel": "フィールド設定を表示", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 3134de6bd6f44d..9c3ff344dbd872 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -688,13 +688,10 @@ "xpack.lens.indexPattern.timeShiftSmallWarning": "{label} 使用的时间偏移 {columnTimeShift} 小于 Date Histogram 时间间隔 {interval} 。要防止数据不匹配，请使用 {interval} 的倍数作为时间偏移。", "xpack.lens.indexPattern.uniqueLabel": "{label} [{num}]", "xpack.lens.indexPattern.useAsTopLevelAgg": "先按此字段分组", - "xpack.lens.indexPatterns.actionsPopoverLabel": "数据视图设置", - "xpack.lens.indexPatterns.addFieldButton": "将字段添加到数据视图", "xpack.lens.indexPatterns.clearFiltersLabel": "清除名称和类型筛选", "xpack.lens.indexPatterns.fieldFiltersLabel": "按类型筛选", "xpack.lens.indexPatterns.fieldSearchLiveRegion": "{availableFields} 个可用{availableFields, plural, other {字段}}。{emptyFields} 个空{emptyFields, plural, other {字段}}。{metaFields} 个元{metaFields, plural,other {字段}}。", "xpack.lens.indexPatterns.filterByNameLabel": "搜索字段名称", - "xpack.lens.indexPatterns.manageFieldButton": "管理数据视图字段", "xpack.lens.indexPatterns.noAvailableDataLabel": "没有包含数据的可用字段。", "xpack.lens.indexPatterns.noDataLabel": "无字段。", "xpack.lens.indexPatterns.noEmptyDataLabel": "无空字段。", @@ -2802,7 +2799,6 @@ "discover.field.mappingConflict": "此字段在匹配此模式的各个索引中已定义为若干类型（字符串、整数等）。您可能仍可以使用此冲突字段，但它无法用于需要 Kibana 知道其类型的函数。要解决此问题，需要重新索引您的数据。", "discover.field.mappingConflict.title": "映射冲突", "discover.field.title": "{fieldName} ({fieldDisplayName})", - "discover.fieldChooser.dataViews.createNewDataView": "创建新的数据视图", "discover.fieldChooser.detailViews.emptyStringText": "空字符串", "discover.fieldChooser.detailViews.existsInRecordsText": "存在于 {value} / {totalValue} 条记录中", "discover.fieldChooser.detailViews.filterOutValueButtonAriaLabel": "筛除 {field}：“{value}”", @@ -2839,10 +2835,6 @@ "discover.fieldChooser.filter.toggleButton.no": "否", "discover.fieldChooser.filter.toggleButton.yes": "是", "discover.fieldChooser.filter.typeLabel": "类型", - "discover.fieldChooser.indexPattern.changeDataViewTitle": "更改数据视图", - "discover.fieldChooser.indexPatterns.actionsPopoverLabel": "数据视图设置", - "discover.fieldChooser.indexPatterns.addFieldButton": "添加字段", - "discover.fieldChooser.indexPatterns.manageFieldButton": "管理设置", "discover.fieldChooser.searchPlaceHolder": "搜索字段名称", "discover.fieldChooser.toggleFieldFilterButtonHideAriaLabel": "隐藏字段筛选设置", "discover.fieldChooser.toggleFieldFilterButtonShowAriaLabel": "显示字段筛选设置", diff --git a/x-pack/test/functional/apps/canvas/embeddables/lens.ts b/x-pack/test/functional/apps/canvas/embeddables/lens.ts index 5ecd3a3156909e..748f17c720b53e 100644 --- a/x-pack/test/functional/apps/canvas/embeddables/lens.ts +++ b/x-pack/test/functional/apps/canvas/embeddables/lens.ts @@ -10,7 +10,7 @@ import { FtrProviderContext } from '../../../ftr_provider_context'; export default function canvasLensTest({ getService, getPageObjects }: FtrProviderContext) { const retry = getService('retry'); - const PageObjects = getPageObjects(['canvas', 'common', 'header', 'lens']); + const PageObjects = getPageObjects(['canvas', 'common', 'header', 'lens', 'unifiedSearch']); const esArchiver = getService('esArchiver'); const dashboardAddPanel = getService('dashboardAddPanel'); const dashboardPanelActions = getService('dashboardPanelActions'); @@ -68,6 +68,7 @@ export default function canvasLensTest({ getService, getPageObjects }: FtrProvid await PageObjects.canvas.deleteSelectedElement(); const originalEmbeddableCount = await PageObjects.canvas.getEmbeddableCount(); await PageObjects.canvas.createNewVis('lens'); + await PageObjects.unifiedSearch.closeTourPopoverByLocalStorage(); await PageObjects.lens.goToTimeRange(); await PageObjects.lens.configureDimension({ dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', diff --git a/x-pack/test/functional/apps/dashboard/drilldowns/explore_data_panel_action.ts b/x-pack/test/functional/apps/dashboard/drilldowns/explore_data_panel_action.ts index c78c716364c4bb..687babe0c729d7 100644 --- a/x-pack/test/functional/apps/dashboard/drilldowns/explore_data_panel_action.ts +++ b/x-pack/test/functional/apps/dashboard/drilldowns/explore_data_panel_action.ts @@ -67,7 +67,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await testSubjects.clickWhenNotDisabled(ACTION_TEST_SUBJ); await discover.waitForDiscoverAppOnScreen(); - const el = await testSubjects.find('indexPattern-switch-link'); + const el = await testSubjects.find('discover-dataView-switch-link'); const text = await el.getVisibleText(); expect(text).to.be('logstash-*'); diff --git a/x-pack/test/functional/apps/lens/dashboard.ts b/x-pack/test/functional/apps/lens/dashboard.ts index e60e3ca76030cb..0d03b426988c8a 100644 --- a/x-pack/test/functional/apps/lens/dashboard.ts +++ b/x-pack/test/functional/apps/lens/dashboard.ts @@ -16,6 +16,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { 'timePicker', 'lens', 'discover', + 'unifiedSearch', ]); const find = getService('find'); @@ -105,7 +106,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await testSubjects.clickWhenNotDisabled('embeddablePanelAction-ACTION_EXPLORE_DATA'); await PageObjects.discover.waitForDiscoverAppOnScreen(); - const el = await testSubjects.find('indexPattern-switch-link'); + const el = await testSubjects.find('discover-dataView-switch-link'); const text = await el.getVisibleText(); expect(text).to.be('logstash-*'); @@ -168,6 +169,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.dashboard.clickNewDashboard(); await dashboardAddPanel.clickCreateNewLink(); await PageObjects.header.waitUntilLoadingHasFinished(); + await PageObjects.unifiedSearch.closeTourPopoverByLocalStorage(); await PageObjects.lens.goToTimeRange(); await PageObjects.lens.configureDimension({ dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', diff --git a/x-pack/test/functional/apps/lens/lens_tagging.ts b/x-pack/test/functional/apps/lens/lens_tagging.ts index 3852fdb0456acf..e771868d4334f9 100644 --- a/x-pack/test/functional/apps/lens/lens_tagging.ts +++ b/x-pack/test/functional/apps/lens/lens_tagging.ts @@ -24,6 +24,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { 'visualize', 'lens', 'timePicker', + 'unifiedSearch', ]); const lensTag = 'extreme-lens-tag'; @@ -36,6 +37,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.common.navigateToApp('dashboard'); await PageObjects.dashboard.preserveCrossAppState(); await PageObjects.dashboard.clickNewDashboard(); + await PageObjects.unifiedSearch.closeTourPopoverByLocalStorage(); }); after(async () => { diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index 550a5596068cad..67199724eb1aec 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -28,6 +28,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont 'visualize', 'dashboard', 'timeToVisualize', + 'unifiedSearch', ]); return logWrapper('lensPage', log, { @@ -96,6 +97,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont return retry.try(async () => { await testSubjects.click(`visListingTitleLink-${title}`); await this.isLensPageOrFail(); + await PageObjects.unifiedSearch.closeTourPopoverByLocalStorage(); }); }, @@ -809,7 +811,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont * Changes the index pattern in the data panel */ async switchDataPanelIndexPattern(name: string) { - await testSubjects.click('indexPattern-switch-link'); + await testSubjects.click('lns-dataView-switch-link'); await find.clickByCssSelector(`[title="${name}"]`); await PageObjects.header.waitUntilLoadingHasFinished(); }, @@ -827,7 +829,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont * Returns the current index pattern of the data panel */ async getDataPanelIndexPattern() { - return await (await testSubjects.find('indexPattern-switch-link')).getAttribute('title'); + return await (await testSubjects.find('lns-dataView-switch-link')).getAttribute('title'); }, /** @@ -1099,6 +1101,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont await PageObjects.dashboard.switchToEditMode(); } await dashboardAddPanel.clickCreateNewLink(); + await PageObjects.unifiedSearch.closeTourPopoverByLocalStorage(); await this.goToTimeRange(); await this.configureDimension({ dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', @@ -1171,7 +1174,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont }, async clickAddField() { - await testSubjects.click('lnsIndexPatternActions'); + await testSubjects.click('lns-dataView-switch-link'); await testSubjects.existOrFail('indexPattern-add-field'); await testSubjects.click('indexPattern-add-field'); }, diff --git a/x-pack/test/functional/services/ml/dashboard_embeddables.ts b/x-pack/test/functional/services/ml/dashboard_embeddables.ts index 1eb4e25a4edd57..74268f74d19a20 100644 --- a/x-pack/test/functional/services/ml/dashboard_embeddables.ts +++ b/x-pack/test/functional/services/ml/dashboard_embeddables.ts @@ -117,7 +117,9 @@ export function MachineLearningDashboardEmbeddablesProvider( async selectDiscoverIndexPattern(indexPattern: string) { await retry.tryForTime(2 * 1000, async () => { await PageObjects.discover.selectIndexPattern(indexPattern); - const indexPatternTitle = await testSubjects.getVisibleText('indexPattern-switch-link'); + const indexPatternTitle = await testSubjects.getVisibleText( + 'discover-dataView-switch-link' + ); expect(indexPatternTitle).to.be(indexPattern); }); }, diff --git a/x-pack/test/functional/services/transform/discover.ts b/x-pack/test/functional/services/transform/discover.ts index a98f7e5ae98905..d96ab079043a0a 100644 --- a/x-pack/test/functional/services/transform/discover.ts +++ b/x-pack/test/functional/services/transform/discover.ts @@ -28,7 +28,7 @@ export function TransformDiscoverProvider({ getService }: FtrProviderContext) { async assertNoResults(expectedDestinationIndex: string) { // Discover should use the destination index pattern const actualIndexPatternSwitchLinkText = await ( - await testSubjects.find('indexPattern-switch-link') + await testSubjects.find('discover-dataView-switch-link') ).getVisibleText(); expect(actualIndexPatternSwitchLinkText).to.eql( expectedDestinationIndex, diff --git a/x-pack/test/functional/services/transform/wizard.ts b/x-pack/test/functional/services/transform/wizard.ts index 714ae52a6641b9..b0ce0c87939573 100644 --- a/x-pack/test/functional/services/transform/wizard.ts +++ b/x-pack/test/functional/services/transform/wizard.ts @@ -25,7 +25,7 @@ export function TransformWizardProvider({ getService, getPageObjects }: FtrProvi const comboBox = getService('comboBox'); const retry = getService('retry'); const ml = getService('ml'); - const PageObjects = getPageObjects(['discover', 'timePicker']); + const PageObjects = getPageObjects(['discover', 'timePicker', 'unifiedSearch']); return { async clickNextButton() { @@ -890,6 +890,7 @@ export function TransformWizardProvider({ getService, getPageObjects }: FtrProvi await testSubjects.click('transformWizardCardDiscover'); await PageObjects.discover.isDiscoverAppOnScreen(); }); + await PageObjects.unifiedSearch.closeTourPopoverByLocalStorage(); }, async setDiscoverTimeRange(fromTime: string, toTime: string) {