[Canvas] Better handling navigating to/from canvas (#66407)

* Better handling navigating to/from canvas

* fix types

* prettier

Co-authored-by: Elastic Machine <[email protected]>

x-pack/plugins/canvas/public/application.tsx

@@ -18,25 +18,27 @@ import { CanvasStartDeps, CanvasSetupDeps } from './plugin';
 // @ts-ignore Untyped local
 import { App } from './components/app';
 import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public';
-import { initInterpreter, resetInterpreter } from './lib/run_interpreter';
+import { initInterpreter } from './lib/run_interpreter';
 import { registerLanguage } from './lib/monaco_language_def';
 import { SetupRegistries } from './plugin_api';
 import { initRegistries, populateRegistries, destroyRegistries } from './registries';
 import { getDocumentationLinks } from './lib/documentation_links';
 // @ts-ignore untyped component
 import { HelpMenu } from './components/help_menu/help_menu';
-import { createStore, destroyStore } from './store';
+import { createStore } from './store';
 
 /* eslint-enable */
 import { init as initStatsReporter } from './lib/ui_metric';
 
 import { CapabilitiesStrings } from '../i18n';
 
-import { startServices, stopServices, services } from './services';
+import { startServices, services } from './services';
 // @ts-ignore Untyped local
 import { destroyHistory } from './lib/history_provider';
 // @ts-ignore Untyped local
 import { stopRouter } from './lib/router_provider';
+// @ts-ignore Untyped local
+import { appUnload } from './state/actions/app';
 
 import './style/index.scss';
 
@@ -68,6 +70,7 @@ export const renderApp = (
  );
  return () => {
  ReactDOM.unmountComponentAtNode(element);
+ canvasStore.dispatch(appUnload());
  };
 };
 
@@ -129,10 +132,14 @@ export const initializeCanvas = async (
 };
 
 export const teardownCanvas = (coreStart: CoreStart, startPlugins: CanvasStartDeps) => {
- stopServices();
  destroyRegistries();
- resetInterpreter();
- destroyStore();
+
+ // TODO: Not cleaning these up temporarily.
+ // We have an issue where if requests are inflight, and you navigate away,
+ // those requests could still be trying to act on the store and possibly require services.
+ // stopServices();
+ // resetInterpreter();
+ // destroyStore();
 
  coreStart.chrome.setBadge(undefined);
  coreStart.chrome.setHelpExtension(undefined);

x-pack/plugins/canvas/public/state/actions/app.js

@@ -9,3 +9,4 @@ import { createAction } from 'redux-actions';
 // actions to set the application state
 export const appReady = createAction('appReady');
 export const appError = createAction('appError');
+export const appUnload = createAction('appUnload');

x-pack/plugins/canvas/public/state/middleware/workpad_autoplay.ts

@@ -10,6 +10,8 @@ import { getFullscreen } from '../selectors/app';
 import { getInFlight } from '../selectors/resolved_args';
 import { getWorkpad, getPages, getSelectedPageIndex, getAutoplay } from '../selectors/workpad';
 // @ts-ignore untyped local
+import { appUnload } from '../actions/app';
+// @ts-ignore Untyped Local
 import { routerProvider } from '../../lib/router_provider';
 import { setAutoplayInterval } from '../../lib/app_state';
 import { createTimeInterval } from '../../lib/time_interval';
@@ -83,5 +85,9 @@ export const workpadAutoplay: Middleware<{}, State> = ({ getState }) => (next) =
  } else {
  stopAutoUpdate();
  }
+
+ if (action.type === appUnload.toString()) {
+ stopAutoUpdate();
+ }
  };
 };

x-pack/plugins/canvas/public/state/middleware/workpad_refresh.ts

@@ -10,6 +10,8 @@ import { State } from '../../../types';
 import { fetchAllRenderables } from '../actions/elements';
 // @ts-ignore Untyped Local
 import { setRefreshInterval } from '../actions/workpad';
+// @ts-ignore Untyped Local
+import { appUnload } from '../actions/app';
 import { inFlightComplete } from '../actions/resolved_args';
 import { getInFlight } from '../selectors/resolved_args';
 import { getRefreshInterval } from '../selectors/workpad';
@@ -81,5 +83,9 @@ export const workpadRefresh: Middleware<{}, State> = ({ dispatch, getState }) =>
  startDelayedUpdate();
  }
  }
+
+ if (action.type === appUnload.toString()) {
+ cancelDelayedUpdate();
+ }
  };
 };

x-pack/plugins/canvas/public/state/store.js

@@ -11,6 +11,16 @@ import { getRootReducer } from './reducers';
 
 let store;
 
+export function getStore() {
+ return store;
+}
+
+export function cloneStore() {
+ const state = store.getState();
+ store = undefined;
+ return createStore(state);
+}
+
 export function createStore(initialState) {
  if (typeof store !== 'undefined') {
  throw new Error('Redux store can only be initialized once');

x-pack/plugins/canvas/public/store.ts

@@ -4,15 +4,28 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// @ts-ignore Untyped local
-import { createStore as createReduxStore, destroyStore as destroy } from './state/store';
+import {
+ createStore as createReduxStore,
+ destroyStore as destroy,
+ getStore,
+ cloneStore,
+ // @ts-ignore Untyped local
+} from './state/store';
 // @ts-ignore Untyped local
 import { getInitialState } from './state/initial_state';
 
 import { CoreSetup } from '../../../../src/core/public';
 import { CanvasSetupDeps } from './plugin';
 
 export async function createStore(core: CoreSetup, plugins: CanvasSetupDeps) {
+ if (getStore()) {
+ return cloneStore();
+ }
+
+ return createFreshStore(core, plugins);
+}
+
+export async function createFreshStore(core: CoreSetup, plugins: CanvasSetupDeps) {
  const initialState = getInitialState();
 
  const basePath = core.http.basePath.get();