For an existing View in a Preview, ensure we pull the same ActionCollection (#7632)

* ensure action collection returned is the cached one from the same view

* add test

* use async await

e2e/tests/functional/plugins/telemetryTable/preview.e2e.spec.js

@@ -69,5 +69,9 @@ test.describe('Preview mode', () => {
     await page.getByLabel('Overlay').getByLabel('More actions').click();
     await expect(page.getByLabel('Export Table Data')).toBeVisible();
     await expect(page.getByLabel('Export Marked Rows')).toBeVisible();
+    await expect(page.getByLabel('Export Marked Rows')).toBeDisabled();
+    await page.getByLabel('Pause').click();
+    const tableWrapper = page.getByLabel('Preview Container').locator('div.c-table-wrapper');
+    await expect(tableWrapper).toHaveClass(/is-paused/);
   });
 });

src/ui/preview/PreviewContainer.vue

@@ -23,8 +23,7 @@
   <div role="dialog" aria-label="Preview Container" class="l-preview-window js-preview-window">
     <PreviewHeader
       ref="previewHeader"
-      :current-view="currentViewProvider"
-      :action-collection="actionCollection"
+      :current-view="view"
       :domain-object="domainObject"
       :views="viewProviders"
     />
@@ -35,8 +34,6 @@
 </template>
 
 <script>
-import { nextTick } from 'vue';
-
 import StyleRuleManager from '@/plugins/condition/StyleRuleManager';
 import { STYLE_CONSTANTS } from '@/plugins/condition/utils/constants';
 
@@ -66,10 +63,10 @@ export default {
 
     return {
       domainObject: domainObject,
-      viewKey: undefined,
+      viewKey: null,
+      view: null,
       viewProviders: [],
       currentViewProvider: {},
-      actionCollection: undefined,
       existingViewIndex: 0
     };
   },
@@ -96,10 +93,6 @@ export default {
       this.styleRuleManager.destroy();
       delete this.styleRuleManager;
     }
-
-    if (this.actionCollection) {
-      this.actionCollection.destroy();
-    }
   },
   unmounted() {
     if (!this.existingView) {
@@ -157,10 +150,6 @@ export default {
       }
 
       this.initObjectStyles();
-
-      nextTick(() => {
-        this.getActionsCollection(this.view);
-      });
     },
     addExistingViewBackToParent() {
       this.existingView.parentElement.appendChild(this.existingViewElement);
@@ -169,13 +158,6 @@ export default {
     initializeViewContainer() {
       this.viewContainer = this.$refs.objectView;
     },
-    getActionsCollection(view) {
-      if (this.actionCollection) {
-        this.actionCollection.destroy();
-      }
-
-      this.actionCollection = this.openmct.actions.getActionsCollection(this.objectPath, view);
-    },
     initObjectStyles() {
       if (!this.styleRuleManager) {
         this.styleRuleManager = new StyleRuleManager(

src/ui/preview/PreviewHeader.vue

@@ -58,6 +58,8 @@
 </template>
 
 <script>
+import { nextTick, toRaw } from 'vue';
+
 import NotebookMenuSwitcher from '@/plugins/notebook/components/NotebookMenuSwitcher.vue';
 
 import ViewSwitcher from '../layout/ViewSwitcher.vue';
@@ -94,12 +96,6 @@ export default {
       default: () => {
         return [];
       }
-    },
-    actionCollection: {
-      type: Object,
-      default: () => {
-        return undefined;
-      }
     }
   },
   emits: ['set-view'],
@@ -111,17 +107,18 @@ export default {
     };
   },
   watch: {
-    actionCollection(actionCollection) {
+    async currentView() {
+      // wait for view to render with next tick
+      await nextTick();
       if (this.actionCollection) {
         this.unlistenToActionCollection();
       }
 
-      this.actionCollection.on('update', this.updateActionItems);
-      this.updateActionItems(this.actionCollection.getActionsObject());
-    }
-  },
-  mounted() {
-    if (this.actionCollection) {
+      this.actionCollection = this.openmct.actions.getActionsCollection(
+        toRaw(this.objectPath),
+        toRaw(this.currentView)
+      );
+
       this.actionCollection.on('update', this.updateActionItems);
       this.updateActionItems(this.actionCollection.getActionsObject());
     }