[Discover] Create data view from sidebar

src/plugins/discover/kibana.json

@@ -13,7 +13,8 @@
     "navigation",
     "uiActions",
     "savedObjects",
-    "dataViewFieldEditor"
+    "dataViewFieldEditor",
+    "dataViewEditor"
   ],
   "optionalPlugins": ["home", "share", "usageCollection", "spaces"],
   "requiredBundles": ["kibanaUtils", "home", "kibanaReact", "dataViews"],

src/plugins/discover/public/application/main/components/layout/discover_layout.tsx

@@ -47,7 +47,7 @@ import {
 import { FieldStatisticsTable } from '../field_stats_table';
 import { VIEW_MODE } from '../../../../components/view_mode_toggle';
 import { DOCUMENTS_VIEW_CLICK, FIELD_STATISTICS_VIEW_CLICK } from '../field_stats_table/constants';
-import { DataViewType } from '../../../../../../data_views/common';
+import { DataViewType, DataView } from '../../../../../../data_views/common';
 
 /**
  * Local storage key for sidebar persistence state
@@ -203,6 +203,11 @@ export function DiscoverLayout({
   }, [isSidebarClosed, storage]);
 
   const contentCentered = resultState === 'uninitialized' || resultState === 'none';
+  const onDataViewCreated = (dataView: DataView) => {
+    if (dataView.id) {
+      onChangeIndexPattern(dataView.id);
+    }
+  };
 
   return (
     <EuiPage className="dscPage" data-fetch-counter={fetchCounter.current}>
@@ -246,6 +251,7 @@ export function DiscoverLayout({
               useNewFieldsApi={useNewFieldsApi}
               onEditRuntimeField={onEditRuntimeField}
               viewMode={viewMode}
+              onDataViewCreated={onDataViewCreated}
             />
           </EuiFlexItem>
           <EuiHideFor sizes={['xs', 's']}>

src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern_management.test.tsx

@@ -53,6 +53,7 @@ describe('Discover DataView Management', () => {
   const indexPattern = stubLogstashIndexPattern;
 
   const editField = jest.fn();
+  const createNewDataView = jest.fn();
 
   const mountComponent = () => {
     return mountWithIntl(
@@ -61,6 +62,7 @@ describe('Discover DataView Management', () => {
         editField={editField}
         selectedIndexPattern={indexPattern}
         useNewFieldsApi={true}
+        createNewDataView={createNewDataView}
       />
     );
   };
@@ -79,7 +81,7 @@ describe('Discover DataView Management', () => {
     button.simulate('click');
 
     expect(component.find(EuiContextMenuPanel).length).toBe(1);
-    expect(component.find(EuiContextMenuItem).length).toBe(2);
+    expect(component.find(EuiContextMenuItem).length).toBe(3);
   });
 
   test('click on an add button executes editField callback', () => {
@@ -101,4 +103,14 @@ describe('Discover DataView Management', () => {
     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();
+  });
 });

src/plugins/discover/public/application/main/components/sidebar/discover_index_pattern_management.tsx

@@ -30,11 +30,16 @@ export interface DiscoverIndexPatternManagementProps {
    * @param fieldName
    */
   editField: (fieldName?: string) => void;
+
+  /**
+   * Callback to execute on create new data action
+   */
+  createNewDataView: () => void;
 }
 
 export function DiscoverIndexPatternManagement(props: DiscoverIndexPatternManagementProps) {
   const { dataViewFieldEditor, core } = props.services;
-  const { useNewFieldsApi, selectedIndexPattern, editField } = props;
+  const { useNewFieldsApi, selectedIndexPattern, editField, createNewDataView } = props;
   const dataViewEditPermission = dataViewFieldEditor?.userPermissions.editIndexPattern();
   const canEditDataViewField = !!dataViewEditPermission && useNewFieldsApi;
   const [isAddIndexPatternFieldPopoverOpen, setIsAddIndexPatternFieldPopoverOpen] = useState(false);
@@ -101,6 +106,19 @@ export function DiscoverIndexPatternManagement(props: DiscoverIndexPatternManage
               defaultMessage: 'Manage data view fields',
             })}
           </EuiContextMenuItem>,
+          <EuiContextMenuItem
+            key="new"
+            icon="indexSettings"
+            data-test-subj="dataview-create-new"
+            onClick={() => {
+              setIsAddIndexPatternFieldPopoverOpen(false);
+              createNewDataView();
+            }}
+          >
+            {i18n.translate('discover.fieldChooser.dataViews.createNewDataView', {
+              defaultMessage: 'Create new data view',
+            })}
+          </EuiContextMenuItem>,
         ]}
       />
     </EuiPopover>

src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.test.tsx

@@ -67,6 +67,8 @@ function getCompProps(): DiscoverSidebarProps {
     onEditRuntimeField: jest.fn(),
     editField: jest.fn(),
     viewMode: VIEW_MODE.DOCUMENT_LEVEL,
+    createNewDataView: jest.fn(),
+    onDataViewCreated: jest.fn(),
   };
 }
 

src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.tsx

@@ -68,6 +68,8 @@ export interface DiscoverSidebarProps extends Omit<DiscoverSidebarResponsiveProp
 
   editField: (fieldName?: string) => void;
 
+  createNewDataView: () => void;
+
   /**
    * a statistics of the distribution of fields in the given hits
    */
@@ -104,6 +106,7 @@ export function DiscoverSidebarComponent({
   closeFlyout,
   editField,
   viewMode,
+  createNewDataView,
 }: DiscoverSidebarProps) {
   const [fields, setFields] = useState<DataViewField[] | null>(null);
 
@@ -303,6 +306,7 @@ export function DiscoverSidebarComponent({
               selectedIndexPattern={selectedIndexPattern}
               editField={editField}
               useNewFieldsApi={useNewFieldsApi}
+              createNewDataView={createNewDataView}
             />
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -341,6 +345,7 @@ export function DiscoverSidebarComponent({
                 selectedIndexPattern={selectedIndexPattern}
                 useNewFieldsApi={useNewFieldsApi}
                 editField={editField}
+                createNewDataView={createNewDataView}
               />
             </EuiFlexItem>
           </EuiFlexGroup>

src/plugins/discover/public/application/main/components/sidebar/discover_sidebar_responsive.test.tsx

@@ -105,6 +105,7 @@ function getCompProps(): DiscoverSidebarResponsiveProps {
     trackUiMetric: jest.fn(),
     onEditRuntimeField: jest.fn(),
     viewMode: VIEW_MODE.DOCUMENT_LEVEL,
+    onDataViewCreated: jest.fn(),
   };
 }
 

src/plugins/discover/public/application/main/components/sidebar/discover_sidebar_responsive.tsx

@@ -106,6 +106,10 @@ export interface DiscoverSidebarResponsiveProps {
    * callback to execute on edit runtime field
    */
   onEditRuntimeField: () => void;
+  /**
+   * callback to execute on create dataview
+   */
+  onDataViewCreated: (dataView: DataView) => void;
   /**
    * Discover view mode
    */
@@ -118,7 +122,13 @@ export interface DiscoverSidebarResponsiveProps {
  * Mobile: Index pattern selector is visible and a button to trigger a flyout with all elements
  */
 export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps) {
-  const { selectedIndexPattern, onEditRuntimeField, useNewFieldsApi, onChangeIndexPattern } = props;
+  const {
+    selectedIndexPattern,
+    onEditRuntimeField,
+    useNewFieldsApi,
+    onChangeIndexPattern,
+    onDataViewCreated,
+  } = props;
   const [fieldFilter, setFieldFilter] = useState(getDefaultFieldFilter());
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   /**
@@ -149,6 +159,7 @@ export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps)
   }, [selectedIndexPattern]);
 
   const closeFieldEditor = useRef<() => void | undefined>();
+  const closeDataViewEditor = useRef<() => void | undefined>();
 
   useEffect(() => {
     const cleanup = () => {
@@ -166,11 +177,15 @@ export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps)
     closeFieldEditor.current = ref;
   }, []);
 
+  const setDataViewEditorRef = useCallback((ref: () => void | undefined) => {
+    closeDataViewEditor.current = ref;
+  }, []);
+
   const closeFlyout = useCallback(() => {
     setIsFlyoutVisible(false);
   }, []);
 
-  const { dataViewFieldEditor } = props.services;
+  const { dataViewFieldEditor, dataViewEditor } = props.services;
 
   const editField = useCallback(
     (fieldName?: string) => {
@@ -206,6 +221,24 @@ export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps)
     ]
   );
 
+  const createNewDataView = useCallback(() => {
+    const indexPatternFieldEditPermission = dataViewEditor.userPermissions.editDataView;
+    if (!indexPatternFieldEditPermission) {
+      return;
+    }
+    const ref = dataViewEditor.openEditor({
+      onSave: async (dataView) => {
+        onDataViewCreated(dataView);
+      },
+    });
+    if (setDataViewEditorRef) {
+      setDataViewEditorRef(ref);
+    }
+    if (closeFlyout) {
+      closeFlyout();
+    }
+  }, [dataViewEditor, setDataViewEditorRef, closeFlyout, onDataViewCreated]);
+
   if (!selectedIndexPattern) {
     return null;
   }
@@ -221,6 +254,7 @@ export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps)
             fieldCounts={fieldCounts.current}
             setFieldFilter={setFieldFilter}
             editField={editField}
+            createNewDataView={createNewDataView}
           />
         </EuiHideFor>
       )}
@@ -248,6 +282,7 @@ export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps)
                   selectedIndexPattern={selectedIndexPattern}
                   editField={editField}
                   useNewFieldsApi={useNewFieldsApi}
+                  createNewDataView={createNewDataView}
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
@@ -311,6 +346,7 @@ export function DiscoverSidebarResponsive(props: DiscoverSidebarResponsiveProps)
                   setFieldEditorRef={setFieldEditorRef}
                   closeFlyout={closeFlyout}
                   editField={editField}
+                  createNewDataView={createNewDataView}
                 />
               </div>
             </EuiFlyout>

src/plugins/discover/public/build_services.ts

@@ -39,6 +39,7 @@ import { FieldFormatsStart } from '../../field_formats/public';
 import { EmbeddableStart } from '../../embeddable/public';
 
 import type { SpacesApi } from '../../../../x-pack/plugins/spaces/public';
+import { DataViewEditorStart } from '../../../plugins/data_view_editor/public';
 
 export interface HistoryLocationState {
   referrer: string;
@@ -67,6 +68,7 @@ export interface DiscoverServices {
   uiSettings: IUiSettingsClient;
   trackUiMetric?: (metricType: UiCounterMetricType, eventName: string | string[]) => void;
   dataViewFieldEditor: IndexPatternFieldEditorStart;
+  dataViewEditor: DataViewEditorStart;
   http: HttpStart;
   storage: Storage;
   spaces?: SpacesApi;
@@ -108,5 +110,6 @@ export function buildServices(
     dataViewFieldEditor: plugins.dataViewFieldEditor,
     http: core.http,
     spaces: plugins.spaces,
+    dataViewEditor: plugins.dataViewEditor,
   };
 }

src/plugins/discover/public/plugin.tsx

@@ -64,6 +64,7 @@ import type { SpacesPluginStart } from '../../../../x-pack/plugins/spaces/public
 import { FieldFormatsStart } from '../../field_formats/public';
 import { injectTruncateStyles } from './utils/truncate_styles';
 import { DOC_TABLE_LEGACY, TRUNCATE_MAX_HEIGHT } from '../common';
+import { DataViewEditorStart } from '../../../plugins/data_view_editor/public';
 
 declare module '../../share/public' {
   export interface UrlGeneratorStateMapping {
@@ -177,6 +178,7 @@ export interface DiscoverSetupPlugins {
  * @internal
  */
 export interface DiscoverStartPlugins {
+  dataViewEditor: DataViewEditorStart;
   uiActions: UiActionsStart;
   embeddable: EmbeddableStart;
   navigation: NavigationStart;

src/plugins/discover/tsconfig.json

@@ -25,6 +25,7 @@
     { "path": "../data_view_field_editor/tsconfig.json"},
     { "path": "../field_formats/tsconfig.json" },
     { "path": "../data_views/tsconfig.json" },
-    { "path": "../../../x-pack/plugins/spaces/tsconfig.json" }
+    { "path": "../../../x-pack/plugins/spaces/tsconfig.json" },
+    { "path": "../data_view_editor/tsconfig.json" }
   ]
 }

test/functional/apps/discover/_data_view_editor.ts

@@ -0,0 +1,65 @@
+/*
+ * 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 { FtrProviderContext } from './ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const retry = getService('retry');
+  const testSubjects = getService('testSubjects');
+  const kibanaServer = getService('kibanaServer');
+  const esArchiver = getService('esArchiver');
+  const security = getService('security');
+  const PageObjects = getPageObjects(['common', 'discover', 'header', 'timePicker']);
+  const defaultSettings = {
+    defaultIndex: 'logstash-*',
+  };
+
+  const createDataView = async (dataViewName: string) => {
+    await PageObjects.discover.clickIndexPatternActions();
+    await PageObjects.discover.clickCreateNewDataView();
+    await testSubjects.setValue('createIndexPatternNameInput', dataViewName, {
+      clearWithKeyboard: true,
+      typeCharByChar: true,
+    });
+    await testSubjects.click('saveIndexPatternButton');
+  };
+
+  describe('discover integration with data view editor', function describeIndexTests() {
+    before(async function () {
+      await security.testUser.setRoles(['kibana_admin', 'test_logstash_reader']);
+      await esArchiver.loadIfNeeded('test/functional/fixtures/es_archiver/logstash_functional');
+      await kibanaServer.savedObjects.clean({ types: ['saved-search', 'index-pattern'] });
+      await kibanaServer.importExport.load('test/functional/fixtures/kbn_archiver/discover');
+      await kibanaServer.uiSettings.replace(defaultSettings);
+      await PageObjects.timePicker.setDefaultAbsoluteRangeViaUiSettings();
+      await PageObjects.common.navigateToApp('discover');
+    });
+
+    after(async () => {
+      await security.testUser.restoreDefaults();
+      await kibanaServer.importExport.unload('test/functional/fixtures/kbn_archiver/discover');
+      await kibanaServer.savedObjects.clean({ types: ['saved-search', 'index-pattern'] });
+    });
+
+    it('allows creating a new data view', async function () {
+      const dataViewToCreate = 'logstash';
+      await createDataView(dataViewToCreate);
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      await retry.waitForWithTimeout(
+        'data view selector to include a newly created dataview',
+        5000,
+        async () => {
+          const dataViewTitle = await PageObjects.discover.getCurrentlySelectedDataView();
+          // data view editor will add wildcard symbol by default
+          // so we need to include it in our original title when comparing
+          return dataViewTitle === `${dataViewToCreate}*`;
+        }
+      );
+    });
+  });
+}

test/functional/apps/discover/index.ts

@@ -54,5 +54,6 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./_search_on_page_load'));
     loadTestFile(require.resolve('./_chart_hidden'));
     loadTestFile(require.resolve('./_context_encoded_url_param'));
+    loadTestFile(require.resolve('./_data_view_editor'));
   });
 }