[7.x] [Discover] Migrate context AppState / GlobalState to use new app state helpers (#57078)

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context.js

@@ -19,13 +19,11 @@
 
 import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
-import { getAngularModule, getServices, subscribeWithScope } from '../../kibana_services';
-
+import { getAngularModule, getServices } from '../../kibana_services';
 import './context_app';
+import { getState } from './context_state';
 import contextAppRouteTemplate from './context.html';
 import { getRootBreadcrumbs } from '../helpers/breadcrumbs';
-import { FilterStateManager } from '../../../../../data/public';
-const { chrome } = getServices();
 
 const k7Breadcrumbs = $route => {
   const { indexPattern } = $route.current.locals;
@@ -68,53 +66,50 @@ getAngularModule().config($routeProvider => {
     });
 });
 
-function ContextAppRouteController(
-  $routeParams,
-  $scope,
-  AppState,
-  config,
-  $route,
-  getAppState,
-  globalState
-) {
+function ContextAppRouteController($routeParams, $scope, config, $route) {
   const filterManager = getServices().filterManager;
-  const filterStateManager = new FilterStateManager(globalState, getAppState, filterManager);
   const indexPattern = $route.current.locals.indexPattern.ip;
+  const {
+    startSync: startStateSync,
+    stopSync: stopStateSync,
+    appState,
+    getFilters,
+    setFilters,
+    setAppState,
+  } = getState({
+    defaultStepSize: config.get('context:defaultSize'),
+    timeFieldName: indexPattern.timeFieldName,
+    storeInSessionStorage: config.get('state:storeInSessionStorage'),
+  });
+  this.state = { ...appState.getState() };
+  this.anchorId = $routeParams.id;
+  this.indexPattern = indexPattern;
+  this.discoverUrl = getServices().chrome.navLinks.get('kibana:discover').url;
+  filterManager.setFilters(_.cloneDeep(getFilters()));
+  startStateSync();
 
-  this.state = new AppState(createDefaultAppState(config, indexPattern));
-  this.state.save(true);
-
+  // take care of parameter changes in UI
   $scope.$watchGroup(
     [
       'contextAppRoute.state.columns',
       'contextAppRoute.state.predecessorCount',
       'contextAppRoute.state.successorCount',
     ],
-    () => this.state.save(true)
+    newValues => {
+      const [columns, predecessorCount, successorCount] = newValues;
+      if (Array.isArray(columns) && predecessorCount >= 0 && successorCount >= 0) {
+        setAppState({ columns, predecessorCount, successorCount });
+      }
+    }
   );
-
-  const updateSubsciption = subscribeWithScope($scope, filterManager.getUpdates$(), {
-    next: () => {
-      this.filters = _.cloneDeep(filterManager.getFilters());
-    },
+  // take care of parameter filter changes
+  const filterObservable = filterManager.getUpdates$().subscribe(() => {
+    setFilters(filterManager);
+    $route.reload();
   });
 
   $scope.$on('$destroy', () => {
-    filterStateManager.destroy();
-    updateSubsciption.unsubscribe();
+    stopStateSync();
+    filterObservable.unsubscribe();
   });
-  this.anchorId = $routeParams.id;
-  this.indexPattern = indexPattern;
-  this.discoverUrl = chrome.navLinks.get('kibana:discover').url;
-  this.filters = _.cloneDeep(filterManager.getFilters());
-}
-
-function createDefaultAppState(config, indexPattern) {
-  return {
-    columns: ['_source'],
-    filters: [],
-    predecessorCount: parseInt(config.get('context:defaultSize'), 10),
-    sort: [indexPattern.timeFieldName, 'desc'],
-    successorCount: parseInt(config.get('context:defaultSize'), 10),
-  };
 }

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context/api/context.ts

@@ -67,7 +67,7 @@ function fetchContextProvider(indexPatterns: IndexPatternsContract) {
     size: number,
     filters: Filter[]
   ) {
-    if (typeof anchor !== 'object' || anchor === null) {
+    if (typeof anchor !== 'object' || anchor === null || !size) {
       return [];
     }
     const indexPattern = await indexPatterns.get(indexPatternId);

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context/query/actions.js

@@ -88,9 +88,11 @@ export function QueryActionsProvider(Promise) {
 
   const fetchSurroundingRows = (type, state) => {
     const {
-      queryParameters: { indexPatternId, filters, sort, tieBreakerField },
+      queryParameters: { indexPatternId, sort, tieBreakerField },
       rows: { anchor },
     } = state;
+    const filters = getServices().filterManager.getFilters();
+
     const count =
       type === 'successors'
         ? state.queryParameters.successorCount

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/context_state.test.ts

@@ -0,0 +1,193 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { getState } from './context_state';
+import { createBrowserHistory, History } from 'history';
+import { FilterManager, Filter } from '../../../../../../../plugins/data/public';
+import { coreMock } from '../../../../../../../core/public/mocks';
+const setupMock = coreMock.createSetup();
+
+describe('Test Discover Context State', () => {
+  let history: History;
+  let state: any;
+  const getCurrentUrl = () => history.createHref(history.location);
+  beforeEach(async () => {
+    history = createBrowserHistory();
+    history.push('/');
+    state = await getState({
+      defaultStepSize: '4',
+      timeFieldName: 'time',
+      history,
+    });
+    state.startSync();
+  });
+  afterEach(() => {
+    state.stopSync();
+  });
+  test('getState function default return', () => {
+    expect(state.appState.getState()).toMatchInlineSnapshot(`
+      Object {
+        "columns": Array [
+          "_source",
+        ],
+        "filters": Array [],
+        "predecessorCount": 4,
+        "sort": Array [
+          "time",
+          "desc",
+        ],
+        "successorCount": 4,
+      }
+    `);
+    expect(state.globalState.getState()).toMatchInlineSnapshot(`null`);
+    expect(state.startSync).toBeDefined();
+    expect(state.stopSync).toBeDefined();
+    expect(state.getFilters()).toStrictEqual([]);
+  });
+  test('getState -> setAppState syncing to url', async () => {
+    state.setAppState({ predecessorCount: 10 });
+    state.flushToUrl();
+    expect(getCurrentUrl()).toMatchInlineSnapshot(
+      `"/#?_a=(columns:!(_source),filters:!(),predecessorCount:10,sort:!(time,desc),successorCount:4)"`
+    );
+  });
+  test('getState -> url to appState syncing', async () => {
+    history.push(
+      '/#?_a=(columns:!(_source),predecessorCount:1,sort:!(time,desc),successorCount:1)'
+    );
+    expect(state.appState.getState()).toMatchInlineSnapshot(`
+      Object {
+        "columns": Array [
+          "_source",
+        ],
+        "predecessorCount": 1,
+        "sort": Array [
+          "time",
+          "desc",
+        ],
+        "successorCount": 1,
+      }
+    `);
+  });
+  test('getState -> url to appState syncing with return to a url without state', async () => {
+    history.push(
+      '/#?_a=(columns:!(_source),predecessorCount:1,sort:!(time,desc),successorCount:1)'
+    );
+    expect(state.appState.getState()).toMatchInlineSnapshot(`
+      Object {
+        "columns": Array [
+          "_source",
+        ],
+        "predecessorCount": 1,
+        "sort": Array [
+          "time",
+          "desc",
+        ],
+        "successorCount": 1,
+      }
+    `);
+    history.push('/');
+    expect(state.appState.getState()).toMatchInlineSnapshot(`
+      Object {
+        "columns": Array [
+          "_source",
+        ],
+        "predecessorCount": 1,
+        "sort": Array [
+          "time",
+          "desc",
+        ],
+        "successorCount": 1,
+      }
+    `);
+  });
+
+  test('getState -> filters', async () => {
+    const filterManager = new FilterManager(setupMock.uiSettings);
+    const filterGlobal = {
+      query: { match: { extension: { query: 'jpg', type: 'phrase' } } },
+      meta: { index: 'logstash-*', negate: false, disabled: false, alias: null },
+    } as Filter;
+    filterManager.setGlobalFilters([filterGlobal]);
+    const filterApp = {
+      query: { match: { extension: { query: 'png', type: 'phrase' } } },
+      meta: { index: 'logstash-*', negate: true, disabled: false, alias: null },
+    } as Filter;
+    filterManager.setAppFilters([filterApp]);
+    state.setFilters(filterManager);
+    expect(state.getFilters()).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "$state": Object {
+            "store": "globalState",
+          },
+          "meta": Object {
+            "alias": null,
+            "disabled": false,
+            "index": "logstash-*",
+            "key": "extension",
+            "negate": false,
+            "params": Object {
+              "query": "jpg",
+            },
+            "type": "phrase",
+            "value": [Function],
+          },
+          "query": Object {
+            "match": Object {
+              "extension": Object {
+                "query": "jpg",
+                "type": "phrase",
+              },
+            },
+          },
+        },
+        Object {
+          "$state": Object {
+            "store": "appState",
+          },
+          "meta": Object {
+            "alias": null,
+            "disabled": false,
+            "index": "logstash-*",
+            "key": "extension",
+            "negate": true,
+            "params": Object {
+              "query": "png",
+            },
+            "type": "phrase",
+            "value": [Function],
+          },
+          "query": Object {
+            "match": Object {
+              "extension": Object {
+                "query": "png",
+                "type": "phrase",
+              },
+            },
+          },
+        },
+      ]
+    `);
+    state.flushToUrl();
+    expect(getCurrentUrl()).toMatchInlineSnapshot(
+      `"/#?_g=(filters:!(('$state':(store:globalState),meta:(alias:!n,disabled:!f,index:'logstash-*',key:extension,negate:!f,params:(query:jpg),type:phrase),query:(match:(extension:(query:jpg,type:phrase))))))&_a=(columns:!(_source),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,index:'logstash-*',key:extension,negate:!t,params:(query:png),type:phrase),query:(match:(extension:(query:png,type:phrase))))),predecessorCount:4,sort:!(time,desc),successorCount:4)"`
+    );
+  });
+});