[Discover] Migrate angular context app controllers to react

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

@@ -18,4 +18,5 @@ export const indexPatternsMock = ({
       return indexPatternMock;
     }
   },
-} as unknown) as IndexPatternsService;
+  updateSavedObject: jest.fn(),
+} as unknown) as jest.Mocked<IndexPatternsService>;

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

@@ -7,7 +7,13 @@
  */
 
 import { IUiSettingsClient } from 'kibana/public';
-import { DEFAULT_COLUMNS_SETTING, DOC_TABLE_LEGACY, SAMPLE_SIZE_SETTING } from '../../common';
+import {
+  CONTEXT_TIE_BREAKER_FIELDS_SETTING,
+  DEFAULT_COLUMNS_SETTING,
+  DOC_TABLE_LEGACY,
+  SAMPLE_SIZE_SETTING,
+  SEARCH_FIELDS_FROM_SOURCE,
+} from '../../common';
 
 export const uiSettingsMock = ({
   get: (key: string) => {
@@ -17,6 +23,10 @@ export const uiSettingsMock = ({
       return ['default_column'];
     } else if (key === DOC_TABLE_LEGACY) {
       return true;
+    } else if (key === CONTEXT_TIE_BREAKER_FIELDS_SETTING) {
+      return ['_doc'];
+    } else if (key === SEARCH_FIELDS_FROM_SOURCE) {
+      return false;
     }
   },
 } as unknown) as IUiSettingsClient;

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

@@ -1,10 +1,5 @@
-<context-app
-  anchor-id="contextAppRoute.anchorId"
-  columns="contextAppRoute.state.columns"
+<context-app-legacy
   index-pattern="contextAppRoute.indexPattern"
-  app-state="contextAppRoute.state"
-  state-container="contextAppRoute.stateContainer"
-  filters="contextAppRoute.filters"
-  predecessor-count="contextAppRoute.state.predecessorCount"
-  successor-count="contextAppRoute.state.successorCount"
-  sort="contextAppRoute.state.sort"></context-app>
+  index-pattern-id="contextAppRoute.indexPatternId"
+  anchor-id="contextAppRoute.anchorId">
+</context-app-legacy>

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

@@ -6,12 +6,8 @@
  * Side Public License, v 1.
  */
 
-import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
-import { CONTEXT_DEFAULT_SIZE_SETTING } from '../../../common';
 import { getAngularModule, getServices } from '../../kibana_services';
-import './context_app';
-import { getState } from './context_state';
 import contextAppRouteTemplate from './context.html';
 import { getRootBreadcrumbs } from '../helpers/breadcrumbs';
 
@@ -28,9 +24,14 @@ const k7Breadcrumbs = () => {
 
 getAngularModule().config(($routeProvider) => {
   $routeProvider.when('/context/:indexPatternId/:id*', {
-    controller: ContextAppRouteController,
+    controller: function ($routeParams, $scope, $route) {
+      this.indexPattern = $route.current.locals.indexPattern.ip;
+      this.anchorId = $routeParams.id;
+      this.indexPatternId = $route.current.params.indexPatternId;
+    },
     k7Breadcrumbs,
     controllerAs: 'contextAppRoute',
+    reloadOnSearch: false,
     resolve: {
       indexPattern: ($route, Promise) => {
         const indexPattern = getServices().indexPatterns.get($route.current.params.indexPatternId);
@@ -40,57 +41,3 @@ getAngularModule().config(($routeProvider) => {
     template: contextAppRouteTemplate,
   });
 });
-
-function ContextAppRouteController($routeParams, $scope, $route) {
-  const filterManager = getServices().filterManager;
-  const indexPattern = $route.current.locals.indexPattern.ip;
-  const stateContainer = getState({
-    defaultStepSize: getServices().uiSettings.get(CONTEXT_DEFAULT_SIZE_SETTING),
-    timeFieldName: indexPattern.timeFieldName,
-    storeInSessionStorage: getServices().uiSettings.get('state:storeInSessionStorage'),
-    history: getServices().history(),
-    toasts: getServices().core.notifications.toasts,
-    uiSettings: getServices().core.uiSettings,
-  });
-  const {
-    startSync: startStateSync,
-    stopSync: stopStateSync,
-    appState,
-    getFilters,
-    setFilters,
-    setAppState,
-    flushToUrl,
-  } = stateContainer;
-  this.stateContainer = stateContainer;
-  this.state = { ...appState.getState() };
-  this.anchorId = $routeParams.id;
-  this.indexPattern = indexPattern;
-  filterManager.setFilters(_.cloneDeep(getFilters()));
-  startStateSync();
-
-  // take care of parameter changes in UI
-  $scope.$watchGroup(
-    [
-      'contextAppRoute.state.columns',
-      'contextAppRoute.state.predecessorCount',
-      'contextAppRoute.state.successorCount',
-    ],
-    (newValues) => {
-      const [columns, predecessorCount, successorCount] = newValues;
-      if (Array.isArray(columns) && predecessorCount >= 0 && successorCount >= 0) {
-        setAppState({ columns, predecessorCount, successorCount });
-        flushToUrl(true);
-      }
-    }
-  );
-  // take care of parameter filter changes
-  const filterObservable = filterManager.getUpdates$().subscribe(() => {
-    setFilters(filterManager);
-    $route.reload();
-  });
-
-  $scope.$on('$destroy', () => {
-    stopStateSync();
-    filterObservable.unsubscribe();
-  });
-}

src/plugins/discover/public/application/angular/context/api/context.predecessors.test.ts

@@ -9,7 +9,7 @@
 import moment from 'moment';
 import { get, last } from 'lodash';
 import { createIndexPatternsStub, createContextSearchSourceStub } from './_stubs';
-import { EsHitRecordList, fetchContextProvider } from './context';
+import { EsHitRecordList, fetchContextProvider, SurrDocType } from './context';
 import { setServices, SortDirection } from '../../../../kibana_services';
 import { EsHitRecord } from './context';
 import { Query } from '../../../../../../data/public';
@@ -73,7 +73,7 @@ describe('context app', function () {
         };
 
         return fetchContextProvider(createIndexPatternsStub()).fetchSurroundingDocs(
-          'predecessors',
+          SurrDocType.PREDECESSORS,
           indexPatternId,
           anchor as EsHitRecord,
           timeField,
@@ -265,7 +265,7 @@ describe('context app', function () {
         };
 
         return fetchContextProvider(createIndexPatternsStub(), true).fetchSurroundingDocs(
-          'predecessors',
+          SurrDocType.PREDECESSORS,
           indexPatternId,
           anchor as EsHitRecord,
           timeField,

src/plugins/discover/public/application/angular/context/api/context.successors.test.ts

@@ -12,7 +12,7 @@ import { get, last } from 'lodash';
 import { createIndexPatternsStub, createContextSearchSourceStub } from './_stubs';
 import { setServices, SortDirection } from '../../../../kibana_services';
 import { Query } from '../../../../../../data/public';
-import { EsHitRecordList, fetchContextProvider } from './context';
+import { EsHitRecordList, fetchContextProvider, SurrDocType } from './context';
 import { EsHitRecord } from './context';
 import { DiscoverServices } from '../../../../build_services';
 
@@ -73,7 +73,7 @@ describe('context app', function () {
         };
 
         return fetchContextProvider(createIndexPatternsStub()).fetchSurroundingDocs(
-          'successors',
+          SurrDocType.SUCCESSORS,
           indexPatternId,
           anchor as EsHitRecord,
           timeField,
@@ -268,7 +268,7 @@ describe('context app', function () {
         };
 
         return fetchContextProvider(createIndexPatternsStub(), true).fetchSurroundingDocs(
-          'successors',
+          SurrDocType.SUCCESSORS,
           indexPatternId,
           anchor as EsHitRecord,
           timeField,

src/plugins/discover/public/application/angular/context/api/context.ts

@@ -16,7 +16,11 @@ import { getEsQuerySearchAfter } from './utils/get_es_query_search_after';
 import { getEsQuerySort } from './utils/get_es_query_sort';
 import { getServices } from '../../../../kibana_services';
 
-export type SurrDocType = 'successors' | 'predecessors';
+export enum SurrDocType {
+  SUCCESSORS = 'successors',
+  PREDECESSORS = 'predecessors',
+}
+
 export type EsHitRecord = Required<
   Pick<
     estypes.SearchResponse['hits']['hits'][number],
@@ -68,7 +72,7 @@ function fetchContextProvider(indexPatterns: IndexPatternsContract, useNewFields
     }
     const indexPattern = await indexPatterns.get(indexPatternId);
     const searchSource = await createSearchSource(indexPattern, filters);
-    const sortDirToApply = type === 'successors' ? sortDir : reverseSortDir(sortDir);
+    const sortDirToApply = type === SurrDocType.SUCCESSORS ? sortDir : reverseSortDir(sortDir);
 
     const nanos = indexPattern.isTimeNanosBased() ? extractNanos(anchor.fields[timeField][0]) : '';
     const timeValueMillis =
@@ -108,7 +112,9 @@ function fetchContextProvider(indexPatterns: IndexPatternsContract, useNewFields
       );
 
       documents =
-        type === 'successors' ? [...documents, ...hits] : [...hits.slice().reverse(), ...documents];
+        type === SurrDocType.SUCCESSORS
+          ? [...documents, ...hits]
+          : [...hits.slice().reverse(), ...documents];
     }
 
     return documents;

src/plugins/discover/public/application/angular/context/api/utils/generate_intervals.ts

@@ -7,6 +7,7 @@
  */
 
 import { SortDirection } from '../../../../../../../data/public';
+import { SurrDocType } from '../context';
 
 export type IntervalValue = number | null;
 
@@ -31,12 +32,12 @@ export function* asPairs(iterable: Iterable<IntervalValue>): IterableIterator<In
 export function generateIntervals(
   offsets: number[],
   startTime: number,
-  type: string,
+  type: SurrDocType,
   sort: SortDirection
 ): IterableIterator<IntervalValue[]> {
   const offsetSign =
-    (sort === SortDirection.asc && type === 'successors') ||
-    (sort === SortDirection.desc && type === 'predecessors')
+    (sort === SortDirection.asc && type === SurrDocType.SUCCESSORS) ||
+    (sort === SortDirection.desc && type === SurrDocType.PREDECESSORS)
       ? 1
       : -1;
   // ending with `null` opens the last interval

src/plugins/discover/public/application/angular/context/api/utils/get_es_query_search_after.ts

@@ -26,7 +26,8 @@ export function getEsQuerySearchAfter(
 ): EsQuerySearchAfter {
   if (documents.length) {
     // already surrounding docs -> first or last record  is used
-    const afterTimeRecIdx = type === 'successors' && documents.length ? documents.length - 1 : 0;
+    const afterTimeRecIdx =
+      type === SurrDocType.SUCCESSORS && documents.length ? documents.length - 1 : 0;
     const afterTimeDoc = documents[afterTimeRecIdx];
     let afterTimeValue = afterTimeDoc.sort[0] as string | number;
     if (nanoSeconds) {

src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.test.tsx

@@ -10,10 +10,14 @@ import React from 'react';
 import { mountWithIntl } from '@kbn/test/jest';
 import { ActionBar, ActionBarProps } from './action_bar';
 import { findTestSubject } from '@elastic/eui/lib/test';
-import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from '../../query_parameters/constants';
+import {
+  MAX_CONTEXT_SIZE,
+  MIN_CONTEXT_SIZE,
+} from '../../../../components/context_app/utils/constants';
+import { SurrDocType } from '../../api/context';
 
 describe('Test Discover Context ActionBar for successor | predecessor records', () => {
-  ['successors', 'predecessors'].forEach((type) => {
+  [SurrDocType.SUCCESSORS, SurrDocType.PREDECESSORS].forEach((type) => {
     const onChangeCount = jest.fn();
     const props = {
       defaultStepSize: 5,
@@ -31,7 +35,7 @@ describe('Test Discover Context ActionBar for successor | predecessor records',
 
     test(`${type}: Load button click`, () => {
       btn.simulate('click');
-      expect(onChangeCount).toHaveBeenCalledWith(25);
+      expect(onChangeCount).toHaveBeenCalledWith(type, 25);
     });
 
     test(`${type}: Load button click doesnt submit when MAX_CONTEXT_SIZE was reached`, () => {
@@ -44,13 +48,13 @@ describe('Test Discover Context ActionBar for successor | predecessor records',
     test(`${type}: Count input change submits on blur`, () => {
       input.simulate('change', { target: { valueAsNumber: 123 } });
       input.simulate('blur');
-      expect(onChangeCount).toHaveBeenCalledWith(123);
+      expect(onChangeCount).toHaveBeenCalledWith(type, 123);
     });
 
     test(`${type}: Count input change submits on return`, () => {
       input.simulate('change', { target: { valueAsNumber: 124 } });
       input.simulate('submit');
-      expect(onChangeCount).toHaveBeenCalledWith(124);
+      expect(onChangeCount).toHaveBeenCalledWith(type, 124);
     });
 
     test(`${type}: Count input doesnt submits values higher than MAX_CONTEXT_SIZE `, () => {
@@ -68,7 +72,7 @@ describe('Test Discover Context ActionBar for successor | predecessor records',
     });
 
     test(`${type}: Warning about limitation of additional records`, () => {
-      if (type === 'predecessors') {
+      if (type === SurrDocType.PREDECESSORS) {
         expect(findTestSubject(wrapper, 'predecessorsWarningMsg').text()).toBe(
           'No documents newer than the anchor could be found.'
         );

src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.tsx

@@ -19,7 +19,10 @@ import {
 } from '@elastic/eui';
 import { ActionBarWarning } from './action_bar_warning';
 import { SurrDocType } from '../../api/context';
-import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from '../../query_parameters/constants';
+import {
+  MAX_CONTEXT_SIZE,
+  MIN_CONTEXT_SIZE,
+} from '../../../../components/context_app/utils/constants';
 
 export interface ActionBarProps {
   /**
@@ -45,9 +48,10 @@ export interface ActionBarProps {
   isLoading: boolean;
   /**
    * is triggered when the input containing count is changed
+   * @param type
    * @param count
    */
-  onChangeCount: (count: number) => void;
+  onChangeCount: (type: SurrDocType, count: number) => void;
   /**
    * can be `predecessors` or `successors`, usage in context:
    * predecessors action bar + records (these are newer records)
@@ -67,13 +71,13 @@ export function ActionBar({
   type,
 }: ActionBarProps) {
   const showWarning = !isDisabled && !isLoading && docCountAvailable < docCount;
-  const isSuccessor = type === 'successors';
+  const isSuccessor = type === SurrDocType.SUCCESSORS;
   const [newDocCount, setNewDocCount] = useState(docCount);
   const isValid = (value: number) => value >= MIN_CONTEXT_SIZE && value <= MAX_CONTEXT_SIZE;
   const onSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
     ev.preventDefault();
     if (newDocCount !== docCount && isValid(newDocCount)) {
-      onChangeCount(newDocCount);
+      onChangeCount(type, newDocCount);
     }
   };
   useEffect(() => {
@@ -100,7 +104,7 @@ export function ActionBar({
                 const value = newDocCount + defaultStepSize;
                 if (isValid(value)) {
                   setNewDocCount(value);
-                  onChangeCount(value);
+                  onChangeCount(type, value);
                 }
               }}
               flush="right"
@@ -131,7 +135,7 @@ export function ActionBar({
                 }}
                 onBlur={() => {
                   if (newDocCount !== docCount && isValid(newDocCount)) {
-                    onChangeCount(newDocCount);
+                    onChangeCount(type, newDocCount);
                   }
                 }}
                 type="number"

src/plugins/discover/public/application/angular/context/components/action_bar/action_bar_warning.tsx

@@ -12,7 +12,7 @@ import { EuiCallOut } from '@elastic/eui';
 import { SurrDocType } from '../../api/context';
 
 export function ActionBarWarning({ docCount, type }: { docCount: number; type: SurrDocType }) {
-  if (type === 'predecessors') {
+  if (type === SurrDocType.PREDECESSORS) {
     return (
       <EuiCallOut
         color="warning"