[Discover] Update unified histogram to use Lens

src/core/server/integration_tests/saved_objects/migrations/check_registered_types.test.ts

@@ -124,7 +124,7 @@ describe('checking migration metadata changes on all registered SO types', () =>
         "osquery-saved-query": "7b213b4b7a3e59350e99c50e8df9948662ed493a",
         "query": "4640ef356321500a678869f24117b7091a911cb6",
         "sample-data-telemetry": "8b10336d9efae6f3d5593c4cc89fb4abcdf84e04",
-        "search": "d26771bcf7cd271162aab3a610b75249631ef6b1",
+        "search": "c48f5ab5d94545780ea98de1bff9e39f17f3606b",
         "search-session": "ba383309da68a15be3765977f7a44c84f0ec7964",
         "search-telemetry": "beb3fc25488c753f2a6dcff1845d667558712b66",
         "security-rule": "e0dfdba5d66139d0300723b2e6672993cd4a11f3",

src/plugins/dashboard/tsconfig.json

@@ -26,7 +26,6 @@
     { "path": "../screenshot_mode/tsconfig.json" },
     { "path": "../ui_actions/tsconfig.json" },
     { "path": "../charts/tsconfig.json" },
-    { "path": "../discover/tsconfig.json" },
     { "path": "../visualizations/tsconfig.json" },
     { "path": "../../../x-pack/plugins/spaces/tsconfig.json" }
   ]

src/plugins/discover/kibana.json

@@ -29,7 +29,8 @@
     "usageCollection",
     "spaces",
     "triggersActionsUi",
-    "savedObjectsTaggingOss"
+    "savedObjectsTaggingOss",
+    "lens"
   ],
   "requiredBundles": ["kibanaUtils", "kibanaReact", "unifiedSearch", "savedSearch"],
   "extraPublicDirs": ["common"],

src/plugins/discover/public/__mocks__/data_view_with_timefield.ts

@@ -18,6 +18,7 @@ const fields = [
   },
   {
     name: 'timestamp',
+    displayName: 'timestamp',
     type: 'date',
     scripted: false,
     filterable: true,
@@ -26,26 +27,30 @@ const fields = [
   },
   {
     name: 'message',
+    displayName: 'message',
     type: 'string',
     scripted: false,
     filterable: false,
   },
   {
     name: 'extension',
+    displayName: 'extension',
     type: 'string',
     scripted: false,
     filterable: true,
     aggregatable: true,
   },
   {
     name: 'bytes',
+    displayName: 'bytes',
     type: 'number',
     scripted: false,
     filterable: true,
     aggregatable: true,
   },
   {
     name: 'scripted',
+    displayName: 'scripted',
     type: 'number',
     scripted: true,
     filterable: false,

src/plugins/discover/public/__mocks__/search_session.ts

@@ -10,11 +10,12 @@ import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import { DiscoverSearchSessionManager } from '../application/main/services/discover_search_session';
 
-export function createSearchSessionMock() {
-  const history = createMemoryHistory();
-  const session = dataPluginMock.createStartContract().search.session as jest.Mocked<
+export function createSearchSessionMock(
+  session = dataPluginMock.createStartContract().search.session as jest.Mocked<
     DataPublicPluginStart['search']['session']
-  >;
+  >
+) {
+  const history = createMemoryHistory();
   const searchSessionManager = new DiscoverSearchSessionManager({
     history,
     session,

src/plugins/discover/public/__mocks__/services.ts

@@ -144,6 +144,7 @@ export function createDiscoverServicesMock(): DiscoverServices {
     savedObjectsTagging: {},
     dataViews: dataPlugin.dataViews,
     timefilter: dataPlugin.query.timefilter.timefilter,
+    lens: { EmbeddableComponent: jest.fn(() => null) },
     locator: {
       useUrl: jest.fn(() => ''),
       navigate: jest.fn(),

src/plugins/discover/public/application/main/components/layout/__stories__/get_layout_props.ts

@@ -11,11 +11,9 @@ import { SearchSource } from '@kbn/data-plugin/common';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { RequestAdapter } from '@kbn/inspector-plugin/common';
 import { action } from '@storybook/addon-actions';
-import type { SearchResponse } from '@elastic/elasticsearch/lib/api/types';
 import { FetchStatus } from '../../../../types';
 import {
   AvailableFields$,
-  DataCharts$,
   DataDocuments$,
   DataMain$,
   DataTotalHits$,
@@ -47,11 +45,6 @@ const documentObservables = {
     fetchStatus: FetchStatus.COMPLETE,
     result: Number(esHits.length),
   }) as DataTotalHits$,
-
-  charts$: new BehaviorSubject({
-    fetchStatus: FetchStatus.COMPLETE,
-    response: {} as unknown as SearchResponse,
-  }) as DataCharts$,
 };
 
 const plainRecordObservables = {
@@ -77,11 +70,6 @@ const plainRecordObservables = {
     fetchStatus: FetchStatus.COMPLETE,
     recordRawType: RecordRawType.PLAIN,
   }) as DataTotalHits$,
-
-  charts$: new BehaviorSubject({
-    fetchStatus: FetchStatus.COMPLETE,
-    recordRawType: RecordRawType.PLAIN,
-  }) as DataCharts$,
 };
 
 const getCommonProps = (dataView: DataView) => {

src/plugins/discover/public/application/main/components/layout/discover_histogram_layout.test.tsx

@@ -0,0 +1,220 @@
+/*
+ * 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 { Subject, BehaviorSubject, of } from 'rxjs';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+import { esHits } from '../../../../__mocks__/es_hits';
+import { dataViewMock } from '../../../../__mocks__/data_view';
+import { savedSearchMock } from '../../../../__mocks__/saved_search';
+import { GetStateReturn } from '../../services/discover_state';
+import {
+  AvailableFields$,
+  DataDocuments$,
+  DataMain$,
+  DataTotalHits$,
+  RecordRawType,
+} from '../../hooks/use_saved_search';
+import { discoverServiceMock } from '../../../../__mocks__/services';
+import { FetchStatus } from '../../../types';
+import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { buildDataTableRecord } from '../../../../utils/build_data_record';
+import { DiscoverHistogramLayout, DiscoverHistogramLayoutProps } from './discover_histogram_layout';
+import { SavedSearch, VIEW_MODE } from '@kbn/saved-search-plugin/public';
+import { CoreTheme } from '@kbn/core/public';
+import { act } from 'react-dom/test-utils';
+import { setTimeout } from 'timers/promises';
+import { Storage } from '@kbn/kibana-utils-plugin/public';
+import { LocalStorageMock } from '../../../../__mocks__/local_storage_mock';
+import { HISTOGRAM_HEIGHT_KEY } from './use_discover_histogram';
+import { createSearchSessionMock } from '../../../../__mocks__/search_session';
+import { RequestAdapter } from '@kbn/inspector-plugin/public';
+import { searchSourceInstanceMock } from '@kbn/data-plugin/common/search/search_source/mocks';
+import { UnifiedHistogramLayout } from '@kbn/unified-histogram-plugin/public';
+import { getSessionServiceMock } from '@kbn/data-plugin/public/search/session/mocks';
+import { ResetSearchButton } from './reset_search_button';
+
+const mountComponent = async ({
+  isPlainRecord = false,
+  hideChart = false,
+  isTimeBased = true,
+  storage,
+  savedSearch = savedSearchMock,
+  resetSavedSearch = jest.fn(),
+}: {
+  isPlainRecord?: boolean;
+  hideChart?: boolean;
+  isTimeBased?: boolean;
+  storage?: Storage;
+  savedSearch?: SavedSearch;
+  resetSavedSearch?(): void;
+} = {}) => {
+  let services = discoverServiceMock;
+  services.data.query.timefilter.timefilter.getAbsoluteTime = () => {
+    return { from: '2020-05-14T11:05:13.590', to: '2020-05-14T11:20:13.590' };
+  };
+
+  (services.data.query.queryString.getDefaultQuery as jest.Mock).mockReturnValue({
+    language: 'kuery',
+    query: '',
+  });
+  (searchSourceInstanceMock.fetch$ as jest.Mock).mockImplementation(
+    jest.fn().mockReturnValue(of({ rawResponse: { hits: { total: 2 } } }))
+  );
+
+  if (storage) {
+    services = { ...services, storage };
+  }
+
+  const main$ = new BehaviorSubject({
+    fetchStatus: FetchStatus.COMPLETE,
+    recordRawType: isPlainRecord ? RecordRawType.PLAIN : RecordRawType.DOCUMENT,
+    foundDocuments: true,
+  }) as DataMain$;
+
+  const documents$ = new BehaviorSubject({
+    fetchStatus: FetchStatus.COMPLETE,
+    result: esHits.map((esHit) => buildDataTableRecord(esHit, dataViewMock)),
+  }) as DataDocuments$;
+
+  const availableFields$ = new BehaviorSubject({
+    fetchStatus: FetchStatus.COMPLETE,
+    fields: [] as string[],
+  }) as AvailableFields$;
+
+  const totalHits$ = new BehaviorSubject({
+    fetchStatus: FetchStatus.COMPLETE,
+    result: Number(esHits.length),
+  }) as DataTotalHits$;
+
+  const savedSearchData$ = {
+    main$,
+    documents$,
+    totalHits$,
+    availableFields$,
+  };
+
+  const session = getSessionServiceMock();
+
+  session.getSession$.mockReturnValue(new BehaviorSubject('123'));
+
+  const props: DiscoverHistogramLayoutProps = {
+    isPlainRecord,
+    dataView: dataViewMock,
+    navigateTo: jest.fn(),
+    setExpandedDoc: jest.fn(),
+    savedSearch,
+    savedSearchData$,
+    savedSearchRefetch$: new Subject(),
+    state: { columns: [], hideChart },
+    stateContainer: {
+      setAppState: () => {},
+      appStateContainer: {
+        getState: () => ({
+          interval: 'auto',
+        }),
+      },
+    } as unknown as GetStateReturn,
+    onFieldEdited: jest.fn(),
+    columns: [],
+    viewMode: VIEW_MODE.DOCUMENT_LEVEL,
+    onAddFilter: jest.fn(),
+    resetSavedSearch,
+    isTimeBased,
+    resizeRef: { current: null },
+    searchSessionManager: createSearchSessionMock(session).searchSessionManager,
+    inspectorAdapters: { requests: new RequestAdapter() },
+  };
+
+  const coreTheme$ = new BehaviorSubject<CoreTheme>({ darkMode: false });
+
+  const component = mountWithIntl(
+    <KibanaContextProvider services={services}>
+      <KibanaThemeProvider theme$={coreTheme$}>
+        <DiscoverHistogramLayout {...props} />
+      </KibanaThemeProvider>
+    </KibanaContextProvider>
+  );
+
+  // DiscoverMainContent uses UnifiedHistogramLayout which
+  // is lazy loaded, so we need to wait for it to be loaded
+  await act(() => setTimeout(0));
+  component.update();
+
+  return component;
+};
+
+describe('Discover histogram layout component', () => {
+  describe('topPanelHeight persistence', () => {
+    it('should try to get the initial topPanelHeight for UnifiedHistogramLayout from storage', async () => {
+      const storage = new LocalStorageMock({}) as unknown as Storage;
+      const originalGet = storage.get;
+      storage.get = jest.fn().mockImplementation(originalGet);
+      await mountComponent({ storage });
+      expect(storage.get).toHaveBeenCalledWith(HISTOGRAM_HEIGHT_KEY);
+    });
+
+    it('should pass undefined to UnifiedHistogramLayout if no value is found in storage', async () => {
+      const storage = new LocalStorageMock({}) as unknown as Storage;
+      const originalGet = storage.get;
+      storage.get = jest.fn().mockImplementation(originalGet);
+      const component = await mountComponent({ storage });
+      expect(storage.get).toHaveBeenCalledWith(HISTOGRAM_HEIGHT_KEY);
+      expect(storage.get).toHaveReturnedWith(null);
+      expect(component.find(UnifiedHistogramLayout).prop('topPanelHeight')).toBe(undefined);
+    });
+
+    it('should pass the stored topPanelHeight to UnifiedHistogramLayout if a value is found in storage', async () => {
+      const storage = new LocalStorageMock({}) as unknown as Storage;
+      const topPanelHeight = 123;
+      storage.get = jest.fn().mockImplementation(() => topPanelHeight);
+      const component = await mountComponent({ storage });
+      expect(storage.get).toHaveBeenCalledWith(HISTOGRAM_HEIGHT_KEY);
+      expect(storage.get).toHaveReturnedWith(topPanelHeight);
+      expect(component.find(UnifiedHistogramLayout).prop('topPanelHeight')).toBe(topPanelHeight);
+    });
+
+    it('should update the topPanelHeight in storage and pass the new value to UnifiedHistogramLayout when the topPanelHeight changes', async () => {
+      const storage = new LocalStorageMock({}) as unknown as Storage;
+      const originalSet = storage.set;
+      storage.set = jest.fn().mockImplementation(originalSet);
+      const component = await mountComponent({ storage });
+      const newTopPanelHeight = 123;
+      expect(component.find(UnifiedHistogramLayout).prop('topPanelHeight')).not.toBe(
+        newTopPanelHeight
+      );
+      act(() => {
+        component.find(UnifiedHistogramLayout).prop('onTopPanelHeightChange')!(newTopPanelHeight);
+      });
+      component.update();
+      expect(storage.set).toHaveBeenCalledWith(HISTOGRAM_HEIGHT_KEY, newTopPanelHeight);
+      expect(component.find(UnifiedHistogramLayout).prop('topPanelHeight')).toBe(newTopPanelHeight);
+    });
+  });
+
+  describe('reset search button', () => {
+    it('renders the button when there is a saved search', async () => {
+      const component = await mountComponent();
+      expect(component.find(ResetSearchButton).exists()).toBe(true);
+    });
+
+    it('does not render the button when there is no saved search', async () => {
+      const component = await mountComponent({
+        savedSearch: { ...savedSearchMock, id: undefined },
+      });
+      expect(component.find(ResetSearchButton).exists()).toBe(false);
+    });
+
+    it('should call resetSavedSearch when clicked', async () => {
+      const resetSavedSearch = jest.fn();
+      const component = await mountComponent({ resetSavedSearch });
+      component.find(ResetSearchButton).find('button').simulate('click');
+      expect(resetSavedSearch).toHaveBeenCalled();
+    });
+  });
+});