From 92b2582d0d68c6e59c0e26e7ebf2b8bc30f4e690 Mon Sep 17 00:00:00 2001
From: Andrew Henry <andrew.k.henry@nasa.gov>
Date: Fri, 11 Jan 2019 11:21:52 -0800
Subject: [PATCH] Preview instead of navigate in edit mode + highlight
 navigated object (#2252)

* Preview instead of navigate when in edit mode.

* Prevent preview of navigated object

* Removed trailing comma

* Observe navigation from tree items instead of mct-tree

* Cleanup of redundant code

* .is-selected -> .is-navigated-object
---
 src/MCT.js                                   |  4 +++-
 src/plugins/plugins.js                       |  7 ++-----
 src/ui/components/ObjectLabel.vue            | 22 +++++++++++++++++++-
 src/ui/layout/mct-tree.vue                   |  2 +-
 src/ui/layout/tree-item.vue                  | 22 ++++++++++++++++++--
 src/{plugins => ui}/preview/Preview.vue      |  0
 src/{plugins => ui}/preview/PreviewAction.js |  9 ++++++++
 src/{plugins => ui}/preview/plugin.js        |  0
 8 files changed, 56 insertions(+), 10 deletions(-)
 rename src/{plugins => ui}/preview/Preview.vue (100%)
 rename src/{plugins => ui}/preview/PreviewAction.js (84%)
 rename src/{plugins => ui}/preview/plugin.js (100%)

diff --git a/src/MCT.js b/src/MCT.js
index 48768a7d19..56c7d5cad4 100644
--- a/src/MCT.js
+++ b/src/MCT.js
@@ -43,6 +43,7 @@ define([
     './ui/layout/Layout.vue',
     '../platform/core/src/objects/DomainObjectImpl',
     '../platform/core/src/capabilities/ContextualDomainObject',
+    './ui/preview/plugin',
     'vue'
 ], function (
     EventEmitter,
@@ -67,6 +68,7 @@ define([
     Layout,
     DomainObjectImpl,
     ContextualDomainObject,
+    PreviewPlugin,
     Vue
 ) {
     /**
@@ -230,7 +232,7 @@ define([
         this.install(this.plugins.Plot());
         this.install(this.plugins.TelemetryTable());
         this.install(this.plugins.DisplayLayout());
-        this.install(this.plugins.Preview());
+        this.install(PreviewPlugin.default());
 
         if (typeof BUILD_CONSTANTS !== 'undefined') {
             this.install(buildInfoPlugin(BUILD_CONSTANTS));
diff --git a/src/plugins/plugins.js b/src/plugins/plugins.js
index e1e0d1e7da..93d1a03f22 100644
--- a/src/plugins/plugins.js
+++ b/src/plugins/plugins.js
@@ -40,8 +40,7 @@ define([
     './flexibleLayout/plugin',
     './tabs/plugin',
     '../../platform/features/fixed/plugin',
-    './LADTable/plugin',
-    './preview/plugin'
+    './LADTable/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -62,8 +61,7 @@ define([
     FlexibleLayout,
     Tabs,
     FixedView,
-    LADTable,
-    PreviewPlugin
+    LADTable
 ) {
     var bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -179,7 +177,6 @@ define([
     plugins.FixedView = FixedView;
     plugins.FlexibleLayout = FlexibleLayout;
     plugins.LADTable = LADTable;
-    plugins.Preview = PreviewPlugin.default;
 
     return plugins;
 });
diff --git a/src/ui/components/ObjectLabel.vue b/src/ui/components/ObjectLabel.vue
index 289880862c..bc6ed4ecc5 100644
--- a/src/ui/components/ObjectLabel.vue
+++ b/src/ui/components/ObjectLabel.vue
@@ -2,6 +2,7 @@
 <a class="c-tree__item__label"
     draggable="true"
     @dragstart="dragStart"
+    @click="navigateOrPreview"
     :href="objectLink">
     <div class="c-tree__item__type-icon"
         :class="typeClass"></div>
@@ -13,12 +14,19 @@
 
 import ObjectLink from '../mixins/object-link';
 import ContextMenuGesture from '../mixins/context-menu-gesture';
+import PreviewAction from '../preview/PreviewAction.js';
 
 export default {
     mixins: [ObjectLink, ContextMenuGesture],
     inject: ['openmct'],
     props: {
-        domainObject: Object
+        domainObject: Object,
+        objectPath: {
+            type: Array,
+            default() {
+                return [];
+            }
+        }
     },
     data() {
         return {
@@ -32,6 +40,7 @@ export default {
             });
             this.$once('hook:destroyed', removeListener);
         }
+        this.previewAction = new PreviewAction(this.openmct);
     },
     computed: {
         typeClass() {
@@ -43,6 +52,17 @@ export default {
         }
     },
     methods: {
+        navigateOrPreview(event) {
+            if (this.openmct.editor.isEditing()){
+                event.preventDefault();
+                this.preview();
+            }
+        },
+        preview() {
+            if (this.previewAction.appliesTo(this.objectPath)){
+                this.previewAction.invoke(this.objectPath);
+            }
+        },
         dragStart(event) {
             let navigatedObject = this.openmct.router.path[0];
             let serializedObject = JSON.stringify(this.observedObject);
diff --git a/src/ui/layout/mct-tree.vue b/src/ui/layout/mct-tree.vue
index 8d2ce073ae..026cef1fb8 100644
--- a/src/ui/layout/mct-tree.vue
+++ b/src/ui/layout/mct-tree.vue
@@ -47,7 +47,7 @@
                 }
             }
 
-            &.is-selected {
+            &.is-navigated-object {
                 background: $colorItemTreeSelectedBg;
                 .c-tree__item__type-icon:before {
                     color: $colorItemTreeIconHover;
diff --git a/src/ui/layout/tree-item.vue b/src/ui/layout/tree-item.vue
index 51c08cd27a..bb0f94d685 100644
--- a/src/ui/layout/tree-item.vue
+++ b/src/ui/layout/tree-item.vue
@@ -1,7 +1,7 @@
 <template>
     <li class="c-tree__item-h">
         <div class="c-tree__item"
-            :class="{ 'is-alias': isAlias }">
+            :class="{ 'is-alias': isAlias, 'is-navigated-object': isNavigated }">
             <view-control class="c-tree__item__view-control"
                           :enabled="hasChildren"
                           v-model="expanded">
@@ -31,10 +31,13 @@
             node: Object
         },
         data() {
+            this.pathToObject = this.buildPathString(this.node.objectPath);
+
             return {
                 hasChildren: false,
                 isLoading: false,
                 loaded: false,
+                isNavigated: this.pathToObject === this.openmct.router.currentLocation.path,
                 children: [],
                 expanded: false
             }
@@ -47,7 +50,7 @@
                 }
                 let parentKeyString = this.openmct.objects.makeKeyString(parent.identifier);
                 return parentKeyString !== this.node.object.location;
-            }
+            },
         },
         mounted() {
             // TODO: should update on mutation.
@@ -65,11 +68,14 @@
             if (this.openmct.composition.get(this.node.object)) {
                 this.hasChildren = true;
             }
+
+            this.openmct.router.on('change:path', this.highlightIfNavigated);
         },
         destroy() {
             if (this.composition) {
                 this.composition.off('add', this.addChild);
                 this.composition.off('remove', this.removeChild);
+                this.openmct.router.off('change:path', this.highlightIfNavigated);
                 delete this.composition;
             }
         },
@@ -102,6 +108,18 @@
             finishLoading () {
                 this.isLoading = false;
                 this.loaded = true;
+            },
+            buildPathString(path) {
+                return '/browse/' + path.map(o => o && this.openmct.objects.makeKeyString(o.identifier))
+                    .reverse()
+                    .join('/');
+            },
+            highlightIfNavigated(newPath, oldPath){
+                if (newPath === this.pathToObject) {
+                    this.isNavigated = true;
+                } else if (oldPath === this.pathToObject) {
+                    this.isNavigated = false;
+                }
             }
         },
         components: {
diff --git a/src/plugins/preview/Preview.vue b/src/ui/preview/Preview.vue
similarity index 100%
rename from src/plugins/preview/Preview.vue
rename to src/ui/preview/Preview.vue
diff --git a/src/plugins/preview/PreviewAction.js b/src/ui/preview/PreviewAction.js
similarity index 84%
rename from src/plugins/preview/PreviewAction.js
rename to src/ui/preview/PreviewAction.js
index 2129d830ab..9a12c3e7bc 100644
--- a/src/plugins/preview/PreviewAction.js
+++ b/src/ui/preview/PreviewAction.js
@@ -61,4 +61,13 @@ export default class PreviewAction {
             onDestroy: () => preview.$destroy()
         });
     }
+    appliesTo(objectPath) {
+        return !this._isNavigatedObject(objectPath)
+    }
+    _isNavigatedObject(objectPath) {
+        let targetObject = objectPath[0];
+        let navigatedObject = this._openmct.router.path[0];
+        return targetObject.identifier.namespace === navigatedObject.identifier.namespace &&
+            targetObject.identifier.key === navigatedObject.identifier.key;
+    }
 }
diff --git a/src/plugins/preview/plugin.js b/src/ui/preview/plugin.js
similarity index 100%
rename from src/plugins/preview/plugin.js
rename to src/ui/preview/plugin.js