From 12818fbc46f38d86e3d61087994fd4cc107e4aa1 Mon Sep 17 00:00:00 2001
From: Nikhil Mandlik <nikhil.k.mandlik@nasa.gov>
Date: Fri, 6 Aug 2021 15:53:46 -0700
Subject: [PATCH] [Notebook] Create Snapshot directly from any frame in a
 layout #3300

---
 src/api/overlays/components/OverlayComponent.vue   |  2 +-
 .../notebook/components/NotebookMenuSwitcher.vue   | 11 ++++++-----
 src/ui/components/ObjectFrame.vue                  | 14 +++++++++++---
 src/ui/layout/Layout.vue                           |  2 +-
 src/ui/preview/Preview.vue                         |  2 +-
 5 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/api/overlays/components/OverlayComponent.vue b/src/api/overlays/components/OverlayComponent.vue
index f06e1afcfdd..f8a66f75978 100644
--- a/src/api/overlays/components/OverlayComponent.vue
+++ b/src/api/overlays/components/OverlayComponent.vue
@@ -12,7 +12,7 @@
         ></button>
         <div
             ref="element"
-            class="c-overlay__contents"
+            class="c-overlay__contents js-notebook-snapshot-item-wrapper"
             tabindex="0"
         ></div>
         <div
diff --git a/src/plugins/notebook/components/NotebookMenuSwitcher.vue b/src/plugins/notebook/components/NotebookMenuSwitcher.vue
index 77cdff065a7..cc6d57af600 100644
--- a/src/plugins/notebook/components/NotebookMenuSwitcher.vue
+++ b/src/plugins/notebook/components/NotebookMenuSwitcher.vue
@@ -81,7 +81,7 @@ export default {
                     cssClass: 'icon-notebook',
                     name: `Save to Notebook ${defaultPath}`,
                     onItemClicked: () => {
-                        return this.snapshot(NOTEBOOK_DEFAULT);
+                        return this.snapshot(NOTEBOOK_DEFAULT, event.target);
                     }
                 });
             }
@@ -90,16 +90,17 @@ export default {
                 cssClass: 'icon-camera',
                 name: 'Save to Notebook Snapshots',
                 onItemClicked: () => {
-                    return this.snapshot(NOTEBOOK_SNAPSHOT);
+                    return this.snapshot(NOTEBOOK_SNAPSHOT, event.target);
                 }
             });
 
             this.openmct.menus.showMenu(x, y, notebookTypes);
         },
-        snapshot(notebookType) {
+        snapshot(notebookType, target) {
             this.$nextTick(() => {
-                const element = document.querySelector('.c-overlay__contents')
-                    || document.getElementsByClassName('l-shell__main-container')[0];
+                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
diff --git a/src/ui/components/ObjectFrame.vue b/src/ui/components/ObjectFrame.vue
index c7fda1633a2..fc4678d7138 100644
--- a/src/ui/components/ObjectFrame.vue
+++ b/src/ui/components/ObjectFrame.vue
@@ -21,7 +21,7 @@
  *****************************************************************************/
 <template>
 <div
-    class="c-so-view"
+    class="c-so-view js-notebook-snapshot-item-wrapper"
     :class="[
         statusClass,
         'c-so-view--' + domainObject.type,
@@ -56,6 +56,11 @@
                 'has-complex-content': complexContent
             }"
         >
+            <NotebookMenuSwitcher v-if="notebookEnabled"
+                                  :domain-object="domainObject"
+                                  :object-path="objectPath"
+                                  class="c-notebook-snapshot-menubutton"
+            />
             <div v-if="statusBarItems.length > 0"
                  class="c-so-view__frame-controls__btns"
             >
@@ -80,7 +85,7 @@
 
     <object-view
         ref="objectView"
-        class="c-so-view__object-view js-object-view"
+        class="c-so-view__object-view js-object-view js-notebook-snapshot-item"
         :show-edit-view="showEditView"
         :object-path="objectPath"
         :layout-font-size="layoutFontSize"
@@ -92,6 +97,7 @@
 
 <script>
 import ObjectView from './ObjectView.vue';
+import NotebookMenuSwitcher from '@/plugins/notebook/components/NotebookMenuSwitcher.vue';
 
 const SIMPLE_CONTENT_TYPES = [
     'clock',
@@ -103,7 +109,8 @@ const SIMPLE_CONTENT_TYPES = [
 
 export default {
     components: {
-        ObjectView
+        ObjectView,
+        NotebookMenuSwitcher
     },
     inject: ['openmct'],
     props: {
@@ -139,6 +146,7 @@ export default {
         return {
             cssClass,
             complexContent,
+            notebookEnabled: this.openmct.types.get('notebook'),
             statusBarItems: [],
             status: ''
         };
diff --git a/src/ui/layout/Layout.vue b/src/ui/layout/Layout.vue
index 5be8ce68fb3..4f1255aaa79 100644
--- a/src/ui/layout/Layout.vue
+++ b/src/ui/layout/Layout.vue
@@ -90,7 +90,7 @@
             />
             <object-view
                 ref="browseObject"
-                class="l-shell__main-container js-main-container"
+                class="l-shell__main-container js-main-container js-notebook-snapshot-item"
                 data-selectable
                 :show-edit-view="true"
                 @change-action-collection="setActionCollection"
diff --git a/src/ui/preview/Preview.vue b/src/ui/preview/Preview.vue
index 39e8d4a3c54..99732d3935a 100644
--- a/src/ui/preview/Preview.vue
+++ b/src/ui/preview/Preview.vue
@@ -27,7 +27,7 @@
         :domain-object="domainObject"
         :views="views"
     />
-    <div class="l-preview-window__object-view">
+    <div class="l-preview-window__object-view js-notebook-snapshot-item">
         <div ref="objectView"></div>
     </div>
 </div>