Revert "temp remove e2e-ci until percy fix (#5032)" (#5047)

This reverts commit 5b4ba7772a.

package.json

@@ -1,12 +1,12 @@
 {
   "name": "openmct",
-  "version": "2.0.2-SNAPSHOT",
+  "version": "2.0.2",
   "description": "The Open MCT core platform",
   "devDependencies": {
     "@babel/eslint-parser": "7.16.3",
     "@braintree/sanitize-url": "6.0.0",
-    "@percy/cli": "1.0.0-beta.76",
-    "@percy/playwright": "1.0.1",
+    "@percy/cli": "1.0.4",
+    "@percy/playwright": "1.0.2",
     "@playwright/test": "1.19.2",
     "@types/eventemitter3": "^1.0.0",
     "@types/jasmine": "^4.0.1",
@@ -18,7 +18,6 @@
     "babel-plugin-istanbul": "6.1.1",
     "comma-separated-values": "3.6.4",
     "copy-webpack-plugin": "10.2.0",
-    "core-js": "3.21.1",
     "cross-env": "7.0.3",
     "css-loader": "4.0.0",
     "d3-axis": "1.0.x",
@@ -112,6 +111,9 @@
   "engines": {
     "node": ">=14.19.1"
   },
+  "overrides": {
+    "core-js": "3.21.1"
+  },
   "browserslist": [
     "Firefox ESR",
     "not IE 11",

src/plugins/notebook/components/Notebook.vue

@@ -35,6 +35,8 @@
         ref="searchResults"
         :domain-object="domainObject"
         :results="searchResults"
+        @cancelEdit="cancelTransaction"
+        @editingEntry="startTransaction"
         @changeSectionPage="changeSelectedSection"
         @updateEntries="updateEntries"
     />
@@ -140,6 +142,8 @@
                     :selected-page="selectedPage"
                     :selected-section="selectedSection"
                     :read-only="false"
+                    @cancelEdit="cancelTransaction"
+                    @editingEntry="startTransaction"
                     @deleteEntry="deleteEntry"
                     @updateEntry="updateEntry"
                 />
@@ -710,6 +714,8 @@ export default {
             notebookEntries[this.selectedSection.id][this.selectedPage.id] = entries;
 
             mutateObject(this.openmct, this.domainObject, 'configuration.entries', notebookEntries);
+
+            this.saveTransaction();
         },
         getPageIdFromUrl() {
             return this.openmct.router.getParams().pageId;
@@ -746,6 +752,39 @@ export default {
             this.selectPage(pageId);
 
             this.syncUrlWithPageAndSection();
+        },
+        activeTransaction() {
+            return this.openmct.objects.getActiveTransaction();
+        },
+        startTransaction() {
+            if (!this.openmct.editor.isEditing()) {
+                this.openmct.objects.startTransaction();
+            }
+        },
+        saveTransaction() {
+            const transaction = this.activeTransaction();
+
+            if (!transaction || this.openmct.editor.isEditing()) {
+                return;
+            }
+
+            return transaction.commit()
+                .catch(error => {
+                    throw error;
+                }).finally(() => {
+                    this.openmct.objects.endTransaction();
+                });
+        },
+        cancelTransaction() {
+            if (!this.openmct.editor.isEditing()) {
+                const transaction = this.activeTransaction();
+                transaction.cancel()
+                    .catch(error => {
+                        throw error;
+                    }).finally(() => {
+                        this.openmct.objects.endTransaction();
+                    });
+            }
         }
     }
 };

src/plugins/notebook/components/NotebookEntry.vue

@@ -55,6 +55,7 @@
                     class="c-ne__text c-ne__input"
                     tabindex="0"
                     contenteditable
+                    @focus="editingEntry()"
                     @blur="updateEntryValue($event)"
                     @keydown.enter.exact.prevent
                     @keyup.enter.exact.prevent="forceBlur($event)"
@@ -284,11 +285,16 @@ export default {
 
             this.$emit('updateEntry', this.entry);
         },
+        editingEntry() {
+            this.$emit('editingEntry');
+        },
         updateEntryValue($event) {
             const value = $event.target.innerText;
             if (value !== this.entry.text && value.match(/\S/)) {
                 this.entry.text = value;
                 this.$emit('updateEntry', this.entry);
+            } else {
+                this.$emit('cancelEdit');
             }
         }
     }

src/plugins/notebook/components/SearchResults.vue

@@ -33,6 +33,8 @@
             :read-only="true"
             :selected-page="result.page"
             :selected-section="result.section"
+            @editingEntry="editingEntry"
+            @cancelEdit="cancelEdit"
             @changeSectionPage="changeSectionPage"
             @updateEntries="updateEntries"
         />
@@ -63,6 +65,12 @@ export default {
         }
     },
     methods: {
+        editingEntry() {
+            this.$emit('editingEntry');
+        },
+        cancelEdit() {
+            this.$emit('cancelEdit');
+        },
         changeSectionPage(data) {
             this.$emit('changeSectionPage', data);
         },

src/plugins/viewLargeAction/viewLargeAction.js

@@ -38,41 +38,41 @@ export default class ViewLargeAction {
     }
 
     invoke(objectPath, view) {
-        const parentElement = view.parentElement;
-        let childElement = parentElement && parentElement.firstChild;
+        performance.mark('viewlarge.start');
+        const childElement = view?.parentElement?.firstChild;
         if (!childElement) {
             const message = "ViewLargeAction: missing element";
             this.openmct.notifications.error(message);
             throw new Error(message);
         }
 
-        this._expand(objectPath, childElement);
+        this._expand(objectPath, view);
     }
 
-    appliesTo(objectPath, view = {}) {
-        const parentElement = view.parentElement;
-        const element = parentElement && parentElement.firstChild;
-        const viewLargeAction = element && !element.classList.contains('js-main-container')
+    appliesTo(objectPath, view) {
+        const childElement = view?.parentElement?.firstChild;
+
+        return childElement && !childElement.classList.contains('js-main-container')
             && !this.openmct.router.isNavigatedObject(objectPath);
-
-        return viewLargeAction;
     }
 
-    _expand(objectPath, childElement) {
-        const parentElement = childElement.parentElement;
+    _expand(objectPath, view) {
+        const element = this._getPreview(objectPath, view);
 
         this.overlay = this.openmct.overlays.overlay({
-            element: this._getPreview(objectPath),
+            element,
             size: 'large',
             autoHide: false,
-            onDestroy() {
-                parentElement.append(childElement);
+            onDestroy: () => {
+                this.preview.$destroy();
+                this.preview = undefined;
+                delete this.preview;
             }
         });
     }
 
-    _getPreview(objectPath) {
-        const preview = new Vue({
+    _getPreview(objectPath, view) {
+        this.preview = new Vue({
             components: {
                 Preview
             },
@@ -80,9 +80,14 @@ export default class ViewLargeAction {
                 openmct: this.openmct,
                 objectPath
             },
-            template: '<Preview></Preview>'
+            data() {
+                return {
+                    view
+                };
+            },
+            template: '<Preview :existing-view="view"></Preview>'
         });
 
-        return preview.$mount().$el;
+        return this.preview.$mount().$el;
     }
 }

src/ui/preview/Preview.vue

@@ -22,10 +22,10 @@
 <template>
 <div class="l-preview-window js-preview-window">
     <PreviewHeader
-        :current-view="currentView"
+        :current-view="currentViewProvider"
         :action-collection="actionCollection"
         :domain-object="domainObject"
-        :views="views"
+        :views="viewProviders"
     />
     <div class="l-preview-window__object-view js-notebook-snapshot-item">
         <div ref="objectView"></div>
@@ -52,6 +52,12 @@ export default {
             default() {
                 return undefined;
             }
+        },
+        existingView: {
+            type: Object,
+            default() {
+                return undefined;
+            }
         }
     },
     data() {
@@ -60,21 +66,25 @@ export default {
         return {
             domainObject: domainObject,
             viewKey: undefined,
-            views: [],
-            currentView: {},
-            actionCollection: undefined
+            viewProviders: [],
+            currentViewProvider: {},
+            actionCollection: undefined,
+            existingViewIndex: 0
         };
     },
     mounted() {
-        this.views = this.openmct.objectViews.get(this.domainObject, this.objectPath).map((view) => {
-            view.onItemClicked = () => {
-                return this.setView(view);
-            };
+        this.viewProviders = this.openmct.objectViews.get(this.domainObject, this.objectPath);
+        this.viewProviders.forEach((provider, index) => {
+            provider.onItemClicked = () => {
+                if (this.existingView && provider.key === this.existingView.key) {
+                    this.existingViewIndex = index;
+                }
 
-            return view;
+                this.setView(provider);
+            };
         });
 
-        this.setView(this.views[0]);
+        this.setView(this.viewProviders[0]);
     },
     beforeDestroy() {
         if (this.stopListeningStyles) {
@@ -91,41 +101,74 @@ export default {
         }
     },
     destroyed() {
-        this.view.destroy();
+        if (!this.existingView) {
+            this.view.destroy();
+        } else if (this.existingViewElement) {
+            // if the existing view element is populated, it's the currently viewed view
+            // in preview and we need to add it back to the parent.
+            this.addExistingViewBackToParent();
+        }
     },
     methods: {
         clear() {
             if (this.view) {
-                this.view.destroy();
-                this.$refs.objectView.innerHTML = '';
-            }
+                if (this.view !== this.existingView) {
+                    this.view.destroy();
+                } else {
+                    this.addExistingViewBackToParent();
+                }
 
-            delete this.view;
-            delete this.viewContainer;
+                this.$refs.objectView.innerHTML = '';
+                delete this.view;
+                delete this.viewContainer;
+            }
         },
-        setView(view) {
-            if (this.viewKey === view.key) {
+        setView(viewProvider) {
+            if (this.viewKey === viewProvider.key) {
                 return;
             }
 
+            const isExistingView = viewProvider.key === this.existingView.key;
+
             this.clear();
-            this.viewKey = view.key;
-            this.currentView = view;
+
+            this.viewKey = viewProvider.key;
+            this.initializeViewContainer();
+
+            if (isExistingView) {
+                this.view = this.existingView;
+                this.existingViewElement = this.existingView.parentElement.firstChild;
+                this.currentViewProvider = this.viewProviders[this.existingViewIndex];
+            } else {
+                this.currentViewProvider = viewProvider;
+                this.view = this.currentViewProvider.view(this.domainObject, this.objectPath);
+            }
+
+            this.getActionsCollection(this.view);
+
+            if (isExistingView) {
+                this.viewContainer.appendChild(this.existingViewElement);
+            } else {
+                this.view.show(this.viewContainer, false, this.viewOptions);
+            }
+
+            this.initObjectStyles();
+        },
+        addExistingViewBackToParent() {
+            this.existingView.parentElement.appendChild(this.existingViewElement);
+            delete this.existingViewElement;
+        },
+        initializeViewContainer() {
             this.viewContainer = document.createElement('div');
             this.viewContainer.classList.add('l-angular-ov-wrapper');
             this.$refs.objectView.append(this.viewContainer);
-            this.view = this.currentView.view(this.domainObject, this.objectPath);
-
-            this.getActionsCollection();
-            this.view.show(this.viewContainer, false, this.viewOptions);
-            this.initObjectStyles();
         },
-        getActionsCollection() {
+        getActionsCollection(view) {
             if (this.actionCollection) {
                 this.actionCollection.destroy();
             }
 
-            this.actionCollection = this.openmct.actions.getActionsCollection(this.objectPath, this.view);
+            this.actionCollection = this.openmct.actions.getActionsCollection(this.objectPath, view);
         },
         initObjectStyles() {
             if (!this.styleRuleManager) {

src/ui/registries/ViewRegistry.js

@@ -90,6 +90,7 @@ define(['EventEmitter'], function (EventEmitter) {
         provider.view = (domainObject, objectPath) => {
             const viewObject = wrappedView(domainObject, objectPath);
             const wrappedShow = viewObject.show.bind(viewObject);
+            viewObject.key = key; // provide access to provider key on view object
             viewObject.show = (element, isEditing, viewOptions) => {
                 viewObject.parentElement = element.parentElement;
                 wrappedShow(element, isEditing, viewOptions);