[7.x] [Console] Fix leaky mappings subscription (#45646)

src/legacy/core_plugins/console/np_ready/public/application/containers/editor/legacy/use_ui_ace_keyboard_mode.tsx

@@ -99,7 +99,10 @@ export function useUIAceKeyboardMode(aceTextAreaElement: HTMLTextAreaElement | n
       if (aceTextAreaElement) {
         document.removeEventListener('keydown', documentKeyDownListener);
         aceTextAreaElement.removeEventListener('keydown', aceKeydownListener);
-        document.removeChild(overlayMountNode.current!);
+        const textAreaContainer = aceTextAreaElement.parentElement;
+        if (textAreaContainer && textAreaContainer.contains(overlayMountNode.current!)) {
+          textAreaContainer.removeChild(overlayMountNode.current!);
+        }
       }
     };
   }, [aceTextAreaElement]);

src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx

@@ -176,13 +176,17 @@ export function Main() {
 
   useEffect(() => {
     let resizerSubscriptions: Array<() => void> = [];
-    const subscription = editorsReady$.subscribe(([input, output]) => {
+    const readySubscription = editorsReady$.subscribe(([input, output]) => {
       settings.registerOutput(output.editor);
       settings.registerInput(input.editor);
       history.setEditor(input.editor);
 
       init(input.editor, output.editor, history);
 
+      // This may kick of a polling mechanic, needs to be refactored to more
+      // standard subscription pattern.
+      mappings.retrieveAutoCompleteInfo();
+
       resizerSubscriptions = resizerSubscriptions.concat([
         subscribeResizeChecker(ResizeChecker, containerRef.current!, input.editor, output.editor),
         subscribeResizeChecker(ResizeChecker, input.element, input.editor),
@@ -196,7 +200,8 @@ export function Main() {
 
     return () => {
       resizerSubscriptions.map(done => done());
-      subscription.unsubscribe();
+      readySubscription.unsubscribe();
+      mappings.clearSubscriptions();
     };
   }, []);
 

src/legacy/core_plugins/console/np_ready/public/legacy.ts

@@ -34,7 +34,7 @@ import 'ui/capabilities/route_setup';
 /* eslint-enable @kbn/eslint/no-restricted-paths */
 
 import template from '../../public/quarantined/index.html';
-import { App } from '../../../../../core/public';
+import { App, AppUnmount } from '../../../../../core/public';
 
 export interface XPluginSet {
   __LEGACY: {
@@ -64,12 +64,14 @@ uiRoutes.when('/dev_tools/console', {
         throw new Error(message);
       }
 
+      let unmount: AppUnmount | Promise<AppUnmount>;
+
       const mockedSetupCore = {
         ...npSetup.core,
         application: {
           register(app: App): void {
             try {
-              app.mount(anyObject, { element: targetElement, appBasePath: '' });
+              unmount = app.mount(anyObject, { element: targetElement, appBasePath: '' });
             } catch (e) {
               npSetup.core.fatalErrors.add(e);
             }
@@ -87,6 +89,13 @@ uiRoutes.when('/dev_tools/console', {
         },
       });
       pluginInstance.start(npStart.core);
+
+      $scope.$on('$destroy', async () => {
+        if (unmount) {
+          const fn = await unmount;
+          fn();
+        }
+      });
     };
   },
   template,

src/legacy/core_plugins/console/public/quarantined/src/app.js

@@ -18,7 +18,6 @@
  */
 
 const $ = require('jquery');
-const mappings = require('./mappings');
 
 const DEFAULT_INPUT_VALUE = `GET _search
 {
@@ -92,5 +91,4 @@ export default function init(input, output, history, sourceLocation = 'stored')
 
   setupAutosave();
   loadSavedState();
-  mappings.retrieveAutoCompleteInfo();
 }

src/legacy/core_plugins/console/public/quarantined/src/mappings.js

@@ -290,10 +290,16 @@ function retrieveSettings(settingsKey, settingsToRetrieve) {
 //      unchanged alone (both selected and unselected).
 //   3. Poll: Use saved. Fetch selected. Ignore unselected.
 
-function retrieveAutoCompleteInfo(settingsToRetrieve = legacyBackDoorToSettings().getAutocomplete()) {
+
+function clearSubscriptions() {
   if (pollTimeoutId) {
     clearTimeout(pollTimeoutId);
   }
+}
+
+
+function retrieveAutoCompleteInfo(settingsToRetrieve = legacyBackDoorToSettings().getAutocomplete()) {
+  clearSubscriptions();
 
   const mappingPromise = retrieveSettings('fields', settingsToRetrieve);
   const aliasesPromise = retrieveSettings('indices', settingsToRetrieve);
@@ -347,4 +353,5 @@ export default {
   expandAliases,
   clear,
   retrieveAutoCompleteInfo,
+  clearSubscriptions
 };