Elements pool and drag drop (#2196)

* Implemented drag-and-drop composition

* Added composition policy for tables

* Reimplemented elements pool in Vue

* No need to resolve all objects on the navigated path

* Only show elements pool in edit mode

* Remove old elements pool

* Updated legacy code to use composition policy API

* Keep object in sync when mutated

src/plugins/displayLayout/DisplayLayout.vue

@@ -276,33 +276,14 @@
             },
             handleDrop($event) {
                 $event.preventDefault();
-                $event.stopPropagation();
 
                 let child = JSON.parse($event.dataTransfer.getData('domainObject'));
-                let duplicates = [];
-                let composition = this.newDomainObject.composition;
-                composition.forEach((object) => {
-                    if (this.openmct.objects.makeKeyString(JSON.parse(JSON.stringify(object))) ===
-                        this.openmct.objects.makeKeyString(child.identifier)) {
-                        duplicates.push(object);
-                    }
-                });
-
-                // Disallow adding a duplicate object to the composition
-                if (duplicates.length !== 0) {
-                    return;
-                }
 
                 let elementRect = this.$el.getBoundingClientRect();
                 this.droppedObjectPosition = {
                     x: $event.pageX - elementRect.left,
                     y: $event.pageY - elementRect.top
                 }
-                // TODO: use the composition API to add child once the default composition
-                // provider supports it instead of mutating the composition directly.
-                // this.composition.add(child).
-                composition.push(child.identifier);
-                this.mutate('composition', composition);
             },
             handleDragOver($event){
                 $event.preventDefault();

src/plugins/displayLayout/plugin.js

@@ -63,6 +63,13 @@ export default function () {
             }
         });
         openmct.types.addType('layout', DisplayLayoutType());
+        openmct.composition.addPolicy((parent, child) => {
+            if (parent.type === 'layout' && child.type === 'folder') {
+                return false;
+            } else {
+                return true;
+            }
+        });
         openmct.toolbars.addProvider({
             name: "Display Layout Toolbar",
             key: "layout",