Snapshot images should use the namespace of the notebook they are being saved to or LocalStorage (#4020)

* Snapshot images should use the namespace of the notebook they are being saved to, or LocalStorage #4007

Co-authored-by: Shefali Joshi <simplyrender@gmail.com>

src/plugins/notebook/components/Notebook.vue

@@ -140,6 +140,7 @@ import SearchResults from './SearchResults.vue';
 import Sidebar from './Sidebar.vue';
 import { clearDefaultNotebook, getDefaultNotebook, setDefaultNotebook, setDefaultNotebookSectionId, setDefaultNotebookPageId } from '../utils/notebook-storage';
 import { addNotebookEntry, createNewEmbed, getEntryPosById, getNotebookEntries, mutateObject } from '../utils/notebook-entries';
+import { saveNotebookImageDomainObject, updateNamespaceOfDomainObject } from '../utils/notebook-image';
 import { NOTEBOOK_VIEW_TYPE } from '../notebook-constants';
 import objectUtils from 'objectUtils';
 
@@ -385,9 +386,13 @@ export default {
             const snapshotId = event.dataTransfer.getData('openmct/snapshot/id');
             if (snapshotId.length) {
                 const snapshot = this.snapshotContainer.getSnapshot(snapshotId);
-                this.newEntry(snapshot);
+                this.newEntry(snapshot.embedObject);
                 this.snapshotContainer.removeSnapshot(snapshotId);
 
+                const namespace = this.domainObject.identifier.namespace;
+                const notebookImageDomainObject = updateNamespaceOfDomainObject(snapshot.notebookImageDomainObject, namespace);
+                saveNotebookImageDomainObject(this.openmct, notebookImageDomainObject);
+
                 return;
             }
 

src/plugins/notebook/components/NotebookEmbed.vue

@@ -40,7 +40,7 @@ export default {
     components: {
         PopupMenu
     },
-    inject: ['openmct'],
+    inject: ['openmct', 'snapshotContainer'],
     props: {
         embed: {
             type: Object,
@@ -48,6 +48,12 @@ export default {
                 return {};
             }
         },
+        isSnapshotContainer: {
+            type: Boolean,
+            default() {
+                return false;
+            }
+        },
         removeActionString: {
             type: String,
             default() {
@@ -135,6 +141,14 @@ export default {
                 return;
             }
 
+            if (this.isSnapshotContainer) {
+                const snapshot = this.snapshotContainer.getSnapshot(this.embed.id);
+                const fullSizeImageURL = snapshot.notebookImageDomainObject.configuration.fullSizeImageURL;
+                painterroInstance.show(fullSizeImageURL);
+
+                return;
+            }
+
             this.openmct.objects.get(fullSizeImageObjectIdentifier)
                 .then(object => {
                     painterroInstance.show(object.configuration.fullSizeImageURL);
@@ -190,6 +204,14 @@ export default {
                 return;
             }
 
+            if (this.isSnapshotContainer) {
+                const snapshot = this.snapshotContainer.getSnapshot(this.embed.id);
+                const fullSizeImageURL = snapshot.notebookImageDomainObject.configuration.fullSizeImageURL;
+                this.openSnapshotOverlay(fullSizeImageURL);
+
+                return;
+            }
+
             this.openmct.objects.get(fullSizeImageObjectIdentifier)
                 .then(object => {
                     this.openSnapshotOverlay(object.configuration.fullSizeImageURL);
@@ -259,8 +281,20 @@ export default {
         updateSnapshot(snapshotObject) {
             this.embed.snapshot.thumbnailImage = snapshotObject.thumbnailImage;
 
-            updateNotebookImageDomainObject(this.openmct, this.embed.snapshot.fullSizeImageObjectIdentifier, snapshotObject.fullSizeImage);
+            this.updateNotebookImageDomainObjectSnapshot(snapshotObject);
             this.updateEmbed(this.embed);
+        },
+        updateNotebookImageDomainObjectSnapshot(snapshotObject) {
+            if (this.isSnapshotContainer) {
+                const snapshot = this.snapshotContainer.getSnapshot(this.embed.id);
+
+                snapshot.embedObject.snapshot.thumbnailImage = snapshotObject.thumbnailImage;
+                snapshot.notebookImageDomainObject.configuration.fullSizeImageURL = snapshotObject.fullSizeImage.src;
+
+                this.snapshotContainer.updateSnapshot(snapshot);
+            } else {
+                updateNotebookImageDomainObject(this.openmct, this.embed.snapshot.fullSizeImageObjectIdentifier, snapshotObject.fullSizeImage);
+            }
         }
     }
 };

src/plugins/notebook/components/NotebookEntry.vue

@@ -102,9 +102,11 @@
 
 <script>
 import NotebookEmbed from './NotebookEmbed.vue';
-import { createNewEmbed } from '../utils/notebook-entries';
-import Moment from 'moment';
 import TextHighlight from '../../../utils/textHighlight/TextHighlight.vue';
+import { createNewEmbed } from '../utils/notebook-entries';
+import { saveNotebookImageDomainObject, updateNamespaceOfDomainObject } from '../utils/notebook-image';
+
+import Moment from 'moment';
 
 export default {
     components: {
@@ -210,8 +212,12 @@ export default {
             const snapshotId = $event.dataTransfer.getData('openmct/snapshot/id');
             if (snapshotId.length) {
                 const snapshot = this.snapshotContainer.getSnapshot(snapshotId);
+                this.entry.embeds.push(snapshot.embedObject);
                 this.snapshotContainer.removeSnapshot(snapshotId);
-                this.entry.embeds.push(snapshot);
+
+                const namespace = this.domainObject.identifier.namespace;
+                const notebookImageDomainObject = updateNamespaceOfDomainObject(snapshot.notebookImageDomainObject, namespace);
+                saveNotebookImageDomainObject(this.openmct, notebookImageDomainObject);
             } else {
                 const data = $event.dataTransfer.getData('openmct/domain-object-path');
                 const objectPath = JSON.parse(data);

src/plugins/notebook/components/NotebookSnapshotContainer.vue

@@ -27,15 +27,15 @@
     </div><!-- closes l-browse-bar -->
     <div class="c-snapshots">
         <span v-for="snapshot in snapshots"
-              :key="snapshot.id"
+              :key="snapshot.embedObject.id"
               draggable="true"
               @dragstart="startEmbedDrag(snapshot, $event)"
         >
             <NotebookEmbed ref="notebookEmbed"
-                           :key="snapshot.id"
+                           :key="snapshot.embedObject.id"
-                           :embed="snapshot"
+                           :embed="snapshot.embedObject"
+                           :is-snapshot-container="true"
                            :remove-action-string="'Delete Snapshot'"
-                           @updateEmbed="updateSnapshot"
                            @removeEmbed="removeSnapshot"
             />
         </span>
@@ -119,11 +119,8 @@ export default {
             this.snapshots = this.snapshotContainer.getSnapshots();
         },
         startEmbedDrag(snapshot, event) {
-            event.dataTransfer.setData('text/plain', snapshot.id);
+            event.dataTransfer.setData('text/plain', snapshot.embedObject.id);
-            event.dataTransfer.setData('openmct/snapshot/id', snapshot.id);
+            event.dataTransfer.setData('openmct/snapshot/id', snapshot.embedObject.id);
-        },
-        updateSnapshot(snapshot) {
-            this.snapshotContainer.updateSnapshot(snapshot);
         }
     }
 };

src/plugins/notebook/snapshot-container.js

@@ -18,13 +18,18 @@ export default class SnapshotContainer extends EventEmitter {
         return SnapshotContainer.instance;
     }
 
-    addSnapshot(embedObject) {
+    addSnapshot(notebookImageDomainObject, embedObject) {
         const snapshots = this.getSnapshots();
         if (snapshots.length >= NOTEBOOK_SNAPSHOT_MAX_COUNT) {
             snapshots.pop();
         }
 
-        snapshots.unshift(embedObject);
+        const snapshotObject = {
+            notebookImageDomainObject,
+            embedObject
+        };
+
+        snapshots.unshift(snapshotObject);
 
         return this.saveSnapshots(snapshots);
     }
@@ -32,7 +37,7 @@ export default class SnapshotContainer extends EventEmitter {
     getSnapshot(id) {
         const snapshots = this.getSnapshots();
 
-        return snapshots.find(s => s.id === id);
+        return snapshots.find(s => s.embedObject.id === id);
     }
 
     getSnapshots() {
@@ -47,7 +52,7 @@ export default class SnapshotContainer extends EventEmitter {
         }
 
         const snapshots = this.getSnapshots();
-        const filteredsnapshots = snapshots.filter(snapshot => snapshot.id !== id);
+        const filteredsnapshots = snapshots.filter(snapshot => snapshot.embedObject.id !== id);
 
         return this.saveSnapshots(filteredsnapshots);
     }
@@ -73,7 +78,7 @@ export default class SnapshotContainer extends EventEmitter {
     updateSnapshot(snapshot) {
         const snapshots = this.getSnapshots();
         const updatedSnapshots = snapshots.map(s => {
-            return s.id === snapshot.id
+            return s.embedObject.id === snapshot.embedObject.id
                 ? snapshot
                 : s;
         });

src/plugins/notebook/snapshot.js

@@ -1,7 +1,7 @@
 import { addNotebookEntry, createNewEmbed } from './utils/notebook-entries';
 import { getDefaultNotebook, getNotebookSectionAndPage, getDefaultNotebookLink, setDefaultNotebook } from './utils/notebook-storage';
 import { NOTEBOOK_DEFAULT } from '@/plugins/notebook/notebook-constants';
-import { createNotebookImageDomainObject, DEFAULT_SIZE } from './utils/notebook-image';
+import { createNotebookImageDomainObject, saveNotebookImageDomainObject, updateNamespaceOfDomainObject, DEFAULT_SIZE } from './utils/notebook-image';
 
 import SnapshotContainer from './snapshot-container';
 import ImageExporter from '../../exporters/ImageExporter';
@@ -35,29 +35,28 @@ export default class Snapshot {
      * @private
      */
     _saveSnapShot(notebookType, fullSizeImageURL, thumbnailImageURL, snapshotMeta) {
-        createNotebookImageDomainObject(this.openmct, fullSizeImageURL)
+        const object = createNotebookImageDomainObject(fullSizeImageURL);
-            .then(object => {
+        const thumbnailImage = { src: thumbnailImageURL || '' };
-                const thumbnailImage = { src: thumbnailImageURL || '' };
+        const snapshot = {
-                const snapshot = {
+            fullSizeImageObjectIdentifier: object.identifier,
-                    fullSizeImageObjectIdentifier: object.identifier,
+            thumbnailImage
-                    thumbnailImage
+        };
-                };
+        const embed = createNewEmbed(snapshotMeta, snapshot);
-                const embed = createNewEmbed(snapshotMeta, snapshot);
+        if (notebookType === NOTEBOOK_DEFAULT) {
-                if (notebookType === NOTEBOOK_DEFAULT) {
+            const notebookStorage = getDefaultNotebook();
-                    this._saveToDefaultNoteBook(embed);
 
-                    return;
+            this._saveToDefaultNoteBook(notebookStorage, embed);
-                }
+            const notebookImageDomainObject = updateNamespaceOfDomainObject(object, notebookStorage.identifier.namespace);
-
+            saveNotebookImageDomainObject(this.openmct, notebookImageDomainObject);
-                this._saveToNotebookSnapshots(embed);
+        } else {
-            });
+            this._saveToNotebookSnapshots(object, embed);
+        }
     }
 
     /**
      * @private
      */
-    _saveToDefaultNoteBook(embed) {
+    _saveToDefaultNoteBook(notebookStorage, embed) {
-        const notebookStorage = getDefaultNotebook();
         this.openmct.objects.get(notebookStorage.identifier)
             .then(async (domainObject) => {
                 addNotebookEntry(this.openmct, domainObject, notebookStorage, embed);
@@ -85,8 +84,8 @@ export default class Snapshot {
     /**
      * @private
      */
-    _saveToNotebookSnapshots(embed) {
+    _saveToNotebookSnapshots(notebookImageDomainObject, embed) {
-        this.snapshotContainer.addSnapshot(embed);
+        this.snapshotContainer.addSnapshot(notebookImageDomainObject, embed);
     }
 
     _showNotification(msg, url) {

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

@@ -5,14 +5,14 @@ export const DEFAULT_SIZE = {
     height: 30
 };
 
-export function createNotebookImageDomainObject(openmct, fullSizeImageURL) {
+export function createNotebookImageDomainObject(fullSizeImageURL) {
     const identifier = {
         key: uuid(),
         namespace: ''
     };
     const viewType = 'notebookSnapshotImage';
 
-    const object = {
+    return {
         name: 'Notebook Snapshot Image',
         type: viewType,
         identifier,
@@ -20,21 +20,6 @@ export function createNotebookImageDomainObject(openmct, fullSizeImageURL) {
             fullSizeImageURL
         }
     };
-
-    return new Promise((resolve, reject) => {
-        openmct.objects.save(object)
-            .then(result => {
-                if (result) {
-                    resolve(object);
-                }
-
-                reject();
-            })
-            .catch(e => {
-                console.error(e);
-                reject();
-            });
-    });
 }
 
 export function getThumbnailURLFromCanvas(canvas, size = DEFAULT_SIZE) {
@@ -67,6 +52,23 @@ export function getThumbnailURLFromimageUrl(imageUrl, size = DEFAULT_SIZE) {
     });
 }
 
+export function saveNotebookImageDomainObject(openmct, object) {
+    return new Promise((resolve, reject) => {
+        openmct.objects.save(object)
+            .then(result => {
+                if (result) {
+                    resolve(object);
+                } else {
+                    reject();
+                }
+            })
+            .catch(e => {
+                console.error(e);
+                reject();
+            });
+    });
+}
+
 export function updateNotebookImageDomainObject(openmct, identifier, fullSizeImage) {
     openmct.objects.get(identifier)
         .then(domainObject => {
@@ -76,3 +78,9 @@ export function updateNotebookImageDomainObject(openmct, identifier, fullSizeIma
             openmct.objects.mutate(domainObject, 'configuration', configuration);
         });
 }
+
+export function updateNamespaceOfDomainObject(object, namespace) {
+    object.identifier.namespace = namespace;
+
+    return object;
+}

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

@@ -1,16 +1,18 @@
-import { createNotebookImageDomainObject, getThumbnailURLFromimageUrl } from './notebook-image';
+import { createNotebookImageDomainObject, getThumbnailURLFromimageUrl, saveNotebookImageDomainObject, updateNamespaceOfDomainObject } from './notebook-image';
 import { mutateObject } from './notebook-entries';
 
+const IMAGE_MIGRATION_VER = "v1";
+
 export function notebookImageMigration(openmct, domainObject) {
     const configuration = domainObject.configuration;
     const notebookEntries = configuration.entries;
 
     const imageMigrationVer = configuration.imageMigrationVer;
-    if (imageMigrationVer && imageMigrationVer === 'v1') {
+    if (imageMigrationVer && imageMigrationVer === IMAGE_MIGRATION_VER) {
         return;
     }
 
-    configuration.imageMigrationVer = 'v1';
+    configuration.imageMigrationVer = IMAGE_MIGRATION_VER;
 
     // to avoid muliple notebookImageMigration calls updating images.
     mutateObject(openmct, domainObject, 'configuration', configuration);
@@ -27,14 +29,16 @@ export function notebookImageMigration(openmct, domainObject) {
                     const fullSizeImageURL = snapshot.src;
                     if (fullSizeImageURL) {
                         const thumbnailImageURL = await getThumbnailURLFromimageUrl(fullSizeImageURL);
-                        const notebookImageDomainObject = await createNotebookImageDomainObject(openmct, fullSizeImageURL);
+                        const object = createNotebookImageDomainObject(fullSizeImageURL);
-
+                        const notebookImageDomainObject = updateNamespaceOfDomainObject(object, domainObject.identifier.namespace);
                         embed.snapshot = {
                             fullSizeImageObjectIdentifier: notebookImageDomainObject.identifier,
                             thumbnailImage: { src: thumbnailImageURL || '' }
                         };
 
                         mutateObject(openmct, domainObject, 'configuration.entries', notebookEntries);
+
+                        saveNotebookImageDomainObject(openmct, notebookImageDomainObject);
                     }
                 });
             });