Notebook saved link (#2998)

* https://github.com/nasa/openmct/issues/2859

* create and store link to default notebook in storage and pass it to notification.

* [Notebook] Add link to notebook inside 'Saved to Notebook' notification #2860

* Added custom autoDismissTimeout for into notifications.

* Backwards compatibility fix for old notebook model without link in metadata.

* lint fixes

* added JS Doc description for API changes + changed property names to appropriate function.

* fixed bug due to merging.

* fixed url update loop

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

src/plugins/notebook/components/Notebook.vue

@@ -115,6 +115,7 @@ import { addNotebookEntry, createNewEmbed, getNotebookEntries, mutateObject } fr
 import objectUtils from 'objectUtils';
 
 import { throttle } from 'lodash';
+import objectLink from '../../../ui/mixins/object-link';
 
 export default {
     components: {
@@ -182,7 +183,9 @@ export default {
     mounted() {
         this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
         this.formatSidebar();
+
         window.addEventListener('orientationchange', this.formatSidebar);
+        window.addEventListener("hashchange", this.navigateToSectionPage, false);
 
         this.navigateToSectionPage();
     },
@@ -190,6 +193,9 @@ export default {
         if (this.unlisten) {
             this.unlisten();
         }
+
+        window.removeEventListener('orientationchange', this.formatSidebar);
+        window.removeEventListener("hashchange", this.navigateToSectionPage);
     },
     updated: function () {
         this.$nextTick(() => {
@@ -225,15 +231,17 @@ export default {
         },
         createNotebookStorageObject() {
             const notebookMeta = {
-                identifier: this.internalDomainObject.identifier
+                name: this.internalDomainObject.name,
+                identifier: this.internalDomainObject.identifier,
+                link: this.getLinktoNotebook()
             };
             const page = this.getSelectedPage();
             const section = this.getSelectedSection();
 
             return {
                 notebookMeta,
-                section,
-                page
+                page,
+                section
             };
         },
         dragOver(event) {
@@ -309,6 +317,20 @@ export default {
 
             return this.openmct.objects.get(oldNotebookStorage.notebookMeta.identifier);
         },
+        getLinktoNotebook() {
+            const objectPath = this.openmct.router.path;
+            const link = objectLink.computed.objectLink.call({
+                objectPath,
+                openmct: this.openmct
+            });
+
+            const selectedSection = this.selectedSection;
+            const selectedPage = this.selectedPage;
+            const sectionId = selectedSection ? selectedSection.id : '';
+            const pageId = selectedPage ? selectedPage.id : '';
+
+            return `${link}?sectionId=${sectionId}&pageId=${pageId}`;
+        },
         getPage(section, id) {
             return section.pages.find(p => p.id === id);
         },
@@ -393,6 +415,12 @@ export default {
                 return s;
             });
 
+            const selectedSectionId = this.selectedSection && this.selectedSection.id;
+            const selectedPageId = this.selectedPage && this.selectedPage.id;
+            if (selectedPageId === pageId && selectedSectionId === sectionId) {
+                return;
+            }
+
             this.sectionsChanged({ sections });
         },
         newEntry(embed = null) {

src/plugins/notebook/snapshot.js

@@ -1,5 +1,5 @@
 import { addNotebookEntry, createNewEmbed } from './utils/notebook-entries';
-import { getDefaultNotebook } from './utils/notebook-storage';
+import { getDefaultNotebook, getDefaultNotebookLink, setDefaultNotebook } from './utils/notebook-storage';
 import { NOTEBOOK_DEFAULT } from '@/plugins/notebook/notebook-constants';
 import SnapshotContainer from './snapshot-container';
 
@@ -45,12 +45,21 @@ export default class Snapshot {
     _saveToDefaultNoteBook(embed) {
         const notebookStorage = getDefaultNotebook();
         this.openmct.objects.get(notebookStorage.notebookMeta.identifier)
-            .then(domainObject => {
+            .then(async (domainObject) => {
                 addNotebookEntry(this.openmct, domainObject, notebookStorage, embed);
 
+                let link = notebookStorage.notebookMeta.link;
+
+                // Backwards compatibility fix (old notebook model without link)
+                if (!link) {
+                    link = await getDefaultNotebookLink(this.openmct, domainObject);
+                    notebookStorage.notebookMeta.link = link;
+                    setDefaultNotebook(this.openmct, notebookStorage);
+                }
+
                 const defaultPath = `${domainObject.name} - ${notebookStorage.section.name} - ${notebookStorage.page.name}`;
                 const msg = `Saved to Notebook ${defaultPath}`;
-                this._showNotification(msg);
+                this._showNotification(msg, link);
             });
     }
 
@@ -58,16 +67,29 @@ export default class Snapshot {
      * @private
      */
     _saveToNotebookSnapshots(embed) {
-        const saved = this.snapshotContainer.addSnapshot(embed);
-        if (!saved) {
-            return;
+        this.snapshotContainer.addSnapshot(embed);
+    }
+
+    _showNotification(msg, url) {
+        const options = {
+            autoDismissTimeout: 30000,
+            link: {
+                cssClass: '',
+                text: 'click to view',
+                onClick: this._navigateToNotebook(url)
+            }
+        };
+
+        this.openmct.notifications.info(msg, options);
+    }
+
+    _navigateToNotebook(url = null) {
+        if (!url) {
+            return () => {};
         }
 
-        const msg = 'Saved to Notebook Snapshots - click to view.';
-        this._showNotification(msg);
-    }
-
-    _showNotification(msg) {
-        this.openmct.notifications.info(msg);
+        return () => {
+            window.location.href = window.location.origin + url;
+        };
     }
 }

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

@@ -48,14 +48,29 @@ export function getDefaultNotebook() {
     return JSON.parse(notebookStorage);
 }
 
+export async function getDefaultNotebookLink(openmct, domainObject = null) {
+    if (!domainObject) {
+        return null;
+    }
+
+    const path = await openmct.objects.getOriginalPath(domainObject.identifier)
+        .then(objectPath => objectPath
+            .map(o => o && openmct.objects.makeKeyString(o.identifier))
+            .reverse()
+            .join('/')
+        );
+    const { page, section } = getDefaultNotebook();
+
+    return `#/browse/${path}?sectionId=${section.id}&pageId=${page.id}`;
+}
+
 export function setDefaultNotebook(openmct, notebookStorage, domainObject) {
-    observeDefaultNotebookObject(openmct, notebookStorage.notebookMeta, domainObject);
+    observeDefaultNotebookObject(openmct, notebookStorage, domainObject);
     saveDefaultNotebook(notebookStorage);
 }
 
 export function setDefaultNotebookSection(section) {
     const notebookStorage = getDefaultNotebook();
-
     notebookStorage.section = section;
     saveDefaultNotebook(notebookStorage);
 }