WIP implementation of multiple-composition

package.json

@@ -53,7 +53,7 @@
     "marked": "^0.3.5",
     "mini-css-extract-plugin": "^0.4.1",
     "minimist": "^1.1.1",
-    "moment": "^2.11.1",
+    "moment": "2.24.0",
     "moment-duration-format": "^2.2.2",
     "moment-timezone": "^0.5.21",
     "node-bourbon": "^4.2.3",

src/api/contextMenu/ContextMenu.vue

@@ -6,7 +6,7 @@
             :key="action.name"
             :class="action.cssClass"
             :title="action.description"
-            @click="action.invoke(objectPath)"
+            @click="action.invoke(objectPath, context)"
         >
             {{ action.name }}
         </li>
@@ -19,6 +19,6 @@
 
 <script>
 export default {
-    inject: ['actions', 'objectPath']
+    inject: ['actions', 'objectPath', 'context']
 }
 </script>

src/api/contextMenu/ContextMenuAPI.js

@@ -75,7 +75,7 @@ class ContextMenuAPI {
     /**
      * @private
      */
-    _showContextMenuForObjectPath(objectPath, x, y, actionsToBeIncluded) {
+    _showContextMenuForObjectPath(objectPath, x, y, actionsToBeIncluded, context) {
 
         let applicableActions = this._allActions.filter((action) => {
 
@@ -96,7 +96,7 @@ class ContextMenuAPI {
             this._hideActiveContextMenu();
         }
 
-        this._activeContextMenu = this._createContextMenuForObject(objectPath, applicableActions);
+        this._activeContextMenu = this._createContextMenuForObject(objectPath, applicableActions, context);
         this._activeContextMenu.$mount();
         document.body.appendChild(this._activeContextMenu.$el);
 
@@ -141,14 +141,15 @@ class ContextMenuAPI {
     /**
      * @private
      */
-    _createContextMenuForObject(objectPath, actions) {
+    _createContextMenuForObject(objectPath, actions, context) {
         return new Vue({
             components: {
                 ContextMenu: ContextMenuComponent
             },
             provide: {
                 actions: actions,
-                objectPath: objectPath
+                objectPath: objectPath,
+                context
             },
             template: '<ContextMenu></ContextMenu>'
         });

src/plugins/remove/RemoveAction.js

@@ -29,11 +29,11 @@ export default class RemoveAction {
         this.openmct = openmct;
     }
 
-    invoke(objectPath) {
+    invoke(objectPath, context) {
         let object = objectPath[0];
         let parent = objectPath[1];
         this.showConfirmDialog(object).then(() => {
-            this.removeFromComposition(parent, object);
+            this.removeFromComposition(parent, object, context.sequenceNumber);
             if (this.inNavigationPath(object)) {
                 this.navigateTo(objectPath.slice(1));
             }
@@ -79,23 +79,21 @@ export default class RemoveAction {
         window.location.href = '#/browse/' + urlPath;
     }
 
-    removeFromComposition(parent, child) {
-        let composition = parent.composition.filter(id =>
-            !this.openmct.objects.areIdsEqual(id, child.identifier)
-        );
-
-        this.openmct.objects.mutate(parent, 'composition', composition);
+    removeFromComposition(parent, child, sequenceNumber) {
+        this.openmct.composition.get(parent).then(compositionCollection => {
+            compositionCollection.remove(child, sequenceNumber);
+        })
 
         if (this.inNavigationPath(child) && this.openmct.editor.isEditing()) {
             this.openmct.editor.save();
         }
 
-        const parentKeyString = this.openmct.objects.makeKeyString(parent.identifier);
-        const isAlias = parentKeyString !== child.location;
-
-        if (!isAlias) {
-            this.openmct.objects.mutate(child, 'location', null);
-        }
+        // Find another way of doing this with notebooks
+        // const parentKeyString = this.openmct.objects.makeKeyString(parent.identifier);
+        // const isAlias = parentKeyString !== child.location;
+        // if (!isAlias) {
+        //     this.openmct.objects.mutate(child, 'location', null);
+        // }
     }
 
     appliesTo(objectPath) {

src/ui/components/ObjectLabel.vue

@@ -36,6 +36,10 @@ export default {
         navigateToPath: {
             type: String,
             default: undefined
+        },
+        sequenceNumber: {
+            type: Number,
+            default: undefined
         }
     },
     data() {

src/ui/layout/BrowseBar.vue

@@ -110,7 +110,8 @@ export default {
             domainObject: PLACEHOLDER_OBJECT,
             viewKey: undefined,
             isEditing: this.openmct.editor.isEditing(),
-            notebookEnabled: this.openmct.types.get('notebook')
+            notebookEnabled: this.openmct.types.get('notebook'),
+            sequenceNumber: undefined
         }
     },
     computed: {
@@ -267,7 +268,14 @@ export default {
             });
         },
         showContextMenu(event) {
-            this.openmct.contextMenu._showContextMenuForObjectPath(this.openmct.router.path, event.clientX, event.clientY);
+            this.openmct.contextMenu._showContextMenuForObjectPath(
+                this.openmct.router.path,
+                event.clientX,
+                event.clientY,
+                undefined,
+                {
+                    sequenceNumber: this.sequenceNumber
+                });
         },
         goToParent() {
             window.location.hash = this.parentUrl;

src/ui/layout/mct-tree.vue

@@ -34,6 +34,7 @@
             v-for="treeItem in allTreeItems"
             :key="treeItem.id"
             :node="treeItem"
+            :sequence-number="0"
         />
     </ul>
     <!-- end main tree -->
@@ -47,6 +48,7 @@
             v-for="treeItem in filteredTreeItems"
             :key="treeItem.id"
             :node="treeItem"
+            :sequence-number="0"
         />
     </ul>
     <!-- end search tree -->

src/ui/layout/tree-item.vue

@@ -13,6 +13,7 @@
             :domain-object="node.object"
             :object-path="node.objectPath"
             :navigate-to-path="navigateToPath"
+            :sequence-number="sequenceNumber"
         />
     </div>
     <ul
@@ -28,9 +29,10 @@
             </div>
         </li>
         <tree-item
-            v-for="child in children"
+            v-for="(child, index) in children"
             :key="child.id"
             :node="child"
+            :sequence-number="index"
         />
     </ul>
 </li>
@@ -53,6 +55,10 @@ export default {
         node: {
             type: Object,
             required: true
+        },
+        sequenceNumber: {
+            type: Number,
+            required: true
         }
     },
     data() {

src/ui/mixins/object-link.js

@@ -13,13 +13,20 @@ export default {
             if (!this.objectPath.length) {
                 return;
             }
+            let url;
+
             if (this.navigateToPath) {
-                return '#' + this.navigateToPath;
+                url = '#' + this.navigateToPath;
+            } else {
+                url = '#/browse/' + this.objectPath
+                    .map(o => o && this.openmct.objects.makeKeyString(o.identifier))
+                    .reverse()
+                    .join('/');
             }
-            return '#/browse/' + this.objectPath
-                .map(o => o && this.openmct.objects.makeKeyString(o.identifier))
-                .reverse()
-                .join('/');
+            if (this.sequenceNumber) {
+                url += `?sequenceNumber=${this.sequenceNumber}`;
+            }
+            return url;
         }
     }
 };

src/ui/router/Browse.js

@@ -27,6 +27,13 @@ define([
                 return;
             }
 
+            if (newParams.sequenceNumber) {
+                openmct.layout.$refs.browseBar.sequenceNumber = parseInt(newParams.sequenceNumber);
+            } else {
+                openmct.layout.$refs.browseBar.sequenceNumber = undefined;
+            }
+
+
             if (changed.view && browseObject) {
                 let provider = openmct
                     .objectViews