[Discover] Merge discover.tsx and discover_legacy.tsx (#88465) (#89446)

src/plugins/discover/public/application/angular/discover.js

@@ -24,7 +24,6 @@ import {
 import { getSortArray } from './doc_table';
 import * as columnActions from './doc_table/actions/columns';
 import indexTemplateLegacy from './discover_legacy.html';
-import indexTemplateGrid from './discover_datagrid.html';
 import { addHelpMenuToAppChrome } from '../components/help_menu/help_menu_util';
 import { discoverResponseHandler } from './response_handler';
 import {
@@ -112,9 +111,7 @@ app.config(($routeProvider) => {
   };
   const discoverRoute = {
     ...defaults,
-    template: getServices().uiSettings.get('doc_table:legacy', true)
-      ? indexTemplateLegacy
-      : indexTemplateGrid,
+    template: indexTemplateLegacy,
     reloadOnSearch: false,
     resolve: {
       savedObjects: function ($route, Promise) {

src/plugins/discover/public/application/angular/discover_legacy.html

@@ -1,5 +1,5 @@
 <discover-app>
-  <discover-legacy
+  <discover
     fetch="fetch"
     fetch-counter="fetchCounter"
     fetch-error="fetchError"
@@ -31,5 +31,5 @@
     update-saved-query-id="updateSavedQueryId"
     use-new-fields-api="useNewFieldsApi"
   >
-  </discover-legacy>
+  </discover>
 </discover-app>

src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx

@@ -9,8 +9,11 @@
 import angular, { auto, ICompileService, IScope } from 'angular';
 import { render } from 'react-dom';
 import React, { useRef, useEffect } from 'react';
+import { EuiButtonEmpty } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { getServices, IIndexPattern } from '../../../kibana_services';
 import { IndexPatternField } from '../../../../../data/common/index_patterns';
+
 export type AngularScope = IScope;
 
 export interface AngularDirective {
@@ -83,9 +86,11 @@ export interface DocTableLegacyProps {
   indexPattern: IIndexPattern;
   minimumVisibleRows: number;
   onAddColumn?: (column: string) => void;
+  onBackToTop: () => void;
   onSort?: (sort: string[][]) => void;
   onMoveColumn?: (columns: string, newIdx: number) => void;
   onRemoveColumn?: (column: string) => void;
+  sampleSize: number;
   sort?: string[][];
   useNewFieldsApi?: boolean;
 }
@@ -120,5 +125,31 @@ export function DocTableLegacy(renderProps: DocTableLegacyProps) {
       return renderFn(ref.current, renderProps);
     }
   }, [renderFn, renderProps]);
-  return <div ref={ref} />;
+  return (
+    <div>
+      <div ref={ref} />
+      {renderProps.rows.length === renderProps.sampleSize ? (
+        <div
+          className="dscTable__footer"
+          data-test-subj="discoverDocTableFooter"
+          tabIndex={-1}
+          id="discoverBottomMarker"
+        >
+          <FormattedMessage
+            id="discover.howToSeeOtherMatchingDocumentsDescription"
+            defaultMessage="These are the first {sampleSize} documents matching
+                  your search, refine your search to see others."
+            values={{ sampleSize: renderProps.sampleSize }}
+          />
+          <EuiButtonEmpty onClick={renderProps.onBackToTop}>
+            <FormattedMessage id="discover.backToTopLinkText" defaultMessage="Back to top." />
+          </EuiButtonEmpty>
+        </div>
+      ) : (
+        <span tabIndex={-1} id="discoverBottomMarker">
+          &#8203;
+        </span>
+      )}
+    </div>
+  );
 }

src/plugins/discover/public/application/components/create_discover_directive.ts

@@ -17,18 +17,21 @@ export function createDiscoverDirective(reactDirective: any) {
     ['histogramData', { watchDepth: 'reference' }],
     ['hits', { watchDepth: 'reference' }],
     ['indexPattern', { watchDepth: 'reference' }],
+    ['minimumVisibleRows', { watchDepth: 'reference' }],
     ['onAddColumn', { watchDepth: 'reference' }],
     ['onAddFilter', { watchDepth: 'reference' }],
     ['onChangeInterval', { watchDepth: 'reference' }],
+    ['onMoveColumn', { watchDepth: 'reference' }],
     ['onRemoveColumn', { watchDepth: 'reference' }],
     ['onSetColumns', { watchDepth: 'reference' }],
+    ['onSkipBottomButtonClick', { watchDepth: 'reference' }],
     ['onSort', { watchDepth: 'reference' }],
     ['opts', { watchDepth: 'reference' }],
     ['resetQuery', { watchDepth: 'reference' }],
     ['resultState', { watchDepth: 'reference' }],
     ['rows', { watchDepth: 'reference' }],
+    ['savedSearch', { watchDepth: 'reference' }],
     ['searchSource', { watchDepth: 'reference' }],
-    ['setColumns', { watchDepth: 'reference' }],
     ['setIndexPattern', { watchDepth: 'reference' }],
     ['showSaveQuery', { watchDepth: 'reference' }],
     ['state', { watchDepth: 'reference' }],

src/plugins/discover/public/application/components/discover_legacy.test.tsx → src/plugins/discover/public/application/components/discover.test.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { shallowWithIntl } from '@kbn/test/jest';
-import { DiscoverLegacy } from './discover_legacy';
+import { Discover } from './discover';
 import { inspectorPluginMock } from '../../../../inspector/public/mocks';
 import { esHits } from '../../__mocks__/es_hits';
 import { indexPatternMock } from '../../__mocks__/index_pattern';
@@ -19,7 +19,7 @@ import { savedSearchMock } from '../../__mocks__/saved_search';
 import { createSearchSourceMock } from '../../../../data/common/search/search_source/mocks';
 import { dataPluginMock } from '../../../../data/public/mocks';
 import { createFilterManagerMock } from '../../../../data/public/query/filter_manager/filter_manager.mock';
-import { uiSettingsMock } from '../../__mocks__/ui_settings';
+import { uiSettingsMock as mockUiSettings } from '../../__mocks__/ui_settings';
 import { IndexPattern, IndexPatternAttributes } from '../../../../data/common/index_patterns';
 import { SavedObject } from '../../../../../core/types';
 import { navigationPluginMock } from '../../../../navigation/public/mocks';
@@ -40,6 +40,7 @@ jest.mock('../../kibana_services', () => {
         },
       },
       navigation: mockNavigation,
+      uiSettings: mockUiSettings,
     }),
   };
 });
@@ -53,6 +54,7 @@ function getProps(indexPattern: IndexPattern) {
         save: true,
       },
     },
+    uiSettings: mockUiSettings,
   } as unknown) as DiscoverServices;
 
   return {
@@ -72,7 +74,7 @@ function getProps(indexPattern: IndexPattern) {
     onSkipBottomButtonClick: jest.fn(),
     onSort: jest.fn(),
     opts: {
-      config: uiSettingsMock,
+      config: mockUiSettings,
       data: dataPluginMock.createStartContract(),
       fixedScroll: jest.fn(),
       filterManager: createFilterManagerMock(),
@@ -105,15 +107,13 @@ function getProps(indexPattern: IndexPattern) {
   };
 }
 
-describe('Descover legacy component', () => {
+describe('Discover component', () => {
   test('selected index pattern without time field displays no chart toggle', () => {
-    const component = shallowWithIntl(<DiscoverLegacy {...getProps(indexPatternMock)} />);
+    const component = shallowWithIntl(<Discover {...getProps(indexPatternMock)} />);
     expect(component.find('[data-test-subj="discoverChartToggle"]').length).toBe(0);
   });
   test('selected index pattern with time field displays chart toggle', () => {
-    const component = shallowWithIntl(
-      <DiscoverLegacy {...getProps(indexPatternWithTimefieldMock)} />
-    );
+    const component = shallowWithIntl(<Discover {...getProps(indexPatternWithTimefieldMock)} />);
     expect(component.find('[data-test-subj="discoverChartToggle"]').length).toBe(1);
   });
 });