A bunch of fixes for TCR (#2250)

* fix add links by drag and drop

* fix dialog component logging errors

* fix search component errors

* fix sort

* remove unused entrydnd file

* remove unnecessary console logs

* fix preview action in embed dropdown, which was throwing a type error

* invoke PreviewAction once in NotebookController and pass into git add -a

* add navigation capability to embeds, and a bunch of cleanup

* code cleanup and avoid calling dismiss twice on overlay destroy, which was throwing a DOM error. Calling code should dismiss the overlay

* only show elements pool if domainObject has composition

* fix error in inspector when no selection is present

* wire up object view expand button

* listen to composition#remove in TabsView

* make reviewer requested changes

* make reviewer requested changes, and fix for an edge case where removed tab is at the end of the array and currentTab is not set properly

* remove array wrapping dynamic classes in embed.html

* add title='View Large' to expand button

* change model variable to domainObject in tabs.vue

* dismiss top level overlay when esc is pressed (only if overlay is dismissable)

* fix link navigation from embeds

* use positive flag dismissable instead of negative notDismissable for overlays

* make overlays dismissable by default, unless set to false

src/plugins/notebook/res/templates/embed.html

@@ -7,18 +7,19 @@
     <div class="c-ne__embed__info">
         <div class="c-ne__embed__name">
             <a class="c-ne__embed__link"
-               v-on:click="navigate(embed.type)"
-               v-bind:class="[embed.cssClass]">{{embed.name}}</a>
+               :href="objectLink"
+               :class="embed.cssClass">{{embed.name}}</a>
             <a class="c-ne__embed__context-available icon-arrow-down"
-               v-on:click="toggleActionMenu"></a>
+               @click="toggleActionMenu"></a>
         </div>
         <div class="hide-menu hidden">
             <div class="menu-element context-menu-wrapper mobile-disable-select">
                 <div class="menu context-menu">
                     <ul>
-                        <li v-for="action in actions" 
-                            v-bind:class="[action.cssClass]"
-                            v-on:click="action.perform(embed, entry)">
+                        <li v-for="action in actions"
+                            :key="action.name" 
+                            :class="action.cssClass"
+                            @click="action.perform(embed, entry)">
                             {{ action.name }}
                         </li> 
                     </ul>

src/plugins/notebook/res/templates/entry.html

@@ -1,7 +1,5 @@
 <li class="c-notebook__entry c-ne has-local-controls"
-    v-on:drop="dropOnEntry(entry.id, $event)"
-    v-on:dragover="dragoverOnEntry"
-    >
+    @drop.prevent="dropOnEntry(entry.id, $event)">
     <div class="c-ne__time-and-content">
         <div class="c-ne__time">
             <span>{{formatTime(entry.createdOn, 'YYYY-MM-DD')}}</span>
@@ -11,18 +9,18 @@
             <div class="c-ne__text c-input-inline"
                  contenteditable="true"
                  ref="contenteditable"
-                 v-on:blur="textBlur($event, entry.id)"
-                 v-on:focus="textFocus($event, entry.id)"
-                 v-bind:key="entry.id"
+                 @blur="textBlur($event, entry.id)"
+                 @focus="textFocus($event, entry.id)"
                  v-html="entry.text">
             </div>
             <div class="c-ne__embeds">
                 <notebook-embed
-                    v-for="(embed, index) in entry.embeds"
-                    :key="index"
+                    v-for="embed in entry.embeds"
+                    :key="embed.id"
                     :embed="embed"
-                    :entry="entry"
-                ></notebook-embed>
+                    :objectPath="embed.objectPath"
+                    :entry="entry">
+                </notebook-embed>
             </div>
         </div>
     </div>
@@ -30,6 +28,7 @@
     <div class="c-ne__local-controls--hidden">
         <button class="c-click-icon c-click-icon--major icon-trash"
            title="Delete this entry"
-           v-on:click="deleteEntry"></button>
+           @click="deleteEntry">
+        </button>
     </div>
 </li>

src/plugins/notebook/res/templates/notebook.html

@@ -24,11 +24,10 @@
     </div>
     <div class="c-notebook__drag-area icon-plus"
          @click="newEntry($event)"
-         @drop="newEntry($event)"
-         id="newEntry">
+         @drop="newEntry($event)">
         <span class="c-notebook__drag-area__label">To start a new entry, click here or drag and drop any object</span>
     </div>
-    <div class="c-notebook__entries" ng-mouseover="handleActive()">
+    <div class="c-notebook__entries">
         <ul>
             <notebook-entry
                 v-for="(entry,index) in filteredAndSortedEntries"

src/plugins/notebook/src/controllers/EmbedController.js

@@ -34,28 +34,17 @@ function (
     Vue,
     Painterro
 ) {
-    function EmbedController (openmct, domainObject) {
+    function EmbedController(openmct, domainObject) {
         this.openmct = openmct;
         this.domainObject = domainObject;
-        this.objectService = openmct.$injector.get('objectService');
-        this.navigationService = openmct.$injector.get('navigationService');
         this.popupService = openmct.$injector.get('popupService');
         this.agentService = openmct.$injector.get('agentService');
-        this.dialogService = openmct.$injector.get('dialogService');
 
-
-        this.navigate = this.navigate.bind(this);
         this.exposedData = this.exposedData.bind(this);
         this.exposedMethods = this.exposedMethods.bind(this);
         this.toggleActionMenu = this.toggleActionMenu.bind(this);
     }
 
-    EmbedController.prototype.navigate = function (embedType) {
-        this.objectService.getObjects([embedType]).then(function (objects) {
-            this.navigationService.setNavigation(objects[embedType]);
-        }.bind(this));
-    };
-
     EmbedController.prototype.openSnapshot = function (domainObject, entry, embed) {
 
         function annotateSnapshot(openmct) {
@@ -63,20 +52,22 @@ function (
 
                 var save = false,
                     painterroInstance = {},
-                    annotateOverlay = new Vue({
+                    annotateVue = new Vue({
                         template: '<div id="snap-annotation"></div>'
                     }),
                     self = this;
 
-                openmct.overlays.overlay({
-                    element: annotateOverlay.$mount().$el,
+                let annotateOverlay = openmct.overlays.overlay({
+                    element: annotateVue.$mount().$el,
                     size: 'large',
+                    dismissable: false,
                     buttons: [
                         {
                             label: 'Cancel',
                             callback: function () {
                                 save = false;
                                 painterroInstance.save();
+                                annotateOverlay.dismiss();
                             }
                         },
                         {
@@ -84,11 +75,12 @@ function (
                             callback: function () {
                                 save = true;
                                 painterroInstance.save();
+                                annotateOverlay.dismiss();
                             }
                         }
                     ],
                     onDestroy: function () {
-                        annotateOverlay.$destroy(true);
+                        annotateVue.$destroy(true);
                     }
                 });
 
@@ -162,14 +154,11 @@ function (
                 }
             });
 
-        function onDestroyCallback() {
-            snapshot.$destroy(true);
-        }
-
         var snapshotOverlay = this.openmct.overlays.overlay({
             element: snapshot.$mount().$el,
-            onDestroy: onDestroyCallback,
+            onDestroy: () => {snapshot.$destroy(true)},
             size: 'large',
+            dismissable: true,
             buttons: [
                 {
                     label: 'Done',
@@ -199,23 +188,20 @@ function (
         return foundId;
     };
 
-    EmbedController.prototype.actionToMenuDecorator = function (action) {
-        return {
-            name: action.getMetadata().name,
-            cssClass: action.getMetadata().cssClass,
-            perform: action.perform
-        };
-    };
-
-    EmbedController.prototype.populateActionMenu = function (objectService, actionService) {
+    EmbedController.prototype.populateActionMenu = function (openmct, actions) {
         return function () {
             var self = this;
 
-            objectService.getObjects([self.embed.type]).then(function (resp) {
-                var domainObject = resp[self.embed.type],
-                    previewAction = actionService.getActions({key: 'mct-preview-action', domainObject: domainObject})[0];
-
-                self.actions.push(self.actionToMenuDecorator(previewAction));
+            openmct.objects.get(self.embed.type).then(function (domainObject) {
+                actions.forEach((action) => {
+                    self.actions.push({
+                        cssClass: action.cssClass,
+                        name: action.name,
+                        perform: () => {
+                            action.invoke([domainObject].concat(openmct.router.path));
+                        }
+                    });
+                });
             });
         };
     };
@@ -308,11 +294,9 @@ function (
         var self = this;
 
         return {
-            navigate: self.navigate,
             openSnapshot: self.openSnapshot,
             formatTime: self.formatTime,
             toggleActionMenu: self.toggleActionMenu,
-            actionToMenuDecorator: self.actionToMenuDecorator,
             findInArray: self.findInArray
         };
     };

src/plugins/notebook/src/controllers/EntryController.js

@@ -30,8 +30,6 @@ function (
     function EntryController (openmct, domainObject) {
         this.openmct = openmct;
         this.domainObject = domainObject;
-        this.dndService = this.openmct.$injector.get('dndService');
-        this.dialogService = this.openmct.$injector.get('dialogService');
 
         this.currentEntryValue = '';
 
@@ -106,37 +104,35 @@ function (
     };
 
     EntryController.prototype.dropOnEntry = function (entryid, event) {
-
         var data = event.dataTransfer.getData('openmct/domain-object-path');
 
         if (data) {
-            var selectedObject = JSON.parse(data)[0],
-                selectedObjectId = selectedObject.identifier.key,
-                cssClass = this.openmct.types.get(selectedObject.type),
+            var objectPath = JSON.parse(data),
+                domainObject = objectPath[0],
+                domainObjectKey = domainObject.identifier.key,
+                domainObjectType = this.openmct.types.get(domainObject.type),
+                cssClass = domainObjectType && domainObjectType.definition ? 
+                    domainObjectType.definition.cssClass : 'icon-object-unknown',
                 entryPos = this.entryPosById(entryid),
                 currentEntryEmbeds = this.domainObject.entries[entryPos].embeds,
                 newEmbed = {
-                    type: selectedObjectId,
                     id: '' + Date.now(),
+                    domainObject: domainObject,
+                    objectPath: objectPath,
+                    type: domainObjectKey,
                     cssClass: cssClass,
-                    name: selectedObject.name,
+                    name: domainObject.name,
                     snapshot: ''
                 };
-
             currentEntryEmbeds.push(newEmbed);
             this.openmct.objects.mutate(this.domainObject, 'entries[' + entryPos + '].embeds', currentEntryEmbeds);
         }
     };
 
-    EntryController.prototype.dragoverOnEntry = function () {
-
-    };
-
     EntryController.prototype.exposedData = function () {
         return {
             openmct: this.openmct,
             domainObject: this.domainObject,
-            dialogService: this.dialogService,
             currentEntryValue: this.currentEntryValue
         };
     };
@@ -148,8 +144,7 @@ function (
             textBlur: this.textBlur,
             formatTime: this.formatTime,
             deleteEntry: this.deleteEntry,
-            dropOnEntry: this.dropOnEntry,
-            dragoverOnEntry: this.dragoverOnEntry
+            dropOnEntry: this.dropOnEntry
         };
     };
     return EntryController;

src/plugins/notebook/src/controllers/NotebookController.js

@@ -27,7 +27,9 @@ define([
     '../../res/templates/notebook.html',
     '../../res/templates/entry.html',
     '../../res/templates/embed.html',
-    '../../../../ui/components/search.vue'
+    '../../../../ui/components/search.vue',
+    '../../../../ui/preview/PreviewAction',
+    '../../../../ui/mixins/object-link'
 ],
 function (
     Vue,
@@ -36,15 +38,16 @@ function (
     NotebookTemplate,
     EntryTemplate,
     EmbedTemplate,
-    search
+    search,
+    PreviewAction,
+    objectLinkMixin
 ) {
 
     function NotebookController(openmct, domainObject) {
         this.openmct = openmct;
         this.domainObject = domainObject;
         this.entrySearch = '';
-        this.objectService = openmct.$injector.get('objectService');
-        this.actionService = openmct.$injector.get('actionService');
+        this.previewAction = new PreviewAction.default(openmct);
 
         this.show = this.show.bind(this);
         this.destroy = this.destroy.bind(this);
@@ -61,11 +64,12 @@ function (
 
         var notebookEmbed = {
             inject:['openmct', 'domainObject'],
+            mixins:[objectLinkMixin.default],
             props:['embed', 'entry'],
             template: EmbedTemplate,
             data: embedController.exposedData,
             methods: embedController.exposedMethods(),
-            beforeMount: embedController.populateActionMenu(self.objectService, self.actionService)
+            beforeMount: embedController.populateActionMenu(self.openmct, [self.previewAction])
         };
 
         var entryComponent = {