[Discover][UnifiedFieldList] Integrate unified field list sections into Discover

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

@@ -11,22 +11,27 @@ import { dataViewMock } from './data_view';
 import { dataViewComplexMock } from './data_view_complex';
 import { dataViewWithTimefieldMock } from './data_view_with_timefield';
 
-export const dataViewsMock = {
-  getCache: async () => {
-    return [dataViewMock];
-  },
-  get: async (id: string) => {
-    if (id === 'the-data-view-id') {
-      return Promise.resolve(dataViewMock);
-    } else if (id === 'invalid-data-view-id') {
-      return Promise.reject('Invald');
-    }
-  },
-  updateSavedObject: jest.fn(),
-  getIdsWithTitle: jest.fn(() => {
-    return Promise.resolve([dataViewMock, dataViewComplexMock, dataViewWithTimefieldMock]);
-  }),
-  createFilter: jest.fn(),
-  create: jest.fn(),
-  clearInstanceCache: jest.fn(),
-} as unknown as jest.Mocked<DataViewsContract>;
+export function createDiscoverDataViewsMock() {
+  return {
+    getCache: async () => {
+      return [dataViewMock];
+    },
+    get: async (id: string) => {
+      if (id === 'the-data-view-id') {
+        return Promise.resolve(dataViewMock);
+      } else if (id === 'invalid-data-view-id') {
+        return Promise.reject('Invald');
+      }
+    },
+    updateSavedObject: jest.fn(),
+    getIdsWithTitle: jest.fn(() => {
+      return Promise.resolve([dataViewMock, dataViewComplexMock, dataViewWithTimefieldMock]);
+    }),
+    createFilter: jest.fn(),
+    create: jest.fn(),
+    clearInstanceCache: jest.fn(),
+    getFieldsForIndexPattern: jest.fn((dataView) => dataView.fields),
+  } as unknown as jest.Mocked<DataViewsContract>;
+}
+
+export const dataViewsMock = createDiscoverDataViewsMock();

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

@@ -5,6 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+import { Observable, of } from 'rxjs';
 import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
 import { DiscoverServices } from '../build_services';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
@@ -23,107 +24,122 @@ import {
 import { UI_SETTINGS } from '@kbn/data-plugin/public';
 import { TopNavMenu } from '@kbn/navigation-plugin/public';
 import { FORMATS_UI_SETTINGS } from '@kbn/field-formats-plugin/common';
-import { LocalStorageMock } from './local_storage_mock';
+import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
 import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks';
-import { dataViewsMock } from './data_views';
-import { Observable, of } from 'rxjs';
-const dataPlugin = dataPluginMock.createStartContract();
-const expressionsPlugin = expressionsPluginMock.createStartContract();
+import { LocalStorageMock } from './local_storage_mock';
+import { createDiscoverDataViewsMock } from './data_views';
+
+export function createDiscoverServicesMock(): DiscoverServices {
+  const dataPlugin = dataPluginMock.createStartContract();
+  const expressionsPlugin = expressionsPluginMock.createStartContract();
 
-dataPlugin.query.filterManager.getFilters = jest.fn(() => []);
-dataPlugin.query.filterManager.getUpdates$ = jest.fn(() => of({}) as unknown as Observable<void>);
+  dataPlugin.query.filterManager.getFilters = jest.fn(() => []);
+  dataPlugin.query.filterManager.getUpdates$ = jest.fn(() => of({}) as unknown as Observable<void>);
+  dataPlugin.query.timefilter.timefilter.createFilter = jest.fn();
+  dataPlugin.query.timefilter.timefilter.getAbsoluteTime = jest.fn(() => ({
+    from: '2021-08-31T22:00:00.000Z',
+    to: '2022-09-01T09:16:29.553Z',
+  }));
+  dataPlugin.query.timefilter.timefilter.getTime = jest.fn(() => {
+    return { from: 'now-15m', to: 'now' };
+  });
+  dataPlugin.dataViews = createDiscoverDataViewsMock();
 
-export const discoverServiceMock = {
-  core: coreMock.createStart(),
-  chrome: chromeServiceMock.createStartContract(),
-  history: () => ({
-    location: {
-      search: '',
+  return {
+    core: coreMock.createStart(),
+    charts: chartPluginMock.createSetupContract(),
+    chrome: chromeServiceMock.createStartContract(),
+    history: () => ({
+      location: {
+        search: '',
+      },
+      listen: jest.fn(),
+    }),
+    data: dataPlugin,
+    docLinks: docLinksServiceMock.createStartContract(),
+    capabilities: {
+      visualize: {
+        show: true,
+      },
+      discover: {
+        save: false,
+      },
+      advancedSettings: {
+        save: true,
+      },
     },
-    listen: jest.fn(),
-  }),
-  data: dataPlugin,
-  docLinks: docLinksServiceMock.createStartContract(),
-  capabilities: {
-    visualize: {
-      show: true,
+    fieldFormats: fieldFormatsMock,
+    filterManager: dataPlugin.query.filterManager,
+    inspector: {
+      open: jest.fn(),
     },
-    discover: {
-      save: false,
+    uiSettings: {
+      get: jest.fn((key: string) => {
+        if (key === 'fields:popularLimit') {
+          return 5;
+        } else if (key === DEFAULT_COLUMNS_SETTING) {
+          return ['default_column'];
+        } else if (key === UI_SETTINGS.META_FIELDS) {
+          return [];
+        } else if (key === DOC_HIDE_TIME_COLUMN_SETTING) {
+          return false;
+        } else if (key === CONTEXT_STEP_SETTING) {
+          return 5;
+        } else if (key === SORT_DEFAULT_ORDER_SETTING) {
+          return 'desc';
+        } else if (key === FORMATS_UI_SETTINGS.SHORT_DOTS_ENABLE) {
+          return false;
+        } else if (key === SAMPLE_SIZE_SETTING) {
+          return 250;
+        } else if (key === SAMPLE_ROWS_PER_PAGE_SETTING) {
+          return 150;
+        } else if (key === MAX_DOC_FIELDS_DISPLAYED) {
+          return 50;
+        } else if (key === HIDE_ANNOUNCEMENTS) {
+          return false;
+        }
+      }),
+      isDefault: (key: string) => {
+        return true;
+      },
     },
-    advancedSettings: {
-      save: true,
+    http: {
+      basePath: '/',
     },
-  },
-  fieldFormats: fieldFormatsMock,
-  filterManager: dataPlugin.query.filterManager,
-  inspector: {
-    open: jest.fn(),
-  },
-  uiSettings: {
-    get: jest.fn((key: string) => {
-      if (key === 'fields:popularLimit') {
-        return 5;
-      } else if (key === DEFAULT_COLUMNS_SETTING) {
-        return ['default_column'];
-      } else if (key === UI_SETTINGS.META_FIELDS) {
-        return [];
-      } else if (key === DOC_HIDE_TIME_COLUMN_SETTING) {
-        return false;
-      } else if (key === CONTEXT_STEP_SETTING) {
-        return 5;
-      } else if (key === SORT_DEFAULT_ORDER_SETTING) {
-        return 'desc';
-      } else if (key === FORMATS_UI_SETTINGS.SHORT_DOTS_ENABLE) {
-        return false;
-      } else if (key === SAMPLE_SIZE_SETTING) {
-        return 250;
-      } else if (key === SAMPLE_ROWS_PER_PAGE_SETTING) {
-        return 150;
-      } else if (key === MAX_DOC_FIELDS_DISPLAYED) {
-        return 50;
-      } else if (key === HIDE_ANNOUNCEMENTS) {
-        return false;
-      }
-    }),
-    isDefault: (key: string) => {
-      return true;
+    dataViewEditor: {
+      userPermissions: {
+        editDataView: () => true,
+      },
+    },
+    dataViewFieldEditor: {
+      openEditor: jest.fn(),
+      userPermissions: {
+        editIndexPattern: jest.fn(),
+      },
+    },
+    navigation: {
+      ui: { TopNavMenu, AggregateQueryTopNavMenu: TopNavMenu },
     },
-  },
-  http: {
-    basePath: '/',
-  },
-  dataViewEditor: {
-    userPermissions: {
-      editDataView: () => true,
+    metadata: {
+      branch: 'test',
     },
-  },
-  dataViewFieldEditor: {
-    openEditor: jest.fn(),
-    userPermissions: {
-      editIndexPattern: jest.fn(),
+    theme: {
+      useChartsTheme: jest.fn(() => EUI_CHARTS_THEME_LIGHT.theme),
+      useChartsBaseTheme: jest.fn(() => EUI_CHARTS_THEME_LIGHT.theme),
     },
-  },
-  navigation: {
-    ui: { TopNavMenu, AggregateQueryTopNavMenu: TopNavMenu },
-  },
-  metadata: {
-    branch: 'test',
-  },
-  theme: {
-    useChartsTheme: jest.fn(() => EUI_CHARTS_THEME_LIGHT.theme),
-    useChartsBaseTheme: jest.fn(() => EUI_CHARTS_THEME_LIGHT.theme),
-  },
-  storage: new LocalStorageMock({}) as unknown as Storage,
-  addBasePath: jest.fn(),
-  toastNotifications: {
-    addInfo: jest.fn(),
-    addWarning: jest.fn(),
-    addDanger: jest.fn(),
-    addSuccess: jest.fn(),
-  },
-  expressions: expressionsPlugin,
-  savedObjectsTagging: {},
-  dataViews: dataViewsMock,
-  timefilter: { createFilter: jest.fn() },
-} as unknown as DiscoverServices;
+    storage: new LocalStorageMock({}) as unknown as Storage,
+    addBasePath: jest.fn(),
+    toastNotifications: {
+      addInfo: jest.fn(),
+      addWarning: jest.fn(),
+      addDanger: jest.fn(),
+      addSuccess: jest.fn(),
+    },
+    expressions: expressionsPlugin,
+    savedObjectsTagging: {},
+    dataViews: dataPlugin.dataViews,
+    timefilter: dataPlugin.query.timefilter.timefilter,
+  } as unknown as DiscoverServices;
+}
+
+export const discoverServiceMock = createDiscoverServicesMock();

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

@@ -31,6 +31,10 @@ discover-app {
   overflow: hidden;
 }
 
+.dscPageBody__sidebar {
+  position: relative;
+}
+
 .dscPageContent__wrapper {
   padding: $euiSizeS $euiSizeS $euiSizeS 0;
   overflow: hidden; // Ensures horizontal scroll of table

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

@@ -28,7 +28,7 @@ import {
   DataTotalHits$,
   RecordRawType,
 } from '../../hooks/use_saved_search';
-import { discoverServiceMock } from '../../../../__mocks__/services';
+import { createDiscoverServicesMock } from '../../../../__mocks__/services';
 import { FetchStatus } from '../../../types';
 import { RequestAdapter } from '@kbn/inspector-plugin/common';
 import { DiscoverSidebar } from '../sidebar/discover_sidebar';
@@ -118,14 +118,11 @@ async function mountComponent(
 ) {
   const searchSourceMock = createSearchSourceMock({});
   const services = {
-    ...discoverServiceMock,
+    ...createDiscoverServicesMock(),
     storage: new LocalStorageMock({
       [SIDEBAR_CLOSED_KEY]: prevSidebarClosed,
     }) as unknown as Storage,
   } as unknown as DiscoverServices;
-  services.data.query.timefilter.timefilter.getAbsoluteTime = () => {
-    return { from: '2020-05-14T11:05:13.590', to: '2020-05-14T11:20:13.590' };
-  };
 
   const dataViewList = [dataView];
 

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

@@ -241,7 +241,7 @@ export function DiscoverLayout({
           history={history}
         />
         <EuiFlexGroup className="dscPageBody__contents" gutterSize="s">
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false} className="dscPageBody__sidebar">
             <SidebarMemoized
               columns={columns}
               documents$={savedSearchData$.documents$}

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

@@ -21,7 +21,7 @@ import {
   DataTotalHits$,
   RecordRawType,
 } from '../../hooks/use_saved_search';
-import { discoverServiceMock } from '../../../../__mocks__/services';
+import { createDiscoverServicesMock } from '../../../../__mocks__/services';
 import { FetchStatus } from '../../../types';
 import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { buildDataTableRecord } from '../../../../utils/build_data_record';
@@ -110,10 +110,7 @@ const mountComponent = async ({
   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' };
-  };
+  let services = createDiscoverServicesMock();
 
   if (storage) {
     services = { ...services, storage };