tree and toolbar fixes (#2241)

[tree] fixes warning from viewControl about improper mutation in child component
[tree] show links in tree
[toolbar] close open menu when clicking on another menu.

src/ui/components/controls/viewControl.vue

@@ -1,30 +1,24 @@
 <template>
     <span class="c-disclosure-triangle"
     :class="{
-        'c-disclosure-triangle--expanded' : expanded,
+        'c-disclosure-triangle--expanded' : value,
         'is-enabled' : enabled
     }"
-    @click="toggle"></span>
+    @click="$emit('input', !value)"></span>
 </template>
 
 <script>
     export default {
         props: {
-            expanded:  {
+            value:  {
                 type: Boolean,
-                value: false
+                default: false
             },
             enabled: {
                 // Provided to allow the view-control to still occupy space without displaying a control icon.
                 // Used as such in the tree - when a node doesn't have children, set disabled to true.
                 type: Boolean,
-                value: false
-            }
-        },
-        methods: {
-            toggle(event) {
-                this.expanded = !this.expanded;
-                this.$emit('click', event);
+                default: false
             }
         }
     }

src/ui/components/layout/tree-item.vue

@@ -1,11 +1,10 @@
 <template>
     <li class="c-tree__item-h">
         <div class="c-tree__item"
-            :class="{ 'is-alias' : isAlias }">
+            :class="{ 'is-alias': isAlias }">
             <view-control class="c-tree__item__view-control"
                           :enabled="hasChildren"
-                          :expanded="expanded"
-                          @click="toggleChildren">
+                          v-model="expanded">
             </view-control>
             <object-label :domainObject="node.object"
                           :objectPath="node.objectPath">
@@ -37,8 +36,17 @@
                 isLoading: false,
                 loaded: false,
                 children: [],
-                expanded: false,
-                isAlias: false
+                expanded: false
+            }
+        },
+        computed: {
+            isAlias() {
+                let parent = this.node.objectPath[1];
+                if (!parent) {
+                    return false;
+                }
+                let parentKeyString = this.openmct.objects.makeKeyString(parent.identifier);
+                return parentKeyString !== this.node.object.location;
             }
         },
         mounted() {
@@ -65,19 +73,20 @@
                 delete this.composition;
             }
         },
-        methods: {
-            toggleChildren: function () {
+        watch: {
+            expanded(isExpanded) {
                 if (!this.hasChildren) {
                     return;
                 }
-                this.expanded = !this.expanded;
                 if (!this.loaded && !this.isLoading) {
                     this.composition = this.openmct.composition.get(this.domainObject);
                     this.composition.on('add', this.addChild);
                     this.composition.on('remove', this.removeChild);
                     this.composition.load().then(this.finishLoading());
                 }
-            },
+            }
+        },
+        methods: {
             addChild (child) {
                 this.children.push({
                     id: this.openmct.objects.makeKeyString(child.identifier),

src/ui/components/toolbar/components/toggle-mixin.js

@@ -7,12 +7,19 @@ export default {
     methods: {
         toggle(event) {
             if (this.open) {
+                if (this.isOpening) {
+                    // Prevent document event handler from closing immediately
+                    // after opening.  Can't use stopPropagation because that
+                    // would break other menus with similar behavior.
+                    this.isOpening = false;
+                    return;
+                }
                 document.removeEventListener('click', this.toggle);
                 this.open = false;
             } else {
                 document.addEventListener('click', this.toggle);
-                event.stopPropagation();
                 this.open = true;
+                this.isOpening = true;
             }
         }
     },