[State Management] remove AppState from Dashboard app (#54105) (#55375)

Removes AppState from dashboard app and replaces it with state containers and state syncing utilities.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/legacy/core_plugins/data/public/filter/filter_manager/filter_state_manager.ts

@@ -18,6 +18,7 @@
  */
 
 import _ from 'lodash';
+import { Subscription } from 'rxjs';
 import { State } from 'ui/state_management/state';
 import { FilterManager, esFilters } from '../../../../../../plugins/data/public';
 
@@ -28,18 +29,20 @@ import {
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 } from '../../../../../../plugins/data/public/query/filter_manager/lib/compare_filters';
 
-type GetAppStateFunc = () => State | undefined | null;
+type GetAppStateFunc = () => { filters?: esFilters.Filter[]; save?: () => void } | undefined | null;
 
 /**
  * FilterStateManager is responsible for watching for filter changes
  * and syncing with FilterManager, as well as syncing FilterManager changes
  * back to the URL.
  **/
 export class FilterStateManager {
+  private filterManagerUpdatesSubscription: Subscription;
+
   filterManager: FilterManager;
   globalState: State;
   getAppState: GetAppStateFunc;
-  interval: NodeJS.Timeout | undefined;
+  interval: number | undefined;
 
   constructor(globalState: State, getAppState: GetAppStateFunc, filterManager: FilterManager) {
     this.getAppState = getAppState;
@@ -48,7 +51,7 @@ export class FilterStateManager {
 
     this.watchFilterState();
 
-    this.filterManager.getUpdates$().subscribe(() => {
+    this.filterManagerUpdatesSubscription = this.filterManager.getUpdates$().subscribe(() => {
       this.updateAppState();
     });
   }
@@ -57,12 +60,13 @@ export class FilterStateManager {
     if (this.interval) {
       clearInterval(this.interval);
     }
+    this.filterManagerUpdatesSubscription.unsubscribe();
   }
 
   private watchFilterState() {
     // This is a temporary solution to remove rootscope.
     // Moving forward, state should provide observable subscriptions.
-    this.interval = setInterval(() => {
+    this.interval = window.setInterval(() => {
       const appState = this.getAppState();
       const stateUndefined = !appState || !this.globalState;
       if (stateUndefined) return;
@@ -95,7 +99,7 @@ export class FilterStateManager {
 
   private saveState() {
     const appState = this.getAppState();
-    if (appState) appState.save();
+    if (appState && appState.save) appState.save();
     this.globalState.save();
   }
 

src/legacy/core_plugins/kibana/public/dashboard/__tests__/index.ts

@@ -17,6 +17,5 @@
  * under the License.
  */
 
-export { getAppStateMock } from './get_app_state_mock';
 export { getSavedDashboardMock } from './get_saved_dashboard_mock';
 export { getEmbeddableFactoryMock } from './get_embeddable_factories_mock';

src/legacy/core_plugins/kibana/public/dashboard/legacy_imports.ts

@@ -28,8 +28,6 @@ import chrome from 'ui/chrome';
 
 export const legacyChrome = chrome;
 export { State } from 'ui/state_management/state';
-export { AppState } from 'ui/state_management/app_state';
-export { AppStateClass } from 'ui/state_management/app_state';
 export { SavedObjectSaveOpts } from 'ui/saved_objects/types';
 export { npSetup, npStart } from 'ui/new_platform';
 export { IPrivate } from 'ui/private';
@@ -45,8 +43,6 @@ export { GlobalStateProvider } from 'ui/state_management/global_state';
 // @ts-ignore
 export { StateManagementConfigProvider } from 'ui/state_management/config_provider';
 // @ts-ignore
-export { AppStateProvider } from 'ui/state_management/app_state';
-// @ts-ignore
 export { PrivateProvider } from 'ui/private/private';
 // @ts-ignore
 export { EventsProvider } from 'ui/events';
@@ -60,9 +56,7 @@ export { KbnUrlProvider, RedirectWhenMissingProvider } from 'ui/url/index';
 // @ts-ignore
 export { confirmModalFactory } from 'ui/modals/confirm_modal';
 export { configureAppAngularModule } from 'ui/legacy_compat';
-export { stateMonitorFactory, StateMonitor } from 'ui/state_management/state_monitor_factory';
 export { ensureDefaultIndexPattern } from 'ui/legacy_compat';
-export { unhashUrl } from '../../../../../plugins/kibana_utils/public';
 export { IInjector } from 'ui/chrome';
 export { SavedObjectLoader } from 'ui/saved_objects';
 export { VISUALIZE_EMBEDDABLE_TYPE } from '../../../visualizations/public/embeddable';

src/legacy/core_plugins/kibana/public/dashboard/np_ready/application.ts

@@ -31,7 +31,6 @@ import { Storage } from '../../../../../../plugins/kibana_utils/public';
 import {
   GlobalStateProvider,
   StateManagementConfigProvider,
-  AppStateProvider,
   PrivateProvider,
   EventsProvider,
   PersistedState,
@@ -155,12 +154,6 @@ function createLocalStateModule() {
       'app/dashboard/Promise',
       'app/dashboard/PersistedState',
     ])
-    .factory('AppState', function(Private: any) {
-      return Private(AppStateProvider);
-    })
-    .service('getAppState', function(Private: any) {
-      return Private(AppStateProvider).getAppState;
-    })
     .service('globalState', function(Private: any) {
       return Private(GlobalStateProvider);
     });

src/legacy/core_plugins/kibana/public/dashboard/np_ready/dashboard_app.tsx

@@ -20,12 +20,7 @@
 import moment from 'moment';
 import { Subscription } from 'rxjs';
 
-import {
-  AppStateClass as TAppStateClass,
-  AppState as TAppState,
-  IInjector,
-  KbnUrl,
-} from '../legacy_imports';
+import { IInjector } from '../legacy_imports';
 
 import { ViewMode } from '../../../../embeddable_api/public/np_ready/public';
 import { SavedObjectDashboard } from '../saved_dashboard/saved_dashboard';
@@ -43,7 +38,7 @@ import { RenderDeps } from './application';
 
 export interface DashboardAppScope extends ng.IScope {
   dash: SavedObjectDashboard;
-  appState: TAppState;
+  appState: DashboardAppState;
   screenTitle: string;
   model: {
     query: Query;
@@ -60,7 +55,6 @@ export interface DashboardAppScope extends ng.IScope {
   refreshInterval: any;
   panels: SavedDashboardPanel[];
   indexPatterns: IIndexPattern[];
-  $evalAsync: any;
   dashboardViewMode: ViewMode;
   expandedPanel?: string;
   getShouldShowEditHelp: () => boolean;
@@ -91,8 +85,6 @@ export interface DashboardAppScope extends ng.IScope {
 
 export function initDashboardAppDirective(app: any, deps: RenderDeps) {
   app.directive('dashboardApp', function($injector: IInjector) {
-    const AppState = $injector.get<TAppStateClass<DashboardAppState>>('AppState');
-    const kbnUrl = $injector.get<KbnUrl>('kbnUrl');
     const confirmModal = $injector.get<ConfirmModalFn>('confirmModal');
     const config = deps.uiSettings;
 
@@ -105,17 +97,13 @@ export function initDashboardAppDirective(app: any, deps: RenderDeps) {
         $routeParams: {
           id?: string;
         },
-        getAppState: any,
         globalState: any
       ) =>
         new DashboardAppController({
           $route,
           $scope,
           $routeParams,
-          getAppState,
           globalState,
-          kbnUrl,
-          AppStateClass: AppState,
           config,
           confirmModal,
           indexPatterns: deps.npDataStart.indexPatterns,