View Large overlay doesn't allow taking Snapshots (#4091)

* Added NotebookMenuSwitcher in preview header
* Use preview component inside viewLargeAction
* Added autoHide flag to overlay API that allows developers to specify whether an overlay should remain visible if other overlays are subsequently triggered (eg. the snapshot overlay)
* When in edit mode, disable navigation link to notebook entry.

Co-authored-by: Andrew Henry <akhenry@gmail.com>

src/api/objects/ObjectAPI.js

@@ -358,6 +358,20 @@ ObjectAPI.prototype.applyGetInterceptors = function (identifier, domainObject) {
     return domainObject;
 };
 
+/**
+ * Return relative url path from a given object path
+ * eg: #/browse/mine/cb56f6bf-c900-43b7-b923-2e3b64b412db/6e89e858-77ce-46e4-a1ad-749240286497/....
+ * @param {Array} objectPath
+ * @returns {string} relative url for object
+ */
+ObjectAPI.prototype.getRelativePath = function (objectPath) {
+    return objectPath
+        .map(p => this.makeKeyString(p.identifier))
+        .reverse()
+        .join('/')
+    ;
+};
+
 /**
  * Modify a domain object.
  * @param {module:openmct.DomainObject} object the object to mutate

src/api/overlays/Overlay.js

@@ -10,28 +10,37 @@ const cssClasses = {
 };
 
 class Overlay extends EventEmitter {
-    constructor(options) {
+    constructor({
+        buttons,
+        autoHide = true,
+        dismissable = true,
+        element,
+        onDestroy,
+        size
+    } = {}) {
         super();
 
-        this.dismissable = options.dismissable !== false;
         this.container = document.createElement('div');
-        this.container.classList.add('l-overlay-wrapper', cssClasses[options.size]);
+        this.container.classList.add('l-overlay-wrapper', cssClasses[size]);
+
+        this.autoHide = autoHide;
+        this.dismissable = dismissable !== false;
 
         this.component = new Vue({
-            provide: {
-                dismiss: this.dismiss.bind(this),
-                element: options.element,
-                buttons: options.buttons,
-                dismissable: this.dismissable
-            },
             components: {
                 OverlayComponent: OverlayComponent
             },
+            provide: {
+                dismiss: this.dismiss.bind(this),
+                element,
+                buttons,
+                dismissable: this.dismissable
+            },
             template: '<overlay-component></overlay-component>'
         });
 
-        if (options.onDestroy) {
+        if (onDestroy) {
-            this.once('destroy', options.onDestroy);
+            this.once('destroy', onDestroy);
         }
     }
 

src/api/overlays/OverlayAPI.js

@@ -30,7 +30,10 @@ class OverlayAPI {
      */
     showOverlay(overlay) {
         if (this.activeOverlays.length) {
-            this.activeOverlays[this.activeOverlays.length - 1].container.classList.add('invisible');
+            const previousOverlay = this.activeOverlays[this.activeOverlays.length - 1];
+            if (previousOverlay.autoHide) {
+                previousOverlay.container.classList.add('invisible');
+            }
         }
 
         this.activeOverlays.push(overlay);

src/exporters/ImageExporter.js

@@ -90,7 +90,7 @@ class ImageExporter {
                 element.id = oldId;
             },
             removeContainer: true // Set to false to debug what html2canvas renders
-        }).then(function (canvas) {
+        }).then(canvas => {
             dialog.dismiss();
 
             return new Promise(function (resolve, reject) {
@@ -105,9 +105,10 @@ class ImageExporter {
 
                 return canvas.toBlob(blob => resolve({ blob }), mimeType);
             });
-        }, function (error) {
+        }).catch(error => {
-            console.log('error capturing image', error);
             dialog.dismiss();
+
+            console.error('error capturing image', error);
             const errorDialog = overlays.dialog({
                 iconClass: 'error',
                 message: 'Image was not captured successfully!',

src/plugins/condition/components/inspector/ConditionalStylesView.vue

@@ -273,10 +273,7 @@ export default {
             this.openmct.objects.getOriginalPath(this.conditionSetDomainObject.identifier).then(
                 (objectPath) => {
                     this.objectPath = objectPath;
-                    this.navigateToPath = '#/browse/' + this.objectPath
+                    this.navigateToPath = '#/browse/' + this.openmct.objects.getRelativePath(this.objectPath);
-                        .map(o => o && this.openmct.objects.makeKeyString(o.identifier))
-                        .reverse()
-                        .join('/');
                 }
             );
         },

src/plugins/condition/components/inspector/StylesView.vue

@@ -297,10 +297,7 @@ export default {
             this.openmct.objects.getOriginalPath(this.conditionSetDomainObject.identifier).then(
                 (objectPath) => {
                     this.objectPath = objectPath;
-                    this.navigateToPath = '#/browse/' + this.objectPath
+                    this.navigateToPath = '#/browse/' + this.openmct.objects.getRelativePath(this.objectPath);
-                        .map(o => o && this.openmct.objects.makeKeyString(o.identifier))
-                        .reverse()
-                        .join('/');
                 }
             );
         },

src/plugins/notebook/components/Notebook.vue

@@ -456,12 +456,9 @@ export default {
                 : undefined;
         },
         getDefaultNotebookObject() {
-            const oldNotebookStorage = getDefaultNotebook();
+            const defaultNotebook = getDefaultNotebook();
-            if (!oldNotebookStorage) {
-                return null;
-            }
 
-            return this.openmct.objects.get(oldNotebookStorage.identifier);
+            return defaultNotebook && this.openmct.objects.get(defaultNotebook.identifier);
         },
         getLinktoNotebook() {
             const objectPath = this.openmct.router.path;

src/plugins/notebook/components/NotebookMenuSwitcher.vue

@@ -17,19 +17,26 @@
 
 <script>
 import Snapshot from '../snapshot';
-import { getDefaultNotebook, getNotebookSectionAndPage, validateNotebookStorageObject } from '../utils/notebook-storage';
+import { getDefaultNotebook, validateNotebookStorageObject } from '../utils/notebook-storage';
 import { NOTEBOOK_DEFAULT, NOTEBOOK_SNAPSHOT } from '../notebook-constants';
+import { getMenuItems } from '../utils/notebook-snapshot-menu';
 
 export default {
     inject: ['openmct'],
     props: {
+        currentView: {
+            type: Object,
+            default() {
+                return {};
+            }
+        },
         domainObject: {
             type: Object,
             default() {
                 return {};
             }
         },
-        ignoreLink: {
+        isPreview: {
             type: Boolean,
             default() {
                 return false;
@@ -50,51 +57,40 @@ export default {
     },
     mounted() {
         validateNotebookStorageObject();
-        this.getDefaultNotebookObject();
 
         this.notebookSnapshot = new Snapshot(this.openmct);
         this.setDefaultNotebookStatus();
     },
     methods: {
-        getDefaultNotebookObject() {
+        getPreviewObjectLink() {
-            const defaultNotebook = getDefaultNotebook();
+            const relativePath = this.openmct.objects.getRelativePath(this.objectPath);
+            const urlParams = this.openmct.router.getParams();
+            urlParams.view = this.currentView.key;
 
-            return defaultNotebook && this.openmct.objects.get(defaultNotebook.identifier);
+            const urlParamsString = Object.entries(urlParams)
+                .map(([key, value]) => `${key}=${value}`)
+                .join('&');
+
+            return `#/browse/${relativePath}?${urlParamsString}`;
         },
         async showMenu(event) {
-            const notebookTypes = [];
+            const menuItemOptions = {
+                default: {
+                    cssClass: 'icon-notebook',
+                    name: `Save to Notebook`,
+                    onItemClicked: () => this.snapshot(NOTEBOOK_DEFAULT, event.target)
+                },
+                snapshot: {
+                    cssClass: 'icon-camera',
+                    name: 'Save to Notebook Snapshots',
+                    onItemClicked: () => this.snapshot(NOTEBOOK_SNAPSHOT, event.target)
+                }
+            };
+
+            const notebookTypes = await getMenuItems(this.openmct, menuItemOptions);
             const elementBoundingClientRect = this.$el.getBoundingClientRect();
             const x = elementBoundingClientRect.x;
             const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
-
-            const defaultNotebookObject = await this.getDefaultNotebookObject();
-            if (defaultNotebookObject) {
-                const defaultNotebook = getDefaultNotebook();
-                const { section, page } = getNotebookSectionAndPage(defaultNotebookObject, defaultNotebook.defaultSectionId, defaultNotebook.defaultPageId);
-                if (section && page) {
-                    const name = defaultNotebookObject.name;
-                    const sectionName = section.name;
-                    const pageName = page.name;
-                    const defaultPath = `${name} - ${sectionName} - ${pageName}`;
-
-                    notebookTypes.push({
-                        cssClass: 'icon-notebook',
-                        name: `Save to Notebook ${defaultPath}`,
-                        onItemClicked: () => {
-                            return this.snapshot(NOTEBOOK_DEFAULT, event.target);
-                        }
-                    });
-                }
-            }
-
-            notebookTypes.push({
-                cssClass: 'icon-camera',
-                name: 'Save to Notebook Snapshots',
-                onItemClicked: () => {
-                    return this.snapshot(NOTEBOOK_SNAPSHOT, event.target);
-                }
-            });
-
             this.openmct.menus.showMenu(x, y, notebookTypes);
         },
         snapshot(notebookType, target) {
@@ -102,15 +98,12 @@ export default {
                 const wrapper = target && target.closest('.js-notebook-snapshot-item-wrapper')
                     || document;
                 const element = wrapper.querySelector('.js-notebook-snapshot-item');
-
-                const bounds = this.openmct.time.bounds();
-                const link = !this.ignoreLink
-                    ? window.location.hash
-                    : null;
-
                 const objectPath = this.objectPath || this.openmct.router.path;
+                const link = this.isPreview
+                    ? this.getPreviewObjectLink()
+                    : window.location.hash;
                 const snapshotMeta = {
-                    bounds,
+                    bounds: this.openmct.time.bounds(),
                     link,
                     objectPath,
                     openmct: this.openmct

src/plugins/notebook/snapshot.js

@@ -90,13 +90,16 @@ export default class Snapshot {
 
     _showNotification(msg, url) {
         const options = {
-            autoDismissTimeout: 30000,
+            autoDismissTimeout: 30000
-            link: {
+        };
+
+        if (!this.openmct.editor.isEditing()) {
+            options.link = {
                 cssClass: '',
                 text: 'click to view',
                 onClick: this._navigateToNotebook(url)
-            }
+            };
-        };
+        }
 
         this.openmct.notifications.info(msg, options);
     }

src/plugins/notebook/utils/notebook-snapshot-menu.js

@@ -0,0 +1,31 @@
+import { getDefaultNotebook, getNotebookSectionAndPage } from './notebook-storage';
+
+export async function getMenuItems(openmct, menuItemOptions) {
+    const notebookTypes = [];
+
+    const defaultNotebook = getDefaultNotebook();
+    const defaultNotebookObject = defaultNotebook && await openmct.objects.get(defaultNotebook.identifier);
+    if (defaultNotebookObject) {
+        const { section, page } = getNotebookSectionAndPage(defaultNotebookObject, defaultNotebook.defaultSectionId, defaultNotebook.defaultPageId);
+        if (section && page) {
+            const name = defaultNotebookObject.name;
+            const sectionName = section.name;
+            const pageName = page.name;
+            const defaultPath = `${name} - ${sectionName} - ${pageName}`;
+
+            notebookTypes.push({
+                cssClass: menuItemOptions.default.cssClass,
+                name: `${menuItemOptions.default.name} ${defaultPath}`,
+                onItemClicked: menuItemOptions.default.onItemClicked
+            });
+        }
+    }
+
+    notebookTypes.push({
+        cssClass: menuItemOptions.snapshot.cssClass,
+        name: menuItemOptions.snapshot.name,
+        onItemClicked: menuItemOptions.snapshot.onItemClicked
+    });
+
+    return notebookTypes;
+}

src/plugins/notebook/utils/notebook-storage.js

@@ -71,11 +71,7 @@ export async function getDefaultNotebookLink(openmct, domainObject = null) {
     }
 
     const path = await openmct.objects.getOriginalPath(domainObject.identifier)
-        .then(objectPath => objectPath
+        .then(openmct.objects.getRelativePath);
-            .map(o => o && openmct.objects.makeKeyString(o.identifier))
-            .reverse()
-            .join('/')
-        );
     const { defaultPageId, defaultSectionId } = getDefaultNotebook();
 
     return `#/browse/${path}?sectionId=${defaultSectionId}&pageId=${defaultPageId}`;

src/plugins/viewLargeAction/viewLargeAction.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import PreviewHeader from '@/ui/preview/preview-header.vue';
+import Preview from '@/ui/preview/Preview.vue';
 
 import Vue from 'vue';
 
@@ -46,7 +46,7 @@ export default class ViewLargeAction {
             throw new Error(message);
         }
 
-        this._expand(objectPath, childElement, view);
+        this._expand(objectPath, childElement);
     }
 
     appliesTo(objectPath, view = {}) {
@@ -58,49 +58,29 @@ export default class ViewLargeAction {
         return viewLargeAction;
     }
 
-    _expand(objectPath, childElement, view) {
+    _expand(objectPath, childElement) {
         const parentElement = childElement.parentElement;
 
         this.overlay = this.openmct.overlays.overlay({
-            element: this._getOverlayElement(objectPath, childElement, view),
+            element: this._getPreview(objectPath),
             size: 'large',
+            autoHide: false,
             onDestroy() {
                 parentElement.append(childElement);
             }
         });
     }
 
-    _getOverlayElement(objectPath, childElement, view) {
+    _getPreview(objectPath) {
-        const fragment = new DocumentFragment();
-        const header = this._getPreviewHeader(objectPath, view);
-        fragment.append(header);
-
-        const wrapper = document.createElement('div');
-        wrapper.classList.add('l-preview-window__object-view');
-        wrapper.append(childElement);
-        fragment.append(wrapper);
-
-        return fragment;
-    }
-
-    _getPreviewHeader(objectPath, view) {
-        const domainObject = objectPath[0];
-        const actionCollection = this.openmct.actions.getActionsCollection(objectPath, view);
         const preview = new Vue({
             components: {
-                PreviewHeader
+                Preview
             },
             provide: {
                 openmct: this.openmct,
-                objectPath: this.objectPath
+                objectPath
             },
-            data() {
+            template: '<Preview></Preview>'
-                return {
-                    domainObject,
-                    actionCollection
-                };
-            },
-            template: '<PreviewHeader :actionCollection="actionCollection" :domainObject="domainObject" :hideViewSwitcher="true" :showNotebookMenuSwitcher="true"></PreviewHeader>'
         });
 
         return preview.$mount().$el;

src/tools/url.js

@@ -39,13 +39,7 @@ export function paramsToArray(openmct) {
 }
 
 export function identifierToString(openmct, objectPath) {
-    let identifier = '#/browse/' + objectPath.map(function (o) {
+    return '#/browse/' + openmct.objects.getRelativePath(objectPath);
-        return o && openmct.objects.makeKeyString(o.identifier);
-    })
-        .reverse()
-        .join('/');
-
-    return identifier;
 }
 
 export default function objectPathToUrl(openmct, objectPath) {

src/ui/preview/Preview.vue

@@ -59,12 +59,13 @@ export default {
     },
     mounted() {
         this.views = this.openmct.objectViews.get(this.domainObject, this.objectPath).map((view) => {
-            view.callBack = () => {
+            view.onItemClicked = () => {
                 return this.setView(view);
             };
 
             return view;
         });
+
         this.setView(this.views[0]);
     },
     beforeDestroy() {

src/ui/preview/PreviewAction.js

@@ -60,6 +60,7 @@ export default class PreviewAction {
         let overlay = this._openmct.overlays.overlay({
             element: preview.$el,
             size: 'large',
+            autoHide: false,
             buttons: [
                 {
                     label: 'Done',

src/ui/preview/preview-header.vue

@@ -18,6 +18,12 @@
             :views="views"
             :current-view="currentView"
         />
+        <NotebookMenuSwitcher :domain-object="domainObject"
+                              :object-path="objectPath"
+                              :is-preview="true"
+                              :current-view="currentView"
+                              class="c-notebook-snapshot-menubutton"
+        />
         <div class="l-browse-bar__actions">
             <button
                 v-for="(item, index) in statusBarItems"
@@ -38,7 +44,9 @@
 </template>
 
 <script>
+import NotebookMenuSwitcher from '@/plugins/notebook/components/NotebookMenuSwitcher.vue';
 import ViewSwitcher from '../../ui/layout/ViewSwitcher.vue';
+
 const HIDDEN_ACTIONS = [
     'remove',
     'move',
@@ -48,10 +56,12 @@ const HIDDEN_ACTIONS = [
 
 export default {
     components: {
+        NotebookMenuSwitcher,
         ViewSwitcher
     },
     inject: [
-        'openmct'
+        'openmct',
+        'objectPath'
     ],
     props: {
         currentView: {
@@ -143,6 +153,7 @@ export default {
         showMenuItems(event) {
             let sortedActions = this.openmct.actions._groupAndSortActions(this.menuActionItems);
             const menuItems = this.openmct.menus.actionsToMenuItems(sortedActions, this.actionCollection.objectPath, this.actionCollection.view);
+
             const visibleMenuItems = this.filterHiddenItems(menuItems);
             this.openmct.menus.showMenu(event.x, event.y, visibleMenuItems);
         }