[Unified search] Moves dataview picker to the search bar (#126560)

* [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 <caroline.horn@elastic.co>
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

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';
 
 /**

src/plugins/data/public/types.ts

@@ -124,6 +124,7 @@ export interface IDataPluginServices extends Partial<CoreStart> {
   uiSettings: CoreStart['uiSettings'];
   savedObjects: CoreStart['savedObjects'];
   notifications: CoreStart['notifications'];
+  application: CoreStart['application'];
   http: CoreStart['http'];
   storage: IStorageWrapper;
   data: DataPublicPluginStart;

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,
+    },
+  };
+};

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 (
+      <I18nProvider>
+        <KibanaContextProvider services={services}>
+          <ChangeDataView {...testProps} />
+        </KibanaContextProvider>
+      </I18nProvider>
+    );
+  }
+  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();
+  });
+});