Ensure that dynamically created vue components are destroyed. (#6948)

src/plugins/charts/scatter/plugin.js

@@ -98,9 +98,11 @@ export default function () {
   };
 
   function getScatterPlotFormControl(openmct) {
+    let destroyComponent;
+
     return {
       show(element, model, onChange) {
-        const { vNode } = mount(
+        const { vNode, destroy } = mount(
           {
             el: element,
             components: {
@@ -122,8 +124,12 @@ export default function () {
             element
           }
         );
+        destroyComponent = destroy;
 
         return vNode;
+      },
+      destroy() {
+        destroyComponent();
       }
     };
   }

src/plugins/clearData/plugin.js

@@ -30,7 +30,7 @@ export default function plugin(appliesToObjects, options = { indicator: true })
 
   return function install(openmct) {
     if (installIndicator) {
-      const { vNode } = mount(
+      const { vNode, destroy } = mount(
         {
           components: {
             GlobalClearIndicator
@@ -49,7 +49,8 @@ export default function plugin(appliesToObjects, options = { indicator: true })
       let indicator = {
         element: vNode.el,
         key: 'global-clear-indicator',
-        priority: openmct.priority.DEFAULT
+        priority: openmct.priority.DEFAULT,
+        destroy: destroy
       };
 
       openmct.indicators.add(indicator);

src/plugins/gauge/GaugePlugin.js

@@ -167,9 +167,11 @@ export default function () {
   };
 
   function getGaugeFormController(openmct) {
+    let destroyComponent;
+
     return {
       show(element, model, onChange) {
-        const { vNode } = mount(
+        const { vNode, destroy } = mount(
           {
             el: element,
             components: {
@@ -191,8 +193,12 @@ export default function () {
             element
           }
         );
+        destroyComponent = destroy;
 
         return vNode.componentInstance;
+      },
+      destroy() {
+        destroyComponent();
       }
     };
   }

src/plugins/imagery/components/ImageryTimeView.vue

@@ -98,6 +98,9 @@ export default {
     if (this.unlisten) {
       this.unlisten();
     }
+    if (this.destroyImageryContainer) {
+      this.destroyImageryContainer();
+    }
   },
   methods: {
     setTimeContext() {
@@ -237,7 +240,10 @@ export default {
         imageryContainer = existingContainer;
         imageryContainer.style.maxWidth = `${containerWidth}px`;
       } else {
-        const { vNode } = mount(
+        if (this.destroyImageryContainer) {
+          this.destroyImageryContainer();
+        }
+        const { vNode, destroy } = mount(
           {
             components: {
               SwimLane
@@ -257,6 +263,7 @@ export default {
           }
         );
 
+        this.destroyImageryContainer = destroy;
         const component = vNode.componentInstance;
         this.$refs.imageryHolder.appendChild(component.$el);
 

src/plugins/notebook/components/NotebookSnapshotIndicator.vue

@@ -90,7 +90,10 @@ export default {
       drawerElement.innerHTML = '<div></div>';
       const divElement = document.querySelector('.l-shell__drawer div');
 
-      mount(
+      if (this.destroySnapshotContainer) {
+        this.destroySnapshotContainer();
+      }
+      const { destroy } = mount(
         {
           el: divElement,
           components: {
@@ -113,6 +116,7 @@ export default {
           element: divElement
         }
       );
+      this.destroySnapshotContainer = destroy;
     },
     updateSnapshotIndicatorTitle() {
       const snapshotCount = this.snapshotContainer.getSnapshots().length;

src/plugins/notebook/plugin.js

@@ -83,7 +83,7 @@ function installBaseNotebookFunctionality(openmct) {
   openmct.actions.register(new CopyToNotebookAction(openmct));
   openmct.actions.register(new ExportNotebookAsTextAction(openmct));
 
-  const { vNode } = mount(
+  const { vNode, destroy } = mount(
     {
       components: {
         NotebookSnapshotIndicator
@@ -102,7 +102,8 @@ function installBaseNotebookFunctionality(openmct) {
   const indicator = {
     element: vNode.el,
     key: 'notebook-snapshot-indicator',
-    priority: openmct.priority.DEFAULT
+    priority: openmct.priority.DEFAULT,
+    destroy: destroy
   };
 
   openmct.indicators.add(indicator);

src/plugins/notificationIndicator/plugin.js

@@ -24,7 +24,7 @@ import NotificationIndicator from './components/NotificationIndicator.vue';
 
 export default function plugin() {
   return function install(openmct) {
-    const { vNode } = mount(
+    const { vNode, destroy } = mount(
       {
         components: {
           NotificationIndicator
@@ -42,7 +42,8 @@ export default function plugin() {
     let indicator = {
       key: 'notifications-indicator',
       element: vNode.el,
-      priority: openmct.priority.DEFAULT
+      priority: openmct.priority.DEFAULT,
+      destroy: destroy
     };
     openmct.indicators.add(indicator);
   };

src/plugins/plot/stackedPlot/StackedPlotItem.vue

@@ -197,7 +197,7 @@ export default {
         this.composition.load();
       }
 
-      const { vNode } = mount(
+      const { vNode, destroy } = mount(
         {
           components: {
             Plot
@@ -249,6 +249,7 @@ export default {
         }
       );
       this.component = vNode.componentInstance;
+      this._destroy = destroy;
 
       if (this.isEditing) {
         this.setSelection();

src/plugins/userIndicator/plugin.js

@@ -25,7 +25,7 @@ import UserIndicator from './components/UserIndicator.vue';
 
 export default function UserIndicatorPlugin() {
   function addIndicator(openmct) {
-    const { vNode } = mount(
+    const { vNode, destroy } = mount(
       {
         components: {
           UserIndicator
@@ -43,7 +43,8 @@ export default function UserIndicatorPlugin() {
     openmct.indicators.add({
       key: 'user-indicator',
       element: vNode.el,
-      priority: openmct.priority.HIGH
+      priority: openmct.priority.HIGH,
+      destroy: destroy
     });
   }