[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/application/angular/context.html

@@ -1,10 +1,4 @@
-<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/components/action_bar/action_bar.test.tsx

@@ -10,7 +10,10 @@ 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';
 
 describe('Test Discover Context ActionBar for successor | predecessor records', () => {
   ['successors', 'predecessors'].forEach((type) => {
@@ -31,7 +34,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 +47,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 `, () => {

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 {
   /**
@@ -47,7 +50,7 @@ export interface ActionBarProps {
    * is triggered when the input containing count is changed
    * @param count
    */
-  onChangeCount: (count: number) => void;
+  onChangeCount: (type: string, count: number) => void;
   /**
    * can be `predecessors` or `successors`, usage in context:
    * predecessors action bar + records (these are newer records)
@@ -73,7 +76,7 @@ export function ActionBar({
   const onSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
     ev.preventDefault();
     if (newDocCount !== docCount && isValid(newDocCount)) {
-      onChangeCount(newDocCount);
+      onChangeCount(type, newDocCount);
     }
   };
   useEffect(() => {
@@ -100,7 +103,7 @@ export function ActionBar({
                 const value = newDocCount + defaultStepSize;
                 if (isValid(value)) {
                   setNewDocCount(value);
-                  onChangeCount(value);
+                  onChangeCount(type, value);
                 }
               }}
               flush="right"
@@ -131,7 +134,7 @@ export function ActionBar({
                 }}
                 onBlur={() => {
                   if (newDocCount !== docCount && isValid(newDocCount)) {
-                    onChangeCount(newDocCount);
+                    onChangeCount(type, newDocCount);
                   }
                 }}
                 type="number"